/* Understory, from the practice brand system. Self-hosted fonts so the CSP
   stays at font-src 'self' and the console loads nothing from anyone. */
@font-face{font-family:'Fraunces';font-weight:300 700;font-display:swap;
  src:url('/assets/fonts/fraunces-300-700-latin.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;
  src:url('/assets/fonts/atkinson-400-latin.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;
  src:url('/assets/fonts/atkinson-700-latin.woff2') format('woff2')}

:root{
  --ground:#EBEDE6; --surface:#F7F8F4; --band:#E1E5DA;
  --ink:#17231C; --muted:#4A574E; --fir:#1F3A2E; --field:#14342A;
  --aspen:#7A5510; --gold-on-field:#D9A63F;
  --field-ink:#F2F4EF; --field-muted:#C3D0C4; --rule:#D3D8CC; --note:#F0EAD8;
  --ok:#2C5741; --ok-soft:#DEE7DF;
  --warn:#7A5510; --warn-soft:#F0EAD8;
  --stop:#8C3A24; --stop-soft:#F1E1DB;
  --radius:3px;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);color:var(--fir);margin:0;font-weight:600;letter-spacing:-.01em}
[hidden]{display:none!important}

.masthead{background:var(--surface);border-bottom:1px solid var(--rule);
  padding:13px 22px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.brandlock{display:flex;align-items:center;gap:11px;color:var(--fir)}
/* The practice emblem, the same file the marketing site serves. It is
   watercolor on an opaque white ground with no alpha channel, so it is
   multiplied into the masthead rather than sitting on it as a white box.
   Same treatment as the website, for the same reason. */
.brandlock .emblem{height:38px;width:auto;flex:none;mix-blend-mode:multiply}
.brandlock b{font-family:var(--serif);font-size:19px;display:block;letter-spacing:-.015em}
.brandlock small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.session{margin-left:auto;text-align:right;font-size:12px;color:var(--muted)}
.session b{display:block;color:var(--ink);font-size:12.5px}
.linkish{font:inherit;font-size:12px;background:none;border:0;color:var(--aspen);
  cursor:pointer;padding:0;text-decoration:underline}

.shell{display:grid;grid-template-columns:188px minmax(0,1fr);align-items:stretch;min-height:80vh}
@media(max-width:840px){.shell{grid-template-columns:1fr}}
.rail{background:var(--field);color:var(--field-ink);padding:16px 10px;
  display:flex;flex-direction:column;gap:2px}
@media(max-width:840px){.rail{flex-direction:row;flex-wrap:wrap}}
.rail-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--field-muted);padding:2px 11px 10px}
.rail button{font:inherit;font-size:14px;text-align:left;cursor:pointer;background:none;
  border:0;border-left:2px solid transparent;color:var(--field-muted);
  padding:7px 11px;display:flex;justify-content:space-between;align-items:center;gap:9px}
.rail button:hover{color:var(--field-ink);background:rgba(255,255,255,.05)}
.rail button[aria-current="true"]{color:var(--gold-on-field);border-left-color:var(--gold-on-field);
  background:rgba(255,255,255,.06);font-weight:700}
.rail .count{font-size:11px;font-weight:700;color:var(--field);background:var(--gold-on-field);
  min-width:18px;text-align:center;padding:0 5px;border-radius:20px;font-variant-numeric:tabular-nums}
:where(.rail button,.linkish):focus-visible{outline:2px solid var(--gold-on-field);outline-offset:2px}

.stage{padding:20px 22px 36px;min-width:0}
.screen-head{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
  justify-content:space-between;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--rule)}
.screen-head h2{font-size:20px}
.meta{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.boot{color:var(--muted)}
.error{background:var(--stop-soft);border:1px solid var(--stop);color:var(--stop);
  border-radius:var(--radius);padding:11px 13px;margin-top:16px}

.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.panel>h3{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--muted);
  letter-spacing:.13em;text-transform:uppercase;padding:9px 14px;border-bottom:1px solid var(--rule)}

