/* SKS matter portal.
 *
 * Served as a static asset with an mtime cache-buster, so styling changes take
 * effect on the next page load WITHOUT restarting the portal. That matters more
 * once chat exists: the agent processes are children of the web process, so a
 * restart ends every live conversation. Nobody should lose a session to a
 * colour change.
 *
 * Palette from the firm's logo: a medium corporate blue for the wordmark, a
 * neutral grey for the ampersand. The hexes are read by eye from the supplied
 * image and are marked in DESIGN.md as ESTIMATES; replace when the asset lands.
 *
 * THE THEME TRAP. A theme control has THREE states, because "system" is the
 * default and must stay reachable. Every token below is therefore defined in
 * all three places: bare :root, the prefers-color-scheme block, and the
 * [data-theme="dark"] block. A token defined in only one of the two dark blocks
 * is right in two paths and wrong in the third, and the wrong one is a toggle
 * pressed on a light-mode OS.
 *
 * And: give text an explicit colour wherever it gets a background. Nothing else
 * holds the contrast up if the background resolves differently than expected.
 */

:root{
  --paper:#F4F7F9; --panel:#FFFFFF;
  --ink:#12212B; --ink-2:#4A5C66; --ink-3:#7B8B94;
  --rule:#DDE4E8; --rule-2:#C4D0D7;
  --brand-band:#0E4C74;
  --brand:#17679B; --brand-deep:#0F4A72; --brand-wash:#EEF4F8; --brand-line:#9DBFD6;
  --grey:#9B9B9B;
  --on-brand:#FFFFFF;
  --ok:#1C6B48; --ok-bg:#E7F2EC;
  --warn:#8A5A12; --warn-bg:#FBF1DE;
  --code:#EEF2F4;
  --shadow:0 1px 2px rgba(18,33,43,.06);
  --s-act-bg:#E8F2EC; --s-act-fg:#2F6B4F;
  --s-tri-bg:#EFE7F7; --s-tri-fg:#6A3E9C;
  --s-itr-bg:#E4EDF8; --s-itr-fg:#2C5C90;
  /* Dormant was #8A6A2F at 4.38:1, UNDER the 4.5:1 floor, and at 11px/650
     uppercase that shortfall is exactly where it bites. #7E611B gives 5.1:1
     and keeps the amber. Applied here rather than left as a known issue. */
  --s-dor-bg:#F5EFE3; --s-dor-fg:#7E611B;
  --s-clo-bg:#EDEEF2; --s-clo-fg:#5C6474;
  --s-arc-bg:#EAE7EF; --s-arc-fg:#5B4F76;
  --sans:"Helvetica Neue",Helvetica,Arial,ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  /* In dark the deep blue becomes the ground, so the accent lifts to a lighter
     blue that still reads as the same family as the mark. */
  --paper:#0C161D; --panel:#132029;
  --ink:#E4EAEE; --ink-2:#A0B0B9; --ink-3:#78888F;
  --rule:#22323C; --rule-2:#354854;
  --brand-band:#0B2E45;
  --brand:#5AA8D6; --brand-deep:#8CC5E6; --brand-wash:#132A38; --brand-line:#2E5C77;
  --grey:#8E9AA0;
  --on-brand:#08131A;
  --ok:#79BE9C; --ok-bg:#12281F;
  --warn:#D6A554; --warn-bg:#2B2213;
  --code:#101B23;
  --shadow:none;
  --s-act-bg:#16301F; --s-act-fg:#7FB79A;
  --s-tri-bg:#2A1D3D; --s-tri-fg:#C4A3E8;
  --s-itr-bg:#182739; --s-itr-fg:#8FB6DF;
  --s-dor-bg:#302713; --s-dor-fg:#D2A45E;
  --s-clo-bg:#1E2438; --s-clo-fg:#98A0B0;
  --s-arc-bg:#241E33; --s-arc-fg:#A99BC7;
}}
:root[data-theme="dark"]{
  --paper:#0C161D; --panel:#132029;
  --ink:#E4EAEE; --ink-2:#A0B0B9; --ink-3:#78888F;
  --rule:#22323C; --rule-2:#354854;
  --brand-band:#0B2E45;
  --brand:#5AA8D6; --brand-deep:#8CC5E6; --brand-wash:#132A38; --brand-line:#2E5C77;
  --grey:#8E9AA0;
  --on-brand:#08131A;
  --ok:#79BE9C; --ok-bg:#12281F;
  --warn:#D6A554; --warn-bg:#2B2213;
  --code:#101B23;
  --shadow:none;
  --s-act-bg:#16301F; --s-act-fg:#7FB79A;
  --s-tri-bg:#2A1D3D; --s-tri-fg:#C4A3E8;
  --s-itr-bg:#182739; --s-itr-fg:#8FB6DF;
  --s-dor-bg:#302713; --s-dor-fg:#D2A45E;
  --s-clo-bg:#1E2438; --s-clo-fg:#98A0B0;
  --s-arc-bg:#241E33; --s-arc-fg:#A99BC7;
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* author display:flex otherwise wins */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}

