/* AQcredix Workspace */

/* ---------- the hover rail ----------------------------------------------------
   Twenty destinations in a flat strip needed two rows, and a second row of tabs under
   the site's own header read as two navigations competing rather than one place you are
   inside of. So on a wide screen they become a rail: a column of icons pinned to the
   left that widens to show its labels when the cursor reaches it.

   THREE RULES IT HAS TO OBEY, and each one is a line below.

   1. IT MAY NEVER COVER CONTENT. The rail is fixed, so it is outside the page's flow.
      The page is therefore given a left padding equal to the CLOSED width, and the rail
      only ever grows OVER that padding — never over the text. Nothing shifts when it
      opens, which is the whole point of hovering rather than clicking.
   2. IT IS ONE MARKUP PASS. The rail and the flat row are both rendered every time and
      CSS decides which is shown. No JavaScript watches the width, so a resize cannot
      leave the two out of step.
   3. IT TAKES ITS COLOURS FROM TOKENS ONLY. No literal hex anywhere in this block, so
      light, dark and neon all follow without a second rule being written. */

.ws-rail{display:none;}

@media (min-width:1100px){
  .ws-rail{
    display:block;position:fixed;left:0;z-index:45;
    /* Starts below the site header and runs to the floor. --aq-header-h is published by
       app.js; the fallback covers the moment before it lands. */
    top:var(--aq-header-h,64px);bottom:0;width:58px;
    background:var(--bg-elevated);border-right:1px solid var(--border);
    overflow:hidden;
    transition:width .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
  }
  .ws-rail:hover,.ws-rail:focus-within{width:246px;overflow-y:auto;
    box-shadow:14px 0 34px -16px rgba(0,0,0,.30);}
  .ws-rail-in{padding:10px 8px 24px;}

  .ws-rail-link{
    display:flex;align-items:center;gap:12px;padding:8px 9px;border-radius:var(--r-sm);
    color:var(--fg-muted);text-decoration:none;font-size:13px;font-weight:500;
    white-space:nowrap;margin-bottom:1px;
  }
  .ws-rail-link:hover{background:var(--brand-tint);color:var(--fg);}
  .ws-rail-link.active{background:var(--accent-solid);color:#fff;font-weight:600;}
  .ws-rail-ico{width:22px;height:22px;flex:0 0 22px;}
  /* The label is present in the DOM at all times so a screen reader always reads a name,
     never an unlabelled icon. It is only ever hidden visually. */
  .ws-rail-label{opacity:0;transition:opacity .13s ease;}
  .ws-rail:hover .ws-rail-label,.ws-rail:focus-within .ws-rail-label{opacity:1;}

  /* The group heading collapses to nothing rather than display:none, so the icons do not
     jump vertically as the rail opens. */
  .ws-rail-group{
    font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--fg-faint);padding:0 10px;height:0;opacity:0;overflow:hidden;
    transition:opacity .13s ease;
  }
  .ws-rail:hover .ws-rail-group,.ws-rail:focus-within .ws-rail-group{
    opacity:1;height:auto;padding:12px 10px 4px;
  }
  /* A hairline stands in for the heading while closed, so the groups still read as groups
     to somebody who never opens the rail. */
  .ws-rail-group + .ws-rail-link{border-top:1px solid var(--border-soft);padding-top:9px;margin-top:5px;}
  .ws-rail:hover .ws-rail-group + .ws-rail-link,
  .ws-rail:focus-within .ws-rail-group + .ws-rail-link{border-top:0;padding-top:8px;margin-top:0;}

  /* Rule 1: the page is inset by the CLOSED width and never moves again. */
  body[data-page] #aq-main{padding-left:58px;}

  /* The flat row is the small-screen navigation; above this width the rail replaces it.
     Only the ROW is hidden, never .ws-nav itself — the rail is rendered inside that same
     element, so hiding the parent hides the rail with it. .ws-nav is instead stripped back
     to a bare, zero-height container that still owns the rail. */
  .ws-nav{background:transparent;border-bottom:0;position:static;height:0;overflow:visible;}
  /* Scoped through .ws-nav on purpose. `.ws-nav-inner{display:flex}` is declared further
     down this file, and a media query adds no specificity — a bare `.ws-nav-inner` rule
     here would simply lose to the later one and the row would stay on screen. */
  .ws-nav .ws-nav-inner{display:none;}

  /* Who you are signed in as lives at the FOOT of the rail once the row is gone, which is
     where an account block belongs in a rail layout. It is collapsed to the mode chip
     while the rail is closed and spells itself out when it opens. */
  .ws-rail-foot{margin-top:14px;padding:11px 9px 0;border-top:1px solid var(--border-soft);
    display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
  .ws-rail-foot .ws-who,.ws-rail-foot .ws-signout,.ws-rail-foot .ws-team-link{
    opacity:0;transition:opacity .13s ease;white-space:nowrap;}
  .ws-rail:hover .ws-rail-foot .ws-who,.ws-rail:focus-within .ws-rail-foot .ws-who,
  .ws-rail:hover .ws-rail-foot .ws-signout,.ws-rail:focus-within .ws-rail-foot .ws-signout,
  .ws-rail:hover .ws-rail-foot .ws-team-link,.ws-rail:focus-within .ws-rail-foot .ws-team-link{opacity:1;}
  .ws-rail-foot .ws-who{font-size:12px;overflow:hidden;text-overflow:ellipsis;max-width:210px;}
}

/* A rail that slides is a rail that moves in the corner of the eye. Anyone who has asked
   for less motion gets it open-on-hover with no animation at all. */
@media (prefers-reduced-motion:reduce){
  .ws-rail,.ws-rail-label,.ws-rail-group{transition:none;}
}

/* ---------- sub-nav ---------- */
.ws-nav{background:var(--bg-elevated);border-bottom:1px solid var(--border);position:sticky;
  top:0;z-index:40;}
.ws-nav-inner{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;min-height:52px;flex-wrap:wrap;}
.ws-nav-links{display:flex;gap:4px;flex-wrap:wrap;}
.ws-nav-link{padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;
  color:var(--fg-muted);text-decoration:none;transition:background .15s,color .15s;}
.ws-nav-link:hover{background:var(--brand-tint);color:var(--accent-text);}
.ws-nav-link.active{background:var(--accent-solid);color:#fff;}
.ws-nav-right{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.ws-who{color:var(--fg-muted);}
.ws-mode{font-family:var(--font-mono);font-size:10.5px;padding:3px 9px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.05em;}
.ws-mode-local{background:var(--warn-tint);color:var(--warn);}
.ws-mode-cloud{background:var(--accent-bright-tint);color:var(--accent-text);}
.ws-signout{background:transparent;border:1px solid var(--border);color:var(--fg-muted);
  border-radius:7px;padding:5px 11px;font-size:12px;cursor:pointer;font-family:inherit;}
.ws-signout:hover{border-color:var(--brand-2);color:var(--accent-text);}

.ws-notice{background:var(--warn-tint);color:var(--warn);border-radius:10px;padding:13px 16px;
  font-size:13px;line-height:1.6;margin-bottom:22px;}
.ws-notice code{font-family:var(--font-mono);background:rgba(0,0,0,.08);padding:1px 5px;border-radius:4px;}

/* ---------- auth ---------- */
.ws-auth{max-width:420px;margin:60px auto;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-2);}
.ws-auth h2{font-size:21px;margin-bottom:8px;}
.ws-auth p{font-size:13.5px;color:var(--fg-muted);margin-bottom:18px;line-height:1.6;}
.ws-auth label{display:block;font-size:12.5px;font-weight:700;color:var(--fg-muted);margin:12px 0 5px;}
.ws-auth input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  background:var(--bg);color:var(--fg);font-family:inherit;font-size:14px;}
.ws-auth input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-tint);}
.ws-auth .btn{width:100%;margin-top:18px;justify-content:center;}
.ws-auth-tabs{display:flex;gap:4px;margin-bottom:6px;}
.ws-auth-tabs button{flex:1;padding:9px;border:1px solid var(--border);background:transparent;
  color:var(--fg-muted);border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;}
.ws-auth-tabs button.active{background:var(--accent-solid);border-color:var(--brand-2);color:#fff;}
/* overflow-wrap matters here: an untranslated error can still be a long unbroken token
   (a URL, a JSON blob), and a string with no spaces will not wrap on word boundaries —
   it simply runs out of its container, which is exactly what happened on the sign-in
   panel. */
.ws-auth-msg{font-size:12.5px;color:var(--warn);margin-top:12px;line-height:1.55;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%;}

/* ---------- summary ---------- */
.ws-summary{display:grid;grid-template-columns:280px 1fr;gap:26px;margin-bottom:26px;}
@media (max-width:860px){.ws-summary{grid-template-columns:1fr;}}
.ws-sum-ring{text-align:center;}
.ws-ring{width:170px;height:170px;}
.ws-ring-bg{fill:none;stroke:var(--border);stroke-width:10;}
.ws-ring-fg{fill:none;stroke:var(--brand-2);stroke-width:10;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset .6s ease;}
.ws-ring-n{fill:var(--fg);font-size:26px;font-weight:800;text-anchor:middle;font-family:var(--font-display);}
.ws-ring-l{fill:var(--fg-faint);font-size:10px;text-anchor:middle;text-transform:uppercase;letter-spacing:.1em;}
.ws-sum-note{font-size:11.5px;color:var(--fg-faint);line-height:1.55;margin-top:10px;text-align:left;}

.ws-sum-stats,#capaStats,#docStats,#teamStats{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.ws-stat{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:15px;display:flex;flex-direction:column;gap:2px;}
.ws-stat .n{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--fg);line-height:1.1;}
.ws-stat .l{font-size:12px;color:var(--fg-muted);font-weight:600;}
.ws-stat .s{font-size:11px;color:var(--fg-faint);line-height:1.45;margin-top:3px;}
.ws-stat-ok .n{color:var(--accent-text);}
.ws-stat-warn .n{color:var(--warn);}
.ws-stat-bad .n,.ws-stat-core .n{color:var(--nc);}

.ws-chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
  margin-bottom:28px;}
.ws-chapter{-webkit-appearance:none;appearance:none;font:inherit;text-align:left;cursor:pointer;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px;color:var(--fg);transition:border-color .15s,transform .15s;}
.ws-chapter:hover{border-color:var(--brand-2);transform:translateY(-2px);}
.ws-ch-top{display:flex;justify-content:space-between;align-items:baseline;}
.ws-ch-code{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-text);}
.ws-ch-pct{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--fg);}
.ws-ch-name{font-size:11.5px;color:var(--fg-muted);margin:5px 0 8px;line-height:1.35;min-height:30px;}
.ws-ch-bar{height:5px;background:var(--border);border-radius:99px;overflow:hidden;}
.ws-ch-bar i{display:block;height:100%;background:var(--accent-solid);border-radius:99px;transition:width .5s ease;}
.ws-ch-sub{font-size:10.5px;color:var(--fg-faint);margin-top:6px;}

/* ---------- filters ---------- */
.ws-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;}
.ws-filters input[type=search],.ws-filters select{padding:9px 12px;border:1px solid var(--border);
  border-radius:9px;background:var(--bg-elevated);color:var(--fg);font-family:inherit;font-size:13.5px;}
.ws-filters input[type=search]{min-width:230px;flex:1;}
.ws-filters input:focus,.ws-filters select:focus{border-color:var(--brand-2);}
.ws-check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--fg-muted);cursor:pointer;}
.ws-count{font-family:var(--font-mono);font-size:12px;color:var(--fg-faint);margin-bottom:12px;display:block;}

/* ---------- element rows ---------- */
.ws-std{margin-bottom:16px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg-elevated);overflow:hidden;}
.ws-std-h{display:flex;gap:10px;padding:11px 16px;background:var(--brand-tint);font-size:12.5px;
  color:var(--fg-muted);line-height:1.5;}
.ws-std-code{font-family:var(--font-mono);font-weight:700;color:var(--accent-text);flex-shrink:0;}
.ws-el{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 16px;
  border-top:1px solid var(--border-soft);align-items:start;}
@media (max-width:760px){.ws-el{grid-template-columns:1fr;}}
.ws-el-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;}
.ws-el-code{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-text);}
.ws-el-text{font-size:13.5px;line-height:1.6;color:var(--fg);margin:0 0 10px;}
.ws-sop{font-size:10.5px;font-weight:700;color:var(--warn);background:var(--warn-tint);
  padding:3px 8px;border-radius:999px;}
.cat-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;}
.cat-CORE,.cat-Core{background:var(--nc-tint);color:var(--nc);}
.cat-Commitment{background:var(--warn-tint);color:var(--warn);}
.cat-Achievement{background:var(--accent-bright-tint);color:var(--accent-text);}
.cat-Excellence{background:var(--info-tint);color:var(--info);}
.ws-el-meta{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr;gap:8px;}
@media (max-width:900px){.ws-el-meta{grid-template-columns:1fr 1fr;}}
.ws-in{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);
  color:var(--fg);font-family:inherit;font-size:12.5px;min-width:0;}
.ws-in:focus{border-color:var(--brand-2);}
.ws-in:disabled{opacity:.55;}
.ws-el-status{display:flex;gap:5px;flex-shrink:0;}
.ws-sbtn{-webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;min-width:44px;
  padding:8px 6px;border-radius:8px;border:1px solid var(--border);background:var(--bg);
  color:var(--fg-muted);font-size:11.5px;font-weight:700;transition:all .12s;}
.ws-sbtn:hover{border-color:var(--brand-2);}
.ws-sbtn.on.s-compliant{background:var(--accent-solid);border-color:var(--brand-2);color:#0a1230;}
.ws-sbtn.on.s-partial{background:var(--warn);border-color:var(--warn);color:#2b1a02;}
.ws-sbtn.on.s-nc{background:var(--nc);border-color:var(--nc);color:#fff;}
.ws-sbtn.on.s-na{background:var(--fg-faint);border-color:var(--fg-faint);color:var(--bg);}
.ws-sbtn.on.s-unassessed{background:var(--border);color:var(--fg);}
.ws-sbtn:disabled{opacity:.5;cursor:default;}

/* ---------- CAPA ---------- */
.capa-card{background:var(--bg-elevated);border:1px solid var(--border);border-left-width:4px;
  border-radius:var(--r-lg);padding:16px 18px;margin-bottom:12px;}
.capa-card.sev-critical{border-left-color:var(--nc);}
.capa-card.sev-major{border-left-color:var(--warn);}
.capa-card.sev-minor{border-left-color:var(--brand-2);}
.capa-card.sev-observation{border-left-color:var(--fg-faint);}
.capa-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;font-size:11px;}
.capa-sev,.capa-status,.capa-el,.capa-over,.doc-st,.role-pill{font-weight:700;padding:3px 9px;
  border-radius:999px;font-size:10.5px;}
.capa-sev.sev-critical,.capa-over{background:var(--nc-tint);color:var(--nc);}
.capa-sev.sev-major{background:var(--warn-tint);color:var(--warn);}
.capa-sev.sev-minor{background:var(--brand-tint);color:var(--accent-text);}
.capa-sev.sev-observation{background:var(--border);color:var(--fg-muted);}
.capa-status{background:var(--border);color:var(--fg-muted);}
.capa-status.st-closed,.capa-status.st-verified,.doc-st.st-approved{background:var(--accent-bright-tint);color:var(--accent-text);}
.capa-status.st-open{background:var(--nc-tint);color:var(--nc);}
.capa-el{font-family:var(--font-mono);background:var(--brand-tint);color:var(--accent-text);}
.capa-due{margin-left:auto;color:var(--fg-faint);font-size:11.5px;}
.capa-card h4{font-family:var(--font-display);font-size:16px;margin-bottom:4px;}
.capa-sub{font-size:12px;color:var(--fg-faint);margin-bottom:8px;}
.capa-line{font-size:13px;color:var(--fg-muted);line-height:1.6;margin:4px 0;}
.capa-line b{color:var(--fg);}
.capa-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

/* ---------- tables ---------- */
.ws-table{width:100%;border-collapse:collapse;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;font-size:13px;}
.ws-table th{text-align:left;padding:11px 12px;background:var(--brand-tint);color:var(--accent-text);
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.ws-table td{padding:11px 12px;border-top:1px solid var(--border-soft);color:var(--fg);vertical-align:top;}
.ws-table .mono{font-family:var(--font-mono);font-size:12px;}
.ws-table .small{font-size:11px;color:var(--fg-faint);}
.ws-table .td-sub{font-size:11.5px;color:var(--fg-faint);margin-top:3px;}
.ws-table .nowrap{white-space:nowrap;}
.ws-table tr.row-overdue{background:var(--nc-tint);}
.ws-table tr.row-soon{background:var(--warn-tint);}
.doc-st{background:var(--border);color:var(--fg-muted);}
.doc-st.st-obsolete{background:var(--nc-tint);color:var(--nc);}
.role-pill{background:var(--brand-tint);color:var(--accent-text);text-transform:capitalize;}
.role-pill.role-owner{background:var(--accent-bright-tint);color:var(--accent-text);}
.role-pill.role-viewer{background:var(--border);color:var(--fg-muted);}
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px;}
.role-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;}
.role-card p{font-size:12.5px;color:var(--fg-muted);margin-top:8px;line-height:1.55;}

/* ---------- modal ---------- */
.ws-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;
  justify-content:center;z-index:100;padding:20px;overflow-y:auto;}