.attn{list-style:none;margin:0;padding:0}
.attn li{display:flex;gap:11px;align-items:stretch;padding:10px 14px;border-bottom:1px solid var(--rule)}
.attn li:last-child{border-bottom:0}
.attn .stripe{width:3px;border-radius:2px;flex:none}
.attn .stripe.stop{background:var(--stop)}
.attn .stripe.warn{background:var(--aspen)}
.attn .stripe.info{background:var(--fir)}
.attn strong{display:block;font-weight:700}
.attn span{color:var(--muted);font-size:13px}
.attn .subject{font-weight:700;color:var(--fir)}
.empty{padding:16px 14px;color:var(--muted)}

.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:7px 14px;background:var(--band);
  border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:8px 14px;border-bottom:1px solid var(--rule)}
tr:last-child td{border-bottom:0}
.dat{font-variant-numeric:tabular-nums;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:20px;
  border:1px solid transparent}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.ok{color:var(--ok);background:var(--ok-soft)}
.chip.plain{color:var(--muted);border-color:var(--rule)}
.chip.plain::before{display:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- forms */
.head-actions{display:flex;align-items:center;gap:14px}
.lede{color:var(--muted);max-width:64ch;margin:0 0 16px}
.btn{font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:7px 15px;
  border-radius:var(--radius);background:var(--fir);color:var(--field-ink);border:1px solid var(--fir)}
.btn:hover:not(:disabled){background:var(--field)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--aspen);border-color:var(--rule)}
.btn.ghost:hover{background:var(--note)}
.btn.small{font-size:12px;padding:4px 10px}
.btn:focus-visible{outline:2px solid var(--aspen);outline-offset:2px}

.form .field{padding:12px 14px;border-bottom:1px solid var(--rule)}
.form .field:last-of-type{border-bottom:0}
.form label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.form label.check{display:flex;gap:8px;align-items:center;text-transform:none;
  letter-spacing:0;font-size:13.5px;font-weight:400;color:var(--ink)}
.form input,.form select,.form textarea{font:inherit;font-size:14px;width:100%;
  padding:8px 10px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--ground);color:var(--ink)}
.form input[type=checkbox]{width:auto}
.form textarea{min-height:88px;resize:vertical;line-height:1.5}
.form :is(input,select,textarea):focus{outline:2px solid var(--aspen);outline-offset:1px;border-color:var(--aspen)}
.hint{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.hint.warn{color:var(--aspen)}
.actions{display:flex;gap:9px;justify-content:flex-end;padding:13px 14px;
  background:var(--band);border-top:1px solid var(--rule)}
.signbar{justify-content:space-between}
.signhint{padding:0 14px 13px;margin:0}

.cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:16px}

/* ---------------------------------------------------------------- goals */
.goal{border:1px solid var(--rule);border-radius:var(--radius);margin:12px 14px}
.goal.overdue{border-color:var(--stop)}
.goal-hd{display:flex;gap:11px;align-items:baseline;padding:10px 12px;
  border-bottom:1px solid var(--rule);background:var(--band)}
