/* The task pane's styles. A plain file, linked from src/taskpane/taskpane.html and copied to
   dist/assets/ as it is - not bundled into the script, so the pane's FIRST paint is already in
   its final shape (rounds/15_RULING.md Q1 item 3). The link in taskpane.html carries this file's
   hash (?v=): every build writes it (scripts/stamp-css.cjs; by hand `npm run stamp`) and the
   gate checks it. */
/* WSA house theme (work/DEVELOPMENT_GUIDELINES.md; values from work/portal globals.css) */
:root {
  --navy: #0a0a5c; --navy-light: #1a1a7a; --navy-tint: #e7e7f1;
  --gold: #96722E; --gold-dark: #7a5d24; --gold-tint: #f5ecd9;
  --cream: #f8f7f4; --charcoal: #1a2f38; --charcoal-mid: #2d4a55;
  --slate-bg: #e8edf2; --smoke: #f2f5f7; --line: #d8dce2; --line-strong: #b8bec7; --muted: #5d6f78;
  --ok-bg: #e1f0e7; --ok-text: #14613f; --ok-border: #b6d8c4;
  --stop-bg: #fbe8e2; --stop-text: #9b2c1b; --stop-border: #e8c0b2;
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--cream); color: var(--charcoal); font-family: var(--font); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 0; }
.logo { height: 26px; width: auto; }
.who { font-size: 13px; color: var(--charcoal-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

.tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; padding: 9px 12px 10px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 40px; }
.tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--gold); }
.tab:hover { color: var(--navy); }
/* Outlook never started the panel (54_RULING Q1): the tabs are there, and cannot be used */
.tab:disabled, .tab:disabled:hover { color: var(--muted); opacity: .55; cursor: default; }
/* a tab that is planned, not built yet: a small tag, so nobody opens an empty tab twice (15_RULING Q3) */
.tab { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }   /* a fixed height: the row
  keeps it whichever font has loaded, so nothing under it shifts when Outfit arrives */
.tab .soon { padding: 1px 6px 2px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-dark); font-size: 11px; font-weight: 600; line-height: 1.3; }

main { flex: 1; display: flex; flex-direction: column; }
.panel { padding: 22px 16px; }
.panel[hidden] { display: none; }
.panel h1:focus { outline: none; }
.panel h1:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.panel h1 { font-size: 17px; font-weight: 600; color: var(--navy); margin: 0 0 6px; }
.panel p { margin: 0 0 8px; color: var(--charcoal-mid); }
/* Templates and File today: what is coming, then what works now */
.panel.planned .eyebrow-gold { font-size: 12px; font-weight: 600; color: var(--gold-dark); margin: 0 0 4px; }
.panel.planned h1 { margin-bottom: 8px; }
.panel.planned .now { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--charcoal); }

.back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--navy); font-size: 14px; font-weight: 500;
  cursor: pointer; padding: 4px 8px 4px 6px; border-radius: 6px; margin: -8px 0 8px -6px; }
.back::before { content: "‹"; font-size: 18px; line-height: 1; }
.back:hover { background: var(--smoke); }

.state { display: flex; flex-direction: column; gap: 4px; border-radius: 10px; padding: 12px 14px; margin: 12px 0 16px; font-size: 14px;
  background: #fff; border: 1px solid var(--line); }
.state b { font-weight: 600; color: var(--charcoal); }
.state span { color: var(--charcoal-mid); }
.state span, .state b { overflow-wrap: anywhere; min-width: 0; }
.state button { align-self: flex-start; margin-top: 8px; }
.state-loading { flex-direction: row; align-items: center; gap: 10px; color: var(--charcoal-mid); }
.state-ok { background: var(--ok-bg); border-color: var(--ok-border); }
.state-ok b { color: var(--ok-text); }
.state-failed { background: var(--stop-bg); border-color: var(--stop-border); }
.state-failed b { color: var(--stop-text); }
.state-unset, .state-needs-user, .state-no-office { background: var(--gold-tint); border-color: #e2d3b0; }
/* the one block for the whole page (54_RULING Q1): what happened, then what to do in each kind of mailbox */
.state-no-office { margin: 0; gap: 8px; }
.state-no-office span { color: var(--charcoal); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--navy-tint); border-top-color: var(--navy); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.facts { margin: 0 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.facts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid #edf0f3; font-size: 14px; }
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--charcoal-mid); }
.facts dt { flex: 1; }
.facts dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 55%; }

.btn-primary { background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 999px; padding: 10px 18px; font-size: 14px;
  font-weight: 600; cursor: pointer; min-height: 40px; }
.btn-primary:hover { background: var(--navy-light); }
.btn-secondary { background: #fff; color: var(--charcoal); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-size: 14px;
  font-weight: 500; cursor: pointer; min-height: 40px; }
