/* =====================================================================
   Glaube Agent Network Portal - design system
   =====================================================================
   One file, no build step, no external fonts (the demonstration has to
   run without connectivity). Everything below is driven by the tokens in
   the first block, so density, radius, colour and motion can be changed
   in one place rather than hunted through the sheet.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
  /* Brand. Sampled from the Glaube wordmark (#1C8DAA) and extended
     into a usable ramp. */
  --brand-50:  #EDF7FA;
  --brand-100: #D6EDF3;
  --brand-200: #ACDBE7;
  --brand-300: #74C2D6;
  --brand-400: #3FA6C1;
  --brand-500: #1C8DAA;
  --brand-600: #15738C;
  --brand-700: #115C70;
  --brand-800: #0D4655;
  --brand-900: #09313C;

  /* Neutrals, barely cool. The reference leans on white space rather
     than lines, so these are used sparingly. */
  --n-0:   #FFFFFF;
  --n-25:  #FCFDFE;
  --n-50:  #F7F8FA;
  --n-100: #F1F3F6;
  --n-150: #E9ECF1;
  --n-200: #DFE3EA;
  --n-300: #C8CED8;
  --n-400: #9BA3B0;
  --n-500: #6D7684;
  --n-600: #545C69;
  --n-700: #3C434E;
  --n-800: #262B33;
  --n-900: #16191D;
  --n-950: #0C0E12;

  --green-50:  #E9F7F0;  --green-500: #14875A;  --green-600: #0F6B47;
  --amber-50:  #FDF4E3;  --amber-500: #A66A08;  --amber-600: #855405;
  --red-50:    #FDEDEC;  --red-500:   #C0362C;  --red-600:   #9C2A22;
  --blue-50:   #EDF7FA;  --blue-500:  #15738C;

  /* Semantic surfaces */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-50);
  --surface-sunk:  var(--n-100);
  --border:        var(--n-150);
  --border-strong: var(--n-200);
  --text:          var(--n-900);
  --text-2:        var(--n-600);
  --text-3:        var(--n-500);
  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-600);
  --accent-text:   #FFFFFF;
  --accent-soft:   var(--brand-50);
  --focus:         var(--brand-400);

  --ok-bg: var(--green-50);   --ok-tx: var(--green-600);   --ok-bd: transparent;
  --warn-bg: var(--amber-50); --warn-tx: var(--amber-600); --warn-bd: transparent;
  --stop-bg: var(--red-50);   --stop-tx: var(--red-600);   --stop-bd: transparent;
  --info-bg: var(--brand-50); --info-tx: var(--brand-700);

  /* Chrome. Light in the light theme: the navigation is part of the
     page rather than a dark frame around it. */
  --chrome:        var(--n-0);
  --chrome-2:      var(--n-0);
  --chrome-text:   var(--n-600);
  --chrome-strong: var(--n-900);
  --chrome-line:   var(--n-150);
  --chrome-hover:  var(--n-100);
  --chrome-active: var(--brand-500);

  /* Type. Base is 15px: the previous 13.5 was too small to read
     comfortably for a screen people sit in front of all day. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;
  --fs-xs: 12.5px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;

  /* Space, radius, elevation, motion */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 44px;
  --r-sm: 6px;  --r: 9px;     --r-lg: 12px; --r-xl: 16px;  --r-full: 999px;
  --sh-1: 0 1px 2px rgba(16, 30, 54, 0.04);
  --sh-2: 0 2px 6px rgba(16, 30, 54, 0.06);
  --sh-3: 0 6px 20px rgba(16, 30, 54, 0.08);
  --sh-4: 0 20px 48px rgba(16, 30, 54, 0.16);
  --t-fast: 110ms cubic-bezier(0.2, 0, 0.2, 1);
  --t: 170ms cubic-bezier(0.2, 0, 0.2, 1);

  --side-w: 244px;
  --top-h: 60px;
  color-scheme: light;
}

