/* SWEEP BOT — SweepSquad dark design system.
   One stylesheet for every staff surface. Class names are unchanged from
   the light build on purpose: this is a visual reskin, and every page's
   markup and behaviour keeps working untouched. */

:root{
  /* Depth: near-black base, lifted panels. Not pure #000 — a slight blue
     cast reads as deliberate rather than as an unstyled dark mode. */
  --bg:#080b12; --bg-2:#0b0f18; --panel:#111725; --panel-2:#151c2c; --raise:#1a2233;
  --line:#1f2939; --line-2:#2a3547; --line-3:#374357;

  --ink:#eef2f8; --ink-2:#c3ccdb; --muted:#8b97ab; --faint:#5f6b7f;

  --brand:#4f8cff; --brand-2:#6ea3ff; --brand-dk:#2f6fe4;
  --brand-bg:rgba(var(--brand-rgb,79,140,255),.13); --brand-line:rgba(var(--brand-rgb,79,140,255),.34);
  --glow:0 0 0 1px rgba(var(--brand-rgb,79,140,255),.35),0 8px 30px -8px rgba(var(--brand-rgb,79,140,255),.45);

  --ok:#3ddc97; --ok-bg:rgba(61,220,151,.12); --ok-line:rgba(61,220,151,.32);
  --warn:#ffc266; --warn-bg:rgba(255,194,102,.12); --warn-line:rgba(255,194,102,.32);
  --bad:#ff7a70; --bad-bg:rgba(255,122,112,.12); --bad-line:rgba(255,122,112,.32);

  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 34px -14px rgba(0,0,0,.85);
  --sidebar:250px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.16s var(--ease); --med:.26s var(--ease);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--bg)}
body{
  font:14.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
}
a{color:var(--brand-2);text-decoration:none;transition:color var(--fast)}
a:hover{color:var(--brand-hover,#9dc0ff)}
::selection{background:rgba(var(--brand-rgb,79,140,255),.3)}

/* Ambient motion: two slow drifting light fields plus a periodic sweep --
   a broom pass across the page. Fixed, behind everything, pointer-none,
   and GPU-friendly (transform/opacity only). */
body::before,body::after{content:"";position:fixed;inset:-25% -10%;z-index:0;pointer-events:none}
body::before{
  background:
    radial-gradient(46% 38% at 18% 14%,rgba(var(--brand-rgb,79,140,255),.16),transparent 62%),
    radial-gradient(40% 34% at 86% 78%,rgba(61,220,151,.10),transparent 60%),
    radial-gradient(36% 30% at 62% 8%,rgba(var(--brand-rgb,79,140,255),.10),transparent 62%);
  animation:sb-drift 34s ease-in-out infinite alternate;will-change:transform}
body::after{
  background:linear-gradient(105deg,transparent 42%,rgba(var(--brand-rgb,79,140,255),.075) 49%,
             rgba(var(--brand-rgb,79,140,255),.11) 51%,transparent 58%);
  animation:sb-sweep 17s linear infinite;will-change:transform,opacity}
@keyframes sb-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(2.5%,-2%,0) scale(1.07)}}
@keyframes sb-sweep{
  0%{transform:translate3d(-62%,0,0) rotate(-4deg);opacity:0}
  12%{opacity:1} 62%{opacity:1}
  100%{transform:translate3d(62%,0,0) rotate(-4deg);opacity:0}}

/* Motion is decoration. Anyone who has asked the OS to stop it gets a
   completely static page, not merely a slower one. */
@media(prefers-reduced-motion:reduce){
  body::after{display:none}
  body::before{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- app shell ---- */
.sb-app{display:flex;min-height:100vh;min-height:100dvh;position:relative;z-index:1}
.sb-side{
  width:var(--sidebar);flex:0 0 var(--sidebar);
  background:linear-gradient(180deg,rgba(17,23,37,.96),rgba(11,15,24,.96));
  border-right:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;
  padding-left:env(safe-area-inset-left)}
.sb-brand{padding:20px 18px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.sb-logo{
  flex:0 0 auto;border-radius:11px;display:block;
  box-shadow:0 0 0 1px rgba(var(--brand-rgb,79,140,255),.3),0 6px 22px -8px rgba(var(--brand-rgb,79,140,255),.75);
  transition:transform var(--med),box-shadow var(--med)}
.sb-brand:hover .sb-logo{transform:translateY(-1px) scale(1.05);
  box-shadow:0 0 0 1px rgba(var(--brand-rgb,79,140,255),.5),0 10px 30px -8px rgba(var(--brand-rgb,79,140,255),.95)}
.sb-brand .n{font-weight:650;font-size:16.5px;letter-spacing:-.015em;
  background:linear-gradient(92deg,var(--ink),var(--brand-text,#b9d0ff) 62%,var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sb-brand .t{font-size:11.5px;color:var(--muted);margin-top:1px;letter-spacing:.01em}
.sb-nav{padding:12px 12px 20px;flex:1}
.sb-sec{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:14px 10px 6px}
.sb-nav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--ink-2);font-weight:500;font-size:13.5px;margin-bottom:2px;min-height:42px;
  position:relative;transition:background var(--fast),color var(--fast),transform var(--fast)}
.sb-nav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none;transform:translateX(2px)}
.sb-nav a.on{background:var(--brand-bg);color:var(--brand-text,#cfe0ff);font-weight:600;box-shadow:inset 0 0 0 1px var(--brand-line)}
.sb-nav a.on::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--brand);
  box-shadow:0 0 12px 1px rgba(var(--brand-rgb,79,140,255),.9)}
.sb-nav .ico{width:17px;text-align:center;opacity:.8;font-size:13px}
.sb-foot{padding:14px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);
  padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.sb-ws-chip{padding:4px 18px 12px;border-top:1px solid var(--line)}
.sb-ws-chip:empty{display:none}
.sb-ws-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin:10px 0 6px}
.sb-ws-select{min-height:38px;padding:8px 32px 8px 11px;font-size:13px;background:var(--bg-2)}
.sb-ws-static{font-size:13px;font-weight:600;color:var(--ink-2);padding:10px 0 2px}
.sb-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sb-top{
  background:rgba(11,15,24,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);padding:20px 30px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:5;
  padding-top:calc(20px + env(safe-area-inset-top))}
.sb-top h1{margin:0;font-size:21px;letter-spacing:-.02em;font-weight:650}
.sb-top .sub{color:var(--muted);font-size:13px;margin-top:3px}
.sb-body{padding:24px 30px 80px;max-width:1320px;width:100%;
  padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right));
  animation:sb-in .38s var(--ease) both}
@keyframes sb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- workflow strip ---- */
.sb-flow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}
.sb-flow a,.sb-flow span{font-size:11.5px;padding:6px 13px;border-radius:22px;background:var(--panel);
  border:1px solid var(--line-2);color:var(--muted);white-space:nowrap;transition:all var(--fast)}
.sb-flow .on{background:linear-gradient(135deg,var(--brand),var(--brand-dk));border-color:transparent;
  color:#fff;font-weight:600;box-shadow:0 4px 18px -6px rgba(var(--brand-rgb,79,140,255),.9)}
.sb-flow .done{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}

/* ---- cards ---- */
.sb-card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px;overflow:hidden;
  transition:border-color var(--med),transform var(--med),box-shadow var(--med)}
.sb-card:hover{border-color:var(--line-3)}
.sb-card>h2{margin:0;padding:15px 20px;font-size:13px;font-weight:650;letter-spacing:.01em;
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  gap:10px;color:var(--ink);background:rgba(255,255,255,.015)}
.sb-card>h2 .step{background:var(--brand-bg);color:var(--brand-2);font-size:10.5px;font-weight:700;
  padding:3px 10px;border-radius:20px;border:1px solid var(--brand-line);letter-spacing:.04em;
  text-transform:uppercase}
.sb-card .in{padding:20px}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.sb-tile{display:block;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:transform var(--med),border-color var(--med),box-shadow var(--med)}
.sb-tile::after{content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(120% 90% at 0% 0%,rgba(var(--brand-rgb,79,140,255),.16),transparent 58%);
  transition:opacity var(--med)}
.sb-tile:hover{transform:translateY(-3px);border-color:var(--brand-line);text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 18px 40px -18px rgba(var(--brand-rgb,79,140,255),.6)}
.sb-tile:hover::after{opacity:1}
.sb-tile .t{font-weight:650;font-size:15px;margin-bottom:5px;color:var(--ink);position:relative}
.sb-tile .d{font-size:12.5px;color:var(--muted);line-height:1.55;position:relative}

/* ---- forms ---- */
label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:0 0 6px;letter-spacing:.01em}
input,select,textarea{font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:var(--radius-sm);background:var(--bg-2);color:var(--ink);width:100%;
  min-height:44px;transition:border-color var(--fast),box-shadow var(--fast),background var(--fast)}
input::placeholder{color:var(--faint)}
input:hover,select:hover{border-color:var(--line-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-bg);background:var(--panel)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--brand);cursor:pointer}
input[type=file]{padding:11px;border-style:dashed;cursor:pointer}
input[type=file]:hover{border-color:var(--brand);background:var(--brand-bg)}
.sb-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.sb-row>div{flex:1 1 210px;min-width:170px}
.sb-row>button{flex:0 0 auto}

button{font:inherit;font-size:14px;font-weight:600;padding:11px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);background:var(--raise);color:var(--ink-2);cursor:pointer;
  white-space:nowrap;min-height:44px;position:relative;overflow:hidden;
  transition:background var(--fast),border-color var(--fast),color var(--fast),
             transform var(--fast),box-shadow var(--fast)}
button:hover:not(:disabled){background:var(--line-2);color:var(--ink);border-color:var(--line-3);transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(0) scale(.985)}
button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-bg)}
button.pri{background:linear-gradient(135deg,var(--brand),var(--brand-dk));border-color:transparent;color:#fff;
  box-shadow:0 4px 20px -8px rgba(var(--brand-rgb,79,140,255),.95)}