.btn-secondary:hover { background: var(--smoke); border-color: var(--line-strong); }
.small { font-size: 13px; color: var(--muted); }

.foot { padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.link { background: none; border: 0; padding: 6px 0; color: var(--navy); font-size: 13px; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ---------- the Ship tab (rounds/06_RULING.md; look from mockups/ship-tab.html) ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
/* the panel fills the pane, so the bar at its foot (.dock) rests on the pane's bottom edge */
.panel.ship { padding: 16px 16px 0; flex: 1; display: flex; flex-direction: column; }
.panel.ship[hidden] { display: none; }
.panel.ship .state { margin: 12px 0 0; }
.panel.ship .state .link { align-self: flex-start; }
#ship-state[hidden], #ship-search[hidden], #ship-card[hidden], #home[hidden] { display: none; }

.search { position: relative; }
.search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { width: 100%; font: inherit; font-size: 16px; padding: 11px 40px 11px 38px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--charcoal); min-height: 44px; transition: border-color 140ms, box-shadow 140ms; }
.search input::placeholder { color: var(--muted); }
.search input { text-overflow: ellipsis; }         /* a narrow pane: the placeholder ends in "…", not mid-letter */
.search input:hover { border-color: var(--line-strong); }
.search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10, 10, 92, 0.12); }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border: 0; background: none; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.search .clear[hidden] { display: none; }
.search .clear:hover { background: var(--smoke); color: var(--charcoal); }
/* the box is there from the first paint; it opens when the register is here */
.search input:disabled { background: var(--smoke); color: var(--muted); cursor: default; }
.search input:disabled:hover { border-color: var(--line); }
/* One slot under the search box for two lines that take turns - the hint, and "signing in /
   getting the register". Both lie in the same grid cell, and the one that is off keeps its
   room, so nothing below moves when they change over. */
.under { display: grid; margin: 6px 2px 0; }
.under[hidden] { display: none; }
.under > * { grid-area: 1 / 1; align-self: start; }
.under > [hidden] { display: block; visibility: hidden; }
.panel.ship .hint { font-size: 13px; color: var(--muted); margin: 0; }
.panel.ship .wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal-mid); margin: 0; }
.panel.ship .wait[hidden] { display: flex; }
.wait .spin { width: 13px; height: 13px; flex: none; }
.panel.ship .twins { margin: 12px 2px 0; font-size: 13px; color: var(--gold-dark); font-weight: 500; }

.group { margin-top: 20px; }
.group[hidden] { display: none; }
.group h2 { font-size: 13px; font-weight: 600; color: var(--charcoal-mid); margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; border: 1px solid var(--gold); background: #fff; color: var(--gold-dark);
  border-radius: 20px; padding: 8px 14px; font-size: 14px; font-weight: 500; cursor: pointer; min-height: 40px; max-width: 100%; text-align: left; }
.chip:hover { background: var(--gold-tint); }
.chip small { color: var(--muted); font-weight: 400; font-size: 12px; }
.chip.plain, .chip.quiet { border-color: var(--line); color: var(--charcoal); }
.chip.plain:hover, .chip.quiet:hover { background: var(--smoke); border-color: var(--line-strong); }
.chip.quiet { border-style: dashed; }
/* one grey chip while a list is on its way */
.chip.skel { width: 148px; border-color: transparent; background: var(--slate-bg); cursor: default; animation: skel 1.4s ease-in-out infinite; }
.chip.skel:hover { background: var(--slate-bg); }
@keyframes skel { 50% { opacity: 0.55; } }
.panel.ship .empty-note { font-size: 13px; color: var(--muted); margin: 0; }
/* a note in a list's place is as tall as the chip it stands in for: nothing under it moves */
.chips .empty-note { min-height: 40px; display: flex; align-items: center; }