/* Dark theme. Applied by the toggle, or by the system when untouched. */
:root[data-theme="dark"] {
  --bg:            var(--n-950);
  --surface:       #14181E;
  --surface-2:     #191E25;
  --surface-sunk:  #1E242C;
  --border:        #262D36;
  --border-strong: #39424E;
  --text:          #E8EBF0;
  --text-2:        #A2ABBA;
  --text-3:        #7B8494;
  --accent:        var(--brand-300);
  --accent-hover:  var(--brand-200);
  --accent-text:   #0B0D11;
  --accent-soft:   rgba(63, 166, 193, 0.14);
  --focus:         var(--brand-300);

  --ok-bg: rgba(20, 135, 90, 0.16);   --ok-tx: #5FD3A3;   --ok-bd: rgba(20, 135, 90, 0.36);
  --warn-bg: rgba(166, 106, 8, 0.18); --warn-tx: #E8B25E; --warn-bd: rgba(166, 106, 8, 0.4);
  --stop-bg: rgba(192, 54, 44, 0.18); --stop-tx: #F08A80; --stop-bd: rgba(192, 54, 44, 0.4);
  --info-bg: rgba(37, 99, 176, 0.16); --info-tx: #8AB4E8;

  --chrome:        #111418;
  --chrome-2:      #0D1014;
  --chrome-line:   rgba(255, 255, 255, 0.07);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 1px 3px rgba(0, 0, 0, 0.5);
  --sh-3: 0 4px 14px rgba(0, 0, 0, 0.5);
  --sh-4: 0 20px 48px rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--n-950);
    --surface:       #14181E;
    --surface-2:     #191E25;
    --surface-sunk:  #1E242C;
    --border:        #262D36;
    --border-strong: #39424E;
    --text:          #E8EBF0;
    --text-2:        #A2ABBA;
    --text-3:        #7B8494;
    --accent:        var(--brand-300);
    --accent-hover:  var(--brand-200);
    --accent-text:   #0B0D11;
    --accent-soft:   rgba(63, 166, 193, 0.14);
    --focus:         var(--brand-300);
    --ok-bg: rgba(20, 135, 90, 0.16);   --ok-tx: #5FD3A3;   --ok-bd: rgba(20, 135, 90, 0.36);
    --warn-bg: rgba(166, 106, 8, 0.18); --warn-tx: #E8B25E; --warn-bd: rgba(166, 106, 8, 0.4);
    --stop-bg: rgba(192, 54, 44, 0.18); --stop-tx: #F08A80; --stop-bd: rgba(192, 54, 44, 0.4);
    --info-bg: rgba(37, 99, 176, 0.16); --info-tx: #8AB4E8;
    --chrome:        #111418;
    --chrome-2:      #0D1014;
    --chrome-line:   rgba(255, 255, 255, 0.07);
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 1px 3px rgba(0, 0, 0, 0.5);
    --sh-3: 0 4px 14px rgba(0, 0, 0, 0.5);
    --sh-4: 0 20px 48px rgba(0, 0, 0, 0.65);
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.011em; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-soft); }

.hide { display: none !important; }
.mono { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: -0.01em; }
.num { text-align: right; font-family: var(--mono); font-size: var(--fs-xs); white-space: nowrap; }
.sub { color: var(--text-2); font-size: var(--fs-sm); }
.hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }

/* Scrollbars, so dense tables do not look unfinished */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* Icons: an inline sprite, referenced with <svg class="i"><use href="#i-x"></svg> */
.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
     stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------
   3. Shell
   ------------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  height: var(--top-h); padding: 0 var(--sp-5);
  background: var(--chrome); border-bottom: 1px solid var(--chrome-line);
}
.mark { display: flex; align-items: center; gap: var(--sp-3); }
.mark img { height: 26px; width: auto; display: block; }
.mark .logo-dark { display: none; }
:root[data-theme="dark"] .mark .logo-light { display: none; }
:root[data-theme="dark"] .mark .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark .logo-light { display: none; }
  :root:not([data-theme="light"]) .mark .logo-dark { display: block; }
}
.mark .product {
  padding-left: var(--sp-3); border-left: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); }

.side-badge {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 5px 11px; border-radius: var(--r-full); white-space: nowrap;
}

.icon-btn, .link-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid transparent; color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500; padding: 7px 11px; border-radius: var(--r);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover, .link-btn:hover {
  background: var(--surface-2); color: var(--text); text-decoration: none;
}

.bell {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text);
  border-radius: var(--r); padding: 7px 12px;
  font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.bell:hover { background: var(--surface-2); border-color: var(--n-300); }
.bell .dot {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-500); color: #fff; font-size: 11px; font-weight: 600;
  border-radius: var(--r-full); border: 2px solid var(--chrome);
}

.live { display: inline-flex; align-items: center; gap: 7px;
        font-size: var(--fs-xs); color: var(--text-3); padding: 0 var(--sp-2); }
.live .led {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--green-500); box-shadow: 0 0 0 3px rgba(20, 135, 90, 0.14);
}
.live.off .led {
  background: var(--amber-500); box-shadow: 0 0 0 3px rgba(166, 106, 8, 0.16);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

.app { display: flex; min-height: calc(100vh - var(--top-h)); }

.side {
  width: var(--side-w); flex: none; display: flex; flex-direction: column;
  padding: var(--sp-4) 0 var(--sp-4);
  background: var(--chrome-2); border-right: 1px solid var(--chrome-line);
  position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h));
  overflow-y: auto;
}
.who { padding: 0 var(--sp-4) var(--sp-4); margin-bottom: var(--sp-2);
       border-bottom: 1px solid var(--border); }
.who strong { display: block; font-size: var(--fs-md); font-weight: 600; }
.who small { display: block; font-size: var(--fs-xs); color: var(--text-3); }

nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-3); }
.nav-group {
  padding: var(--sp-4) var(--sp-3) 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
}
.nav-b {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: 9px var(--sp-3); border: none; border-radius: var(--r-lg);
  background: transparent; color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500; text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-b .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.nav-b .i { opacity: 0.7; }
.nav-b:hover { background: var(--chrome-hover); color: var(--text); }
.nav-b:hover .i { opacity: 0.9; }
.nav-b.on {
  background: var(--chrome-active); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(28, 141, 170, 0.28);
}
.nav-b.on .i { opacity: 1; }
.pill {
  font-size: 11px; font-family: var(--mono); padding: 1px 7px;
  border-radius: var(--r-full); background: var(--surface-sunk); color: var(--text-2);
}
.nav-b.on .pill { background: rgba(255, 255, 255, 0.22); color: #fff; }
.pill.alert { background: var(--red-500); color: #fff; font-family: var(--font);
              font-weight: 600; }
.side-foot {
  margin-top: auto; padding: var(--sp-4) var(--sp-4) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-3);
}

.main { flex: 1; min-width: 0; padding: var(--sp-6) var(--sp-8) var(--sp-10); }
.main > *:last-child { margin-bottom: 0; }

.head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-5);
}
.head h1 { font-size: var(--fs-xl); margin-bottom: 4px; letter-spacing: -0.02em; }
.head-actions { display: flex; gap: var(--sp-2); flex: none; }

/* ---------------------------------------------------------------------
   4. Surfaces
   ------------------------------------------------------------------ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
  padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-4);
}
.card-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.card-h h2 { font-size: var(--fs-md); }
.card-h .sub { margin-top: 2px; }

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: var(--sp-4); margin-bottom: var(--sp-4);
}
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: var(--sp-4) var(--sp-5);
}
.kpi .l { font-size: var(--fs-xs); color: var(--text-2); font-weight: 500;
          letter-spacing: 0.01em; margin-bottom: 6px; }
.kpi .v { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.03em;
          line-height: 1.12; }
.kpi .d { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }

.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4);
         align-items: start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--sp-4); }
.two   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ---------------------------------------------------------------------
   5. Tables
   ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--sp-5) * -1);
              padding: 0 var(--sp-5); }
table { width: 100%; border-collapse: collapse; }
th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3); background: var(--surface);
  padding: 0 var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
td {
  padding: 13px var(--sp-3); font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable, tbody tr.click { cursor: pointer; }
tbody tr.clickable:hover, tbody tr.click:hover { background: var(--surface-2); }
tbody tr.clickable:active, tbody tr.click:active { background: var(--surface-sunk); }

/* ---------------------------------------------------------------------
   6. Status
   ------------------------------------------------------------------ */
.nexus-hits { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.nexus-hit {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); font-size: var(--fs-sm); width: 100%;
}
.nexus-hit:hover { border-color: var(--accent); background: var(--accent-soft); }

.row-act {
  font-size: var(--fs-xs); padding: 5px 8px; border-radius: var(--r);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  max-width: 150px;
}
.row-act:hover { border-color: var(--accent); color: var(--text); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap;
  border: 1px solid transparent;
}
.t-ok      { background: var(--ok-bg);   color: var(--ok-tx);   border-color: var(--ok-bd); }
.t-warn    { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-bd); }
.t-stop    { background: var(--stop-bg); color: var(--stop-tx); border-color: var(--stop-bd); }
.t-info    { background: var(--info-bg); color: var(--info-tx); border-color: transparent; }
.t-neutral { background: var(--surface-sunk); color: var(--text-2); }

/* ---------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------ */
.btn, .btn-2, .btn-d {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-lg); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.btn { background: var(--accent); color: var(--accent-text);
       box-shadow: 0 2px 8px rgba(28, 141, 170, 0.24); }
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(0.5px); }
.btn-2 {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong); box-shadow: var(--sh-1);
}
.btn-2:hover { background: var(--surface-2); border-color: var(--n-400); }
.btn-d { background: var(--red-500); color: #fff; }
.btn-d:hover { background: var(--red-600); }
.btn:disabled, .btn-2:disabled, .btn-d:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
.btn-s { padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--r); }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

/* ---------------------------------------------------------------------
   8. Forms
   ------------------------------------------------------------------ */
.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 500;
               color: var(--text-2); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px; font-size: var(--fs-sm);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--n-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 76px; resize: vertical; }
.field .hint { margin-top: 5px; }
.field input[type="checkbox"] { width: auto; accent-color: var(--accent); }

.filters {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: var(--sp-4);
}
.filters .field { margin-bottom: 0; min-width: 160px; }

.err {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--stop-bg); color: var(--stop-tx); border: 1px solid var(--stop-bd);
  border-radius: var(--r); padding: 9px 12px; font-size: var(--fs-sm);
  margin-bottom: var(--sp-3);
}

