/* Flow (the repository is fwg-inbox): one stylesheet, no build step, no CDN, system fonts.

   The chrome is the group's: the masthead and three-band strip are Lookup's, and the token names and values
   are Flow's (fwg-flow tokens.css), so the three apps read as one. No colour appears below that is not a
   token. Bright accents (gold, blue) are fills only; the -text variants are the ones safe for words on white.
   The CSP is 'self' with no unsafe-inline, so there are no style attributes anywhere in the templates. */

:root {
  --fwg-ink:        #18073A;
  --fwg-gold:       #BBA04C;   /* fill only: 2.55:1 on white */
  --fwg-red:        #E4032E;
  --fwg-blue:       #0097FF;   /* fill only */
  --fwg-gold-text:  #857133;
  --fwg-blue-text:  #0079CC;

  --ink:            #18073A;
  --ink-muted:      #5B5470;

  --surface:        #FFFFFF;
  --surface-sunken: #F2F2F2;
  --ground:         #F0F0F3;

  --line:           #E3E1E8;
  --line-strong:    #CFCBD8;
  --line-input:     #8B8599;

  --status-attention:    #D4032B;
  --status-attention-bg: #FDECEF;
  --status-waiting:      #9D5E00;
  --status-waiting-bg:   #FFF4E0;
  --status-progress:     #006DB8;
  --status-progress-bg:  #E5F3FD;
  --status-good:         #1E7B4D;
  --status-good-bg:      #E6F4EC;
  --status-neutral-bg:   #F0EFF3;

  --link:           #006FBC;
  --link-hover:     #005C9B;
  --btn-primary-hover: #A98D3E;
  --btn-danger-hover:  #C60228;

  /* masthead, lifted from Lookup */
  --masthead:       #170B29;
  --on-inverse:     #FFFFFF;
  --on-inverse-muted: rgba(255, 255, 255, .82);
  --on-inverse-wash: rgba(255, 255, 255, .12);   /* a hover on the masthead: the one colour that was written outside a token (review F7) */
  --line-inverse:   rgba(255, 255, 255, .55);
  --badge-hover:    #C9AB4C;
  --strip-blue:     #00A3E2;
  --strip-red:      #E8004C;
  --strip-gold:     #B8A44F;
  --dot-1: #E8608C; --dot-2: #F0913C; --dot-3: #4FA8D8;

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem;
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;
  --container: 1280px;
  --focus-ring: 3px solid var(--fwg-blue-text);
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; font: var(--fs-sm)/1.55 var(--sans); color: var(--ink); background: var(--ground); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
/* A link in the page's text is underlined: in muted or small text the link colour alone was not enough to tell
   it from the words around it (backlog section 2, item 12). Links that are visibly controls, the tabs, column
   sorts, the pager and everything with a class of its own, keep their own look. */
.page a:not([class]), .foot a { text-decoration: underline; text-underline-offset: 0.15em; }
.page .tabs a, .page th a { text-decoration: none; }
.page a:not([class]):hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--sp-4); top: var(--sp-2); background: var(--surface); padding: var(--sp-2) var(--sp-3); z-index: 10; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- masthead ---- */
.masthead { background: var(--masthead); color: var(--on-inverse); }
/* Not held to the page's width: the side menu starts at the left edge under it, and the wordmark stands over it. */
.masthead-inner { padding: 0 var(--sp-6); display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 22px; min-height: 68px; }
.wordmark { display: flex; align-items: center; position: relative; color: var(--on-inverse); font-size: 19px;
  font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark:hover { color: var(--on-inverse); text-decoration: none; }
.dots { position: absolute; top: 14px; left: 20px; display: flex; gap: 2px; }
.dots i { width: 3px; height: 3px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: var(--dot-1); }
.dots i:nth-child(2) { background: var(--dot-2); }
.dots i:nth-child(3) { background: var(--dot-3); }
.app-badge { align-self: center; background: var(--fwg-gold); color: var(--fwg-ink); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; padding: 7px 13px; border-radius: 3px; white-space: nowrap; }
.app-badge:hover { background: var(--badge-hover); color: var(--fwg-ink); text-decoration: none; }
/* The primary items, on the masthead as Lookup and Flow have them (Dale, 4 October 2026: "I was expecting the
   primary top nav to remain"). The nav wraps rather than push the page sideways. */
.mainnav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 22px; }
.mainnav a { display: flex; align-items: center; padding: 10px 6px 9px; color: var(--on-inverse-muted); font-size: 15px;
  font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; border-bottom: 3px solid transparent; }
.mainnav a:hover { color: var(--on-inverse); text-decoration: none; }
.mainnav a[aria-current="page"] { color: var(--on-inverse); border-bottom-color: var(--fwg-gold); }
.whoami { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); color: var(--on-inverse-muted);
  font-size: var(--fs-xs); }
.whoami button { color: var(--on-inverse); border: 1px solid var(--line-inverse); background: none; min-height: 24px;
  padding: 5px 10px; font-size: var(--fs-xs); }
.whoami button:hover { background: var(--on-inverse-wash); color: var(--on-inverse); }
.brand-strip { height: 5px; background: linear-gradient(to right,
  var(--strip-blue) 0 33.33%, var(--strip-red) 33.33% 65%, var(--strip-gold) 65% 100%); }

/* ---- the side menu: the secondary items of the section the person is in (app/nav.py) ----
   The dark bar down the left that the working inbox brought in (18.9s) and Dale kept ("The side vertical bar is
   nice. Keep it but it's the wrong menu approach"): it is the masthead's colour, so the two read as one frame.
   A section with no secondary items has no bar (.shell without .sided) and its content takes the width. It is
   a <details>: on a wide screen the summary is hidden and it is always open; under 1,024px it is a menu above
   the content. */
.shell-main { min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - 73px); }
.shell-main > .page { flex: 1; width: 100%; }
.shell.sided { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: stretch; }
.sidenav { background: var(--masthead); color: var(--on-inverse-muted); padding: var(--sp-3) 0 var(--sp-6); min-width: 0; }
.sidenav summary { display: none; }
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav li { display: flex; align-items: stretch; }
.side-head { margin: var(--sp-1) 0; padding: 0 var(--sp-6); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-inverse-muted); overflow-wrap: anywhere; }
.sidenav ul + .side-head, .sidenav .capnote + .side-head { margin-top: var(--sp-5); }
.sidenav li > a:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); min-height: 36px;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) 20px; color: var(--on-inverse-muted); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; border-left: 4px solid transparent; overflow-wrap: anywhere; }
/* A mailbox's name is a person's own words: as written, not in capitals. */
.sidenav li > a.name, .side-head.name { text-transform: none; letter-spacing: 0; }
.sidenav li > a.name { font-size: var(--fs-sm); }
.side-head.name { font-size: var(--fs-xs); color: var(--on-inverse); }
.sidenav a:hover { color: var(--on-inverse); text-decoration: none; background: var(--on-inverse-wash); }
.sidenav a[aria-current] { color: var(--on-inverse); border-left-color: var(--fwg-gold); }
.sidenav a[aria-current="page"] { background: var(--on-inverse-wash); }
.sidenav a:focus-visible { outline-color: var(--on-inverse); outline-offset: -3px; }
/* The count is one pill on one line whatever the name beside it does: it does not shrink and does not break. */
.sidenav .count { margin-left: auto; flex: none; white-space: nowrap; }
.sidenav a[aria-current] .count { background: var(--fwg-gold); color: var(--fwg-ink); }
.sidenav .capnote { padding: 0 var(--sp-6); color: var(--on-inverse-muted); }
/* A mailbox's state, as an icon: on the dark bar it takes a light ring, so that its shape is seen as well as its colour. */
.sidenav .dot { flex: none; box-shadow: 0 0 0 2px var(--on-inverse); }

/* ---- page ---- */
.page { max-width: var(--container); margin: 0; padding: var(--sp-6) var(--sp-6) 72px; }
/* The working inbox and a conversation take the whole width: three panes need it (18.9s). */
.page.wide { max-width: none; }
/* A page named by the navigation item that is already highlighted (18.9f): its h1 is in the markup, hidden
   (.vh), so the first thing on the page starts under the navigation, with less space above it and without
   the gap a section heading leaves above itself. */
.page.nav-titled { padding-top: var(--sp-4); }
.nav-titled h1.vh + h2 { margin-top: 0; }
h1 { font-size: var(--fs-2xl); font-weight: 300; letter-spacing: -0.015em; margin: 0 0 var(--sp-2); }
h2 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: var(--sp-8) 0 var(--sp-3); }
h3 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: var(--sp-4) 0 var(--sp-1); }
p { margin: var(--sp-3) 0; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.flush { margin-top: 0; }
.gap-top { margin-top: var(--sp-4); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }
.back { font-size: var(--fs-xs); margin: 0 0 var(--sp-3); }

.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 200px; }

.card { background: var(--surface); border: 1px solid var(--line); padding: var(--sp-5) var(--sp-6); margin: 0 0 var(--sp-4); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.empty { color: var(--ink-muted); padding: var(--sp-1) 0; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
th { text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-muted); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
/* .empty is written for a paragraph and has no side padding; as a class it beat the td rule above, so
   "None." in a table sat hard against the left border instead of under its column heading. */
td.empty { padding: var(--sp-3) var(--sp-4); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.off td { color: var(--ink-muted); }
.capnote { font-size: var(--fs-xs); color: var(--ink-muted); margin: var(--sp-2) 0 0; }
/* A column heading that sorts the list is a link; the one the list is sorted by is underlined. */
th a { color: inherit; }
th a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--fwg-gold-text); }

/* ---- pills: status is always a colour and a word ---- */
.tag { display: inline-block; padding: 2px var(--sp-2); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; white-space: nowrap; border-radius: 999px; background: var(--status-neutral-bg); color: var(--ink-muted); }
a.tag:hover { text-decoration: none; color: var(--ink); }
/* A tag that is a link is a target, and a target is at least 24px (WCAG 2.2, 2.5.8). */
a.tag { min-height: 24px; display: inline-flex; align-items: center; }
.tag.pending { background: var(--status-waiting-bg); color: var(--status-waiting); }
.tag.sent { background: var(--status-good-bg); color: var(--status-good); }
.tag.error, .tag.high { background: var(--status-attention-bg); color: var(--status-attention); }
.tag.medium { background: var(--status-progress-bg); color: var(--status-progress); }
.tag.flag { background: var(--status-attention); color: var(--on-inverse); }

/* The enable/disable pill is a button: it says the state it is in and a click flips it. */
/* It had no border and read as a static tag (item 8); the input-line border says it can be pressed. */
button.pill { min-height: 24px; padding: 3px var(--sp-3); border-radius: 999px; border: 1px solid var(--line-input);
  font-size: 0.6875rem; letter-spacing: 0.05em; background: var(--status-neutral-bg); color: var(--ink-muted); }
button.pill.on { background: var(--status-good-bg); color: var(--status-good); }
button.pill:hover { border-color: currentColor; background: var(--surface); }
button.pill.on:hover { color: var(--status-good); }
button.pill:hover { color: var(--ink); }

/* ---- banners ---- */
.banner { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left: 6px solid var(--status-attention);
  background: var(--status-attention-bg); margin: 0 0 var(--sp-4); }
.banner.good { border-left-color: var(--status-good); background: var(--status-good-bg); }
.banner.waiting { border-left-color: var(--status-waiting); background: var(--status-waiting-bg); }
.error { color: var(--status-attention); }

/* ---- forms ---- */
label { display: block; font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-muted); margin: var(--sp-3) 0; }
label > input, label > select, label > textarea { display: block; margin-top: var(--sp-1); text-transform: none; letter-spacing: 0; }
input[type=text], input[type=email], input[type=url], input[type=date], select, textarea { width: 100%; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-input); border-radius: 0; padding: var(--sp-2) var(--sp-3); min-height: 40px; }
textarea { min-height: 200px; resize: vertical; }
textarea.short { min-height: 84px; }
textarea.tall { min-height: 260px; }
select.auto { width: auto; }
label.check { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--ink); margin: var(--sp-2) 0; }
.fields { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.fields > label { flex: 1; min-width: 200px; }
.fields > label.wide { flex: 2; }
form.inline { display: inline; }

button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: inherit;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
button:hover { background: var(--ink); color: var(--on-inverse); }
button.primary { background: var(--fwg-gold); border-color: var(--fwg-gold); color: var(--fwg-ink); }
button.primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); color: var(--fwg-ink); }
button.danger { border-color: var(--fwg-red); color: var(--status-attention); }
button.danger:hover { background: var(--btn-danger-hover); border-color: var(--btn-danger-hover); color: var(--on-inverse); }
/* Delete, as a choice of two (_delete_choice.html): a disclosure that looks like the button it replaces, and
   opens onto the two submit buttons, each with what it does beside it. No script. */
