/* The signed-in home: the matters as a gallery (matters-dashboard.js). It wears the working screen's monochrome tokens
   (matter-workspace.css: graphite / porcelain, silver-grey as the one secondary tone, no hue) so the home and a matter
   read as one instrument. Light is the default; the sun/moon switch keeps the reviewer's choice.
   State is said in words, with a small shape beside them (filled = ready, half = working, ring = waiting, square =
   stopped) — never a colour. Pictures are square and flush (never a rounded, floating card, no shadow); on a phone
   they run to the screen's edges. Type: the Apple system face (SF Pro Text / Display) with the self-hosted Inter off
   Apple devices; sizes 24 / 15 / 14 / 13 / 12, weights 400 / 500 / 600, sentence case, numbers tabular. Nothing appears
   only on hover: the whole card is a target and its Open button is always drawn. The only motion is a 120 ms tint. */
body.signed-in:not(.review-mode):not(.intake-mode){
  --bg:#F5F5F7;--pane:#FFFFFF;--ink:#1D1D1F;--soft:#636368;--rule:#D2D2D7;--hover:rgba(29,29,31,.04);
  --fill:rgba(29,29,31,.06);--fill-2:rgba(29,29,31,.09);--fill-3:rgba(29,29,31,.14);--ph:#E8E8ED;--video:#000;--on-ink:#FFFFFF;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Inter",sans-serif;
  --ui-d:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Inter",sans-serif;
  --t-page:24px;--t-name:15px;--t-body:14px;--t-sec:13px;--t-cap:12px;
  background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.5 var(--ui);letter-spacing:-.003em;
  font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  padding:0 40px 48px}