/* Onboarding form: required markers, department cards, memberships */
.req {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--stop-tx); margin-left: 5px;
}
.dept-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3); margin-top: var(--sp-2);
}
.dept {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4) 2px;
}
.dept-h {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-3);
}
.membership {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  margin-bottom: var(--sp-2); overflow: hidden;
}
.membership:has(.net-tick:checked) { border-color: var(--accent); background: var(--accent-soft); }
.membership-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-4); cursor: pointer; font-size: var(--fs-sm);
}
.membership-head input { width: auto; accent-color: var(--accent); }
.membership-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4);
  padding: 0 var(--sp-4) var(--sp-1); border-top: 1px solid var(--border);
  background: var(--surface);
}
@media (max-width: 640px) { .membership-body { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   9. Feed, empty, loading
   ------------------------------------------------------------------ */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
}
.feed li:last-child { border-bottom: none; }
.feed .when { flex: none; width: 104px; font-family: var(--mono);
              font-size: var(--fs-xs); color: var(--text-3); }
.feed .mk { flex: none; width: 7px; height: 7px; margin-top: 6px;
            border-radius: var(--r-full); background: var(--accent); }
.feed .mk.read { background: var(--border-strong); }
.feed .mk.warn { background: var(--amber-500); }
.feed .mk.stop { background: var(--red-500); }
.feed .unread { font-weight: 600; }
.feed .body { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }

.empty {
  text-align: center; padding: var(--sp-8) var(--sp-5);
  color: var(--text-3); font-size: var(--fs-sm);
}
.loading { padding: var(--sp-6); color: var(--text-3); font-size: var(--fs-sm); }

.skeleton { padding: var(--sp-1) 0; }
.skeleton div {
  height: 13px; margin-bottom: 10px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-sunk), var(--surface-2),
                              var(--surface-sunk));
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}
.skeleton div:nth-child(1) { width: 34%; height: 22px; margin-bottom: 18px; }
.skeleton div:nth-child(2) { width: 100%; }
.skeleton div:nth-child(3) { width: 93%; }
.skeleton div:nth-child(4) { width: 97%; }
.skeleton div:nth-child(5) { width: 66%; }
@keyframes shimmer { to { background-position: -200% 0; } }

.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 80;
  overflow: hidden; opacity: 0; transition: opacity var(--t); pointer-events: none;
}
.progress.on { opacity: 1; }
.progress i { display: block; height: 100%; width: 32%;
              background: var(--brand-400); animation: slide 1s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(360%); } }

.stale { opacity: 0.6; transition: opacity var(--t); }
@keyframes settle { from { background: var(--accent-soft); } to { background: transparent; } }
.just-changed { animation: settle 2.4s ease-out; }

/* ---------------------------------------------------------------------
   10. Payment clock
   ------------------------------------------------------------------ */
.clock { display: flex; margin: var(--sp-2) 0 var(--sp-1); }
.step { flex: 1; text-align: center; position: relative; }
.step .bead {
  width: 13px; height: 13px; margin: 0 auto 8px; border-radius: var(--r-full);
  background: var(--surface); border: 2px solid var(--border-strong);
  position: relative; z-index: 2; transition: all var(--t);
}
.step.done .bead { background: var(--ok-tx); border-color: var(--ok-tx); }
.step.now .bead {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 5.5px; left: 50%; width: 100%; height: 2px;
  background: var(--border); z-index: 1;
}
.step.done:not(:last-child)::after { background: var(--ok-tx); }
.step .n { font-size: var(--fs-xs); font-weight: 550; }
.step.pending .n { color: var(--text-3); font-weight: 400; }
.step .t { font-size: 10.5px; color: var(--text-3); margin-top: 3px;
           font-family: var(--mono); line-height: 1.4; }

/* ---------------------------------------------------------------------
   11. Callouts
   ------------------------------------------------------------------ */
.shield {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.shield .ico {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.shield strong { display: block; font-size: var(--fs-md); margin-bottom: 3px; }
.shield p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }

.evidence {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-2); margin: var(--sp-3) 0;
}
.evidence div { margin-bottom: 5px; }
.evidence div:last-child { margin-bottom: 0; }
.evidence b { color: var(--text); font-weight: 600; }

