/*
  GenX - one stylesheet for the whole app.

  Tokens first: the light palette on :root, dark under prefers-color-scheme
  (unless the page says light) and again under an explicit data-theme="dark".
  Then the shell (rail + page), the door, the form pieces, and My Work.

  Two rules from the design that every screen inherits:
    - Colour means workflow state, plus one accent for the things you press.
      The --st-* pairs are the states; --return-* marks work that
      came back; --bad is a refusal, --ok a pass, --due the wait on the client;
      --accent (amber, the Ember look) is for actions only. Nothing else has a hue.
    - Type: IBM Plex Sans for text, IBM Plex Mono for ids, codes, counts and
      anything read character by character. Both fall back to system faces.
  Ported from the approved screen designs in D:\Claude_Apps\genx-screen-*.html.
*/

:root{
  /* Ember (chosen September 2026): charcoal rail, amber-orange accent where you act,
     cool slate page, rounded cards and pills, soft shadows. State pills keep their
     own hues, so state still reads at a glance; the accent is for actions only. */
  --page:#F3F4F7;
  --chrome:#FFFFFF; --rail:#23262E; --rail-ink:#A9AFBA; --rail-ink-hi:#FFFFFF; --rail-line:#2F333C;
  --surface:#FFFFFF; --surface-2:#F6F7F9; --sunk:#EBEDF1; --backdrop:#DDE0E6;
  --ink:#191C22; --ink-2:#464C57; --muted:#737A86;
  --line:#E3E6EC; --line-strong:#CBD0D9;
  --action:#E0731A; --action-ink:#FFFFFF;
  --accent:#E0731A; --accent-ink:#A8500A; --accent-soft:#FDEEDF; --accent-line:#F3C79B;
  --toast:#191C22; --toast-ink:#FFFFFF;
  --focus:#B35A10;
  --bad:#9A4726; --bad-bg:#FBF0EC; --bad-line:#D9A28E;
  --ok:#2C6E4E; --ok-bg:#E2EFE7;
  --due:#8A2E6B; --due-bg:#FBEAF4; --due-line:#E7B3D2;

  --st-open-ink:#5A6270;  --st-open-bg:#EBEDF1;
  --st-prog-ink:#2358A8;  --st-prog-bg:#E1EAFA;
  --st-rev-ink:#8F5F0B;   --st-rev-bg:#FBF0D6;
  --st-ver-ink:#0E6B62;   --st-ver-bg:#DAEDEA;
  --st-sign-ink:#6A43A3;  --st-sign-bg:#EDE5F8;
  --st-hold-ink:#737A86;  --st-hold-bg:#EFF1F4;
  --st-int-ink:#2B333D;   --st-int-bg:#DDE2E8;
  --st-done-ink:#5A6270;  --st-done-bg:#EFF1F4;
  --st-gone-ink:#737A86;  --st-gone-bg:#EFF1F4;

  --return-bg:#FCEDE9; --return-line:#EBA898; --return-ink:#B0452A;
  --shadow:0 1px 2px rgba(25,28,34,.05), 0 1px 8px rgba(25,28,34,.04);
  --cardshadow:0 8px 30px rgba(25,28,34,.12), 0 1px 4px rgba(25,28,34,.06);
  --card-shadow:0 2px 10px rgba(25,28,34,.05);
  --btn-shadow:0 2px 8px rgba(224,115,26,.28);

  /* shapes and the display face */
  --r:10px; --r-sm:6px; --r-pill:20px;
  --font-display:"Manrope","IBM Plex Sans",-apple-system,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --page:#101216;
    --chrome:#181B21; --rail:#141619; --rail-ink:#8A919C; --rail-ink-hi:#FFFFFF; --rail-line:#23272E;
    --surface:#181B21; --surface-2:#1F2329; --sunk:#14171B; --backdrop:#0B0D10;
    --ink:#E8EAEE; --ink-2:#B4BAC4; --muted:#848B96;
    --line:#282D35; --line-strong:#3B424C;
    --action:#F08A38; --action-ink:#1A1206;
    --accent:#F08A38; --accent-ink:#F6B27A; --accent-soft:#3A2412; --accent-line:#6B4020;
    --toast:#E8EAEE; --toast-ink:#101216;
    --focus:#F6B27A;
    --bad:#E0906D; --bad-bg:#2C1A14; --bad-line:#8A4A30; --ok:#63C495; --ok-bg:#14281E; --due:#E28BC3; --due-bg:#33162A; --due-line:#6B2E55;
    --st-open-ink:#9AA5B1; --st-open-bg:#242A31;
    --st-prog-ink:#7FB2E6; --st-prog-bg:#18293A;
    --st-rev-ink:#D8A44E;  --st-rev-bg:#332713;
    --st-ver-ink:#5CBCAF;  --st-ver-bg:#12302C;
    --st-sign-ink:#AE8FE0; --st-sign-bg:#251D36;
    --st-hold-ink:#828D99; --st-hold-bg:#20262C;
    --st-int-ink:#AEB8C4;  --st-int-bg:#2A313A;
    --st-done-ink:#9AA5B1; --st-done-bg:#20262C;
    --st-gone-ink:#828D99; --st-gone-bg:#20262C;
    --return-bg:#2C1A14; --return-line:#8A4A30; --return-ink:#E0906D;
    --shadow:0 1px 2px rgba(0,0,0,.5);
    --cardshadow:0 8px 30px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.4);
    --card-shadow:0 2px 10px rgba(0,0,0,.35);
    --btn-shadow:0 2px 8px rgba(240,138,56,.25);
  }
}
:root[data-theme="dark"]{
  --page:#101216;
  --chrome:#181B21; --rail:#141619; --rail-ink:#8A919C; --rail-ink-hi:#FFFFFF; --rail-line:#23272E;
  --surface:#181B21; --surface-2:#1F2329; --sunk:#14171B; --backdrop:#0B0D10;
  --ink:#E8EAEE; --ink-2:#B4BAC4; --muted:#848B96;
  --line:#282D35; --line-strong:#3B424C;
  --action:#F08A38; --action-ink:#1A1206;
  --accent:#F08A38; --accent-ink:#F6B27A; --accent-soft:#3A2412; --accent-line:#6B4020;
  --toast:#E8EAEE; --toast-ink:#101216;
  --focus:#F6B27A;
  --bad:#E0906D; --bad-bg:#2C1A14; --bad-line:#8A4A30; --ok:#63C495; --ok-bg:#14281E; --due:#E28BC3; --due-bg:#33162A; --due-line:#6B2E55;
  --st-open-ink:#9AA5B1; --st-open-bg:#242A31;
  --st-prog-ink:#7FB2E6; --st-prog-bg:#18293A;
  --st-rev-ink:#D8A44E;  --st-rev-bg:#332713;
  --st-ver-ink:#5CBCAF;  --st-ver-bg:#12302C;
  --st-sign-ink:#AE8FE0; --st-sign-bg:#251D36;
  --st-hold-ink:#828D99; --st-hold-bg:#20262C;
  --st-int-ink:#AEB8C4;  --st-int-bg:#2A313A;
  --st-done-ink:#9AA5B1; --st-done-bg:#20262C;
  --st-gone-ink:#828D99; --st-gone-bg:#20262C;
  --return-bg:#2C1A14; --return-line:#8A4A30; --return-ink:#E0906D;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --cardshadow:0 8px 30px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.4);
  --card-shadow:0 2px 10px rgba(0,0,0,.35);
  --btn-shadow:0 2px 8px rgba(240,138,56,.25);
}

/* ---- base ---- */
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0; background:var(--page); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
p{margin:0}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---- the shell: rail + page ---- */
.app{display:grid; grid-template-columns:212px 1fr; min-height:100vh}
.rail{background:var(--rail); padding:16px 0 14px; display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; height:100vh}
.rail .brand{display:flex; align-items:center; gap:9px; padding:4px 18px 18px; color:var(--rail-ink-hi); text-decoration:none}
.rail .brand .mark{width:24px; height:24px; border-radius:var(--r-sm); background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:600; font-size:.72rem; flex:none}
.rail .brand b{font-size:.95rem; font-weight:600; letter-spacing:-.01em}
.nav{display:flex; flex-direction:column; gap:1px; padding:0 10px}
.nav a{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--r-sm);
  color:var(--rail-ink); text-decoration:none; font-size:.86rem}
.nav a.on{background:var(--accent); color:#fff; font-weight:600}
.nav a .ct{margin-left:auto; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; opacity:.75}
.railfoot{margin-top:auto; padding:12px 16px 0; border-top:1px solid var(--rail-line);
  display:flex; align-items:center; gap:9px; color:var(--rail-ink); min-width:0}
/* Account card sizing, 16 Sep 2026. Reported: the signed-in name read too small, the role line
   under it was all but invisible, and the two links below were smaller again. The role was dim
   because it inherited --rail-ink (#8A919C on the dark rail) and then had opacity:.8 laid over it,
   which mixes it down to roughly #727A86 - about 4.2:1 against the rail, under the 4.5:1 minimum
   for text this small. Fix is size plus contrast: the opacity is dropped rather than the colour
   lightened, so the role still sits a step below the name in the hierarchy but is legible. The
   avatar grows with the text so the row stays balanced. */
.railfoot .av{width:30px; height:30px; border-radius:50%; color:#fff; display:grid; place-items:center;
  font-size:.78rem; font-weight:600; flex:none}
.railfoot .who{font-size:.92rem; line-height:1.3; min-width:0}
.railfoot .who b{display:block; color:var(--rail-ink-hi); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Role line. Third pass, same day, and the user's choice: the Ember amber, read as a role BADGE
   rather than a grey caption. Two greys under a white name was the problem - the role kept looking
   like a dimmer copy of the name whatever its contrast, so it is given the one hue on the rail
   instead. Uppercase with tracking is what makes it a label and not a second name; the size drops
   to .76rem but caps stand taller than the lowercase .8rem it replaces, so it reads BIGGER, not
   smaller. Amber is hard-coded at the dark-palette value (#F08A38, ~6:1 on #23262E and ~8:1 on
   #141619) rather than var(--accent), because in the LIGHT palette that token is #E0731A - tuned
   for white surfaces and only ~4.8:1 here. The rail is dark in both palettes, so one value serves
   both. Note the house rule this bends: "the accent is for actions only, nothing else has a hue".
   The role is not an action, so this is the single deliberate exception, made because legibility
   beat the rule; do not read it as licence to colour other labels. */
.railfoot .who span{display:block; font-size:.76rem; color:#F08A38; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Change password / Sign out: was .76rem, the smallest text on the rail. */
.railacts{display:flex; gap:12px; padding:10px 16px 0; font-size:.86rem; flex-wrap:wrap}
.railacts a{color:var(--rail-ink); text-decoration:underline; text-underline-offset:2px}
.railacts form{margin:0}
.railacts .linkbtn{color:var(--rail-ink)}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--ink-2); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px}
.main{min-width:0; display:flex; flex-direction:column}
.page{max-width:1000px; padding:28px 22px 80px}
.h1{font-size:1.35rem; font-weight:600; letter-spacing:-.012em; margin:0 0 8px; text-wrap:balance}
.lede{color:var(--ink-2); max-width:70ch}

/* ---- the door ---- */
body.door{background:var(--backdrop); min-height:100vh; padding:40px 20px 80px}
.door .card{background:var(--surface); border-radius:8px; box-shadow:var(--cardshadow); width:100%;
  max-width:400px; margin:0 auto; padding:30px 32px 26px}
.door .brand{display:flex; align-items:center; gap:10px; margin-bottom:22px; text-decoration:none; color:inherit}
.door .brand .mark{width:28px; height:28px; border-radius:var(--r-sm); background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:600; font-size:.82rem}
.door .brand b{font-size:1.05rem; font-weight:600; letter-spacing:-.01em}
.card h2{font-size:1.15rem; font-weight:600; margin:0 0 4px; letter-spacing:-.012em}
.card .sub{font-size:.86rem; color:var(--muted); margin-bottom:20px}

/* ---- form pieces ---- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.input{border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface);
  padding:10px 12px; font-size:.95rem; color:var(--ink); font-family:inherit; width:100%}
.input:focus{border-color:var(--focus); outline:none}
.input.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; letter-spacing:.08em}
.input.input-validation-error{border-color:var(--bad-line); background:var(--bad-bg)}
.hint{font-size:.78rem; color:var(--muted)}
.hint.bad{color:var(--bad)}
.hint.bad:empty{display:none}
.select{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink-2);
  padding:5px 10px; font-family:inherit; font-size:.82rem; min-width:190px}

.btn{display:block; width:100%; background:var(--action); color:var(--action-ink); border:0; border-radius:var(--r);
  padding:11px 16px; margin-top:6px; font-family:inherit; font-size:.92rem; font-weight:600; cursor:pointer; box-shadow:var(--btn-shadow);
  text-align:center; text-decoration:none}
.btn.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--line-strong); margin-top:16px; box-shadow:none}
.links{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px; font-size:.82rem}
.links a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.links form{margin:0}

.msg{display:flex; gap:11px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 15px; font-size:.9rem; color:var(--ink-2); line-height:1.55; margin-bottom:16px}
.msg b{color:var(--ink); font-weight:600}
.msg.warn{background:var(--bad-bg); border-color:var(--bad-line); border-left-width:3px}
.msg.warn b{color:var(--bad)}

/* ---- My Work: top bar, chips, body ---- */
.topbar{display:flex; align-items:center; gap:14px; padding:14px 22px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; background:var(--chrome)}
.topbar h2{font-size:1.02rem; font-weight:600; margin:0; letter-spacing:-.01em}
.find{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.find-q{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink);
  padding:5px 10px; font-family:inherit; font-size:.82rem; width:300px; max-width:100%}
.find-q::placeholder{color:var(--muted)}
.find-q:focus{border-color:var(--focus); outline:none; background:var(--surface)}
.finding{font-size:.86rem; color:var(--ink-2)}
.finding a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.chips{display:flex; gap:6px; padding:11px 22px; border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--chrome)}
.chip{font-size:.78rem; padding:4px 12px; border-radius:20px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); text-decoration:none}
.chip.on{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-line); font-weight:600}
.body{padding:20px 22px 40px; display:flex; flex-direction:column; gap:26px; overflow-x:auto}
.empty{color:var(--muted); font-size:.92rem}