/* ---------- header ---------- */
header{background:var(--panel);color:var(--ink);
       border-bottom:3px solid var(--brand);
       position:sticky;top:0;z-index:5}
.hdr{max-width:960px;margin:0 auto;padding:16px 20px;display:flex;
     align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:13px;min-width:0}
/* the bars-over-arc device from the firm's mark, as a masthead rule */
.bars{display:flex;gap:3px;align-items:flex-end;height:32px;flex:none}
.bars i{display:block;width:4px;background:var(--brand);border-radius:1px}
/* no-text: the bars are a decorative rule, nothing renders inside them */
.bars i:nth-child(1){height:32px;opacity:1}
.bars i:nth-child(2){height:28px;opacity:.76}
.bars i:nth-child(3){height:24px;opacity:.54}
.bars i:nth-child(4){height:20px;opacity:.32}
.firm{font-weight:700;letter-spacing:.13em;text-transform:uppercase;
      font-size:14px;line-height:1.3;color:var(--brand-deep);min-width:0}
.firm span{color:var(--grey)}
.who{font-size:13px;color:var(--ink-2);text-align:right;display:flex;
     align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.who a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule)}
.who a:hover{color:var(--brand-deep);border-bottom-color:var(--brand-line)}
.role{display:inline-block;background:var(--brand);color:var(--on-brand);
      font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px}
/* Theme control. A button, so it is reachable by keyboard and gets a real target. */
#themeb{background:transparent;border:1px solid var(--rule);color:var(--ink-2);
        font:inherit;font-size:12.5px;padding:5px 10px;cursor:pointer;
        display:inline-flex;align-items:center;gap:6px;min-height:32px}
#themeb:hover{border-color:var(--brand-line);color:var(--brand-deep)}

/* ---------- page ---------- */
.wrap{max-width:960px;margin:0 auto;padding:0 20px 72px}
h1{font-size:19px;letter-spacing:.10em;text-transform:uppercase;font-weight:700;
   color:var(--ink-2);margin:36px 0 6px}
.sub{color:var(--ink-3);font-size:14px;margin:0 0 20px}
.sub a{color:var(--brand-deep)}

/* ---------- rows ---------- */
ul.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
ul.rows li{border-bottom:1px solid var(--rule);background:var(--panel);
           color:var(--ink)}
ul.rows a,ul.rows .plain{display:block;padding:14px 18px 14px 15px;
   text-decoration:none;color:var(--ink);border-left:4px solid transparent}
ul.rows a:hover{background:var(--brand-wash);border-left-color:var(--brand)}
.nm{font-weight:600}
.meta{font-size:12.5px;color:var(--ink-3);letter-spacing:.05em;
      text-transform:uppercase;margin-top:3px}
.ok{color:var(--ok);font-weight:600}

/* ---------- cards, buttons ---------- */
.card{background:var(--panel);color:var(--ink);border:1px solid var(--rule);
      border-left:4px solid var(--brand);padding:26px 28px;margin:32px 0;
      box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:17px;letter-spacing:.08em;text-transform:uppercase;
         color:var(--brand-deep)}
.card p{margin:0;color:var(--ink-2)}
.btn{display:inline-block;margin-top:20px;background:var(--brand);
     color:var(--on-brand);text-decoration:none;padding:12px 26px;font-weight:600;
     letter-spacing:.09em;text-transform:uppercase;font-size:13.5px;
     min-height:44px;line-height:20px}
.btn:hover{background:var(--brand-deep)}
.tag{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.back{display:inline-block;margin:26px 0 0;font-size:13px;color:var(--ink-3);
      text-decoration:none;letter-spacing:.06em;text-transform:uppercase;
      min-height:44px;line-height:44px}
.back:hover{color:var(--brand-deep)}
footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--rule);
       font-size:12.5px;color:var(--ink-3)}

/* ---------- the folder chooser ---------- */
form.approve{background:var(--panel);color:var(--ink);
             border:1px solid var(--rule);
             border-left:4px solid var(--brand);padding:20px 22px;margin:0 0 16px;
             box-shadow:var(--shadow)}
.boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
       gap:4px 20px}
label.chk{font-size:15px;color:var(--ink-2);display:flex;align-items:center;
          gap:10px;min-height:44px;cursor:pointer}
label.chk input{width:18px;height:18px;accent-color:var(--brand);flex:none}
form.approve button{margin-top:16px;background:var(--brand);color:var(--on-brand);
   border:0;padding:12px 24px;font-weight:600;letter-spacing:.08em;
   text-transform:uppercase;font-size:13px;cursor:pointer;font-family:inherit;
   min-height:44px}
form.approve button:hover{background:var(--brand-deep)}

/* ==========================================================================
   Phone. These get opened on a handset in a courthouse corridor.
   16px body text so iOS does not zoom the page on focus, 44px targets, and
   nothing that depends on hover.
   ========================================================================== */
@media (max-width:760px){
  .hdr{padding:12px 16px}
  .wrap{padding:0 16px 56px}
  .firm{font-size:13px}
  .who{width:100%;justify-content:flex-start;text-align:left}
  h1{margin-top:28px;font-size:17px}
  ul.rows a,ul.rows .plain{padding:15px 14px}
  .card{padding:20px 18px;margin:24px 0}
  .boxes{grid-template-columns:1fr}
  form.approve{padding:16px 14px}
  .btn,form.approve button{width:100%;text-align:center}
}

/* A control you cannot reveal is a control you do not have: where there is no
   hover, nothing may depend on it. Nothing here hides on approach today, and
   this rule is the guard so that a later addition cannot quietly rely on it. */
