/* Filling in a week: a box per day, in tenths of an hour. */
  .tsweek .tscell { width:4.2rem; font:inherit; font-size:.85rem; text-align:right; padding:.2rem .35rem;
                    border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .tsweek .tscell:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  .tsweek .tscell:disabled { background:var(--surface-2); color:var(--ink-3); }
  .tsweek .tsname { white-space:normal; }
  .tsadd { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; padding:.6rem .1rem .2rem; }
  .tsadd .grow { flex:1; }
  .tsleave { display:flex; gap:1.2rem; flex-wrap:wrap; padding:.6rem .1rem 0; border-top:1px solid var(--rule-soft);
             margin-top:.6rem; }
  .tsleave div { display:flex; flex-direction:column; }
  .tsleave b.over { color:var(--brick); }
  .gdl { margin-left:auto; }
  [data-gcol] { position:relative; }
  .gres { position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:1; }
  .gres:hover { background:var(--accent); opacity:.4; }
  .evwho { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.15rem .6rem; max-height:10rem; overflow:auto; margin:0 0 .5rem; }
  .pty { display:flex; flex-direction:column; }
  .pty .muted { font-size:.76rem; }
  /* an address has no spaces to wrap at; without this one recipient pushed
     a job's correspondence past a 900px window */
  .pty b, .pty .muted { overflow-wrap:anywhere; }
  /* a name wraps between words, never inside one; an address wraps anywhere */
  .corrtbl .pty b:not(.addr) { overflow-wrap:normal; }
  .ftl { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3, var(--ink-2)); }
  .pty + .ftl, .pty + .muted + .ftl { margin-top:.3rem; }
  .mailtbl td { vertical-align:top; }
  .cview { display:grid; grid-template-columns:minmax(12rem,17rem) 1fr; gap:1rem; height:calc(100vh - 7.5rem); min-height:0; }
  .cpick { display:flex; flex-direction:column; min-height:0; gap:.5rem; }
  .cpick input { width:100%; box-sizing:border-box; }
  .cplist { overflow:auto; min-height:0; flex:1; border:1px solid var(--rule); border-radius:8px; }
  .cpj { all:unset; box-sizing:border-box; display:grid; grid-template-columns:auto 1fr auto; gap:.15rem .55rem; width:100%;
         padding:.45rem .65rem; cursor:pointer; border-bottom:1px solid var(--rule); font-size:.86rem; }
  .cpj:hover { background:var(--accent-soft); }
  .cpj[aria-current="true"] { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
  .cpj b { color:var(--accent); }
  .cpj .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cmain { display:flex; flex-direction:column; min-height:0; min-width:0; }
  .cmhead { padding:0 0 .4rem; }
  @media (max-width: 760px) { .cview { grid-template-columns:1fr; height:auto; } .cplist { max-height:14rem; } }
  /* below a desk monitor the register needs the room: the picker keeps the
     numbers and counts, and names the project on hover */
  .cpsel { display:none; }
  @media (max-width: 1100px) { .cview { grid-template-columns:1fr; } .cpick { display:none; } .cpsel { display:block; margin-top:.35rem; max-width:100%; } }
  /* in a very narrow register, who sent it already says which way it went */
  .msub { cursor:pointer; max-width:28rem; }
  .mfile .mjob { width:7.5rem; margin:0; padding:.15rem .35rem; }
  .msug { font-size:.74rem; color:var(--accent); }
  .mfiled td { opacity:.7; }
  .mailnote { padding:0 1rem; font-size:.8rem; }
  .nowrap { white-space:nowrap; }
  .caldates { font-size:.82rem; padding:.35rem .6rem; margin:0 0 .4rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); line-height:1.7; }
  .caldates > b { margin-right:.4rem; }
  .notew { display:flex; flex-direction:column; gap:.4rem; margin:0 0 .8rem; max-width:48rem; }
  .notew .q { margin:0; }
  .notew__row { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
  .notew__row select { max-width:14rem; }
  .stage__appr { margin:.2rem 0 .4rem; font-size:.84rem; }
  .stage__appr .mono { font-family:ui-monospace,Menlo,Consolas,monospace; }
  .tsleave .k { font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); }
  .tsleave b { font-size:1.05rem; font-variant-numeric:tabular-nums; }
  .tsleave .muted { font-size:.74rem; }

  /* The address book on one screen: the list down the left of everything, the
     person and their company side by side at the top of the rest, and what
     there is to say about each of them underneath, in that order. */
  .cardpage { display:grid; gap:.7rem; align-items:start;
              grid-template-columns:minmax(12rem,23%) minmax(0,1fr) minmax(0,1fr);
              grid-template-areas:"rail pcard ccard" "rail sum sum"; }
  /* while the next card is on its way the page stays readable and stops taking
     clicks, rather than being replaced by the word "Loading" */
  .cardpage[aria-busy="true"] { opacity:.72; pointer-events:none; }
  .cardpage > .crail      { grid-area:rail; }
  .cardpage > .ccard--p   { grid-area:pcard; }
  .cardpage > .ccard--c   { grid-area:ccard; }
  .cardpage > .cdetail--sum { grid-area:sum; }
  .cardpage > .cnewpane   { grid-area:add; }
  .cardpage.adding { grid-template-columns:minmax(12rem,23%) minmax(0,1fr);
                     grid-template-areas:"rail add"; }
  /* The three columns hold down to a genuinely small window; below that the two
     cards stack beside the list rather than the list disappearing. */
  @media (max-width:820px){
    .cardpage { grid-template-columns:minmax(10rem,32%) minmax(0,1fr);
                grid-template-areas:"rail pcard" "rail ccard" "rail sum"; }
    .cardpage.adding { grid-template-columns:minmax(10rem,32%) minmax(0,1fr);
                       grid-template-areas:"rail add"; } }
  @media (max-width:640px) {
    .cardpage       { grid-template-columns:minmax(0,1fr);
                      grid-template-areas:"rail" "pcard" "ccard" "sum"; }
    .cardpage.adding{ grid-template-columns:minmax(0,1fr); grid-template-areas:"rail" "add"; }
    /* more specific than the unconditional rule further down, which is written
       for a screen where the list stands beside the card instead of above it */
    .cardpage .crail__list { max-height:14rem; }
    .cardpage .crow__r     { display:none; } }

  .crail { border:1px solid var(--rule); background:var(--surface); border-radius:8px; overflow:hidden; }
  .crail__top { padding:.55rem; border-bottom:1px solid var(--rule-soft); }
  .crail__top .q { width:100%; }
  .crail__list { max-height:calc(100vh - var(--topbar-h,48px) - 9.5rem); overflow:auto; }
  .crow { all:unset; cursor:pointer; display:flex; gap:.45rem; align-items:center; width:100%;
          padding:.32rem .45rem; border-bottom:1px solid var(--rule-soft); box-sizing:border-box; }
  .crow:hover { background:var(--surface-2); }
  .crow.on { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
  .crow__av { width:1.7rem; height:1.7rem; border-radius:50%; background:var(--accent); color:#fff;
              display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700;
              flex:0 0 auto; }
  .crow__av.co { border-radius:5px; background:var(--ink-2); }
  .crow__t { flex:1; min-width:0; display:flex; flex-direction:column; }
  .crow__t b { font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .crow__t .muted { font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* The two cards are one row: they stand to the same height whichever of them
     has more on it, with a floor set from the page rather than from the text. */
  .ccard { border:1px solid var(--rule); background:var(--surface); border-radius:8px;
           padding:.9rem .85rem 1rem; align-self:stretch;
           min-height:clamp(12rem, 23vh, 19rem); display:flex; flex-direction:column; }
  .ccard__face { display:flex; flex-direction:column; align-items:center; text-align:center; }
  .ccard__face.editing { align-items:stretch; text-align:left; }
  .ccard__av { width:4rem; height:4rem; border-radius:50%; background:var(--accent); color:#fff;
               display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:700;
               letter-spacing:.02em; margin-bottom:.45rem; flex:0 0 auto; }
  .ccard__av.co { border-radius:11px; background:var(--ink-2); }
  .ccard h2 { margin:0; font-size:1.02rem; line-height:1.25; text-wrap:balance; }
  .ccard__sub { margin:.1rem 0 0; font-size:.8rem; color:var(--ink-3); }
  .ccard__chips { display:flex; gap:.25rem; flex-wrap:wrap; justify-content:center; margin:.4rem 0 .1rem; }
  .chip { font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--rule);
          border-radius:999px; padding:.1rem .5rem; color:var(--ink-3); background:var(--surface-2); }
  .chip.warn { border-color:var(--brick); color:var(--brick); }
  .ccard__lines { width:100%; margin:.6rem 0 .55rem; display:flex; flex-direction:column; gap:.25rem; }
  .cline { display:flex; gap:.4rem; align-items:center; justify-content:center; font-size:.82rem; }
  .cline .ci { width:1.25rem; height:1.25rem; border-radius:50%; background:var(--accent-soft); color:var(--accent);
               display:flex; align-items:center; justify-content:center; font-size:.7rem; flex:0 0 auto; }
  .cline a { word-break:break-word; }
  .btn.wide, .muted.wide { display:block; width:100%; text-align:center; box-sizing:border-box; margin-top:.3rem; }
  a.btn.wide { text-decoration:none; padding:.4rem .6rem; }
  .ccard__acts { display:flex; gap:.35rem; justify-content:center; margin-top:.4rem; flex-wrap:wrap; }
  .ccard__by { margin:.5rem 0 0; font-size:.7rem; color:var(--ink-3); }
  .ccard .cform { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .6rem; margin:.8rem 0; }
  .ccard .cform label { display:flex; flex-direction:column; gap:.2rem; font-size:.68rem; text-transform:uppercase;
                        letter-spacing:.07em; color:var(--ink-3); }
  .ccard .cform label.wide { grid-column:1 / -1; }
  .ccard .cform label.check { flex-direction:row; align-items:center; gap:.4rem; text-transform:none;
                              letter-spacing:0; font-size:.85rem; color:var(--ink-2); }

  .cdetail { border:1px solid var(--rule); background:var(--surface); border-radius:8px; min-width:0; }
  .ctabs { display:flex; gap:.2rem; padding:.5rem .6rem 0; border-bottom:1px solid var(--rule); flex-wrap:wrap; }
  .ctabs button { all:unset; cursor:pointer; font-size:.82rem; padding:.4rem .7rem; border-radius:6px 6px 0 0;
                  color:var(--ink-3); border:1px solid transparent; border-bottom:0; }
  .ctabs button[aria-pressed="true"] { color:var(--ink); font-weight:600; background:var(--surface);
                                       border-color:var(--rule); margin-bottom:-1px; }
  .cbody { padding:.7rem .8rem .9rem; }
  .cgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }
  .cbody h3 { margin:0 0 .5rem; font-size:.9rem; }
  .cbody h4 { margin:0 0 .4rem; font-size:.82rem; }
  .cact { list-style:none; margin:0; padding:0; }
  .cact li { display:flex; gap:.7rem; padding:.45rem 0; border-top:1px solid var(--rule-soft); font-size:.85rem; }
  .cact li:first-child { border-top:0; }
  .cact__d { color:var(--ink-3); font-size:.75rem; white-space:nowrap; min-width:5.5rem; }
  .cact__t { min-width:0; }
  .cact .muted { font-size:.78rem; }
  .jobtag { all:unset; cursor:pointer; font-size:.7rem; border:1px solid var(--rule); border-radius:4px;
            padding:.05rem .3rem; color:var(--accent); }
  .clist { list-style:none; margin:0; padding:0; max-height:26rem; overflow:auto; }
  .clist li { border-top:1px solid var(--rule-soft); }
  .clist li:first-child { border-top:0; }
  .clist button { all:unset; cursor:pointer; display:block; width:100%; padding:.4rem .2rem; font-size:.85rem; }
  .clist button:hover { background:var(--surface-2); }
  .cnew { border:1px solid var(--rule); background:var(--surface); border-radius:8px;
          padding:.8rem 1rem 1rem; margin-bottom:.8rem; }
  .cnew h3 { margin:0 0 .3rem; font-size:.95rem; }

  /* The rail is the address book now, so it carries what the grid carried:
     the search, the people/companies filter, the sort and the count. */
  .crail__head { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin-top:.45rem; }
  .crail__head .seg { all:unset; cursor:pointer; padding:.12rem .55rem; border:1px solid var(--rule);
                      border-radius:999px; font-size:.72rem; color:var(--ink-3); }
  .crail__head .seg:hover { background:var(--surface-2); }
  .crail__head .seg[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
  .crail__n { font-size:.72rem; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-left:auto; }
  .crail__head .crail__dl { margin-left:auto; color:var(--accent); border-color:var(--accent); text-decoration:none; }
  .crail__more { padding:.55rem; font-size:.74rem; color:var(--ink-3); text-align:center; }
  .crow__r { margin-left:auto; flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:.1rem; }
  .crow__r .muted { font-size:.68rem; white-space:nowrap; }
  /* the card keeps its narrow shape however wide its column gets */
  .ccard__face { width:100%; max-width:21rem; margin-inline:auto; }
  .ccard__face.editing { max-width:30rem; }

  .ctabs__who { font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
                align-self:center; }
  /* one heading for the pair, with the way down a level at its right */
  .csum__top { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
               padding:.5rem .8rem; border-bottom:1px solid var(--rule); }
  .csum__acts { margin-left:auto; display:flex; gap:.35rem; flex-wrap:wrap; }
  .btn.sm { font-size:.74rem; padding:.22rem .55rem; }
  .csum__people { margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--rule-soft); }
  .cn { font-weight:400; color:var(--ink-3); font-size:.78rem; font-variant-numeric:tabular-nums; }
  .ccard__open { all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center;
                 width:100%; border-radius:8px; padding:.2rem 0; }
  .ccard__open:hover h2 { color:var(--accent); text-decoration:underline; }
  .ccard__open:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .ccard__face.editing .ccard__open { display:none; }

  /* A company's people, each as a line worth having rather than a name that
     only tells you its own name. */
  .cpl { list-style:none; margin:0; padding:0; }
  .cpl__h, .cpl > li { display:grid; gap:.4rem; align-items:center;
      grid-template-columns:1.5rem minmax(7rem,1.5fr) minmax(0,1.5fr)
                            minmax(5.5rem,.85fr) minmax(5.5rem,.85fr) 3.4rem; }
  .cpl__h { font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3);
            padding:0 .35rem .25rem; }
  .cpl__star { all:unset; cursor:pointer; text-align:center; font-size:.95rem; line-height:1;
               color:var(--ink-3); width:1.5rem; }
  button.cpl__star:hover { color:var(--amber, #b8860b); }
  .cpl__star[aria-pressed="true"] { color:var(--accent); }
  .cpl__h .cpl__star { cursor:default; font-size:.8rem; }
  /* the long list gets its own scroller, so the tabs under it stay reachable */
  .cpl { max-height:min(62vh,38rem); overflow:auto; }
  .cpl > li { border-top:1px solid var(--rule-soft); font-size:.82rem; padding:0 .35rem; }
  .cpl > li:hover { background:var(--surface-2); }
  .cpl > li.on { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
  .cpl__pick { all:unset; cursor:pointer; display:flex; gap:.45rem; align-items:center;
               padding:.4rem 0; min-width:0; }
  .cpl__caret { color:var(--ink-3); font-size:.7rem; width:.7rem; flex:0 0 auto; }
  .cpl > li.on .cpl__caret { color:var(--accent); }
  /* what has passed between the firm and this one person, under their name */
  .cpl__more { grid-column:1 / -1; padding:.2rem 0 .8rem 2.2rem; }
  .cpl__more h4 { margin:0 0 .35rem; font-size:.78rem; text-transform:uppercase;
                  letter-spacing:.06em; color:var(--ink-3); font-weight:600; }
  .cpl__more .cact li { padding:.3rem 0; }
  .cpl__more .clist { max-height:14rem; }
  @media (max-width:820px){ .cpl__more { padding-left:.2rem; } }
  .cpl__n { display:flex; flex-direction:column; min-width:0; }
  .cpl__n b { font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cpl__n .muted { font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cpl__c { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; }
  .cpl__j { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:.8rem; }
  /* mobile is dropped before phone, and both before the name */
  @media (max-width:1150px){ .cpl__c--m { display:none; }
    .cpl__h, .cpl > li { grid-template-columns:1.5rem minmax(6rem,1.4fr) minmax(0,1.5fr)
                                               minmax(5.5rem,.9fr) 3.2rem; } }
  @media (max-width:820px){
    .cpl__h { display:none; }
    .cpl > li { grid-template-columns:1.5rem minmax(0,1fr); padding:.25rem .35rem .45rem;
                row-gap:.1rem; }
    .cpl > li > .cpl__c, .cpl > li > .cpl__j { grid-column:2; }
    .cpl__c--m { display:none; }
    .cpl__j::before { content:"On file: "; color:var(--ink-3); }
    .cpl > li > .cpl__j { text-align:left; } }

  .copens { margin:0 0 .6rem; padding:.3rem .5rem; border-radius:5px; text-align:center;
            font-size:.72rem; color:var(--ink-3); background:var(--surface-2);
            border:1px solid var(--rule-soft); }
  .copens.on { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-soft);
               font-weight:600; }
  .chip.good { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

  .cblank { padding:1.6rem 1.2rem; text-align:center; color:var(--ink-3); font-size:.86rem; }
  .cblank b { display:block; color:var(--ink-2); margin-bottom:.3rem; font-size:.95rem; }
  .cnewpane { border:0; }

  /* The contact form: one dialog for adding and correcting, a person or a
     company, laid out the way DeskHawk's Edit Contact was -- the name across
     the top, work under it, then where they are and how to reach them side by
     side, then the dates and the note. Sized for the ~900px the firm's
     screens actually report, where the name row still fits on one line. */
  /* .docdlg caps a dialog at 38rem, which is right for a question and too narrow for a form */
  #ctDlg { width:min(54rem, calc(100vw - 2rem)); max-width:none; max-height:calc(100vh - 2rem); padding:0; overflow:hidden; }
  #ctDlg[open] { display:flex; flex-direction:column; }
  #ctForm { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
  #ctForm .ct__body { flex:1 1 auto; min-height:0; }
  .ct__head { display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
              padding:.95rem 1.25rem .8rem; border-bottom:1px solid var(--rule-soft); }
  .ct__head h3 { margin:0; font-size:1.05rem; }
  .ct__kind { display:inline-flex; border:1px solid var(--rule); border-radius:6px; overflow:hidden; margin-left:auto; }
  .ct__kind button { all:unset; cursor:pointer; padding:.32rem .85rem; font-size:.8rem; color:var(--ink-2); }
  .ct__kind button + button { border-left:1px solid var(--rule); }
  .ct__kind button[aria-pressed="true"] { background:var(--accent); color:#fff; }
  .ct__kind button:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
  .ct__body { overflow:auto; padding:1rem 1.25rem 1.25rem; display:grid; gap:1.15rem; }
  .ct__sec { display:grid; gap:.6rem .8rem; align-content:start; }
  .ct__sec > h4 { grid-column:1 / -1; margin:0; padding-bottom:.3rem; border-bottom:1px solid var(--rule-soft);
                  font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
  .ct__sec > h4 small { text-transform:none; letter-spacing:0; font-weight:400; font-size:.72rem; margin-left:.4rem; }
  .ct__f { display:flex; flex-direction:column; gap:.22rem; min-width:0; position:relative; }
  .ct__f > span, .ct__f > label > span { font-size:.74rem; color:var(--ink-2); }
  .ctform input:not([type="checkbox"]):not([type="radio"]), .ctform select, .ctform textarea {
    width:100%; min-width:0; font:inherit; font-size:.88rem; padding:.42rem .55rem; margin:0;
    border:1px solid var(--rule); border-radius:4px; background:var(--bg); color:var(--ink); }
  .ctform textarea { min-height:6.6rem; resize:vertical; line-height:1.45; }
  .ctform input:focus, .ctform select:focus, .ctform textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
  .ct__sec > p, .ct__sec > .ct__check { grid-column:1 / -1; margin:0; }
  .ct__f.wide { grid-column:1 / -1; }
  .ct__hint { margin:0; font-size:.74rem; color:var(--ink-3); }
  .ct__hint.bad { color:var(--st-critical); }
  .ct__link { all:unset; cursor:pointer; color:var(--accent); font-size:.76rem; text-decoration:underline; }
  .ct__link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .ct__name { grid-template-columns:1.35fr 1.35fr 1fr 6.4rem 4.6rem; }
  .ct__work { grid-template-columns:1fr 1fr; }
  .ct__two  { display:grid; grid-template-columns:1fr 1fr; gap:1.15rem 1.6rem; }
  .ct__loc  { grid-template-columns:minmax(4.5rem, 5rem) minmax(5rem, 6rem) minmax(5rem, 1fr); }
  .ct__loc .ct__f.addr, .ct__loc .ct__f.city { grid-column:1 / -1; }
  .ct__reach { grid-template-columns:1fr 1fr; }
  .ct__reach .ct__f.wide { grid-column:1 / -1; }
  .ct__co3  { grid-template-columns:2fr 1fr 1fr; }
  .ct__check { display:flex; align-items:center; gap:.45rem; font-size:.86rem; color:var(--ink); }
  .ct__check input { width:auto; margin:0; }
  .ct__giftw { grid-column:1 / -1; display:grid; }
  /* the company picker: what is already here, and adding a new one on purpose */
  .ct__opts { position:absolute; top:100%; left:0; right:0; z-index:6; margin-top:2px;
              background:var(--surface); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow);
              max-height:15rem; overflow:auto; }
  .ct__opts button { display:block; width:100%; text-align:left; padding:.42rem .6rem; border:0; background:none;
                     color:var(--ink); font:inherit; font-size:.86rem; cursor:pointer; }
  .ct__opts button[aria-selected="true"], .ct__opts button:hover { background:var(--accent-soft); }
  .ct__opts em { font-style:normal; color:var(--ink-3); font-size:.76rem; margin-left:.45rem; }
  .ct__opts .new { border-top:1px solid var(--rule-soft); color:var(--accent); }
  /* lists inside the form: other emails, dated reminders */
  .ct__list { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
  .ct__list li { display:grid; grid-template-columns:1fr auto; gap:.4rem; align-items:center; font-size:.86rem; }
  .ct__list li.rem { grid-template-columns:1fr 9.4rem auto; }
  .ct__x { all:unset; cursor:pointer; color:var(--ink-3); padding:.1rem .4rem; border-radius:4px; font-size:1rem; line-height:1; }
  .ct__x:hover { color:var(--st-critical); background:var(--accent-soft); }
  .ct__x:focus-visible { outline:2px solid var(--accent); }
  .ct__addrow { display:grid; grid-template-columns:1fr auto; gap:.4rem; }
  /* "Search first", done for them */
  .ct__match { border:1px solid var(--st-warning); border-left-width:3px; border-radius:4px; padding:.55rem .75rem;
               background:var(--surface); display:grid; gap:.3rem; }
  .ct__match > b { font-size:.8rem; color:var(--st-warning); }
  .ct__match div { display:flex; gap:.6rem; align-items:baseline; font-size:.85rem; flex-wrap:wrap; }
  .ct__match div span { color:var(--ink-3); font-size:.78rem; }
  .ct__match div .why { color:var(--st-warning); font-weight:600; }
  .ct__foot { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding:.8rem 1.25rem;
              border-top:1px solid var(--rule-soft); background:var(--surface); }
  .ct__msg { margin:0 0 0 .4rem; color:var(--st-critical); font-size:.82rem; }
  .ct__aside { margin:0; font-size:.8rem; color:var(--ink-3); border-left:2px solid var(--rule); padding-left:.65rem; }
  @media (max-width:46rem) {
    .ct__name { grid-template-columns:1fr 1fr; }
    .ct__two, .ct__co3 { grid-template-columns:1fr; }
  }


  /* Onboarding: the staff record a step at a time. The steps down the left say
     which are finished and what is still empty; each saves when it is left. */
  #obDlg { width:min(60rem, calc(100vw - 2rem)); max-width:none; max-height:calc(100vh - 2rem); padding:0; overflow:hidden; }
  #obDlg[open] { display:flex; flex-direction:column; }
  #obForm { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
  .ob__main { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:12.5rem 1fr; }
  .ob__steps { list-style:none; margin:0; padding:.8rem .6rem; border-right:1px solid var(--rule-soft);
               overflow:auto; display:grid; gap:.2rem; align-content:start; }
  .ob__steps button { all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid;
                      grid-template-columns:1.6rem 1fr; gap:.1rem .5rem; padding:.45rem .5rem; border-radius:6px; }
  .ob__steps button:hover { background:var(--accent-soft); }
  .ob__steps button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .ob__steps button[aria-current="step"] { background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
  .ob__n { grid-row:span 2; width:1.45rem; height:1.45rem; border-radius:50%; border:1.5px solid var(--rule);
           display:grid; place-items:center; font-size:.72rem; color:var(--ink-3); align-self:start; }
  .ob__steps .done .ob__n { background:var(--st-good); border-color:var(--st-good); color:#fff; }
  .ob__t { font-size:.84rem; color:var(--ink); }
  .ob__l { font-size:.72rem; color:var(--ink-3); line-height:1.3; }
  .ob__steps .done .ob__l { color:var(--st-good); }
  .ob__pane { overflow:auto; padding:1rem 1.25rem 1.25rem; display:grid; gap:1.1rem; align-content:start; }
  .ob__card { border:1px solid var(--rule); border-radius:6px; padding:.7rem .8rem; display:grid; gap:.55rem .7rem;
              grid-template-columns:2fr 4.6rem 1.2fr; position:relative; }
  .ob__card.em { grid-template-columns:1.5fr 1fr 1fr 1fr; }
  .ob__card .wide2 { grid-column:span 2; }
  .ob__card > .ct__x { position:absolute; top:.25rem; right:.3rem; }
  .ob__pw { border:1.5px solid var(--st-good); border-radius:6px; padding:.75rem .9rem; display:grid; gap:.4rem; }
  .ob__pw code { font-size:1.15rem; letter-spacing:.06em; user-select:all; }
  .ob__warn { border:1.5px solid var(--st-warning); border-radius:6px; padding:.65rem .85rem; font-size:.86rem; }
  .ob__left { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
  .ob__left li { display:flex; gap:.6rem; align-items:baseline; font-size:.9rem; }
  .ob__left li span { color:var(--ink-3); font-size:.8rem; }
  .ob__tbl { width:100%; border-collapse:collapse; font-size:.86rem; }
  .ob__tbl th { text-align:left; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
                font-weight:600; padding:.3rem .5rem .3rem 0; border-bottom:1px solid var(--rule); }
  .ob__tbl td { padding:.4rem .5rem .4rem 0; border-bottom:1px solid var(--rule-soft); vertical-align:middle; }
  .ob__tbl td.num { font-variant-numeric:tabular-nums; }
  .ob__cats { display:flex; flex-wrap:wrap; gap:.35rem; }
  .ob__cats button { all:unset; cursor:pointer; padding:.22rem .65rem; border:1px solid var(--rule); border-radius:999px;
                     font-size:.8rem; color:var(--ink-2); }
  .ob__cats button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
  .ob__cats button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .ob__cats button[disabled] { cursor:default; opacity:.7; }
  .setaddrow { display:grid; grid-template-columns:1fr 9rem auto auto; gap:.5rem; align-items:center; margin-top:.7rem; }
  @media (max-width:46rem) { .setaddrow { grid-template-columns:1fr 1fr; } }
  .ccard__staff { display:flex; gap:.5rem; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:.5rem; }
  @media (max-width:46rem) {
    .ob__main { grid-template-columns:1fr; }
    .ob__steps { grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; border-right:0;
                 border-bottom:1px solid var(--rule-soft); }
    .ob__card, .ob__card.em { grid-template-columns:1fr 1fr; }
  }

  /* what the card carries beyond reaching them: dates, the card list, the note */
  .ccard__cred { font-weight:400; color:var(--ink-3); font-size:.8em; }
  .ccard__about { margin:.7rem 0 0; padding-top:.6rem; border-top:1px dotted var(--rule); font-size:.82rem; }
  .ccard__about ul { list-style:none; margin:0 0 .4rem; padding:0; display:flex; flex-wrap:wrap; gap:.25rem .9rem; }
  .ccard__about li span { color:var(--ink-3); margin-right:.3rem; }
  .ccard__note { margin:0; white-space:pre-wrap; color:var(--ink-2); max-height:7.5rem; overflow:auto; }
  .ccard__note::before { content:"Note"; display:block; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }