/* ---- analytics ---- */
  .an { display:grid; gap:1rem; }
  .an__row { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); align-items:start; }
  .card { border:1px solid var(--line); border-radius:8px; background:var(--card); padding:.9rem 1.05rem 1rem; }
  .card > h3 { margin:0 0 .15rem; font-size:.95rem; }
  .card__q { margin:0 0 .8rem; font-size:.78rem; color:var(--muted); }
  .card--wide { grid-column:1 / -1; }
  .an svg { display:block; width:100%; height:auto; overflow:visible; }
  .an .ax { stroke:var(--line); stroke-width:1; }
  .an .gl { stroke:var(--line); stroke-width:1; stroke-dasharray:2 3; opacity:.7; }
  .an text { fill:var(--ink); opacity:.72; font-size:12px; font-family:inherit; }
  .an text.v { fill:var(--ink); opacity:1; font-size:12px; font-weight:600; }
  .an .barf { fill:var(--accent); opacity:.75; }
  .an .barf2 { fill:var(--accent); opacity:.32; }
  .an .lin { fill:none; stroke:var(--accent); stroke-width:2; }
  .an .dot { fill:var(--accent); }
  .scoretab { width:100%; border-collapse:collapse; font-size:.85rem; }
  .scoretab th { text-align:left; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
                 color:var(--muted); font-weight:600; padding:.3rem .5rem .35rem 0; border-bottom:1px solid var(--line); white-space:nowrap; }
  .scoretab td { padding:.4rem .5rem .4rem 0; border-bottom:1px solid var(--line); vertical-align:middle; }
  .scoretab td.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .scoretab tr:last-child td { border-bottom:none; }
  .meter { display:block; height:.45rem; border-radius:2px; background:var(--soft); overflow:hidden; min-width:4rem; }
  .meter i { display:block; height:100%; background:var(--accent); }
  .meter i.warn { background:#c9803a; }
  .meter i.bad  { background:#b3402f; }
  .an__note { font-size:.78rem; color:var(--muted); margin:.5rem 0 0; }
  .tabs { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin:0 0 .8rem; }
  .tabs__n { font-size:.76rem; color:var(--muted); margin-left:auto; }
  .drill { margin:.9rem 0 0; padding:.8rem .9rem; border:1px solid var(--line); border-left:3px solid var(--accent);
           border-radius:0 5px 5px 0; background:var(--soft); }
  .drill__h { display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:var(--muted); margin-bottom:.5rem; }
  .drill__h b { color:var(--ink); }
  .drill__h .btn { margin-left:auto; }
  button.bl { all:unset; cursor:pointer; }
  .tabbar { display:flex; gap:.7rem; align-items:center; margin:0 0 .7rem; }
  td.sbact { white-space:nowrap; }
  td.sbact .linkish { font-size:.76rem; }
  .anlim { margin:0; padding-left:1.05rem; font-size:.82rem; color:var(--muted); }
  .anlim li { margin-bottom:.5rem; }
  .anlim b { color:var(--ink); font-weight:600; }
  .an__flag { border-left:3px solid #c9803a; background:var(--soft); padding:.55rem .75rem;
              font-size:.82rem; color:var(--ink-2, var(--muted)); border-radius:0 4px 4px 0; margin:.6rem 0 0; }
  .kpi { display:flex; gap:1.4rem; flex-wrap:wrap; align-items:baseline; margin:0 0 .2rem; }
  .kpi b { font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; }
  .kpi span { font-size:.75rem; color:var(--muted); margin-left:.3rem; }
  /* A record sheet, opened from any row. Slides in from the right so the list
     stays where it was and the trail feels like drilling in rather than leaving. */
  .recdlg { border:0; border-left:1px solid var(--rule); background:var(--surface); color:var(--ink);
            margin:0 0 0 auto; height:100vh; max-height:100vh; width:min(34rem,96vw);
            padding:0; box-shadow:var(--shadow); }
  .recdlg::backdrop { background:rgba(0,0,0,.42); }
  .recdlg__bar { position:sticky; top:0; display:flex; align-items:center; gap:.5rem;
                 padding:.6rem .9rem; border-bottom:1px solid var(--rule); background:var(--surface); }
  .recdlg__crumb { flex:1; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
  #recBody { padding:1rem 1.1rem 2.4rem; }
  .rec__act { margin:0 0 .8rem; }
  .rec__act .btn { text-decoration:none; display:inline-block; }
  .rec__t { font-size:1.15rem; font-weight:700; margin:0 0 .15rem; line-height:1.3; }
  .rec__s { font-size:.86rem; color:var(--ink-2); margin:0 0 1rem; }
  .rec__f { display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; font-size:.87rem; margin:0 0 1.1rem; }
  .rec__f dt { font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); padding-top:.22rem; }
  .rec__f dd { margin:0; color:var(--ink); word-break:break-word; }
  .rec__body { white-space:pre-wrap; font-size:.9rem; line-height:1.55; background:var(--bg);
               border:1px solid var(--rule-soft); border-radius:5px; padding:.7rem .8rem; margin:0 0 1.1rem; }
  .rec__g { margin:0 0 1.1rem; }
  .rec__g h4 { font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
               margin:0 0 .4rem; font-weight:700; }
  .rec__g ul { list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule-soft);
               border:1px solid var(--rule-soft); border-radius:5px; overflow:hidden; }
  .rec__g li { background:var(--surface); }
  .rec__g button, .rec__g span.flat { display:block; width:100%; text-align:left; font:inherit;
               font-size:.86rem; border:0; background:none; color:var(--ink); padding:.45rem .6rem; }
  .rec__g button { cursor:pointer; }
  .rec__g button:hover { background:var(--accent-soft); }
  .rec__g em { display:block; font-style:normal; font-size:.76rem; color:var(--ink-3); }
  .rec__note { font-size:.82rem; color:var(--ink-2); border-left:3px solid var(--accent);
               background:var(--accent-soft); padding:.6rem .75rem; }
  .docdlg { border:1px solid var(--rule); border-radius:8px; background:var(--surface); color:var(--ink);
            max-width:38rem; padding:1.1rem 1.2rem; box-shadow:var(--shadow); }
  .docdlg::backdrop { background:rgba(0,0,0,.45); }
  #pwDlg input { width:100%; font:inherit; font-size:.9rem; padding:.4rem .55rem; margin-bottom:.2rem;
                 border:1px solid var(--rule); border-radius:4px; background:var(--bg); color:var(--ink); }
  #pwDlg .docdlg__k { margin:.5rem 0 .15rem; }
  #njDlg { width:min(34rem, calc(100vw - 2rem)); }
  #shDlg { width:min(32rem, calc(100vw - 2rem)); }
  #shGet { text-decoration:none; }
  /* A member of staff who has left (Jason, 2 Oct): greyed and edged in red,
     still legible, never mistaken for somebody who works here. */
  .gone { background:var(--surface-2) !important; box-shadow:inset 4px 0 0 var(--st-critical); color:var(--ink-2); }
  .ccard__face.gone { border:2px solid var(--st-critical); border-radius:6px; box-shadow:none; padding-top:.6rem; }
  .ccard__gone { margin:0 0 .7rem; padding:.45rem .6rem; font-size:.82rem; color:var(--ink);
                 border-left:3px solid var(--st-critical); background:var(--surface); text-align:left; }
  .pill.gone, .chip.gone { color:var(--st-critical); border-color:var(--st-critical); background:transparent; }
  tr.gone > td:first-child { box-shadow:inset 4px 0 0 var(--st-critical); }
  /* selected or not, a leaver's row keeps the red edge */
  .crow.gone, .crow.gone.on, .cpl li.gone { box-shadow:inset 4px 0 0 var(--st-critical) !important; }
  .btn.danger { color:var(--st-critical); border-color:var(--st-critical); }
  .ct__m { display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .6rem; padding:.3rem 0; }
  .ct__m + .ct__m { border-top:1px solid var(--rule-soft); }
  .ct__mn { font-weight:600; }
  .ct__acts { display:flex; flex-wrap:wrap; gap:.35rem; flex-basis:100%; }
  .ct__fixed { margin:.35rem 0 0; font-size:.9rem; }
  .ct__img { display:flex; gap:1rem; align-items:center; }
  .ct__img .ccard__av { flex:0 0 auto; }
  .ct__imgk { display:block; font-size:.74rem; color:var(--ink-2); margin-bottom:.25rem; }
  .ct__img .ct__hint { margin:.3rem 0 0; }
  .ccard__av.pic { overflow:hidden; padding:0; }
  .ccard__av.pic img { width:100%; height:100%; object-fit:cover; display:block; }
  .ccard__av.co.pic { background:#fff; }
  .ccard__av.co.pic img { object-fit:contain; }
  #imDlg { width:min(54rem, calc(100vw - 2rem)); max-width:none; max-height:calc(100vh - 2rem); padding:0; overflow:hidden; }
  #imDlg[open] { display:flex; flex-direction:column; }
  .im__sum { margin-left:auto; font-size:.8rem; color:var(--ink-2); }
  .im__body { flex:1 1 auto; min-height:0; overflow:auto; padding:1rem 1.25rem; }
  .im__body > p { margin:0 0 .8rem; font-size:.86rem; color:var(--ink-2); max-width:44rem; }
  .im__body input[type="file"] { font:inherit; font-size:.86rem; }
  .im__foot { display:flex; gap:.5rem; align-items:center; padding:.75rem 1.25rem; border-top:1px solid var(--rule-soft); }
  .im__say { font-size:.82rem; color:var(--ink-2); }
  .im__say.bad { color:var(--st-critical); }
  .im__tools { display:flex; gap:.5rem; align-items:center; margin:0 0 .6rem; font-size:.8rem; color:var(--ink-3); }
  .imrow { display:grid; grid-template-columns:1.6rem 1fr; gap:.1rem .4rem; padding:.6rem 0; border-top:1px solid var(--rule-soft); }
  .imrow:first-of-type { border-top:0; }
  .imrow.off .imrow__main { opacity:.55; }
  .imrow input[type="checkbox"] { width:1rem; height:1rem; margin:.15rem 0 0; accent-color:var(--accent); }
  .imrow__name { display:flex; flex-wrap:wrap; gap:.15rem .5rem; align-items:baseline; }
  .imrow__name b { font-size:.92rem; }
  .imrow__name span { font-size:.8rem; color:var(--ink-3); }
  .imrow__why { margin:.15rem 0 0; font-size:.8rem; color:var(--ink-2); }
  .imrow__fx { list-style:none; margin:.35rem 0 0; padding:0; display:grid; gap:.2rem; font-size:.82rem; }
  .imrow__fx label { display:inline-flex; gap:.4rem; align-items:baseline; cursor:pointer; }
  .imrow__fx s { color:var(--ink-3); }
  .imrow__gap { margin:.3rem 0 0; font-size:.78rem; color:var(--ink-3); }
  .imrow__err { margin:.3rem 0 0; font-size:.8rem; color:var(--st-critical); }
  .shlist { display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; margin:0 0 .9rem; font-size:.86rem; }
  .shlist dt { color:var(--ink-3); }
  .shlist dd { margin:0; overflow-wrap:anywhere; }
  .shkept { margin:0 0 .9rem; font-size:.84rem; color:var(--ink-2); }
  .shbefore { list-style:none; margin:0 0 .9rem; padding:0; font-size:.8rem; color:var(--ink-2); display:grid; gap:.2rem; }
  .shbefore span { color:var(--ink-3); }
  #njDlg input, #njDlg select { width:100%; font:inherit; font-size:.9rem; padding:.4rem .55rem; margin-bottom:.2rem;
                 border:1px solid var(--rule); border-radius:4px; background:var(--bg); color:var(--ink); }
  #njDlg .docdlg__k { margin:.55rem 0 .15rem; }
  #njDlg .nj2 { display:grid; grid-template-columns:1fr 1fr; gap:0 .8rem; }
  #njMsg:empty { display:none; }
  .njsays { margin:.15rem 0 0; font-size:.8rem; color:var(--ink-3); min-height:1.1rem; }
  .njsays.bad { color:var(--st-critical); }
  .njsays button { all:unset; cursor:pointer; color:var(--accent); text-decoration:underline; margin-left:.4rem; }
  #njMsg { color:var(--st-critical); }
  .docdlg h3 { margin:0 0 .7rem; font-size:1rem; }
  .docdlg__k { margin:0 0 .2rem; font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
  .docpath { margin:0 0 .8rem; font-family:ui-monospace,Consolas,monospace; font-size:.8rem;
             background:var(--bg); border:1px solid var(--rule-soft); border-radius:4px;
             padding:.5rem .6rem; word-break:break-all; user-select:all; }
  .docdlg__why { margin:0 0 .9rem; font-size:.84rem; color:var(--ink-2); }
  .docdlg__acts { display:flex; gap:.5rem; align-items:center; }
  .docdlg__ok { font-size:.78rem; color:#1B6B4A; }
  .doclist li { padding:.05rem 0; }
  .doclist li + li { border-top:1px dotted var(--rule-soft); }
  .xref { font-size:.72rem; color:var(--accent); margin-top:.2rem; }
  .kindtag { font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
  html { font-size:calc(16px * var(--ui)); }
  body {
    margin:0; background:var(--bg); color:var(--ink); min-height:100vh;
    font-family:"Segoe UI",-apple-system,system-ui,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.45; -webkit-font-smoothing:antialiased;
    display:grid; grid-template-columns:15rem 1fr;
  }
  aside.side {
    background:var(--side); color:#dbe5ee; padding:.9rem .8rem; display:flex; flex-direction:column;
    gap:1rem; position:sticky; top:0; height:100vh; overflow:auto;
  }
  .brand { font-weight:700; font-size:1rem; letter-spacing:-.01em; color:#fff; padding:0 .3rem; }
  .brand span { display:block; font-weight:400; font-size:.68rem; color:#8fa3b6; text-transform:uppercase; letter-spacing:.09em; margin-top:.15rem; }
  nav { display:flex; flex-direction:column; gap:.15rem; }
  nav button { all:unset; cursor:pointer; padding:.45rem .55rem; border-radius:5px; font-size:.88rem;
               color:#c3d2df; display:flex; align-items:center; gap:.55rem; }
  nav button:hover { background:rgba(255,255,255,.07); color:#fff; }
  nav button[aria-current="page"] { background:var(--accent); color:#fff; font-weight:600; }
  nav button:focus-visible { outline:2px solid #7fc4e8; outline-offset:1px; }
  /* The first second-level item in the navigation. It is a pattern rather than
     a one-off: a sub-item belongs to a parent, appears only while that part of
     the application is open, and is indented and quieter than the lines that
     are always there. */
  nav button.subnav { position:relative; font-size:.82rem; padding-left:1.75rem; color:#9fb2c4;
                      flex-direction:row; margin:0; border-left:0; }
  /* Projects' own sub-items open and close on this (Jason, 27 Oct) */
  nav .navtog { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
                border-radius:4px; color:inherit; opacity:.75; }
  nav .navtog:hover, nav .navtog:focus-visible { opacity:1; background:rgba(255,255,255,.14); outline:none; }
  nav .navtog svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
                    transition:transform .15s ease; }
  nav .navtog[aria-expanded="true"] svg { transform:rotate(180deg); }
  nav button.subnav::before { content:"\2514"; position:absolute; left:.7rem; top:.38rem;
                              color:#5d7286; font-size:.75rem; line-height:1; }
  nav button.subnav[aria-current="page"] { background:var(--accent); color:#fff; }
  /* the parent of the open sub-item: the section you are in, not the page */
  nav button[data-section] { color:#fff; background:rgba(255,255,255,.08); font-weight:600; }
  /* A remote desktop, a split screen or a laptop reports a narrower window than
     a desk monitor. The navigation gives ground first, because a screen is for
     the work on it, not for the way in. */
  @media (max-width:1200px){ body { grid-template-columns:11rem 1fr; }
                             aside.side { padding:.8rem .5rem; } }
  /* 10rem, not 9: "Correspondence" is the longest word in the menu (14 Oct) */
  @media (max-width:900px) { body { grid-template-columns:10rem 1fr; }
                             nav button { font-size:.82rem; padding:.4rem .4rem; }
                             .brand { font-size:.9rem; } }

  /* The menu narrowed to icons, and the project list hidden (Jason, 7 Oct: on a
     screen smaller than a desk monitor but wider than a tablet, both columns
     take room the work needs). Each is a choice remembered on this computer;
     a phone keeps its own strip along the top. */
  .sidehead { display:flex; align-items:flex-start; justify-content:space-between; gap:.3rem; }
  .sidetog { all:unset; cursor:pointer; color:#9fb2c4; padding:.25rem; border-radius:5px; display:flex; flex:0 0 auto; }
  .sidetog:hover { background:rgba(255,255,255,.07); color:#fff; }
  .sidetog:focus-visible { outline:2px solid #7fc4e8; outline-offset:1px; }
  /* RDHS or its database out of reach: said plainly, across the top, until it's back */
  #outageBar { position:fixed; z-index:210; top:0; left:0; right:0; padding:.55rem 1rem; text-align:center;
               background:#8a5a00; color:#fff; font-weight:600; font-size:.9rem; box-shadow:0 2px 10px rgba(0,0,0,.3); }
  /* something on its way: a bar along the top, and rows shimmering where the screen will be */
  body::before { content:""; position:fixed; z-index:200; top:0; left:0; height:3px; width:0; opacity:0; pointer-events:none;
                 background:linear-gradient(90deg, transparent, var(--accent), transparent); transition:opacity .2s; }
  body.busy::before { opacity:1; width:40%; animation:busybar 1.1s ease-in-out infinite; }
  @keyframes busybar { 0% { left:-40%; } 100% { left:100%; } }
  .skel { padding:1rem 1.1rem; display:grid; gap:.7rem; }
  .skel__say { font-size:.8rem; color:var(--ink-3); letter-spacing:.04em; }
  .skel__row { height:.95rem; border-radius:6px;
               background:linear-gradient(90deg, var(--rule-soft) 0%, var(--rule) 40%, var(--rule-soft) 80%);
               background-size:200% 100%; animation:skel 1.3s ease-in-out infinite; }
  @keyframes skel { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
  @media (prefers-reduced-motion: reduce) { body.busy::before, .skel__row { animation:none; } body.busy::before { width:100%; } }
  /* Docs, Note, Task: three shortcuts above your name */
  .quick { display:flex; gap:.25rem; padding:.45rem .5rem .35rem; margin-top:.3rem; border-top:1px solid rgba(255,255,255,.08); }
  .quick button { all:unset; cursor:pointer; flex:1; display:flex; flex-direction:column; align-items:center; gap:.18rem;
                  font-size:.72rem; color:#c3d2df; padding:.4rem .2rem; border-radius:6px; }
  .quick button:hover, .quick button:focus-visible { background:rgba(255,255,255,.08); color:#fff; }
  .quick button[hidden] { display:none; }
  .quick .nic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  body.side-mini .quick { flex-direction:column; }
  body.side-mini .quick .nl { display:none; }
  .dhasof.late, #setDhSync.late { color:var(--st-serious); font-weight:600; }
  /* Revisions: the ledger, the sheets and their triangles */
  .rev { display:grid; gap:1.4rem; padding:.2rem 0 1rem; }
  .rev__set h3 { margin:0; font-size:1.05rem; }
  .rev__set h4 { margin:1rem 0 .4rem; font-size:.9rem; }
  .rev__set h4 .muted { font-weight:400; font-size:.8rem; }
  .rev__head { display:flex; gap:.8rem; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
  .rev__path { font-size:.76rem; overflow-wrap:anywhere; }
  .rev__acts { display:flex; gap:.4rem; flex-wrap:wrap; }
  .rev__status { margin:.5rem 0 0; font-size:.86rem; color:var(--ink-2); }
  .rev__warn { color:var(--st-serious); font-weight:600; }
  .rev__note { margin:.6rem 0; padding:.5rem .7rem; border-left:3px solid var(--st-serious); background:var(--surface); font-size:.84rem; }
  .rev__chip { display:inline-block; padding:.05rem .4rem; border:1px solid var(--rule); border-radius:4px; font-size:.78rem; margin:.1rem 0; }
  .rev .scroll { overflow-x:auto; max-width:100%; }
  .rev__ledger, .rev__sheets { width:100%; border-collapse:collapse; font-size:.86rem; }
  .rev__sheets td:nth-child(4) { min-width:12rem; max-width:20rem; overflow-wrap:anywhere; }
  .rev__sheets td:nth-child(2) { min-width:8rem; }
  .rev__ledger th, .rev__sheets th { text-align:left; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
                                     padding:.4rem .5rem; border-bottom:2px solid var(--rule); white-space:nowrap; }
  .rev__ledger td, .rev__sheets td { padding:.35rem .5rem; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
  .rev__lrow { cursor:pointer; }
  .rev__lrow:hover td, .rev__lrow.lit td, .rev__srow.lit td { background:var(--accent-soft); }
  .rev__grp td { background:var(--surface-2, var(--surface)); font-weight:700; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); }
  .rev__num { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; }
  .rev__tris { white-space:nowrap; }
  .rev__srow.late td.rev__flags { color:var(--st-serious); }
  .rev__flags { font-size:.8rem; color:var(--ink-2); min-width:11rem; }
  /* a sheet's revisions open its folder; the drawing's name opens the drawing (Jason, 26 Oct) */
  .rev__srow td.rev__tris[data-folder] { cursor:pointer; border-radius:4px; }
  .rev__srow td.rev__tris[data-folder]:hover { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
  .rev__earlier summary, .rev__other summary { cursor:pointer; font-size:.78rem; color:var(--ink-3); }
  .rev__files { margin:.3rem 0 0; padding-left:1.1rem; font-size:.84rem; }
  .rev__foot { font-size:.76rem; margin:.8rem 0 0; }
  .drv { margin-top:1.1rem; }
  .fc__lead { max-width:46rem; }
  .fc__grp { margin:1.2rem 0 .4rem; font-size:.95rem; }
  .fc__card { border:1px solid var(--rule); border-radius:6px; padding:.6rem .8rem; margin:.5rem 0; background:var(--surface); }
  .fc__why { margin:.3rem 0; font-size:.86rem; }
  .fc__opts { display:flex; flex-direction:column; gap:.2rem; margin:.3rem 0; font-size:.86rem; }
  .fc__acts { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.4rem; }
  .fc__path { font:inherit; font-size:.84rem; padding:.25rem .4rem; min-width:16rem; flex:1; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .fc__done { opacity:.7; }
  .pjtag { display:inline-block; font-size:.68rem; padding:0 .35rem; margin-left:.3rem; border-radius:3px; border:1px solid var(--rule); color:var(--ink-2); vertical-align:1px; }
  .pjtag--none { border-color:var(--st-serious, #b54); color:var(--st-serious, #b54); }
  .pjtag--doubt { border-color:var(--accent); color:var(--accent); }
  .drv h4 { margin:.2rem 0 .4rem; }
  .drv__list td { vertical-align:top; }
  .drv__none { font-size:.82rem; margin:.8rem 0 0; }
  .rev input { font:inherit; font-size:.84rem; padding:.2rem .35rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .rev__n { width:3.6rem; } .rev__d { width:100%; min-width:14rem; } .rev__sr { width:6.5rem; }
  /* a revision triangle, numbered, as on the drawings */
  .rtri { position:relative; display:inline-flex; align-items:flex-end; justify-content:center; width:1.35rem; height:1.2rem; margin-right:.12rem;
          cursor:pointer; vertical-align:-.15rem; }
  .rtri::before { content:""; position:absolute; inset:0; clip-path:polygon(50% 0, 100% 100%, 0 100%); background:var(--ink); }
  .rtri::after { content:""; position:absolute; inset:2px 2px 1.5px; clip-path:polygon(50% 0, 100% 100%, 0 100%); background:var(--surface); }
  .rtri b { position:relative; z-index:1; font-size:.62rem; line-height:1; padding-bottom:.08rem; color:var(--ink); }
  .rtri--head::after { background:var(--accent-soft); }
  /* Settings in two halves, and the gifts, cards and birthdays list */
  .setgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap:1.2rem; padding:1rem 1.1rem 2rem; align-items:start; }
  .setgrid--one { grid-template-columns:minmax(0, 40rem); }
  .setcol { display:grid; gap:.8rem; align-content:start; }
  .setgrp { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0; }
  .setsub { font-size:.8rem; font-weight:600; margin:.7rem 0 .1rem; color:var(--ink-2); }
  .occ { padding:1rem 1.1rem 2rem; }
  .occ__bar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
  .occ__bar .q { flex:1 1 16rem; margin:0; }
  .occ__prints { display:flex; gap:.4rem; flex-wrap:wrap; margin-left:auto; }
  .occ__prints .btn { text-decoration:none; }
  .occ__n { margin:.5rem 0; font-size:.8rem; }
  .occ__t { width:100%; border-collapse:collapse; font-size:.86rem; }
  .occ__t th { text-align:left; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:.45rem .5rem; border-bottom:2px solid var(--rule); white-space:nowrap; }
  .occ__t td { padding:.35rem .5rem; border-bottom:1px solid var(--rule-soft); vertical-align:middle; }
  .occ__t td b { display:block; font-weight:600; }
  .occ__t td .muted { font-size:.76rem; }
  .occ__t .c { text-align:center; width:6.5rem; }
  .occ__t input[type="checkbox"] { width:1.1rem; height:1.1rem; cursor:pointer; }
  .occ__note { width:100%; min-width:12rem; font:inherit; font-size:.84rem; padding:.25rem .4rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .occ__t input[type="date"] { font:inherit; font-size:.82rem; padding:.2rem .3rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .occ__t tr.saved td { background:var(--accent-soft); transition:background .3s; }
  /* the manual: contents beside the page */
  .helpman__acts { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin:.6rem 0 0; }
  .man { display:grid; grid-template-columns:minmax(13rem, 17rem) minmax(0, 1fr); gap:1.6rem; padding:1rem 1.2rem 3rem; align-items:start; }
  .man__toc { position:sticky; top:.5rem; max-height:calc(100vh - 6rem); overflow:auto; font-size:.86rem; padding-right:.4rem; }
  .man__home { display:inline-block; font-weight:700; margin-bottom:.6rem; color:var(--accent); }
  .man__sec { margin-bottom:.8rem; }
  .man__seck { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 .3rem; }
  .man__toc ul { list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
  .man__toc a { color:var(--ink); text-decoration:none; display:block; padding:.18rem .4rem; border-radius:4px; }
  .man__toc a:hover, .man__toc a:focus-visible { background:var(--accent-soft); }
  .man__toc a[aria-current="page"] { background:var(--accent); color:#fff; }
  .man__todo { color:var(--ink-3); padding:.18rem .4rem; opacity:.75; }
  .man__page { max-width:44rem; line-height:1.6; font-size:.98rem; color:var(--ink); }
  .man__page .man__title { font-size:1.45rem; margin:.1rem 0 .8rem; text-wrap:balance; }
  .man__page h2:not(.man__title) { font-size:1.1rem; margin:1.6rem 0 .5rem; }
  .man__page h3 { font-size:1rem; margin:1.2rem 0 .4rem; }
  .man__kind { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 .3rem; }
  .man__page p, .man__page li { margin:0 0 .6rem; }
  .man__page ul, .man__page ol { padding-left:1.3rem; margin:0 0 1rem; }
  .man__page a { color:var(--accent); }
  .man__page table { border-collapse:collapse; width:100%; margin:.4rem 0 1.2rem; font-size:.9rem; }
  .man__page th { text-align:left; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border-bottom:2px solid var(--rule); padding:.4rem .5rem; }
  .man__page td { border-bottom:1px solid var(--rule-soft); padding:.45rem .5rem; vertical-align:top; }
  @media (max-width:52rem){ .man { grid-template-columns:1fr; } .man__toc { position:static; max-height:none; } }
  /* sharing a note, and Notes for you (Jason, 22 Oct: "do both") */
  .qshare { margin-top:.7rem; display:grid; gap:.45rem; }
  .qchip[hidden] { display:none; }
  .qshare__k { font-size:.8rem; color:var(--ink-3); letter-spacing:.04em; }
  .qshare__who { display:flex; flex-wrap:wrap; gap:.35rem; }
  .qchip { all:unset; cursor:pointer; padding:.28rem .7rem; border-radius:999px; border:1px solid var(--rule); font-size:.86rem; color:var(--ink); }
  .qchip:hover, .qchip:focus-visible { border-color:var(--accent); }
  .qchip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
  .qshare__mail { font-size:.88rem; display:flex; gap:.4rem; align-items:center; }
  .qshare__why { font-size:.8rem; }
  /* the bell on the My desk heading, and its panel (Jason, 22 Oct) */
  .navgrp[data-grp="mine"] { display:flex; align-items:center; justify-content:space-between; padding-right:.2rem; }
  .bell { all:unset; cursor:pointer; position:relative; display:inline-flex; padding:.2rem; border-radius:5px; color:#9fb2c4; }
  .bell .nic { width:17px; height:17px; }
  .bell:hover, .bell:focus-visible, .bell[aria-expanded="true"] { color:#fff; background:rgba(255,255,255,.08); }
  .bell.has { color:#fff; }
  .bell__n { position:absolute; top:-.3rem; right:-.35rem; min-width:1rem; height:1rem; padding:0 .25rem; box-sizing:border-box;
             border-radius:.5rem; background:var(--st-serious); color:#fff; font-size:.62rem; line-height:1rem; text-align:center;
             letter-spacing:0; font-weight:700; }
  .bell__n[hidden] { display:none; }
  body.side-mini .navgrp[data-grp="mine"] { justify-content:center; padding:.35rem 0 0; }
  body.side-mini .navgrp .bell { padding:.2rem; }
  .bellpane__acts { display:inline-flex; gap:.6rem; align-items:center; }
  .bellpane__acts .linkish { font-size:.8rem; font-weight:400; }
  .bellpane__list { overflow:auto; flex:1; }
  .bitem { border-bottom:1px solid var(--rule-soft); }
  .bitem__head { all:unset; cursor:pointer; display:grid; grid-template-columns:.6rem minmax(0,1fr) auto; column-gap:.55rem; row-gap:.12rem;
                 width:100%; box-sizing:border-box; padding:.6rem .9rem; }
  .bitem__head:hover, .bitem__head:focus-visible { background:var(--accent-soft); }
  .bitem__dot { width:.5rem; height:.5rem; border-radius:50%; margin-top:.35rem; grid-row:span 2; }
  .bitem.unread .bitem__dot { background:var(--accent); }
  .bitem.unread.bitem--due .bitem__dot { background:var(--st-serious); }
  .bitem__what { font-size:.86rem; color:var(--ink); }
  .bitem.unread .bitem__what { font-weight:700; }
  .bitem__job { font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:400; }
  .bitem__when { font-size:.76rem; color:var(--ink-3); white-space:nowrap; }
  .bitem__when.late { color:var(--st-serious); font-weight:600; }
  .bitem__title { grid-column:2 / 4; font-size:.82rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bitem__why { grid-column:2 / 4; font-size:.82rem; color:var(--ink-2); font-style:italic; }
  .bitem__acts { display:flex; gap:.9rem; align-items:center; padding:0 .9rem .55rem 2.05rem; margin-top:-.2rem; }
  .bitem__acts .linkish { font-size:.8rem; }
  .bitem__acts .bitem__x { margin-left:auto; color:var(--ink-3); }
  .bitem__reason { flex:1; min-width:0; font:inherit; font-size:.84rem; padding:.3rem .45rem; border:1px solid var(--rule);
                   border-radius:5px; background:var(--surface); color:var(--ink); }
  .bitem__body { padding:0 .9rem .8rem 2.05rem; display:grid; gap:.6rem; justify-items:start; font-size:.9rem; }
  .bitem__plain { white-space:pre-wrap; line-height:1.45; }
  /* a note: room to write, like a message box (Jason, 22 Oct) */
  dialog.qnote { width:min(58rem, 94vw); max-width:none; }
  .rte { border:1px solid var(--rule); border-radius:8px; background:var(--surface); overflow:hidden; }
  .rte__bar { display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; padding:.35rem .45rem;
              border-bottom:1px solid var(--rule-soft); background:var(--surface-2, var(--surface)); }
  .rte__bar button { all:unset; cursor:pointer; min-width:1.9rem; text-align:center; padding:.25rem .5rem; border-radius:5px;
                     font-size:.86rem; color:var(--ink); border:1px solid transparent; }
  .rte__bar button:hover, .rte__bar button:focus-visible { background:var(--accent-soft); border-color:var(--rule); }
  .rte__bar select { font:inherit; font-size:.84rem; padding:.2rem .3rem; border:1px solid var(--rule); border-radius:5px;
                     background:var(--surface); color:var(--ink); }
  .rte__body { min-height:18rem; max-height:60vh; overflow:auto; resize:vertical; padding:.75rem .9rem; outline:none;
               font-size:1rem; line-height:1.5; color:var(--ink); }
  .rte__body:empty::before { content:"Write the note\u2026"; color:var(--ink-3); }
  .rte__body ul, .rte__body ol, .notehtml ul, .notehtml ol { margin:.3rem 0 .3rem 1.4rem; padding:0; }
  .rte__body p, .notehtml p { margin:0 0 .5rem; }
  .qnote__acts { margin-top:.7rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
  .qnote__acts .grow { flex:1; }
  .qnote__on input { font:inherit; font-size:.85rem; margin-left:.3rem; }
  .notehtml { line-height:1.45; }
  /* choosing a project for a note or task: a list between the menu and the screen */
  .qpick { position:fixed; top:0; bottom:0; width:min(24rem, 92vw); z-index:60; background:var(--surface); color:var(--ink);
           border-right:1px solid var(--rule); box-shadow:6px 0 24px rgba(0,0,0,.25); display:flex; flex-direction:column; }
  .qpick__top { padding:.8rem .9rem .6rem; border-bottom:1px solid var(--rule-soft); }
  .qpick__top h3 { margin:0 0 .5rem; font-size:.95rem; display:flex; justify-content:space-between; align-items:center; }
  .qpick__top h3 button { all:unset; cursor:pointer; font-size:1.2rem; color:var(--ink-3); padding:0 .3rem; }
  .qpick__top input { width:100%; box-sizing:border-box; font:inherit; font-size:.9rem; padding:.45rem .55rem;
                      border:1px solid var(--rule); border-radius:6px; background:var(--surface); color:var(--ink); }
  .qpick__list { overflow:auto; flex:1; padding:.3rem 0; }
  .qpick__list button { all:unset; cursor:pointer; display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:.5rem;
                        width:100%; box-sizing:border-box; padding:.42rem .9rem; font-size:.86rem; }
  .qpick__list button:hover, .qpick__list button:focus-visible, .qpick__list button.on { background:var(--accent-soft); }
  .qpick__list b { font-variant-numeric:tabular-nums; }
  .qpick__list span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
  .sidetog svg, nav .nic { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
                           stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
  nav button { position:relative; }
  @media (min-width:52.01rem) {
    body.side-mini { grid-template-columns:3.6rem 1fr; }
    body.side-mini aside.side { padding:.8rem .45rem; }
    body.side-mini .sidehead { justify-content:center; }
    body.side-mini .brand { display:none; }
    body.side-mini nav button { justify-content:center; padding:.55rem 0; }
    body.side-mini nav button.subnav { padding-left:0; }
    body.side-mini nav .navtog { position:absolute; right:-.1rem; bottom:-.1rem; width:1rem; height:1rem; }
    body.side-mini nav .navtog svg { width:12px; height:12px; }
    body.side-mini nav button.subnav::before { display:none; }
    /* the words stay for a screen reader; the title shows them on hover */
    body.side-mini .navgrp span { display:none; }
    body.side-mini .navgrp { margin:.5rem .4rem .3rem; padding:0; border-top:1px solid rgba(255,255,255,.14); }
    body.side-mini .signedin { justify-content:center; padding:.35rem 0; }
    body.side-mini .signedin b, body.side-mini .signedin .chev { display:none; }
    body.side-mini nav .nl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  }
  @media (max-width:52rem) { .sidetog, nav .nic { display:none; } }
  .jobsearch__top { display:flex; gap:.4rem; }
  .jobsearch__top .wide { flex:1; }
  .wjhide { padding-inline:.6rem; }
  .jobs__show { display:none; }
  .wjfilt { font-size:.74rem; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
  @media (min-width:40.01rem) {
    body.jobs-mini .work { grid-template-columns:2.6rem minmax(0,1fr); }
    body.jobs-mini .work > .jobs > :not(.jobs__show) { display:none; }
    body.jobs-mini .jobs__show { display:flex; flex-direction:column; align-items:center; gap:.7rem; width:100%;
         padding:.7rem 0; background:none; border:0; color:var(--ink-2); cursor:pointer; font:inherit; font-size:1.15rem; }
    body.jobs-mini .jobs__show:hover { color:var(--accent); }
    body.jobs-mini .jobs__show:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
    body.jobs-mini .jobs__show span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:.72rem;
         letter-spacing:.1em; text-transform:uppercase; }
  }
  @media (max-width:40rem) { .btn.wjhide { display:none; } }   /* .btn.: outranks button.btn */

  /* "Where did it go?" -- the DeskHawk-to-here dictionary. */
  #findDlg { width:min(46rem,94vw); max-width:none; border:1px solid var(--line); border-radius:10px;
             padding:0; background:var(--card); color:var(--ink); box-shadow:0 24px 60px -20px rgba(0,0,0,.55); }
  #findDlg::backdrop { background:rgba(9,14,19,.55); }
  .find__top { padding:.9rem 1rem .7rem; border-bottom:1px solid var(--line); }
  .find__top h3 { margin:0 0 .15rem; font-size:1rem; }
  .find__top p { margin:0; font-size:.78rem; color:var(--muted); }
  #findQ { width:100%; margin-top:.6rem; font-size:1rem; padding:.5rem .65rem; border-radius:6px;
           border:1px solid var(--line); background:var(--bg); color:var(--ink); }
  #findQ:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .find__list { max-height:52vh; overflow-y:auto; padding:.4rem; }
  .find__hit { display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; align-items:center;
               padding:.55rem .65rem; border-radius:6px; border:1px solid transparent; }
  .find__hit + .find__hit { margin-top:.15rem; }
  .find__hit:hover, .find__hit[data-sel="1"] { background:var(--soft); border-color:var(--line); }
  .find__old { font-weight:600; font-size:.92rem; }
  .find__old span { font-weight:400; color:var(--muted); font-size:.8rem; }
  .find__to { font-size:.82rem; color:var(--muted); margin-top:.1rem; }
  .find__to b { color:var(--ink); font-weight:600; }
  .find__go { all:unset; cursor:pointer; font-size:.75rem; padding:.25rem .6rem; border-radius:5px;
              border:1px solid var(--accent); color:var(--accent); white-space:nowrap; }
  .find__go:hover { background:var(--accent); color:#fff; }
  .find__go[disabled] { cursor:default; border-color:var(--line); color:var(--muted); }
  .find__none { padding:1.2rem .8rem; color:var(--muted); font-size:.88rem; text-align:center; }
  .find__foot { padding:.5rem .9rem .7rem; border-top:1px solid var(--line); font-size:.72rem; color:var(--muted);
                display:flex; gap:1rem; flex-wrap:wrap; }
  .find__foot kbd { font-family:inherit; border:1px solid var(--line); border-radius:3px; padding:.05rem .3rem; }
  .sec { border-top:1px solid rgba(255,255,255,.1); padding-top:.75rem; }
  .sec h4 { margin:0 0 .45rem; font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:#8fa3b6; font-weight:700; }
  .bulk { display:flex; gap:.3rem; margin-bottom:.5rem; }
  .bulk button { all:unset; cursor:pointer; font-size:.7rem; padding:.2rem .45rem; border-radius:4px;
                 border:1px solid rgba(255,255,255,.18); color:#c3d2df; }
  .bulk button:hover { background:rgba(255,255,255,.1); color:#fff; }
  .plist { display:flex; flex-direction:column; gap:.05rem; max-height:16rem; overflow:auto; margin:0 -.2rem; padding:0 .2rem; }
  .plist label { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:#c3d2df;
                 padding:.24rem .3rem; border-radius:4px; cursor:pointer; }
  .plist label:hover { background:rgba(255,255,255,.07); color:#fff; }
  .plist input { accent-color:#5fb0dc; margin:0; }
  .plist .dot { width:.6rem; height:.6rem; border-radius:50%; flex:none; }
  .plist .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .who { margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding-top:.7rem; }
  .who label { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#8fa3b6; font-weight:700; display:block; margin-bottom:.3rem; }
  .who select { width:100%; font:inherit; font-size:.82rem; padding:.3rem .4rem; border-radius:5px;
                background:#1e2c38; color:#e6eef5; border:1px solid rgba(255,255,255,.16); }
  .sizer { display:flex; align-items:center; gap:.35rem; margin-top:.55rem; }
  .sizer span { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#8fa3b6; font-weight:700; }
  .sizer button { all:unset; cursor:pointer; width:1.7rem; text-align:center; font-weight:700; font-size:.8rem;
                  border:1px solid rgba(255,255,255,.18); border-radius:4px; color:#c3d2df; padding:.1rem 0; }
  .sizer button:hover { background:rgba(255,255,255,.1); color:#fff; }
  .themer button { width:auto; padding:.1rem .4rem; font-size:.7rem; }
  .sizer button[aria-pressed="true"] { background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.4); }
  main { min-width:0; }
  .topbar { background:var(--surface); border-bottom:1px solid var(--rule); padding:.65rem 1.1rem;
            display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; position:sticky; top:0; z-index:5; }
  .topbar h1 { font-size:1.02rem; margin:0 auto 0 0; font-weight:700; letter-spacing:-.01em; }
  /* a title with the action that belongs to it, kept together on the left where
     the eye starts -- the space the title's auto margin used to take goes after */
  .topbar .lead { display:flex; align-items:center; gap:.8rem; margin:0 auto 0 0; }
  .topbar .lead h1 { margin:0; }
  button.btn, a.btn { text-decoration:none; display:inline-block; font:inherit; font-size:.82rem; color:var(--ink); background:var(--surface);
               border:1px solid var(--rule); border-radius:5px; padding:.3rem .6rem; cursor:pointer; }
  button.btn:hover, a.btn:hover { border-color:var(--accent); }
  /* Ending somebody's access is the one control on this screen that locks a
     person out of the building. It does not look like the others. */
  button.btn.danger { color:var(--st-critical); border-color:var(--st-critical); }
  button.btn.danger:hover { background:var(--st-critical); color:#fff; border-color:var(--st-critical); }
  button.btn[disabled] { opacity:.45; cursor:not-allowed; }
  button.btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .range { font-size:.9rem; font-weight:600; color:var(--ink-2); }
  .extent { font-size:.76rem; color:var(--ink-3); margin-left:.6rem; }
  .tsbar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.6rem 1rem;
           background:var(--surface); border-bottom:1px solid var(--rule); }
  .tsbar label { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
  .tsbar select { font:inherit; font-size:.85rem; padding:.3rem .5rem; border-radius:6px;
                  border:1px solid var(--rule); background:var(--surface); color:var(--ink); }
  .tsstat { font-size:.82rem; color:var(--ink-2); }
  .tsstat b { font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums; }
  table.ts th.num, table.ts td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  table.ts th .dn { color:var(--ink-3); font-weight:400; }
  table.ts td.tot { font-weight:700; }
  table.ts tfoot .grand td { border-top:2px solid var(--rule); font-weight:700; background:var(--rule-soft); }
  table.ts .nb { font-style:italic; color:var(--ink-2); }
  .tstiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.8rem; padding:1rem 1rem .2rem; }
  .tile { background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.7rem .9rem; display:grid; gap:.15rem; }
  .tile.warn { border-left:4px solid var(--st-warning); }
  .tile .k { font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
  .tile .v { font-size:1.45rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
  .tile .v small { font-size:.78rem; font-weight:500; color:var(--ink-2); }
  .tile .d { font-size:.76rem; color:var(--ink-3); }
  .tschg { font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .tschg.up { color:var(--st-good); } .tschg.down { color:var(--st-critical); }
  .tssec { margin:1rem; background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.8rem 1rem; }
  .tssec .gwrap { margin:0 -1rem -.8rem; }
  /* ---- licensure (Sheet 34): NCARB's six areas, six hue families ---- */
  :root { --ax-PCM:#1586B8; --ax-PJM:#A2479B; --ax-PA:#6553C9; --ax-PPD:#5B8F12; --ax-PDD:#D23F55; --ax-CE:#D9692B; --ax-track:#e3e8ec; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --ax-PCM:#4CC0EE; --ax-PJM:#D57ACD; --ax-PA:#9C8CF5; --ax-PPD:#95CC4A; --ax-PDD:#FF7286; --ax-CE:#FF9A5C; --ax-track:#222c34; } }
  :root[data-theme="dark"] { --ax-PCM:#4CC0EE; --ax-PJM:#D57ACD; --ax-PA:#9C8CF5; --ax-PPD:#95CC4A; --ax-PDD:#FF7286; --ax-CE:#FF9A5C; --ax-track:#222c34; }
  .tswt { font:inherit; font-size:.78rem; padding:.05rem .25rem; margin-left:.35rem; max-width:13rem; border:1px solid var(--rule); border-radius:3px; background:var(--surface); color:var(--ink-2); }
  span.tswt { display:inline-block; }
  .tsas { display:inline-block; margin-left:.35rem; font-size:.74rem; font-weight:600; padding:0 .35rem; border-radius:3px;
          border:1.5px solid var(--st-serious); color:var(--st-serious); cursor:pointer; background:none; font-family:inherit; }
  .tsas[disabled] { cursor:default; }
  .tsasin { font:inherit; font-size:.8rem; width:12rem; margin-left:.35rem; }
  .licgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
  .licarea { padding:.75rem .85rem; border-right:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft); border-top:4px solid var(--c); display:flex; flex-direction:column; gap:.4rem; }
  .licarea h4 { margin:0; font-size:.88rem; display:flex; justify-content:space-between; gap:.4rem; align-items:flex-start; }
  .licarea svg { width:8.2rem; align-self:center; }
  .licarea dl { display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; margin:0; font-size:.78rem; }
  .licarea dt { color:var(--ink-3); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; }
  .licarea dd { margin:0; font-variant-numeric:tabular-nums; }
  .licpill { font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.05rem .4rem; border:1.5px solid currentColor; border-radius:3px; white-space:nowrap; }
  .licpill.met { color:var(--st-good); } .licpill.near { color:var(--accent); } .licpill.open { color:var(--st-warning); }
  .licpill.amber { color:var(--st-serious); } .licpill.bad { color:var(--st-critical); }
  .lickey { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.8rem; color:var(--ink-2); margin:.5rem 0 0; }
  .lickey i { display:inline-block; width:1.3rem; height:.55rem; margin-right:.35rem; background:var(--ax-PDD); vertical-align:middle; }
  .lickey i.sub { background:repeating-linear-gradient(135deg, var(--ax-PDD) 0 3px, transparent 3px 6px); border:1px solid var(--ax-PDD); }
  .lickey i.log { opacity:.3; }
  .licwarn { border-left:3px solid var(--st-serious); background:color-mix(in srgb, var(--st-serious) 10%, var(--surface)); padding:.5rem .75rem; margin:.6rem 0 0; font-size:.88rem; }
  .lictab td.num, .lictab th.num { text-align:right; font-variant-numeric:tabular-nums; }
  .lictab tr.amber td { background:color-mix(in srgb, var(--st-serious) 9%, var(--surface)); }
  .lictab tr.cur td { background:var(--accent-soft); }
  .licact { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
  .licact input[type=text], .licact input:not([type]) { min-width:9rem; flex:1 1 9rem; }
  .lictab td:first-child { white-space:nowrap; }
  .lictab tr.licacts td { border-top:0; padding-top:0; white-space:normal; }
  /* nine columns at 900 px: keep the cells tight so nothing runs off the edge */
  .lictab th, .lictab td { padding:.45rem .4rem; }
  .lictab td:first-child, .lictab th:first-child { padding-left:.75rem; }
  .lictab td .licact input { min-width:0; }
  .licnums { display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.5rem .8rem; margin:.5rem 0; }
  .licnums label { display:grid; gap:.15rem; font-size:.78rem; color:var(--ink-2); }
  .licnums input { font:inherit; width:100%; }
  .licreason { width:100%; font:inherit; font-size:.85rem; margin-top:.3rem; }
  .licchecks { display:grid; gap:.25rem; margin:.4rem 0 0; font-size:.86rem; }
  .licchecks .ok { color:var(--st-good); } .licchecks .no { color:var(--st-warning); }
  .lictrack { border:1px solid var(--rule); border-radius:4px; padding:.7rem .85rem; }
  .lictracks { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:.7rem; }
  .licform { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.5rem .8rem; margin:.6rem 0; }
  .licform label { display:grid; gap:.15rem; font-size:.78rem; color:var(--ink-2); }
  .licform input, .licform select { font:inherit; }
  .docdlg.axpdlg { width:min(62rem, 96vw); max-width:96vw; }
  /* Waiting to close (Jason, 27 Oct: "unadjustable for size, making it nearly
     ineffective"): opens near full size, drags larger or smaller from its corner,
     and the list scrolls inside it with the reasons given the room */
  #wcDlg { width:min(76rem, 96vw); max-width:98vw; height:min(48rem, 88vh); max-height:98vh;
           min-width:min(26rem, 96vw); min-height:16rem; resize:both; overflow:hidden; }
  #wcDlg[open] { display:flex; flex-direction:column; }
  #wcDlg .im__body { padding:.5rem 0; }
  #wcDlg table.wc th, #wcDlg table.wc td { padding:.4rem .55rem; vertical-align:top; }
  #wcDlg table.wc .wc__s { white-space:nowrap; }
  #wcDlg table.wc .wc__t { min-width:10rem; }
  #wcDlg table.wc .wc__why { min-width:16rem; width:55%; }
  #wcDlg .im__foot { flex-wrap:wrap; gap:.4rem; }
  /* the folder tree on Project Info (0165) */
  .ptree { margin-top:.5rem; font-size:.82rem; }
  .ptree__head { display:flex; gap:.4rem; align-items:baseline; flex-wrap:wrap; }
  .ptree__fix { border-color:var(--st-warning); color:var(--st-warning); }
  .ptree__list { margin:.3rem 0 .2rem; padding-left:1.1rem; }
  .ptree__list li { margin:.15rem 0; }
  .ptree__also { font-size:.76rem; }
  .axpdlg .licreason { box-sizing:border-box; }
  .axpdlg table td, .axpdlg table th { padding:.35rem .5rem; }
  /* Connect my Outlook */
  .olcard { display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:center; justify-content:space-between; margin:.8rem 1rem 0;
            padding:.9rem 1.1rem; border:1px solid var(--rule); border-left:4px solid var(--accent); border-radius:6px; background:var(--surface); }
  .olcard > div { display:grid; gap:.2rem; flex:1 1 24rem; min-width:0; }
  .olcard span { color:var(--ink-2); font-size:.86rem; }
  .olcard.warn { border-left-color:var(--st-serious); }
  .olcard .btn { text-decoration:none; white-space:nowrap; }
  .olbar { display:flex; gap:.8rem; align-items:center; margin:.6rem 1rem 0; font-size:.84rem; color:var(--ink-2); }
  .olbar.on b { color:var(--st-good); }
  a.mlive { color:inherit; text-decoration:none; } a.mlive:hover b { text-decoration:underline; }
  /* your licensure, on your own timesheet */
  .licsum { border-top:4px solid var(--accent); }
  .licsum__top { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1rem 1.6rem; align-items:start; margin:.2rem 0 0; }
  @media (max-width:820px){ .licsum__top { grid-template-columns:1fr; } }
  .licsum__k { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
  .licsum__n { font-size:2.3rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; margin:.15rem 0 .5rem; }
  .licsum__n small { font-size:.9rem; font-weight:500; color:var(--ink-2); margin-left:.35rem; }
  .licsum__bar { display:flex; height:.85rem; border-radius:99px; background:var(--ax-track); overflow:hidden; }
  .licsum__bar i { display:block; height:100%; }
  .licsum__bar i.a { background:var(--accent); }
  .licsum__bar i.e { background:repeating-linear-gradient(135deg, var(--accent) 0 4px, transparent 4px 8px); }
  .licsum__bar i.l { background:var(--accent); opacity:.3; }
  .licsum__bar.ce { height:.6rem; }
  .licsum__pct { font-size:.86rem; color:var(--ink-2); margin-top:.45rem; }
  .licsum__pct b { color:var(--ink); }
  .licsum__todo { list-style:none; margin:.8rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.4rem; }
  .licsum__todo li { display:grid; gap:.05rem; padding:.35rem .6rem; border-radius:4px; border-left:4px solid var(--st-dormant);
                     background:color-mix(in srgb, var(--st-dormant) 8%, var(--surface)); cursor:pointer; font-size:.84rem; }
  .licsum__todo li span { color:var(--ink-2); font-size:.76rem; }
  .licsum__cedet { display:grid; gap:.6rem; }
  /* the course log: HSW courses in green, and their own section past ten a year */
  .lictab tr.hsw td { color:var(--st-good); }
  .lictab tr.hsw td a { color:var(--st-good); text-decoration:underline; }
  .lictab tr.lcsec td { background:var(--surface-2, var(--accent-soft)); font-size:.7rem; font-weight:700; letter-spacing:.1em;
                        text-transform:uppercase; color:var(--ink-2); padding-top:.5rem; padding-bottom:.5rem; }
  .licsum__top:has(.licsum__big):not(:has(.licsum__cedet)) { grid-template-columns:1fr; }
  .licsum__todo li.amber { border-left-color:var(--st-serious); background:color-mix(in srgb, var(--st-serious) 11%, var(--surface)); }
  .licsum__todo li.bad { border-left-color:var(--st-critical); background:color-mix(in srgb, var(--st-critical) 11%, var(--surface)); }
  .licsum__todo li.open { border-left-color:var(--st-warning); background:color-mix(in srgb, var(--st-warning) 10%, var(--surface)); }
  .licsum__todo li.good { border-left-color:var(--st-good); }
  .licsum__todo li:hover { filter:brightness(1.06); }
  /* six areas: three by two at 900 px, one row of six on a wide screen -- never five and one */
  .licsum__rings { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem; }
  @media (min-width:1280px){ .licsum__rings { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
  .licsum__ring { display:grid; justify-items:center; gap:.3rem; text-align:center; padding:.6rem .35rem .7rem; border-radius:6px;
                  border:1px solid var(--rule-soft); border-top:3px solid var(--c); cursor:pointer; animation:licIn .45s ease-out both; }
  .licsum__ring svg { width:100%; max-width:6.4rem; }
  .licsum__ring b { font-size:.74rem; line-height:1.25; min-height:2.5em; }
  .licsum__ring:hover { background:color-mix(in srgb, var(--c) 7%, var(--surface)); }
  @keyframes licIn { from { opacity:0; transform:translateY(6px) scale(.96); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){ .licsum__ring { animation:none; } }
  .licsum__ce { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:.8rem 1.6rem; margin-top:.9rem; }
  .licsum__ce + .licsum__top, .lickey + .licsum__top { margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--rule-soft); }
  .licsum__line { font-size:.95rem; margin:.15rem 0 .35rem; } .licsum__line b { font-size:1.25rem; }
  .licsum__checks { display:flex; flex-wrap:wrap; gap:.15rem .9rem; font-size:.78rem; margin-top:.4rem; }
  .licsum__checks .ok { color:var(--st-good); } .licsum__checks .no { color:var(--st-warning); }
  .axpdlg .tag { font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-left:.4rem; }
  .tssec__h { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-bottom:.6rem; }
  .tssec__h h3 { margin:0 auto 0 0; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
  .tssec__h .muted { font-size:.76rem; }
  table.tsg td.num, table.tsg th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  table.tsg tr.tsrow { cursor:pointer; } table.tsg tr.tsrow:hover { background:var(--accent-soft); }
  table.tsg input[type=number] { width:5rem; font:inherit; font-size:.82rem; padding:.2rem .35rem; text-align:right; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  table.tsg select { font:inherit; font-size:.82rem; padding:.2rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .btn.tsme { display:inline-flex; align-items:center; gap:.35rem; }
  .btn.tsme .tick { display:inline-block; width:.95rem; height:.95rem; line-height:.95rem; text-align:center; font-size:.7rem;
                    border:1px solid var(--rule); border-radius:3px; }
  .btn.tsme.on { border-color:var(--accent); background:var(--accent-soft); color:var(--ink); font-weight:600; }
  .btn.tsme.on .tick { background:var(--accent); border-color:var(--accent); color:#fff; }
  .tssel { font:inherit; font-size:.82rem; padding:.28rem .4rem; border:1px solid var(--rule); border-radius:5px; background:var(--surface); color:var(--ink); }
  .tsdate { font:inherit; font-size:.82rem; padding:.25rem .35rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .tstrend { display:flex; align-items:flex-end; gap:3px; height:9.5rem; padding-bottom:1.3rem; }
  .tscol { flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
  .tsbar2 { display:flex; flex-direction:column; border-radius:2px 2px 0 0; overflow:hidden; min-height:1px; }
  .tsbar2 span { display:block; min-height:0; }
  .tslab { position:absolute; top:100%; left:0; right:0; margin-top:.25rem; font-size:.66rem; color:var(--ink-3); text-align:center; white-space:nowrap; overflow:visible; }
  .tsb { fill:var(--accent); background:var(--accent); } .tso { fill:var(--st-dormant); background:var(--st-dormant); }
  .tslegend { font-size:.74rem; color:var(--ink-3); display:flex; gap:.5rem; align-items:center; margin-top:.3rem; }
  .tslegend .k { display:inline-block; width:.7rem; height:.7rem; border-radius:2px; }
  .panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:1rem; padding:1rem; }
  .panel { background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.9rem 1rem; }
  .panel h3 { margin:0 0 .7rem; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
  .bars { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
  .bars li { display:grid; grid-template-columns:minmax(6rem,11rem) 1fr auto 2.6rem; gap:.5rem; align-items:center; font-size:.8rem; }
  .bl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
  .bt { background:var(--rule-soft); border-radius:3px; height:.62rem; overflow:hidden; }
  .bf { display:block; height:100%; background:var(--accent); border-radius:3px; }
  .bf.alt { background:var(--accent); opacity:.62; }
  .bv { font-variant-numeric:tabular-nums; color:var(--ink); }
  .bp { font-variant-numeric:tabular-nums; color:var(--ink-3); text-align:right; }
  .grid { display:grid; grid-template-columns:repeat(7,minmax(8.5rem,1fr)); gap:1px;
          background:var(--rule); border-bottom:1px solid var(--rule); overflow-x:auto; }
  .day { background:var(--surface); min-height:14rem; padding:.45rem; }
  .day.today { background:var(--today); }
  .day h3 { margin:0 0 .45rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
            color:var(--ink-3); font-weight:700; display:flex; justify-content:space-between; }
  .day.today h3 { color:var(--accent); }
  /* A colour on the calendar names a CATEGORY, not a person. "That is a
     principal's meeting" is then true at every desk, which is what the old
     per-viewer colouring could never manage -- nobody could say what colour
     Chris was, because the answer differed by machine. Eight categories is a
     palette a person can hold in their head; twelve people is not. */
  .calhost { --cat-principal:#14567A; --cat-executive:#6B4E9B; --cat-pm:#1B6B4A;
             --cat-draft:#2F7D8A;     --cat-admin:#8A5D0F;     --cat-assist:#B8661A;
             --cat-administration:#4A5C6E; --cat-consult:#7b8a9c;
             --mine:#E8A317; --mine-wash:#FFF6E2;
             --ev-me:#F7AE4E; --ev-in:#8FCDF2; --ev-off:#2F64B5; --ev-vac:#F29BCB;
             --ev-hol:#6CC58C; --ev-mile:#F4D34F; --ev-bday:#B49BE8; --ev-ink:#13202B; --ev-ink-on-dark:#F4F8FC; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .calhost {
             --cat-principal:#5fb0dc; --cat-executive:#A98CD8; --cat-pm:#63BE94;
             --cat-draft:#6FC2CE;     --cat-admin:#D9B64A;     --cat-assist:#E3A062;
             --cat-administration:#93A5B8; --cat-consult:#8b99a8;
             --mine:#F0B93C; --mine-wash:#2C2413;
             --ev-me:#F0A646; --ev-in:#82C2EA; --ev-off:#3A6FC4; --ev-vac:#EE95C6;
             --ev-hol:#62BC83; --ev-mile:#EBCB4A; --ev-bday:#A991E0; --ev-ink:#10171E; --ev-ink-on-dark:#F4F8FC; } }
  :root[data-theme="dark"] .calhost {
             --cat-principal:#5fb0dc; --cat-executive:#A98CD8; --cat-pm:#63BE94;
             --cat-draft:#6FC2CE;     --cat-admin:#D9B64A;     --cat-assist:#E3A062;
             --cat-administration:#93A5B8; --cat-consult:#8b99a8;
             --mine:#F0B93C; --mine-wash:#2C2413;
             --ev-me:#F0A646; --ev-in:#82C2EA; --ev-off:#3A6FC4; --ev-vac:#EE95C6;
             --ev-hol:#62BC83; --ev-mile:#EBCB4A; --ev-bday:#A991E0; --ev-ink:#10171E; --ev-ink-on-dark:#F4F8FC; }

  /* Terry's colours (22 Oct, revised the same day): a solid block, readable
     across the room. Orange your own calendar; light blue a meeting in house;
     dark blue a meeting off site or someone out of the office; pink vacation;
     green a holiday; yellow a milestone; purple an office birthday. */
  .ev { --evc:var(--ev-in); background:var(--evc); color:var(--ev-ink);
        border:1px solid color-mix(in srgb, var(--evc) 70%, #000); border-radius:4px;
        padding:.3rem .45rem; margin-bottom:.3rem; font-size:.8rem; line-height:1.25; }
  .ev.k-me { --evc:var(--ev-me); } .ev.k-in { --evc:var(--ev-in); } .ev.k-vac { --evc:var(--ev-vac); }
  .ev.k-off { --evc:var(--ev-off); color:var(--ev-ink-on-dark); }
  .ev.k-hol { --evc:var(--ev-hol); } .ev.k-mile { --evc:var(--ev-mile); } .ev.k-bday { --evc:var(--ev-bday); }
  .ev > span { display:block; }
  .ev .k { font-size:.66rem; font-weight:700; letter-spacing:.02em; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ev .s { font-weight:700; overflow-wrap:anywhere; }
  .ev .t { font-variant-numeric:tabular-nums; font-size:.74rem; }
  .ev .w, .ev .p, .ev .o { font-size:.74rem; overflow:hidden; text-overflow:ellipsis; }
  .ev .n { font-size:.74rem; margin-top:.2rem; opacity:.9; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .ev.ev-compact { text-align:center; }
  .ev.ev-compact .w { white-space:nowrap; }
  .ev.ev-comfortable { font-size:.92rem; padding:.5rem .6rem; margin-bottom:.45rem; }
  .ev.ev-comfortable .t, .ev.ev-comfortable .w, .ev.ev-comfortable .p { font-size:.82rem; }
  .ev.ev-expanded { font-size:.95rem; padding:.55rem .65rem; margin-bottom:.5rem; }
  .ev.ev-expanded .t, .ev.ev-expanded .w, .ev.ev-expanded .p, .ev.ev-expanded .o, .ev.ev-expanded .n { font-size:.84rem; }
  .ev .job { margin-top:.2rem; }
  /* Gone by. Still there, plainly behind you. */
  .ev.past { opacity:.55; }
  .ev.past.mine { opacity:.7; }
  /* Where the day has got to. */
  .nowline { display:flex; align-items:center; gap:.5rem; margin:.5rem 0 .55rem; }
  .nowline::before, .nowline::after { content:""; height:2px; background:var(--mine,#E8A317); flex:1; }
  .nowline span { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
                  color:var(--mine,#E8A317); white-space:nowrap; }
  .callegend { display:flex; flex-wrap:wrap; gap:.15rem .9rem; margin:.1rem 0 .6rem; font-size:.74rem;
               color:var(--ink-3); align-items:center; }
  .callegend i { display:inline-block; width:.7rem; height:.7rem; border-radius:2px;
                 margin-right:.3rem; vertical-align:-1px; }
  .callegend i.k-me { background:var(--ev-me); } .callegend i.k-in { background:var(--ev-in); }
  .callegend i.k-off { background:var(--ev-off); } .callegend i.k-vac { background:var(--ev-vac); }
  .callegend i.k-hol { background:var(--ev-hol); } .callegend i.k-mile { background:var(--ev-mile); }
  .callegend i.k-bday { background:var(--ev-bday); }
  .calbar { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center; justify-content:space-between; }
  .calbar .callegend { margin:0; }
  .calview { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
  /* Opened on its own: no column, no chrome, just the diary. */
  body.solo aside.side { display:none; }
  body.solo { grid-template-columns:minmax(0,1fr); }
  .ev.private .s { font-style:italic; }
  .ev.private .s::before { content:"\1F512 "; font-style:normal; }
  /* ...but not on an absence. "Out of Office" is the whole truth a colleague
     needs, and hanging a padlock on it announces a secret that is not being
     kept from them. The hatching already says this is not a meeting. */
  .ev.private.k-off .s::before, .ev.private.k-vac .s::before, .ev.private.k-hol .s::before { content:none; }
  .ev.private.k-off .s, .ev.private.k-vac .s, .ev.private.k-hol .s { font-style:normal; }
  /* One register, two sources -- so the register says which is which rather
     than splitting into two tabs that showed mostly the same messages. */
  .corrmail { border:1px solid var(--rule); background:var(--surface); border-radius:8px; padding:.7rem .85rem; margin:.4rem .6rem .7rem;
              display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:.6rem 1.2rem; font-size:.86rem; }
  .corrmail h4 { margin:0 0 .25rem; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
  .corrmail label { display:block; padding:.12rem 0; cursor:pointer; }
  .corrmail .cm-act { grid-column:1 / -1; display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; font-size:.8rem; }
  .corrmail .cm-act .muted { flex:1 1 18rem; }
  .corrbar { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem;
             margin:0 0 .7rem; }
  .corrq { font:inherit; font-size:.82rem; padding:.28rem .6rem; border-radius:999px; min-width:12rem;
           border:1px solid var(--rule); background:var(--bg); color:var(--ink); }
  .corrq:focus { outline:2px solid var(--accent); outline-offset:-1px; }
  .corrwrap.open { display:grid; grid-template-columns:13.5rem minmax(0, 1fr); gap:1rem; align-items:start; }
  .corrside { position:sticky; top:0; border:1px solid var(--rule); background:var(--surface); padding:.7rem .8rem;
              font-size:.84rem; display:grid; gap:.3rem; }
  .corrside h4 { margin:.5rem 0 .1rem; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
  .corrside h4:first-child { margin-top:0; }
  .corrside__o { display:flex; gap:.4rem; align-items:baseline; cursor:pointer; }
  .corrside__o .n, .corrfilt .n { margin-left:auto; color:var(--ink-3); font-size:.75rem; }
  .corrside select { font:inherit; font-size:.82rem; padding:.25rem; background:var(--bg); color:var(--ink);
                     border:1px solid var(--rule); border-radius:4px; max-width:100%; }
  .corrside .btn { margin-top:.5rem; justify-self:start; }
  /* Where the pane has room, the filters are a column beside the list; where it
     has not (900px with the project list open), they sit above it in a row, so
     the list keeps its full width. */
  @container (max-width: 62rem) {
    .corrwrap.open { grid-template-columns:minmax(0, 1fr); }
    .corrside { position:static; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:.2rem 1.2rem; }
    .corrside h4 { grid-column:1 / -1; }
    .corrside h4:not(:first-child) { margin-top:.35rem; }
  }
  /* Column headings stay in sight while the list scrolls (Jason, 2 Oct): every
     list in a job's pane scrolls inside .panebody, so one rule holds them all. */
  .panebody table.list thead th { position:sticky; top:var(--barh, 0px); z-index:2; box-shadow:0 1px 0 var(--rule); }
  .panebody > :is(.corrbar, .tabbar, .toolbar, .segbar):first-child {
    position:sticky; top:0; z-index:3; background:var(--bg); margin:0; padding:.55rem 0; }
  .panebody > .toolbar:first-child { background:var(--surface); padding:.5rem 1rem; }
  .corrside { top:calc(var(--barh, 0px) + .5rem); }
  table.list.corrtbl th.s { white-space:normal; }
  /* in a narrow pane only the sorted column carries its arrow; every heading
     still sorts, says so on hover, and shows the hand */
  @container (max-width: 62rem) {
    .corrtbl th.s:not(.on) .sc { display:none; }
    .corrtbl th, .corrtbl td { padding-left:.5rem; padding-right:.5rem; }
  }
  .corrtbl th, .corrtbl td { padding-left:.6rem; padding-right:.6rem; }
  .corrtime { display:block; font-size:.78rem; }
  /* the senders recovered on 14 Oct brought long addresses this table never held */
  .corrtbl:not(.cnew) td:nth-child(2) .muted { overflow-wrap:anywhere; }
  /* one line a message, as DeskHawk drew it: a fixed table whose cells end in
     an ellipsis, the whole text on hover, so it fits any width it is given */
  table.list.corrtbl.cnew { table-layout:fixed; width:100%; }
  .corrtbl.cnew td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
  /* Date, Att and the way it went take only what they need; From and To get the rest */
  .corrtbl col.cdt { width:5.9rem; } .corrtbl col.cat { width:2.6rem; } .corrtbl col.cway { width:2.6rem; }
  .corrtbl.cnew thead th[data-csort="date"], .corrtbl.cnew thead th[data-csort="att"], .corrtbl.cnew thead th[data-csort="way"] { padding-left:.35rem; padding-right:.35rem; }
  .corrtbl.cnew tbody td:first-child, .corrtbl.cnew td.catt, .corrtbl.cnew td.cway { padding-left:.35rem; padding-right:.35rem; }
  .corrtbl.cnew td.cway { text-align:center; }
  .corrtbl .way { font-weight:700; font-size:1rem; }
  .corrtbl .way.out { color:#e0a83a; } .corrtbl .way.in { color:#4fb3e8; }
  .corrtbl .clip { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; color:var(--ink-2); }
  /* a company guessed from the address, not on record */
  .corrtbl td.cguess { font-style:italic; }
  .corrtbl .catt { text-align:center; }
  /* From and To read as two blocks: a coloured rule over each heading, a tint
     on its headings, and a line down the left of each block */
  .corrtbl.cnew th.cgrp { font-weight:700; letter-spacing:.08em; }
  .corrtbl.cnew th.cfrom { background:color-mix(in srgb, var(--accent) 12%, var(--surface, transparent)); }
  .corrtbl.cnew th.cto   { background:color-mix(in srgb, #c9a227 14%, var(--surface, transparent)); }
  .corrtbl.cnew th.cgrp.cfrom { box-shadow:inset 0 3px 0 var(--accent); color:var(--accent); }
  .corrtbl.cnew th.cgrp.cto   { box-shadow:inset 0 3px 0 #c9a227; color:#d8b440; }
  .corrtbl.cnew .cfirst { border-left:1px solid var(--rule); }
  .corrtbl col.cpp { width:14%; } .corrtbl col.cco { width:14%; }
  /* two heading rows: the head sticks as one, not each row onto the other */
  .panebody table.list.corrtbl.cnew thead { position:sticky; top:var(--barh, 0px); z-index:2; }
  .panebody table.list.corrtbl.cnew thead th { position:static; }
  .corrtbl th.cgrp { text-align:center; border-bottom:1px solid var(--rule); }
  .corrtbl thead tr:first-child th[rowspan] { vertical-align:bottom; }
  .corrtbl .csubj .tag { margin:0 .35rem 0 0; }
  .corrtbl .csubj .attach { margin-right:.3rem; }
  .corrtbl th:last-child { letter-spacing:.03em; }
  .corrchip { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem;
              font-size:.8rem; padding:.25rem .65rem; border-radius:999px;
              border:1px solid var(--rule); color:var(--ink-2); }
  .corrchip:hover { border-color:var(--accent); color:var(--ink); }
  .corrchip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft);
                                   color:var(--accent); font-weight:600; }
  .corrchip .n { font-size:.72rem; font-variant-numeric:tabular-nums; color:var(--ink-3); }
  .corrchip[aria-pressed="true"] .n { color:var(--accent); }
  .corrchip:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .corrnote { flex:1 1 16rem; min-width:0; font-size:.74rem; color:var(--ink-3); line-height:1.4; }
  tr.unfiled td:first-child { box-shadow:inset 3px 0 0 var(--ink-3); }
  .tag { display:inline-block; margin-left:.45rem; font-size:.64rem; font-weight:700;
         letter-spacing:.06em; text-transform:uppercase; vertical-align:.1em;
         padding:.05rem .35rem; border-radius:3px; border:1px solid var(--ink-3); color:var(--ink-3); }
  .job { display:inline-block; margin-top:.22rem; font-size:.68rem; font-weight:700; background:var(--surface);
         border:1px solid var(--rule); border-radius:3px; padding:.05rem .32rem; color:var(--accent); cursor:pointer; }
  .job:hover { border-color:var(--accent); text-decoration:underline; }
  table.list { width:100%; border-collapse:collapse; background:var(--surface); }
  table.list th, table.list td { text-align:left; padding:.6rem .9rem; border-bottom:1px solid var(--rule-soft); font-size:.87rem; }
  table.list th { font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3);
                  background:var(--rule-soft); font-weight:700; }
  table.list tbody tr[data-id] { cursor:pointer; }
  table.list tbody tr:hover { background:var(--accent-soft); }
  .code { font-weight:700; color:var(--accent); }
  .pill { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
          border:1px solid var(--rule); border-radius:999px; padding:.1rem .5rem; color:var(--ink-2); }
  /* the combined mail search (4 Nov): which source each result came from */
  .msrc { display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.02em; padding:0 .4rem; border-radius:3px; border:1.5px solid currentColor; margin-right:.25rem; white-space:nowrap; }
  .msrc.filed { color:var(--accent); }
  .msrc.mine { color:var(--ink); }
  .mailsays { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }