/* Southbag Git — house style, ported from Southbag Social (which follows Identity, Office and
   Branch Locator): a shadow on everything, grey outset buttons, inset inputs that lean slightly,
   ridge-bordered panels, a menu bar of plain underlined links, a stretched logo, slow
   transitions. No sidebar. Some parts were never styled at all (.raw). No icons, no emoji, no colour except the occasional Southbag blue.
   The font is the browser default (monospace only for code, in forge.css).
   Media is never cropped or letterboxed: it is stretched to whatever box it is given. */

:root {
  --sb-blue: #3b87c6;          /* the Southbag blue, from the logo. Use sparingly. */
  --sb-ink: #171714;
  --sb-text: #171714;
  --sb-muted: #6c6a64;
  --sb-faint: #9a9892;
  --sb-bg: #efeee9;
  --sb-paper: #fbfaf6;
  --sb-paper-nav: #e4e2db;
  --sb-panel: rgba(255, 255, 255, 0.8);
  --sb-hairline: #c7c5bd;
  --sb-bevel: #dddddd;
  --sb-ridge: #dddddd;
  --sb-rule: #000000;           /* dashed dividers */
  --sb-button: #dcdbd6;         /* every button is this colour */
  --sb-button-hover: #d0cfca;
  --sb-button-text: #a3a19b;    /* on purpose: poor contrast, like the rest of Southbag */
  --sb-field: #ffffff;
  --sb-field-ink: #000000;
  --sb-shade-1: #e9e8e3;        /* greyscale shades for tables, diffs and code */
  --sb-shade-2: #dcdbd6;
  --sb-shade-3: #cfcec8;
  --sb-current: #dcdbd6;        /* background of the current nav item or tab */
  --sb-halo: 0 0 10px rgba(0, 0, 0, 0.35), inset 0 0 5px rgba(255, 255, 255, 0.3);
  --sb-halo-soft: 0 3px 12px rgba(0, 0, 0, 0.14);
  --sb-lift: 0 10px 20px rgba(0, 0, 0, 0.25), 0 15px 40px rgba(0, 0, 0, 0.2), inset 0 -2px 5px rgba(0, 0, 0, 0.15), inset 0 2px 5px rgba(255, 255, 255, 0.5);
  --sb-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.27), 2px 2px 4px rgba(0, 0, 0, 0.12);
  --sb-dialog: #f7f6f1;
  --sb-header: rgba(251, 250, 246, 0.94);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --sb-ink: #e6e4de;
  --sb-text: #e6e4de;
  --sb-muted: #a09e98;
  --sb-faint: #77756f;
  --sb-bg: #1b1b19;
  --sb-paper: #242421;
  --sb-paper-nav: #22221f;
  --sb-panel: rgba(40, 40, 37, 0.85);
  --sb-hairline: #4a4944;
  --sb-bevel: #555555;
  --sb-ridge: #555555;
  --sb-rule: #777777;
  --sb-button: #3a3a37;
  --sb-button-hover: #45453f;
  --sb-button-text: #6d6b66;
  --sb-field: #151513;
  --sb-field-ink: #e6e4de;
  --sb-shade-1: #2a2a27;
  --sb-shade-2: #33332f;
  --sb-shade-3: #3e3e3a;
  --sb-current: #33332f;
  --sb-halo: 0 0 10px rgba(0, 0, 0, 0.8);
  --sb-dialog: #262623;
  --sb-header: rgba(30, 30, 28, 0.95);
  color-scheme: dark;
}