button.pri:hover:not(:disabled){background:linear-gradient(135deg,var(--brand-2),var(--brand));
  box-shadow:0 8px 28px -8px rgba(var(--brand-rgb,79,140,255),1);color:#fff}
button.ok{background:linear-gradient(135deg,#2fbf82,#249668);border-color:transparent;color:#04140d}
button.danger{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
button.danger:hover:not(:disabled){background:rgba(255,122,112,.2);color:#ffa39c}
button:disabled{opacity:.42;cursor:not-allowed;transform:none}
button.sm{padding:7px 12px;font-size:12.5px;min-height:34px}

/* ---- tables ---- */
.sb-table{width:100%;border-collapse:collapse}
.sb-table th{background:rgba(255,255,255,.025);text-align:left;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:12px 16px;
  border-bottom:1px solid var(--line-2)}
.sb-table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13.5px;color:var(--ink-2)}
.sb-table tr:last-child td{border-bottom:none}
.sb-table tbody tr{transition:background var(--fast)}
.sb-table tbody tr:hover{background:rgba(var(--brand-rgb,79,140,255),.05)}
.sb-table b{color:var(--ink);font-weight:600}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted)}
.muted{color:var(--muted);font-size:12.5px}

/* ---- badges ---- */
.b{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;white-space:nowrap;border:1px solid}
.b-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.b-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.b-bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.b-info{background:var(--brand-bg);color:var(--brand-2);border-color:var(--brand-line)}
.b-grey{background:rgba(255,255,255,.05);color:var(--muted);border-color:var(--line-2)}

/* ---- alerts ---- */
.sb-alert{padding:14px 17px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:13.5px;
  display:none;border:1px solid;line-height:1.55}
.sb-alert.on{display:block;animation:sb-in .28s var(--ease) both}
.sb-alert.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.sb-alert.err{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.sb-alert.info{background:var(--brand-bg);border-color:var(--brand-line);color:var(--brand-2)}
.sb-alert.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.sb-alert a{color:inherit;text-decoration:underline}

/* ---- empty state ---- */
.sb-empty{padding:52px 24px;text-align:center;color:var(--muted)}
.sb-empty .t{font-weight:650;color:var(--ink-2);margin-bottom:7px;font-size:15px}
.sb-empty .d{font-size:13px;max-width:430px;margin:0 auto;line-height:1.6}

/* ---- shared modal (Create Workspace, and future Add/Manage panels) ---- */
.sb-modal-backdrop{position:fixed;inset:0;background:rgba(4,6,10,.62);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);z-index:200;display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:40px 16px;animation:sb-fade .18s var(--ease) both}
@keyframes sb-fade{from{opacity:0}to{opacity:1}}
.sb-modal{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line-3);
  border-radius:var(--radius);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);width:480px;max-width:100%;
  animation:sb-in .22s var(--ease) both}
.sb-modal>h2{margin:0;padding:18px 22px;font-size:15px;font-weight:650;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.sb-modal .in{padding:20px 22px}
.sb-modal .foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.sb-modal .close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;
  min-height:auto;padding:2px 6px;line-height:1}
.sb-modal .close:hover{color:var(--ink)}

/* ---- workspace cards ---- */
.sb-ws-card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--med)}
.sb-ws-card:hover{border-color:var(--line-3)}
.sb-ws-card .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sb-ws-card .hd .name{font-size:16px;font-weight:650;color:var(--ink)}
.sb-ws-card .owner{font-size:12px;color:var(--muted)}
.sb-ws-card .owner b{color:var(--ink-2);font-weight:600}
.sb-ws-card .stats{display:flex;gap:18px;font-size:12.5px;color:var(--ink-2)}
.sb-ws-card .stats b{color:var(--ink);font-weight:650}
.sb-ws-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}

/* ---- misc ---- */
.sb-copy{display:flex;gap:9px;align-items:center;margin-top:12px;flex-wrap:wrap}
.sb-copy input{flex:1 1 240px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--bg)}
/* Open sits beside Copy and must read as a peer of it, not as body
   text that happens to be a link. */
.sb-openlink{display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  padding:0 15px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-2);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;
  transition:border-color var(--fast),background var(--fast)}
.sb-openlink:hover{border-color:var(--brand-line);background:var(--brand-bg);text-decoration:none}
/* The issued link is the thing the operator came for; it should not
   look like another row of settings. */
#linkPanel{border-color:var(--brand-line)}
#linkPanel h2{color:var(--ink)}
.sb-bar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:9px}
.sb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width var(--med)}
.sb-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:9px}
.sb-checks label{display:flex;gap:10px;align-items:center;font-weight:400;font-size:13px;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;
  cursor:pointer;margin:0;min-height:44px;transition:border-color var(--fast),background var(--fast)}
.sb-checks label:hover{border-color:var(--brand-line);background:var(--brand-bg);color:var(--ink)}
.sb-checks input{width:auto}

/* ---- responsive: tablet, then phone ---- */
@media(max-width:1000px){
  :root{--sidebar:214px}
  .sb-body,.sb-top{padding-left:20px;padding-right:20px}
}
@media(max-width:820px){
  .sb-app{flex-direction:column}
  .sb-side{width:100%;flex:none;height:auto;position:sticky;top:0;z-index:20;border-right:none;
    border-bottom:1px solid var(--line)}
  .sb-brand{padding:13px 16px;padding-top:calc(13px + env(safe-area-inset-top))}
  .sb-brand .t{display:none}
  .sb-nav{display:flex;gap:6px;padding:8px 10px 10px;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sb-nav::-webkit-scrollbar{display:none}
  .sb-nav a{margin:0;white-space:nowrap;flex:0 0 auto;padding:9px 14px}
  .sb-nav a:hover{transform:none}
  .sb-nav a.on::before{display:none}
  .sb-sec,.sb-foot{display:none}
  .sb-top{position:static;padding:16px 18px}
  .sb-top h1{font-size:19px}
  .sb-body{padding:18px 16px 64px}
  .sb-card .in{padding:16px}
  .sb-row{gap:11px}
  .sb-row>div,.sb-row>button{flex:1 1 100%;min-width:0}
  .sb-grid{grid-template-columns:1fr}
  .sb-checks{grid-template-columns:1fr}
  /* Wide tables scroll rather than squashing or breaking the layout. */
  .sb-card>div{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sb-table{min-width:560px}
}
@media(max-width:420px){
  .sb-top h1{font-size:17.5px}
  .sb-body{padding:14px 12px 56px}
  .sb-card{border-radius:12px}
}

/* ---------------------------------------------------------------------------
   Post-login sweep.

   One broom stroke that wipes the sign-in screen away and reveals the
   workspace already sitting underneath it. Deliberately short: the point
   is a branded transition between two screens, not a loading screen, so
   the dashboard is fully interactive the moment the stroke ends and is
   never actually waited on.

   The curtain is a plain fill of the page background, clipped away from
   the left as the stroke travels, so the reveal IS the sweep rather than
   a crossfade that happens to have a broom on top of it.
--------------------------------------------------------------------------- */

.sb-sweep {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: var(--bg);
  animation: sb-sweep-curtain 2.8s linear forwards;
}
/* The reveal is glued to the stroke: the curtain retracts over exactly the
   36%-88% window the broom travels in, with exactly the same easing, so the
   edge stays under the bristles instead of drifting ahead or lagging. */
@keyframes sb-sweep-curtain {
  0%, 36% { clip-path: inset(0 0 0 0); opacity: 1;
            animation-timing-function: cubic-bezier(.45, .02, .2, 1); }
  88%     { clip-path: inset(0 0 0 100%); opacity: 1; }
  100%    { clip-path: inset(0 0 0 100%); opacity: 0; }
}

.sb-sweep-broom {
  position: fixed; top: 50%; left: 50%; z-index: 9999; pointer-events: none;
  width: clamp(66px, 15vw, 108px); aspect-ratio: 1; margin: 0;
  translate: -50% -50%;
  animation: sb-sweep-broom 2.8s linear forwards;
}
.sb-sweep-broom img { width: 100%; height: 100%; display: block; border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb,79,140,255),.5), 0 0 34px -4px rgba(var(--brand-rgb,79,140,255),.55),
              0 20px 74px -12px rgba(var(--brand-rgb,79,140,255),1); }

/* The trail sits BEHIND the mark and stretches back along the direction of
   travel, so the light reads as something the stroke left rather than a
   glow the logo carries around with it. */
.sb-sweep-broom::before {
  content: ''; position: absolute; right: 58%; top: 50%;
  width: 58vw; height: 210%; translate: 0 -50%; border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(var(--brand-rgb,79,140,255),0) 0%, rgba(var(--brand-rgb,79,140,255),.20) 42%, rgba(var(--brand-rgb,79,140,255),.55) 100%);
  filter: blur(20px); opacity: 0;
  animation: sb-sweep-trail 2.8s linear forwards;
}
/* Timed per segment rather than with one curve over the whole stroke: each
   beat wants its own easing (the pop, the settle, the wind-up, the travel),
   and a single global curve would ease out and restart at every keyframe,
   which is what makes a multi-part animation read as jerky. The travel is
   ONE segment, 36%-88%, so the part the eye follows is uninterrupted. */