.ws-modal.open{display:flex;}
.ws-modal-in{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px;max-width:720px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-2);}
.ws-modal-in h3{font-size:19px;margin-bottom:16px;}
.ws-form{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
@media (max-width:640px){.ws-form{grid-template-columns:1fr;}}
.ws-f{display:flex;flex-direction:column;gap:5px;}
.ws-f-wide{grid-column:1 / -1;}
.ws-f label{font-size:12px;font-weight:700;color:var(--fg-muted);}
.ws-f input,.ws-f select,.ws-f textarea{padding:9px 11px;border:1px solid var(--border);
  border-radius:8px;background:var(--bg);color:var(--fg);font-family:inherit;font-size:13.5px;}
.ws-f textarea{resize:vertical;}
.ws-f input:focus,.ws-f select:focus,.ws-f textarea:focus{border-color:var(--brand-2);
  box-shadow:0 0 0 3px var(--brand-tint);}
.ws-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}

/* ---------- misc ---------- */
.ws-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0;}
.ws-empty{text-align:center;padding:40px;color:var(--fg-faint);font-size:14px;}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-danger{color:var(--nc);border-color:var(--nc);}
.btn-danger:hover{background:var(--nc-tint);}
.ws-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--fg);color:var(--bg);padding:11px 20px;border-radius:99px;font-size:13px;
  font-weight:600;opacity:0;pointer-events:none;transition:all .25s ease;z-index:200;}
.ws-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.ws-toast.bad{background:var(--nc);color:#fff;}

/* A control the database would refuse. Shown disabled with the reason in the tooltip
   rather than hidden — a missing button reads as a bug, a disabled one teaches the rule. */
.btn.is-off,.btn-mini.is-off{opacity:.42;cursor:not-allowed;}
.btn.is-off:hover,.btn-mini.is-off:hover{border-color:var(--border);color:var(--fg-muted);background:transparent;}

/* Register filters. Tokens only; nothing colour-bearing inside a media query. */
.reg-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px;}
.ws-select{padding:9px 13px;border:1px solid var(--border);border-radius:999px;
  background:var(--bg-elevated);color:var(--fg);font-size:13px;font-weight:600;
  min-height:40px;cursor:pointer;font-family:inherit;}
.ws-select:focus{border-color:var(--brand-2);}
@media (max-width:760px){.reg-filters{width:100%;}.ws-select{flex:1;}}

/* Pin control. Sits beside the mode notice at the top of each workspace page. */
.ws-topbar{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:8px;}
.ws-topbar > #wsNotice{flex:1;min-width:0;}
.ws-pin{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:8px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--bg-elevated);color:var(--fg-muted);cursor:pointer;min-height:38px;
  white-space:nowrap;}
.ws-pin:hover{border-color:var(--brand-2);color:var(--accent-text);}
.ws-pin.is-on{border-color:var(--brand-2);color:var(--accent-text);
  background:var(--accent-bright-tint);}
@media (max-width:760px){.ws-topbar{gap:10px;}.ws-pin{width:100%;justify-content:center;}}

/* Rounds. Tokens only; no colour inside a media query. */
.rd-good{color:var(--ok,var(--brand-2));}
.rd-bad{color:var(--nc);}
.rd-flag{font-size:11.5px;font-weight:700;color:var(--nc);}
.rd-crit{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--nc-tint);color:var(--nc);}
.rd-spark{width:62px;height:20px;vertical-align:middle;margin:0 4px;fill:none;stroke-width:1.6;}
.rd-spark.is-up{stroke:var(--ok,var(--brand-2));}
.rd-spark.is-down{stroke:var(--nc);}
.rd-delta{font-size:11.5px;font-weight:700;}
.rd-delta.is-up{color:var(--ok,var(--brand-2));}
.rd-delta.is-down{color:var(--nc);}
.rd-qs{margin:8px 0 0;padding-left:18px;font-size:12.5px;color:var(--fg-muted);display:grid;gap:3px;}
.rd-edit{display:grid;gap:8px;max-height:46vh;overflow-y:auto;}
.rd-edit-row{display:flex;gap:8px;align-items:center;}
.rd-q{flex:1;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg);color:var(--fg);font-family:inherit;font-size:13.5px;}
.rd-c{width:auto;margin:0;cursor:pointer;}
.rd-crit-box{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-muted);
  white-space:nowrap;cursor:pointer;}
.rd-run{display:grid;gap:8px;max-height:42vh;overflow-y:auto;margin:14px 0;}
.rd-run-row{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 12px;border:1px solid var(--border-soft);border-radius:var(--r-md);
  font-size:13.5px;}
.rd-ans{display:flex;gap:5px;flex-shrink:0;}
/* 44px, not 34. This is the control a nurse taps three times per question while holding
   a phone one-handed on a ward round — the single most-tapped thing in the product, and
   the one place a cramped target actually costs accuracy. */
.rd-a{padding:6px 12px;border-radius:999px;border:1px solid var(--border);
  background:var(--bg);color:var(--fg-muted);font-size:12px;font-weight:600;cursor:pointer;
  min-height:44px;font-family:inherit;}
.rd-a.is-on{border-color:var(--brand-2);background:var(--brand-tint);color:var(--accent-text);}
.rd-live{padding:11px 14px;border-radius:var(--r-md);font-size:13px;
  background:var(--bg-elevated);color:var(--fg-muted);}
.rd-live.is-pass{background:var(--accent-bright-tint);color:var(--accent-text);}
.rd-live.is-fail{background:var(--nc-tint);color:var(--nc);}
@media (max-width:760px){
  .rd-run-row{flex-direction:column;align-items:flex-start;gap:10px;}
  .rd-ans{width:100%;}
  /* Full-width thirds on a phone: a thumb reaching across the screen should not have to
     aim. */
  .rd-a{flex:1;min-height:48px;font-size:13.5px;}
}

/* Department dashboard. Tokens only; no colour inside a media query. */
.dash-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.dash-showing{font-size:12.5px;color:var(--fg-faint);}
.dash-h{font-size:15px;margin:26px 0 12px;display:flex;align-items:center;gap:9px;}
.dash-h.is-quiet{color:var(--fg-faint);font-weight:600;}
.dash-n{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:var(--bg-elevated);color:var(--fg-muted);}
.dash-sub{font-size:12.5px;color:var(--fg-muted);margin:-6px 0 12px;}
.dash-kind{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--accent-text);margin-bottom:3px;}
.dash-sops{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.dash-sop{display:block;padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-elevated);text-decoration:none;color:inherit;}
.dash-sop:hover{border-color:var(--brand-2);}
.dash-sop b{display:block;font-family:var(--font-mono);font-size:12px;color:var(--accent-text);
  margin-bottom:3px;}
.dash-sop span{font-size:13px;color:var(--fg-muted);line-height:1.45;}
@media (max-width:760px){.dash-sops{grid-template-columns:1fr;}.dash-picker .ws-select{flex:1;}}

/* Notification bell. Tokens only; nothing colour-bearing inside a media query. */
.ws-bell{position:relative;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-elevated);color:var(--fg-muted);
  cursor:pointer;font-size:15px;}
.ws-bell:hover{border-color:var(--brand-2);color:var(--accent-text);}
.ws-bell.is-new{border-color:var(--nc);color:var(--nc);}
.ws-bell-n{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--nc);color:#fff;font-size:10px;font-weight:700;
  font-style:normal;display:grid;place-items:center;}
.ws-bell-panel{position:absolute;right:0;top:46px;width:min(380px,86vw);z-index:60;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);overflow:hidden;}
.ws-bell-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-bottom:1px solid var(--border-soft);font-size:13.5px;}
.ws-bell-x{border:0;background:transparent;color:var(--fg-faint);cursor:pointer;font-size:13px;}
.ws-bell-body{max-height:46vh;overflow-y:auto;padding:6px;}
.ws-bell-grp>span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--fg-faint);padding:9px 9px 5px;}
.ws-bell-row{display:block;padding:9px 11px;border-radius:var(--r-md);text-decoration:none;
  color:inherit;border-left:3px solid var(--border);margin-bottom:4px;}
.ws-bell-row:hover{background:var(--bg);}
.ws-bell-row.is-bad{border-left-color:var(--nc);}
.ws-bell-row.is-warn{border-left-color:var(--warn);}
.ws-bell-row b{display:block;font-size:13px;}
.ws-bell-row span{font-size:11.5px;color:var(--fg-muted);}
.ws-bell-more{font-size:11.5px;color:var(--fg-faint);padding:2px 11px 8px;}
.ws-bell-empty{padding:22px 16px;font-size:13px;color:var(--fg-muted);text-align:center;}
.ws-bell-foot{border-top:1px solid var(--border-soft);padding:11px 14px;display:grid;gap:8px;}
.ws-bell-opt{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-muted);
  cursor:pointer;}
.ws-bell-opt input{width:auto;margin:0;}

/* Onboarding */
.ob{border:1px solid var(--brand-2);border-radius:var(--r-lg);background:var(--brand-tint);
  padding:18px 20px;margin-bottom:22px;}
.ob-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.ob-top b{font-size:15px;}
.ob-sub{display:block;font-size:12.5px;color:var(--fg-muted);margin-top:2px;}
.ob-x{border:0;background:transparent;color:var(--fg-faint);cursor:pointer;font-size:13px;}
.ob-track{height:5px;border-radius:3px;background:var(--bg);margin:12px 0 16px;overflow:hidden;}
.ob-track i{display:block;height:100%;background:var(--accent-solid);transition:width 420ms ease;}
.ob-steps{display:grid;gap:8px;}
.ob-step{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--bg-elevated);border:1px solid transparent;}
.ob-step.is-next{border-color:var(--brand-2);}
.ob-step.is-done{opacity:.6;}
.ob-tick{width:20px;height:20px;border-radius:999px;border:1.5px solid var(--border);
  display:grid;place-items:center;font-size:11px;flex-shrink:0;}
.ob-step.is-done .ob-tick{background:var(--accent-solid);border-color:var(--brand-2);color:#fff;}
.ob-body{flex:1;min-width:0;}
.ob-body b{display:block;font-size:13.5px;}
.ob-body span{font-size:12px;color:var(--fg-muted);line-height:1.45;}
.ob-detail{color:var(--accent-text) !important;font-weight:600;}

/* Attachments */
.att{margin-top:14px;border-top:1px solid var(--border-soft);padding-top:12px;}
.att-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--fg-faint);margin-bottom:8px;}
.att-n{background:var(--bg);padding:1px 7px;border-radius:999px;}
.att-rows{display:grid;gap:6px;margin-bottom:9px;}
.att-row{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg);}
.att-kind{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;
  background:var(--brand-tint);color:var(--accent-text);}
