/* ================================================================================================
   portal.css — the one place the portal's type, colour and banners are defined.
   Built 2026-09-04 on Mathew's direction: "banners and fonts and colors as a shared system, except
   VCG colors are particular but banners and fonts same."

   WHY IT EXISTS. Before this, ten screens carried ten copies of the same intentions and none of them
   agreed. Five different banner implementations — `.banner` at three different sizes across the hub
   and the two VCG screens, `.sparc-su-banner` in the coach tool, `.err` on the board, `.note` on the
   preview — and Reference carried two of them at once, because it inherited the coach tool's when
   those screens moved onto it. Four screens of the ten loaded no brand font at all and were quietly
   running in Arial, the hub among them.

   HOW IT IS MEANT TO BE USED. Every page links this FIRST, then its own <style>. So this file sets
   the ground — faces, palette, banners — and a page may still say something particular about its own
   layout underneath. Anything a page says about type, colour or banners now belongs here instead.

   THE TWO BRANDS. SPARC is the default. A Vertical Connections screen sets data-brand="vcg" on its
   <html>, which swaps the accent colours and nothing else: the type is the same, the banners are the
   same, the spacing is the same. That is the whole of Mathew's exception — VCG looks like a different
   company, not like a different product.

   SIGNAL COLOURS ARE NOT BRAND COLOURS. A banner saying something went wrong must look the same on
   every screen in both companies, so those four colours are fixed here and are never re-pointed at
   an accent. A warning that changes colour depending on which company's screen you are on is a
   warning nobody learns to read.
   ================================================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400;1,600&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  /* ---- the faces ---------------------------------------------------------------------------- */
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ---- neutrals, shared by both companies ----------------------------------------------------- */
  --paper:#FAFAF8;
  --ink:#3E3935;
  --muted:#6B6560;
  --hair:#D9D9D6;
  --soft:#F0EFED;
  --white:#FFFFFF;

  /* ---- SPARC, the default ---------------------------------------------------------------------- */
  --brand-dark:#00263E;   /* navy   — headers, headings */
  --accent:#D73F09;       /* flame  — rules, active state, card tops */
  --accent-2:#FF8200;     /* amber  — hover, the live mark */
  --brand-quiet:#6B6560;

  /* ---- signals. Fixed. The same on every screen of both companies. ---------------------------- */
  --sig-ok:#2E6B3E;      --sig-ok-bg:#EDF3ED;
  --sig-warn:#B8860B;    --sig-warn-bg:#FDF6E7;
  --sig-err:#D73F09;     --sig-err-bg:#FBEEE7;
  --sig-info:#33657A;    --sig-info-bg:#EDF1F3;

  /* ---- one rhythm --------------------------------------------------------------------------- */
  --pad-banner: 12px 16px;
  --size-banner: 13.5px;
  --lh-banner: 1.55;
}

/* Vertical Connections: the accents move, nothing else does. */
[data-brand="vcg"]{
  --brand-dark:#22201E;   /* coal  */
  --accent:#A8501C;       /* rust  */
  --accent-2:#D9A04A;     /* gold  */
}

/* ================================================================================================
   TYPE. Set on body so a page's own rules can still speak about its own components, and because
   several pages already said `font-family: Arial` on body — those lines are being removed as this
   goes in, and this is what they are being removed in favour of.
   ================================================================================================ */
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .p-display{ font-family: var(--font-display); font-weight: 600; }

/* ================================================================================================
   BANNERS — one definition, four meanings.

   `.p-banner` is the name to use from now on. The four aliases beneath it are the names already
   written into ten screens' worth of markup and JavaScript; they are listed here so that unifying
   the LOOK did not require editing several hundred call sites, which is a much larger and riskier
   change than the one that was asked for. They can be collapsed to one name later, one screen at a
   time, with nothing depending on the order.
   ================================================================================================ */
.p-banner,
.banner,
.sparc-su-banner{
  display:block;
  padding: var(--pad-banner);
  font-family: var(--font-body);
  font-size: var(--size-banner);
  line-height: var(--lh-banner);
  margin: 0 0 14px;
  border-radius: 0;
  border-left: 3px solid var(--sig-info);
  background: var(--sig-info-bg);
  color: var(--ink);
}
.p-banner b, .banner b, .sparc-su-banner b{ color: var(--brand-dark); font-weight: 600; }

.p-banner--ok,   .banner--ok,  .sparc-su-banner--success{
  border-left-color: var(--sig-ok);   background: var(--sig-ok-bg);
}
.p-banner--warn, .banner--warn, .sparc-su-banner--warning, .banner--warning{
  border-left-color: var(--sig-warn); background: var(--sig-warn-bg);
}
.p-banner--err,  .banner--err, .banner--error, .sparc-su-banner--error{
  border-left-color: var(--sig-err);  background: var(--sig-err-bg);
}
.p-banner--info, .banner--info{
  border-left-color: var(--sig-info); background: var(--sig-info-bg);
}