@media (hover:none){
  .reveal{opacity:1!important;pointer-events:auto!important}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- chat ---------- */
.chat{background:var(--panel);color:var(--ink);border:1px solid var(--rule);
      border-left:4px solid var(--brand);padding:18px 20px;margin:0 0 16px;
      max-height:62vh;overflow-y:auto;box-shadow:var(--shadow)}
.msg{margin:0 0 18px;max-width:100%}
.msg:last-child{margin-bottom:0}
.who-lbl{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
         color:var(--ink-3);margin-bottom:4px}
.msg .body{white-space:pre-wrap;overflow-wrap:anywhere}
/* md.js output is block markup, so the pre-wrap that suits plain text must not
   also apply once it has rendered. */
.msg .body p,.msg .body ul,.msg .body ol,.msg .body table,.msg .body pre{
  white-space:normal}
.msg.user .body{background:var(--brand-wash);color:var(--ink);
                border-left:3px solid var(--brand-line);padding:10px 14px}
.msg.bot .body{color:var(--ink)}
.msg.sys .body{color:var(--ink-3);font-size:14px;font-style:italic}
.msg .meta.warn{color:var(--warn)}
.msg .body pre{background:var(--code);color:var(--ink);padding:12px 14px;
               overflow-x:auto;font-family:var(--mono);font-size:13px}
.msg .body code{background:var(--code);color:var(--ink);font-family:var(--mono);
                font-size:13.5px;padding:1px 4px}
.msg .body pre code{background:transparent;padding:0}
.msg .body table{border-collapse:collapse;width:100%;font-size:14px}
.msg .body th,.msg .body td{border:1px solid var(--rule);padding:6px 9px;
                            text-align:left}
.msg .body th{background:var(--brand-wash);color:var(--ink)}
.msg .body blockquote{border-left:3px solid var(--rule-2);margin:8px 0;
                      padding:2px 0 2px 14px;color:var(--ink-2)}
.tw{overflow-x:auto}
.composer{display:flex;gap:10px;align-items:flex-end;background:var(--panel);
          color:var(--ink);border:1px solid var(--rule);padding:14px;
          box-shadow:var(--shadow)}
.composer textarea{flex:1;font:inherit;font-size:16px;color:var(--ink);
   background:var(--paper);border:1px solid var(--rule);padding:10px 12px;
   resize:vertical;min-height:56px;font-family:inherit}
.composer button{background:var(--brand);color:var(--on-brand);border:0;
   padding:0 26px;min-height:56px;font-weight:600;letter-spacing:.08em;
   text-transform:uppercase;font-size:13px;cursor:pointer;font-family:inherit}
.composer button:hover{background:var(--brand-deep)}
@media (max-width:760px){
  .chat{max-height:56vh;padding:14px}
  .composer{flex-direction:column;align-items:stretch}
  .composer button{width:100%;min-height:48px;padding:12px}
}

/* ---------- seat linking ---------- */
pre.cmd{background:var(--code);color:var(--ink);padding:12px 14px;margin:10px 0;
        font-family:var(--mono);font-size:14px;overflow-x:auto}
.seatform{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.seatform input[type=password]{flex:1;min-width:240px;font:inherit;font-size:16px;
   color:var(--ink);background:var(--paper);border:1px solid var(--rule);
   padding:11px 12px;min-height:44px;font-family:var(--mono)}
.seatform button{background:var(--brand);color:var(--on-brand);border:0;
   padding:0 24px;min-height:44px;font-weight:600;letter-spacing:.08em;
   text-transform:uppercase;font-size:13px;cursor:pointer;font-family:inherit}
.seatform button:hover{background:var(--brand-deep)}
.seatform button.quiet{background:transparent;color:var(--ink-3);
   border:1px solid var(--rule);padding:0 16px;font-size:12px}
.seatform button.quiet:hover{background:transparent;color:var(--brand-deep);
   border-color:var(--brand-line)}
@media (max-width:760px){.seatform{flex-direction:column}
  .seatform button{width:100%;padding:12px}}
.usage{font-size:12.5px;color:var(--ink-3);letter-spacing:.04em;margin:-12px 0 18px}
.dot{display:inline-block;background:var(--brand);color:var(--on-brand);
     font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
     padding:1px 7px;margin-left:7px;border-radius:9px;vertical-align:middle}
.seatform select{flex:1;min-width:220px;font:inherit;font-size:16px;
   color:var(--ink);background:var(--paper);border:1px solid var(--rule);
   padding:10px 12px;min-height:44px;font-family:inherit}

/* ---------- dashboard: filter, sort, pins ---------- */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.filters input[type=search]{flex:1;min-width:220px;font:inherit;font-size:16px;
   color:var(--ink);background:var(--panel);border:1px solid var(--rule);
   padding:11px 12px;min-height:44px}
.filters select{font:inherit;font-size:15px;color:var(--ink);
   background:var(--panel);border:1px solid var(--rule);padding:10px 12px;
   min-height:44px;font-family:inherit}
.filters button{background:var(--brand);color:var(--on-brand);border:0;
   padding:0 22px;min-height:44px;font-weight:600;letter-spacing:.08em;
   text-transform:uppercase;font-size:12.5px;cursor:pointer;font-family:inherit}
.filters button:hover{background:var(--brand-deep)}
.filters a.clear{color:var(--ink-3);text-decoration:none;font-size:13px;
   letter-spacing:.06em;text-transform:uppercase;min-height:44px;line-height:44px}
.filters a.clear:hover{color:var(--brand-deep)}

/* ---------- case status pills ----------
   STATE STAYS, ACTIONS HIDE. An applied status is a fact about the matter and is
   always visible. The UNSET pill is revealed on approach, because there is
   nothing to state yet and it is then purely an action.

   Approach means hover OR keyboard focus OR the menu being open. And under
   @media (hover:none) everything shows: a control you cannot reveal is a control
   you do not have, and a phone has no hover at all.

   Hidden with opacity plus pointer-events, never display:none, so the row does
   not reflow and jump under the cursor. */
.statuswrap{position:relative;display:flex;align-items:center;padding-right:10px}
.pillbtn{font:inherit;font-size:11px;font-weight:650;text-transform:uppercase;
  letter-spacing:.04em;border-radius:999px;padding:4px 11px;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  min-height:28px;display:inline-flex;align-items:center;background:transparent}
summary.pillbtn{list-style:none}
summary.pillbtn::-webkit-details-marker{display:none}

.s-active     {background:var(--s-act-bg);color:var(--s-act-fg)}
.s-trial-prep {background:var(--s-tri-bg);color:var(--s-tri-fg)}
.s-in-trial   {background:var(--s-itr-bg);color:var(--s-itr-fg)}
.s-dormant    {background:var(--s-dor-bg);color:var(--s-dor-fg)}
.s-closed     {background:var(--s-clo-bg);color:var(--s-clo-fg)}
.s-archive    {background:var(--s-arc-bg);color:var(--s-arc-fg)}
/* Unset: transparent, outlined, and dimmed. It is an invitation, not a claim. */
.s-unset{background:transparent;color:var(--ink-3);border-color:var(--ink-3);
         opacity:.5}

/* The reveal. Only the unset pill participates. */
li.matterrow .statuswrap.reveal{opacity:0;pointer-events:none;
  transition:opacity .12s ease}
li.matterrow:hover .statuswrap.reveal,
li.matterrow:focus-within .statuswrap.reveal,
.statuswrap.reveal:has(details[open]){opacity:1;pointer-events:auto}
@media (hover:none){
  li.matterrow .statuswrap.reveal{opacity:1!important;pointer-events:auto!important}
}

/* An applied status also flags the row's left edge, so it is legible without
   reading the pill. */
li.matterrow.has-status > a{border-left-color:var(--brand-line)}

/* The menu. A <details>, so it works with no JavaScript and is keyboard
   reachable; the page still functions if a script fails to parse. */
.statuswrap details{position:relative}
.statusmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;
  background:var(--panel);color:var(--ink);border:1px solid var(--rule);
  box-shadow:0 6px 20px rgba(18,33,43,.16);padding:6px;min-width:172px}
.statusmenu form{margin:0}
.statusmenu button{display:block;width:100%;text-align:left;font:inherit;
  font-size:13px;color:var(--ink);background:transparent;border:0;
  padding:9px 10px;cursor:pointer;min-height:40px;font-family:inherit}
.statusmenu button:hover{background:var(--brand-wash);color:var(--ink)}
.statusmenu .sep{height:1px;background:var(--rule);margin:5px 0}
/* no-text: a 1px divider, nothing renders inside it */
.statusmenu button.clear{color:var(--ink-3)}
@media (max-width:760px){
  .statusmenu{right:auto;left:0;min-width:200px}
}
.livecount{font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
.cachenote{font-size:12px;color:var(--ink-3);margin:-8px 0 16px;
           letter-spacing:.03em;width:100%}
.cachenote a{color:var(--brand-deep)}
form.approve button.quiet{background:transparent;color:var(--ink-3);
   border:1px solid var(--rule);margin-left:8px}
form.approve button.quiet:hover{background:transparent;color:var(--brand-deep);
   border-color:var(--brand-line)}
.seatform input[type=text]{flex:1;min-width:240px;font:inherit;font-size:16px;
   color:var(--ink);background:var(--paper);border:1px solid var(--rule);
   padding:11px 12px;min-height:44px}
label.chk .meta{text-transform:none;letter-spacing:0;margin:0 0 0 6px}

/* ==========================================================================
   HEADER MENU
   One menu under the user's name, a card at rest rather than a transparent
   border that materialises under the cursor. On touch, and for anyone not
   already moving a mouse across it, the old arrangement said nothing.
   ========================================================================== */
details.umenu{position:relative}
summary.umsum{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;font-size:13.5px;color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);padding:8px 13px;
  min-height:40px;border-radius:3px}
summary.umsum::-webkit-details-marker{display:none}
summary.umsum:hover,summary.umsum:focus-visible,
details.umenu[open] summary.umsum{border-color:var(--brand);
  box-shadow:0 0 0 2px var(--brand-wash)}
.umcar{font-size:10px;color:var(--ink-3);transition:transform .12s ease}
details.umenu[open] .umcar{transform:rotate(180deg)}
.umbox{position:absolute;right:0;top:calc(100% + 7px);z-index:40;min-width:236px;
  background:var(--panel);color:var(--ink);border:1px solid var(--rule);
  box-shadow:0 8px 26px rgba(18,33,43,.18);padding:5px}
.umrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  font:inherit;font-size:14px;color:var(--ink);background:transparent;border:0;
  padding:10px 11px;min-height:44px;cursor:pointer;text-decoration:none;
  font-family:inherit}