.att-name{flex:1;text-align:left;border:0;background:transparent;color:var(--fg);
  font-size:13px;cursor:pointer;font-family:inherit;text-decoration:underline;
  text-underline-offset:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-size{font-size:11px;color:var(--fg-faint);}
.att-x{border:0;background:transparent;color:var(--fg-faint);cursor:pointer;font-size:12px;}
.att-empty{font-size:12.5px;color:var(--fg-faint);margin-bottom:9px;}
.att-add{display:inline-block;font-size:12.5px;font-weight:600;color:var(--accent-text);
  cursor:pointer;padding:7px 13px;border:1px dashed var(--brand-2);border-radius:999px;}
@media (max-width:760px){
  .ws-bell-panel{position:fixed;left:12px;right:12px;top:auto;width:auto;}
  .ob-step{flex-wrap:wrap;}
}

/* Document library */
/* The count badge MUST carry its own colour. Without one it inherits from the tab, and
   on the selected tab that is the on-brand colour — which on this badge's own background
   was white on near-white, i.e. the number simply disappeared. */
.lib-n{background:var(--bg);color:var(--fg-muted);padding:1px 7px;border-radius:999px;
  font-size:11px;margin-left:4px;font-variant-numeric:tabular-nums;}
/* On the selected tab the badge INVERTS rather than tinting. A translucent wash cannot
   serve all three themes: light and dark put white text on the tab, neon puts near-black,
   so any single wash direction improves one and ruins another (a 20% wash measured 6.2 on
   light but 4.2 on dark). Swapping the two colours is high contrast in every theme —
   11.0 light, 6.3 dark, 12.7 neon — and reads as a deliberate solid pill. */
.cal-tab.is-on .lib-n{
  background:var(--on-brand);
  color:var(--accent-text);
}
.lib-group{margin-bottom:26px;}
.lib-group h3{font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.lib-card{text-align:left;padding:13px 14px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-elevated);cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:6px;}
.lib-card:hover{border-color:var(--brand-2);}
.lib-card.is-detailed{border-left:3px solid var(--brand-2);}
/* The card title inherited the panel's muted body colour against a dark card, which left
   the document names close to unreadable — the thing a person is actually scanning for.
   Title in full foreground, subtitle muted: hierarchy by contrast, not by both being dim.

   The colour is repeated on `.lib-card b` at group specificity because the workspace
   panel sets a muted colour on descendants of `.ws-panel`, which was winning here and is
   the reason these read as dark-navy-on-dark-navy in the first place. */
.lib-card b,
.lib-grid .lib-card b{font-size:13.5px;line-height:1.35;color:var(--fg);font-weight:700;}
/* Teal on hover rather than teal always: 45 department cards all in the accent colour
   removes the very hierarchy that makes "Full detail" mean something. The title is the
   loudest thing on the card by brightness; the accent stays reserved for status. */
.lib-card:hover b,
.lib-card:focus-visible b{color:var(--accent-text);}
.lib-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:var(--bg);color:var(--fg-faint);width:fit-content;}
.lib-ready{font-size:11px;color:var(--accent-text);font-weight:600;}
/* Lifted from --fg-faint, which on this card background was barely distinguishable from
   the card itself. It is secondary information, not invisible information. */
.lib-soon{font-size:11px;color:var(--fg-muted);}
.lib-detail{max-width:620px;}
.lib-detail-head h3{font-size:19px;margin:6px 0 0;}
.lib-why{font-size:13.5px;color:var(--fg-muted);margin:10px 0;line-height:1.6;
  padding:11px 13px;background:var(--bg);border-radius:var(--r-md);}
.lib-sub{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);
  margin:16px 0 8px;}
.lib-fields{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13.5px;max-height:38vh;overflow-y:auto;}
.lib-analytics{margin-top:14px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--accent-bright-tint);color:var(--accent-text);font-size:13px;}
.lib-analytics b{display:block;font-size:11px;text-transform:uppercase;margin-bottom:4px;}
.lib-note{font-size:12.5px;color:var(--fg-faint);margin-top:12px;font-style:italic;}

/* Apex manual */
.apex-layout{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;}
.apex-jump{position:sticky;top:100px;display:grid;gap:2px;}
.apex-jump a{font-size:12.5px;color:var(--fg-muted);text-decoration:none;padding:7px 9px;
  border-radius:var(--r-md);line-height:1.4;}
.apex-jump a:hover{background:var(--bg-elevated);color:var(--fg);}
.apex-top{position:sticky;top:96px;z-index:5;background:var(--bg);padding:10px 0;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--border-soft);margin-bottom:20px;}
.apex-progress{font-size:13px;min-width:220px;}
.apex-progress b{display:block;margin-bottom:5px;}
.apex-progress span{font-size:11.5px;color:var(--fg-faint);}
.apex-progress .ob-track{margin:7px 0 0;width:220px;}
.apex-actions{display:flex;align-items:center;gap:10px;}
.apex-saved{font-size:11.5px;color:var(--accent-text);font-weight:600;}
.apex-sec{padding-bottom:30px;margin-bottom:26px;border-bottom:1px solid var(--border-soft);}
.apex-sec h2{font-size:17px;margin-bottom:8px;}
.apex-note{font-size:13px;color:var(--fg-muted);margin-bottom:14px;line-height:1.6;}
.apex-note a{color:var(--accent-text);}
.apex-f{margin-bottom:14px;}
.apex-f label{display:block;font-size:12.5px;font-weight:700;color:var(--fg-muted);margin-bottom:5px;}
.apex-f input,.apex-f textarea{width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-elevated);color:var(--fg);font-family:inherit;
  font-size:14px;line-height:1.55;}
.apex-committees{display:grid;gap:8px;margin-bottom:16px;}
.apex-c{padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-elevated);}
.apex-c b{display:block;font-size:13.5px;}
.apex-c span{font-size:12px;color:var(--fg-muted);}
@media (max-width:900px){
  .apex-layout{grid-template-columns:1fr;}
  .apex-jump{position:static;display:flex;flex-wrap:wrap;gap:6px;}
  .lib-grid{grid-template-columns:1fr;}
}

/* Bulk import */
.imp-intro{font-size:13.5px;color:var(--fg-muted);line-height:1.6;margin-bottom:16px;}
.imp-cols{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px;}
.imp-col{font-size:11.5px;padding:4px 10px;border-radius:999px;background:var(--bg-elevated);
  border:1px solid var(--border);}