.ddline {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.ddline:last-child { border-bottom: none; }

.bar { height: 8px; border-radius: var(--r-full); background: var(--surface-sunk);
       overflow: hidden; }
.bar.fill { background: var(--accent); }
.bar i { display: block; height: 100%; background: var(--accent); }

/* ---------------------------------------------------------------------
   12. Comparison and variance
   ------------------------------------------------------------------ */
.qcmp { overflow-x: auto; }
.qcmp table { min-width: 540px; }
.qcmp th.win, .qcmp td.win { background: var(--ok-bg); }
.qcmp th.win { box-shadow: inset 0 -2px 0 var(--ok-tx); }
.chg td { padding: 6px var(--sp-3); font-size: var(--fs-sm); }
.varflag { background: var(--stop-bg); color: var(--stop-tx); font-weight: 600;
           border-color: var(--stop-bd); }
.varok { color: var(--ok-tx); font-family: var(--mono); font-size: var(--fs-xs); }

/* ---------------------------------------------------------------------
   13a. The desk document library
   ------------------------------------------------------------------
   A list, not a grid of tiles: people scan these by name. The whole row
   is the link, because a target the width of the card is easier to hit
   than a title, and it is the only thing the row does.
   ------------------------------------------------------------------ */
.lib-group + .lib-group { margin-top: var(--sp-4); }
.lib-head {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 0 var(--sp-2);
}
.lib { list-style: none; margin: 0; padding: 0; }
.lib-row {
  display: flex; align-items: center; gap: var(--sp-3);
  border-top: 1px solid var(--border);
}
.lib-row:first-child { border-top: none; }
.lib-draft { opacity: 0.62; }
.lib-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; color: inherit; text-decoration: none;
  border-radius: var(--r-md);
}
.lib-open:hover .lib-text strong { color: var(--accent); }
.lib-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lib-text strong { font-weight: 600; }
.lib-text .sub { font-size: var(--fs-sm); }
.lib-meta { font-size: var(--fs-xs); color: var(--text-3); }
.lib-acts { display: flex; gap: var(--sp-2); flex: none; }

/* The file-type marker. A coloured chip with the extension on it beats
   an abstract glyph: it says what will happen when the row is clicked. */
.lib-ico {
  flex: none; width: 30px; height: 36px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-2);
  position: relative;
}
.lib-ico::after {
  position: absolute; left: 0; right: 0; bottom: 5px; text-align: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.02em; color: #fff;
  padding: 1px 0; content: "FILE"; background: var(--text-3);
}
.lib-pdf::after    { content: "PDF";  background: #C0392B; }
.lib-image::after  { content: "IMG";  background: #7D5BA6; }
.lib-doc::after    { content: "DOC";  background: #1F5FA9; }
.lib-sheet::after  { content: "XLS";  background: #1E7A46; }
.lib-slides::after { content: "PPT";  background: #C05621; }

@media (max-width: 680px) {
  .lib-row { flex-wrap: wrap; }
  .lib-acts { padding-bottom: var(--sp-3); margin-left: 42px; }
}

/* ---------------------------------------------------------------------
   13. The document reader
   ------------------------------------------------------------------
   A document opens in a tab of its own, so it survives navigating the
   portal behind it. The page is a thin frame: a title bar saying what
   this is and where it came from, and the rest of the viewport given to
   the browser's own viewer.
   ------------------------------------------------------------------ */
.reader-body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
}
.reader-top {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.reader-back { display: flex; align-items: center; flex: none; }
.reader-back img { height: 26px; display: block; }
.reader-back .logo-dark { display: none; }
:root[data-theme="dark"] .reader-back .logo-light { display: none; }
:root[data-theme="dark"] .reader-back .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reader-back .logo-light { display: none; }
  :root:not([data-theme="light"]) .reader-back .logo-dark { display: block; }
}
.reader-id { flex: 1; min-width: 0; }
.reader-id h1 {
  margin: 0; font-size: var(--fs-lg); font-weight: 650; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-id .sub { margin-top: 1px; }
.reader-acts { display: flex; gap: var(--sp-2); flex: none; }
.reader-note {
  padding: var(--sp-3) var(--sp-5); background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-2);
}
.reader-stage { flex: 1; min-height: 0; display: flex; }
.reader-frame { flex: 1; width: 100%; border: 0; background: var(--bg-2); }
.reader-image { flex: 1; overflow: auto; padding: var(--sp-5); text-align: center; }
.reader-image img { max-width: 100%; height: auto; box-shadow: var(--sh-2); }
.reader-msg {
  margin: auto; padding: var(--sp-8) var(--sp-5); max-width: 460px;
  text-align: center; color: var(--text-2); font-size: var(--fs-sm);
}
.reader-msg a { color: var(--accent); }

@media (max-width: 680px) {
  .reader-top { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3); }
  .reader-id { order: 3; flex-basis: 100%; }
  .reader-id h1 { white-space: normal; }
  .reader-acts { margin-left: auto; }
}

.contract-body {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.65;
  white-space: pre-wrap; max-height: 360px; overflow: auto;
}

.count-note { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs);
              color: var(--text-3); }
.more-row { text-align: center; padding: var(--sp-3); }

/* ---------------------------------------------------------------------
   14. Modal
   ------------------------------------------------------------------ */
.ov {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  background: rgba(11, 13, 17, 0.55); backdrop-filter: blur(2px);
  animation: fade var(--t) both;
}
@keyframes fade { from { opacity: 0; } }
.ov.hide { display: none; }
.modal {
  width: 100%; max-width: 540px; max-height: 88vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-4); padding: var(--sp-6);
  animation: rise var(--t) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
/* A five-way quote comparison is five columns wide. Capping at 820px on
   a 1440px screen pushed columns off the edge for no reason; the modal
   now takes the room it has and still fits a laptop. */
.modal.wide { max-width: min(1180px, 94vw); }
.modal h2 { font-size: var(--fs-lg); margin-bottom: 4px; }
.modal .sub { margin-bottom: var(--sp-4); }
.acts {
  display: flex; gap: var(--sp-2); justify-content: flex-end;
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
/* ---------------------------------------------------------------------
   15. Toast
   ------------------------------------------------------------------ */
.toast {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 70;
  max-width: 360px; padding: 11px var(--sp-4);
  background: var(--n-900); color: #fff; border-radius: var(--r-lg);
  box-shadow: var(--sh-4); font-size: var(--fs-sm);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
:root[data-theme="dark"] .toast { background: var(--n-800); border: 1px solid var(--border); }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.bad { background: var(--red-600); }

/* ---------------------------------------------------------------------
   16. Sign in
   ------------------------------------------------------------------ */
.signin {
  min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(28, 141, 170, 0.16), transparent 62%),
    radial-gradient(800px 500px at 100% 100%, rgba(28, 141, 170, 0.10), transparent 60%),
    var(--bg);
}
.signin-logo { height: 34px; width: auto; display: block; margin-bottom: var(--sp-5); }
.signin-card {
  width: 100%; max-width: 420px; padding: var(--sp-8);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-4);
}
.signin-card h1 { font-size: var(--fs-xl); margin-bottom: 4px; }
.signin-card .sub { margin-bottom: var(--sp-5); }
.signin-card .btn { width: 100%; padding: 9px; }
.signin-hint {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border);
}

.signin-hint code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-sunk); padding: 1px 6px; border-radius: var(--r-sm);
}
.signin-logo { height: 40px; }