.umrow:hover{background:var(--brand-wash);color:var(--ink)}
.umico{width:18px;flex:none;text-align:center;color:var(--ink-3);font-size:14px}
.umlbl{flex:1}
.umbadge{background:var(--brand);color:var(--on-brand);font-size:11px;
  font-weight:600;padding:1px 7px;border-radius:9px;min-width:20px;
  text-align:center}
.umsep{height:1px;background:var(--rule);margin:5px 2px}
/* no-text: a 1px divider, nothing renders inside it */

/* ==========================================================================
   CASE CARD: STATE STAYS, ACTIONS HIDE
   ========================================================================== */
li.item{display:flex;align-items:center;gap:10px;background:var(--panel);
  color:var(--ink);border-bottom:1px solid var(--rule);padding:0 14px 0 4px;
  border-left:4px solid transparent}
li.item:hover,li.item:focus-within{background:var(--brand-wash);
  border-left-color:var(--brand)}
li.item.has-status{border-left-color:var(--brand-line)}
a.itemname{flex:1;min-width:0;padding:15px 4px;text-decoration:none;
  color:var(--ink)}
.acts{display:flex;align-items:center;gap:8px;min-width:200px;
      justify-content:flex-end}
/* A FLOOR, not a fixed width. A hard number is right only until someone edits
   a label; .act never wraps, so a fixed width breaks the row instead. */
/* LAYOUT AND THE REVEAL HOOK LIVE ON .act. APPEARANCE LIVES ON .actbtn.
   They used to be one class, and because Request sync is a <button> inside a
   <form>, the form matched the appearance rule as well: a bordered box drawn
   around a bordered box, which is why the two controls did not look alike.
   Splitting them lets the form be an invisible wrapper while the <a> and the
   <button> render from the same rule and are therefore identical by
   construction rather than by two rules being kept in step. */