details.choose > summary { display: inline-flex; align-items: center; min-height: 40px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--fwg-red); color: var(--status-attention); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
details.choose > summary:hover, details.choose[open] > summary { background: var(--btn-danger-hover); border-color: var(--btn-danger-hover); color: var(--on-inverse); }
details.choose[open] { flex-basis: 100%; }
details.choose > .choices { list-style: none; margin: var(--sp-2) 0 0; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); }
details.choose > .choices > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
details.choose > .choices > li + li { margin-top: var(--sp-2); }
.bulk details.choose > summary { min-height: 32px; padding: var(--sp-1) var(--sp-3); }
.msg.gone { color: var(--ink-muted); }
.msg.gone .head { margin-bottom: 0; }
button.link { min-height: 24px; padding: 0; border: 0; background: none; color: var(--link); text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
button.link:hover { background: none; color: var(--link-hover); text-decoration-thickness: 2px; }
/* While a form is on its way. The buttons are disabled by app.js a moment after the submit, so the one pressed
   is still sent with the form. */
form[aria-busy="true"] button { cursor: progress; opacity: 0.6; }

/* ---- tabs within a page ---- */
.tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--line-strong); margin: var(--sp-4) 0; }
.tabs a { padding: var(--sp-2) 2px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- figures ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin: 0 0 var(--sp-4); }
.stat { background: var(--surface); padding: var(--sp-4) var(--sp-5); }
.stat b { display: block; font-size: var(--fs-2xl); font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* A tile whose figure is words of no fixed length (the connector's version, "1.2.1+19c5d73eeaa6"): smaller, and it wraps,
   where a number's tile cut it off at the tile's edge. */
.stat.words b { font-size: var(--fs-base); font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.stat span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
/* A figure that leads to the rows behind it: the counts on the summary page. */
a.stat { display: block; color: var(--ink); }
/* A figure that carries a tooltip is a span inside the b, and the label's rule above would shrink it to a label. */
.stat b span { font-size: inherit; text-transform: none; letter-spacing: inherit; color: inherit; }
a.stat:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }

/* ---- an email and its conversation ---- */
.split { display: flex; gap: var(--sp-8); align-items: flex-start; }
.split > .conv { flex: 1; min-width: 0; }
.split > .side { width: 300px; flex: none; border-left: 1px solid var(--line); padding-left: var(--sp-6); }
.thread { background: var(--surface); border: 1px solid var(--line); margin: var(--sp-4) 0; }
.msg { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.msg:last-child { border-bottom: 0; }
.msg.in { background: var(--surface-sunken); }
/* The email being reviewed. It was marked by a gold stripe under 3:1 alone; it now has the darker gold, at
   4.3:1 on its background, and the words "This email" (item 9). */
.msg.current { box-shadow: inset 0 0 0 2px var(--fwg-gold-text); }
/* Who wrote a card (18.9s): an edge colour, and the word beside the sender (main.WROTE), never the colour alone. */
.msg { border-left: 5px solid var(--line-input); }
.msg.us { border-left-color: var(--fwg-blue-text); }
.msg.claude { border-left-color: var(--status-good); }
.msg.auto { border-left-color: var(--status-waiting); }
/* A hand-over between personas, or to another mailbox's people (phase 6): a line in the thread, not a message. */
.msg.handover { border-left-color: var(--status-waiting); background: var(--status-waiting-bg); }
.tag.wrote { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
/* Quoted history, folded under the message it was quoted in. */
details.quoted { margin-top: var(--sp-2); }
details.quoted > summary { cursor: pointer; font-size: var(--fs-xs); color: var(--link); min-height: 24px; }
details.quoted > pre { margin-top: var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--line-strong); color: var(--ink-muted); }
/* The files that came with an email (step 4c): one to a line under its text, the name wrapping anywhere. */
ul.files { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
ul.files li { padding: var(--sp-1) 0; overflow-wrap: anywhere; }
ul.files .name { font-weight: 600; }
details.earlier { border-bottom: 1px solid var(--line); }
details.earlier > summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); min-height: 24px; }
details.earlier[open] > summary { border-bottom: 1px solid var(--line); }
/* The inbox's "No action" section (phase 21): closed until opened, under the list. */
details.quiet { margin-top: var(--sp-4); border-top: 1px solid var(--line); }
details.quiet > summary { cursor: pointer; padding: var(--sp-3) 0; font-weight: 700; color: var(--ink-muted); min-height: 24px; }
.msg .head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); color: var(--ink-muted); }
.msg .head b { color: var(--ink); }
/* The email page: the conversation and reply, and beside them everything known about the email. One column
   when there is no room for two. */
.email { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-8); align-items: start; }
.email > .side { border-left: 1px solid var(--line); padding-left: var(--sp-6); min-width: 0; }
.side .facts { margin: var(--sp-2) 0 var(--sp-3); }
.side h2 { margin-top: var(--sp-6); }
.facts dl { margin: 0; }
.facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-top: var(--sp-3); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
ul.plain { list-style: none; margin: 0; padding: 0; }
dl.pairs dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-top: var(--sp-3); }
dl.pairs dt:first-child { margin-top: 0; }
dl.pairs dd { margin: 0; overflow-wrap: anywhere; }
.side dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-top: var(--sp-3); }
.side dd { margin: 0; overflow-wrap: anywhere; }
.mini { display: block; background: var(--surface); border: 1px solid var(--line); padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0; color: var(--ink); }
.mini:hover { text-decoration: none; border-color: var(--line-input); color: var(--ink); }

.facts { background: var(--surface); border: 1px solid var(--line); padding: 0 var(--sp-4) var(--sp-3); margin: var(--sp-4) 0; }
.facts ul { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; padding: var(--sp-1) 0; }
.facts li .what { flex: 1; min-width: 180px; }
.facts li.done .what { text-decoration: line-through; color: var(--ink-muted); }

.events { border-left: 2px solid var(--line-strong); margin: var(--sp-4) 0 var(--sp-4) 6px; padding-left: var(--sp-5); }
.event { position: relative; margin: 0 0 var(--sp-4); }
.event::before { content: ""; position: absolute; left: -26px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-strong); }
.event.sent::before { background: var(--status-good); }
.event.dispute::before { background: var(--status-attention); }