/* ---------------------------------------------------------------------
   17. Segmented control and long-form reading
   ------------------------------------------------------------------ */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-sunk); border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.seg button {
  border: none; background: transparent; color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 550; padding: 6px 16px;
  border-radius: var(--r-full); white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: #fff; box-shadow: var(--sh-1); }

/* A reading column, used by the help page. Prose wants a measure of
   about 70 characters; the tables and cards elsewhere do not. */
.doc { max-width: 1120px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-10);
       display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: var(--sp-8); }
.doc-nav { position: sticky; top: calc(var(--top-h) + var(--sp-6)); align-self: start;
           max-height: calc(100vh - var(--top-h) - var(--sp-10)); overflow-y: auto; }
.doc-nav a {
  display: block; padding: 5px var(--sp-3); border-radius: var(--r);
  font-size: var(--fs-sm); color: var(--text-2); border-left: 2px solid transparent;
}
.doc-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.doc-nav a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 550; }
.doc-nav .grp { padding: var(--sp-4) var(--sp-3) var(--sp-1); font-size: 10.5px;
                font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
                color: var(--text-3); }
.doc-body { min-width: 0; max-width: 760px; }
.doc-body h2 { font-size: var(--fs-lg); margin: var(--sp-8) 0 var(--sp-3);
               padding-top: var(--sp-5); border-top: 1px solid var(--border);
               scroll-margin-top: calc(var(--top-h) + var(--sp-5)); }
.doc-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--sp-5); }
.doc-body h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.doc-body p { font-size: var(--fs-md); line-height: 1.68; color: var(--text-2); }
.doc-body p strong, .doc-body li strong { color: var(--text); font-weight: 600; }
.doc-body ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5);
               font-size: var(--fs-md); line-height: 1.66; color: var(--text-2); }
.doc-body ul li { margin-bottom: 6px; }
.lede { font-size: var(--fs-lg); line-height: 1.68; color: var(--text-2);
        margin-bottom: var(--sp-4); }
.lede strong { color: var(--text); font-weight: 600; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps > li { counter-increment: step; position: relative;
              padding: 0 0 var(--sp-5) var(--sp-8); }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}
.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 12px; top: 28px; bottom: 4px;
  width: 1px; background: var(--border);
}
.where {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-family: var(--mono); font-size: 10.5px; white-space: nowrap;
  background: var(--surface-sunk); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--r-full);
}
.callout {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.callout p:last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--amber-500); }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
         margin: var(--sp-2) 0 var(--sp-3); }
.chain .s {
  font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border-strong); white-space: nowrap;
}
.chain .arrow { color: var(--text-3); font-size: var(--fs-xs); }
dl.gloss { margin: 0; }
dl.gloss dt { font-size: var(--fs-md); font-weight: 600; margin-top: var(--sp-3); }
dl.gloss dd { margin: 2px 0 0; font-size: var(--fs-md); line-height: 1.6;
              color: var(--text-2); }