.act{white-space:nowrap}
.actform{display:inline-flex;margin:0;padding:0}

.actbtn{font:inherit;font-family:inherit;font-size:12px;font-weight:600;
  letter-spacing:.055em;text-transform:uppercase;text-decoration:none;
  color:var(--brand-deep);background:transparent;
  /* The resting border is the page rule, not the brand colour: at rest these
     are two quiet outlines, and the colour arrives on approach. */
  border:1px solid var(--rule);border-radius:7px;
  /* One height and one padding for both, so they cannot drift apart. The left
     padding is smaller because the icon carries its own optical space. */
  min-height:34px;padding:0 12px 0 10px;gap:7px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;white-space:nowrap;
  transition:background-color .13s ease,border-color .13s ease,color .13s ease}
/* Toned with COLOUR, never opacity. Every opacity rule in this sheet
   belongs to the row reveal mechanism, and adding another one here made
   the specificity check compare an icon against the hide rule. */
.actic{flex:0 0 auto;color:var(--ink-3);transition:color .13s ease}

/* SUBTLE FILL ON APPROACH. brand-wash is the palette's lightest brand tint, so
   the control reads as lifting rather than as changing state. */
.actbtn:hover,.actbtn:focus-visible{background:var(--brand-wash);
  border-color:var(--brand-line);color:var(--brand)}
.actbtn:hover .actic,.actbtn:focus-visible .actic{color:var(--brand)}
.actbtn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.actbtn:active{background:var(--brand-line);border-color:var(--brand)}

/* ---- THE HIDE RULE. Keep it the LEAST specific thing in this block. ----
   Naming exceptions INSIDE the hide selector (.act:not(.chat)) piles on
   specificity and outranks every reveal rule including :hover, so everything
   hides and nothing brings it back. Exceptions get their own selectors below. */
.acts>.act{opacity:0;pointer-events:none;transition:opacity .12s ease}
.item>.statuswrap.reveal{opacity:0;pointer-events:none;transition:opacity .12s ease}
.item>.pinslot{display:none}

/* ---- exceptions, in their own selectors ---- */
.acts>.act.chat{opacity:1;pointer-events:auto}
.item>.pinslot.on{display:flex}

/* ---- APPROACH IS THREE THINGS, not one. Hover alone strands every
   non-mouse user. ---- */
.item:hover>.acts>.act,
.item:focus-within>.acts>.act,
.item.sel>.acts>.act{opacity:1;pointer-events:auto}
.item:hover>.statuswrap.reveal,
.item:focus-within>.statuswrap.reveal,
.item.sel>.statuswrap.reveal{opacity:1;pointer-events:auto}
.item:hover>.pinslot,
.item:focus-within>.pinslot,
.item.sel>.pinslot{display:flex}

.pinslot{align-items:center;flex:none}
button.pin{background:transparent;border:1px solid transparent;color:var(--ink-3);
  font-size:19px;line-height:1;cursor:pointer;width:36px;height:36px;
  font-family:inherit;display:flex;align-items:center;justify-content:center}
button.pin:hover{color:var(--brand)}
button.pin.on{color:var(--brand)}

/* ---- TOUCH. A control you cannot reveal is a control you do not have. ---- */
@media (hover:none){
  .acts>.act{opacity:1!important;pointer-events:auto!important}
  .item>.statuswrap.reveal{opacity:1!important;pointer-events:auto!important}
  .item>.pinslot{display:flex!important}
}
@media (max-width:760px){
  li.item{flex-wrap:wrap;padding:10px 12px}
  a.itemname{flex:1 1 100%;padding:6px 0}
  .acts{min-width:0;width:100%;justify-content:flex-start;flex-wrap:wrap;
        padding-bottom:8px}
  .umbox{min-width:0;width:min(88vw,300px)}
}

/* ---------- nav, assembled ---------- */
a.lockup{display:flex;align-items:center;gap:13px;text-decoration:none;
         color:var(--brand-deep)}
.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.navl{font-size:13.5px;color:var(--ink-2);text-decoration:none;
      letter-spacing:.04em}
.navl:hover{color:var(--brand-deep)}
.navsep{color:var(--rule-2);font-size:13px}
.grow{flex:1}
.csbadge{background:var(--brand);color:var(--on-brand);font-size:11px;
  font-weight:600;padding:1px 7px;border-radius:9px;margin-left:7px}
.csmenu .umsum{font-size:13.5px;padding:6px 11px;min-height:34px}
.umhead{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 11px 4px}
.ummore{font-size:12.5px;color:var(--ink-3);padding:6px 11px}
.umdot{width:7px;height:7px;border-radius:50%;background:var(--brand);
       flex:none;margin-right:4px}