/* ---- sign-in ---- */
.signin { max-width: 420px; margin: var(--sp-8) auto; }
.signin h1 { margin-bottom: var(--sp-4); }
a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--sp-2) var(--sp-5);
  background: var(--fwg-gold); color: var(--fwg-ink); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; }
a.button:hover { background: var(--btn-primary-hover); color: var(--fwg-ink); text-decoration: none; }

/* ---- calendar ---- */
table.calendar { table-layout: fixed; }
table.calendar th { text-align: left; }
table.calendar td { height: 116px; padding: var(--sp-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
table.calendar tr:last-child td { border-bottom: 1px solid var(--line); }
table.calendar td.other { background: var(--surface-sunken); }
table.calendar td.today { box-shadow: inset 0 0 0 2px var(--fwg-gold-text); }
.daynum { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-muted); margin-bottom: var(--sp-1); }
td.today .daynum { color: var(--ink); }
.cal-event { display: block; font-size: var(--fs-xs); line-height: 1.35; color: var(--ink); margin-bottom: var(--sp-2);
  overflow-wrap: anywhere; }
.cal-event:hover { text-decoration: none; }
.cal-event:hover strong { color: var(--link-hover); text-decoration: underline; }
.cal-what { display: block; }
.cal-org { display: block; color: var(--ink-muted); }
/* The calendar as a list of the days that have something on them, for a narrow screen; hidden on a wide one. */
.cal-list { display: none; list-style: none; margin: 0; padding: 0; }
.cal-list > li { background: var(--surface); border: 1px solid var(--line); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-2); }
.cal-list > li[aria-current] { box-shadow: inset 4px 0 0 var(--fwg-gold-text); }
.cal-list h2 { margin: 0 0 var(--sp-2); }

.prompt { background: var(--surface); border: 1px solid var(--line); padding: var(--sp-4); margin: 0 0 var(--sp-4); }

/* ---- two versions of a persona, line by line. Each changed line starts with + or -, so the colour is not
   the only thing saying which side it came from. ---- */
.diff span { display: block; padding: 0 var(--sp-2); }
.diff .add { background: var(--status-good-bg); color: var(--status-good); }
.diff .del { background: var(--status-attention-bg); color: var(--status-attention); }
.hash { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-xs); }

/* A table wider than the screen scrolls inside its own box, which takes focus so the keyboard can scroll it
   too. It used to become display: block, which the keyboard could not scroll (item 27). */
/* position: relative holds the visually hidden words in the table's buttons (.vh, absolutely positioned)
   inside the box; without it they sat out at the table's far edge and widened the whole page on a phone. */
.scroll { overflow-x: auto; max-width: 100%; position: relative; }
.scroll:focus-visible { outline-offset: 0; }
.scroll + .capnote, .scroll + .pager { margin-top: var(--sp-2); }

.filter { margin: var(--sp-4) 0; }
.filter input[type=text] { min-width: 12em; }
/* A date field in the inbox search, its word beside it on the same line rather than above. */
label.inline-label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
label.inline-label > input { display: inline-block; width: auto; margin-top: 0; }
.pager { margin: var(--sp-2) 0 0; }
.pager .capnote { margin: 0; }
/* The keys a list answers to, named in its tooltip. It takes focus so that the tooltip is reachable. */
.keys { font-size: var(--fs-xs); color: var(--ink-muted); border-bottom: 1px dotted var(--line-input); cursor: help; }

.foot { border-top: 1px solid var(--line); background: var(--surface); }
.foot-inner { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-xs); }
.prose { max-width: 70ch; }
.prose ul { padding-left: var(--sp-5); }
.prose h2 { margin-top: var(--sp-6); }
/* The footer's pages (18.9h): the card is as wide as the page, like every other screen, and its sections flow
   down two columns, each held to a readable line. A section is never split between columns. Under 860px there
   is one column. The order read is the order written, whichever way it is laid out. */
.prose.cols { max-width: none; columns: 2; column-gap: var(--sp-8); }
.prose.cols > section { break-inside: avoid; max-width: 80ch; margin: 0 0 var(--sp-6); }
.prose.cols > section > :first-child { margin-top: 0; }
.prose.cols > section > :last-child { margin-bottom: 0; }
/* Release notes: a date heads its own card, close above it; an entry's title is the card's own heading. */
h2 + .prose.cols, h3 + .prose.cols { margin-top: var(--sp-2); }
.prose .entry { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 var(--sp-1); }