.pane { display: none; }
.pane.on { display: block; }
.doc-foot { margin-top: var(--sp-8); padding-top: var(--sp-4);
            border-top: 1px solid var(--border);
            font-size: var(--fs-xs); color: var(--text-3); }

@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }
  .doc-nav { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px;
             padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
  .doc-nav a { border-left: none; border: 1px solid var(--border); }
  .doc-nav a.on { border-color: var(--accent); }
  .doc-nav .grp { display: none; }
}

/* ---------------------------------------------------------------------
   18. The agreement
   ------------------------------------------------------------------
   Legal documents have their own typographic conventions and the
   portal's UI scale is wrong for them: prose wants a measure of about
   90 characters, serif-adjacent spacing, and numbering that stays put.
   ------------------------------------------------------------------ */
.doc-card { padding: 0; overflow: hidden; }
.agreement {
  max-width: 860px; margin: 0 auto; padding: var(--sp-10) var(--sp-8);
  font-size: 14.5px; line-height: 1.72; color: var(--text);
}
.agreement p { margin: 0 0 var(--sp-3); }
.agreement .centered { text-align: center; }

.ag-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); padding-bottom: var(--sp-4); margin-bottom: var(--sp-6);
  border-bottom: 2px solid var(--accent);
}
.ag-logo { height: 34px; width: auto; }
.ag-top .logo-dark { display: none; }
:root[data-theme="dark"] .ag-top .logo-light { display: none; }
:root[data-theme="dark"] .ag-top .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ag-top .logo-light { display: none; }
  :root:not([data-theme="light"]) .ag-top .logo-dark { display: block; }
}
.ag-ref { text-align: right; font-family: var(--mono); font-size: var(--fs-xs);
          color: var(--text-3); line-height: 1.6; }

.ag-title { text-align: center; margin-bottom: var(--sp-8); }
.ag-title h1 {
  font-size: 24px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--brand-700); margin-bottom: 6px;
}
:root[data-theme="dark"] .ag-title h1 { color: var(--brand-300); }
.ag-sub { font-style: italic; color: var(--text-2); margin: 0 0 var(--sp-3); }
.ag-stamp {
  display: inline-block; margin: 0; padding: 4px 12px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--warn-bg); color: var(--warn-tx);
}
.ag-stamp.executed { background: var(--ok-bg); color: var(--ok-tx); }

/* A field the template leaves to be completed. The master template
   highlights these in yellow so nobody executes a half-filled contract;
   this does the same job. */
.tofill {
  background: #FFF3C4; color: #7A5A00; font-weight: 600;
  padding: 0 4px; border-radius: 3px; white-space: nowrap;
}
:root[data-theme="dark"] .tofill { background: rgba(255, 213, 79, 0.22); color: #F0C75E; }

.cl-head {
  font-size: 15.5px; font-weight: 650; color: var(--brand-700);
  margin: var(--sp-6) 0 var(--sp-3); padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .cl-head { color: var(--brand-300); }
.cl-num { margin-right: 6px; }
.clause { break-inside: avoid-page; }
.cl-p { padding-left: 38px; text-indent: -38px; }
.cl-sub {
  display: inline-block; width: 34px; text-indent: 0;
  font-weight: 650; color: var(--text);
}
.recitals { padding-left: var(--sp-4); }
.rec-letter { display: inline-block; width: 22px; font-weight: 650; }
.lead-in { margin-top: var(--sp-4); }

.schedule { break-before: page; margin-top: var(--sp-8); }
.sch-head {
  font-size: 15.5px; font-weight: 650; color: var(--brand-700);
  padding-bottom: 6px; margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--accent);
}
:root[data-theme="dark"] .sch-head { color: var(--brand-300); }
.sch-sub { font-size: 14px; font-weight: 650; margin: var(--sp-5) 0 var(--sp-2); }
table.sch { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4);
            font-size: 13.5px; }
table.sch th[scope="row"] {
  width: 34%; text-align: left; vertical-align: top; text-transform: none;
  letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 9px 12px; position: static;
}
table.sch td {
  border: 1px solid var(--border); padding: 9px 12px; vertical-align: top;
  font-size: 13.5px;
}
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 6px 14px; }
.svc-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm);
            color: var(--text-2); cursor: pointer; }
.svc-item input { width: auto; accent-color: var(--accent); }

.ticks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tick { white-space: nowrap; color: var(--text-2); }
.tick.on { color: var(--text); font-weight: 600; }
.other { margin-top: 6px; color: var(--text-2); }

.execution { break-inside: avoid-page; margin-top: var(--sp-8);
             padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.witness { margin-bottom: var(--sp-6); }
.sign { margin-bottom: var(--sp-8); break-inside: avoid; }
.sign-for { margin-bottom: var(--sp-3); }
.sign-line { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: 14px; }
.sign-line span { width: 92px; flex: none; font-weight: 600; font-size: 13.5px; }
.sign-line i {
  flex: 1; max-width: 380px; font-style: normal;
  border-bottom: 1px solid var(--text-3); min-height: 20px; padding: 0 4px 2px;
}
.sign-note { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2);
             max-width: 520px; line-height: 1.6; }