@keyframes ambient-text {
  0%, 100% { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.27), 2px 2px 4px rgba(0, 0, 0, 0.12); }
  35% { text-shadow: 4px 2px 5px rgba(0, 0, 0, 0.25), -3px 3px 8px rgba(0, 0, 0, 0.15); }
  70% { text-shadow: -3px 4px 6px rgba(0, 0, 0, 0.2), 3px -2px 7px rgba(0, 0, 0, 0.18); }
}
@keyframes soft-shadow-wander {
  0%, 100% { box-shadow: 2px 5px 14px rgba(0, 0, 0, 0.16); }
  35% { box-shadow: 16px 5px 32px rgba(0, 0, 0, 0.28); }
  70% { box-shadow: -12px 16px 28px rgba(0, 0, 0, 0.22); }
}
@keyframes control-pulse {
  0%, 100% { background-color: #e2e1dc; }
  33% { background-color: #d2d1cc; }
  66% { background-color: #e8e7e2; }
}
@keyframes page-arrival { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-arrival { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes office-background {
  0%, 100% { background-color: #efeee9; }
  40% { background-color: #e3e2dd; }
  75% { background-color: #f5f5f2; }
}
@keyframes quiet-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes spin { to { transform: rotate(360deg); } }

*, *::before, *::after { box-sizing: border-box; }
* { text-shadow: var(--sb-text-shadow); }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  width: 100vw;
  overflow-x: hidden;
  color: var(--sb-text);
  background: var(--sb-bg);
  line-height: 1.4;
  animation: office-background 34s linear infinite;
}
:root[data-theme='dark'] body { animation: none; }
/* The halo from Identity, on every block. */
div, section, article, header, nav, aside, main, footer, form, li, ul, ol, img, video, button, input, textarea, select, label, table, a.btn, a.btn-large, a.btn-small, details {
  box-shadow: var(--sb-halo);
}
.layout, .layout > main, .row, .stack, .grow, .overlay, .track, svg, td, th, tr, tbody, thead { box-shadow: none; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1; margin: 0 0 0.4em; animation: ambient-text 19s linear infinite; }
h1 { font-size: clamp(2rem, 6vw, 4rem); transform: rotate(-1deg); transform-origin: left; max-width: 16ch; overflow-wrap: anywhere; }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0.45rem 0; }
a { color: var(--sb-ink); text-decoration: underline; transition: color 2.7s linear, background-color 3.2s linear; }
a:hover { background: var(--sb-paper-nav); font-weight: 700; }
img, video { max-width: 100%; object-fit: fill !important; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px dotted var(--sb-blue); outline-offset: 2px; }
label { display: inline-block; transform: skew(5deg) scale(1.02); transform-origin: left; }

.icon, svg.icon { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; background: var(--sb-paper); padding: 4px 8px; }
.muted { color: var(--sb-muted); }
.faint { color: var(--sb-faint); }
.eyebrow { font-weight: 700; font-size: 0.6rem; line-height: 1.3; letter-spacing: 2px; text-transform: uppercase; color: var(--sb-muted); }
.fine, .tiny { font-size: 0.78rem; color: var(--sb-muted); overflow-wrap: anywhere; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.right { text-align: right; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* ── Buttons: all the same grey, all hard to read ───────────────────── */
.btn, .btn-large, .btn-small, button {
  display: inline-block;
  border: 2px outset var(--sb-bevel);
  border-radius: 0;
  background: var(--sb-button);
  color: var(--sb-button-text);
  padding: 0.35rem 0.7rem;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--sb-lift);
  transition: background-color 1.6s linear, color 1.4s linear, box-shadow 2s linear;
  animation: control-pulse 11s linear infinite;
}
:root[data-theme='dark'] :is(.btn, .btn-large, .btn-small, button) { animation: none; }
button:nth-of-type(2n), .btn:nth-of-type(2n) { animation-delay: -4s; animation-duration: 14s; }
button:nth-of-type(3n), .btn:nth-of-type(3n) { animation-delay: -8s; animation-duration: 17s; }
.btn:hover, .btn-large:hover, .btn-small:hover, button:hover {
  background: var(--sb-button-hover); color: var(--sb-button-text); text-decoration: none; font-weight: inherit; animation: none;
}
.btn:active, .btn-large:active, .btn-small:active, button:active { border-style: inset; }
button:disabled, .btn:disabled, .btn-small:disabled, .btn-large:disabled { color: #c4c2bc; cursor: default; animation: none; }
.btn-large { font-size: 1.5rem; padding: 0.6rem 1.8rem; }
.btn-small { font-size: 0.8rem; padding: 0.2rem 0.5rem; }
/* The 3px button every Southbag product has. It grows on hover so it stays usable. */
.btn-tiny { font-size: 3px; padding: 2px 8px; transition: font-size 0.4s linear; }
.btn-tiny:hover, .btn-tiny:focus-visible { font-size: 11px; }
button.linkish { background: none; border: 0; box-shadow: none; animation: none; padding: 0; color: var(--sb-ink); text-decoration: underline; }

/* ── Forms ──────────────────────────────────────────────────────────── */
.field { display: block; margin: 0 0 14px; box-shadow: none; }
.field > span, .field-label { display: inline-block; font-weight: 700; margin-bottom: 4px; transform: skew(5deg) scale(1.05); transform-origin: left; }
.field .hint { display: block; font-size: 0.78rem; color: var(--sb-muted); margin-top: 4px; transform: none; }
.field.inline { display: flex; align-items: center; gap: 8px; }
.input, .textarea, .select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]), textarea, select {
  display: block; width: 100%; border: 2px inset var(--sb-bevel); border-radius: 0; background: var(--sb-field); color: var(--sb-field-ink);
  padding: 0.45rem; transform: skew(-1deg); outline: none;
}
.textarea, textarea { resize: vertical; min-height: 5rem; }
.checkbox { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; box-shadow: none; }
form.inline { display: inline-block; margin: 0; box-shadow: none; }

/* ── Header: masthead and menu bar ──────────────────────────────────── */
.site-header { position: relative; z-index: 30; background: var(--sb-header); border-bottom: 1px solid #aaa89f; animation: soft-shadow-wander 16s linear infinite; }
.masthead { display: flex; align-items: center; gap: 18px; min-height: 76px; padding: 10px 20px; box-shadow: none; }
.masthead .brand { display: flex; align-items: flex-end; gap: 10px; color: inherit; text-decoration: none; flex-shrink: 0; box-shadow: none; }
.masthead .brand:hover { background: none; }
/* The logo is stretched. It is always stretched. */
.masthead .brand img { width: 340px; height: 40px; object-fit: fill; display: block; box-shadow: none; }
.masthead .brand-name { font-size: 1.6rem; font-weight: 700; letter-spacing: -1px; line-height: 1; transform: rotate(-2deg); color: var(--sb-blue); }
.masthead-note { flex: 1; margin: 0; font-size: 0.8rem; color: var(--sb-muted); letter-spacing: 2px; text-transform: uppercase; padding-top: 14px; }
.masthead .account { display: flex; align-items: center; gap: 10px; flex-shrink: 0; box-shadow: none; }
.menubar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding: 4px 16px; background: var(--sb-paper-nav);
  border-top: 2px ridge var(--sb-ridge); box-shadow: none;
}
.menubar > a:not(.btn-small) { padding: 3px 12px; border-right: 1px solid var(--sb-hairline); box-shadow: none; }
.menubar > a:first-child { border-left: 1px solid var(--sb-hairline); }
.menubar > a[aria-current='page']:not(.btn-small) { background: var(--sb-current); font-weight: 700; color: var(--sb-blue); }
.menubar .menubar-new { margin-left: auto; }
.badge { font-weight: 700; color: var(--sb-blue); }
.badge::before { content: ' ('; } .badge::after { content: ')'; }
@media (max-width: 1100px) { .masthead .brand img { width: 240px; height: 34px; } .masthead-note { display: none; } .masthead { justify-content: space-between; } }
@media (max-width: 640px) {
  .masthead { flex-wrap: wrap; gap: 8px; padding: 8px 10px; min-height: 0; }
  .masthead .brand img { width: 70vw; height: 30px; }
  .masthead .brand-name { font-size: 1.2rem; }
  .masthead .signed-in { display: none; }
  .menubar { padding: 4px 6px; font-size: 0.9rem; }
  .menubar > a:not(.btn-small) { padding: 3px 8px; }
  .menubar .menubar-new { margin: 4px 0 2px auto; }
}

/* ── Bits nobody styled (class "raw") ───────────────────────────────── */
/* The business hours line, the breadcrumb trail, the footer's table and lists, the rejection notice
   and the cookie form are left at the browser's defaults: no halo, no text shadow, default blue
   links, default buttons and selects. */
.raw, .raw * { box-shadow: none !important; text-shadow: none; animation: none; transform: none; transition: none; }
body .raw a { color: revert; }
body .raw a:hover { background: none; font-weight: inherit; }
.raw :is(button, input, select, textarea) { all: revert; }
.raw h3 { font-size: revert; margin: revert; line-height: revert; font-weight: revert; }
body .raw p { margin: revert; }
.hours-line { margin: 4px 6px 0 0; text-align: right; }
.trail { margin: 2px 0 0 6px; font-size: 0.8rem; }
/* Menus without JavaScript: <details class="menu-details"><summary class="btn">Name</summary><div class="menu">…</div></details> */
.menu-details { position: relative; display: inline-block; box-shadow: none; }
.menu-details > summary { list-style: none; }
.menu-details > summary::-webkit-details-marker { display: none; }
.menu-details > .menu { position: absolute; right: 0; top: calc(100% + 6px); }
.menu-details.left > .menu { left: 0; right: auto; }
.menu { z-index: 50; min-width: 190px; padding: 5px; background: var(--sb-paper); border: 3px ridge var(--sb-ridge); display: flex; flex-direction: column; gap: 4px; animation: dialog-arrival 0.9s linear both; transform-origin: top right; }
.menu-details.left > .menu { transform-origin: top left; }
.menu button, .menu a { width: 100%; text-align: left; padding: 7px 10px; font-size: 0.9rem; }
.menu a { display: block; border: 2px outset var(--sb-bevel); background: var(--sb-button); color: var(--sb-button-text); text-decoration: none; box-shadow: var(--sb-lift); }
.menu a[aria-current='true'] { border-style: inset; color: var(--sb-ink); }
.menu form { box-shadow: none; margin: 0; }
.menu hr { border: 0; border-top: 1px dashed #999; margin: 2px 0; width: 100%; }
.menu .menu-note { font-size: 0.75rem; color: var(--sb-muted); padding: 2px 4px; }

/* ── Layout: full width, no sidebar ────────────────────────────────── */
.layout { max-width: 1200px; margin: 0 auto; padding: 1.3rem 1.25rem 60px; animation: page-arrival 1.4s linear both; }
.layout > main { min-width: 0; box-shadow: none; }
.layout.wide { max-width: 1400px; }
.layout.narrow { max-width: 600px; }
@media (max-width: 900px) { .layout, .layout.wide { padding: 0.8rem 0.75rem 40px; } }
.page-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; box-shadow: none; }
.page-head h1, .page-head h2 { margin: 0; }
.page-head .spacer { flex: 1; box-shadow: none; }

/* ── Panels ─────────────────────────────────────────────────────────── */
.south-board { display: grid; gap: 1rem; box-shadow: none; }
.south-card {
  border: 2px ridge var(--sb-ridge); background: var(--sb-panel); padding: 0.75rem; margin: 0 0 1rem; min-width: 0;
}
.south-board > .south-card { margin: 0; }
.south-board > .south-card:nth-child(3n + 2), .south-card.tilt { transform: rotate(-0.4deg); }
.south-board > .south-card:nth-child(5n) { transform: rotate(0.3deg); }
.south-card.flat { transform: none; }
.south-card > h2:first-child, .south-card > h3:first-child { margin-top: 0; }
.south-card h2 { font-size: 1.5rem; }
.divider { border: 0; border-top: 2px dashed var(--sb-rule); margin: 12px 0; box-shadow: none; }
.announcement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.85rem; padding: 0.75rem; border: 2px ridge var(--sb-ridge); background: var(--sb-panel); margin: 0 0 1rem; }
.announcement-grid > h2, .announcement-grid > h3 { grid-column: 1 / -1; margin: 0; }
.announcement-card { padding: 0.7rem; border: 2px dashed var(--sb-rule); background: rgba(255, 255, 255, 0.7); }
:root[data-theme='dark'] .announcement-card { background: rgba(0, 0, 0, 0.2); }
.announcement-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.announcement-card p { margin: 0 0 6px; font-size: 0.9rem; }
aside .announcement-grid { grid-template-columns: 1fr; }
aside .sticky { position: sticky; top: 96px; box-shadow: none; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; box-shadow: none; }
.south-item { border: 2px inset var(--sb-bevel); padding: 6px; background: var(--sb-paper); min-width: 0; }
.south-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── People ─────────────────────────────────────────────────────────── */
.avatar { --size: 32px; width: var(--size); height: var(--size); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; border: 1px solid #111; background: #ddd; color: #111; font-weight: 700; font-size: calc(var(--size) * 0.55); line-height: 1; overflow: hidden; text-decoration: none; }
.avatar.xs { --size: 20px; } .avatar.sm { --size: 26px; } .avatar.lg { --size: 72px; } .avatar.xl { --size: 160px; }
.user-link { font-weight: 700; }

/* ── Tabs ───────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 14px; padding: 0 0 6px; border-bottom: 2px dashed var(--sb-rule); box-shadow: none; }
.tabs a, .tabs button { background: none; border: 0; box-shadow: none; animation: none; padding: 2px 4px; color: var(--sb-ink); text-decoration: underline; font-size: 1rem; }
.tabs a[aria-current='page'], .tabs button[aria-selected='true'] { background: var(--sb-current); font-weight: 700; color: var(--sb-blue); }

/* ── Tables ─────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; box-shadow: none; }
.data-table { width: 100%; border-collapse: collapse; border: 2px ridge var(--sb-ridge); background: var(--sb-panel); }
.data-table th, .data-table td { text-align: left; padding: 6px 8px; border-bottom: 1px dashed #999; vertical-align: top; }
.data-table th { font-size: 0.8rem; color: var(--sb-muted); border-bottom: 2px dashed var(--sb-rule); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(2n) { background: var(--sb-shade-1); }
.data-table td.num, .data-table th.num { text-align: right; white-space: nowrap; }
.data-table tfoot td { border-top: 2px dashed var(--sb-rule); font-weight: 700; }

/* ── States ─────────────────────────────────────────────────────────── */
.empty { padding: 36px 16px; text-align: center; font-size: 0.8rem; color: var(--sb-muted); }
.empty p { margin: 4px 0; }
.loading { padding: 24px; text-align: center; font-size: 0.8rem; color: var(--sb-muted); animation: quiet-blink 2.4s linear infinite; box-shadow: none; }
.error-box { border: 4px double #111; background: #eee; padding: 10px 12px; margin: 0 0 14px; }
.notice { border: 4px double #111; background: #f5f5f3; padding: 12px 14px; margin: 0 0 16px; }
:root[data-theme='dark'] :is(.error-box, .notice) { background: #2a2a27; border-color: #999; }
.notice > :first-child, .error-box > :first-child { margin-top: 0; }
.notice > :last-child, .error-box > :last-child { margin-bottom: 0; }

/* ── Dialogs (Office) ───────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(28, 28, 26, 0.38); }
.dialog { width: min(440px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--sb-dialog); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26); animation: dialog-arrival 1.6s linear both; }
.dialog.wide { width: min(720px, 100%); }
.dialog .titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px 0; box-shadow: none; }
.dialog .titlebar img { width: 180px; height: 34px; box-shadow: none; }
.dialog .titlebar button { font-size: 0.7rem; }
.dialog .dialog-title { margin: 12px 20px 0; font-size: 1.6rem; }
.dialog .body { padding: 10px 20px; overflow: auto; box-shadow: none; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 9px; padding: 10px 20px 20px; flex-wrap: wrap; box-shadow: none; }
.dialog .retro-btn { min-width: 90px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { padding: 20px 20px 40px; font-size: 0.8rem; color: var(--sb-muted); border-top: 2px dashed var(--sb-rule); background: var(--sb-paper-nav); box-shadow: none; }
.site-footer .inner { max-width: 1400px; margin: 0 auto; box-shadow: none; }
.site-footer a { color: var(--sb-muted); }
.site-footer p { margin: 4px 0; }
.site-footer .fine-print { font-size: 0.72rem; }
.site-footer button { font-size: 0.75rem; }
/* The footer's raw block keeps the browser's look; only its colour follows the theme. */
.footer-raw { color: var(--sb-text); font-size: 1rem; }
.footer-raw img.secure-badge { display: inline-block; }

/* ── Frozen account banner ──────────────────────────────────────────── */
.frozen-banner { border-bottom: 4px double #111; background: var(--sb-paper-nav); padding: 8px 20px; font-weight: 700; text-align: center; }
:root[data-theme='dark'] .frozen-banner { border-bottom-color: #999; }

/* Controls that only work with JavaScript (filters, copy buttons) are hidden without it. */
html:not(.js) .js-only { display: none !important; }