/* no-text: a 7px dot, nothing renders inside it */
a.backb{display:block;max-width:960px;margin:0 auto;padding:10px 20px 0;
  font-size:13px;color:var(--ink-3);text-decoration:none;letter-spacing:.05em;
  text-transform:uppercase}
a.backb:hover{color:var(--brand-deep)}
@media (max-width:760px){
  .nav{width:100%;order:3}
  .grow{display:none}
}
a.quietlink{color:var(--ink-3);text-decoration:underline}
a.quietlink:hover{color:var(--brand-deep)}
details.alt{margin:0 0 28px}
details.alt summary{cursor:pointer;font-size:13px;color:var(--ink-3);
  letter-spacing:.05em;padding:8px 0;min-height:40px;display:flex;
  align-items:center}
details.alt summary:hover{color:var(--brand-deep)}
details.alt p{color:var(--ink-2);margin:6px 0}
.warnnote{color:var(--warn)}

/* ---------- brand assets ----------
   Two images, one per theme, because a dark wordmark vanishes on a dark ground.
   The theme control has three states, so each visibility rule is written for
   all three: bare :root, the prefers-color-scheme block, and [data-theme]. */
.lockup-img{display:block;width:auto;max-height:34px}
.only-dark{display:none}
.only-light{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .only-light{display:none}
  :root:not([data-theme="light"]) .only-dark{display:block}
}
:root[data-theme="dark"] .only-light{display:none}
:root[data-theme="dark"] .only-dark{display:block}
:root[data-theme="light"] .only-light{display:block}
:root[data-theme="light"] .only-dark{display:none}

/* ---------- sign-in page ----------
   ALWAYS LIGHT, NO CHROME. The firm's ruling: this is the only page a
   signed-out visitor sees, so it is the front door and not a working surface.
   The server stamps data-theme=light on <html> and loads no script, so nothing
   can move it off light after first paint.

   Every colour here is literal rather than a token. The tokens are redefined by
   the dark blocks further down, and a page that must never go dark should not be
   reading values that can. `body.bare` is only ever this page. */