.ag-foot {
  margin-top: var(--sp-8); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-3); text-align: center;
}

@media (max-width: 720px) {
  .agreement { padding: var(--sp-5) var(--sp-4); font-size: 14px; }
  .cl-p { padding-left: 30px; text-indent: -30px; }
  .cl-sub { width: 28px; }
  table.sch th[scope="row"] { width: 40%; }
}

/* ---------------------------------------------------------------------
   19. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .split, .two { grid-template-columns: 1fr; }
  .main { padding: var(--sp-5) var(--sp-5) var(--sp-8); }
}
@media (max-width: 900px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .side { width: 64px; padding-left: 0; padding-right: 0; }
  .side nav { padding: 0 var(--sp-2); }
  .side .nav-b { justify-content: center; padding: 11px; }
  .nav-b .label, .nav-group, .who, .side-foot { display: none; }
  .nav-b { position: relative; }
  .nav-b .pill { position: absolute; top: 3px; right: 3px; font-size: 10px; padding: 0 5px; }
  .table-wrap { margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); }
  .feed .when { width: 86px; }
}
@media (max-width: 680px) {
  /* Tables become one card per row. The heading rides on the cell as
     data-label, so nothing is hidden and nothing scrolls sideways. */
  .table-wrap.stack { overflow-x: visible; margin: 0; padding: 0; }
  .table-wrap.stack table, .table-wrap.stack tbody,
  .table-wrap.stack tr, .table-wrap.stack td { display: block; width: auto; }
  .table-wrap.stack thead { display: none; }
  .table-wrap.stack tr {
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
  }
  .table-wrap.stack tr:last-child { border-bottom: none; }
  .table-wrap.stack td {
    display: grid; grid-template-columns: 8.5em 1fr; align-items: baseline;
    gap: var(--sp-3); padding: 3px 0; border: none; text-align: left !important;
  }
  /* A cell with several lines in it keeps them all in the value
     column, rather than the second line sliding under the label. */
  .table-wrap.stack td > * { grid-column: 2; min-width: 0; }
  .table-wrap.stack td::before {
    content: attr(data-label);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-3);
  }
  /* A cell with nothing in it, or a dash standing in for nothing, says
     nothing. Stacked one field per line, those are most of the height. */
  .table-wrap.stack td:empty,
  .table-wrap.stack td[data-blank] { display: none; }

  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .mark .product, .side-badge, .live span:last-child { display: none; }
  .mark img { height: 22px; }
  .main { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .modal { padding: var(--sp-5); border-radius: var(--r-lg); }
  .toast { left: var(--sp-3); right: var(--sp-3); max-width: none; }
  .kpis { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .kpi { padding: var(--sp-3) var(--sp-4); }
  .kpi .v { font-size: var(--fs-xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  /* A4 with a running header and page numbers, so the saved PDF is a
     document rather than a screenshot of an application. */
  @page {
    size: A4;
    margin: 20mm 18mm 18mm;
    @top-center {
      content: "Glaube Logistic for Shipping Services Company - Vendor / Agency Services Agreement";
      font-size: 8pt; color: #666;
    }
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages) "  |  CONFIDENTIAL";
      font-size: 8pt; color: #666;
    }
  }

  :root { --bg: #fff; --surface: #fff; --text: #000; --text-2: #333; --text-3: #555; }
  body { background: #fff; }

  .topbar, .side, .progress, .toast, .head-actions, .head, .shield,
  .btn, .btn-2, .btn-row, .ov, .nav-b, .doc-nav { display: none !important; }
  .app, .main { display: block; padding: 0; margin: 0; }
  .card, .kpi { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }

  /* The agreement prints on its own, at legal-document scale. */
  .doc-card { border: none !important; box-shadow: none !important; }
  .agreement {
    max-width: none; margin: 0; padding: 0;
    font-size: 10.5pt; line-height: 1.55; color: #000;
  }
  .ag-title h1, .cl-head, .sch-head { color: #1F3864 !important; }
  .ag-logo { height: 13mm; }
  .ag-top .logo-dark { display: none !important; }
  .ag-top .logo-light { display: block !important; }
  .ag-stamp { border: 1px solid #999; background: none !important; color: #333 !important; }
  .tofill { background: #FFF3C4 !important; color: #6b4e00 !important;
            -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.sch th[scope="row"] { background: #f4f5f7 !important;
                              -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .clause, .sign, .execution, table.sch { break-inside: avoid; }
  .cl-head, .sch-head, .sch-sub { break-after: avoid; }
  .schedule { break-before: page; }
  .ag-foot { display: none; }
  a[href]::after { content: ""; }
}