/* ---- the submittal register (16 Oct 2026; docs/mockups/) ----
     Five stages in five hue families, so a column of them reads across a room
     (recognition over polish): expected is dashed grey, the firm's own blue,
     the consultant violet, a resubmittal due orange, returned green. */
  .sr { display:grid; gap:.75rem; padding:.2rem 0 1rem; }
  /* the count above its stage, as in the mock-up; they wrap to the pane */
  .sr-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(7.6rem, 1fr)); gap:.45rem; }
  .sr-tile { all:unset; box-sizing:border-box; cursor:pointer; border:1.5px solid currentColor; border-radius:5px;
             padding:.4rem .6rem; background:var(--surface); display:grid; gap:.05rem; }
  .sr-tile b { font-size:1.3rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
  .sr-tile span { font-size:.76rem; font-weight:600; }
  .sr-tile.sr-c-expected { border-style:dashed; }
  .sr-tile[aria-pressed="true"] { box-shadow:inset 0 0 0 2px currentColor; background:color-mix(in srgb, currentColor var(--stg-mix), var(--surface)); }
  .sr-tile:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .sr-bar { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; }
  .sr-turn h4 { margin:0; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
  .sr-turn p { margin:.1rem 0 0; font-size:.85rem; color:var(--ink-2); }
  .sr-turn b { color:var(--ink); font-variant-numeric:tabular-nums; }
  .sr-scroll { overflow-x:auto; border:1px solid var(--rule); border-radius:4px; }
  table.list.sr-tbl { min-width:52rem; }
  table.list.sr-tbl th, table.list.sr-tbl td { padding:.42rem .55rem; font-size:.84rem; vertical-align:top; }
  table.list.sr-tbl th { white-space:nowrap; }
  .sr-div td { background:var(--rule-soft); font-weight:700; font-size:.76rem; letter-spacing:.04em; color:var(--ink); }
  tr.sr-pk { cursor:pointer; }
  tr.sr-pk.open td { background:var(--accent-soft); }
  tr.sr-pk:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  tr.sr-pk.flash td { animation:srFlash 1.4s ease-out; }
  @keyframes srFlash { from { background:var(--today); } to { background:transparent; } }
  .sr-no { font-family:ui-monospace, Consolas, monospace; font-weight:700; color:var(--ink); white-space:nowrap; }
  .sr-dup { display:inline-block; margin-left:.35rem; font-family:inherit; font-size:.62rem; font-weight:700; text-transform:uppercase;
            letter-spacing:.05em; color:var(--st-warning); border:1px solid currentColor; border-radius:3px; padding:0 .25rem; }
  .sr-title b { color:var(--ink); font-weight:600; }
  .sr-src { font-size:.66rem; font-weight:600; border:1px solid var(--rule); border-radius:3px; padding:0 .3rem; color:var(--ink-3);
            margin-left:.35rem; white-space:nowrap; }
  .sr-secs { display:block; font-family:ui-monospace, Consolas, monospace; font-size:.72rem; color:var(--ink-3); }
  .sr-d { white-space:nowrap; font-variant-numeric:tabular-nums; }
  .sr-d.na { color:var(--rule); }
  .sr-pill { display:inline-block; font-size:.7rem; font-weight:700; padding:.06rem .45rem; border:1.5px solid currentColor; border-radius:3px;
             white-space:nowrap; background:color-mix(in srgb, currentColor var(--stg-mix), var(--surface)); }
  .sr-pill.sr-c-expected { border-style:dashed; }
  .sr-clock { display:block; font-size:.74rem; color:var(--ink-3); margin-top:.15rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .sr-clock.over { color:var(--st-critical); font-weight:700; }
  .sr-next { white-space:nowrap; }
  .sr-stack { display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }
  .sr-stack select, .sr-stack input { font:inherit; font-size:.8rem; max-width:14rem; }
  .btn.sr-btn { padding:.18rem .55rem; font-size:.78rem; }
  .sr-detail td { background:var(--bg); }
  .sr-revs { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
  .sr-rev { min-width:12rem; max-width:24rem; display:grid; gap:.15rem; font-size:.82rem; }
  .sr-rev .k { font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
  .sr-notes { display:grid; gap:.25rem; font-size:.74rem; color:var(--ink-3); margin-top:.2rem; }
  .sr-notes textarea { font:inherit; font-size:.82rem; width:100%; min-width:12rem; }
  .sr-notes .btn { justify-self:start; padding:.15rem .5rem; font-size:.76rem; }
  .sr-notes-ro { white-space:pre-wrap; color:var(--ink-2); }
  .sr-files { margin:.2rem 0 0; padding-left:1rem; font-size:.74rem; color:var(--ink-3); overflow-wrap:anywhere; }
  .sr-path { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.6rem; }
  .sr-path .mono { font-size:.78rem; color:var(--ink-2); overflow-wrap:anywhere; }
  .sr-gone { font-size:.74rem; color:var(--st-warning); }
  .sr-files li { margin:.1rem 0; }
  /* Project Info's read-only facts (Opened, On the server): text where the other rows have boxes */
  /* a task's assignee and due date, changed on its row (17 Oct) */
  .tkSel { font:inherit; font-size:.8rem; padding:.2rem .3rem; border:1px solid var(--rule); border-radius:4px;
           background:var(--surface); color:var(--ink); max-width:12rem; }
  .pinfo__ro { padding:.45rem 0; font-size:.9rem; line-height:1.45; color:var(--ink); }
  .pinfo__ro .muted { font-size:.8rem; }
  .sr-seed { border:1px solid var(--rule); border-radius:4px; background:var(--surface); padding:.7rem .9rem; display:grid; gap:.5rem; }
  .sr-seed h4 { margin:0; font-size:.92rem; }
  .sr-seed p { margin:0; max-width:75ch; }
  .sr-seed textarea { font:inherit; font-size:.82rem; width:100%; }
  .sr-seedlist { list-style:none; margin:0; padding:0; max-height:16rem; overflow:auto; }
  .sr-seedlist li { border-bottom:1px solid var(--rule-soft); padding:.2rem .3rem; font-size:.84rem; }
  .sr-seedlist .mono { color:var(--ink-3); margin-right:.3rem; }
  .sr-seedbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
  .sr-add { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
  .sr-add select, .sr-add input { font:inherit; font-size:.84rem; padding:.28rem .4rem; border:1px solid var(--rule); border-radius:3px;
                                  background:var(--surface); color:var(--ink); }
  .sr-add input { flex:1 1 16rem; min-width:0; }
  .sr-hint { margin:0; font-size:.8rem; }
  @media (prefers-reduced-motion:reduce) { tr.sr-pk.flash td { animation:none; } }
  /* stage colours last: .sr-tile resets everything with all:unset, colour included */
  .sr-c-all { color:var(--ink-2); } .sr-c-expected { color:var(--st-dormant); } .sr-c-wg { color:var(--accent); }
  .sr-c-consultant { color:var(--sr-consult); } .sr-c-resubmit { color:var(--st-serious); }
  .sr-c-returned { color:var(--st-good); } .sr-c-over { color:var(--st-critical); }
  /* three-pane workspace: jobs on the left, the selected job's panes on the right */
  .work { display:grid; grid-template-columns:22rem 1fr; height:calc(100vh - 3.1rem); min-height:0; }
  /* Narrow, the rail was taking 352px of the 756px this screen gets through
     Chrome Remote Desktop -- almost half the working area to hold a list you
     are not reading while you work. It keeps the job number, the title and the
     marks at 17rem; the register tables need the rest more than it does. */
  @media (max-width:1100px) { .work { grid-template-columns:17rem 1fr; } }
  .jobs { border-right:1px solid var(--rule); background:var(--surface); overflow:auto; min-height:0; }
  .jobsearch { display:grid; gap:.4rem; padding:.5rem .6rem; border-bottom:1px solid var(--rule);
               position:sticky; top:0; background:var(--surface); z-index:4; }
  .jobsearch input { width:100%; font:inherit; font-size:.82rem; padding:.32rem .5rem;
    border-radius:6px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); }
  .jobsearch input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  /* Team and Contacts, one above the other -- the shape the firm has read this
     screen in for seventeen years. */
  .dirsec { margin:0 0 1.6rem; }
  .dirsec header { display:flex; align-items:baseline; gap:.6rem; margin:0 0 .4rem;
                   padding-bottom:.3rem; border-bottom:1px solid var(--rule); }
  .dirsec h3 { margin:0; font-size:.72rem; font-weight:700; letter-spacing:.12em;
               text-transform:uppercase; color:var(--accent); }
  .dirsec .sub { font-size:.76rem; color:var(--ink-3); }
  .dirtbl tbody tr { cursor:pointer; }
  .dirtbl tr.former td { color:var(--ink-3); }
  .btn.wide { display:block; width:100%; text-align:left; }
  .jobsearch .muted { font-size:.72rem; margin-top:.3rem; }
  .jobs .hd { position:sticky; top:0; background:var(--rule-soft); border-bottom:1px solid var(--rule);
              padding:.4rem .8rem; font-size:.64rem; text-transform:uppercase; letter-spacing:.1em;
              color:var(--ink-3); font-weight:700; display:grid; grid-template-columns:5rem 1fr; gap:.6rem; }
  .jobrow { display:grid; grid-template-columns:5rem 1fr; gap:.6rem; padding:.4rem .8rem; cursor:pointer;
            border-bottom:1px solid var(--rule-soft); font-size:.84rem; }
  .jobrow:hover { background:var(--accent-soft); }
  /* The open job's row wears its stage: shaded inside, the stage colour at full
     strength around it, where it used to be the bright blue (Jason, 30 Sep). */
  .jobrow[aria-selected="true"] { background:var(--stg-wash); outline:3px solid var(--stg); outline-offset:-3px; }
  .jobrow.stc-none[aria-selected="true"] { --stg:var(--ink-3); }
  .jobrow .jc { font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
  .jobrow .jc.prov { font-weight:500; font-style:italic; color:var(--ink-3); }
  .nonum { font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; vertical-align:.2em;
           margin-left:.5rem; padding:.1rem .4rem; border-radius:2px; color:var(--ink-3); border:1px dashed var(--ink-3); }
  .jobrow .jt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .jobrow .jmeta { grid-column:2; display:flex; align-items:center; gap:.5rem; min-width:0; }
  .jobrow .cl { flex:1 1 auto; min-width:2.5rem; font-size:.73rem; color:var(--ink-3);
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* the marks: what this job holds, without opening it */
  .ic { width:1em; height:1em; flex:none; fill:none; stroke:currentColor;
        stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .jhas { flex:none; display:flex; align-items:center; gap:.3rem; font-size:.95rem;
          color:var(--ink-2); line-height:1; }
  .jhas .mk { display:flex; cursor:help; }
  .jobrow:hover .jhas { color:var(--ink); }

  .pane { display:flex; flex-direction:column; min-width:0; min-height:0; }

  /* the board's card for one project, above the workbench tabs */
  .bcard { --lv:var(--st-dormant); border:1px solid var(--rule); border-left:4px solid var(--lv);
           background:var(--st-wash); border-radius:4px; margin:.1rem 0 .6rem; font-size:.8rem; }
  .bcard[data-level="critical"] { --lv:var(--st-critical); }
  .bcard[data-level="serious"]  { --lv:var(--st-serious); }
  .bcard[data-level="warning"]  { --lv:var(--st-warning); }
  .bcard[data-level="good"]     { --lv:var(--st-good); }
  .bcard__line { padding:.4rem .7rem; color:var(--ink-2); display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
  .bcard__line b { color:var(--ink); font-weight:600; }
  .bcard__why { color:var(--lv); font-weight:600; }
  .bcard__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); border-top:1px solid var(--rule-soft); }
  .bcard__cell { padding:.45rem .7rem .55rem; border-right:1px solid var(--rule-soft); min-width:0; }
  .bcard__cell:last-child { border-right:0; }
  .bcard h5 { margin:0 0 .25rem; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
  .bcard__cell ul { list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
  .bcard__cell li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
  .bcard .kind { font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--st-serious);
                 border:1px solid currentColor; border-radius:2px; padding:0 .25rem; margin-right:.3rem; }
  .bcard .inf { color:var(--ink-3); font-style:italic; }
  .bcard .linkish, .linkish { all:unset; cursor:pointer; color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
  .linkish:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .bcard__note { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink-2); cursor:pointer; }
  .waiton { font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--st-serious);
            border:1px solid currentColor; border-radius:2px; padding:.05rem .3rem; margin-left:.35rem; white-space:nowrap; }

  /* to fix */
  .fx { padding:1rem 1.2rem 3rem; display:grid; gap:.6rem; max-width:70rem; }
  .fx__bar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
  .fx__item { background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--st-dormant); border-radius:4px; padding:.7rem .9rem; }
  .fx__item[data-sev="critical"] { border-left-color:var(--st-critical); }
  .fx__item[data-sev="high"]     { border-left-color:var(--st-serious); }
  .fx__item[data-sev="medium"]   { border-left-color:var(--st-warning); }
  .fx__top { display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; }
  .fx__kind { font-weight:700; }
  .fx__meta { font-size:.72rem; color:var(--ink-3); }
  .fx__detail { margin:.3rem 0 .2rem; color:var(--ink-2); font-size:.86rem; max-width:75ch; }
  .fx__fix { font-size:.8rem; color:var(--ink-3); }
  .fx__acts { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.5rem; }
  .fx__acts input { font:inherit; font-size:.82rem; padding:.3rem .45rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .fx__acts button { font:inherit; font-size:.8rem; padding:.3rem .65rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); cursor:pointer; }
  .fx__acts button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
  .fx__acts button[disabled] { opacity:.5; cursor:not-allowed; }
  .fx__res { font-size:.8rem; color:var(--st-good); margin-top:.3rem; }
  .fx__err { font-size:.8rem; color:var(--st-critical); }
  .navcount { font-size:.66rem; font-weight:700; margin-left:.35rem; padding:0 .35rem; border-radius:8px; background:var(--st-serious); color:#fff; }
  .panehead { padding:.7rem 1rem .1rem; border-bottom:1px solid var(--rule); background:var(--surface); }
  .panehead h2 { margin:0; font-size:1.05rem; letter-spacing:-.01em; }
  .panehead .sub { font-size:.78rem; color:var(--ink-3); margin:.1rem 0 .5rem; }
  .tabs { display:flex; gap:.15rem; }
  .tabs button { all:unset; display:inline-flex; align-items:center; gap:.32rem;
                 cursor:pointer; padding:.35rem .55rem; font-size:.82rem; color:var(--ink-2);
                 border-bottom:2px solid transparent; }
  .tabs button:hover { color:var(--ink); }
  .tabs button[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
  .tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  /* an empty tab still opens -- it is where the first one gets filed -- but it
     stops competing for attention with the tabs that have something behind them */
  .tabs button.none { color:var(--ink-3); opacity:.6; }
  .tabs button .ic { font-size:1.05em; }
  /* Nine named tabs plus a mark each run to three lines in the ~660px pane a
     900px window leaves -- and 900px is the width Chrome Remote Desktop hands
     Jason. Narrow, only the tab you are on says its name; the rest keep their
     mark, and hovering still names them. */
  @media (max-width:1100px) {
    .tabs button:not([aria-selected="true"]) .tl { display:none; }
    .tabs button:not([aria-selected="true"]) { padding:.35rem .5rem; }
    .tabs button .ic { font-size:1.15em; }
  }

  .panebody { overflow:auto; min-height:0; flex:1; container-type:inline-size; }
  /* Project Info: details beside the directory when the pane has room for both,
     one above the other when it does not -- which, through Chrome Remote
     Desktop at about 900px, it does not. Measured on the pane, not the window,
     because the project rail beside it takes a share of the window either way. */
  .pinfo { display:grid; grid-template-columns:minmax(0,1fr); gap:1.6rem 2.2rem; align-items:start; }
  @container (min-width:60rem) { .pinfo { grid-template-columns:minmax(21rem,30rem) minmax(0,1fr); } }
  .catedit { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; min-height:2rem; }
  .catedit .cat { display:inline-flex; align-items:center; gap:.25rem; }
  .catx { all:unset; cursor:pointer; font-size:.9rem; line-height:1; padding:0 .15rem; color:var(--ink-3); }
  .catx:hover, .catx:focus-visible { color:var(--st-critical); }
  /* Where the job is (0070). Neutral on purpose: the phase colours come after
     the record they colour, not before it. */
  .stage { border:1px solid var(--rule); background:var(--surface); padding:.7rem .85rem; margin:0 0 1.1rem; }
  .stage__strip { display:flex; flex-wrap:wrap; gap:.25rem; margin:0 0 .5rem; }
  .stage__strip span { font-size:.74rem; font-weight:600; letter-spacing:.05em; padding:.32rem .5rem;
                       border:1px solid var(--rule); color:var(--ink-3); }
  .stage__strip span.past { color:var(--ink-2); background:var(--st-wash); }
  .stage__strip span.co   { margin-left:.6rem; }   /* AS: a change order, not the next step */
  /* A job's stage in colour (0072; Sheet 24). Each stage's colour is the firm's
     own, put into --stg by the .stc-XX rules stageCss() writes at sign-in from
     the firm's stage list; the rules here only say where it goes. The edge
     carries the stage at full strength and the inside is shaded, so text keeps
     its own colour in either theme -- Jason's design, for the dark theme he
     works in. The code is always printed: nothing rests on colour alone. */
  .stc { --stg:var(--ink-3); --stg-wash:color-mix(in srgb, var(--stg) var(--stg-mix), var(--surface)); }
  .stc-none { --stg:var(--rule); }
  .ptitle { border:3px solid var(--stg); background:var(--stg-wash); border-radius:5px;
            padding:.45rem .7rem .5rem; margin:0 0 .6rem; }
  .ptitle.dashed { border-style:dashed; }
  .ptitle.stc-none { border-width:1px; background:transparent; }
  .ptitle h2 { margin:0; }
  .stgbox { display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
            padding:.26rem .45rem; border:2px solid var(--stg); border-radius:3px; margin-left:.6rem;
            vertical-align:.2em; color:var(--ink); white-space:nowrap; }
  .stgcode { display:inline-block; min-width:2.2rem; text-align:center; font-size:.62rem; font-weight:700;
             letter-spacing:.05em; padding:.14rem .25rem; border:2px solid var(--stg); border-radius:3px;
             margin-right:.45rem; color:var(--ink); vertical-align:.08em; line-height:1.2; }
  .stgcode.stc-none { color:var(--ink-3); }
  .stgbox.dashed, .stgcode.dashed { border-style:dashed; }
  /* a filled stage -- AS, a change order -- is the one solid box on the page:
     white in the dark theme, black in the light (0073) */
  .stgbox.filled, .stgcode.filled { background:var(--stg); color:var(--stg-ink); }
  .jobrow.stc:not(.stc-none) { box-shadow:inset 5px 0 0 var(--stg); }
  tr.stc:not(.stc-none) > td:first-child { box-shadow:inset 5px 0 0 var(--stg); }
  .stage__strip span.stc { border:2px solid var(--stg); color:var(--ink); }
  .stage__strip span.stc.dashed { border-style:dashed; }
  .stage__strip span.now { background:var(--stg-wash); }
  /* a filled stage is filled wherever it appears, current or not -- white with
     black letters in dark, black with white letters in light (Jason, 1 Oct);
     when it IS the current stage, a ring around it says so */
  .stage__strip span.filled { background:var(--stg); color:var(--stg-ink); }
  .stage__strip span.filled.now { outline:2px solid var(--stg); outline-offset:2px; }
  /* Only the stage the job is in is bright; the rest stay in their own colours,
     muted, so the strip still reads as the legend (Jason, 2 Oct). A job with no
     stage recorded has every box muted. */
  .stage__strip span:not(.now) { opacity:.42; }
  .stage__strip span.now { font-weight:700; }
  .stage__now { margin:0 0 .5rem; font-size:.9rem; color:var(--ink-2); }
  .stage__move { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.5rem 0 .2rem; }
  .stage__move input[type=text] { flex:1 1 10rem; min-width:0; }
  .stage__fit { width:100%; font-size:.85rem; border-collapse:collapse; margin-top:.4rem; }
  .stage__fit td { padding:.25rem .4rem .25rem 0; border-top:1px solid var(--rule-soft); vertical-align:top; }
  .stage__fit td.n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .stage p.muted { font-size:.85rem; margin:.45rem 0 0; }
  .stage__who { margin-top:.7rem; font-size:.85rem; }
  /* flagged charges (0100) */
  .chg-open { all:unset; cursor:pointer; color:var(--accent); font-size:.78rem; margin-left:.4rem; }
  .chg-open:hover { text-decoration:underline; }
  .chg-n { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
           color:var(--st-critical); border:1px solid var(--st-critical); border-radius:3px; padding:0 .3rem; margin-left:.35rem; }
  .chg { margin-top:.5rem; border:1px solid var(--rule); border-radius:6px; padding:.5rem .7rem; background:var(--surface); }
  .chg h4 { margin:0 0 .35rem; font-size:.86rem; display:flex; gap:.5rem; align-items:baseline; }
  .chg ul { list-style:none; margin:0; padding:0; max-height:22rem; overflow:auto; }
  .chg li { padding:.35rem 0; border-top:1px solid var(--rule); font-size:.83rem; }
  .chg li:first-child { border-top:0; }
  .chg li.flagged { box-shadow:inset 3px 0 0 var(--st-critical); padding-left:.5rem; }
  .chg .row1 { display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
  .chg .row1 .grow { flex:1; }
  .chg .why { color:var(--ink-2); font-size:.8rem; margin-top:.15rem; overflow-wrap:anywhere; }
  .chg .act { display:flex; gap:.35rem; margin-top:.3rem; flex-wrap:wrap; }
  .chg .act input { flex:1; min-width:10rem; }
  .tscell.tsflag { outline:2px solid var(--st-critical); outline-offset:-2px; }
  .tsflags { border:1px solid var(--st-critical); border-left-width:4px; border-radius:6px; padding:.5rem .8rem; margin:0 0 .6rem;
             background:var(--surface); font-size:.85rem; }
  .tsflags > div + div { margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--rule); }
  .tsflags .act { display:flex; gap:.35rem; margin-top:.3rem; flex-wrap:wrap; }
  .tsflags .act input { flex:1; min-width:10rem; }
  .foldhd { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; cursor:pointer; list-style:none;
            font-weight:600; color:var(--ink-2); padding:.35rem 0; }
  .foldhd::-webkit-details-marker { display:none; }
  .foldhd::before { content:"\25b8"; margin-right:.35rem; color:var(--ink-3); }
  details[open] > .foldhd::before { content:"\25be"; }
  .foldhd > span:first-child { flex:1; }
  .foldsum { font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .lg { margin:0 0 1.1rem; }
  .ledgerhd { display:flex; width:100%; justify-content:space-between; align-items:center; gap:.6rem; text-align:left;
              background:var(--surface); border:1px solid var(--rule); border-radius:9px; padding:.55rem .75rem;
              font:inherit; font-size:.85rem; font-weight:600; color:var(--ink-2); cursor:pointer; }
  .ledgerhd:hover { border-color:var(--accent); color:var(--ink); }
  .ledgerhd .lg-sum { display:block; font-weight:400; color:var(--ink-3); font-size:.8rem; margin-top:.1rem; }
  .ledgerhd .age { font-weight:400; color:var(--ink-3); font-size:.78rem; white-space:nowrap; }
  .lg-act { margin-top:.45rem; }
  .ledger { border-left:2px solid var(--rule); margin:.6rem 0 0 .5rem; padding-left:.75rem; }
  .lg-e { padding:.5rem 0; border-bottom:1px solid var(--rule-soft); font-size:.85rem; }
  .lg-e:last-child { border-bottom:0; }
  .lg-e .nh { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.75rem; color:var(--ink-3); margin-bottom:.15rem; }
  .lg-e .who { font-weight:600; color:var(--ink-2); }
  .lg-e .badge { font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; border:1px solid var(--rule); border-radius:4px; padding:0 .3rem; }
  .lg-e.lg-out .badge { border-color:var(--accent); color:var(--accent); }
  .lg-e.sys { color:var(--ink-3); font-style:italic; }
  .lg-corr { color:var(--ink-3); font-size:.8rem; }
  .lg-diff s { opacity:.7; margin-right:.3rem; }
  .deliv { font-size:.85rem; }
  .cl { margin-top:-.35rem; font-size:.85rem; }
  .cl .btn { font-size:.8rem; }
  .pinfo__form > #pHours { margin-top:1.4rem; }
  .stage--hours > p.muted:first-child { margin-top:0; }
  /* budget by phase (02-budget.js): over plan is said in words, and marked */
  .bud__head { margin:0 0 .3rem; font-size:.95rem; }
  .bud__table th { font-weight:600; text-align:left; padding:.25rem .4rem .25rem 0; }
  .bud__table th.n { text-align:right; }
  .bud__code { display:inline-block; min-width:2.2em; text-align:center; padding:0 .25em; border:2px solid var(--stg, var(--rule)); }
  .bud__table tr.is-over td { color:var(--st-critical); }
  .bud__over { font-size:.8rem; font-weight:600; }
  /* fits the job pane at ~470 px with the dollars: the phase's name on its own small line, a scroll inside the block only as a last resort */
  .stage--budget { overflow-x:auto; }
  .bud__table th, .bud__table td { padding-right:.3rem; }
  .bud__table tr > :last-child { padding-right:0; }
  .bud__desc { display:block; font-size:.75rem; color:var(--muted); line-height:1.2; margin-top:.1rem; }
  .bud__other, .bud__money, .bud__src { margin:.45rem 0 0; font-size:.85rem; }
  .bud__src a { color:var(--accent); font-weight:600; text-decoration:none; }
  .bud__src a:hover { text-decoration:underline; }
  .cl-state { margin:0 0 .5rem; }
  .cl-acts { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
  .cl-panel { border:1px solid var(--rule); border-radius:6px; padding:.7rem; margin-top:.6rem; display:flex; flex-direction:column; gap:.55rem; }
  .cl-check { display:flex; gap:.45rem; align-items:flex-start; }
  .cl-as { display:flex; flex-direction:column; gap:.25rem; }
  .cl-note { display:flex; flex-direction:column; gap:.25rem; }
  .cl-note textarea { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.4rem .5rem; }
  .cl-hist { margin-top:.6rem; font-size:.82rem; }
  .cl-hist ul { margin:.3rem 0 0; padding-left:1.1rem; }
  .closereq { font-family:inherit; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
              color:var(--st-critical, #c62828); border:1px solid currentColor; border-radius:3px; padding:0 .3rem; margin-left:.35rem; white-space:nowrap; }
  .deliv > p.muted { margin:.2rem 0 .4rem; }
  .dm { border-top:1px solid var(--rule-soft); padding:.35rem 0; }
  .dm__h { display:flex; justify-content:space-between; gap:.6rem; }
  .dm__who { font-size:.8rem; }
  .dm ul { margin:.2rem 0 0; padding-left:1.1rem; }
  .dm__none { color:var(--ink-3); font-size:.8rem; font-style:italic; }
  .pfold { display:flex; gap:.5rem; align-items:center; min-width:0; }
  .pfold code { flex:1; min-width:0; overflow-wrap:anywhere; font-size:.82rem; padding:.35rem .5rem;
                border:1px solid var(--rule-soft); border-radius:6px; }
  .pfold__why { font-size:.8rem; margin-top:.25rem; }
  .pfold__open { flex:1; min-width:0; text-align:left; overflow-wrap:anywhere; font-family:ui-monospace, Consolas, monospace; font-size:.82rem;
                 padding:.35rem .5rem; border:1px solid var(--rule-soft); border-radius:6px; }
  .stage details { margin-top:.5rem; font-size:.85rem; }
  .stage details li { margin:.2rem 0; }
  /* A real background, not transparent: Chrome draws a styled dropdown's list
     from the control's own colours, and a transparent one falls back to white --
     which put the dark theme's light-grey text on a white list, unreadable. */
  #f_catadd { font:inherit; font-size:.8rem; padding:.2rem .35rem; border:1px dashed var(--rule);
              border-radius:4px; background:var(--surface); color:var(--ink); }
  #f_catadd option { background:var(--surface); color:var(--ink); }
  .dirbar { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:0 0 .9rem; }
  .dirbar a.btn { font:inherit; font-size:.82rem; color:var(--ink); background:var(--surface); text-decoration:none;
                  border:1px solid var(--rule); border-radius:5px; padding:.3rem .6rem; cursor:pointer; }
  .dirbar a.btn:hover { border-color:var(--accent); }
  .dirbar a.btn[aria-disabled="true"] { opacity:.45; pointer-events:none; }
  .dirbar button.btn:disabled { opacity:.45; cursor:default; }
  .dirbar__n { font-size:.78rem; color:var(--ink-3); }
  .dirtask { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0 0 1rem;
             padding:.6rem .7rem; border:1px solid var(--accent); border-radius:6px; background:var(--accent-soft); }
  .dirtask[hidden] { display:none; }
  .dirtask input { font:inherit; font-size:.85rem; padding:.35rem .5rem; border:1px solid var(--rule);
                   border-radius:5px; background:var(--surface); color:var(--ink); }
  #dt_subject { flex:1 1 14rem; min-width:0; }
  .dirtask .note { flex-basis:100%; margin:0; font-size:.74rem; }
  .dirwrap { overflow-x:auto; }
  .dirtbl .pick { width:2rem; text-align:center; cursor:default; }
  /* a phone number broken over two lines reads as two numbers */
  .dirtbl td.muted { white-space:nowrap; }
  /* the field is as wide as the role in it: "General Contractor" was being cut to
     "General Contracto" by a fixed width */
  .rolepick { font:inherit; font-size:.84rem; field-sizing:content; min-width:11.5rem; max-width:100%; padding:.18rem .35rem;
              border:1px solid transparent; border-radius:4px; background:transparent; color:var(--ink); }
  .rolepick:hover { border-color:var(--rule); }
  .rolepick:focus { border-color:var(--accent); background:var(--surface); outline:none; }
  .rolepick::placeholder { color:var(--ink-3); }

  .unread { font-weight:700; }
  .seen { color:var(--good); font-size:.6rem; margin-right:.35rem; vertical-align:.1em; }
  .dot-unread { display:inline-block; width:.45rem; height:.45rem; border-radius:50%; background:var(--accent); margin-right:.35rem; }
  .muted { color:var(--ink-3); }
  .attach::after { content:"
F4CE"; }
  .dl-yes { color:#1B6B4A; font-weight:700; }
  .dl-no  { color:#8A5D0F; font-weight:700; }
  /* shared grid: same search / sort / filter behaviour as the status board */
  /* Search and headers stay on screen. Scrolling a 1,600-row list used to take
     both away, so the only way back to the search box was to scroll to the top. */
  .gbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; padding:.6rem 1rem;
          border-bottom:1px solid var(--rule); background:var(--surface);
          position:sticky; top:var(--topbar-h,45px); z-index:4; }
  .gbar input[type=search], .gbar select {
    font:inherit; font-size:.83rem; padding:.35rem .55rem; border-radius:6px;
    border:1px solid var(--rule); background:var(--surface); color:var(--ink); }
  .gbar input[type=search] { min-width:17rem; flex:1 1 17rem; max-width:30rem; }
  .gbar input:focus-visible, .gbar select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .gcount { font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .gcount b { color:var(--ink); }
  .gclear { font:inherit; font-size:.78rem; padding:.28rem .7rem; border-radius:999px;
            border:1px solid var(--rule); background:var(--surface); color:var(--ink-2); cursor:pointer; }
  .gclear:hover { border-color:var(--accent); color:var(--ink); }
  /* The list scrolls inside its own pane rather than scrolling the page, so the
     toolbar above it and the headers on it are always there.
     `overflow-x:auto` alone does not work: pairing it with an implied
     `overflow-y:visible` is illegal, so the browser promotes Y to `auto` and the
     element becomes a scroll container that never scrolls -- which pins sticky
     headers to a box that never moves. Bounding the height makes it scroll for
     real, and then `top:0` sticks to the pane. */
  .gwrap { overflow:auto;
           max-height:calc(100vh - var(--gwrap-top,90px) - var(--gnote-h,0px)); }
  .gwrap table.list thead th { position:sticky; top:0; z-index:3; }
  /* the address book: five columns fixed so the email gets its share at 900px */
  [data-grid="gAddressBook"] table.list { table-layout:fixed; width:100%; }
  [data-grid="gAddressBook"] th:nth-child(1) { width:21%; }
  [data-grid="gAddressBook"] th:nth-child(2) { width:24%; }
  [data-grid="gAddressBook"] th:nth-child(3) { width:27%; }
  [data-grid="gAddressBook"] th:nth-child(4) { width:19%; }
  [data-grid="gAddressBook"] th:nth-child(5) { width:9%; }
  table.list th.s { cursor:pointer; position:sticky; top:0; z-index:2; white-space:nowrap; user-select:none; }
  table.list th.s:hover { color:var(--ink); }
  table.list th .sc { opacity:.35; font-size:.75em; margin-left:.25em; }
  table.list th.on .sc { opacity:1; color:var(--accent); }
  table.list th.on { color:var(--accent); }
  .gempty { padding:2rem 1.2rem; color:var(--ink-3); font-size:.9rem; }
  /* a search's close matches through typos, after its exact ones (17-search.js) */
  tr.gnear td, .wjnear { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
    padding:.7rem .8rem .3rem; border-top:1px solid var(--line); background:transparent; }
  /* the marker at the end of a list drawn a screenful at a time */
  [data-more], tr[data-more] td { height:1px; padding:0; border:0; }
  .form { padding:1rem 1.2rem; max-width:44rem; display:grid; gap:.75rem; }
  .form .row { display:grid; grid-template-columns:9rem 1fr; gap:.8rem; align-items:center; }
  .form label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700; }
  .form input, .form select, .form textarea {
    font:inherit; font-size:.88rem; padding:.4rem .55rem; border:1px solid var(--rule);
    border-radius:5px; background:var(--surface); color:var(--ink); width:100%; }
  .form textarea { min-height:4.5rem; resize:vertical; }
  .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
    outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  .actions { display:flex; gap:.5rem; align-items:center; margin-top:.4rem; }
  .primary { font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; background:var(--accent);
             color:#fff; border:0; border-radius:5px; padding:.42rem .9rem; }
  .primary:disabled { opacity:.55; cursor:default; }
  .saved { font-size:.82rem; color:#1B6B4A; font-weight:600; }
  .toolbar { padding:.5rem 1rem; border-bottom:1px solid var(--rule); background:var(--surface);
             display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
  .ans { width:100%; font:inherit; font-size:.82rem; padding:.35rem .5rem; border:1px solid var(--rule);
         border-radius:4px; background:var(--surface); color:var(--ink); }
  .linkish { all:unset; cursor:pointer; color:var(--accent); font-weight:600; font-size:.8rem; }
  .linkish:hover { text-decoration:underline; }
  .detail { padding:1.1rem 1.2rem; }
  .detail dl { display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; margin:.9rem 0 0; font-size:.87rem; max-width:34rem; }
  .detail dt { color:var(--ink-3); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; padding-top:.15rem; }
  .detail dd { margin:0; }
  .msg { padding:1.4rem 1.2rem; color:var(--ink-2); }
  .note { padding:.7rem 1.2rem 1.6rem; font-size:.76rem; color:var(--ink-3); }
  .empty { padding:2rem 1.2rem; color:var(--ink-3); font-size:.9rem; }
  .login-wrap { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:50; }
  .login { background:var(--surface); border:1px solid var(--rule); border-radius:8px; box-shadow:var(--shadow);
           padding:1.8rem 1.9rem; width:min(23rem,92vw); }
  .login h1 { margin:0; font-size:1.3rem; letter-spacing:-.01em; }
  .login .sub { color:var(--ink-3); font-size:.8rem; margin:.2rem 0 1.3rem; text-transform:uppercase; letter-spacing:.09em; font-weight:600; }
  .login label { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
                 color:var(--ink-3); font-weight:700; margin:.85rem 0 .25rem; }
  .login input { width:100%; font:inherit; font-size:.9rem; padding:.5rem .6rem; border-radius:5px;
                 border:1px solid var(--rule); background:var(--surface); color:var(--ink); }
  .login input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  .login button { width:100%; margin-top:1.2rem; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
                  background:var(--accent); color:#fff; border:0; border-radius:5px; padding:.55rem; }
  .login button:disabled { opacity:.6; cursor:default; }
  .login .err { margin-top:.9rem; font-size:.83rem; color:#b3402f; background:#f7e6e3;
                border:1px solid #e3b7ae; border-radius:5px; padding:.5rem .6rem; }
  .login .err[hidden] { display:none; }
  .login .ms-way[hidden] { display:none; }
  .login .ms-way .or { display:block; text-align:center; margin:.9rem 0 .5rem; font-size:.72rem; color:var(--ink-3);
                       text-transform:uppercase; letter-spacing:.09em; }
  .login .ms-signin { display:block; text-align:center; font-size:.9rem; font-weight:600; text-decoration:none; color:var(--ink);
                      border:1px solid var(--rule); border-radius:5px; padding:.5rem; background:var(--surface); }
  .login .ms-signin:hover, .login .ms-signin:focus-visible { border-color:var(--accent); outline:none; }
  /* On a phone the way in should be a strip along the top, not a column that
     fills the first screen before any of the work is visible. */
  @media (max-width:52rem) {
    /* minmax(0,1fr), not 1fr: a plain 1fr track is at least as wide as its
       widest content, so the row of navigation buttons would push the whole
       page sideways instead of scrolling inside its own strip */
    body { grid-template-columns:minmax(0,1fr); }
    aside.side { position:sticky; top:0; z-index:30; height:auto; overflow:visible;
                 flex-direction:row; align-items:center; gap:.5rem; padding:.4rem .6rem; }
    /* .brand is given width:100% further down for the column layout; in a row
       it must size to its own text or it eats the whole strip */
    aside.side .brand { font-size:.85rem; flex:0 0 auto; padding:0; width:auto;
                        white-space:nowrap; }
    .brand span { display:none; }
    nav { flex-direction:row; flex:1; min-width:0; overflow-x:auto; gap:.15rem;
          scrollbar-width:none; -ms-overflow-style:none; }
    nav::-webkit-scrollbar { display:none; }
    nav button { white-space:nowrap; padding:.3rem .5rem; font-size:.8rem; }
    aside.side .who { margin:0; flex:0 0 auto; }
    .navgrp { display:none; }
    /* the bell stays, in the row, without its heading */
    .navgrp[data-grp="mine"] { display:flex; flex:0 0 auto; padding:0 .2rem; }
    .navgrp[data-grp="mine"] > span { display:none; }
    .navfoot { margin:0; flex:0 0 auto; }
    aside.side .who { display:flex; align-items:center; gap:.3rem; border-top:0; padding-top:0; }
    .signedin { width:auto; padding:.2rem; }
    .signedin b, .signedin .chev { display:none; }
    .plist { max-height:11rem; }
  }