/* The board and the VCG preview say the same things with different names. Same look, no exceptions. */
.err{
  padding: var(--pad-banner);
  font-family: var(--font-body);
  font-size: var(--size-banner);
  line-height: var(--lh-banner);
  border-left: 3px solid var(--sig-err);
  background: var(--sig-err-bg);
  color: var(--ink);
}
.note{
  padding: var(--pad-banner);
  font-family: var(--font-body);
  font-size: var(--size-banner);
  line-height: var(--lh-banner);
  border-left: 3px solid var(--sig-warn);
  background: var(--sig-warn-bg);
  color: var(--ink);
}
.note b{ color: var(--brand-dark); }

/* An empty banner should take up no room. Several screens render one unconditionally and fill it
   later, and an empty coloured strip reads as something having gone wrong. */
.p-banner:empty, .banner:empty, .sparc-su-banner:empty, .err:empty, .note:empty{
  display:none;
}

/* ================================================================================================
   THE STAFF SHELL. Moved here whole on 2026-09-06 (Portal110, phase 0 of review item 13) out of
   setup.html and money.html, which each carried an identical copy of it. Mathew's three rulings:
   the standard is the coach tool's look; it lives in this file; the scope is the staff pages.

   NOTHING ABOUT IT CHANGED IN THE MOVE except that seven hard-coded colours now point at the
   tokens above, which hold exactly those values: #00263E -> --brand-dark, #D73F09 -> --accent,
   #FF8200 -> --accent-2, #FAFAF8 -> --paper, #3E3935 -> --ink, #F0EFED -> --soft,
   #D9D9D6 -> --hair. That is what will let the two VCG staff pages take this same shell in coal
   and gold through data-brand="vcg", at phase 4. On a SPARC page it changes nothing, and the
   computed-style snapshot in Portal110/ is the proof of that.

   ORDER MATTERS AND HAS BEEN KEPT. The rules are in the order they sat in the pages, and the
   specificity repair of 2026-08-16 is still last and still whole. Splitting or reordering it
   re-opens the 1.37:1 contrast fault it exists to fix. A page's own <style> still loads after
   this file, so a page can still say something particular underneath.

   STILL HARD-CODED ON PURPOSE, left exactly as found: #6B6560 and #FFFFFF/#fff (neutrals),
   #8A8580 (the muted grey), and the handful of one-off signal tints. One to look at before
   phase 4: the eyebrow is #D9A04A, which is VCG's gold sitting inside the SPARC shell.
   ================================================================================================ */
  .sparc-su-wrap{
    --sparc-su-sp-2xs:.25rem; --sparc-su-sp-xs:.5rem;  --sparc-su-sp-sm:.75rem;
    --sparc-su-sp-md:1rem;    --sparc-su-sp-lg:1.5rem; --sparc-su-sp-xl:2rem;
    --sparc-su-sp-2xl:3rem;   --sparc-su-sp-3xl:4rem;
    /* 2026-09-04: was 2rem / 72rem. Reference's content column is 1080px wide with 24px
       sides; 1128 minus the two 24s is exactly that, and these boxes are border-box. */
    --sparc-su-pad-h:24px; --sparc-su-max:1128px; --sparc-su-radius:3px;
    font-family:'Montserrat',Arial,Helvetica,sans-serif;
    font-size:1rem; line-height:1.6; color:var(--ink); background:var(--paper); margin:0;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    min-height:100vh;
  }
  .sparc-su-wrap *{box-sizing:border-box;}
  .sparc-su-wrap button, .sparc-su-wrap input, .sparc-su-wrap select, .sparc-su-wrap textarea{
    font-family:inherit; font-size:.875rem; color:var(--ink);
  }
  .sparc-su-inner{max-width:var(--sparc-su-max); margin:0 auto; padding-left:var(--sparc-su-pad-h); padding-right:var(--sparc-su-pad-h);}

  /* ---- the banner, persistent across views ------------------------------------------------
     Rebuilt 2026-09-04 to BE Reference's banner rather than a second banner that resembles it.
     Mathew, having had the two measured side by side: "hero banners are still not same layout,
     dimensions, layout, font, components." They were not — ten differences, every one of them
     small enough to survive being looked at.

     Each value below is Reference's, measured off the live page:
       band     20px top and bottom, navy var(--brand-dark), and NO 4px orange strip above it
       halves   aligned on the text BASELINE, 18px apart, not centred 24px apart
       eyebrow  11px, normal weight, .22em, GOLD #D9A04A  (was 12px, medium, amber)
       title    Cormorant Garamond italic at a FIXED 25px  (was 24-32px, shrinking with width)
       address  12px, normal weight, solid var(--paper)  (was 13px, light, 82% white)
     Sign out is not in Reference's banner and is no longer in this one; it sits at the right-hand
     end of the tab strip, styled from Reference's own `.signout`. */
  .sparc-su-head{background:var(--brand-dark); color:var(--paper); padding:20px 0;}

  /* ONE HERO ACROSS THE STAFF SCREENS (2026-09-18, Mathew: "the heros are still not uniform ...
     they should all be like admin panel except the hubs and vcg pages"). Copied from admin.html,
     which is the one being matched. Additive: .sparc-su-head above is untouched, because this
     stylesheet is shared with the CLIENT portal and the client's hero is deliberately its own. */
  header.shell{background:var(--brand-dark);padding:20px 26px;}
  .shellrow{display:flex;align-items:baseline;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto;}
  .shelltitle{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:normal;font-size:25px;color:var(--paper);}
  .shellwho{font-size:12px;color:rgba(250,250,248,.6);}
  .shellwho a{color:rgba(250,250,248,.85);text-decoration:none;border-bottom:1px solid rgba(250,250,248,.3);}
  .sparc-su-head__row{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;}
  /* No bottom margin, and the title takes the page's own line height rather than a tighter one:
     the two together are what make this banner 100px deep and put the title's top edge at 40px,
     which is Reference's banner to the pixel. Measured, not judged. */
  .sparc-su-eyebrow{
    font-weight:400; font-size:11px; text-transform:uppercase; letter-spacing:.22em;
    color:#D9A04A; margin:0;
  }
  .sparc-su-head__h1{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-style:italic;
    font-size:25px; line-height:1.6; color:var(--paper); margin:0;
  }
  .sparc-su-head__meta{margin-left:auto; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;}
  .sparc-su-head__email{font-size:12px; font-weight:400; color:var(--paper);}
  /* Sign out now sits on the LIGHT tab row, so it is coloured for it. Reference's `.signout`,
     plus the margin that pushes it to the right-hand end. */
  .sparc-su-signout{
    margin-left:auto; background:none; border:none; color:#6B6560; font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; cursor:pointer; text-decoration:underline;
    padding:0;
  }
  .sparc-su-signout:hover{color:var(--brand-dark);}
  .sparc-su-nav{display:flex; gap:var(--sparc-su-sp-md); margin-top:var(--sparc-su-sp-md); flex-wrap:wrap;}
  .sparc-su-nav a, .sparc-su-navlink{
    font-weight:500; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.8); text-decoration:none; cursor:pointer; background:none; border:0; padding:0;
  }
  .sparc-su-nav a:hover, .sparc-su-navlink:hover{color:var(--paper);}
  .sparc-su-nav a.sparc-su-nav--active, .sparc-su-navlink.sparc-su-nav--active{color:var(--accent-2);}

  /* ---- the Clients dropdown (2026-08-19, Mathew's instruction) -------------------------------
     A <details> rather than a scripted menu: it opens and closes without any state of its own,
     and every re-render leaves it closed, which is what you want after choosing something. */
  .sparc-su-navmenu{position:relative;}
  .sparc-su-navmenu > summary{
    font-weight:500; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.8); cursor:pointer; list-style:none; user-select:none;
  }
  .sparc-su-navmenu > summary::-webkit-details-marker{display:none;}
  .sparc-su-navmenu > summary:hover{color:var(--paper);}
  .sparc-su-navmenu[open] > summary{color:var(--accent-2);}
  .sparc-su-navmenu__items{
    position:absolute; top:1.6rem; left:0; z-index:20; min-width:11rem;
    background:var(--brand-dark); border:1px solid rgba(255,255,255,.18); border-radius:var(--sparc-su-radius);
    padding:var(--sparc-su-sp-sm) 0; display:flex; flex-direction:column;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
  }
  .sparc-su-navmenu__items a{padding:var(--sparc-su-sp-xs) var(--sparc-su-sp-md); white-space:nowrap;}
  /* The two destinations that LEAVE this tool. Set apart from the groups on purpose: pressing one
     is not moving around inside the coach tool, it is going somewhere else. */
  /* THE GROUP'S TABS — rebuilt 2026-09-04 to BE the Reference screen's strip rather than to
     resemble it. Mathew, having been shown the two side by side: the strip had been put inside the
     navy banner and read as a row of links, which is what it was.

     Every value below is copied from `.rf-nav` in reference.html, which is the model:
       strip   flex row, no gaps, wraps, one hairline var(--hair) under the whole strip
       tab     12.5px uppercase, .09em letter-spacing, muted #6B6560, padding 10px 16px 9px,
               a 2px transparent line underneath, and no left padding on the first one so it
               lines up with the page margin
       open    navy var(--brand-dark), bold, and that 2px line turns flame var(--accent)
     The strip sits on the LIGHT page below the banner, not inside it. The 48px above it and the
     22px below match Reference's own rhythm — 22px is `.rf-nav`'s bottom margin, applied here to
     the top of the main column since the strip sits in its own band.

     The group's NAME is gone from in front of the tabs: the model has no such label, and the tabs
     name the group between them. Restoring it is one line if it turns out to be wanted.

     `away:` destinations are gone too. The Money group was the only one that had one — Revenue,
     when it still lived on the board — and it is a tab of this tool now. */
  .sparc-su-groupbar{background:var(--paper); padding:var(--sparc-su-sp-2xl) 0 0;}
  .sparc-su-groupbar + .sparc-su-main{padding-top:22px;}
  .sparc-su-tabs{
    display:flex; align-items:center; flex-wrap:wrap; gap:0;
    border-bottom:1px solid var(--hair); margin:0;
  }
  .sparc-su-tab{
    font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
    color:#6B6560; padding:10px 16px 9px; border-bottom:2px solid transparent;
    cursor:pointer; display:inline-block;
  }
  .sparc-su-tab:first-child{ padding-left:0; }
  .sparc-su-tab:hover{ color:var(--brand-dark); }
  .sparc-su-tab.on{ color:var(--brand-dark); border-bottom-color:var(--accent); font-weight:bold; }
  /* The way back to the hub, in the banner beside the address — copied from Reference's `.hlink`,
     which is where it is legible. It was previously tacked on the end of the tab row with no
     colour set on it at all, so the browser drew it in its own default blue on navy and it was
     effectively invisible. */
  .sparc-su-hublink{
    color:var(--paper); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
    text-decoration:none; border-bottom:1px solid rgba(250,250,248,.5); padding-bottom:2px;
  }
  .sparc-su-hublink:hover{border-bottom-color:var(--accent-2);}

  /* ---- main content ---- */
  .sparc-su-main{padding:var(--sparc-su-sp-2xl) 0 var(--sparc-su-sp-3xl);}
  .sparc-su-h2{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:clamp(1.375rem,2.6vw,1.75rem);
    line-height:1.2; color:var(--brand-dark); margin:0 0 var(--sparc-su-sp-xs);
  }
  .sparc-su-h3{
    font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:1.25rem;
    color:var(--brand-dark); margin:0 0 var(--sparc-su-sp-xs);
  }
  .sparc-su-rule{width:2.5rem; height:3px; border:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); margin:0 0 var(--sparc-su-sp-md);}
  .sparc-su-sub{font-size:.8125rem; font-weight:300; color:var(--ink); margin:0 0 var(--sparc-su-sp-lg); max-width:44rem;}

  .sparc-su-section{margin-bottom:var(--sparc-su-sp-2xl); padding-bottom:var(--sparc-su-sp-2xl); border-bottom:1px solid var(--hair);}
  /* A collapsed section has to LOOK pressable, or it reads as a heading that has lost its content.
     The marker is drawn rather than left to the browser's default triangle, which differs between
     Chrome and Safari and sits at a different baseline in each. */
  .sparc-su-section > summary{cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:.5rem;}
  .sparc-su-section > summary::-webkit-details-marker{display:none;}
  .sparc-su-section > summary::before{
    content:'\25B8'; color:var(--accent); font-size:.8em; transition:transform .12s ease; display:inline-block;
  }
  .sparc-su-section[open] > summary::before{transform:rotate(90deg);}
  .sparc-su-section > summary:hover{color:var(--accent);}
  .sparc-su-section__body{margin-top:var(--sparc-su-sp-sm);}
  .sparc-su-section:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0;}

  .sparc-su-card{background:var(--soft); border-radius:var(--sparc-su-radius); padding:var(--sparc-su-sp-lg); margin-bottom:var(--sparc-su-sp-lg);}

  /* ---- bookings board ---- */
  /* This file had no muted-text class, only .sparc-su-btn--quiet which is a button.
     Adding one rather than co-opting that, and namespacing it like everything else. */
  .sparc-su-muted{font-size:.75rem; color:#8A8580;}
  /* Contract controls (Portal102, 2026-09-06): a quiet block under each contract row, with the
     two forms folded shut so a contract that needs nothing stays one line tall. */
  .sparc-su-subblock{margin-top:8px; padding:10px 12px; border-left:3px solid var(--hair); background:var(--paper);}
  .sparc-su-subblock .sparc-su-list{margin:0 0 6px 18px; padding:0; font-size:.85rem; line-height:1.5;}
  .sparc-su-details{margin-top:6px;}
  .sparc-su-details > summary{cursor:pointer; font-size:.82rem; color:var(--brand-dark); font-weight:600;}
  .sparc-su-details > summary:hover{color:var(--accent);}
  .sparc-su-details[open] > summary{margin-bottom:6px;}
  .sparc-su-filters{display:flex; gap:var(--sparc-su-sp-xs); flex-wrap:wrap; align-items:center; margin-bottom:var(--sparc-su-sp-md);}
  .sparc-su-chip{
    font-family:inherit; font-size:.75rem; font-weight:500; letter-spacing:.04em;
    padding:var(--sparc-su-sp-2xs) var(--sparc-su-sp-sm); border-radius:var(--sparc-su-radius);
    border:1px solid var(--hair); background:#FFF; color:var(--ink); cursor:pointer;
  }
  .sparc-su-chip--on{background:var(--brand-dark); color:var(--paper); border-color:var(--brand-dark);}
  .sparc-su-chip__n{opacity:.7; margin-left:.35em;}
  .sparc-su-rowform{display:flex; gap:var(--sparc-su-sp-xs); flex-wrap:wrap; align-items:center;}

  /* The list of meeting kinds inside the bookings board's manage panel, 2026-09-08. A plain
     stack, not bullets: it is a set of rows each carrying a control, not prose. */
  .sparc-su-list-plain{list-style:none; margin:var(--sparc-su-sp-xs) 0; padding:0;}
  .sparc-su-list-plain li{display:flex; gap:var(--sparc-su-sp-xs); align-items:center;
    padding:2px 0; flex-wrap:wrap;}
  .sparc-su-rowform select, .sparc-su-rowform input[type=text]{
    font-family:inherit; font-size:.75rem; padding:var(--sparc-su-sp-2xs) var(--sparc-su-sp-xs);
    border:1px solid var(--hair); border-radius:var(--sparc-su-radius); background:#FFF;
    color:var(--ink); max-width:15rem;
  }
  .sparc-su-row--closed{color:#8A8580;}
  .sparc-su-bk-nowrap{white-space:nowrap;}
  /* 9rem, not 13: measured in the live DOM. At 13rem the table was 1099px in a 1036px
     container and the Action column sat off the right edge. */
  .sparc-su-bk-who{max-width:9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sparc-su-who--raw{color:#A32B08;}
  .sparc-su-tag{
    display:inline-block; font-size:.625rem; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; padding:2px 6px; border-radius:2px; white-space:nowrap;
  }
  .sparc-su-tag--unknown{background:#FBEDE9; color:#A32B08;}
  .sparc-su-tag--awaiting_decision{background:#FFF3E6; color:#8A4A00;}
  .sparc-su-tag--automatic{background:#E8EEF2; color:var(--brand-dark);}
  .sparc-su-tag--decided_by_person{background:#EDF3EE; color:#2E6B45;}
  .sparc-su-tag--unknown_closed{background:var(--soft); color:#8A8580;}
  .sparc-su-pre{
    font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.75rem; white-space:pre-wrap;
    margin:0; background:#FFF; padding:var(--sparc-su-sp-sm);
    border-radius:var(--sparc-su-radius); border:1px solid var(--hair);
  }

  /* ---- banners ---- */

  /* ---- buttons ---- */
  .sparc-su-btn{
    display:inline-block; background:var(--accent); color:#FFFFFF; text-decoration:none;
    font-family:'Montserrat',Arial,sans-serif; font-weight:500; font-size:.75rem;
    text-transform:uppercase; letter-spacing:.1em;
    padding:var(--sparc-su-sp-sm) var(--sparc-su-sp-lg); border-radius:var(--sparc-su-radius); border:0;
    white-space:nowrap; cursor:pointer; transition:background-color .18s ease;
  }
  .sparc-su-btn:hover{background:var(--accent-2);}
  .sparc-su-btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}
  .sparc-su-btn:disabled{background:var(--hair); color:var(--ink); cursor:not-allowed;}
  .sparc-su-btn--ghost{background:transparent; color:var(--accent); border:1px solid var(--accent);}
  .sparc-su-btn--ghost:hover{background:rgba(215,63,9,.08); color:var(--accent);}
  .sparc-su-btn--ghost:disabled{color:var(--hair); border-color:var(--hair); background:transparent;}
  .sparc-su-btn--quiet{
    background:transparent; color:var(--brand-dark); border:0; padding:var(--sparc-su-sp-2xs) 0;
    text-transform:none; letter-spacing:0; font-weight:500; font-size:.8125rem;
    border-bottom:1px solid var(--hair); border-radius:0;
  }
  .sparc-su-btn--quiet:hover{border-color:var(--brand-dark);}
  .sparc-su-btn--sm{padding:.4em var(--sparc-su-sp-md); font-size:.6875rem;}
  .sparc-su-btnrow{display:flex; gap:var(--sparc-su-sp-sm); flex-wrap:wrap; align-items:center;}

  /* ---- forms ---- */
  .sparc-su-field{margin-bottom:var(--sparc-su-sp-md);}
  .sparc-su-label{
    display:block; font-weight:500; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ink); margin-bottom:.4em;
  }
  .sparc-su-hint{font-size:.75rem; font-weight:300; color:var(--ink); margin:.35em 0 0; opacity:.85;}
  .sparc-su-input, .sparc-su-select, .sparc-su-textarea{
    width:100%; background:var(--paper); border:1px solid var(--hair); border-radius:var(--sparc-su-radius);
    padding:.55em var(--sparc-su-sp-sm); font-size:.875rem; color:var(--ink);
  }
  .sparc-su-input:focus, .sparc-su-select:focus, .sparc-su-textarea:focus{outline:2px solid var(--accent-2); outline-offset:1px; border-color:var(--brand-dark);}
  .sparc-su-textarea{min-height:5.5rem; resize:vertical; font-family:inherit;}
  .sparc-su-form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--sparc-su-sp-md) var(--sparc-su-sp-lg);}
  .sparc-su-check-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:var(--sparc-su-sp-xs) var(--sparc-su-sp-md);}
  .sparc-su-check{display:flex; align-items:center; gap:.5em; font-size:.8125rem; font-weight:300;}
  .sparc-su-check input{width:1rem; height:1rem; accent-color:var(--accent); flex:0 0 auto;}

  /* ---- tags / status pills ---- */
  .sparc-su-tag{
    display:inline-block; font-size:.6875rem; font-weight:500; letter-spacing:.08em; line-height:1.4;
    text-transform:uppercase; color:var(--ink); background:var(--hair);
    padding:.2em .6em; border-radius:300px; white-space:nowrap;
  }
  .sparc-su-tag--archived{background:var(--accent); color:var(--paper);}
  .sparc-su-tag--done{background:var(--brand-dark); color:var(--paper);}
  /* An outstanding agreement is the one thing in this tool that blocks a client from
     reaching their portal, so it carries Deep Orange rather than the neutral tag grey. */
  .sparc-su-tag--warn{background:var(--accent); color:#FFFFFF;}
  .sparc-su-tag--off{background:var(--hair); color:var(--ink); opacity:.7;}
  .sparc-su-tags{display:flex; flex-wrap:wrap; gap:.3em;}

  /* ---- tag picker (create/edit client, resource audience) ---- */
  .sparc-su-tagpicker{
    max-height:12rem; overflow-y:auto; border:1px solid var(--hair); border-radius:var(--sparc-su-radius);
    padding:var(--sparc-su-sp-sm); background:var(--paper); margin-bottom:var(--sparc-su-sp-sm);
  }
  .sparc-su-tagpicker .sparc-su-check-grid{gap:var(--sparc-su-sp-2xs) var(--sparc-su-sp-md);}
  .sparc-su-tagpicker-empty{font-size:.8125rem; font-weight:300; color:var(--ink); opacity:.75; margin:0;}

  /* ---- client list table ---- */
  .sparc-su-toolbar{display:flex; gap:var(--sparc-su-sp-md); align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--sparc-su-sp-lg);}
  .sparc-su-search{max-width:24rem; flex:1 1 16rem;}
  /* The amend screen's "what it would do" readout (2026-08-19). A plain two-column list rather
     than .sparc-su-table, which is a clickable row list with a 52rem minimum width and would
     force a scrollbar onto six short lines. */
  .sparc-su-kv{width:100%; border-collapse:collapse; font-size:.8125rem;}
  .sparc-su-kv td{padding:var(--sparc-su-sp-2xs) 0; vertical-align:top;}
  .sparc-su-kv td:first-child{color:var(--ink); padding-right:var(--sparc-su-sp-md);}
  .sparc-su-kv td:last-child{text-align:right; color:var(--brand-dark);}
  .sparc-su-kv tr:last-child td{border-top:1px solid var(--hair); padding-top:var(--sparc-su-sp-xs);}
  .sparc-su-req{color:var(--accent); font-weight:500;}

  /* The thin rule that separates daily work from the money items in the top bar (2026-08-19). */
  .sparc-su-nav__sep{
    width:1px; align-self:stretch; min-height:1rem;
    background:rgba(250,250,248,.28); margin:0 var(--sparc-su-sp-xs);
  }

  /* SETUP AND INSPECTION, at the foot of the page and operator-only (2026-08-19).
     Deliberately quiet: a hairline above it, small type, and the same link treatment as the top
     bar so it reads as navigation rather than as a warning. It sits ABOVE the footer line so the
     page still ends with the "internal use only" note. */
  .sparc-su-admin{
    border-top:1px solid var(--hair); margin-top:var(--sparc-su-sp-2xl);
    padding:var(--sparc-su-sp-md) 0;
  }
  .sparc-su-admin .sparc-su-inner{
    display:flex; align-items:center; gap:var(--sparc-su-sp-md); flex-wrap:wrap;
  }
  .sparc-su-admin__label{
    font-size:.6875rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em;
    color:#8a8580;
  }
  .sparc-su-admin .sparc-su-navlink{
    font-size:.8125rem; color:var(--ink); text-decoration:none; cursor:pointer;
    border:0; background:transparent; padding:0;
  }
  .sparc-su-admin .sparc-su-navlink:hover{color:var(--brand-dark);}
  .sparc-su-admin .sparc-su-nav--active{color:var(--accent);}

  .sparc-su-tablewrap{overflow-x:auto; border:1px solid var(--hair); border-radius:var(--sparc-su-radius); background:var(--paper);}
  .sparc-su-table{width:100%; border-collapse:collapse; min-width:52rem;}
  .sparc-su-table th{
    text-align:left; font-weight:500; font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ink); background:var(--soft); padding:var(--sparc-su-sp-sm) var(--sparc-su-sp-md); white-space:nowrap;
    border-bottom:1px solid var(--hair);
  }
  .sparc-su-table td{
    padding:var(--sparc-su-sp-sm) var(--sparc-su-sp-md); border-bottom:1px solid var(--hair);
    font-size:.8125rem; vertical-align:middle;
  }
  .sparc-su-table tbody tr{cursor:pointer;}
  .sparc-su-table tbody tr:hover{background:var(--soft);}
  .sparc-su-table tbody tr:last-child td{border-bottom:0;}
  .sparc-su-table tbody tr.sparc-su-tr--archived{opacity:.6;}
  .sparc-su-table tbody tr.sparc-su-tr--archived td.sparc-su-name{font-style:italic;}
  .sparc-su-table td.sparc-su-num{text-align:center; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.125rem; color:var(--brand-dark);}
  .sparc-su-table .sparc-su-name{font-weight:500; color:var(--brand-dark);}
  .sparc-su-empty{
    font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.0625rem; color:var(--ink);
    border:1px dashed var(--hair); border-radius:var(--sparc-su-radius); background:var(--paper);
    text-align:center; padding:var(--sparc-su-sp-xl); margin:0;
  }

  /* ---- detail rows (invitations, reports, worksheets, uploads, sessions) ---- */
  .sparc-su-row{
    display:flex; align-items:center; gap:var(--sparc-su-sp-md); padding:var(--sparc-su-sp-md) 0;
    border-bottom:1px solid var(--hair); flex-wrap:wrap;
  }
  .sparc-su-row:last-child{border-bottom:0;}
  .sparc-su-row__main{flex:1 1 14rem; min-width:0;}
  .sparc-su-row__title{font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:1.0625rem; color:var(--brand-dark); margin:0 0 .2em;}
  .sparc-su-row__meta{font-size:.75rem; font-weight:300; color:var(--ink); margin:0;}
  .sparc-su-row__actions{display:flex; gap:var(--sparc-su-sp-sm); align-items:center; flex-wrap:wrap;}
  /* An update's own message, plain text preserved with pre-wrap so a blank-line paragraph break
     typed here reads the same way it will in the client's portal, without building DOM by hand
     the way the client-facing page does (this tool already builds every row via esc() + innerHTML). */
  .sparc-su-updatebody{font-size:.8125rem; line-height:1.6; color:var(--ink); white-space:pre-wrap; margin:.3em 0 0;}

  .sparc-su-keyval{display:flex; flex-wrap:wrap; gap:var(--sparc-su-sp-lg); margin-bottom:var(--sparc-su-sp-lg);}
  .sparc-su-keyval__item{min-width:10rem;}
  .sparc-su-keyval__label{font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; font-weight:500; color:var(--ink); opacity:.75; margin:0 0 .2em;}
  .sparc-su-keyval__value{font-size:.875rem; color:var(--brand-dark); font-weight:500; margin:0;}

  .sparc-su-copyrow{display:flex; gap:var(--sparc-su-sp-sm); align-items:stretch; max-width:38rem;}
  .sparc-su-copyrow .sparc-su-input{background:var(--soft);}

  .sparc-su-upload{
    border:1px dashed var(--hair); border-radius:var(--sparc-su-radius); background:var(--paper);
    padding:var(--sparc-su-sp-lg); margin-top:var(--sparc-su-sp-sm);
  }

  /* ---- auth screen ---- */
  .sparc-su-authwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sparc-su-sp-xl);}
  .sparc-su-authcard{
    background:var(--soft); border-radius:var(--sparc-su-radius);
    max-width:26rem; width:100%; overflow:hidden;
  }
  .sparc-su-authcard__body{padding:var(--sparc-su-sp-2xl);}
  .sparc-su-authcard .sparc-su-eyebrow{color:var(--accent);}

  /* Staff banner. The client sign-in and this one were near-identical on 2026-07-26 and Mathew
     could not tell which surface he was on. Warm Brown is used nowhere on the client-facing
     pages, so this band is an instant signal that you are in the internal tool. */
  .sparc-su-authcard__band{
    background:var(--ink); padding:var(--sparc-su-sp-md) var(--sparc-su-sp-2xl);
    font-family:'Montserrat',Arial,sans-serif; font-weight:500; font-size:.75rem;
    letter-spacing:.22em; text-transform:uppercase; color:var(--accent-2);
  }
  .sparc-su-authcard__band span{color:rgba(255,255,255,.7); letter-spacing:.12em;}

  /* Loud confirmation. A one-line banner read as "nothing happened". */
  .sparc-su-sent{
    background:var(--brand-dark); border-radius:var(--sparc-su-radius);
    padding:var(--sparc-su-sp-xl); text-align:left;
  }
  .sparc-su-sent__h{
    font-family:'Cormorant Garamond',Georgia,serif; font-size:1.5rem; line-height:1.25;
    color:var(--paper); margin:0 0 var(--sparc-su-sp-sm);
  }
  .sparc-su-sent__p{
    font-family:'Montserrat',Arial,sans-serif; font-size:.875rem; line-height:1.7;
    color:rgba(255,255,255,.82); margin:0 0 var(--sparc-su-sp-md);
  }
  .sparc-su-sent__addr{color:var(--accent-2); font-weight:500;}

  /* Hold still while auth resolves, so the page does not flash through the sign-in panel. */
  .sparc-su-checking{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    font-family:'Montserrat',Arial,sans-serif; font-size:.75rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--ink); opacity:.55;
  }

  /* ---- footer ---- */
  .sparc-su-foot{background:var(--brand-dark); color:rgba(255,255,255,.62); padding:var(--sparc-su-sp-xl) 0; font-size:.6875rem; letter-spacing:.04em;}

  @media (max-width:767px){
    .sparc-su-wrap{--sparc-su-pad-h:1.25rem;}
    .sparc-su-head__meta{margin-left:0; width:100%; justify-content:space-between;}
    .sparc-su-row{flex-direction:column; align-items:stretch;}
    .sparc-su-row__actions{width:100%;}
    .sparc-su-copyrow{flex-direction:column;}
  }
  @media (max-width:420px){
    .sparc-su-authcard{padding:var(--sparc-su-sp-xl) var(--sparc-su-sp-lg);}
    .sparc-su-btn{width:100%; text-align:center;}
  }

  /* ---- SPECIFICITY REPAIR, 2026-08-16. Do not delete; read this before "tidying" it. ----
     `.sparc-su-wrap button, .sparc-su-wrap input, ...` near the top of this sheet is (0,1,1) and
     therefore outranks every (0,1,0) class rule below it. So each button's own colour was declared
     correctly and never reached the screen: the navy filter chips and Sign out rendered var(--ink) on
     var(--brand-dark), a contrast ratio of 1.37:1, and the solid orange buttons 2.5:1. Measured in the
     deployed page, not read off the file, because the file looks right.
     NOTHING HERE CHOOSES A NEW COLOUR. Each line restates the colour already declared for that
     class, at a specificity that wins. The :disabled and :hover lines are repeated at (0,3,0) so
     they still beat the (0,2,0) repairs above them; without that, disabled buttons would go white.
     Same family as trap 13 in the portal workplan: an equal-or-higher rule elsewhere in the file
     decides the outcome, and no amount of grepping this rule can see it. */
  /* Restated 2026-09-04 with Sign out's move to the light tab row. Left as it was, this line
     would have won at (0,2,0) and painted it near-white on near-white — the exact failure this
     repair block exists to prevent. */
  /* Its size is restated here too, 2026-09-04: `.sparc-su-wrap button{font-size:.875rem}` is
     (0,1,1) and was beating `.sparc-su-signout` at (0,1,0), so Sign out rendered at 14px where
     Reference's is 12px. Same class of fault as the colour this block already repairs, caught
     by measuring the live page rather than reading the file. */
  .sparc-su-wrap .sparc-su-signout{color:#6B6560; font-size:12px;}
  .sparc-su-wrap .sparc-su-signout:hover{color:var(--brand-dark);}
  .sparc-su-wrap .sparc-su-chip{color:var(--ink);}
  .sparc-su-wrap .sparc-su-chip--on{color:var(--paper);}
  .sparc-su-wrap .sparc-su-btn{color:#FFFFFF;}
  .sparc-su-wrap .sparc-su-btn--ghost{color:var(--accent);}
  .sparc-su-wrap .sparc-su-btn--quiet{color:var(--brand-dark);}
  .sparc-su-wrap .sparc-su-btn:disabled{color:var(--ink);}
  .sparc-su-wrap .sparc-su-btn--ghost:hover{color:var(--accent);}
  .sparc-su-wrap .sparc-su-btn--ghost:disabled{color:var(--hair);}
  /* ---- THE EXPENSE MODAL (2026-09-04) ------------------------------------------------------
     Over the journal rather than instead of it, so several entries can go in without leaving the
     list. The panel scrolls inside itself on a short window; the page behind does not move. */
  .sparc-su-modal{
    position:fixed; inset:0; z-index:100; background:rgba(0,38,62,.55);
    display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px;
    overflow:auto;
  }
  .sparc-su-modal__panel{
    background:var(--paper); border-radius:var(--sparc-su-radius); width:100%; max-width:52rem;
    box-shadow:0 18px 50px rgba(0,0,0,.3); border-top:3px solid var(--accent);
  }
  .sparc-su-modal__head{
    display:flex; align-items:center; justify-content:space-between; gap:var(--sparc-su-sp-md);
    padding:var(--sparc-su-sp-lg) var(--sparc-su-sp-xl) 0;
  }
  .sparc-su-modal__body{padding:var(--sparc-su-sp-md) var(--sparc-su-sp-xl) var(--sparc-su-sp-xl);}
  .sparc-su-modal__x{
    background:none; border:0; font-size:1.6rem; line-height:1; color:#6B6560; cursor:pointer; padding:0 4px;
  }
  .sparc-su-modal__x:hover{color:var(--brand-dark);}

  /* ---- A TABLE WHOSE LABELS AND LAST COLUMN STAY PUT ----------------------------------------
     Mathew, 2026-09-04: "make sure the right column and top row where lables are is locked so
     they do not disappear with scroll." Both need the panel itself to be the thing that scrolls —
     the wrapper scrolled sideways only, and a row of labels cannot stick to a container that does
     not scroll vertically. So the panel scrolls both ways and gets a height to scroll within.
     Backgrounds on the stuck cells are opaque on purpose: without them the rows show through. */
  .sparc-su-tablewrap--stick{overflow:auto; max-height:70vh;}
  .sparc-su-table--stick thead th{position:sticky; top:0; z-index:3;}
  .sparc-su-table--stick th:last-child,
  .sparc-su-table--stick td:last-child{
    position:sticky; right:0; background:var(--paper); box-shadow:-1px 0 0 var(--hair);
  }
  .sparc-su-table--stick thead th:last-child{z-index:4; background:var(--soft);}
  .sparc-su-table--stick tbody tr:hover td:last-child{background:var(--soft);}