/* section head */
.sec{display:flex; flex-direction:column; gap:9px; min-width:660px}
.sechd{display:flex; align-items:center; gap:9px}
.sechd h3{font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0}
.sechd .n{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; color:var(--muted);
  background:var(--sunk); border-radius:9px; padding:1px 7px}
.sechd .rule{flex:1; height:1px; background:var(--line)}

/* task rows */
.rows{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--card-shadow)}
.rowhd,.row{display:grid; grid-template-columns:158px 76px 1fr 128px 88px 78px 62px; gap:12px; padding:11px 14px;
  border-bottom:1px solid var(--line); align-items:center}
.rowhd{padding:7px 14px; background:var(--surface-2)}
.rowhd span{font-size:.67rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.rows > :last-child{border-bottom:0}
.row:hover{background:var(--surface-2)}
.id{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.78rem; color:var(--muted)}
.ttl{font-size:.9rem; color:var(--ink); line-height:1.35; display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap}
.ttl > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.proj{font-size:.79rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.due{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.due.soon{color:var(--return-ink); font-weight:500}
.age{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums}
.people{display:flex}
.people .av{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.64rem; font-weight:600;
  color:#fff; border:2px solid var(--surface); margin-left:-6px}
.people .av:first-child{margin-left:0}

/* state pill - the one thing colour means */
.st{display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap}
.st-open{background:var(--st-open-bg); color:var(--st-open-ink)}
.st-prog{background:var(--st-prog-bg); color:var(--st-prog-ink)}
.st-rev{background:var(--st-rev-bg); color:var(--st-rev-ink)}
.st-ver{background:var(--st-ver-bg); color:var(--st-ver-ink)}
.st-sign{background:var(--st-sign-bg); color:var(--st-sign-ink)}
.st-hold{background:var(--st-hold-bg); color:var(--st-hold-ink); border:1px dashed var(--line-strong)}
.st-int{background:var(--st-int-bg); color:var(--st-int-ink)}
.st-done{background:var(--st-done-bg); color:var(--st-done-ink)}
.st-gone{background:var(--st-gone-bg); color:var(--st-gone-ink); text-decoration:line-through}

/* markers on a title: client visibility, the sign-off clock */
.eye{display:inline-flex; align-items:center; gap:4px; font-size:.7rem; color:var(--muted);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:1px 6px; white-space:nowrap}
.eye.hidden{color:var(--st-int-ink); border-color:var(--st-int-ink); background:var(--st-int-bg)}
.clock{display:inline-flex; align-items:center; gap:4px; font-size:.7rem; color:var(--return-ink);
  border:1px solid var(--return-line); border-radius:var(--r-sm); padding:1px 6px; white-space:nowrap}

/* the returned band */
.returned{border:1px solid var(--return-line); border-left-width:3px; border-radius:var(--r); background:var(--return-bg); overflow:hidden; min-width:660px}
.returned .rhd{display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid var(--return-line)}
.returned .rhd h3{font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--return-ink); margin:0}
.returned .rhd .n{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; color:var(--return-ink);
  border:1px solid var(--return-line); border-radius:9px; padding:1px 7px}
.ret{display:grid; grid-template-columns:112px 1fr 150px; gap:12px; padding:12px 14px; border-bottom:1px solid var(--return-line); align-items:start}
.ret:last-child{border-bottom:0}
.ret .rt{font-size:.9rem; color:var(--ink); margin-bottom:5px}
.ret .rw{font-size:.79rem; color:var(--ink-2); line-height:1.45}
.ret .rw b{font-weight:500; color:var(--ink)}
.ret .rmeta{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.75rem; color:var(--muted); text-align:right}

/* the hold nudge under a row */
.nudge{font-size:.76rem; color:var(--st-hold-ink); padding:8px 14px; background:var(--surface-2); border-top:1px dashed var(--line-strong); border-bottom:1px solid var(--line)}
.row:has(+ .nudge){border-bottom:0}

/* the team lead's load matrix */
.load{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; min-width:660px}
.loadhd,.loadrow{display:grid; grid-template-columns:1fr 62px 74px 62px 62px 58px 66px; gap:8px; padding:9px 14px; align-items:center}
.loadhd{background:var(--surface-2); border-bottom:1px solid var(--line)}
.loadhd span{font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:right; white-space:nowrap}
.loadhd span:first-child{text-align:left}
.loadrow{border-bottom:1px solid var(--line)}
.loadrow:last-child{border-bottom:0}
.loadrow .p{display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink)}
.loadrow .p .av{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.63rem; font-weight:600; color:#fff; flex:none}
.loadrow b{text-align:right; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.85rem; font-weight:400; color:var(--ink-2); font-variant-numeric:tabular-nums}
.loadrow b.zero{color:var(--line-strong)}
.loadrow b.tot{font-weight:600; color:var(--ink)}
.loadrow b.hot{color:var(--return-ink); font-weight:600}
.reassign{font-size:.73rem; color:var(--muted); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:2px 8px; white-space:nowrap}

@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{position:static; height:auto; flex-direction:row; align-items:center; gap:10px; padding:10px 14px; overflow-x:auto}
  .rail .brand{padding:0 10px 0 0}
  .nav{flex-direction:row; padding:0}
  .railfoot{margin-top:0; margin-left:auto; padding:0; border-top:0}
  .railacts{padding:0}
}
@media (max-width:520px){
  body.door{padding:20px 12px}
  .door .card{padding:24px 20px 20px}
}

/* ---- the work item page (screen 2) ---- */
.crumb{padding:12px 22px 0; font-size:.79rem; color:var(--muted)}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{text-decoration:underline}
.titlebar{display:flex; align-items:flex-start; gap:16px; padding:8px 22px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--chrome)}
.titlebar .tl{min-width:0; flex:1 1 440px}
.tid{display:flex; align-items:center; gap:10px; margin-bottom:5px; flex-wrap:wrap}
.tid .num{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.82rem; color:var(--muted)}
.titlebar h2{font-size:1.22rem; font-weight:600; margin:0; letter-spacing:-.015em; line-height:1.3; text-wrap:balance}
.acts{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.acts .act{display:inline-block; width:auto; margin:0; padding:8px 15px; font-size:.85rem; border-radius:var(--r-sm)}
.acts .act.ghost{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-strong); margin:0}
.acts .act[disabled]{cursor:not-allowed; opacity:.55}
.acts .soon{font-size:.72rem; color:var(--muted); flex-basis:100%; text-align:right}

.cols{display:grid; grid-template-columns:minmax(0,1fr) 286px; flex:1; min-width:0}
.maincol{padding:20px 22px 26px; display:flex; flex-direction:column; gap:22px; min-width:0; border-right:1px solid var(--line); background:var(--chrome)}
.side{padding:20px 20px 26px; display:flex; flex-direction:column; gap:16px; background:var(--surface-2)}

.blk{display:flex; flex-direction:column; gap:8px}
.blk h3{font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0}
.desc{font-size:.92rem; color:var(--ink-2); line-height:1.65; max-width:78ch}
.desc p + p{margin-top:9px}
.desc .none{color:var(--muted); font-style:italic}

.banner{display:flex; align-items:flex-start; gap:10px; background:var(--return-bg); border:1px solid var(--return-line);
  border-left-width:3px; border-radius:var(--r); padding:11px 14px; font-size:.86rem; color:var(--ink-2); line-height:1.5}
.banner b{color:var(--return-ink); font-weight:600}

.filelist{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.filerow{display:grid; grid-template-columns:minmax(0,1.4fr) 70px minmax(0,1.5fr) 102px; gap:12px; align-items:center;
  padding:9px 13px; border-bottom:1px solid var(--line); font-size:.84rem}
.filerow:last-child{border-bottom:0}
.filerow .fn{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filerow .sz{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.74rem; color:var(--muted); text-align:right}
.filerow .src{font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filerow .audcell{justify-self:end}
.cmfiles{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.cmfile{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
  padding:5px 10px; font-size:.79rem; color:var(--ink-2)}
.cmfile .sz{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.71rem; color:var(--muted)}

/* activity: the transition log and the comments, interleaved */
.feed{display:flex; flex-direction:column}
.ev{display:grid; grid-template-columns:26px 1fr; gap:11px; padding:9px 0; align-items:start}
.ev .dot{width:26px; display:flex; justify-content:center; padding-top:4px}
.ev .dot i{width:7px; height:7px; border-radius:50%; background:var(--line-strong); display:block}
.ev .txt{font-size:.84rem; color:var(--muted); line-height:1.5}
.ev .txt b{color:var(--ink-2); font-weight:500}
.ev .txt .when{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.73rem; margin-left:6px; white-space:nowrap}
.ev.ret .dot i{background:var(--return-ink); width:9px; height:9px}
.ev.ret .txt b{color:var(--return-ink)}
.ev.refused .dot i{background:transparent; border:1px solid var(--bad-line)}
.ev.refused .txt{font-style:italic}

.cm{display:grid; grid-template-columns:26px 1fr; gap:11px; padding:10px 0}
.cm .av{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.66rem; font-weight:600; color:#fff}
.cmbody{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:11px 13px; box-shadow:var(--card-shadow)}
.cmbody.client{background:var(--surface-2); border-left:3px solid var(--accent)}
.cmhd{display:flex; align-items:center; gap:9px; margin-bottom:6px; flex-wrap:wrap}
.cmhd b{font-size:.85rem; font-weight:600}
.cmhd .when{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.73rem; color:var(--muted)}
/* A comment that has been rewritten says so in its own header, beside the time
   it was posted. Italic rather than a chip: it is a footnote about the comment,
   not a state of it (15 Sep 2026). */
.cmhd .when.edited{font-style:italic}
.cmtx{font-size:.89rem; color:var(--ink-2); line-height:1.6; white-space:pre-line}
.aud{font-size:.69rem; padding:2px 7px; border-radius:var(--r-sm); border:1px solid var(--line-strong); color:var(--muted); white-space:nowrap}
.aud.client{border-color:var(--accent-line); color:var(--accent-ink); background:var(--accent-soft); font-weight:600}
.feed .none{font-size:.84rem; color:var(--muted)}

/* sidebar fields */
.f{display:flex; flex-direction:column; gap:5px}
.f label{font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.f .v{font-size:.87rem; color:var(--ink)}
.f .v.mut{color:var(--ink-2)}
.f .v a{color:inherit}
.persons{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.person{display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:3px 10px 3px 3px; font-size:.81rem}
.person .av{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.6rem; font-weight:600; color:#fff}
.locked{font-size:.73rem; color:var(--muted); line-height:1.45}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tag2{font-size:.75rem; padding:2px 8px; border-radius:var(--r-sm); background:var(--sunk); color:var(--ink-2)}
.sidesep{height:1px; background:var(--line); margin:2px 0}
.watch{display:flex; align-items:center; gap:10px}
.watch form{margin:0}
.watch .linkbtn{font-size:.8rem}
.deps{display:flex; flex-direction:column; gap:4px; font-size:.84rem}
.deps a{color:var(--ink); text-decoration:none}
.deps a:hover{text-decoration:underline}
.deps .id{margin-right:6px}

/* rows on My Work are links to the task */
a.row{color:inherit; text-decoration:none}
a.ret{color:inherit; text-decoration:none}
a.ret:hover{background:rgba(0,0,0,.02)}

@media (max-width:900px){ .cols{grid-template-columns:1fr} .maincol{border-right:0} }

/* ---- moving a task (screen 3) ----
   The buttons on the task page are forms (act now) or links (ask first). The
   dialog page shows the task's header strip and one card. Green and red here
   mean only pass and fail - a second colour system, kept apart from the state
   pills, which own every other hue. */
.acts form{margin:0}
.acts a.act{text-decoration:none}

.stage{padding:26px 22px 60px; display:flex; flex-direction:column; align-items:center; gap:18px}
.hdrstrip{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface); width:100%; max-width:560px}
.hdrstrip .num{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.8rem; color:var(--muted)}
.hdrstrip .t{font-size:.9rem; font-weight:500; flex:1 1 200px; min-width:0}
.hdrstrip .flow{display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted); white-space:nowrap}

.dlg{background:var(--surface); border-radius:var(--r); box-shadow:var(--cardshadow); width:100%; max-width:460px; overflow:hidden}
.dlg form{margin:0}
.dlghd{padding:17px 20px 14px; border-bottom:1px solid var(--line)}
.dlghd h3{font-size:1.02rem; font-weight:600; margin:0 0 5px; letter-spacing:-.01em}
.dlghd p{font-size:.86rem; color:var(--muted)}
.dlgbd{padding:16px 20px; display:flex; flex-direction:column; gap:14px}
.dlgbd .msg{margin:0}
.dlgft{padding:13px 20px; border-top:1px solid var(--line); background:var(--surface-2); display:flex; align-items:center; gap:9px}
.dlgft .sp{flex:1}
.dlgft .btn{display:inline-block; width:auto; margin:0; padding:8px 15px; font-size:.85rem; border-radius:var(--r-sm)}
.dlgft .btn[disabled]{opacity:.42; cursor:not-allowed}

.fld{display:flex; flex-direction:column}
.flabel{font-size:.72rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; display:block}
.opts{display:flex; flex-direction:column; gap:7px}
.opt{display:grid; grid-template-columns:17px 1fr auto; gap:11px; align-items:center; border:1px solid var(--line); border-radius:var(--r);
  padding:10px 12px; cursor:pointer; background:var(--surface); font-size:.88rem}
.opt:hover{background:var(--surface-2)}
.opt.on{border-color:var(--accent); background:var(--accent-soft)}
.opt input{margin:0; width:15px; height:15px; accent-color:var(--action)}
.opt .optname{display:flex; align-items:center; gap:8px; min-width:0}
.opt .av{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.63rem; font-weight:600; color:#fff; flex:none}
.opt .optnote{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.75rem; color:var(--muted); white-space:nowrap}
.opt .optnote.light{color:var(--ok)}
.ta{border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); padding:10px 12px; min-height:56px;
  color:var(--ink); font-size:.9rem; font-family:inherit; line-height:1.5; width:100%; resize:vertical}
.ta:focus{border-color:var(--focus); outline:none}

/* the gate checklist: passes shown too, so a person sees how close they are */
.gates{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.gate{display:grid; grid-template-columns:18px 1fr; gap:11px; padding:11px 13px; border-bottom:1px solid var(--line); align-items:start}
.gate:last-child{border-bottom:0}
.gate.fail{background:var(--bad-bg)}
.gate .mk{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:.62rem; font-weight:700; color:#fff; margin-top:2px}
.gate.pass .mk{background:var(--ok)}
.gate.fail .mk{background:var(--bad)}
.gate .gt{font-size:.87rem; color:var(--ink-2); line-height:1.5; min-width:0}
.gate .gt b{color:var(--ink); font-weight:500}
.gate.fail .gt b{color:var(--bad)}
.gate .why{font-size:.8rem; color:var(--muted); margin-top:3px}
.gate .why a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}

/* the toast: one line at the foot of the page after a move; Undo while it lasts */
.toast{position:fixed; left:calc(50% + 106px); bottom:22px; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:13px;
  background:var(--toast); color:var(--toast-ink); border-radius:var(--r); padding:12px 16px; box-shadow:var(--cardshadow); font-weight:500;
  max-width:min(520px, calc(100vw - 252px)); font-size:.88rem}
.toast.warn{background:var(--bad); color:#fff}
.toast form{margin:0; margin-left:auto}
.toast .undo{background:none; border:1px solid color-mix(in srgb, currentColor 40%, transparent); color:inherit; border-radius:var(--r-sm);
  padding:4px 11px; font:inherit; font-size:.8rem; font-weight:500; white-space:nowrap; cursor:pointer}
.toast.gone{display:none}

/* ---- the composer (screen 4) ----
   Client-visible is the default for QA, Managers and Admins, so four things
   flip together when the checkbox changes: the border, the strip, the audience
   sentence and the button text (.comp.client is the client-bound state). */
.comp{border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); overflow:hidden; margin:0}
.comp.client{border-color:var(--accent); border-width:1.5px}
.comp .strip{display:flex; align-items:baseline; gap:8px; padding:9px 13px; font-size:.82rem; color:var(--ink-2);
  border-bottom:1px solid var(--line); background:var(--surface-2); flex-wrap:wrap}
.comp .strip b{color:var(--ink); font-weight:600; margin-right:2px}
.comp .strip .going{display:none}
.comp .strip .staying{display:inline}
.comp.client .strip{background:var(--accent-soft); border-left:3px solid var(--accent)}
.comp.client .strip .going{display:inline}
.comp.client .strip .staying{display:none}
.comp .strip.quiet{color:var(--muted)}
.comp .strip.bad{background:var(--bad-bg); color:var(--bad); border-left:3px solid var(--bad-line)}
.comp .ta{border:0; border-radius:0; min-height:74px; padding:12px 13px}
.comp .ta:focus{outline:none; box-shadow:inset 0 0 0 2px var(--focus)}
.comp .bar{display:flex; align-items:center; gap:10px; padding:9px 11px; border-top:1px solid var(--line); background:var(--surface-2); flex-wrap:wrap}
.comp .bar .sp{flex:1}
.comp .attach{font-size:.79rem; color:var(--ink-2); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:4px 10px; white-space:nowrap; cursor:pointer; background:var(--surface)}
.comp .attach input{display:none}
.comp .picked{font-size:.76rem; color:var(--muted); font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; min-width:0; overflow:hidden; text-overflow:ellipsis}
.comp .tick{display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ink-2); cursor:pointer}
.comp .tick input{margin:0; accent-color:var(--action)}
.comp .fixedline{font-size:.76rem; color:var(--muted)}
.comp .post{display:inline-block; width:auto; margin:0; padding:8px 15px; font-size:.85rem; border-radius:var(--r-sm)}
.cmhd .cmacts{margin-left:auto; display:inline-flex; gap:10px; font-size:.76rem}
.cmhd .cmacts a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.cmhd .cmacts a:hover{color:var(--ink)}
.aud.hold{border-style:dashed; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; color:var(--ink-2)}
a.cmfile{text-decoration:none}
a.cmfile:hover{border-color:var(--line-strong)}
.filerow a.fn{text-decoration:none}
.filerow a.fn:hover{text-decoration:underline}

/* the confirmations: the words quoted back */
.quote{margin:0; padding:11px 14px; border-left:3px solid var(--line-strong); background:var(--surface-2); border-radius:0 5px 5px 0;
  font-size:.9rem; color:var(--ink); line-height:1.55; white-space:pre-line; max-height:40vh; overflow:auto}
.dlgbd .note{font-size:.86rem; color:var(--ink-2); line-height:1.55}
.dlgbd .note b{color:var(--bad); display:block; margin-bottom:3px}
.dlgft .btn.danger{background:var(--bad); color:#fff}
.sink{margin:0; height:0; overflow:hidden; outline:none}

/* ---- the client portal (screen 5) ----
   Different chrome on purpose: a header and a page, no rail. "Waiting for
   you" has its own colour (--due), the only place it is used. */
body.portal{background:var(--page)}
.pshell{max-width:1040px; margin:0 auto; padding:0 16px 80px}
.ptop{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.ptop .pbrand{text-decoration:none}
.ptop .mark{width:26px; height:26px; border-radius:var(--r); background:var(--action); color:var(--action-ink); display:grid; place-items:center; font-weight:600; font-size:.76rem}
.ptop .proj{font-size:.98rem; font-weight:600; letter-spacing:-.01em}
.ptop .switch{margin:0}
.ptop .me{margin-left:auto; display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--ink-2)}
.ptop .av{width:26px; height:26px; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:.68rem; font-weight:600; flex:none}
.ptop .pacts{display:flex; gap:12px; font-size:.78rem; align-items:center}
.ptop .pacts a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.ptop .pacts form{margin:0}
.ptop .pacts .linkbtn{color:var(--muted); font-size:.78rem}
.btn.pbtn{display:inline-block; width:auto; margin:0; padding:7px 14px; font-size:.83rem; border-radius:var(--r-sm); white-space:nowrap}
.btn.pbtn.ghost{margin:0; background:var(--surface)}
.pmain{padding:22px 0 0; display:flex; flex-direction:column; gap:26px}
.pnone{font-size:.9rem; color:var(--muted)}

.waiting{border:1px solid var(--due-line); border-left-width:3px; border-radius:var(--r); background:var(--due-bg); overflow:hidden}
.waiting .whd{display:flex; align-items:center; gap:9px; padding:11px 15px; border-bottom:1px solid var(--due-line)}
.waiting .whd h3{font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--due); margin:0}
.waiting .whd .n{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; color:var(--due); border:1px solid var(--due-line); border-radius:9px; padding:1px 7px}
.wrow{display:grid; grid-template-columns:1fr 120px 92px; gap:14px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--due-line)}
.wrow:last-child{border-bottom:0}
.wrow .t{font-size:.92rem; color:var(--ink)}
.wrow .t a{color:inherit; text-decoration:none}
.wrow .t a:hover{text-decoration:underline}
.wrow .s{font-size:.79rem; color:var(--muted); margin-top:3px}
.wrow .left{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.82rem; text-align:right; color:var(--ink-2)}
.wrow .left.hot{color:var(--due); font-weight:600}
.wrow .pbtn{justify-self:end}

.psec{display:flex; flex-direction:column; gap:9px}
.sechd{display:flex; align-items:center; gap:9px}
.sechd h3{font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0}
.sechd .n{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; color:var(--muted); background:var(--sunk); border-radius:9px; padding:1px 7px}
.sechd .rule{flex:1; height:1px; background:var(--line)}
.prows{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--card-shadow)}
.prow{display:grid; grid-template-columns:150px 1fr 170px 76px 92px; gap:12px; align-items:center; padding:11px 15px; border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--surface-2)}
.prow .ttl{font-size:.9rem; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .ttl:hover{text-decoration:underline}
.prow .when,.prow .code{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--muted); text-align:right}
.prow .act{justify-self:end}
.prow .act form{margin:0}
.reopen{font-size:.77rem; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:3px 10px; white-space:nowrap; cursor:pointer; text-decoration:none; font-family:inherit}

/* one task */
.tbar{display:flex; align-items:flex-start; gap:16px; padding:0 0 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tbar .tl{flex:1 1 400px; min-width:0}
.tbar .back{display:inline-block; font-size:.79rem; color:var(--muted); text-decoration:none; margin-bottom:10px}
.tbar .back:hover{text-decoration:underline}
.tbar .tid{display:flex; align-items:center; gap:10px; margin-bottom:5px}
.tbar .num{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.8rem; color:var(--muted)}
.tbar h2{font-size:1.15rem; font-weight:600; margin:0; letter-spacing:-.014em; line-height:1.3; text-wrap:balance}
.tacts{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tacts form{margin:0}
.pcols{display:flex; flex-direction:column; gap:24px; max-width:760px}
.callout{background:var(--due-bg); border:1px solid var(--due-line); border-left-width:3px; border-radius:var(--r); padding:13px 16px; font-size:.9rem; color:var(--ink-2); line-height:1.55}
.pfiles{display:flex; gap:8px; flex-wrap:wrap}
.pfile{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); padding:6px 11px; font-size:.81rem; color:var(--ink-2); text-decoration:none}
.pfile:hover{border-color:var(--line-strong)}
.pfile .sz{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.71rem; color:var(--muted)}
.trail{display:flex; flex-direction:column}
.tr{display:grid; grid-template-columns:20px 1fr; gap:11px; padding:7px 0; align-items:start}
.tr .dot{width:20px; display:flex; justify-content:center; padding-top:5px}
.tr .dot i{width:7px; height:7px; border-radius:50%; background:var(--line-strong); display:block}
.tr.now .dot i{background:var(--st-sign-ink); width:9px; height:9px}
.tr .tx{font-size:.87rem; color:var(--ink-2)}
.tr .tx .when{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.74rem; color:var(--muted); margin-left:7px}
.pfeed{display:flex; flex-direction:column; margin-bottom:14px}
.pfeed .none{font-size:.86rem; color:var(--muted); font-style:italic}
.pcm{display:grid; grid-template-columns:28px 1fr; gap:11px; padding:9px 0}
.pcm .av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.66rem; font-weight:600; color:#fff}
.pcm .cmbody.mine{background:var(--surface-2)}
.pcm .cmhd .org{font-size:.72rem; color:var(--muted)}
.pcomp .hint{font-size:.78rem; color:var(--muted)}
.dlg.wide{max-width:640px}
@media (max-width:700px){
  .prow{grid-template-columns:1fr; gap:6px}
  .prow .when,.prow .code{text-align:left}
  .wrow{grid-template-columns:1fr; gap:8px}
  .wrow .left{text-align:left}
}

/* the second check: a real <dialog>, modal when the script opens it, inline when the server does */
dialog.check{border:0; padding:0; margin:0 0 0 0; width:100%; max-width:460px}
dialog.check[open]:not(:modal){position:static; margin-top:14px; box-shadow:var(--cardshadow)}
dialog.check:modal{margin:auto; box-shadow:var(--cardshadow)}
dialog.check::backdrop{background:rgba(10,13,16,.45)}

/* ---- the display face (Ember) ---- */
.topbar h2,.titlebar h2,.tbar h2,.h1,.card h2,.dlghd h3,.rail .brand b,.ptop .proj{font-family:var(--font-display); font-weight:700}
.rail{border-right:1px solid var(--rail-line)}

/* ---- the project view (screen 7) ----
   The projects list is a grid of numbers read across a row; a project opens
   with the pulse (one bar of open work in state colours) and milestone cards;
   the list is My Work's table plus a Milestone column; the board is columns
   in workflow order with no drag and drop. Design notes in
   D:\Claude_Apps\genx-screen-project.html. */
/* the projects list */
.plist{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--card-shadow); min-width:760px}
.plhd,.plrow{display:grid; grid-template-columns:1fr 118px 64px 84px 70px 92px 66px 96px; gap:10px; padding:11px 14px; align-items:center; border-bottom:1px solid var(--line)}
.plhd{padding:7px 14px; background:var(--surface-2)}
.plhd span{font-size:.67rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap; text-align:right}
.plhd span:first-child,.plhd span:nth-child(2){text-align:left}
.plist > :last-child{border-bottom:0}
.plrow:hover{background:var(--surface-2)}
.plrow .pn{display:flex; flex-direction:column; gap:2px; min-width:0}
.plrow .pn b{font-size:.92rem; font-weight:600; color:var(--ink); display:flex; gap:9px; align-items:baseline}
.plrow .pn b .id{font-size:.76rem}
.plrow .pn span{font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.plrow .n{text-align:right; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.85rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.plrow .n.zero{color:var(--line-strong)}
.plrow .n.tot{font-weight:600; color:var(--ink)}
.plrow .n small{display:block; font-size:.68rem; color:var(--muted); font-family:inherit}
.plrow .n.hot,.plrow .n.hot small{color:var(--due); font-weight:600}
.plrow .when{text-align:right; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--muted)}

/* the project's title bar */
.ptitle{display:flex; align-items:flex-start; gap:18px; padding:10px 22px 16px; border-bottom:1px solid var(--line); background:var(--chrome); flex-wrap:wrap}
.ptitle .tl{flex:1 1 420px; min-width:0}
.ptitle h2{font-family:var(--font-display); font-size:1.25rem; font-weight:700; margin:0 0 3px; letter-spacing:-.012em; display:flex; gap:10px; align-items:baseline}
.ptitle h2 .id{font-size:.86rem; font-weight:500}
.ptitle .sub{font-size:.86rem; color:var(--muted)}
.ptitle .sub b{color:var(--ink-2); font-weight:500}
.ptitle .roster{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.ptitle .roster .people .av{width:26px; height:26px; font-size:.68rem}
.ptitle .roster .rl{font-size:.76rem; color:var(--muted)}
.ptitle .roster .rl b{color:var(--ink-2); font-weight:500}
.ptitle .btn{width:auto; margin:0; padding:8px 14px; font-size:.86rem}

/* the pulse: one bar of open work, in state colours, and the three facts */
.pulse{padding:14px 22px 0; display:flex; flex-direction:column; gap:9px}
.pbar{display:flex; height:10px; border-radius:var(--r-pill); overflow:hidden; background:var(--sunk); max-width:760px}
.pbar span{display:block; height:100%}
.pleg{display:flex; gap:4px 16px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-2); max-width:760px}
.pleg a{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.pleg a i{width:9px; height:9px; border-radius:50%; display:inline-block}
.pleg a b{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-weight:500; color:var(--ink); font-size:.78rem}
.pleg .rest{color:var(--muted); margin-left:auto}
.facts{display:flex; gap:8px 22px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-2); padding-top:2px}
.facts a{color:var(--ink-2)}
.facts a b{font-weight:600; color:var(--ink)}
.facts a.fdue,.facts a.fdue b{color:var(--due)}
.facts a.fback b{color:var(--return-ink)}
.c-open{background:var(--st-open-ink)} .c-prog{background:var(--st-prog-ink)} .c-rev{background:var(--st-rev-ink)}
.c-ver{background:var(--st-ver-ink)} .c-sign{background:var(--st-sign-ink)} .c-hold{background:var(--st-hold-ink); opacity:.55} .c-int{background:var(--st-int-ink)}

/* milestones */
.mstrip{display:flex; gap:10px; padding:14px 22px 0; flex-wrap:wrap}
.ms{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:9px 12px; min-width:200px; flex:0 1 230px; display:flex; flex-direction:column; gap:5px; box-shadow:var(--card-shadow); color:inherit}
.ms .mn{display:flex; align-items:baseline; gap:8px; font-size:.86rem; font-weight:600}
.ms .mn span{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; color:var(--muted); font-weight:400; margin-left:auto; white-space:nowrap}
.ms .mn span.late{color:var(--return-ink); font-weight:500}
.ms .mbar{height:5px; border-radius:3px; background:var(--sunk); overflow:hidden}
.ms .mbar i{display:block; height:100%; background:var(--ink-2); border-radius:3px}
.ms.reached .mbar i{background:var(--ok)}
.ms .mm{font-size:.74rem; color:var(--muted)}
.ms.reached .mm{color:var(--ok)}
.ms.on{border-color:var(--accent); background:var(--accent-soft)}

/* the tool row under the chips: group by, who, milestone, view */
.tools{display:flex; align-items:center; gap:8px; padding:0 22px 12px; flex-wrap:wrap; background:var(--chrome); border-bottom:1px solid var(--line)}
.tools .lbl{font-size:.74rem; color:var(--muted); margin-left:4px}
.tools .select{min-width:0}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin-left:auto}
.seg a{padding:5px 12px; font-size:.8rem; color:var(--ink-2); background:var(--surface)}
.seg a.on{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}

/* project list rows: one more column than My Work (milestone), and In state stays */
.prj .rowhd,.prj .row{grid-template-columns:150px 66px 1fr 112px 78px 56px 66px 62px}
.row .st{justify-self:start}   /* a pill in a grid cell keeps its own width */
.plrow .n{justify-self:end}
.pri{display:inline-flex; align-items:center; font-size:.7rem; color:var(--muted); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:1px 6px; white-space:nowrap}
.pri.urgent{color:var(--bad); border-color:var(--bad-line); background:var(--bad-bg); font-weight:600}
.lbl-tag{display:inline-flex; align-items:center; gap:4px; font-size:.7rem; color:var(--muted); white-space:nowrap}
.lbl-tag i{width:7px; height:7px; border-radius:50%; display:inline-block}
.back{display:inline-flex; align-items:center; gap:4px; font-size:.7rem; color:var(--return-ink); border:1px solid var(--return-line); background:var(--return-bg); border-radius:var(--r-sm); padding:1px 6px; white-space:nowrap}
.ms-cell{font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.age.stall{color:var(--return-ink); font-weight:600}

/* the board */
.board{display:grid; grid-auto-flow:column; grid-auto-columns:220px; gap:12px; overflow-x:auto; padding:18px 22px 40px; align-items:start}
.col{display:flex; flex-direction:column; gap:8px; min-width:0}
.colhd{display:flex; align-items:center; gap:8px; padding:2px 2px 4px}
.colhd .n{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; color:var(--muted); margin-left:auto}
.cardt{display:flex; flex-direction:column; gap:7px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:10px 12px; box-shadow:var(--card-shadow); color:inherit}
.cardt:hover{border-color:var(--line-strong)}
.cardt .ct1{display:flex; align-items:center; gap:8px}
.cardt .ct1 .id{font-size:.74rem}
.cardt .ct1 .age{margin-left:auto}
.cardt .ct2{font-size:.86rem; line-height:1.35; color:var(--ink)}
.cardt .ct3{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.cardt .ct3 .people{margin-left:auto}
.cardt .ct3 .people .av{width:20px; height:20px; font-size:.58rem}
.col .none{font-size:.78rem; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--r); padding:12px; text-align:center}

/* the new-task form */
.nt{max-width:640px; padding:22px 22px 60px; display:flex; flex-direction:column; gap:2px}
.nt .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.nt textarea.input{min-height:96px; resize:vertical; font-family:inherit}
.nt .radio{display:flex; gap:14px}
.nt .radio label{display:inline-flex; gap:6px; align-items:center; font-size:.9rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink)}
.pick{display:flex; flex-wrap:wrap; gap:8px}
.pick label{display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 11px 4px 5px; background:var(--surface)}
.pick label:has(input:checked){border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.pick label .av{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.62rem; font-weight:600; color:#fff}
.pick label small{color:var(--muted); font-weight:400}
.pick.labels label{padding:3px 10px}
.pick.labels i{width:8px; height:8px; border-radius:50%; display:inline-block}
.nt .field .note{font-size:.78rem; color:var(--muted)}
.nt .actions{display:flex; align-items:center; gap:14px; margin-top:8px}
.nt .actions .btn{width:auto; margin:0; padding:10px 18px}
.nt .actions a{font-size:.84rem; color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.nt .lede{font-size:.86rem; margin-bottom:16px}
.pick label input{margin:0 0 0 4px; accent-color:var(--accent)}
.pchips{border-bottom:0; padding-top:16px}
.ms .mn{color:inherit; text-decoration:none}
.ms .mm{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ms .mm form{margin:0; display:inline}
.ms .mm .linkbtn{font-size:.74rem; color:var(--accent-ink)}
.tools noscript .chip{cursor:pointer; font-family:inherit}
@media (max-width:820px){ .nt .row2{grid-template-columns:1fr} }
/* rows, cards and the small links on the project page are links without the underline */
.plrow,.cardt,.pleg a,.facts a,.seg a,.ms .mn,.pleg .rest{text-decoration:none}
.plrow,.cardt{color:inherit}

/* ---- editing a task (a piece of screen 2) ----
   The new-task form with the task filled in; locked planning fields shown as
   words with who can change them; the edit's line in the activity. */
.nt .tid{margin-bottom:2px}
.lockf .v{font-size:.95rem; color:var(--ink-2); padding:10px 0 2px}
.lockf label{color:var(--muted)}
.lockf .persons{padding:6px 0 2px}
/* A locked field that holds more than a word: a description keeps its line
   breaks, and the labels a task already has sit in a row of their own (15 Sep
   2026, when a Developer stopped being able to change either). */
.lockf .v.desc{white-space:pre-wrap}
.lbl-row{display:flex; flex-wrap:wrap; gap:4px 12px}
.pick label.locked{opacity:.6; border-style:dashed}
.ev.edit .dot i{background:var(--accent); width:9px; height:9px}
.ev.edit .txt b{color:var(--accent-ink)}

/* ---- the frozen head ----
   The top bar and the chips stay put while the rows scroll under them, so the
   search box and the filters are always in reach (asked for on My Work, 12
   September 2026; the projects list and a project's filter row follow). */
.head{position:sticky; top:0; z-index:20; background:var(--chrome); box-shadow:0 1px 0 var(--line)}
.head .topbar,.head .chips{position:static}

/* ---- the reports (screen 8) ----
   The catalogue in two columns; one page for every report: title with the
   stamp, the exports, the frozen filter row, the summary line, groups of
   rows drawn from the columns, and the rows behind a drilled figure.
   Design notes in D:\Claude_Apps\genx-screen-reports.html. */
.asat{margin-left:auto; font-size:.8rem; color:var(--muted)}
.asat b{color:var(--ink-2); font-weight:500}
.rcat{display:grid; grid-template-columns:1fr 1fr; gap:22px 28px}
.rsec{display:flex; flex-direction:column; gap:6px; min-width:0}
.rsec.mine{grid-column:1/-1}
.rrow{display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); text-decoration:none; color:inherit; box-shadow:var(--card-shadow)}
.rrow:hover{border-color:var(--line-strong)}
.rrow b{font-size:.9rem; font-weight:600}
.rrow span{font-size:.79rem; color:var(--muted); line-height:1.4}
.src{font-style:normal; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap}
.src.snap{background:var(--st-ver-bg); color:var(--st-ver-ink)}
.src.log{background:var(--st-prog-bg); color:var(--st-prog-ink)}
.soon{font-size:.72rem; color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--r-pill); padding:1px 8px}
.exports{display:flex; gap:6px; align-items:center}
.exports .btn{width:auto; margin:0; padding:7px 12px; font-size:.8rem}
.rtools{padding-top:10px}
.rsum{font-size:.88rem; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:4px 6px; align-items:baseline}
.rsum b{color:var(--ink); font-weight:600}
.rsum .q{color:var(--st-rev-ink)} .rsum .c{color:var(--return-ink)} .rsum .delta{color:var(--muted)}
.rsum .caveat{flex-basis:100%; font-size:.78rem; color:var(--muted); font-style:italic}
.rgrp{display:flex; align-items:center; gap:9px}
.rgrp .av{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.63rem; font-weight:600; color:#fff}
.rgrp h3{font-size:.86rem; font-weight:600; margin:0; text-transform:none; letter-spacing:0; color:var(--ink)}
.rgrp .n{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted); background:var(--sunk); border-radius:9px; padding:1px 7px}
.rgrp .stat{font-size:.76rem; color:var(--muted)}
.rgrp .rule{flex:1; height:1px; background:var(--line)}
.rows.rep .rowhd,.rows.rep .row{grid-template-columns:1fr 150px 160px 1fr 70px}
.rows.rep2 .rowhd,.rows.rep2 .row{grid-template-columns:1fr 150px 160px 60px 70px 70px}
.rt{font-size:.88rem; color:var(--ink); display:flex; gap:8px; align-items:baseline; min-width:0}
.rt .id{flex:none}
.who{font-size:.82rem; color:var(--ink-2)} .who small{color:var(--muted); margin-left:4px} .who.c{color:var(--return-ink)}
.reason{font-size:.8rem; color:var(--ink-2); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rows.collapsed{padding:10px 14px} .rows .more a{font-size:.8rem; color:var(--ink-2)}
.agegrid{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--card-shadow); max-width:760px}
.aghd,.agrow{display:grid; grid-template-columns:1fr 110px 110px 110px 90px; gap:8px; padding:9px 14px; align-items:center; border-bottom:1px solid var(--line)}
.aghd{background:var(--surface-2)}
.aghd span{font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:right}
.aghd span:first-child{text-align:left}
.agrow > a,.agrow > b,.agrow > .zero{text-align:right; font-family:"IBM Plex Mono",monospace; font-size:.88rem; font-variant-numeric:tabular-nums}
.agrow > a{color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong)}
.agrow > a.hot,.agrow > b.hot{color:var(--return-ink); font-weight:600}
.agrow > a.on{background:var(--accent-soft); color:var(--accent-ink); border-radius:var(--r-sm); padding:2px 6px; text-decoration:none}
.agrow > b{font-weight:600; color:var(--ink)} .agrow .zero{color:var(--line-strong)}
.agrow.tot{background:var(--surface-2)} .agrow.tot span{font-size:.8rem; font-weight:600; color:var(--ink-2)}
.agrow.apart{border-top:1px dashed var(--line-strong)}
.agrow .st{justify-self:start}
.agrow:last-child{border-bottom:0}
.drill .close{margin-left:8px; font-size:.76rem; color:var(--muted)}
/* the report table: tracks come from the columns (Show.cshtml sets --tracks) */
.rows.rep .rowhd,.rows.rep .row{grid-template-columns:var(--tracks)}
.rows.rep .rowhd .r{text-align:right}
.rows.rep .row.tot{background:var(--surface-2); font-weight:600}
.rows.rep .num{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.85rem; text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums; text-decoration:none}
.rows.rep a.num{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong)}
.rows.rep .num.zero{color:var(--line-strong); text-decoration:none}
.rows.rep .num.hot{color:var(--return-ink); font-weight:600}
.rows.rep .num.good{color:var(--ok)}
.rows.rep .num.tot{font-weight:600; color:var(--ink)}
.rows.rep a.num.on{background:var(--accent-soft); color:var(--accent-ink); border-radius:var(--r-sm); padding:2px 6px; text-decoration:none; justify-self:end}
.rows.rep .txt{font-size:.86rem; color:var(--ink)}
.rows.rep .rt{text-decoration:none}
.rows.rep .row .st{justify-self:start}
.sec.apart .rows{border-style:dashed}
.rsum .b{font-weight:600; color:var(--ink)}
.ptitle .sub form.inline{display:inline}
.ptitle .sub .linkbtn{font-size:inherit; color:var(--accent-ink)}

/* ---- the people picker and the new-label box (task forms) ----
   The search box is shown by picker.js, so without JavaScript there is no
   box that does nothing. Anyone picked stays visible however the list is
   filtered; the list scrolls once a roster is long. */
.picker{display:flex; flex-direction:column; gap:8px}
.picksearch{max-width:280px; padding:7px 11px; font-size:.88rem}
.picker .pick{max-height:230px; overflow-y:auto; padding:1px}
.picker .nomatchnote{display:none}
.picker.nomatch .nomatchnote{display:block}
.picker.nomatch .pick{display:none}
.newlabel{max-width:280px; padding:7px 11px; font-size:.88rem; margin-top:2px}
.field label.tick{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--ink);
  text-transform:none; letter-spacing:0; font-weight:400}
.tick input{accent-color:var(--accent)}

/* ---- tagging someone in a comment ----
   The buttons are shown by mention.js; typing an @ and a name works without
   them. A tag in a posted comment is marked so it reads as a tag rather than
   as a name that happens to follow an @. */
.tagbar{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 12px 0; font-size:.78rem; color:var(--muted)}
.tagbtn{font-family:inherit; font-size:.78rem; padding:2px 10px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); cursor:pointer}
.tagbtn:hover{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-ink)}
.tagged{color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--r-sm); padding:0 3px; font-weight:600}

/* ---- the report builder (screen 8, second unit) ----
   One form for a new report and for changing one of yours. The sources are
   cards; the column set shown follows the source ticked, by CSS, so the page
   needs no script to switch; builder.js only adds the arrows and "Add another". */
.nt.wide{max-width:820px}
.srcpick{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.field label.src{display:flex; flex-direction:column; gap:3px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink); cursor:pointer}
.field label.src b{font-size:.92rem; font-weight:600}
.field label.src span{font-size:.78rem; color:var(--muted); line-height:1.4}
.field label.src input{margin:0 0 4px; accent-color:var(--accent)}
.field label.src:has(input:checked){border-color:var(--accent-line); background:var(--accent-soft)}
.srcform:has(input[name=Source][value=Moves]:checked) .cols:not([data-source=Moves]){display:none}
.srcform:has(input[name=Source][value=Tasks]:checked) .cols:not([data-source=Tasks]){display:none}
.srcform:has(input[name=Source][value=Days]:checked) .cols:not([data-source=Days]){display:none}
.pick.cols label{padding:4px 8px 4px 11px}
.colup{font-family:inherit; font-size:.75rem; line-height:1; padding:1px 5px; margin-left:4px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--muted); cursor:pointer}
.colup:hover{color:var(--accent-ink); border-color:var(--accent-line)}
.cond{display:grid; grid-template-columns:200px 130px 1fr; gap:8px; align-items:center; margin-bottom:8px}
.cond .narrow{min-width:0}
.addcond{cursor:pointer; font-family:inherit; margin-bottom:6px}
.two{display:grid; grid-template-columns:1fr 190px; gap:8px}
.rsum .mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.78rem; color:var(--ink-2)}
.newrep{margin-left:12px; width:auto; padding:7px 13px; font-size:.82rem}
.src.own{background:var(--accent-soft); color:var(--accent-ink)}
.src.shared{background:var(--sunk); color:var(--ink-2)}
@media (max-width:820px){ .srcpick{grid-template-columns:1fr} .cond{grid-template-columns:1fr} .two{grid-template-columns:1fr} }