.imp-col.is-req{border-color:var(--brand-2);color:var(--accent-text);font-weight:600;}
.imp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:34px 20px;border:2px dashed var(--border);border-radius:var(--r-lg);
  background:var(--bg-elevated);cursor:pointer;text-align:center;margin-bottom:20px;}
.imp-drop:hover,.imp-drop.is-over{border-color:var(--brand-2);background:var(--brand-tint);}
.imp-drop b{font-size:14.5px;}
.imp-drop span{font-size:12px;color:var(--fg-faint);}
.imp-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px;}
.imp-error{padding:16px 18px;border:1px solid var(--nc);background:var(--nc-tint);
  color:var(--nc);border-radius:var(--r-md);}
.imp-error p{margin:6px 0 0;font-size:13.5px;}
.imp-bad{padding:14px 16px;border:1px solid var(--warn);background:var(--warn-tint);
  color:var(--warn);border-radius:var(--r-md);margin-bottom:16px;font-size:13px;}
.imp-bad-rows{margin-top:8px;display:grid;gap:4px;max-height:180px;overflow-y:auto;}
.imp-line{font-family:var(--font-mono);font-size:11px;margin-right:8px;opacity:.8;}
.imp-sub{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);
  margin-bottom:8px;}
.imp-table{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:16px;}
.imp-table table{width:100%;border-collapse:collapse;font-size:12.5px;}
.imp-table th,.imp-table td{padding:8px 11px;text-align:left;border-bottom:1px solid var(--border-soft);
  white-space:nowrap;}
.imp-table th{background:var(--bg-elevated);font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--fg-faint);}
.imp-actions{display:flex;gap:10px;flex-wrap:wrap;}
.imp-done{padding:18px 20px;border:1px solid var(--brand-2);background:var(--brand-tint);
  border-radius:var(--r-md);}
.imp-done b{font-size:15px;}
.imp-done p{margin:5px 0 0;font-size:13.5px;color:var(--fg-muted);}
@media (max-width:760px){.imp-summary{grid-template-columns:1fr;}.imp-actions .btn{flex:1;justify-content:center;}}

/* Global search */
.wsq-open{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-elevated);color:var(--fg-faint);
  font-size:12.5px;cursor:pointer;min-height:38px;font-family:inherit;white-space:nowrap;}
.wsq-open:hover{border-color:var(--brand-2);color:var(--accent-text);}
.wsq-open kbd{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg);
  border:1px solid var(--border);font-family:var(--font-mono);}
.wsq .ws-modal-in{max-width:640px;padding:0;overflow:hidden;}
#wsqInput{width:100%;padding:18px 22px;border:0;border-bottom:1px solid var(--border);
  background:transparent;color:var(--fg);font-size:16px;font-family:inherit;}
#wsqResults{max-height:56vh;overflow-y:auto;padding:8px;}
.wsq-empty{padding:26px 20px;text-align:center;font-size:13px;color:var(--fg-faint);}
.wsq-group>span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--fg-faint);padding:10px 10px 5px;}
.wsq-row{display:block;padding:9px 12px;border-radius:var(--r-md);text-decoration:none;
  color:inherit;}
.wsq-row:hover{background:var(--bg);}
.wsq-row b{display:block;font-size:13.5px;}
.wsq-row span{display:block;font-size:11.5px;color:var(--fg-muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.wsq-row em{font-style:normal;font-size:10.5px;color:var(--accent-text);}
@media (max-width:760px){
  .wsq-open kbd{display:none;}
  .wsq .ws-modal-in{max-width:none;margin:12px;}
}

/* Device limit. The person most likely to see this is an honest customer who changed
   laptops, so it reads as a problem with a fix rather than an accusation. */
.dev-block{max-width:56ch;margin:40px auto;text-align:left;}
.dev-block h1{font-size:24px;margin-bottom:12px;}
.dev-block p{font-size:14.5px;line-height:1.65;color:var(--fg-muted);margin-bottom:14px;}
.dev-list{display:grid;gap:9px;margin:20px 0;}
.dev-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-elevated);}
.dev-row b{display:block;font-size:14px;}
.dev-row span{font-size:12px;color:var(--fg-faint);}
.dev-note{font-size:13px;color:var(--fg-faint);border-top:1px solid var(--border-soft);
  padding-top:14px;}
.dev-note a{color:var(--accent-text);}

/* Loading skeleton.
   The workspace hid #wsBody until the auth and entitlement checks returned, so every load
   sat blank for a full network round-trip — two or three seconds, and worse on mobile data
   or a distant database. A blank screen is indistinguishable from a broken one, which is
   why this shows the page's shape instead of nothing. It is removed the moment real
   content is ready. */
.ws-skel{padding:26px 0;}
.ws-skel-row{height:14px;border-radius:6px;margin-bottom:12px;
  background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--border-soft) 37%,var(--bg-elevated) 63%);
  background-size:400% 100%;animation:wsShimmer 1.3s ease-in-out infinite;}
.ws-skel-row.t{height:26px;width:44%;margin-bottom:20px;}
.ws-skel-row.s{width:72%;}
.ws-skel-row.m{width:88%;}
.ws-skel-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0;}
.ws-skel-card{height:78px;border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--border-soft) 37%,var(--bg-elevated) 63%);
  background-size:400% 100%;animation:wsShimmer 1.3s ease-in-out infinite;}
@keyframes wsShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (max-width:760px){
  .ws-skel-cards{grid-template-columns:repeat(2,1fr);}
}
/* Under reduced motion a shimmering placeholder is worse than a still one — the animation
   is the part that draws the eye, and it is the part someone sensitive to motion did not
   ask for. */
@media (prefers-reduced-motion:reduce){
  .ws-skel-row,.ws-skel-card{animation:none;background:var(--bg-elevated);}
}
.ws-skel-stalled{padding:48px 0;max-width:52ch;}
.ws-skel-stalled h2{font-size:20px;margin-bottom:10px;}
.ws-skel-stalled p{font-size:14.5px;color:var(--fg-muted);line-height:1.6;margin-bottom:18px;}

