/* ---- Admin: one screen, three columns (Sheet 16) ------------------------
     What this category may do, everything there is to do, and who holds it.
     Three columns on a wide screen; the directory moves under the rest on a
     laptop, because a column that narrow is unreadable. */
  .adm { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);
         gap:.8rem; align-items:start; }
  @media (max-width:1180px){ .adm { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
                             .adm .admdir { grid-column:1 / -1; } }
  @media (max-width:760px) { .adm { grid-template-columns:minmax(0,1fr); } }
  .admpane { border:1px solid var(--rule); background:var(--surface); border-radius:6px;
             display:flex; flex-direction:column; min-width:0; }
  .admpane > header { padding:.6rem .8rem; border-bottom:1px solid var(--rule); display:flex;
                      gap:.5rem; align-items:center; flex-wrap:wrap; }
  .admpane > header h2 { margin:0; font-size:.92rem; font-weight:600; }
  .admpane > header .sub { font-size:.75rem; color:var(--ink-3); flex:1 1 100%; }
  .admbody { padding:.5rem .55rem .7rem; overflow:auto; max-height:calc(100vh - 190px); }
  .admgrp { font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3);
            margin:.7rem .25rem .25rem; }
  .admrow { display:flex; gap:.5rem; align-items:flex-start; padding:.28rem .35rem; border-radius:4px; }
  .admrow:hover { background:var(--surface-2); }
  .admrow .t { flex:1; font-size:.84rem; line-height:1.3; }
  .admrow .note { display:block; font-size:.72rem; color:var(--ink-3); padding:0; }  /* not the register's .note */
  .admrow .off { color:var(--ink-3); }
  .admsw { border:1px solid var(--rule); background:var(--surface); color:var(--ink-3);
           border-radius:999px; font-size:.68rem; padding:.1rem .5rem; cursor:pointer; white-space:nowrap; }
  .admsw.on { border-color:var(--accent); background:var(--accent-soft); color:var(--ink); font-weight:600; }
  .admsw[disabled] { cursor:default; opacity:.75; }
  .admdiff { font-size:.68rem; color:var(--accent); margin-left:.3rem; white-space:nowrap; }
  .admcap { display:flex; flex-wrap:wrap; gap:.3rem; padding:.15rem .25rem .5rem; }
  .admcap span { border:1px solid var(--rule); border-radius:4px; padding:.15rem .4rem; font-size:.74rem;
                 color:var(--ink-3); background:var(--surface); }
  .admcap span.in { border-color:var(--accent); color:var(--ink); background:var(--accent-soft); }
  .admp { display:flex; gap:.5rem; align-items:center; padding:.32rem .4rem; border-radius:4px; cursor:pointer; }
  .admp:hover { background:var(--surface-2); }
  .admp .nm { flex:1; min-width:0; }
  .admp .nm b { font-weight:600; font-size:.86rem; display:block; }
  .admp .nm span { font-size:.73rem; color:var(--ink-3); }
  .admp .chips { display:flex; gap:.25rem; flex-wrap:wrap; justify-content:flex-end; max-width:48%; }
  .admchip { font-size:.68rem; border:1px solid var(--rule); border-radius:999px; padding:.05rem .4rem; color:var(--ink-2); }
  .admchip.none { border-style:dashed; color:var(--brick); }
  .admchip.x { cursor:pointer; }
  .admbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0 0 .6rem; }
  /* Modules and the band (Amendment A, Sheet 53): the firm's modules fold; a
     product it doesn't have sits below in a shaded band, its modules folded to
     a heading and one line, each row tagged "Add" instead of a switch. */
  .admmodh { display:flex; align-items:center; flex-wrap:wrap; gap:.15rem .45rem; margin:.55rem .25rem .2rem; }
  .gtog { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem;
          text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:var(--ink-3); }
  .gtog:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
  .gtog .chev { display:inline-block; transition:transform .12s; font-size:.8rem; }
  .gtog[aria-expanded="false"] .chev { transform:rotate(-90deg); }
  .gtog .n { font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-3); }
  .admmod.shut .admmodrows { display:none; }
  .newtag { font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--new);
            border:1.5px solid var(--new); border-radius:3px; padding:0 .3rem; white-space:nowrap; }
  .admband { margin:.9rem -.55rem 0; padding:.7rem .8rem .6rem; background:var(--band);
             border-top:2px dashed var(--band-rule); border-bottom:1px solid var(--band-rule); }
  .admband h3 { margin:0; font-size:.9rem; color:var(--ink); }
  .admband h3 .plus { display:inline-grid; place-items:center; width:1.15rem; height:1.15rem; border-radius:50%;
                      border:1.5px solid var(--band-ink); color:var(--band-ink); font-size:.8rem; margin-right:.4rem; vertical-align:-.1rem; }
  .admband p { margin:.25rem 0 0; font-size:.78rem; color:var(--ink-2); }
  .admmod.avail { margin:0 -.55rem; padding:.05rem .55rem .2rem; background:var(--band); border-bottom:1px dashed var(--band-rule); }
  .admmod.avail:last-child { border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
  .admmod.avail .admgrp { color:var(--ink-2); }
  .admmod.avail .what { flex:1 1 100%; font-size:.76rem; color:var(--ink-3); margin-left:1.2rem; }
  .admmod.avail .admrow { background:color-mix(in srgb, var(--band) 45%, var(--surface)); }
  .admmod.avail .admrow .t { color:var(--ink-3); }
  .addtag { display:inline-flex; align-items:center; font-size:.64rem; font-weight:700; letter-spacing:.06em;
            text-transform:uppercase; color:var(--band-ink); border:1.5px solid var(--band-ink); border-radius:999px;
            padding:.02rem .5rem; white-space:nowrap; }
  .admhist { font-size:.8rem; color:var(--ink-2); }
  .admhist li { margin:.25rem 0; }

  #toast { position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%) translateY(1rem);
           background:var(--ink); color:var(--surface); padding:.5rem .9rem; border-radius:6px; max-width:min(36rem, calc(100vw - 2rem));
           font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:60; }
  #toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

  /* SpyGlass: a borrowed view, and it must never be mistaken for one's own. */
  #spybar { position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; gap:.7rem;
            align-items:center; flex-wrap:wrap; padding:.5rem .9rem;
            background:var(--accent); color:#fff; font-size:.85rem; }
  #spybar b { font-weight:700; }
  #spybar span { opacity:.92; }
  #spybar .spydiff { border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:.05rem .5rem; }
  /* The banner sits on the accent colour and its button is white, so the text
     needs its own ink: var(--ink) is near-white in dark mode, which put white
     lettering on a white button. */
  #spybar .btn { margin-left:auto; background:#fff; color:#12202b; border-color:#fff; font-weight:600; }
  #spybar .btn:hover { background:#e6f0f7; border-color:#e6f0f7; color:#12202b; }
  body.spying #view, body.spying #paneBody { outline:2px solid var(--accent); outline-offset:-2px; }
  body.spying { padding-bottom:2.6rem; }

  /* Settings, Help and Admins: plain cards, because these are read and acted on
     once in a while rather than scanned. */
  .setwrap { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr)); gap:.8rem;
             align-items:start; }
  .setcard { border:1px solid var(--rule); background:var(--surface); border-radius:6px; padding:.9rem 1rem 1rem; }
  .setcard h2 { margin:0 0 .5rem; font-size:.95rem; font-weight:600; }
  .setcard p.muted { margin:0 0 .6rem; font-size:.82rem; }

  /* Setting the firm up: the eleven stages, and the switches inside stage 7. */
  .setwrap--wide { grid-template-columns:minmax(0,1fr); }
  /* the error log */
  .errlog { display:flex; flex-direction:column; gap:.6rem; max-width:62rem; padding:.7rem 1rem 1.2rem; }
  .errbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
  .errbar .sum { color:var(--ink-2); font-size:.85rem; }
  .errg, .errhelp { border:1px solid var(--rule); background:var(--surface); border-radius:6px; padding:.55rem .8rem; }
  .errg[data-state="open"] { border-left:4px solid var(--st-critical); }
  .errg[data-state="dealt"] { border-left:4px solid var(--st-good); }
  .errg .foldhd b { overflow-wrap:anywhere; }
  .errg .meta, .errocc .meta { color:var(--ink-2); font-size:.8rem; font-weight:400; margin-top:.15rem; overflow-wrap:anywhere; }
  .errsrc { display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
            border:1px solid var(--rule); border-radius:3px; padding:0 .3rem; margin-right:.35rem; color:var(--ink-2); }
  .errocc { margin-top:.5rem; display:flex; flex-direction:column; gap:.45rem; }
  .errocc ul { margin:0; padding-left:1.1rem; font-size:.84rem; }
  .errocc li { margin:.15rem 0; overflow-wrap:anywhere; }
  .errpre { margin:0; max-height:14rem; overflow:auto; font-size:.76rem; white-space:pre-wrap; overflow-wrap:anywhere;
            background:var(--surface-2); border:1px solid var(--rule); border-radius:4px; padding:.45rem .55rem; }
  .erract { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
  .erract input { flex:1; min-width:12rem; }
  .errhelp h3 { font-size:.9rem; margin:.8rem 0 .25rem; }
  .errhelp ol { margin:0; padding-left:1.2rem; font-size:.86rem; }
  .errhelp li { margin:.2rem 0; }
  .setcard--plain { background:var(--surface); }
  .stglist { list-style:none; margin:0; padding:0; }
  .stg { display:grid; grid-template-columns:1.6rem minmax(0,1fr) 5rem 5.5rem; gap:.7rem;
         align-items:baseline; padding:.5rem .3rem; border-top:1px solid var(--rule-soft); }
  .stg:first-child { border-top:0; }
  .stg--here { background:var(--accent-soft); border-radius:5px; }
  .stg__n { font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:.8rem; text-align:right; }
  .stg__t { display:flex; flex-direction:column; min-width:0; }
  .stg__t b { font-size:.9rem; }
  .stg__t .muted { font-size:.79rem; }
  .stg__w { font-size:.75rem; color:var(--ink-3); }
  .stg__s { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
            text-align:right; }
  .stg--done .stg__s { color:var(--good, #1b6b4a); }
  .stg--part .stg__s { color:var(--amber, #8a5d0f); }
  /* no firm is onboarded yet: the setup screen says so before anything else */
  .setlive { margin:0 0 .9rem; padding:.65rem .85rem; border:1.5px solid var(--notlive);
             border-left-width:4px; border-radius:3px; font-size:.86rem; line-height:1.45; color:var(--ink); }
  .setlive b { color:var(--notlive); }
  .stg--todo .stg__s { color:var(--ink-3); }
  .stg--skipped .stg__s { color:var(--ink-3); font-style:italic; }
  .btn.sm { font-size:.74rem; padding:.16rem .5rem; }
  .stgcode.filled { --stg-ink:var(--surface); }
  .stg { grid-template-columns:1.6rem minmax(0,1fr) 4.2rem 4.6rem minmax(7.5rem,auto); }
  .stg__a { display:flex; gap:.3rem; justify-content:flex-end; flex-wrap:wrap; }
  .stg__go { text-align:left; padding:0; }
  .stg__by { font-style:italic; }
  .stg__why { font-size:.76rem; color:var(--amber, #8a5d0f); }
  .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
  .setlive--on { border-color:var(--st-good, #1b6b4a); }
  .setlive--on b { color:var(--st-good, #1b6b4a); }
  .terms { max-height:16rem; overflow:auto; white-space:pre-wrap; font-size:.84rem; border:1px solid var(--rule);
           border-radius:4px; padding:.6rem .75rem; margin:0 0 .6rem; background:var(--surface-2); }
  .words { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr)); gap:.4rem 1.2rem; }
  .lvlist { list-style:none; margin:0 0 .3rem; padding:0; max-height:22rem; overflow:auto; }
  .lv { display:flex; justify-content:space-between; gap:.5rem; align-items:center; padding:.18rem 0;
        border-top:1px solid var(--rule-soft); font-size:.84rem; }
  .lv:first-child { border-top:0; }
  .lv label { display:flex; align-items:center; gap:.35rem; min-width:0; flex:1; }
  .lv--off span { color:var(--ink-3); }
  .lv__name { margin:0 !important; padding:.15rem .35rem; font-size:.84rem; }
  .lv__n { font-size:.72rem; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .setaddrow--2 { grid-template-columns:1fr auto; }
  .lsedit { padding:.7rem 1rem 0; max-width:40rem; }
  .lsedit .setcard { margin-top:.4rem; }
  .setaddrow--4 { grid-template-columns:7rem 1fr 9rem auto; }
  .phtbl td { vertical-align:middle; }
  .phtbl .q { margin:0; }
  .phtbl input[type=color] { width:2.2rem; height:1.7rem; padding:0; border:1px solid var(--rule); border-radius:3px; vertical-align:middle; }
  .ph__mail { max-width:13rem; display:inline-block; }
  .ph__warn { display:block; font-size:.72rem; color:var(--amber, #8a5d0f); }
  .ph--off td { opacity:.55; }
  .week { display:grid; grid-template-columns:repeat(7, minmax(3.2rem,1fr)) auto; gap:.4rem; align-items:end; margin:.2rem 0 .6rem; }
  .week__t { font-size:.84rem; font-weight:600; padding-bottom:.6rem; white-space:nowrap; }
  @media (max-width:820px){ .stg { grid-template-columns:1.4rem minmax(0,1fr) 4.6rem; }
                            .stg__a { grid-column:2 / -1; justify-content:flex-start; }
                            .week { grid-template-columns:repeat(4, 1fr); }
                            .setaddrow--4 { grid-template-columns:1fr 1fr; } }
  @media (max-width:820px){ .stg { grid-template-columns:1.4rem minmax(0,1fr) 5.5rem; }
                            .stg__w { display:none; } }

  .modcols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr)); gap:.8rem; }
  .modlist { list-style:none; margin:0; padding:0; }
  .mod { display:grid; grid-template-columns:1.5rem minmax(0,1fr) 7.5rem; gap:.6rem; align-items:baseline;
         padding:.42rem .2rem; border-top:1px solid var(--rule-soft); }
  .mod:first-child { border-top:0; }
  .mod__t { display:flex; flex-direction:column; min-width:0; }
  .mod__t b { font-size:.87rem; }
  .mod__t .muted { font-size:.74rem; }
  .mod__n { font-size:.76rem; color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums; }
  .mod--off .mod__t b { color:var(--ink-3); }
  .mod--na { opacity:.6; }
  .mod--na .mod__b { text-align:center; color:var(--ink-3); }

  /* Stages 4 and 5: the firm's own details, and where its work lives. */
  .fsetgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
              gap:.5rem .8rem; margin:.2rem 0 .6rem; }
  .fset { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
  .fset__k { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); }
  .fset .q { width:100%; box-sizing:border-box; }
  .fset__c { font-size:.66rem; color:var(--ink-3); font-family:ui-monospace,Menlo,Consolas,monospace; }
  .fset input[data-saved] { border-color:var(--accent); }
  .drv__h { margin:1rem 0 .3rem; font-size:.86rem; }
  /* Technical alerts go to (0255): the people named, each removable, and one picker to add. */
  .tal { display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; margin:.2rem 0 .6rem; }
  .tal__list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
  .tal__p { display:inline-flex; align-items:center; gap:.2rem; border:1px solid var(--rule); border-radius:999px;
            padding:.15rem .2rem .15rem .65rem; font-size:.84rem; }
  .tal__p--gone { border-style:dashed; color:var(--ink-3); }
  .tal__none { margin:0; font-size:.84rem; }
  .tal .q { max-width:100%; min-width:min(16rem,100%); }
  .scrollx { overflow-x:auto; }
  table.drv { width:100%; border-collapse:collapse; font-size:.82rem; }
  table.drv th { text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
                 color:var(--ink-3); border-bottom:1px solid var(--rule); padding:.3rem .5rem .3rem 0;
                 white-space:nowrap; font-weight:600; }
  table.drv td { padding:.3rem .5rem .3rem 0; border-bottom:1px solid var(--rule-soft); }
  table.drv .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  table.drv .warn { color:var(--brick); font-weight:600; }
  table.drv tfoot td { border-top:1px solid var(--rule); border-bottom:0; font-weight:600; }
  .drv__s { list-style:none; margin:.2rem 0 .6rem; padding:0; font-size:.8rem; }
  .drv__s li { padding:.2rem 0; border-top:1px solid var(--rule-soft); }
  .drv__s li:first-child { border-top:0; }
  .drv__s .mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem; color:var(--ink-2); }
  .setcard .q { width:100%; margin:0 0 .5rem; }
  .setrow { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding:.3rem 0; }
  .setrow .k { min-width:7.5rem; font-size:.78rem; color:var(--ink-3); }
  .setrow .muted { font-size:.76rem; }
  .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
  .btn[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); font-weight:600; }
  .canlist { margin:.2rem 0 .7rem; padding-left:1.1rem; font-size:.82rem; color:var(--ink-2); }
  .canlist li { margin:.1rem 0; }
  .subnav { display:flex; flex-direction:column; gap:.1rem; margin:.1rem 0 .2rem .7rem;
            border-left:1px solid rgba(255,255,255,.14); padding-left:.4rem; }
  .subnav button { font-size:.82rem; padding:.3rem .5rem; }
  .brand { display:block; width:100%; text-align:left; cursor:pointer; background:none; border:0; }
  .brand:hover span { color:#c3d2df; }

  /* Projects | Jobs: two ways into the same work, in the heading rather than as
     two entries in the column. */
  .pjsw { display:inline-flex; gap:.25rem; margin-left:.8rem; vertical-align:middle; }
  .pjsw button { all:unset; cursor:pointer; font-size:.78rem; padding:.22rem .6rem; border-radius:999px;
                 border:1px solid var(--rule); color:var(--ink-3); }
  .pjsw button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft);
                                      color:var(--ink); font-weight:600; }

/* two-step sign-in (39-two-step.js): the key typed into an authenticator, and the recovery codes */
/* the QR code: dark modules on a white tile in both themes, as scanners need; its
   quiet zone is inside the SVG. 15rem is a phone held to a ~900px-wide screen. */
.tsscan { margin: .2rem 0 .5rem; }
.tsqr { width: 15rem; max-width: 100%; aspect-ratio: 1; margin: 0 auto .6rem; background: #fff; border-radius: 6px; line-height: 0; }
.tsqr svg { display: block; width: 100%; height: 100%; }
.tsmanual { margin: 0 0 .6rem; font-size: .9rem; }
.tsmanual summary { cursor: pointer; color: var(--ink-3); font-size: .85rem; }
.tskey { font-family: var(--mono, ui-monospace, monospace); font-size: 1.05rem; letter-spacing: .06em; user-select: all; }
.tscodes { font-family: var(--mono, ui-monospace, monospace); background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; padding: .6rem .8rem; user-select: all; }
.tsremember { display: flex; gap: .45rem; align-items: center; margin: .5rem 0 .2rem; font-size: .9rem; }