:root[data-theme="dark"] body.signed-in:not(.review-mode):not(.intake-mode){
  --bg:#131315;--pane:#1D1D1F;--ink:#F5F5F7;--soft:#A1A1A6;--rule:#2C2C2E;--hover:rgba(245,245,247,.05);
  --fill:rgba(245,245,247,.08);--fill-2:rgba(245,245,247,.12);--fill-3:rgba(245,245,247,.18);--ph:#28282B;--on-ink:#1D1D1F}
body.signed-in:not(.review-mode):not(.intake-mode) .wrap{max-width:1240px}
/* the top bar: the emblem and the name, the sun/moon at the right; flat, like the working screen's */
body.signed-in:not(.review-mode):not(.intake-mode) .wrap>header{position:static;display:flex;align-items:center;gap:10px;min-height:64px;margin:0;padding:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.signed-in:not(.review-mode):not(.intake-mode) .wrap>header img{width:24px;height:24px}
body.signed-in:not(.review-mode):not(.intake-mode) .wrap>header a{font-size:var(--t-body);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
body.signed-in:not(.review-mode):not(.intake-mode) .theme-toggle{margin-left:auto;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--soft);transition:background-color .12s,color .12s}
body.signed-in:not(.review-mode):not(.intake-mode) .theme-toggle:hover{color:var(--ink);background:var(--fill-2);border-color:transparent}
body.signed-in:not(.review-mode):not(.intake-mode) footer{border-top:0;margin-top:64px;padding-top:0;color:var(--soft);font-size:var(--t-cap)}
body.signed-in:not(.review-mode):not(.intake-mode) :focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.mdash{font-family:var(--ui)}
.mdash :where(h1,h2,h3,p,ul){margin:0;padding:0}
/* title (and who is signed in, quietly), then search and New matter, on one line */
.mdash-top{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;padding:16px 0 4px}
.mdash-title{font:600 var(--t-page)/1.2 var(--ui-d);letter-spacing:-.018em;color:var(--ink)}
.mdash-who{margin-right:auto!important;align-self:flex-end;padding-bottom:3px!important;font-size:var(--t-sec);color:var(--soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdash-who #acctWho{color:inherit;font-size:inherit}
.mdash-search{flex:0 1 340px;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:10px;background:var(--fill);color:var(--soft);cursor:text;transition:box-shadow .12s}
.mdash-search svg{flex:none}
.mdash-search:focus-within{box-shadow:0 0 0 2px var(--ink)}
.mdash-search input{flex:1;min-width:0;height:38px;border:0;outline:0;background:none;font:inherit;font-size:var(--t-body);color:var(--ink)}
.mdash-search input::placeholder{color:var(--soft);opacity:1}
body.signed-in .mdash .mdash-new{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border:0;border-radius:10px;
  background:var(--ink);color:var(--on-ink);font:600 var(--t-body)/1 var(--ui);letter-spacing:0;transform:none;transition:opacity .12s}
body.signed-in .mdash .mdash-new:hover{opacity:.86;transform:none}
/* the two sections: sentence-case headings, set apart by space */
.mdash-sec{margin-top:28px}
.mdash-sec[hidden]{display:none}
.shared-workspace-bar{display:grid;grid-template-columns:minmax(180px,320px) minmax(0,1fr);align-items:center;gap:16px;padding:20px 0 4px;border-bottom:1px solid var(--rule);letter-spacing:0}
.shared-workspace-bar[hidden],body.signed-in .mdash .mdash-new[hidden]{display:none}
.shared-workspace-bar label[hidden]{display:none}
.shared-workspace-bar:has(label[hidden]){grid-template-columns:minmax(0,1fr)}
.shared-workspace-bar label{display:grid;gap:4px;min-width:0;font-size:13px;color:var(--soft)}
.shared-workspace-bar select{width:100%;min-height:44px;padding:8px;border:1px solid var(--rule);border-radius:6px;background:var(--pane);color:var(--ink);font:inherit;text-overflow:ellipsis}
.shared-workspace-bar select:disabled{opacity:1}
.shared-workspace-bar h2{font-size:17px;line-height:1.4;overflow-wrap:anywhere;letter-spacing:0}
.shared-workspace-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.shared-workspace-link{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px;border:1px solid var(--rule);border-radius:10px;background:var(--pane);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.shared-workspace-link strong{font:600 var(--t-body)/1.45 var(--ui)}
.shared-workspace-link span{font:400 var(--t-sec)/1.45 var(--ui);color:var(--soft)}
.shared-workspace-link:hover{border-color:var(--ink)}
.shared-workspace-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:600px){.shared-workspace-bar{grid-template-columns:minmax(0,1fr);gap:10px;padding-bottom:14px}}
.mdash-h{display:flex;align-items:baseline;gap:8px;margin:0 0 12px!important;font:600 var(--t-name)/1.4 var(--ui);letter-spacing:-.006em;text-transform:none;color:var(--ink)}
.mdash-n{font-weight:400;color:var(--soft);font-variant-numeric:tabular-nums}
.mdash .mlist-empty{padding:8px 0 0;color:var(--soft);font-size:var(--t-body)}
.mdash .mlist-empty:empty{display:none}
.mdash-more{margin-top:8px!important;font-size:var(--t-sec);color:var(--soft)}
.mdash-more[hidden]{display:none}

/* ------------------------------------------------------------ Needs you */
/* One pane, one row per matter: a small picture, the name, what waits, Open. */
.mdash-needs{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:0 24px;padding:8px 16px!important;border-radius:12px;background:var(--pane)}
.mcard.is-needs{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;align-items:center;padding:8px 0;cursor:pointer}
.mcard.is-needs .mcard-frame{margin:0;width:128px}
.mcard.is-needs .mcard-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name open" "status open";column-gap:12px;row-gap:2px;align-items:center}
.mcard.is-needs .mcard-name{grid-area:name;font-weight:600;-webkit-line-clamp:1}
.mcard.is-needs .mcard-status{grid-area:status;margin-top:0!important}
.mcard.is-needs .mcard-foot{grid-area:open;margin:0;padding:0;align-self:center}

/* ------------------------------------------------------------ the gallery */
.mdash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px 24px}
.mcard{position:relative;display:flex;flex-direction:column;min-width:0;cursor:pointer;color:var(--ink)}
.mcard[hidden]{display:none}
.mcard-frame{position:relative;aspect-ratio:16/9;overflow:hidden;display:grid;place-items:center;margin-bottom:12px;background:var(--ph)}
.mcard-frame[data-frame="drawn"]{background:var(--video)}
.mcard-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .12s}
.mcard:hover .mcard-frame img{opacity:.88}
.mcard-nopic{font-size:var(--t-sec);color:var(--soft)}
.mcard-body{display:flex;flex-direction:column;flex:1;min-width:0}
.mcard-name{font-size:var(--t-name);font-weight:600;line-height:1.35;letter-spacing:-.008em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mcard:hover .mcard-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* the state: its shape hangs beside the first line, so a second line lines up with the first */
.mcard-status{position:relative;margin-top:4px!important;padding-left:16px!important;font-size:var(--t-body);line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums}
.mcard-counts{margin-top:2px!important;font-size:var(--t-sec);line-height:1.4;color:var(--soft);font-variant-numeric:tabular-nums}
.mcard-counts:empty{display:none}
.mcard-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px}
/* the state's shape: filled = ready, half = working, ring+half = partly done, square = stopped, ring = waiting */
.mcard-glyph{position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.mcard-glyph.is-ok{background:currentColor}
.mcard-glyph.is-run{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.mcard-glyph.is-part{background:linear-gradient(0deg,currentColor 50%,transparent 50%)}
.mcard-glyph.is-stop{border-radius:1px;background:currentColor}
.mcard-glyph.is-wait{color:var(--soft)}
.mcard-glyph.is-err{border-radius:1px;color:var(--soft)}
.mcard-open,.mcard-retry{flex:none;min-height:34px;padding:0 16px;border:0;border-radius:10px;background:var(--fill-2);color:var(--ink);
  font:500 var(--t-sec)/1 var(--ui);letter-spacing:0;cursor:pointer;transition:background-color .12s}
.mcard-open:hover,.mcard:hover .mcard-open,.mcard-retry:hover{background:var(--fill-3)}
.mcard-retry{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.mcard-retry[hidden]{display:none}
.mcard-retry:disabled{opacity:.5;cursor:default}
.mcard-loader{position:fixed;left:-9999px;top:0;width:96px;height:54px;opacity:0;pointer-events:none}

/* ----------------------------------------------------------------- phone */
@media (max-width:700px){
  body.signed-in:not(.review-mode):not(.intake-mode){padding:0 16px 32px}
  body.signed-in:not(.review-mode):not(.intake-mode) .wrap>header{min-height:56px}
  body.signed-in:not(.review-mode):not(.intake-mode) .theme-toggle{width:44px;height:44px}
  .mdash-top{padding-top:4px;gap:10px 12px}
  .mdash-title{font-size:22px}
  .mdash-who{order:3;flex-basis:100%;margin:-6px 0 0!important;padding:0!important}
  body.signed-in .mdash .mdash-new{order:2;margin-left:auto;min-height:44px;padding:0 16px}
  .mdash-search{order:4;flex:1 1 100%;min-height:44px}
  .mdash-search input{height:44px;font-size:16px}
  .mdash-sec{margin-top:22px}
  .mdash-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .mdash-needs{grid-template-columns:minmax(0,1fr);padding:4px 12px!important}
  .mcard.is-needs{grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
  .mcard.is-needs .mcard-name{-webkit-line-clamp:2}
  .mcard.is-needs .mcard-frame{width:96px}
  .mcard.is-needs .mcard-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "status" "open"}
  .mcard.is-needs .mcard-foot{justify-self:start;margin-top:6px}
  /* the picture runs to the screen's edges, like the court steps */
  .mdash-grid .mcard-frame{margin-left:-16px;margin-right:-16px}
  .mcard-open,.mcard-retry{min-height:44px;padding:0 20px;font-size:var(--t-body)}
}

.mcard-groups{font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}