/* ======================================================================
   Admin (people, teams, projects): the hub's tiles, the lists, the
   panels a settings page is made of, and the two boxes at the foot of
   one. Nothing here appears on a screen anybody outside Admin sees.
   ====================================================================== */

/* the hub's tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:14px}
.tile{display:block; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:15px 16px 14px; box-shadow:var(--card-shadow); color:inherit; text-decoration:none}
.tile:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.tile:hover b{color:var(--accent-ink)}
.tile b{display:flex; align-items:baseline; gap:9px; font-family:var(--font-display); font-size:1.02rem; font-weight:700; color:var(--ink)}
.tile b .ct{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.75rem; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; background:var(--sunk); border-radius:9px; padding:1px 7px}
.tile span{display:block; margin-top:6px; font-size:.84rem; color:var(--muted); line-height:1.5}

/* a list of people, teams or projects: one grid, its columns set per page */
.alist{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--card-shadow)}
.ahd,.arow{display:grid; grid-template-columns:var(--acols); gap:12px; padding:10px 14px; align-items:center; border-bottom:1px solid var(--line)}
.ahd{padding:7px 14px; background:var(--surface-2)}
.ahd span{font-size:.67rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.alist > :last-child{border-bottom:0}
.arow:hover{background:var(--surface-2)}
.arow.off .nm b{color:var(--muted)}
.nm{display:flex; align-items:center; gap:9px; min-width:0}
.nm b{font-size:.92rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nm .uid{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.75rem; color:var(--muted); white-space:nowrap}
.acell{font-size:.84rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.acell.q{color:var(--muted)}
.go{text-align:right}

/* the role, as a pill: the one place a role gets a colour of its own */
.rolepill{display:inline-block; font-size:.73rem; font-weight:600; padding:2px 9px; border-radius:var(--r-pill); background:var(--sunk); color:var(--ink-2); white-space:nowrap}
.rolepill.adm{background:var(--st-sign-bg); color:var(--st-sign-ink)}
.rolepill.mgr{background:var(--st-prog-bg); color:var(--st-prog-ink)}
.rolepill.tl{background:var(--st-ver-bg); color:var(--st-ver-ink)}
.rolepill.qa{background:var(--st-rev-bg); color:var(--st-rev-ink)}
.rolepill.cli{background:var(--due-bg); color:var(--due)}

/* a yes/no fact: active, archived, never signed in */
.flag{font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap}
.flag.on{background:var(--ok-bg); color:var(--ok)}
.flag.no{background:var(--sunk); color:var(--muted)}
.flag.new{background:var(--accent-soft); color:var(--accent-ink)}

/* a panel: one set of things you add to and take from, on a settings page */
.panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(318px,1fr)); gap:16px; align-items:start}
.panel{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--card-shadow); overflow:hidden}
.panel > h3{margin:0; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:.8rem; font-weight:600; letter-spacing:.03em; color:var(--ink-2); display:flex; align-items:baseline; gap:8px}
.panel > h3 em{font-style:normal; font-weight:400; font-size:.78rem; color:var(--muted)}
.pnrow{display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line)}
.pnrow:last-child{border-bottom:0}
.pnrow .nm{flex:1}
.pnrow .sub{font-size:.78rem; color:var(--muted); white-space:nowrap}
.pnrow form{margin:0; display:flex; align-items:center; gap:8px}
.pnrow.add{background:var(--surface-2); flex-wrap:wrap}
.pnrow.add .input,.pnrow.add .select{height:31px; font-size:.84rem; padding:3px 9px}
.pnrow.add .input.grow{flex:1; min-width:70px}
.pnrow.add .btn{padding:5px 13px; font-size:.82rem}
.pnote{padding:9px 14px; font-size:.79rem; color:var(--muted); line-height:1.5; background:var(--surface-2); border-top:1px solid var(--line)}
.x{color:var(--muted); font-size:1.05rem; line-height:1; padding:1px 6px; border-radius:var(--r-sm); background:none; border:0; cursor:pointer}
.x:hover{background:var(--sunk); color:var(--bad)}
.up{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--muted); padding:2px 7px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); cursor:pointer}
.up:hover{border-color:var(--line-strong); color:var(--ink-2)}
.star{font-size:.71rem; font-weight:600; padding:1px 8px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-ink); white-space:nowrap}
.swatch{width:13px; height:13px; border-radius:4px; flex:none; border:1px solid rgba(0,0,0,.14)}