@keyframes sb-sweep-broom {
  /* appear */
  0%   { transform: translate3d(0, 0, 0) rotate(-4deg) scale(.78); opacity: 0;
         animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  8%   { transform: translate3d(0, 0, 0) rotate(-4deg) scale(1.07); opacity: 1;
         animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  /* settle, and hold long enough to be read as a mark rather than a flash */
  15%  { transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); opacity: 1;
         animation-timing-function: linear; }
  22%  { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); opacity: 1;
         animation-timing-function: cubic-bezier(.4, 0, .5, 1); }
  /* wind-up: back and tilted, the way a stroke is loaded before it lands */
  36%  { transform: translate3d(-38vw, 0, 0) rotate(-21deg) scale(1.04); opacity: 1;
         animation-timing-function: cubic-bezier(.45, .02, .2, 1); }
  /* the sweep */
  88%  { transform: translate3d(56vw, 0, 0) rotate(15deg) scale(1.02); opacity: 1;
         animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  100% { transform: translate3d(66vw, 0, 0) rotate(15deg) scale(.95); opacity: 0; }
}
@keyframes sb-sweep-trail {
  0%, 36% { opacity: 0; animation-timing-function: cubic-bezier(.3, .8, .4, 1); }
  50%     { opacity: 1; animation-timing-function: linear; }
  82%     { opacity: .72; }
  100%    { opacity: 0; }
}

/* Reduced motion: no stroke at all. The curtain is removed on the same
   frame it would otherwise start on, so the dashboard is simply there --
   a static transition, not a slower version of the same movement. */
@media (prefers-reduced-motion: reduce) {
  .sb-sweep, .sb-sweep-broom { display: none; animation: none; }
}

/* ---------------------------------------------------------------------------
   Active client chip, and the single-client intake dashboard.
--------------------------------------------------------------------------- */

.sb-active { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sb-active .who { font-weight: 700; color: var(--ink);
  background: var(--brand-bg); border: 1px solid var(--brand-line);
  padding: 5px 12px; border-radius: 20px; }
.sb-active .none { color: var(--faint); }
.sb-active a { color: var(--muted); font-size: 11.5px; text-decoration: none; }
.sb-active a:hover { color: var(--ink-2); }

.sb-empty-client { text-align: center; padding: 54px 24px; }
.sb-empty-client .mark { font-size: 34px; opacity: .55; margin-bottom: 12px; }
.sb-empty-client .t { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sb-empty-client .d { color: var(--muted); font-size: 13px; }

.sb-client-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.sb-client-head .name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.sb-tally { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.sb-tally span { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 20px;
  border: 1px solid var(--line-2); color: var(--muted); }
.sb-tally .up { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.sb-tally .wait { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.sb-tally .miss { color: var(--bad); border-color: var(--bad-line); background: var(--bad-bg); }

.doc-row { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; margin-bottom: 9px; background: var(--panel); }
.doc-row .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-type-label { font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.doc-row .st { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.doc-row .st.uploaded, .doc-row .st.accepted {
  color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-line); }
.doc-row .st.waiting_for_upload {
  color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); }
.doc-row .st.missing, .doc-row .st.rejected,
.doc-row .st.replacement_requested, .doc-row .st.expired {
  color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-line); }
.doc-row-actions { margin-top: 9px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.email-send-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; }
.email-send-form input[type="email"] { flex: 1 1 220px; }
.doc-file { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 9px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2);
  border: 1px solid var(--line); cursor: pointer; }
.doc-file:hover { border-color: var(--brand-line); }
.doc-file .fn { font-weight: 600; font-size: 12.5px; flex: 1 1 auto; word-break: break-all; }
.doc-file .meta { font-size: 11px; color: var(--faint); }

.sb-preview { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.sb-preview .frame { background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); width: min(980px, 100%); height: min(88vh, 100%);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.sb-preview .bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); }
.sb-preview .bar .fn { font-weight: 700; font-size: 13px; flex: 1 1 auto; word-break: break-all; }
.sb-preview .bar a, .sb-preview .bar button { font-size: 12px; }
.sb-preview .stage { flex: 1 1 auto; overflow: auto; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; }
.sb-preview .stage img { max-width: 100%; max-height: 100%; display: block; }
.sb-preview .stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.sb-preview .stage .cant { color: var(--muted); font-size: 13px; padding: 40px; text-align: center; }

@media (max-width: 640px) {
  .sb-active { width: 100%; }
  .sb-preview { padding: 0; }
  .sb-preview .frame { height: 100%; border-radius: 0; border: 0; }
}

/* The request catalogue's disclosure. Shut by default, so a client's view
   is only ever the documents actually asked of them. */
.disclosure { background: none; border: 0; color: var(--ink-2); font-weight: 600;
  font-size: 13px; padding: 6px 0; cursor: pointer; text-align: left; }
.disclosure:hover { color: var(--ink); }
.request-form { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.standard-request-option { display: block; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }

/* Baseline card treatment for review_documents.html's plain content
   blocks -- none existed before (every .panel was an unstyled div
   relying on its <h2>'s default browser weight for any structure at
   all). Scoped to #intake (unique to this page's container) rather than
   a bare .panel, since .panel is also used, unstyled, by
   letter_drafts.html, and separately, with its own local <style>
   block, by staff_request_documents.html -- neither should change
   appearance as a side effect of a rule meant for this one page.
   Deliberately close to .sb-card's own visual language rather than a
   new one, so this page still looks like it belongs next to every
   other staff surface. */
#intake .panel { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden; }
#intake .panel > h2 { margin: 0; padding: 15px 20px; font-size: 13px; font-weight: 650; letter-spacing: .01em;
  border-bottom: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.015); }
#intake .panel > .body { padding: 20px; }

/* This page's main hub -- the one section a staff member is meant to
   see and act on first. A brand-colored border and extra padding is
   the whole difference from the baseline .panel above; nothing about
   its actual request behavior changes here or anywhere in this file. */
#intake .panel-hub { border: 1px solid var(--brand-line); box-shadow: var(--glow); }
#intake .panel-hub > .body { padding: 26px; }
/* Visual dominance for this panel comes from panel-hub's accent
   border/shadow above -- the heading text itself now matches every
   other disclosure/heading on the page (13px, the same size as
   #intake .panel > h2) rather than carrying its own oversized
   override, which read as far louder than everything around it. */
#intake .disclosure-hub:hover { color: var(--brand-2); }

/* Mobile only -- desktop/tablet keep the padding and sizing above
   completely unchanged. Collapsed by default already (REQUEST_OPEN),
   but at full desktop padding the collapsed header alone still read as
   a large feature card on a phone screen. Scoped to this codebase's
   existing 640px mobile breakpoint (matching .sb-active/.sb-preview
   and .hm-broom elsewhere in this file) rather than inventing a new
   one. Same dark panel background, border, and glow throughout --
   only padding, text size, and overflow handling change. */
@media (max-width: 640px) {
  #intake .panel-hub > .body { padding: 12px 14px; }
  #intake .disclosure-hub {
    font-size: 13px;
    padding: 4px 0;
    min-height: 0;
    /* A long client name must truncate cleanly rather than push the
       page wider or wrap into a second line that inflates the
       collapsed header's height right back up. */
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* "Additional Documents" (formerly "Add a document you already have") --
   still fully functional, just visually secondary to the hub above it:
   smaller heading, tighter padding, no accent border. */
#intake .panel-secondary > h2 { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 11px 16px; }
#intake .panel-secondary > .body { padding: 15px 16px; }

/* One document row holds one status badge, one upload control, and each
   uploaded file once -- with that file's own accept/reject controls
   attached to it rather than floating beneath the row. */
.doc-file-wrap { margin-top: 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); overflow: hidden; }
.doc-file-wrap .doc-file { margin: 0; border: 0; border-radius: 0; background: transparent; }
.doc-file-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 0 10px 9px 10px; }
.doc-file-actions button { font-size: 11.5px; padding: 4px 10px; }

/* View reads as the primary action on a file: you are meant to open it
   before deciding anything about it. */
.doc-file-actions .view { background: var(--brand-bg); border-color: var(--brand-line);
  color: var(--brand-2); font-weight: 700; }
.doc-file-actions .view:hover { background: var(--brand-line); color: #fff; }


/* Choosing what travels with a dispute letter. */
.encl-box { margin-top: 10px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel-2); text-align: left; }
.encl-head { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.encl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 9px; margin-top: 6px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg-2); cursor: pointer; }
.encl:hover { border-color: var(--brand-line); }
.encl-type { font-weight: 700; font-size: 12.5px; }
.encl-file { font-size: 11.5px; color: var(--muted); flex: 1 1 auto; word-break: break-all; }
.encl-status { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); }
.encl-status.ok { color: var(--ok); }
.encl-view { flex: 0 0 auto; }