/* Inline qualifier inside a form label — "(as printed)", "(from the renewed certificate)".
   Lighter and smaller than the label it sits in, because it narrows the field's meaning
   rather than naming it. Used by the certificate expiry fields, where the difference
   between the date you computed and the date printed on the certificate is the whole
   point of the field. */
.ws-f label .cal-hint-inline{font-weight:400;font-size:11.5px;color:var(--fg-faint);
  margin-left:4px;}

/* Team page: the "sees every department" marker and its checkbox row.
   Department scoping is invisible until something says so — an admin reviewing seats
   needs to see who can read the whole hospital without opening each row. */
.tm-scope{display:inline-block;font-family:var(--font-mono);font-size:10.5px;
  color:var(--accent-text);background:var(--brand-tint);border-radius:999px;
  padding:1px 8px;margin-left:6px;vertical-align:middle;}
.tm-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-weight:600;}
.tm-check input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--brand-2);}
.tm-check small{display:block;font-weight:400;font-size:11.5px;line-height:1.5;
  color:var(--fg-faint);margin-top:3px;}

/* ---------- the workspace nav on a phone ----------
 *
 * Nineteen sections wrapped into SEVEN rows at 375px — 305 pixels of navigation on an
 * 812-pixel screen, so a third of the phone was menu before any content appeared. Adding
 * Evidence, Training and Accreditation is what tipped it over, but the shape was always
 * going to fail as the workspace grew.
 *
 * One row that scrolls sideways instead. The trade is real — links off the right edge are
 * not visible until you swipe — so the active one is scrolled into view by shell.js, and
 * the fade on the right edge is there to say "there is more this way" rather than letting
 * the row look like it simply ends.
 */
@media (max-width: 900px){
  .ws-nav-inner{flex-wrap:nowrap;gap:10px;padding:0 14px;}
  .ws-nav-links{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;                 /* the bar itself is noise at this size */
    scroll-snap-type:x proximity;
    /* Fades the last few pixels so the row reads as continuing rather than ending.
       var(--fg) rather than a literal because a mask uses only the ALPHA channel — the
       hue is irrelevant here — and the palette suite rightly refuses hardcoded colours
       inside a media query, since that is exactly how a rule ends up looking correct in
       dark mode and wrong in light. A token that happens to be opaque satisfies both. */
    -webkit-mask-image:linear-gradient(to right,var(--fg) calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,var(--fg) calc(100% - 22px),transparent);
  }
  .ws-nav-links::-webkit-scrollbar{display:none;}
  .ws-nav-link{white-space:nowrap;flex:none;scroll-snap-align:start;}
  .ws-nav-right{flex:none;}
}

/* ---------- the heading row on Start, and Team in the account bar ----------
   Team is administration rather than one of the day's jobs, so it sits beside the account
   in the bar and beside the heading on Start — never in the row of fifteen tasks, where it
   both lengthened the row and read as another task. */
/* align-items:center, not flex-start. Pinned to the top the button hung level with the cap
   height of a heading three times its size, which read as floating in the corner rather
   than as belonging to the row. Centred, it sits on the heading's optical middle.

   margin-inline:auto rather than justify-content:space-between. A flex item with auto side
   margins takes the free space equally on both sides, so the button lands in the MIDDLE of
   whatever room the heading leaves instead of hard against the right edge — where, next to
   a wide empty column, it looked like something that had slipped out of the layout. */
/* column-gap:0 because the auto margins already do the spacing, and a column gap on top of
   them lands entirely on one side — leaving the button 18px off centre. The row gap stays,
   for when the two stack on a phone. */
.ws-head-row{display:flex;align-items:center;column-gap:0;row-gap:12px;flex-wrap:wrap;}
.ws-head-row h1{margin:0;flex:0 1 auto;}
.ws-head-action{flex:none;margin-inline:auto;min-width:132px;justify-content:center;
  font-size:15px;padding:12px 26px;}

/* On a phone the two stack, and a button stranded on the right under a full-width heading
   looks like a mistake. Once stacked it goes back to the left, under the words it belongs
   to, reading as part of the same block. */
@media (max-width:560px){
  .ws-head-row{align-items:flex-start;}
  .ws-head-action{margin-top:4px;}
}

.ws-team-link{font-size:13px;font-weight:600;color:var(--fg-muted);text-decoration:none;
  border:1px solid var(--border);border-radius:999px;padding:4px 13px;white-space:nowrap;}
.ws-team-link:hover{color:var(--accent-text);border-color:var(--brand-2);}
.ws-team-link.active{color:var(--accent-text);border-color:var(--brand-2);}

/* ---- reminder frequency, in the bell panel ----
   The old control was a tickbox, so the only answers were "weekly" or "silence".
   This is a choice plus a sentence saying exactly when the email lands — "monthly"
   means nothing to a quality manager until somebody tells them it is the 1st. */
.ws-bell-freq{display:flex;align-items:center;gap:9px;justify-content:space-between;}
.ws-bell-freq select{font:inherit;font-size:12.5px;padding:5px 9px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer;}
.ws-bell-when{margin:2px 0 8px;font-size:11.5px;line-height:1.5;color:var(--fg-muted);
  border-left:2px solid var(--accent-bright);padding-left:9px;}

/* Certificate attachments under a register history row. The row's own text sits above, so
   the evidence block needs a little air and must not stretch the side column. */
.reg-att { margin-top: 10px; }
.reg-att:empty { display: none; }

/* The free-trial line at the top of every workspace page. Quieter than a warning: it is
   information, and it must not look like something has gone wrong. */
.ws-trial { border-left-color: var(--accent, #4C6FFF); }
.ws-trial a { font-weight: 600; }