.results { list-style: none; margin: 12px 0 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.results:empty { display: none; }
.res { border-top: 1px solid #edf0f3; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.res:first-child { border-top: 0; }
.res:hover, .res.active { background: var(--navy-tint); }
.res.active { box-shadow: inset 3px 0 0 var(--navy); }
.res .n { font-weight: 600; color: var(--navy); font-size: 15px; overflow-wrap: anywhere; }
.res .n mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.res .m { font-size: 13px; color: var(--charcoal-mid); margin-top: 1px; white-space: pre-wrap; }
.res .was { font-size: 12px; color: var(--gold-dark); margin-top: 1px; }
.nores { background: #fff; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 16px; margin-top: 12px; }
.panel.ship .nores p { margin: 0 0 10px; overflow-wrap: anywhere; }
.panel.ship .nores p.lead { font-weight: 600; color: var(--charcoal); }
a.link { display: inline-block; font-weight: 600; font-size: 14px; }

/* the ship card: the ship's nameboard - navy plate, gold keel line */
.board { background: var(--navy); color: #fff; border-radius: 12px; padding: 16px 18px 15px; position: relative; overflow: hidden; }
.board::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: var(--gold); border-radius: 3px 3px 0 0; }
.board .bn { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; color: #fff; overflow-wrap: anywhere; padding-right: 84px; }
/* The card takes the focus when it opens. Its ring is for the keyboard only: after a click or a
   tap there is none (15_RULING Q1 item 6). ship-tab.js keeps "the last input" on <html>. */
.board:focus, .board:focus-visible { outline: none; }
html[data-input="keyboard"] .board:focus { outline: 2px solid var(--navy); outline-offset: 2px; }
.board .bi { margin-top: 6px; font-size: 15px; color: #e9dcc0; }
.board .bi b { color: #fff; font-weight: 600; letter-spacing: 0.04em; }
.board .bi .flag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--stop-bg); color: var(--stop-text); font-size: 12px; font-weight: 600; }
.board .bf { margin-top: 2px; font-size: 13px; color: #c7c9e6; white-space: pre-wrap; }
.board .bw { margin-top: 8px; font-size: 12px; color: #e9dcc0; }
.board .copyimo { position: absolute; right: 10px; top: 10px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff;
  border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; min-height: 40px; }
.board .copyimo:hover { background: rgba(255, 255, 255, 0.2); }
.board .copyimo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.seen { margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--charcoal-mid); overflow-wrap: anywhere; }
.seen b { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.seen mark { background: var(--gold-tint); color: var(--charcoal); border-radius: 3px; padding: 0 2px; }
.warn { margin-top: 10px; background: var(--stop-bg); color: var(--stop-text); border: 1px solid var(--stop-border); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.warn b { display: block; font-size: 14px; margin-bottom: 2px; }

.sect { margin-top: 18px; }
.sect-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sect-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--charcoal); }
.sect-h .note { font-size: 12px; color: var(--muted); text-align: right; }
.seg { display: flex; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 7px; padding: 8px 4px; font-size: 13px; font-weight: 500; color: var(--charcoal-mid); cursor: pointer; min-height: 40px; }
.seg button:hover { color: var(--navy); background: var(--smoke); }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }

.fields { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid #edf0f3; cursor: pointer; min-height: 42px; }
.frow:first-child { border-top: 0; }
.frow:hover { background: var(--smoke); }
.frow input { accent-color: var(--navy); width: 18px; height: 18px; flex: none; margin: 0; }
.frow .fl { flex: 1 1 40%; font-size: 14px; min-width: 0; }
.frow .fv { flex: 0 1 auto; font-size: 14px; color: var(--charcoal); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.frow.blank { cursor: default; }
.frow.blank:hover { background: none; }
.frow.blank .fl, .frow.blank .fv { color: #6f7f88; }
.frow.blank .fv { font-style: italic; font-size: 13px; }
.panel.ship .quiet-line { margin: 6px 2px 0; }
.panel.ship .quiet-line:empty { display: none; }

/* ---------- the bar that stays on screen (rounds/15_RULING.md Q1 items 1, 2, 10) ----------
   .dock rests on the bottom edge of the pane and holds the toast and, with a ship open, the
   bar itself (#actions): "This goes in", the text Add writes in the email's own font, the one
   line that says where it goes, then Add and Copy. What Add is pressed on is always on screen
   beside it. The toast hangs ABOVE the dock, so it can never lie on a button. */
#ship-card { padding-bottom: 20px; }
.dock { position: sticky; bottom: 0; margin-top: auto; z-index: 4; }
.actions { margin: 0 -16px; padding: 10px 16px 12px; background: var(--cream); border-top: 1px solid var(--line);
  box-shadow: 0 -14px 20px -18px rgba(26, 47, 56, 0.45); }
.actions[hidden] { display: none; }
.panel.ship .goes { font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 4px 2px; }
/* three lines of the email's text; more (a long list, a table) scrolls inside the box */
.preview { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 14px;
  line-height: 20px; max-height: 76px; overflow-y: auto; color: #222; overflow-wrap: anywhere; user-select: text; }
.preview:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.preview .q { color: #6b7178; }
.preview table { border-collapse: collapse; font-size: 13px; width: 100%; table-layout: fixed; margin: 2px 0; }
.preview th, .preview td { border: 1px solid #c9ced6; padding: 3px 8px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.preview td:first-child { width: 44%; }
.preview th { background: #eef1f6; }
/* the preview says when it changed: a tick, a preset, a layout */
.preview.changed { animation: preview-changed 400ms ease-out; }
@keyframes preview-changed { from { background: var(--gold-tint); border-color: var(--gold); } }
.panel.ship .where { font-size: 13px; line-height: 18px; color: var(--charcoal-mid); margin: 6px 0 0 2px; padding-left: 15px; position: relative; }
.panel.ship .where:empty { display: none; }
.where::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.where.quiet::before { background: var(--line-strong); }
.panel.ship .where.stop { color: var(--stop-text); }
.where.stop::before { background: var(--stop-text); border-radius: 2px; }
/* what went wrong at Add takes the place of the "where" line */
.panel.ship .add-error { margin: 6px 0 0; background: var(--stop-bg); color: var(--stop-text); border: 1px solid var(--stop-border); border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 18px; }
.panel.ship .add-error:empty { display: none; }
.panel.ship .actions.has-error .where { display: none; }
.actions .btns { display: flex; gap: 10px; margin-top: 10px; }
.actions .btn-primary { flex: 1; min-height: 44px; padding: 12px 18px; letter-spacing: 0.02em; }
.actions .btn-primary[hidden] { display: none; }
.actions .btn-secondary { min-height: 44px; padding: 12px 18px; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }

.toast { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); background: var(--charcoal); color: #fff; border-radius: 10px; padding: 11px 14px; font-size: 14px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); transform: translateY(8px); opacity: 0; pointer-events: none; transition: opacity 180ms, transform 180ms; }
.toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .toast, .search input { transition: none; }
  .btn-primary:active:not(:disabled) { transform: none; }
  .preview.changed, .chip.skel { animation: none; }
}

/* round 11 (10_REVIEW R10-9, R10-11); round 17 (16_REVIEW R16-4): the copy box shows two lines and
   scrolls inside, and while it is open it stands in the place of the "where" line - a red one
   stays - so the bar keeps within 230 px at 320 */
.copybox { margin-top: 5px; padding: 3px 12px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; font-size: 14px; line-height: 20px;
  max-height: 48px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.copybox[hidden] { display: none; }
.copybox:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.panel.ship .actions.has-copybox .where:not(.stop) { display: none; }
/* round 18 (17_REVIEW R17-4): while the box is open the preview keeps to two lines (it scrolls
   inside), so with a red "where" line under the box as well the bar stays within 250 px */
.actions.has-copybox .preview { max-height: 56px; }
.back { min-height: 40px; }                       /* round 16: a tap target (15_RULING Q1 item 6) */
.frow input { width: 20px; height: 20px; }
.sect-h { gap: 8px; }
.sect-h .note { text-align: right; padding-right: 2px; }
@media (max-width: 340px) {
  .seg button { font-size: 12px; padding: 8px 2px; white-space: nowrap; letter-spacing: -0.01em; }
  .actions .btn-secondary { padding: 12px 14px; }
  .tabs { padding-left: 8px; padding-right: 8px; gap: 2px; }
  .tab { padding-left: 8px; padding-right: 8px; }
}
/* a pane narrower than 340 px: the cursor line keeps to its first sentence, so it stays within
   two lines (rounds/16_PLAN.md, the lead's answer to Q1) */
@media (max-width: 339.98px) { .where .tip { display: none; } }

/* ---------- the Templates tab (rounds/23_RULING.md Q3; look, flow and words from the approved
   page mockups/templates-tab.html) ---------- */
.panel.templates { padding: 16px 16px 0; flex: 1; display: flex; flex-direction: column; }
.panel.templates[hidden] { display: none; }
#tp-list[hidden], #tp-fill[hidden], #tp-state[hidden], #tp-home[hidden] { display: none; }
.panel.templates .state { margin: 12px 0 0; }
.panel.templates .wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal-mid); margin: 0; }
/* (pre-line: each row that could not be shown has its reason on a line of its own) */
.panel.templates .quiet-note { font-size: 13px; color: var(--muted); margin: 14px 2px 0; white-space: pre-line; overflow-wrap: anywhere; }
.panel.templates .quiet-note:empty { display: none; }
#tp-list { padding-bottom: 20px; }

/* ---------- the list for many templates (rounds/30_RULING.md Q6) ----------
   One line a row. The search box stays at the top of the pane while the list scrolls (.pin), each
   section's heading stays in sight right under it, and the next heading pushes it out. --tp-pin is
   the height the pinned search box takes (8 + 47 + 4). */
.panel.templates { --tp-pin: 59px; }
.panel.templates .pin { position: sticky; top: 0; z-index: 3; background: var(--cream); margin: -8px -16px 0; padding: 8px 16px 4px; }
.panel.templates .pin .search input { height: 47px; }
.panel.templates .under { margin: 2px 2px 6px; }

/* which section, whose templates: two drop-downs on one line */
.filters { display: flex; gap: 8px; }
.filters[hidden] { display: none; }
.filters select { flex: 1 1 0; min-width: 0; height: 40px; font: inherit; font-size: 16px; color: var(--charcoal); border: 1px solid var(--line); border-radius: 10px;
  padding: 0 30px 0 11px; text-overflow: ellipsis; cursor: pointer; appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235d6f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E") no-repeat right 11px center; }
.filters select:hover { border-color: var(--line-strong); }
.filters select:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10, 10, 92, 0.12); }
/* a drop-down that is narrowing the list says so in its own words - and wears the navy edge */
.filters select.on { border-color: var(--navy); background-color: var(--navy-tint); color: var(--navy); font-weight: 500; }
/* ...and takes the row, but for what the other needs to say "All sections" (80 px) / "All templates" (94 px) whole:
   its own words and their count then show (rounds/31_REVIEW.md R31-4). Both narrowing, or neither: they share the row. */
.filters select.on { flex-grow: 2; }
#tp-section:not(.on) { min-width: 124px; }
#tp-layer:not(.on) { min-width: 138px; }
@media (max-width: 339.98px) {
  /* a pane narrower than 340 px: less padding at the sides, so 11 px more for the words */
  .filters select { padding: 0 22px 0 8px; background-position: right 7px center; }
  #tp-section:not(.on) { min-width: 113px; }
  #tp-layer:not(.on) { min-width: 127px; }
  /* both narrowing: the section's name and count stand on its heading right under this row, so "whose" gets the room */
  .filters select.on ~ select.on { flex-grow: 2.34; }
}

.panel.templates .group { margin-top: 0; padding-bottom: 10px; }
.panel.templates .group h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 -16px; padding: 4px 18px 2px; font-size: 13px; line-height: 15px;
  font-weight: 600; color: var(--charcoal-mid); background: var(--cream); }
.panel.templates .group h2 small { font-size: 12px; font-weight: 400; color: var(--muted); }
.panel.templates .group.sec h2 { position: sticky; top: var(--tp-pin); z-index: 2; }
/* the one accent on the list: what answers this email wears the gold keel line */
.panel.templates .group.suggested h2 { color: var(--gold-dark); }
.group.suggested .trows { border-color: #e2d3b0; box-shadow: inset 3px 0 0 var(--gold); }
/* the one line under the group's title when Outlook did not name the draft: the "where" line's own text style */
.panel.templates .group.suggested .where { margin: 2px 2px 6px; }
.panel.templates .group.suggested .where[hidden] { display: none; }

.trows { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0;
  border-top: 1px solid #edf0f3; padding: 8px 12px; cursor: pointer; min-height: 44px; }
.trows li:first-child .trow { border-top: 0; }
.trow:hover { background: var(--smoke); }
.trow.active { background: var(--navy-tint); box-shadow: inset 3px 0 0 var(--navy); }
.trow:focus-visible { outline-offset: -2px; }
/* the name, whole: one line; a long one takes two and no more (then the whole of it is in its tooltip) */
.trow .rn { font-weight: 600; color: var(--navy); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* (a row that carries a second line holds its name to ONE line: never three lines a row - rounds/31_REVIEW.md R31-3) */
.trow.two .rn { display: block; white-space: nowrap; text-overflow: ellipsis; }
.trow .rn mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
/* at the right, on the name's own line: the tag (only where it says something - layers.mjs shownTag), then reply / new */
.trow .re { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.trow .re .tag { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .use { display: inline-flex; gap: 6px; color: var(--charcoal-mid); }
/* a second, quiet line only where it earns its room: where a search matched outside the name (why a row is suggested is its tooltip) */
.trow .r2 { grid-column: 1 / -1; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .r2 u { color: var(--charcoal); text-decoration-color: var(--gold); text-underline-offset: 2px; text-decoration-thickness: 2px; }
/* the layer is always said in words - never by colour alone */
.tag { display: inline-block; padding: 1px 8px 2px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; }
.tag-company { background: var(--navy-tint); color: var(--navy); }
.tag-mailbox, .tag-branches { background: var(--gold-tint); color: var(--gold-dark); }
.tag-mine { background: #fff; color: var(--charcoal); border-color: var(--line-strong); }
/* round 72: the row over the list - the quiet line (left, two lines at most at 320 px) and Refresh (right). One height. */
.panel.templates .listbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin: 0 2px 2px; }
.panel.templates .listbar[hidden] { display: none; }
.panel.templates .listbar .check { margin: 0; min-width: 0; font-size: 13px; line-height: 17px; color: var(--muted); overflow-wrap: anywhere; }
.panel.templates .listbar .link { flex: none; min-height: 40px; margin-left: auto; padding: 0 2px; }
.panel.templates .listbar .link[aria-disabled="true"] { color: var(--muted); cursor: default; text-decoration: none; }
.key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin: 4px 2px 0; }
.key[hidden] { display: none; }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.panel.templates .nores { margin-top: 8px; }
.panel.templates .nores p { margin: 0 0 10px; overflow-wrap: anywhere; }
.panel.templates .nores p.lead { font-weight: 600; color: var(--charcoal); }
.panel.templates .nores p:last-child { margin-bottom: 0; }
.panel.templates button.link { font-size: 14px; font-weight: 600; }
.panel.templates .nores button.link { min-height: 40px; }
/* rows on their way: grey bars in the place the list will take */
.panel.templates #tp-sections > .group[aria-hidden="true"] { padding-top: 8px; }
.trow.skel { cursor: default; }
.trow.skel:hover { background: none; }
.trow.skel i { display: block; height: 12px; width: 70%; border-radius: 6px; background: var(--slate-bg); animation: skel 1.4s ease-in-out infinite; }
.trow.skel i + i { width: 18px; }

/* the fill screen: the ship first, then only what needs typing */
#tp-fill { padding-bottom: 20px; }
.panel.templates .tn { margin: 0; font-size: 17px; font-weight: 600; color: var(--navy); line-height: 1.25; overflow-wrap: anywhere; }
.panel.templates .tn:focus { outline: none; }
html[data-input="keyboard"] .panel.templates .tn:focus { outline: 2px solid var(--navy); outline-offset: 2px; }
.panel.templates .tt { margin: 5px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--charcoal-mid); }
.shipline { margin: 14px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; overflow-wrap: anywhere; color: var(--charcoal); }
.shipline b { font-weight: 600; color: var(--navy); }
.shipline .soft { color: var(--charcoal-mid); }
/* "change" sits in the line as a word; its tap target is 40 px all the same */
.shipline button.link { padding: 11px 6px; margin: -11px -6px; min-height: 0; }
.picker { margin: 14px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.picker h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--charcoal); }
.picker .chips { margin-bottom: 10px; }
.picker .chips:empty { display: none; }
.picker .results { margin-top: 8px; }
.picker .typed-ship { margin-top: 10px; }
.picker .typed-ship:empty { display: none; }
.panel.templates .picker p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.picker button.link { min-height: 40px; }
.panel.templates .appt { margin: 8px 2px 0; font-size: 13px; color: var(--charcoal-mid); }
.panel.templates .appt:empty { display: none; }
.appt-pick { display: grid; gap: 6px; margin-top: 6px; }
.appt-pick button { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; cursor: pointer; min-height: 40px; overflow-wrap: anywhere; }
.appt-pick button:hover { background: var(--smoke); border-color: var(--line-strong); }
.appt-pick button[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); font-weight: 500; }
.panel.templates .seg { margin-top: 10px; }
.panel.templates .seg[hidden] { display: none; }
.panel.templates .sect[hidden] { display: none; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gold); background: #fff; border-radius: 20px; padding: 0 12px; min-height: 40px; max-width: 100%; cursor: text; }
.fchip span { font-size: 12px; color: var(--gold-dark); font-weight: 600; white-space: nowrap; }
.fchip input { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 16px; color: var(--charcoal); min-width: 3ch; max-width: 100%; field-sizing: content; }
.fchip input:focus { outline: none; }
/* the box inside has no ring of its own: the chip wears the page's ring (rounds/25_REVIEW.md R25-7) */
.fchip:focus-within { border-color: var(--navy); outline: 2px solid var(--navy); outline-offset: 2px; }
/* a chip that was emptied is a blank left, no fault (rounds/37_RULING.md Q4): an open, dashed chip - not a red one */
.fchip.empty { border-style: dashed; }
.blanks { display: grid; gap: 10px; }
.blanks label { display: block; font-size: 13px; font-weight: 500; color: var(--charcoal-mid); }
.blanks input, .blanks textarea { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 9px 12px; font: inherit; font-size: 16px;
  color: var(--charcoal); min-height: 42px; transition: border-color 140ms, box-shadow 140ms; }
.blanks textarea { resize: vertical; min-height: 66px; line-height: 1.4; }
.blanks input:hover, .blanks textarea:hover { border-color: var(--line-strong); }
.blanks input:focus, .blanks textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10, 10, 92, 0.12); }
.panel.templates .none-note { font-size: 13px; color: var(--muted); margin: 0; }

/* the bar: the subject, the first three lines in the email's font, where it goes, ONE action + Copy */
.panel.templates .goes { font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 4px 2px; }
/* a panel that stays open from email to email (54_RULING Q3): which email the text is for - ONE cut line, the whole of it in
   its tooltip - and, over it, the line that says another email was opened under the template */
.panel.templates .for { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--charcoal); margin: 0 0 6px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel.templates .moved { font-size: 13px; line-height: 18px; color: var(--charcoal); background: var(--gold-tint); border: 1px solid var(--gold); border-radius: 10px; padding: 6px 10px; margin: 0 0 8px; }
.panel.templates .for[hidden], .panel.templates .moved[hidden] { display: none; }
.panel.templates .subj { font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 20px; color: #222; margin: 0 0 4px 2px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.panel.templates .subj[hidden] { display: none; }
.panel.templates .subj span { color: #6b7178; }
/* three whole lines; the rest scrolls inside, and no fourth line shows through at the foot. The text is scrolled to the
   first gap left (63_RULING Q2 item 4), a whole number of lines: the 7 px over the first line stay in place while the
   text moves under them, so no part of a line shows at the top either. */
.panel.templates .preview { white-space: pre-wrap; padding-top: 0; padding-bottom: 0; max-height: 69px; }
.panel.templates .preview::before { content: ""; display: block; height: 7px; position: sticky; top: 0; background: #fff; }
.panel.templates .preview::after { content: ""; display: block; height: 7px; }
.nowrap { white-space: nowrap; }
.panel.templates .where { font-size: 13px; line-height: 18px; color: var(--charcoal-mid); margin: 6px 0 0 2px; padding-left: 15px; position: relative; }
.panel.templates .where:empty { display: none; }
.panel.templates .where.stop { color: var(--stop-text); }
.panel.templates .add-error { margin: 6px 0 0; background: var(--stop-bg); color: var(--stop-text); border: 1px solid var(--stop-border); border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 18px; }
.panel.templates .add-error:empty { display: none; }
.panel.templates .actions.has-error .where { display: none; }
.panel.templates .actions.has-copybox .where:not(.stop) { display: none; }
.tick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 40px; margin-top: 4px; cursor: pointer; }
.tick[hidden] { display: none; }
.tick input { accent-color: var(--navy); width: 20px; height: 20px; margin: 0; }
.panel.templates .actions .btns { margin-top: 6px; }

/* ---------- a blank left empty (rounds/37_RULING.md Q4): a recommendation, not a stop ----------
   Its label, in braces, IS in the text that goes in. The braces are the sign; the gold
   tint - the pane's "look here" - only helps the eye find them, and the same tint is on the count
   the button wears, so the number points at the marks. Nothing here is red: nothing is wrong. */
.panel.templates .preview mark.gap, .panel.templates .subj mark.gap { background: var(--gold-tint); color: var(--charcoal); border-radius: 3px; padding: 0 2px; }
/* the quiet line that names them, under the preview: an open ring (to do), where the "where" line has its dot.
   ONE line at every width (63_RULING Q2 item 4): cut, the whole of it in its tooltip. */
.panel.templates .tofill { font-size: 13px; line-height: 18px; color: var(--charcoal-mid); margin: 6px 0 0 2px; padding-left: 15px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel.templates .tofill[hidden] { display: none; }
/* (round 73b) over it, when a link's own words were typed and the link has nothing to put in: why that gap stands - said whole, it wraps */
.panel.templates .gapwhy { font-size: 13px; line-height: 18px; color: var(--charcoal-mid); margin: 6px 0 0 2px; overflow-wrap: anywhere; }
.panel.templates .gapwhy[hidden], .panel.templates .actions.has-error .gapwhy, .panel.templates .actions.has-copybox .gapwhy { display: none; }
.tofill::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--gold); }
.tofill b { font-weight: 500; color: var(--charcoal); }
.tofill:not([hidden]) + .where { margin-top: 2px; }
/* what went wrong at Add, and the copy box, take its place as they take the "where" line's: the bar keeps its height */
.panel.templates .actions.has-error .tofill, .panel.templates .actions.has-copybox .tofill { display: none; }
.actions .btn-primary .n { color: var(--gold-tint); font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.panel.templates .warn a { color: inherit; font-weight: 600; }
.panel.templates .warn b { display: inline; font-size: inherit; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .trow.skel i { animation: none; }
  .blanks input, .blanks textarea { transition: none; }
}

/* ---------- the reading of the email being answered (rounds/30_RULING.md Q2) ----------
   Gold is the pane's one accent, and here it says one thing: "this comes from the email" - the
   keel line on a box that holds what the email says, as on the rows the email suggests. It is
   never the only sign: the box wears the words "from the email", and the email's own line is
   under it. */
/* ONE line above the boxes: reading / found / nothing found / could not be read (the dot of the "where" line) */
.panel.templates .readline { display: flex; align-items: flex-start; gap: 8px; margin: 14px 2px 0; padding-left: 15px; position: relative; font-size: 13px; line-height: 18px; color: var(--charcoal-mid); }
.panel.templates .readline[hidden] { display: none; }
.readline::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.panel.templates .readline.found { color: var(--charcoal); font-weight: 500; }
.readline.found::before { background: var(--gold); }
/* (a reading that failed is no fault of the user and stops nothing: the line stays quiet, its mark says "not read") */
.readline.failed::before { background: var(--stop-text); border-radius: 2px; }
.panel.templates .readline.wait { padding-left: 0; }
.readline.wait::before { display: none; }
.readline .spin { width: 13px; height: 13px; flex: none; margin-top: 2px; }
/* "Read again" sits in the line as a word; its tap target is 40 px all the same */
.panel.templates .readline button.link { padding: 12px 6px; margin: -12px -6px; min-height: 0; font-size: 13px; color: inherit; }
/* a box: its label, the box, and under it what the email says */
.blanks .bl { min-width: 0; }
.blanks .tag.from { margin-left: 4px; background: var(--gold-tint); color: var(--gold-dark); font-size: 11px; padding: 0 7px 1px; vertical-align: 1px; }
.blanks .tag.from[hidden] { display: none; }
.blanks .bl.mail input, .blanks .bl.mail textarea { background: #fbf6ea; border-color: #e2d3b0; box-shadow: inset 3px 0 0 var(--gold); }
.blanks .bl.mail input:focus, .blanks .bl.mail textarea:focus { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--gold), 0 0 0 3px rgba(10, 10, 92, 0.12); }
/* (round 73c) a box TIED to a link choice ("Same as Principals" pressed): LOCKED - the house's off look (smoke, as a search box
   that is off) with the text as dark as it goes into the email, and a navy bar where a value from the email wears a gold one;
   the choice's words as a tag by the label, and one line under the box that says how to type instead */
.blanks .bl.tied input, .blanks .bl.tied textarea { background: var(--smoke); border-color: var(--line); box-shadow: inset 3px 0 0 var(--navy); color: var(--charcoal); cursor: default; }
.blanks .bl.tied input:focus, .blanks .bl.tied textarea:focus { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy), 0 0 0 3px rgba(10, 10, 92, 0.12); }
.blanks .tag.tie { margin-left: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; background: var(--navy-tint); color: var(--navy); font-size: 11px; padding: 0 7px 1px; }
.blanks .tag.tie[hidden], .blanks .tienote[hidden] { display: none; }
.blanks .tienote { margin: 4px 2px 0; font-size: 13px; line-height: 18px; color: var(--charcoal-mid); overflow-wrap: anywhere; }
/* (round 71) the choices of a box: one button each under it - the ship picker's chip; the one that stands in the box is marked */
.blanks .choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.blanks .choices .chip { overflow-wrap: anywhere; }
/* (round 73b) a button's words: three lines at most - a long linked value is cut, the whole of it is the button's tooltip */
.blanks .choices .chip .cw { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.blanks .choices .chip[aria-pressed="true"] { background: var(--gold-tint); border-color: var(--gold-dark); font-weight: 600; }
/* (round 73) a link with no value yet ("Same as Principals - no principal yet"): off, its words still read */
.blanks .choices .chip[aria-disabled="true"], .blanks .choices .chip[aria-disabled="true"]:hover { background: var(--smoke); border-color: var(--line); color: var(--muted); cursor: default; }
.mailnote { margin: 4px 2px 0; }
.mailnote:empty { display: none; }
/* the email's own words, in the email's own font: two lines at most (the whole of it is in its tooltip) */
.mailnote .snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 13px;
  line-height: 17px; color: var(--charcoal-mid); }
/* the user typed something else: the email's value is offered, never put over theirs */
.panel.templates .mailnote button.use { display: block; width: 100%; text-align: left; min-height: 40px; padding: 8px 0 6px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
/* the user's switch, at the foot of the list */
.panel.templates .aiswitch { margin: 14px 2px 0; font-size: 13px; color: var(--muted); }
.panel.templates .aiswitch[hidden] { display: none; }
.aiswitch b { font-weight: 600; color: var(--charcoal-mid); }
.panel.templates .aiswitch button.link { padding: 12px 6px; margin: -12px -6px; min-height: 0; font-size: 13px; font-weight: 500; }
/* the template's own To / CC (round 47, rounds/50_RULING.md Q2): a native checkbox per address, the full address its label -
   never cut (overflow-wrap: anywhere at 320 px); in the bar (three defaults or fewer) or at the foot of the scrolling area */
.panel.templates .addr { margin-top: 18px; }
.panel.templates .addr[hidden] { display: none; }
.panel.templates .addr.in-bar { margin: 0 0 4px 2px; }
.addr-f { border: 0; margin: 0; padding: 0; min-width: 0; }
.addr-f + .addr-f { margin-top: 6px; }
.addr-f legend { padding: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.addr-l { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding: 4px 0; font-size: 14px; line-height: 20px; color: var(--charcoal); cursor: pointer; }
.addr-l input { accent-color: var(--navy); width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.addr-l span { min-width: 0; overflow-wrap: anywhere; }
.addr-l input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.panel.templates .addr-n { margin: 2px 0 0 28px; font-size: 13px; line-height: 18px; color: var(--muted); }
.addr.in-bar .addr-l { min-height: 28px; padding: 2px 0; }