body.bare{background:#fff;color:#1C2733;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:32px 20px}
main.signin{width:100%;max-width:430px;display:flex;flex-direction:column;
  align-items:center;text-align:center}

/* The lockup is 500x136, a 3.68:1 band, so it is sized by WIDTH. Height-driven
   sizing on an aspect this wide overflows narrow phones before the height ever
   binds. width/height on the <img> reserve the box so the card does not jump
   when the artwork paints. */
.signin-brand{margin:0 0 34px;width:100%;display:flex;justify-content:center}
.signin-lockup{display:block;height:auto;width:100%;max-width:340px}

.signin-card{width:100%}
.signin-card h1{margin:0 0 10px;font-size:19px;font-weight:600;
  letter-spacing:-.01em;color:#1C2733}
.signin-card p{margin:0 0 22px;font-size:14px;line-height:1.55;color:#5A6B7C;
  text-align:center}
.signin-card .btn{display:block;width:100%;text-align:center;
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  padding:11px 18px;font-size:14px;font-weight:600;border-radius:7px;
  text-decoration:none}
.signin-card .btn:hover{background:#12557f;border-color:#12557f}
.signin-card .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* The generated fallback, for a box with no artwork in it yet. */
main.signin .bars{height:44px}
main.signin .bars i:nth-child(1){height:44px}
main.signin .bars i:nth-child(2){height:39px}
main.signin .bars i:nth-child(3){height:33px}
main.signin .bars i:nth-child(4){height:28px}

@media (max-width:760px){
  body.bare{align-items:flex-start;padding-top:56px}
  .signin-lockup{max-width:290px}
}

/* ---------- the masthead band ----------
   The firm publishes only a WHITE lockup and uses it on a dark header on their
   own site, so the portal does the same: a fixed dark band in both themes, with
   the official artwork unmodified. Reproducing a blue version by hand would
   risk getting a law firm's mark subtly wrong in the one place everyone sees.

   `.onband` is set by the server only when the white file is the only one
   present. Supply lockup-light.png later and the band disappears on its own. */
header.onband{background:var(--brand-band);color:#fff;
              border-bottom:3px solid var(--brand)}
header.onband .who,header.onband .navl,header.onband .navsep{color:#C6D9E6}
header.onband .who a{color:#C6D9E6;border-bottom-color:rgba(255,255,255,.25)}
header.onband .who a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
header.onband summary.umsum{background:rgba(255,255,255,.07);color:#fff;
                            border-color:rgba(255,255,255,.22)}
header.onband summary.umsum:hover,
header.onband details.umenu[open] summary.umsum{
  border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.16)}
header.onband .umcar{color:#C6D9E6}
header.onband .role{background:#fff;color:var(--brand-band)}
header.onband .csbadge,header.onband .umbadge{background:#fff;
                                              color:var(--brand-band)}

/* The sign-in page's lockup needs the same ground to be legible. */
.signin-brand.onband{background:var(--brand-band);color:#fff;
                     padding:26px 34px;
                     margin:0 0 26px;border-radius:2px}

/* ---------- the sync folder picker ----------
   A <dialog>, so the focus trap, Escape, the backdrop and the inert background
   all come from the browser instead of being reimplemented badly. */
.syncactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.syncfallback{margin-top:10px}
.syncfallback summary{font-size:12.5px;color:var(--ink-3);cursor:pointer}
.syncfallback summary:hover{color:var(--ink)}
.syncfallback .seatform{margin-top:8px}

.syncpicked{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.syncchip{display:inline-block;font-size:12px;padding:3px 8px;border-radius:999px;
  background:var(--brand-wash);color:var(--brand-deep);
  border:1px solid var(--brand-line)}

.syncdlg{border:1px solid var(--rule);border-radius:12px;padding:0;
  background:var(--panel);color:var(--ink);
  width:min(560px,94vw);max-height:min(78vh,720px)}
.syncdlg::backdrop{background:rgba(12,22,32,.55)} /* no-text: a backdrop can
   hold no content, so there is no text for a colour to pair with. */
.syncdlgform{display:flex;flex-direction:column;max-height:inherit;
  padding:18px 18px 14px}
.syncdlg h3{margin:0 0 4px;font-size:16px;font-weight:600}
.syncdlgsub{margin:0 0 12px;font-size:12.5px;color:var(--ink-3)}

/* The tree scrolls; the heading and the footer do not. A dialog whose whole
   body scrolls hides the confirm button behind hundreds of folders. */
.synctree{overflow:auto;flex:1 1 auto;min-height:120px;
  border:1px solid var(--rule);border-radius:8px;padding:8px 6px;
  background:var(--paper);color:var(--ink)}
.synctree ul{list-style:none;margin:0;padding:0 0 0 18px}
.synctree>li,.synctree>ul{list-style:none}
.syncnode{list-style:none}
.syncrow{display:flex;align-items:center;gap:2px;padding:1px 0}
.synctwist{background:none;border:0;color:var(--ink-3);cursor:pointer;
  font-size:12px;line-height:1;padding:4px 5px;border-radius:5px;flex:0 0 auto}
.synctwist:hover{background:var(--brand-wash);color:var(--brand-deep)}
.synctwist:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.synctwist-none{display:inline-block;width:23px;flex:0 0 auto}
.synclab{display:flex;align-items:center;gap:7px;font-size:13.5px;
  padding:3px 4px;border-radius:6px;cursor:pointer;min-width:0}
.synclab:hover{background:var(--brand-wash)}
.syncname{min-width:0;overflow-wrap:anywhere}
.synckids{color:var(--ink-3);font-size:11.5px;margin-left:5px}
.syncinc{font-size:11px;color:var(--ink-3);font-style:italic;margin-left:7px}
.syncnode.covered>.syncrow .synclab{opacity:.55;cursor:default}
.syncmsg{list-style:none;font-size:12.5px;color:var(--ink-3);padding:5px 8px}
.syncerr{color:var(--warn)}

.syncdlgfoot{display:flex;align-items:center;gap:8px;padding-top:12px}
.syncdlgfoot .grow{flex:1 1 auto}
.synccount{font-size:12.5px;color:var(--ink-3)}

/* ---------- the turn status line ----------
   Under the composer. Empty when nothing is happening, so it says nothing
   rather than claiming "Idle" forever to a reader with no JavaScript. */
.turnstate{margin:6px 2px 0;min-height:17px;font-size:12.5px;color:var(--ink-3)}
.turnstate.waiting{color:var(--ink-2)}
.turnstate.thinking{color:var(--brand)}
/* THE PULSE IS ON OPACITY, and it is the one place in this sheet where opacity
   is animated rather than switched. It is scoped to this single selector so it
   cannot be confused with the row-reveal mechanism, which also uses opacity and
   whose specificity is checked against the hide rule. */
.turnstate.thinking{animation:turnpulse 1.5s ease-in-out infinite}
@keyframes turnpulse{0%{opacity:1}50%{opacity:.45}100%{opacity:1}}
/* Anyone who has asked for less motion gets the colour and the counter, which
   carry the same information, without the animation. */
@media (prefers-reduced-motion:reduce){
  .turnstate.thinking{animation:none}
}