/* Two texts side by side (the shadow page: the live draft and the shadow's), one above the other on a phone. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 860px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .prose.cols { columns: 1; }
  .masthead-inner, .page, .foot-inner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .masthead-inner { min-height: 0; }
  .wordmark { padding: 14px 0 10px; }
  /* As Lookup has it on a phone: the primary items on a row of their own under the wordmark, wrapping, so that
     none is off the edge. */
  .mainnav { order: 4; flex: 1 0 100%; gap: 0 var(--sp-4); }
  .mainnav a { font-size: 13px; padding: 8px 2px 7px; }
  .split { flex-direction: column; }
  .split > .side { width: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-2); }
  .cal-grid { display: none; }
  /* Inbox and Tasks scroll sideways in their box rather than squeeze the subject to a word a line. */
  table[data-rows] { min-width: 44rem; }
  .cal-list { display: block; }
}
@media (max-width: 1024px) {
  /* The side menu, above the content and closed until asked for: its summary says which menu and where. */
  .shell.sided { display: block; }
  .shell-main { min-height: 0; }
  .sidenav { padding: 0; }
  .sidenav summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: 44px; padding: var(--sp-2) var(--sp-4);
    cursor: pointer; color: var(--on-inverse); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .sidenav summary::after { content: "\25BE"; margin-left: auto; }
  .sidenav details[open] > summary::after { content: "\25B4"; }
  .side-here { color: var(--on-inverse-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
  .sidenav details[open] { padding-bottom: var(--sp-4); }
  .sidenav li > a:first-child { min-height: 40px; padding-left: 12px; }
  .side-head, .sidenav .capnote { padding: 0 var(--sp-4); }
}
@media (max-width: 1180px) {
  .email { grid-template-columns: minmax(0, 1fr); }
  .email > .side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-2); }
}
@media (prefers-reduced-motion: no-preference) {
  button, .mainnav a, .sidenav a { transition: background 120ms, color 120ms; }
}
@media print {
  .masthead, .brand-strip, .sidenav, .pane, button, .foot { display: none; }
  .shell.sided { display: block; }
  body { background: var(--surface); }
  /* The board's monthly page (admin_board.html) is meant to be printed: one page, no controls, tables whole. */
  .noprint, .tabs, .filter { display: none; }
  .page { padding: 0; max-width: none; }
  .scroll { overflow: visible; }
  .stats, table, h2 { break-inside: avoid; }
  h2 { break-after: avoid; margin-top: var(--sp-4); }
  .board .stat { padding: var(--sp-2) var(--sp-3); }
  .board .stat b { font-size: var(--fs-xl); }
  a { color: var(--ink); }
}

/* ---- a persona's labels: one card each, closed until opened, with what it does on its summary line ---- */
details.label > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
details.label[open] > summary { margin-bottom: var(--sp-4); }

/* ---- the figures at the head of a register: small, each with how many rows it stands on ---- */
.stats.figures { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.figures .stat { padding: var(--sp-2) var(--sp-4); }
.figures .stat b { font-size: var(--fs-base); font-weight: 600; }
.figures .stat .n { text-transform: none; letter-spacing: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.checks label.check { margin: var(--sp-1) 0; }
input.auto { width: 5em; }

/* ---- working hours, and what is dated on an email ---- */
fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-3); }
legend { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted);
  margin-bottom: var(--sp-1); }
.due-list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
/* Setting a mailbox up (18.9j, _setup.html) and the Summary's First steps: numbered lines, each a state, what it
   is and at most one action. The step to do next is marked by more than its tag's colour: a rule down its side. */
ol.steps { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
ol.steps li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid transparent; }
ol.steps li.current { border-left-color: var(--status-progress); background: var(--status-progress-bg); }
ol.steps .n { min-width: 1.5em; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
ol.steps .what { flex: 1 1 16em; }
/* scroll-margin: a save comes back to #setup, and the banner saying what it did is above the panel, with the
   mailbox's name. Without the margin the browser put the panel at the very top and the banner out of sight. */
.setup { border-left: 6px solid var(--status-progress); scroll-margin-top: 14rem; }
.setup:focus { outline: var(--focus-ring); outline-offset: 2px; }
.setup ol.steps { margin-bottom: 0; }
/* In-page links to the sections of a long page (a mailbox's Settings, an admin's page for one). */
nav.jump { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--fs-xs); }
.due-list li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }

/* ---- a definition that matters (web.define): the word is a button, its definition a tooltip ----
   A title on a span or a heading is out of reach of the keyboard and of a phone (backlog section 2, item 28).
   The tooltip shows on hover, on focus and after a tap (app.js sets aria-expanded), stays while the pointer
   is over it, and Escape hides it (WCAG 2.2, 1.4.13). The word keeps its look: a tag stays a tag, plain
   words take a dotted underline as the Keyboard hint does. */
.defn { position: relative; display: inline-block; }
button.link.def { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--line-input); cursor: help;
  font-weight: inherit; }
button.link.def:hover { color: inherit; background: none; }
.defn > .tip { display: none; position: absolute; left: 0; top: 100%; z-index: 20; width: max-content; max-width: min(20rem, 80vw);
  margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--ink); color: var(--on-inverse);
  font-size: var(--fs-sm); font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: 0; white-space: normal;
  text-align: left; }