.pkg-summary { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--brand-line); background: var(--brand-bg); }
.pkg-line { font-size: 12.5px; margin-bottom: 6px; line-height: 1.5; }
.pkg-line.excluded { color: var(--bad); font-weight: 600; }

/* ---------------------------------------------------------------------------
   HOME — the portal's front door.

   The broom drifts continuously behind the content. Decorative, so it is
   aria-hidden and takes no pointer events: it can never come between a
   person and a button, however far it wanders.

   Movement is built from THREE loops of different, deliberately
   non-harmonic lengths -- a drift across the page, a slower bob, and a
   slower still rotation. Because the periods never line up, the path
   never visibly repeats and never snaps back to a start position: the
   direction changes fall out of the arithmetic rather than being
   choreographed. Everything is transform and opacity only, so it stays
   on the compositor and costs nothing to scroll past.
--------------------------------------------------------------------------- */

.sb-brand { text-decoration: none; color: inherit; cursor: pointer; }
.sb-brand:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 12px; }

.hm-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hm-broom { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px;
  margin: -38px 0 0 -38px; will-change: transform;
  animation: hm-drift 46s ease-in-out infinite; }
.hm-broom img { width: 100%; height: 100%; display: block; border-radius: 22%;
  opacity: .5;
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb,79,140,255),.22), 0 0 46px -6px rgba(var(--brand-rgb,79,140,255),.55);
  animation: hm-bob 11s ease-in-out infinite, hm-turn 29s ease-in-out infinite; }

/* The trail: a soft streak that sits behind the mark and stretches back
   along the direction of travel, so the glow reads as something left
   behind rather than a halo carried around. */
.hm-broom::before { content: ''; position: absolute; right: 55%; top: 50%;
  width: 34vw; height: 210%; translate: 0 -50%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--brand-rgb,79,140,255),0) 0%,
    rgba(var(--brand-rgb,79,140,255),.07) 50%, rgba(var(--brand-rgb,79,140,255),.20) 100%);
  filter: blur(26px); animation: hm-trail 46s ease-in-out infinite; }

@keyframes hm-drift {
  0%   { transform: translate3d(-30vw, -22vh, 0); }
  17%  { transform: translate3d( 22vw, -30vh, 0); }
  33%  { transform: translate3d( 33vw,   8vh, 0); }
  51%  { transform: translate3d(  4vw,  27vh, 0); }
  68%  { transform: translate3d(-27vw,  18vh, 0); }
  84%  { transform: translate3d(-33vw, -9vh, 0); }
  100% { transform: translate3d(-30vw, -22vh, 0); }
}
@keyframes hm-bob   { 0%,100% { transform: translateY(0) scale(1); }
                      50%     { transform: translateY(-13px) scale(1.045); } }
@keyframes hm-turn  { 0%,100% { rotate: -11deg; } 34% { rotate: 9deg; } 67% { rotate: -5deg; } }
@keyframes hm-trail { 0%,100% { opacity: .30; } 22% { opacity: .8; } 60% { opacity: .42; } }