/* a password handed over on screen, because email is not on yet */
.once{border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:var(--r); padding:13px 15px; margin-bottom:16px}
.once b{display:block; font-size:.9rem; color:var(--ink); margin-bottom:7px}
.once code{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:1.02rem; font-weight:500; background:var(--surface); border:1px solid var(--accent-line); border-radius:var(--r-sm); padding:5px 11px; display:inline-block; letter-spacing:.05em}
.once span{display:block; margin-top:8px; font-size:.82rem; color:var(--accent-ink); line-height:1.5}

/* the last thing on a settings page: the change that is hard to take back */
.danger{border:1px solid var(--bad-line); background:var(--bad-bg); border-radius:var(--r); padding:14px 16px; margin-top:22px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.danger .dt{flex:1; min-width:250px}
.danger b{display:block; font-size:.92rem; color:var(--ink); margin-bottom:4px}
.danger p{margin:0; font-size:.84rem; color:var(--ink-2); line-height:1.55}
.btn.warn{background:var(--bad); color:#fff; box-shadow:none}
.btn.warn:hover{filter:brightness(1.07)}

/* the pieces the admin views add on top of the shared ones */
.panelform{padding:14px 14px 4px}
.panelform .btn{margin-top:2px; margin-bottom:14px}
.probs{margin:6px 0 0; padding-left:18px}
.probs li{margin:2px 0}
.danger.calm{border-color:var(--line-strong); background:var(--surface-2)}
.input.date{max-width:152px}
.arow .uid{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.82rem; color:var(--ink-2)}
.pnrow .x[disabled],.pnrow .up[disabled]{opacity:.45; cursor:not-allowed}
@media (max-width:820px){
  .ahd{display:none}
  .arow{grid-template-columns:1fr; gap:4px}
  .arow .go{text-align:left}
  .panels{grid-template-columns:1fr}
}

/* Panel rows hold long names (a milestone, a list), so they wrap rather than
   truncate - the grid lists above are the place for ellipsis, not these. */
.pnrow .nm{flex-wrap:wrap}
.pnrow .nm b{white-space:normal; overflow:visible; text-overflow:clip}
.up{font-family:inherit}
.input.date{max-width:142px}
.pfind{max-width:264px}

/* A list row that opens. It is a <details>, so the arrow needs no script and
   the browser keeps the open row open while the page is read. */
.acc{border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:0}
.acc > summary{cursor:pointer; list-style:none; border-bottom:0}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary:hover{background:var(--surface-2)}
.acc[open] > summary{background:var(--surface-2)}
.twist{color:var(--muted); font-size:1.05rem; line-height:1; text-align:center; display:inline-block; transition:transform .12s ease}
.acc[open] .twist{transform:rotate(90deg)}
.apanel{display:flex; flex-wrap:wrap; gap:8px 34px; padding:12px 16px 14px 40px; background:var(--surface-2); border-top:1px solid var(--line)}
.apanel .grp{min-width:230px}
.apanel h4{margin:0 0 8px; font-size:.67rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.apanel .none{margin:0; font-size:.85rem; color:var(--muted)}
.chipline{display:flex; flex-wrap:wrap; gap:7px}
.pill{display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 11px 3px 4px; text-decoration:none; color:inherit}
.pill .av{width:21px; height:21px; font-size:.6rem}
.pill b{font-size:.85rem; font-weight:600; color:var(--ink)}
.pill em{font-style:normal; font-size:.76rem; color:var(--muted)}
.pill .uid{margin-left:7px; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.74rem; color:var(--muted)}
a.pill:hover{border-color:var(--line-strong)}

/* Avatars on the admin screens. Every screen sizes its own, so these are the
   admin sizes: in a list row, in a panel row, and inside a pill. */
.nm .av,.pnrow .av,.apanel .av{width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.66rem; font-weight:600; color:#fff; flex:none; letter-spacing:.01em}
.pill .av{width:21px; height:21px; font-size:.6rem}

/* A button that is offered but refused: the reason sits beside it, so it has
   to look like it will not move. */
.btn[disabled],.btn.pbtn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none; filter:none}
.btn[disabled]:hover{filter:none}
.newclient{max-width:320px; padding:7px 11px; font-size:.88rem; margin-top:6px}

/* The person form has two shapes in one page. A client is attached to a
   project and never to a team, and their company comes from that project, so
   the staff fields and the client field swap on the Role radios. Same idiom as
   the report builder's sources: :has() on the form, no script. */
.personform .forclient{display:none}
.personform:has(input[name=Role][value=Client]:checked) .forclient{display:flex}
.personform:has(input[name=Role][value=Client]:checked) .forstaff{display:none}
.hint.bad{color:var(--bad)}
.panels.one{max-width:660px}

/* ======================================================================
   Page headings. Every screen names itself at the top; that name was set
   small enough to read as chrome rather than as the title of the page, so
   the three places one appears are raised together and the trail above it
   is darkened to match. One size for all of them, whichever shell the
   screen uses.
   ====================================================================== */
.topbar h2{font-size:1.5rem; font-weight:700; letter-spacing:-.018em}
.ptitle h2{font-size:1.5rem; letter-spacing:-.018em}
.ptitle h2 .id{font-size:.92rem}
.h1{font-size:1.5rem; font-weight:700; letter-spacing:-.018em}
.crumb{font-size:.86rem; color:var(--ink-2); padding-top:14px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--ink-2)}

/* A whole row that is a link. The chevron is the only thing that says so
   besides the cursor, because a row of underlined text would read as noise. */
a.arow{text-decoration:none; color:inherit}
a.arow:hover{background:var(--surface-2)}
a.arow:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.chev{text-align:right; color:var(--line-strong); font-size:1.15rem; line-height:1}
a.arow:hover .chev{color:var(--muted)}

/* The scope editor. The textarea is still the thing that posts; it is moved
   out of sight once scope.js has put an editable area in front of it. */
.richbar{display:flex; gap:4px; margin-bottom:6px; flex-wrap:wrap}
.richbar button{font-family:inherit; font-size:.8rem; height:28px; padding:0 10px; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink-2)}
.richbar button.is-b{font-weight:700}
.richbar button.is-i{font-style:italic}
.richbar button:hover{border-color:var(--focus); color:var(--ink)}
.rich{min-height:150px; max-height:420px; overflow-y:auto; border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--surface); color:var(--ink); padding:11px 13px; font-size:.9rem; line-height:1.6}
.rich:focus{outline:none; border-color:var(--focus)}
.rich p{margin:0 0 .6em}
.rich ul,.rich ol{margin:0 0 .6em; padding-left:1.3em}
.rich li{margin:.15em 0}
.rich h1,.rich h2,.rich h3,.rich h4{font-size:1rem; font-weight:600; margin:.8em 0 .3em}
.rich table{border-collapse:collapse} .rich td,.rich th{border:1px solid var(--line); padding:3px 7px}
textarea.richsource{display:none}