.defn:hover > .tip, .defn:focus-within > .tip, .def[aria-expanded="true"] + .tip { display: block; }
.defn.dismissed > .tip { display: none; }
/* A register's figure is a definition as a whole: the value, its word and its n. */
.stat.defn { display: block; }
.stat button.link.def { display: block; width: 100%; text-align: left; text-decoration: none; color: var(--ink); }
.stat button.link.def > span { text-decoration: underline dotted; text-decoration-color: var(--line-input); }
@media print { .tip { display: none !important; } button.link.def { display: inline-block !important; } }

/* ---- alerts on the summary (app/alerts.py), and the access review ---- */
.alerts { list-style: none; padding: 0; margin: var(--sp-1) 0 0; }
.alerts li { padding: var(--sp-1) 0; }

/* ---- the working inbox (18.9q, 18.9s): the list of conversations, and what is due beside it; the mailboxes and lists are the side menu ---- */
/* A count beside a name: how many are to do, or how many messages a conversation holds. */
.count { display: inline-block; min-width: 1.5em; padding: 0 var(--sp-1); border-radius: 999px; background: var(--status-neutral-bg);
  color: var(--ink-muted); font-size: 0.6875rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* A mailbox's state in the side menu, as an icon: its word is the tooltip and the accessible name (.vh inside). */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-input); }
.dot.error { background: var(--status-attention); border-radius: 0; }
.dot.pending { background: var(--status-waiting); border-radius: 2px; }
/* The list, and beside it what is due. One column on a narrow screen, the side under the list. */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-6); align-items: start; }
.work-side { border-left: 1px solid var(--line); padding-left: var(--sp-5); min-width: 0; }
.work-side .due-list li { padding: var(--sp-2) 0; }
.page .tabs { flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: 0; }
table.convs td.act { white-space: nowrap; text-align: right; }
table.convs td.act form { display: inline-block; margin-right: var(--sp-2); }
table.convs td.act button { min-height: 32px; padding: var(--sp-1) var(--sp-3); }
table.convs td:first-child, table.convs th:first-child { width: 1%; padding-right: 0; }
.filter details.more > summary { cursor: pointer; font-size: var(--fs-xs); color: var(--link); min-height: 24px; }
.filter details.more[open] { flex-basis: 100%; }
.filter details.more > .row { margin-top: var(--sp-2); }
.bulk { padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--line); }
.bulk button { min-height: 32px; padding: var(--sp-1) var(--sp-3); }
.due-list.keyed { background: var(--surface); border: 1px solid var(--line); padding: 0 var(--sp-4); }
.due-list.keyed li:last-child { border-bottom: 0; }
.due-list.keyed li { padding: var(--sp-2) 0; }

/* ---- a conversation: the list, the thread, and the customer and the work (three panes, 18.9s) ---- */
.email.three { grid-template-columns: 250px minmax(0, 1fr) 360px; gap: var(--sp-6); }
.pane { min-width: 0; border-right: 1px solid var(--line); padding-right: var(--sp-4); }
.convlist { list-style: none; margin: 0; padding: 0; }
.convlist li { border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.convlist li.here { border-left-color: var(--fwg-gold-text); background: var(--surface); }
.convlist .who { display: block; font-weight: 600; }
.convlist .what { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
h1.what { font-size: var(--fs-xl); font-weight: 400; }
details.why > dl { margin: 0 0 var(--sp-3); }
/* Narrower screens, after the rules above so that these win. Three panes need about 1,500px beside the side
   menu: under that the list gives way first (the link back leads to it), then the panel goes under the
   conversation. The working inbox's side column goes under its list. */
@media (max-width: 1500px) {
  .email.three { grid-template-columns: minmax(0, 1fr) 360px; }
  .email.three > .pane { display: none; }
}
@media (max-width: 1400px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .work-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-4); }
}
@media (max-width: 1180px) {
  .email.three { grid-template-columns: minmax(0, 1fr); }
}
.convlist a.conv { display: block; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); color: var(--ink); text-decoration: none; }
.convlist a.conv:hover { background: var(--surface-sunken); text-decoration: none; }

/* ---- a rich reply (18.9r): as it is shown in the conversation, and the box it is written in ----
   .rich is the cleaned HTML of a reply, written by app/rich.py with no class or style of its own, so its
   look is all here. The same rules dress the reply box (.editor), which app.js puts in place of the
   textarea; without the script the textarea is the reply box, as it always was. Mail that is sent takes no
   stylesheet: its table borders are written on the tags by rich.for_mail. */
.rich p { margin: 0 0 var(--sp-3); }
.rich > :last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); }
.rich li > ul, .rich li > ol { margin-bottom: 0; }
.rich a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
/* A reply's table is the sender's, not one of the app's lists: none of their width, capitals or small type. A
   cell has a height, so that an empty row can be seen and its cells clicked into. */
.rich table { border-collapse: collapse; margin: 0 0 var(--sp-3); width: auto; max-width: 100%; }
.rich th, .rich td { border: 1px solid var(--line-input); padding: var(--sp-1) var(--sp-2); text-align: left; vertical-align: top;
  min-width: 3rem; height: 2rem; overflow-wrap: anywhere; font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); }
.rich th { background: var(--surface-sunken); font-weight: 600; }
.rich img { max-width: 100%; height: auto; vertical-align: bottom; }
.tools { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border: 1px solid var(--line-input); border-bottom: 0;
  background: var(--surface-sunken); }
.tools button { min-height: 32px; min-width: 32px; padding: var(--sp-1) var(--sp-2); border-color: var(--line-input); background: var(--surface);
  text-transform: none; letter-spacing: 0; }
.tools button:hover, .tools button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-inverse); }
.tools button:disabled { color: var(--ink-muted); background: transparent; border-style: dashed; cursor: default; }
.tools button.gap { margin-left: var(--sp-2); }
.editor { min-height: 200px; max-height: 70vh; overflow: auto; resize: vertical; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-input);
  background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
.editor:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.editor-status { min-height: 1.25rem; margin: var(--sp-1) 0; color: var(--status-attention); }


/* A table whose cells are inputs (a persona's terminology): each column keeps a width a word can be typed in,
   and the table scrolls sideways on a narrow screen instead of squeezing them. */
table.inputs td { padding: var(--sp-2); min-width: 180px; }
table.inputs input[type=text] { margin: 0; }

/* ---- the workflow designer (17.15; app/workflows/designer.py, admin_case_designer.html) ----
   The flow is an SVG the server writes with positions as attributes; everything that is a colour, a weight or a
   dash is here. Beside it the same flow as a list, which holds the forms. On a narrow screen the drawing comes
   first, at its own size, and scrolls sideways in its box if its arrows make it wider than the screen. */
.designer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.flow-pane { background: var(--surface); border: 1px solid var(--line); padding: var(--sp-2); position: sticky; top: var(--sp-3);
  max-height: calc(100vh - var(--sp-6)); overflow: auto; }
.flow { display: block; max-width: none; font-family: var(--sans); }
.flow text { font-size: 12px; fill: var(--ink); }
.flow text.muted { fill: var(--ink-muted); }
.flow text.route { fill: var(--ink); font-style: italic; }
.flow text.flow-title { font-weight: 700; }
.flow text.flow-mark { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; fill: var(--ink-muted); }
.flow-node rect { fill: var(--surface); stroke: var(--line-input); stroke-width: 1; }
.flow-node.terminal rect { fill: var(--surface-sunken); stroke: var(--line-strong); }
.flow-node.added rect { stroke: var(--status-good); stroke-width: 2; }
.flow-node.added .flow-mark { fill: var(--status-good); }
.flow-node.changed rect { stroke: var(--status-progress); stroke-width: 2; }
.flow-node.changed .flow-mark { fill: var(--status-progress); }
.flow-node.bad rect { stroke: var(--status-attention); stroke-width: 2; fill: var(--status-attention-bg); }
.flow-node.bad .flow-mark { fill: var(--status-attention); }
.flow a { cursor: pointer; text-decoration: none; }
.flow a:hover .flow-node rect, .flow a:focus-visible .flow-node rect { stroke: var(--fwg-blue-text); stroke-width: 3; }
.flow a:focus-visible { outline: none; }
.flow-edge { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; }
.flow-edge.back { stroke-dasharray: 5 4; }
.flow-tip { fill: var(--ink-muted); }
.flow-add circle { fill: var(--surface); stroke: var(--link); stroke-width: 1.5; }
.flow-add text { fill: var(--link); font-size: 14px; font-weight: 700; }
.flow-add:hover circle, .flow-add:focus-visible circle { fill: var(--status-progress-bg); stroke-width: 3; }
.flow-list { list-style: none; margin: 0; padding: 0; }
.flow-stage:target { border-color: var(--fwg-blue-text); box-shadow: inset 4px 0 0 var(--fwg-blue-text); }
.flow-stage.bad { border-left: 6px solid var(--status-attention); }
.flow-stage.moving { opacity: 0.5; }
.flow-stage.over { outline: 2px dashed var(--fwg-blue-text); outline-offset: 2px; }
.flow-stage > details { margin-top: var(--sp-2); }
.flow-stage h4 { margin: var(--sp-3) 0 var(--sp-1); }
/* The fold's own summary has said Routes. */
.flow-routes > h4 { display: none; }
button.link.flow-grip { cursor: grab; text-decoration: none; color: var(--ink-muted); }
@media (max-width: 1024px) {
  .designer { grid-template-columns: minmax(0, 1fr); }
  .flow-pane { position: static; max-height: none; }
}