.hm-hero { position: relative; z-index: 1; padding: 30px 0 8px; }
.hm-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-2); margin-bottom: 12px; }
.hm-h1 { font-size: clamp(30px, 5.5vw, 46px); font-weight: 700; letter-spacing: -.03em; margin: 0;
  background: linear-gradient(94deg,var(--ink),var(--brand-text,#cfe0ff) 55%,var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-sub { color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 62ch; margin: 12px 0 0; }

.hm-grid { position: relative; z-index: 1; margin-top: 26px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.hm-card { display: block; padding: 20px; border-radius: var(--radius); text-decoration: none;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(21,28,44,.86), rgba(17,23,37,.72));
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: transform var(--med), border-color var(--med), box-shadow var(--med); }
.hm-card:hover { transform: translateY(-3px); border-color: var(--brand-line); box-shadow: var(--glow); }
.hm-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hm-step { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: 12px; font-weight: 800;
  background: var(--brand-bg); border: 1px solid var(--brand-line); color: var(--brand-2); }
.hm-title { display: block; margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.hm-blurb { display: block; margin-top: 6px; font-size: 12.8px; line-height: 1.55; color: var(--muted); }

/* Reduced motion: the broom stays, the wandering stops. A still mark is
   still branding; a moving one for somebody who asked for stillness is a
   symptom trigger. */
@media (prefers-reduced-motion: reduce) {
  .hm-broom, .hm-broom img, .hm-broom::before { animation: none; }
  .hm-broom { transform: translate3d(-26vw, -18vh, 0); }
  .hm-card { transition: none; }
  .hm-card:hover { transform: none; }
}

@media (max-width: 640px) {
  .hm-broom { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .hm-hero { padding-top: 18px; }
  .hm-grid { grid-template-columns: 1fr; }
}

/* One envelope per bureau, each listed in full before anything is sent. */
.pick-pkg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--ink-2); margin-right: 8px; cursor: pointer; }
.pkg-head { font-weight: 700; font-size: 13px; margin-bottom: 10px; color: var(--ink); }
.pkg-bureau { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px; background: var(--panel); }
.pkg-to { font-size: 13px; }
.pkg-addr { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pkg-contents { margin: 8px 0 0; padding-left: 18px; }
.pkg-contents li { font-size: 12px; color: var(--ink-2); line-height: 1.65; }
.pkg-contents li.is-letter { font-weight: 700; color: var(--brand-2); }

/* The `hidden` attribute is only `display:none` from the UA stylesheet, so
   any author rule with a display value beats it -- and `.sb-nav a` sets
   `display:flex`. Without this, admin-only entries were marked hidden and
   painted anyway, which is the worst of both: the DOM says concealed and
   the eye says otherwise. */
[hidden] { display: none !important; }

/* Client upload link, opened from the client's own row. */
.link-row td { background: var(--panel-2); }
.cl-link { padding: 14px 4px; text-align: left; }
.cl-head { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.cl-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.5px;
  color: var(--muted); margin-bottom: 12px; }
.cl-email { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cl-email label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin: 8px 0 4px; }
.cl-email input, .cl-email textarea { width: 100%; }
.cl-regen { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Mailing options, chosen before the package is reviewed. */
.mail-opts { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel-2); }
.mail-opts-head { font-weight: 700; font-size: 12.5px; margin-bottom: 7px; }
.mail-svc { display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  font-size: 12.5px; cursor: pointer; }
.pkg-confirm { display: flex; gap: 8px; align-items: flex-start; font-size: 12px;
  font-weight: 600; margin: 10px 0; }

/* ---- workflow filter bar (Clients page) ---- */
.sb-filterbar{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:14px}
.sb-filter-chip{font-size:12.5px;padding:7px 14px;border-radius:20px;background:var(--panel);
  border:1px solid var(--line-2);color:var(--muted);cursor:pointer;transition:all var(--fast);
  min-height:auto;font-weight:600}
.sb-filter-chip:hover{border-color:var(--line-3);color:var(--ink-2)}
.sb-filter-chip.on{background:linear-gradient(135deg,var(--brand),var(--brand-dk));border-color:transparent;
  color:#fff}

/* ---- workflow-driven client rows ---- */
.sb-client-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--line);transition:background var(--fast)}
.sb-client-row:hover{background:rgba(var(--brand-rgb,79,140,255),.04)}
.sb-client-main{min-width:0;flex:1}
.sb-client-name{font-weight:650;font-size:14.5px;color:var(--ink);margin-bottom:5px;
  display:flex;align-items:center;gap:8px}
.sb-client-name a{color:var(--ink);text-decoration:none}
.sb-client-name a:hover{color:var(--brand-2)}
.sb-attn-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto;
  box-shadow:0 0 8px 1px rgba(var(--brand-rgb,79,140,255),.7)}
.sb-client-stage{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.sb-client-next{font-size:12.5px;color:var(--ink-2);font-weight:600}
.sb-client-why{font-size:12px;color:var(--muted)}
.sb-client-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sb-client-more{position:relative}
.sb-more-menu{position:absolute;right:0;top:calc(100% + 6px);background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-3);border-radius:var(--radius-sm);box-shadow:0 20px 50px -14px rgba(0,0,0,.7);
  min-width:180px;z-index:20;display:flex;flex-direction:column;padding:6px;gap:1px}
.sb-more-menu a,.sb-more-menu button{display:block;width:100%;text-align:left;padding:9px 11px;
  border-radius:7px;background:none;border:none;color:var(--ink-2);font-size:13px;font-weight:500;
  min-height:auto;text-decoration:none;cursor:pointer}
.sb-more-menu a:hover,.sb-more-menu button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.sb-more-menu button.danger{color:var(--bad)}
.sb-more-menu button.danger:hover{background:var(--bad-bg)}
.link-row:not([hidden]){padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}

@media (max-width: 640px) {
  .sb-client-row{flex-direction:column;align-items:stretch;gap:10px}
  .sb-client-actions{justify-content:space-between}
}

/* ---- Home: greeting + attention queues ---- */
.sb-greeting-t{font-size:22px;font-weight:680;color:var(--ink);letter-spacing:-.01em}
.sb-greeting-ws{font-size:13.5px;color:var(--muted);margin-top:4px}
.sb-queue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sb-queue-card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:8px;
  box-shadow:var(--shadow);transition:border-color var(--med)}
.sb-queue-card:hover{border-color:var(--brand-line)}
.sb-queue-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sb-queue-label{font-size:13px;font-weight:650;color:var(--ink)}
.sb-queue-count{font-size:20px;font-weight:700;color:var(--brand-2)}
.sb-queue-why{font-size:12px;color:var(--muted);line-height:1.5;flex:1}

/* ---- Client Workspace: hero ---- */
.sb-hero{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin-bottom:20px;position:relative}
.sb-hero-back{display:inline-block;font-size:12.5px;color:var(--muted);margin-bottom:14px;text-decoration:none}
.sb-hero-back:hover{color:var(--brand-2)}
.sb-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.sb-hero-name{font-size:23px;font-weight:680;color:var(--ink);letter-spacing:-.01em}
.sb-hero-contact{font-size:13px;color:var(--muted);margin-top:3px}
.sb-hero-actions-menu{position:relative;flex:0 0 auto}
.sb-hero-stage{margin-bottom:10px}
.sb-hero-attn{font-size:13px;color:var(--ink-2);line-height:1.5;margin-bottom:4px;max-width:640px}
.sb-hero-next{font-size:13px;font-weight:650;color:var(--ink);margin-bottom:14px}
.sb-hero-action{margin-top:4px}
.sb-hero-action .act{display:inline-block;padding:12px 22px;font-size:14.5px;text-decoration:none;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dk));color:#fff;font-weight:600;
  box-shadow:0 4px 18px -6px rgba(var(--brand-rgb,79,140,255),.9);transition:all var(--fast)}