/* The scope on a project page (16 September 2026). It was a fold under the
   title bar, which showed nothing at all when no scope had been typed; it is
   now a box that opens over the page from the Scope button, and a Manager or an
   Admin edits it in the same box.

   The <dialog> is real, so the browser gives the dark behind it, Esc and the
   focus trap. Opened without a script it sits in the page under the title bar
   rather than over it - :modal is true only when a script opened it - so the
   scope is readable either way. */
dialog.scopebox{border:0; padding:0; margin:0; width:100%; max-width:760px; background:transparent; color:inherit}
dialog.scopebox[open]:not(:modal){position:static; margin:14px 22px; max-width:none}
dialog.scopebox:modal{margin:auto; max-height:calc(100vh - 80px)}
dialog.scopebox::backdrop{background:rgba(10,13,16,.45)}
.scopebox .dlg{max-width:none; box-shadow:var(--cardshadow); display:flex; flex-direction:column; max-height:inherit}
.scopebox .dlghd{display:flex; align-items:flex-start; gap:12px}
.scopebox .dlghd .tl{flex:1; min-width:0}
.scopebox .dlghd .x{font-size:1.3rem; line-height:1; color:var(--muted); text-decoration:none; padding:0 3px}
.scopebox .dlghd .x:hover{color:var(--ink)}
.scopebox .dlgbd{overflow-y:auto}
.scopebox .rich.read{border:0; border-radius:0; background:none; max-height:none; min-height:0; padding:0}
.scopebox .none{font-size:.88rem; color:var(--muted); line-height:1.6; margin:0}
.scopebox .hint{font-size:.8rem; color:var(--muted); line-height:1.5}
.scopebox form{display:flex; flex-direction:column; min-height:0}
.scopebox .dlgft .btn{margin:0}
/* The two halves are swapped by the hidden attribute, and hidden is only
   display:none in the browser's own stylesheet - which any class here outranks.
   Without this the reading and the editor showed at once and Cancel looked
   like it did nothing (seen 16 September 2026, the first time it was used). */
.scopebox [hidden]{display:none !important}

/* Scope and New task sit together at the end of the title bar. */
.ptitle .acts{display:flex; align-items:center; gap:8px}
.ptitle .acts .btn.ghost{margin-top:0; background:var(--surface)}

/* Putting somebody on a task from the task itself. */
.persons .person form.inline{display:inline; margin:0}
.persons .person .x{font-size:.9rem; padding:0 4px; vertical-align:middle}
.puton{display:flex; gap:7px; margin-top:8px; align-items:center}
.puton .select{flex:1; min-width:0; height:30px; font-size:.84rem; padding:3px 8px}
.puton .btn{margin:0; padding:5px 11px; font-size:.82rem; white-space:nowrap}

/* ---------------------------------------------------------------------------
   Inviting somebody in (16 September 2026): the invite list, the box that holds
   a link next to a Copy button, and the handout that shows a new account its ID
   and password once.
   --------------------------------------------------------------------------- */

/* The invite list, on the same .rows component as everything else - only the
   track widths differ, the way .rows.rep does it. The wider variant carries the
   "Invited by" column an Admin sees. */
.rows.inv .rowhd,.rows.inv .row{grid-template-columns:1fr 92px 190px minmax(240px,1.2fr) 64px}
.rows.inv.who .rowhd,.rows.inv.who .row{grid-template-columns:1fr 92px 130px 190px minmax(240px,1.2fr) 64px}

/* Where an invitation stands. Only "Open" is coloured: the other three are
   over, and an ended thing does not need to catch the eye. */
.invstate{font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.invstate.open{color:var(--accent)}

/* A link beside its Copy button. The input is readonly rather than plain text
   so that it can be selected with one click, and so Ctrl+C still works where
   the clipboard API is refused (see copy.js). */
.linkbox{display:flex; gap:8px; align-items:center; margin:8px 0 4px; max-width:100%}
.linkbox .input{flex:1 1 auto; min-width:0; font-size:.78rem; padding:6px 9px}
.linkbox .btn{flex:0 0 auto; padding:6px 12px; font-size:.8rem}

/* The ID and the password on the welcome page: large, monospaced and far apart,
   because somebody is copying them onto paper or into a password manager. */
.handout{display:flex; flex-direction:column; gap:14px; margin:18px 0}
.handout .f label{display:block; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.handout .v.big{font-size:1.25rem; letter-spacing:.02em; color:var(--ink); user-select:all}

/* The door's buttons run the width of the card. */
.btn.wide{display:block; width:100%; text-align:center; margin-top:14px}

/* ---- Home (screen 9), 17 September 2026 ----
   Ported from the approved design note (D:\Claude_Apps\genx-screen-home.html).
   Colour here means what a figure counts, not decoration: blue is work
   moving, amber is review, green is closed, magenta is late, red is
   returned - every hue below is a token this file already gives that same
   meaning elsewhere (the --st-*, --due, --ok and --return-* pairs), so a
   colour on Home always agrees with the same colour on a task's state pill. */

/* the greeting beside the page title */
.topbar .hi{font-size:.86rem; color:var(--ink-2)}
.topbar .hi small{font-size:.8rem; color:var(--muted); margin-left:8px}

/* the period control: the design's amber "chip" look, with a plain <select>
   (class .select, same as every other dropdown) sitting inside it - the
   rules below strip the select's own border and background so it reads as
   part of the chip rather than a box inside a box. */
.sel{margin-left:auto; font-size:.8rem; font-weight:600; border:1px solid var(--accent-line); border-radius:var(--r-sm);
  padding:4px 10px; background:var(--accent-soft); color:var(--accent-ink); white-space:nowrap; display:inline-flex; align-items:center}
.sel small{font-size:.72rem; font-weight:400; color:var(--accent-ink); opacity:.8; margin-right:6px}
.sel .select{border:0; background:transparent; color:inherit; font:inherit; font-weight:600; padding:0; margin:0; min-width:0}
.sel .select:focus{outline:none}
.periodform{margin-left:auto}

/* stat tiles: the one new component. The number wears the colour of what it
   counts; the icon sits in a chip of the same tint. */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px}
.stat{display:grid; grid-template-columns:1fr auto; gap:2px 10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:12px 14px 11px; box-shadow:var(--card-shadow); color:inherit; text-decoration:none; min-width:0}
.stat:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.stat .l{grid-column:1; font-size:.8rem; color:var(--muted)}
.stat b{grid-column:1; font-family:var(--font-display); font-size:1.7rem; font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--ink)}
.stat b small{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:8px}
.stat .ic{grid-column:2; grid-row:1/3; align-self:start; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:var(--sunk); color:var(--ink-2)}
.stat .ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.stat .m{grid-column:1/-1; font-size:.76rem; color:var(--muted); margin-top:3px; line-height:1.4}
/* Home's tone modifiers are h-prefixed. site.css already has GLOBAL .due (My Work's due column, mono), .back (the board's bordered "came back" chip) and .ret (My Work's returned row, a padded grid); each of them leaked onto Home's notes or reasons on the live page (17 September 2026). hdue / hback / hok collide with nothing. */
.stat .m.hdue{color:var(--due)} .stat .m.hback{color:var(--return-ink)} .stat .m.hok{color:var(--ok)}
.t-prog b{color:var(--st-prog-ink)} .t-prog .ic{background:var(--st-prog-bg); color:var(--st-prog-ink)}
.t-rev b{color:var(--st-rev-ink)}   .t-rev .ic{background:var(--st-rev-bg); color:var(--st-rev-ink)}
.t-ver b{color:var(--st-ver-ink)}   .t-ver .ic{background:var(--st-ver-bg); color:var(--st-ver-ink)}
.t-sign b{color:var(--st-sign-ink)} .t-sign .ic{background:var(--st-sign-bg); color:var(--st-sign-ink)}
.t-due b{color:var(--due)}          .t-due .ic{background:var(--due-bg); color:var(--due)}
.t-back b{color:var(--return-ink)}  .t-back .ic{background:var(--return-bg); color:var(--return-ink)}
.t-ok b{color:var(--ok)}            .t-ok .ic{background:var(--ok-bg); color:var(--ok)}
.t-hold b{color:var(--ink-2)}       .t-hold .ic{background:var(--st-hold-bg); color:var(--st-hold-ink)}
.t-acc b{color:var(--accent-ink)}   .t-acc .ic{background:var(--accent-soft); color:var(--accent-ink)}

/* the two-up and three-up figure grids, and the figure card itself */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
.fig{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:13px 16px 12px;
  box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:10px; min-width:0}
.fig .fh{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.fig h4{font-size:.88rem; font-weight:600; margin:0}
.fig .per{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.fig a.more{margin-left:auto; font-size:.76rem; color:var(--ink-2); white-space:nowrap}
.fig .note{font-size:.74rem; color:var(--muted); line-height:1.45}
.leg{display:flex; gap:4px 14px; flex-wrap:wrap; font-size:.76rem; color:var(--ink-2)}
.leg span{display:inline-flex; align-items:center; gap:6px}
.leg i{width:9px; height:9px; border-radius:50%; display:inline-block}
.leg b{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-weight:500; color:var(--ink); font-size:.76rem}
.chart svg{display:block; width:100%; height:auto; overflow:visible}

/* text inside the server-drawn SVGs */
svg text{font-family:"IBM Plex Sans",-apple-system,"Segoe UI",Arial,sans-serif}
svg .lbl{fill:var(--ink-2); font-size:11px}
svg .val{fill:var(--ink); font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:10.5px}
svg .tick{fill:var(--muted); font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:10px}
svg .grid line{stroke:var(--line); stroke-width:1}
svg .axis{stroke:var(--line-strong); stroke-width:1}

/* bar/column fills. The .c-* backgrounds for open/prog/rev/ver/sign/hold/int
   already exist above (the pulse bar); these are the SVG-fill twins, plus
   the tones the pulse bar never needed - ink (a plain note), lite (context,
   e.g. "opened"), back (came back/returned), due (late) and ok (closed). */
.f-open{fill:var(--st-open-ink)}
.f-prog{fill:var(--st-prog-ink)}
.f-rev{fill:var(--st-rev-ink)}
.f-ver{fill:var(--st-ver-ink)}
.f-sign{fill:var(--st-sign-ink)}
.f-hold{fill:var(--st-hold-ink); opacity:.55}
.f-ink,.c-ink{fill:var(--ink-2); background:var(--ink-2)}
.f-lite,.c-lite{fill:var(--line-strong); background:var(--line-strong)}
.f-back,.c-back{fill:var(--return-ink); background:var(--return-ink)}
.f-due,.c-due{fill:var(--due); background:var(--due)}
.f-ok,.c-ok{fill:var(--ok); background:var(--ok)}

/* the dot beside a "Where to start" row, and beside a load bar's name (later units) */
.dot{width:8px; height:8px; border-radius:50%; display:inline-block}

/* "Where to start": My Work's own .rows/.row are a 7-column task grid: this
   list is a different shape (a dot, an id, a title, a reason), so it is
   namespaced .hrows/.hrow rather than reusing those names. */
.hrows{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.hrow{display:grid; grid-template-columns:10px 78px 1fr auto; gap:12px; align-items:center; padding:8px 0;
  border-bottom:1px solid var(--line); font-size:.86rem; text-decoration:none; color:inherit}
.hrow:last-child{border-bottom:0}
.hrow:hover{background:var(--surface-2)}
.hrow .id{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--ink-2)}
.hrow .t{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hrow .r{font-size:.78rem; color:var(--muted); white-space:nowrap; text-align:right}
.hrow .r.hdue{color:var(--due)}
.hrow .r.hback{color:var(--return-ink)}

/* the Returned band on Home: My Work's own .returned/.ret are a different grid, and .rrow is
   the reports' bordered row card (its "span" rule turned the band's titles grey on the live page,
   17 September 2026), so the band is .hret and its rows are .rr. Original note:
   grid (three columns, no header link), so this is namespaced .hret. */
.hret{border:1px solid var(--return-line); border-left-width:3px; border-radius:var(--r); background:var(--return-bg); overflow:hidden}
.hret .rhd{display:flex; align-items:center; gap:9px; padding:9px 14px 7px}
.hret .rhd h3{font-size:.76rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--return-ink); margin:0}
.hret .rhd .n{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem; color:var(--return-ink)}
.hret .rhd a{margin-left:auto; font-size:.76rem; color:var(--return-ink)}
.hret .rr{display:grid; grid-template-columns:78px 1fr auto; gap:12px; padding:7px 14px; border-top:1px solid var(--return-line);
  font-size:.86rem; align-items:center; text-decoration:none; color:inherit}
.hret .rr:hover{background:var(--surface)}
.hret .rr .id{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--return-ink)}
.hret .rr .why{display:block; font-size:.78rem; color:var(--ink-2)}
.hret .rr .when{font-size:.76rem; color:var(--muted); white-space:nowrap; text-align:right}

@media (max-width:900px){
  .grid2,.grid3{grid-template-columns:1fr}
}
@media (max-width:820px){
  .stats{grid-template-columns:1fr 1fr}
}

/* ---- Home, unit 2 (the QA's Home), 17 September 2026 ----
   Four rules the second unit's markup needs, kept here under the Home block
   rather than edited into the rules above, so what unit 1 shipped and what
   unit 2 added stay legible apart. All four are ported from the same approved
   design note as the block above (D:\Claude_Apps\genx-screen-home.html). */

/* The age bands under the QA's "Needs my review" count. Tile.Mini has existed
   on the model since unit 1 but nothing printed it and the rule was never
   copied out of the design note, so the view had nothing to style until now.
   One hue (In Review amber) at three opacities: this is one quantity split by
   age, not three different things, so it must not read as three colours. */
.stat .mini{grid-column:1/-1; display:flex; gap:2px; height:6px; border-radius:3px; overflow:hidden; margin-top:8px; background:var(--sunk)}
.stat .mini i{display:block; height:100%; background:var(--st-rev-ink)}
.stat .mini .a1{opacity:.45} .stat .mini .a2{opacity:.75} .stat .mini .a3{opacity:1}

/* The QA's two lists sit side by side in a .grid2. The global .sec above
   carries min-width:660px - My Work's, where a seven-column task grid genuinely
   needs that width - and it would force each half of a two-column grid wider
   than its track, pushing the body into a horizontal scroll. .grid2 is Home's
   own (nothing else in Views uses it), so clearing the minimum inside it
   touches no other screen. */
.grid2 > .sec{min-width:0}

/* The second line under a list row's title ("Meridian Portal · auto-closes
   tomorrow"). The design has it as .row .t small; Home's list is .hrow. */
.hrow .t small{display:block; font-size:.76rem; color:var(--muted)}

/* The "more" link a list heading may carry ("Sign-off expiring", "Triage
   queue"). The .rule before it is flex:1, so the link is already pushed to the
   right; this only gives it the muted look the design's .fig a.more has. */
.sechd a.more{font-size:.76rem; color:var(--ink-2)}

/* ---- Home, unit 3 (the Team Lead's Home), 18 September 2026: the projects strip ----
   Ported from frame 3 of the approved design note (D:\Claude_Apps\genx-screen-home.html),
   renamed and scoped. The design calls these .pstrip/.prow/.pbar/.pn; this file
   already has a GLOBAL .prow (the project page's task row, a five-column grid with
   its own padding and its own .code rule) and a GLOBAL .pbar (that page's pulse,
   10px tall and up to 760px wide), and both would land on the strip's markup and
   break it. So the strip is .hstrip/.hprow, its bar is .hpulse, its name cell is
   .hpn, and every shared part (.code, .n, .cc, .zero, .ago, .hd) is reached only
   through .hprow so nothing here leaks out either. The two number tones are
   h-prefixed like the rest of Home: .hcli is the Client Review Pending purple,
   .hback the returned red, both the same tokens the state pills use. */
.hstrip{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.hprow{display:grid; grid-template-columns:190px 1fr 46px 78px 60px 90px; gap:14px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:.84rem; text-decoration:none; color:inherit}
/* 19 September 2026 (QC fix): a.hprow, not a bare .hprow. A strip row is an <a>
   only when the viewer may open that project; a row for a project they are not
   on the roster of is now a plain <div> with the same class (see
   Views/Home/Index.cshtml), and an unscoped rule here would have lit it up under
   the pointer exactly like a link - the row would have stopped being a door and
   gone on looking like one. Scoping it also stops the header row (.hprow.hd,
   a div since unit 3) highlighting, which it should never have done. No cursor
   rule is needed: the hand came from the anchor's href, and a div has none. */
a.hprow:hover{background:var(--surface-2)}
.hprow.hd{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:5px 0}
.hprow .hpn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hprow .hpn .code{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--ink-2); margin-right:8px}
.hprow .hpulse{display:flex; gap:2px; height:8px; border-radius:var(--r-pill); overflow:hidden; background:var(--sunk); max-width:240px}
.hprow .hpulse span{display:block; height:100%}
.hprow .n{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.78rem; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink)}
.hprow .n.zero{color:var(--line-strong)}
.hprow .n.hcli{color:var(--st-sign-ink)} .hprow .n.hback{color:var(--return-ink)}
.hprow .ago{font-size:.78rem; color:var(--muted); text-align:right; white-space:nowrap}