.goal-n{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--aspen);flex:none;line-height:1}
.goal-stmt{font-weight:700;flex:1;min-width:0}
.goal-body{padding:11px 12px}
.goal-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 9px;font-size:12.5px;color:var(--muted)}
.goal-meta b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:400}
.disp{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.disp button{font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:4px 11px;
  border:1px solid var(--rule);border-radius:20px;background:transparent;color:var(--muted)}
.disp button:hover{border-color:var(--muted);color:var(--ink)}
.disp button[aria-pressed=true]{background:var(--fir);border-color:var(--fir);color:var(--field-ink)}
.disp button[aria-pressed=true].done{background:var(--ok);border-color:var(--ok)}
.disp button[aria-pressed=true].drop{background:var(--stop);border-color:var(--stop)}
.disp button:focus-visible{outline:2px solid var(--aspen);outline-offset:2px}
.sub{border:1px dashed var(--aspen);border-radius:var(--radius);background:var(--note);
  padding:10px 12px;margin-top:9px}
.sub > label{color:var(--aspen)}
.sub .field{padding:0 0 9px;border:0}
.sub .field:last-child{padding-bottom:0}

.blocking{list-style:none;margin:0;padding:0}
.blocking li{padding:9px 14px;border-bottom:1px solid var(--rule);font-size:13px;
  display:flex;gap:9px;align-items:flex-start}
.blocking li::before{content:"";width:3px;align-self:stretch;background:var(--stop);
  border-radius:2px;flex:none}
.blocking li:last-child{border-bottom:0}
.blocking li.clear{color:var(--ok)}
.blocking li.clear::before{background:var(--ok)}
.rowlink{font:inherit;font-size:13px;background:none;border:0;color:var(--aspen);
  cursor:pointer;text-decoration:underline;padding:0}
.chip.warn{color:var(--aspen);background:var(--warn-soft)}
.chip.stop{color:var(--stop);background:var(--stop-soft)}
.chip.info{color:var(--fir);background:var(--band)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:9;
  background:var(--field);color:var(--field-ink);padding:10px 16px;border-radius:var(--radius);
  font-size:13px;box-shadow:0 8px 24px rgba(23,35,28,.18)}

.notice{background:var(--note);border:1px dashed #C9B98E;border-left:3px solid var(--aspen);
  border-radius:var(--radius);padding:11px 13px;color:#4B3B14;font-size:13px;margin:0 0 16px}
.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
.total{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border-bottom:1px solid var(--rule);margin:0}
.total div{padding:12px 14px;border-right:1px solid var(--rule)}
.total div:last-child{border-right:0}
.total dt{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.total dd{margin:3px 0 0;font-family:var(--serif);font-size:20px;color:var(--fir);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
tr.owing td{background:var(--stop-soft)}

.pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;padding:14px}
.pipe-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.pipe-col h4{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0;display:flex;
  justify-content:space-between;gap:6px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.lead{border:1px solid var(--rule);border-radius:var(--radius);background:var(--band);
  padding:9px 10px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.lead.late{border-color:var(--stop);background:var(--stop-soft)}
.lead b{font-weight:700}
.lead em{color:var(--muted);font-size:12px;font-style:normal}
.lead .src{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--aspen)}
.lead .acts{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}

/* Licensure. One row per state, because a license number without its state
   is not an answer to which state authorized the care. */
.licenses{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.licenses h3{font-size:15px;margin-bottom:4px}
.license-row{display:grid;grid-template-columns:5.5rem minmax(0,1fr) 9.5rem auto;
  gap:10px;align-items:end;padding:11px 0;border-bottom:1px dotted var(--rule)}
.license-row .field{margin:0}
.license-row .linkish{padding-bottom:9px}
.license-row .hint{grid-column:1/-1;margin:0}
@media(max-width:640px){.license-row{grid-template-columns:1fr 1fr}}

/* The diagnosis picker. Codes are chosen from the set, never typed, so the
   search sits directly under the field it fills. */
.dx{margin-top:8px}
.dx input{width:100%;max-width:none}
.dx-results{margin-top:6px;border:1px solid var(--rule);border-radius:var(--radius);
  background:#fff;max-height:230px;overflow-y:auto}
.dx-hit{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;
  font:inherit;background:none;border:0;border-bottom:1px solid var(--rule);
  padding:8px 10px;cursor:pointer}
.dx-hit:last-child{border-bottom:0}
.dx-hit:hover,.dx-hit:focus-visible{background:var(--band)}
.dx-hit b{font-variant-numeric:tabular-nums;color:var(--fir);flex:none;min-width:5.2rem}
.dx-hit span{color:var(--muted)}
.dx .hint{margin-top:5px}

/* Form dialogs, replacing what used to be chains of window.prompt. Native
   <dialog>, so Escape closes it and focus is handled without a library. */
dialog.ask{border:1px solid var(--rule);border-radius:var(--radius);padding:0;
  background:var(--surface);color:var(--ink);max-width:32rem;width:calc(100% - 32px)}
dialog.ask::backdrop{background:rgba(20,52,42,.42)}
.ask-body{padding:20px 22px 18px;display:flex;flex-direction:column;gap:12px}
.ask-body h3{font-size:18px;margin:0}
.ask-body .field{margin:0}
.ask-body input,.ask-body select,.ask-body textarea{max-width:none;width:100%}
.ask-body textarea{min-height:4.5rem}
.ask-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:4px;
  padding-top:13px;border-top:1px solid var(--rule)}
@media(prefers-reduced-motion:no-preference){
  dialog.ask[open]{animation:ask-in .13s ease-out}
  @keyframes ask-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* Structured diagnosis. A code, its official title, and how settled it is.
   The qualifier is the reason this is rows rather than a text box: it has to
   survive into the superbill rule and the three-session rule. */
.dx-row{display:grid;grid-template-columns:5.2rem minmax(0,1fr) 8.5rem auto;
  gap:10px;align-items:center;padding:8px 0;border-bottom:1px dotted var(--rule)}
.dx-row:last-of-type{border-bottom:0}
.dx-row b{font-variant-numeric:tabular-nums;color:var(--fir)}
.dx-row span{color:var(--muted);font-size:13px}
.dx-row select{max-width:none;width:100%}
@media(max-width:640px){.dx-row{grid-template-columns:1fr 1fr}}

/* The adolescent toggle on an assessment. Deliberately at the top: it
   changes what the rest of the document asks for. */
.check.toggle{background:var(--note);border-left:2px solid var(--aspen);
  padding:11px 13px;margin-bottom:16px;align-items:flex-start}

/* A checkbox set in a dialog. Used by the release form, where the client is
   agreeing to exactly these items and a free-text description could not be
   held to at send time. */
.checks { display: flex; flex-direction: column; gap: 0.35rem; }
.checks .check { display: flex; align-items: flex-start; gap: 0.5rem;
                 font-weight: 400; cursor: pointer; }
.checks .check input { margin-top: 0.2rem; flex: none; }

/* The inbox. A release somebody typed into a public page and chose to send:
   a claim about who they are, not a fact, so it reads as something to check
   rather than as a record. */
.sub { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px;
       margin-bottom: 12px; }
.sub.pending { border-left: 3px solid var(--accent, #8a6d3b); }
.sub.reviewed { opacity: 0.62; }
.sub-head { display: flex; justify-content: space-between; align-items: baseline;
            gap: 12px; flex-wrap: wrap; }
.sub-head b { font-size: 1.02rem; }
.sub-when { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.sub dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px;
          margin: 10px 0 0; font-size: 0.9rem; }
.sub dt { color: var(--muted); }
.sub dd { margin: 0; }
.sub .claims { margin: 10px 0 0; font-size: 0.86rem; color: var(--muted); }
.sub-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.cand { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.cand .why { font-size: 0.8rem; color: var(--muted); }
.sub .verdict { margin-top: 10px; font-size: 0.88rem; }

/* Legal and References. A shelf, searched. */
.lib-search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lib-search input[type=search] { flex: 1 1 320px; }
.lib-search select { flex: 0 0 auto; }
.ref { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px;
       margin-bottom: 12px; }
.ref.stale { border-left: 3px solid var(--aspen); }
.ref-head { display: flex; justify-content: space-between; gap: 12px;
            align-items: baseline; flex-wrap: wrap; }
.ref-cite { font-family: var(--mono, ui-monospace, monospace);
            font-size: 0.86rem; color: var(--muted); }
.ref-body { margin: 10px 0 0; white-space: pre-wrap; font-size: 0.93rem; }
.ref-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.ref-tags .chip { font-size: 0.74rem; }
.ref-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap;
               align-items: center; }

/* ------------------------------------------------------------- mailbox ---
   Shaped like a mail client: one toolbar across the top, then three panes
   that fill the window and scroll on their own. It was a stack of controls
   above a short reading box, which wasted the height and made the columns
   start at different places. */
.screen-full { display: flex; flex-direction: column; min-height: 0; }

.mail-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
/* A fixed height, not align-self: stretch. In a wrapping flex row the
   stretched version takes the height of the tallest line and draws a rule
   through the row below it. */
.mail-ribbon-sep {
  width: 1px;
  height: 1.6rem;
  margin: 0 .3rem;
  background: rgba(0, 0, 0, .18);
}
.mail-ribbon .btn[disabled] { opacity: .4; cursor: default; }
.mail-ribbon-target { margin-left: auto; font-size: 12px; }

.mail-layout {
  display: grid;
  grid-template-columns: 11rem minmax(20rem, 26rem) minmax(0, 1fr);
  gap: .75rem;
  /* Fills what is left of the window rather than sitting in a short box. */
  height: calc(100vh - 13rem);
  min-height: 26rem;
  margin-top: .75rem;
  align-items: stretch;
}
@media (max-width: 62rem) {
  .mail-layout { grid-template-columns: 1fr; height: auto; }
}
.mail-folders, .mail-list-col, .mail-reading { min-height: 0; }
.mail-folders { padding: .4rem; overflow-y: auto; }
.mail-folders button {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .4rem .55rem;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: 3px;
  cursor: pointer;
}
.mail-folders button:hover { background: rgba(0, 0, 0, .05); }
.mail-folders button[aria-current="true"] { background: rgba(0, 0, 0, .08); font-weight: 600; }
.mail-folders .mail-unread { font-variant-numeric: tabular-nums; opacity: .7; }

/* The list column: a fixed head, a scrolling middle, a fixed foot. */
.mail-list-col { display: flex; flex-direction: column; padding: .5rem; }
.mail-listhead { flex: 0 0 auto; }
.mail-search { display: flex; gap: .4rem; }
.mail-search input { flex: 1 1 auto; min-width: 0; }
/* One quiet row: the select box, the narrowings, and the sort. These are
   set once and left alone, so they read as text you can press rather than
   as buttons competing with Delete. */
.mail-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .4rem;
  margin: .5rem 0 .25rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.mail-only { display: flex; flex-wrap: wrap; gap: .1rem; }
.mail-chip {
  padding: .12rem .4rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.mail-chip:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.mail-chip[aria-pressed="true"] {
  background: rgba(122, 85, 16, .14);
  color: var(--aspen);
  font-weight: 700;
}
.mail-chip:focus-visible { outline: 2px solid var(--gold-on-field); outline-offset: 1px; }
/* Pushed to the far end, since it answers a different question from the
   narrowings beside it. */
.mail-sortchip { margin-left: auto; }
.mail-selectall {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-right: .15rem;
  font-size: 12px;
  color: var(--muted);
}
.mail-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mail-list:focus-visible { outline: 2px solid var(--gold-on-field); outline-offset: -2px; }
.mail-listfoot { flex: 0 0 auto; padding-top: .4rem; }
.mail-keys { display: block; margin-top: .3rem; font-size: 11px; }

.mail-daygroup {
  padding: .55rem .2rem .2rem;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.mail-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  padding: .5rem .55rem;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.mail-row:hover { background: rgba(0, 0, 0, .04); }
.mail-row[aria-current="true"] { background: rgba(0, 0, 0, .07); border-left-color: currentColor; }
.mail-row.is-unread .mail-row-subject { font-weight: 700; }
.mail-row.is-inthread { padding-left: 2.4rem; }
.mail-row.is-picked { background: rgba(122, 85, 16, .1); }
.mail-row.is-cursor { outline: 2px solid var(--gold-on-field); outline-offset: -2px; }
.mail-tick { margin-top: .2rem; flex: 0 0 auto; }
.mail-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--field);
  color: var(--gold-on-field);
  font-size: 11px;
  font-weight: 700;
}
.mail-rowbody { flex: 1 1 auto; min-width: 0; }
.mail-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.mail-row-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-when { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .7; font-size: 12px; }
.mail-row-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-preview { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-flagmark { margin-right: .3rem; color: var(--aspen); }
.mail-row-attach { margin-top: .15rem; font-size: 11.5px; opacity: .7; }
.mail-threadcount {
  flex: 0 0 auto;
  margin-left: .4rem;
  padding: 0 .45rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.mail-threadcount:hover { background: rgba(0, 0, 0, .07); }
.mail-threadcount.is-alone { opacity: .35; }

.mail-reading { overflow-y: auto; padding: .9rem 1rem; }
.mail-open-head h3 { margin: 0 0 .3rem; }
.mail-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.mail-attachments { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.mail-body {
  overflow-x: auto;
  max-width: 100%;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(0, 0, 0, .12);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.mail-body img { max-width: 100%; height: auto; }
.mail-body table { max-width: 100%; }
.mail-body blockquote {
  margin: .5rem 0;
  padding-left: .75rem;
  border-left: 2px solid rgba(0, 0, 0, .2);
  opacity: .8;
}

/* ------------------------------------------------------------ calendar --- */
.cal-when { display: flex; flex-wrap: wrap; gap: 1rem; }
.cal-when .field { flex: 0 0 auto; }
.cal-day { margin-bottom: 1.25rem; }
.cal-day h3 {
  margin: 0 0 .4rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  font-size: 1rem;
}
.cal-event {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .45rem .6rem;
  border-left: 3px solid transparent;
}
.cal-event.is-ours { border-left-color: currentColor; background: rgba(0, 0, 0, .04); }
.cal-time { flex: 0 0 9.5rem; font-variant-numeric: tabular-nums; }
.cal-what { flex: 1 1 auto; overflow-wrap: anywhere; }
.cal-acts { flex: 0 0 auto; display: flex; gap: .4rem; }

.cal-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.cal-nav, .cal-views { display: flex; align-items: center; gap: .4rem; }
.cal-range { margin-left: .5rem; font-weight: 600; }
/* The console's own selected colour, the one the rail already uses for the
   screen you are on. Every .btn is dark green, so a dark green "pressed"
   state was invisible. */
.cal-views .btn[aria-pressed="true"] {
  background: var(--gold-on-field);
  color: var(--field);
  font-weight: 700;
}
/* An empty day still gets a heading, so the shape of a week is visible
   rather than implied by the gaps between the days that have something. */
.cal-day.is-empty h3 { opacity: .55; }
.cal-day.is-today h3 { color: var(--aspen); }
.cal-none { padding: .35rem .6rem; opacity: .55; }

/* A meeting invitation's body runs to paragraphs. Two lines is enough to
   recognise it; the whole thing belongs in Outlook. */
.cal-note-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The month grid. Seven columns of whole weeks, the way a month is read. */
.cal-grid-wrap { overflow-x: auto; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(7.5rem, 1fr));
  gap: 1px;
  min-width: 54rem;
  background: rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .12);
}
.cal-col-head {
  padding: .4rem .55rem;
  background: var(--ground);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 6.5rem;
  padding: .35rem .4rem .5rem;
  background: var(--ground);
}
/* Days either side of the month, drawn so the weeks are whole. */
.cal-cell.is-outside { background: rgba(0, 0, 0, .03); }
.cal-cell.is-outside .cal-daynum { opacity: .45; }
.cal-daynum {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.cal-cell.is-today .cal-daynum {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--field);
  color: var(--gold-on-field);
}
.cal-chip {
  display: flex;
  gap: .35rem;
  width: 100%;
  padding: 2px 5px;
  border: 0;
  border-left: 3px solid rgba(0, 0, 0, .25);
  border-radius: 2px;
  background: rgba(0, 0, 0, .06);
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  color: inherit;
  text-align: left;
  cursor: default;
}
.cal-chip.is-ours {
  border-left-color: var(--field);
  background: rgba(31, 58, 46, .12);
  cursor: pointer;
}
.cal-chip.is-ours:hover { background: rgba(31, 58, 46, .2); }
.cal-chip-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .75; }
/* A subject can be a paragraph. One line, and the whole thing is in the
   tooltip and in Outlook. */
.cal-chip-what { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The time grid. Hours down the side, days across, a session's height its
   length. Month is drawn separately: a month has no hours in it. */
.tg-wrap { overflow-x: auto; }
.tg {
  display: grid;
  gap: 0;
  min-width: 44rem;
  border: 1px solid rgba(0, 0, 0, .12);
  background: var(--ground);
}
.tg-corner, .tg-allday-label {
  padding: .35rem .5rem;
  border-right: 1px solid rgba(0, 0, 0, .12);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  font-size: 11.5px;
  color: var(--muted);
}
.tg-head {
  padding: .4rem .5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  border-left: 1px solid rgba(0, 0, 0, .08);
  text-align: center;
}
.tg-head-day { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tg-head-date { font-variant-numeric: tabular-nums; font-weight: 600; }
.tg-head.is-today .tg-head-date { color: var(--aspen); }
.tg-allday {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 1.9rem;
  padding: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  border-left: 1px solid rgba(0, 0, 0, .08);
}
.tg-gutter { border-right: 1px solid rgba(0, 0, 0, .12); }
.tg-hour {
  padding-right: .45rem;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
  /* Sits against the line it names, not centred in the band below it. */
  transform: translateY(-.55em);
}
.tg-col {
  position: relative;
  border-left: 1px solid rgba(0, 0, 0, .08);
}
.tg-col.is-today { background: rgba(122, 85, 16, .05); }
.tg-line { border-top: 1px solid rgba(0, 0, 0, .07); }
.tg-event {
  position: absolute;
  overflow: hidden;
  padding: 2px 5px;
  border: 0;
  border-left: 3px solid rgba(0, 0, 0, .3);
  border-radius: 2px;
  background: rgba(0, 0, 0, .08);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.3;
  color: inherit;
  text-align: left;
  cursor: default;
}
.tg-event.is-ours {
  border-left-color: var(--field);
  background: rgba(31, 58, 46, .16);
  cursor: pointer;
}
.tg-event.is-ours:hover { background: rgba(31, 58, 46, .26); }
.tg-event {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tg-event-time { font-variant-numeric: tabular-nums; opacity: .75; }
.tg-event-what {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Too short for two lines. The time and the subject share one, which is
   better than a subject cut off halfway down its own first letter. */
.tg-event.is-short {
  flex-direction: row;
  gap: .3rem;
  align-items: baseline;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.15;
}
.tg-event.is-short .tg-event-time { flex: 0 0 auto; }
.tg-event.is-short .tg-event-what { flex: 1 1 auto; }
/* Where the day has got to. */
.tg-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--aspen);
  pointer-events: none;
}
.tg-now::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aspen);
}

.cal-zoom { display: flex; align-items: center; gap: .35rem; }
.cal-zoom-level {
  min-width: 4.6rem;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.cal-zoom .btn[disabled] { opacity: .4; cursor: default; }

/* ---- the message list ---- */
.mail-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  margin: .5rem 0 .35rem;
}
.mail-only { display: flex; gap: .3rem; }
.mail-only .btn[aria-pressed="true"] {
  background: var(--gold-on-field);
  color: var(--field);
  font-weight: 700;
}
.mail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .35rem .1rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.mail-selectall { display: flex; align-items: center; gap: .4rem; font-size: 12.5px; }
.mail-bulk { display: flex; flex-wrap: wrap; gap: .3rem; }
.mail-keys { margin-top: .5rem; font-size: 11.5px; }

.mail-daygroup {
  padding: .6rem .2rem .2rem;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.mail-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  padding: .5rem .6rem;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.mail-row.is-inthread { padding-left: 2.2rem; }
.mail-row.is-picked { background: rgba(122, 85, 16, .1); }
.mail-row.is-cursor { outline: 2px solid var(--gold-on-field); outline-offset: -2px; }
.mail-tick { margin-top: .2rem; flex: 0 0 auto; }
.mail-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--field);
  color: var(--gold-on-field);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.mail-rowbody { flex: 1 1 auto; min-width: 0; }
.mail-flagmark { margin-right: .3rem; color: var(--aspen); }
.mail-row-attach { margin-top: .15rem; font-size: 11.5px; opacity: .7; }
.mail-threadcount {
  flex: 0 0 auto;
  margin-left: .4rem;
  padding: 0 .45rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.mail-threadcount:hover { background: rgba(0, 0, 0, .07); }

/* A conversation with only one message in it, once that is known. Present
   so the row stays aligned, quiet because there is nothing to open. */
.mail-threadcount.is-alone { opacity: .35; }

/* The compose form. The shared .field lays its label inline, which suits a
   dialog and not a full width form: the address boxes came out cropped and
   the Message label landed beside a textarea the size of a stamp. This was
   written once, then lost when the mailbox styles were rebuilt, which is
   why it is here at the end with its own heading rather than folded into a
   rule somebody will replace wholesale again. */
#mail-compose { max-width: 52rem; }
#mail-compose h3 { margin: 0 0 .9rem; }
#mail-compose .field {
  display: block;
  margin-bottom: .7rem;
}
#mail-compose .field label {
  display: block;
  margin-bottom: .25rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
#mail-compose input[type="text"],
#mail-compose input:not([type]),
#mail-compose input[type="email"],
#mail-compose input[type="search"],
#mail-compose textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
#mail-compose textarea {
  min-height: 16rem;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}
#mail-compose input[type="file"] { display: block; }

/* Warnings on a note. Visible, and never in the way: they say what is
   missing and the signature stays available, because the person reading
   them holds the licence. */
.warnhead {
  margin: .9rem 0 .3rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aspen);
}
ul.warnings {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 13px;
  color: var(--muted);
}
ul.warnings li { margin-bottom: .2rem; }