.sb-hero-action .act:hover{background:linear-gradient(135deg,var(--brand-2),var(--brand))}

/* ---- Client Workspace: tabs ---- */
.sb-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.sb-tab{font-size:13px;font-weight:600;padding:9px 16px;border-radius:9px;background:var(--panel);
  border:1px solid var(--line-2);color:var(--muted);cursor:pointer;transition:all var(--fast);min-height:auto}
.sb-tab:hover{color:var(--ink-2);border-color:var(--line-3)}
.sb-tab.on{background:linear-gradient(135deg,var(--brand),var(--brand-dk));border-color:transparent;color:#fff}
.sb-tab-select{display:none}
.sb-ov-row{font-size:13.5px;color:var(--ink-2);margin-bottom:8px;line-height:1.5}
.sb-ov-row:last-child{margin-bottom:0}
.sb-ov-row b{color:var(--ink)}

@media (max-width: 720px) {
  .sb-tabbar{display:none}
  .sb-tab-select{display:block;margin-bottom:18px}
  .sb-hero-top{flex-direction:column}
}

/* ---- Client Workspace: Documents/Credit Report deep tabs ---- */
.sb-attn-banner{background:var(--brand-bg);border:1px solid var(--brand-line);color:var(--brand-2);
  font-size:13px;font-weight:600;padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:14px}
.sb-doc-slot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.sb-doc-slot:last-of-type{border-bottom:none}
.sb-credit-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin:12px 0}
.sb-credit-stats div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 8px;text-align:center}
.sb-credit-stats b{display:block;font-size:19px;font-weight:700;color:var(--ink)}
.sb-credit-stats span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
.sb-subhead{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;
  margin:20px 0 10px}
.sb-report-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.sb-report-history-row:last-child{border-bottom:none}

/* ---- Client Workspace: Disputes/Letters tabs ---- */
.sb-dispute-row{padding:13px 0;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.sb-dispute-row:last-child{border-bottom:none}
.sb-dispute-main{font-size:13.5px;color:var(--ink-2)}

/* ---- Client Workspace: Messages/Timeline tabs ---- */
.sb-message-row{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:13px}
.sb-message-row:last-of-type{border-bottom:none}
.sb-message-dir{flex:0 0 auto;font-weight:650;color:var(--muted);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.03em;min-width:44px}
.sb-message-body{flex:1;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.sb-timeline-row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.sb-timeline-row:last-child{border-bottom:none}
.sb-timeline-cat{flex:0 0 auto}
.sb-timeline-body{flex:1;font-size:13.5px;color:var(--ink-2)}

@media (max-width: 640px) {
  .sb-timeline-row{flex-direction:column;gap:6px}
}

/* Client actions use the browser top layer, outside scrollable cards. */
.sb-more-menu[popover]{position:fixed;inset:auto;margin:0;
  box-sizing:border-box;min-width:min(230px,calc(100vw - 16px));
  max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow-y:auto}
.sb-more-menu[popover]::backdrop{background:transparent}
.sb-more-menu[popover]:not(:popover-open){display:none}