/* The line under the strip. The design only ever styles a note inside a figure
   (.fig .note above) and this one sits in a .sec, so it is matched as the
   strip's own next sibling rather than by adding a global .note - which would
   reach the task page's and the edit form's notes as well. */
.hstrip + .note{font-size:.74rem; color:var(--muted); line-height:1.45; margin:2px 0 0}

/* Narrow: the pulse, the with-client column and the last-moved words go, and
   the row keeps the name, the open count and the stalled count - the three
   things a Team Lead is looking for on a phone. */
@media (max-width:900px){ .hprow{grid-template-columns:1fr 46px 60px} .hprow .hpulse,.hprow .cc,.hprow .ago{display:none} }

/* ---- Home, unit 4 (the Manager's Home), 18 September 2026: the donut and its facts ----
   Ported from frame 4 of the approved design note (D:\Claude_Apps\genx-screen-home.html),
   renamed where a name is already taken. The design calls the facts line .facts;
   this file already has a GLOBAL .facts (the project page's own facts line, with
   a.fdue and a.fback), which carries different padding and no top rule and would
   land straight on this markup - so Home's is .hfacts and its tones are h-prefixed
   like every other tone on this page. .donut and .dleg are free, but they are
   h-prefixed too so the whole of Home reads one way; the svg classes (.gapline,
   .big, .sm) are scoped under svg, where nothing else of that name lives.

   The donut is the one figure on Home drawn as a ring rather than a bar, because
   it answers "how is the open work divided" and the middle is the only place the
   total can sit without a label of its own. */
.hdonut{display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center}
.hdonut .chart{width:150px}
.hdleg{display:flex; flex-direction:column; gap:5px; font-size:.8rem}
.hdleg a,.hdleg span{display:grid; grid-template-columns:10px 1fr auto; gap:9px; align-items:center; text-decoration:none; color:var(--ink-2)}
.hdleg i{width:9px; height:9px; border-radius:50%; display:inline-block}
.hdleg b{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-weight:500; color:var(--ink); font-size:.8rem}
/* the hairline between two ring segments: the page's own background, so the
   slices are parted by a gap rather than by a line of some third colour */
svg .gapline{stroke:var(--surface); stroke-width:2}
svg .big{font-family:var(--font-display); font-size:26px; font-weight:700; fill:var(--ink)}
svg .sm{font-size:10.5px; fill:var(--muted)}
.hfacts{display:flex; gap:8px 20px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-2); padding-top:6px; border-top:1px solid var(--line)}
.hfacts a,.hfacts span{color:var(--ink-2); text-decoration:none}
.hfacts b{font-weight:600; color:var(--ink)}
.hfacts .hdue,.hfacts .hdue b{color:var(--due)}
.hfacts .hback b{color:var(--return-ink)}
.hfacts .hcli b{color:var(--st-sign-ink)}
/* Narrow: the ring's legend goes under it rather than beside it. */
@media (max-width:820px){ .hdonut{grid-template-columns:1fr} }

/* ---- Home, unit 5 (the Admin's System health), 18 September 2026 ----
   Ported from frame 5 of the approved design note (D:\Claude_Apps\genx-screen-home.html),
   renamed and scoped. The design calls these .health/.hcell/.jobs/.job; nothing
   in this file carries any of those four names today, but .job, .jobs and
   .health are generic enough that one of them would be taken sooner or later,
   and .hcell's own children (.l, .b, .ic, .m, .d, .w) only stay harmless while
   they are reached through it - so the whole block is h-prefixed and scoped
   like the rest of Home.

   A health cell is a quieter, smaller relative of the .stat tile above it: the
   same label / number / tinted icon chip / note, at about two thirds the size,
   because four of them sit under the Manager's five full-size tiles and must
   not compete with them. The .t-* tone rules are global in this file
   (".t-sign b", not ".stat.t-sign b"), so a cell picks up its number and chip
   colour from them with nothing added here. */
.hhealth{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.hcell{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:11px 14px; display:grid; grid-template-columns:1fr auto; gap:2px 10px; color:inherit; text-decoration:none}
.hcell:hover{border-color:var(--line-strong)}
.hcell .l{grid-column:1; font-size:.78rem; color:var(--muted)}
.hcell b{grid-column:1; font-size:1.15rem; font-weight:600}
.hcell .ic{grid-column:2; grid-row:1/3; align-self:start; width:30px; height:30px; border-radius:8px; display:grid; place-items:center}
.hcell .ic svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hcell .m{grid-column:1/-1; font-size:.76rem; color:var(--muted); line-height:1.4}
.hcell .m.hdue{color:var(--due)}

/* The Jobs card: three rows, each a dot, the job's name with what its last run
   did under it, and when it ran. The dot itself is Home's own .dot with the
   .c-ok / .c-back backgrounds, so "late" is the same red as a returned task -
   the design's own rule, and the reason there is no colour of its own here. */
.hjobs{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.hjob{display:grid; grid-template-columns:12px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:.84rem}
.hjob .d{font-size:.76rem; color:var(--muted); display:block}
.hjob .w{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--muted); white-space:nowrap}

/* Narrow: four cells across becomes two, as the design has it. */
@media (max-width:900px){ .hhealth{grid-template-columns:1fr 1fr} }

/* ---- Clone Login, 18 September 2026 ----
   Signing in as somebody else for an hour (CloneLoginService). ONE thing needs
   styling and nothing else does: the strip that says whose screen this is.

   Amended the same evening. There were .clonestart and .cloneway rules here for
   a start page in a new tab that offered two ways in; the owner asked for the
   same tab and a return link, so the control signs straight in, the start page
   and its partner Dead page were deleted, and their rules went with them rather
   than being left behind to style nothing. Only .clonebar is still drawn - by
   _Layout and _ClientLayout, on every page of a cloned session.

   Grepped before naming, and again on removal: .clonebar appears nowhere else
   in this file, and .clonestart and .cloneway appear nowhere in the repo now
   except in this note. .linkbtn is reused exactly as it is.

   THE STRIP. The Ember amber (--accent-soft / --accent-ink / --accent-line),
   which is this file's colour for "an action", used here for the one state a
   person must never forget they are in: everything clicked in a cloned session
   is recorded under the name in the strip and not under their own. It is
   sticky, so it survives scrolling, and it sits at the very top of .main in the
   staff shell and outside .pshell in the portal - the portal's own column is
   1040px and centred, and a strip that stopped at its edges would read as part
   of the page rather than as something wrapped around it. */
.clonebar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--accent-soft); color:var(--accent-ink); border-bottom:1px solid var(--accent-line);
  padding:9px 22px; font-size:.86rem}
.clonebar b{font-weight:600; color:var(--accent-ink)}
/* form.inline has no global rule in this file - the two that exist are scoped to
   their own pages - so the strip carries its own, and the way back reads as part
   of the sentence rather than as a block under it. */
.clonebar form.inline{display:inline; margin:0}
.clonebar .linkbtn{color:var(--accent-ink); font-weight:600}

/* ---- Notifications (unit 1), 18 September 2026 ----
   The page at /notifications and the two counts that open it: the rail's, in
   the staff shell, and the portal bar's.

   NAMING. Every class below was grepped against this file before it was named
   and none of .nots, .not, .nothd, .pnots or .pct appeared anywhere in it.
   They are namespaced rather than called .rows/.row because those two belong
   to My Work and the board, and Home already had a global class (.returned)
   leak onto its band on 17 September 2026 - one page silently restyling
   another is the failure this file keeps making. .pct is the portal bar's
   count; the rail reuses .ct, which is already the My Work badge (.nav a .ct).

   ONE VIEW, TWO SHELLS. The notifications page is the same page for staff and
   for clients, so it cannot borrow either shell's page furniture: the staff
   .page is 1000px with its own padding, the portal's .pshell is a 1040px
   centred column that already pads, and the staff .head/.topbar is sticky
   chrome a client has never seen. Hence .pnots for the portal wrapper and
   .nothd for a heading of this page's own.

   The parts inside a row (.dot, .tx, .why, .when) are all reached through
   .not, never on their own: .dot in particular has a bare global rule in this
   file (Home's, an 8px circle) and .why, .tx and .when are each scoped to
   three or four other components. Scoping every one of them here is what stops
   this block reaching any of those, and stops any of them reaching this. */
.pnots{padding:22px 0 60px}
.nothd{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.nothd h3{margin:0; font-size:1.02rem; font-weight:600; letter-spacing:-.01em}
.nothd .n{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem;
          color:var(--muted); background:var(--sunk); border-radius:9px; padding:1px 7px}
.nots{display:flex; flex-direction:column; border-top:1px solid var(--line)}
/* A row is three columns: the unread dot, the words, and when it arrived. It is
   an <a> when the notice has a task to open and a <div> when it has not, and
   both wear .not - so the hover belongs to a.not alone, below, and a row that
   leads nowhere never looks clickable. */
.not{display:grid; grid-template-columns:10px 1fr auto; gap:12px; align-items:start;
     padding:10px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit}
.not:last-child{border-bottom:0}
a.not:hover{background:var(--surface-2)}
/* The dot holds its column whether or not it is filled, so the titles of read
   and unread rows line up rather than stepping in and out. */
.not .dot{width:8px; height:8px; border-radius:50%; margin-top:6px; background:transparent}
.not.new .dot{background:var(--accent)}
.not .tx{min-width:0}
.not .tx b{display:block; font-weight:400; color:var(--ink)}
.not.new .tx b{font-weight:600}
.not .why{display:block; font-size:.82rem; color:var(--muted); margin-top:2px}
.not .when{font-size:.78rem; color:var(--muted); white-space:nowrap}
/* The portal bar's count. Filled amber rather than the rail's quiet monospace
   because the portal has no rail to be scanned down: it is one row of small
   muted links (.ptop .pacts a), and a number set in the same grey as its
   neighbours would not be seen at all.

   display:inline-block is load-bearing and not tidying: .ptop .pacts a
   underlines every link in that strip, and a text decoration set on an
   ancestor is drawn through its in-flow inline descendants - a child cannot
   switch it off with text-decoration:none. An atomic inline-level box is the
   exception the CSS rule makes, so this is what keeps the underline from
   running through the chip. It also makes the 1px/5px padding lay out the way
   a badge should rather than the way an inline box does. */
.pacts .pct{display:inline-block; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-size:.72rem;
            margin-left:5px; padding:1px 5px; border-radius:var(--r-sm); background:var(--accent); color:#fff}