/* Shared screen layout for the partner portal (index.html), website steps and
   the client upload page. Spacing and structure stay; color is the theme-tokens-light
   block below. Dark mode overrides those tokens in theme.css. */

.page{
  /* theme-tokens-light */
  --ink:#0f1f38;--muted:#3f4d63;--line:#d5dce7;--paper:#fff;
  --bg:#f5f7fa;--track:#eaeef4;--alt:#f6f8fb;--row:#dce8f6;--hover:#e8edf4;--sel:#e9eef6;
  --accent:#1a365d;--accent-hover:#10243f;--link:#9a3412;--spark:#9a3412;--heading:#1a365d;
  --blue:var(--link);--blue-hover:#7c2d12;--orange:#9a3412;--focus:var(--ink);--on-accent:#fff;
  --note-bg:#edf1f7;--note-ink:#1a365d;--note-line:#c3cfe0;
  --err-bg:#fff1f2;--err-ink:#9f1239;--err-line:#fecdd3;
  --ok-bg:#ecfdf5;--ok-ink:#065f46;--ok-line:#a7f3d0;
  --busy-bg:#eef1f6;--busy-ink:#1a365d;
  --field-line:#64748b;--code-bg:#0b1628;--code-ink:#f3f6fb;
  /* The edge of a control you press or pick (buttons, tabs, chips, toggles):
     at least 3:1 on paper, bg, alt, track, hover and sel. --line stays for
     decorative dividers between things, which need not reach 3:1. */
  --control-line:#64748b;
  --brand-blue:var(--heading);--brand-orange:var(--spark);--brand-orange-500:var(--accent);--brand-orange-600:var(--accent-hover);
  --brand-text:var(--ink);--brand-light-bg:var(--bg);--brand-slate-800:var(--code-bg);
  --gray-50:var(--alt);--gray-200:var(--line);--gray-300:var(--line);--gray-500:var(--muted);--gray-600:var(--muted);--gray-800:var(--ink);--slate-200:var(--line);
  --font-serif:var(--font-sans);
  --glow:0 0 0 1px rgb(26 54 93 / .08), 0 16px 40px rgb(15 31 56 / .07);
  color-scheme:light;
  min-height:100vh;min-height:100dvh;background-color:var(--bg);color:var(--ink);
  background-image:
    radial-gradient(920px 520px at -8% -12%, rgb(26 54 93 / .14), transparent 62%),
    radial-gradient(720px 460px at 108% -8%, rgb(243 108 33 / .13), transparent 58%),
    radial-gradient(560px 380px at 78% 118%, rgb(26 54 93 / .08), transparent 62%);
  background-attachment:fixed;
  font-family:var(--font-sans);font-size:.875rem;line-height:1.5;display:block}
.page *{box-sizing:border-box}
/* Installed app / notched phones (viewport-fit=cover): keep content clear of the
   notch and rounded corners in landscape. Fixed bars handle their own insets. */
body.page{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
[hidden]{display:none!important}
.page a{color:var(--blue)}
.page .skip-link{position:absolute;left:12px;top:-60px;z-index:80;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none}
.page .skip-link:focus{top:12px;color:var(--on-accent)}
/* The area a skip link lands on takes focus but is not a control: no ring around the whole page. */
main[tabindex="-1"]:focus,#main[tabindex="-1"]:focus,#progress[tabindex="-1"]:focus{outline:none}
.page h1,.page h2,.page h3,.page h4{font-family:var(--font-sans);color:var(--ink);line-height:1.4}

/* ---- Buttons and fields (OfficeEmails.module.css .page button / input) ---- */
.page button,.page .button,.modal button{min-height:44px;border:1px solid var(--control-line,#64748b);border-radius:8px;background:var(--paper,#fff);color:var(--ink,#1a1a1a);
  font:600 .8125rem/1.4 var(--font-sans);padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap}
.page button:disabled,.modal button:disabled,.page .button[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.page button:hover:not(:disabled),.page .button:hover,.modal button:hover:not(:disabled){background:var(--hover)}
.page .primary,.modal .primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.page .primary:hover:not(:disabled),.page a.primary:hover,.modal .primary:hover:not(:disabled){background:var(--accent-hover)}
.page :is(button,a,input,textarea,select,summary,label):focus-visible,.modal :is(button,a,input,textarea,select):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.page input:not([type=radio]):not([type=checkbox]):not([type=file]),.page select,.page textarea{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--field-line);border-radius:8px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:.875rem;line-height:1.5;min-height:44px}
.page textarea{resize:vertical}
/* A search box with its own Clear search button (public/search-text.js bindSearchClear). */
.search-field{position:relative;display:block;flex:1 1 auto;min-width:0}
.page .search-field input.search-input[type=search]{padding-right:52px}
.search-field input[type=search]::-webkit-search-cancel-button,.search-field input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.page .search-field .search-clear{position:absolute;top:50%;right:2px;transform:translateY(-50%);display:grid;place-items:center;width:44px;min-width:44px;min-height:40px;padding:0;margin:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer}
.page .search-field .search-clear:hover{color:var(--ink);background:var(--hover)}
.page .search-field .search-clear[hidden]{display:none}
.search-empty{display:grid;gap:10px;justify-items:start;padding:16px}
.search-empty p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink)}
.search-empty .search-empty-ways{display:flex;flex-wrap:wrap;gap:8px}
.search-filters{margin:0 0 12px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.page label{display:block;font-size:.8125rem;font-weight:600;margin:12px 0 6px}
.page summary{cursor:pointer;font-weight:600;min-height:44px;padding:12px 0;color:var(--ink)}
.page svg{flex:none}

/* ---- Header (OfficeEmails .header + brand shell logo/divider) ------------ */
.header{border-bottom:1px solid var(--line);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(16px)}
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex-wrap:wrap}
.header-left{display:flex;align-items:center;gap:24px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:4px;flex:none;text-decoration:none;min-height:44px;min-width:44px}
.brand-icon{height:32px;width:32px;object-fit:contain}
.brand-word{height:34px;width:auto;margin-top:6px;object-fit:contain}
.divider{width:1px;height:20px;background:var(--line);flex-shrink:0}
.header h1{font-family:var(--font-sans);color:var(--ink);font-size:1.25rem;font-weight:650;margin:0;letter-spacing:-.02em;white-space:nowrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.header .actions{flex-wrap:nowrap}
.header select,.header .viewas{width:auto;max-width:12rem;min-width:0}
.page .icon-only{width:44px;padding:0}

/* The partner portal's bar is the shared global bar: public/global-nav.css.
   View-as (Samuel only) sits just under it on Home. */
.viewas-row{display:flex;justify-content:flex-end;padding:8px 24px 0}
.viewas-row[hidden]{display:none}
.viewas-row .viewas{width:auto;max-width:16rem;min-width:0}
@media (max-width:760px){.viewas-row{padding:8px 12px 0}.viewas-row .viewas{max-width:none;width:100%}}

/* ---- Segmented control (OfficeEmails .tabs) ------------------------------ */
.tabs{display:inline-flex;background:var(--track);padding:3px;gap:3px;border-radius:9px}
.page .tabs button{border:0;background:transparent;min-height:44px;padding:8px 14px}
.page .tabs button:hover:not(:disabled){background:var(--hover)}
/* The picked option has its own edge, so it does not rely on a shade of the track. */
.page .tabs button[aria-pressed=true]{background:var(--paper);box-shadow:0 0 0 1px var(--control-line),0 1px 2px rgb(18 16 26 / .12)}
.count{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.tabs button[aria-pressed=true] .count{color:var(--ink)}
/* Numbers people compare (public/number-format.js writes them): digits all the
   same width, and right-aligned in a table so the columns line up. The table
   rule is specific enough to win over a page's own `td { text-align:left }`. */
.numeric{font-variant-numeric:tabular-nums}
table th.numeric,table td.numeric{text-align:right;font-variant-numeric:tabular-nums}

/* ---- Two-pane layout (OfficeEmails .layout/.queue/.workspace) ------------ */
.layout{padding:24px;display:grid;grid-template-columns:clamp(310px,22vw,400px) minmax(0,1fr);gap:24px;align-items:start}
.queue,.workspace,.panel{border:1px solid var(--line);background:var(--paper);border-radius:12px;overflow:hidden}
.workspace{overflow:clip}
.queue{position:sticky;top:calc(var(--gn-offset,0px) + 20px)}
.queue-header{padding:16px;border-bottom:1px solid var(--line)}
.queue h2{font-size:.9375rem;margin:0 0 12px;font-weight:700}
/* Mailbox and folder switches wrap onto a second row rather than run past the column. */
.queue-header>.tabs{display:flex;flex-wrap:wrap;margin-bottom:12px}
.page .queue-header>.tabs button{flex:1 1 auto;min-width:0;white-space:normal}
.page .queue-header>.wide{width:100%;margin-bottom:12px}
.queue-list{max-height:calc(100vh - 300px);min-height:220px;overflow:auto}
.page .queue-label{margin:0 0 6px}
.picker{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px;margin-bottom:12px}
.page .picker button{padding:0}
.group-heading{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;gap:12px;margin:0;padding:9px 16px;font-size:.75rem;font-weight:700;line-height:1.4;color:var(--ink);background:var(--track);border-bottom:1px solid var(--line)}
.group-heading span{font-weight:500;color:var(--muted)}
.page .queue-item{width:100%;display:block;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px;min-height:110px;background:var(--paper);white-space:normal}
.queue-item strong{font-size:.8125rem;line-height:1.55;display:block}
.queue-item>span{display:block;font-size:.75rem;color:var(--muted);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.queue-item>div{margin-top:12px;display:flex;gap:12px;justify-content:space-between;align-items:center;font-size:.6875rem;color:var(--muted);font-weight:500}
.page .queue-item.no-line{min-height:0}
.page .queue-item.alt,.queue-list>.queue-item:nth-child(even){background:var(--row)}
.page .queue-item:hover:not(:disabled){background:var(--hover)}
.page .queue-item.selected{background:var(--sel);box-shadow:inset 3px 0 var(--orange)}
.queue-item.read strong{font-weight:500}
.record-details{display:inline}
.record-details summary{display:inline;cursor:pointer;text-decoration:underline;font-weight:600}
.record-details p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
/* A list row is a real link (public/links.js): it looks like the row it always was. */
.page a.queue-item{color:var(--ink);text-decoration:none;font:600 .8125rem/1.4 var(--font-sans);cursor:pointer;box-sizing:border-box}
/* A link to another site opens in a new tab and carries this mark (public/links.js). */
.ext-mark{display:inline-block;margin-left:.25em;font-size:.85em;line-height:1;text-decoration:none}
.badge{display:inline-block;margin-right:6px;padding:0 6px;border-radius:5px;background:var(--busy-bg);color:var(--busy-ink);font-size:.6875rem;font-weight:700;line-height:1.7;vertical-align:1px}
.badge.ok{background:var(--ok-bg);color:var(--ok-ink)}.badge.err{background:var(--err-bg);color:var(--err-ink)}.badge.busy{background:var(--busy-bg);color:var(--busy-ink)}
.empty{padding:24px;color:var(--muted)}
/* Home with no request open: the start button sits inside the card's padding.
   Tablets and up already show it at the top of the request list. */
.page .composer-container>.empty+.button{margin:0 24px 24px}
@media (min-width:761px){.page .composer-container>.empty+.button{display:none}}
section.empty{border:1px dashed var(--line);border-radius:12px;background:var(--paper)}
.loading{padding:24px;color:var(--muted);margin:0}

.workspace-header{padding:22px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.workspace-header>div:first-child{min-width:0}
.workspace-header h2{font-family:var(--font-sans);color:var(--ink);font-size:1.3125rem;font-weight:650;line-height:1.4;letter-spacing:-.02em;margin:7px 0;overflow-wrap:anywhere}
.workspace-header p{font-size:.75rem;color:var(--muted);margin:6px 0 0}
/* An open request: header with the Summary / Live chat switch, then one pane
   that fills the rest of the screen. The live pane is the embedded session. */
/* --fbw-dock: the Feedback bar along the bottom (feedback.css); the pane ends above it. */
.workspace.request-open{display:flex;flex-direction:column;height:calc(100vh - 130px - var(--fbw-dock,0px));height:calc(100dvh - 130px - var(--fbw-dock,0px));min-height:560px}
.page .request-bar{align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);flex:0 0 auto;flex-direction:row}
.request-bar h2{font-size:1.0625rem;margin:0}
.page .request-bar p.request-asked{margin:2px 0 0}
.request-asked:empty{display:none}
.request-controls{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* A request's status chip (public/status-look.css), beside its title in tabs and lists. */
.request-status{margin-right:6px}
.request-controls .badge,.request-controls .request-status{margin:0;white-space:nowrap}
.request-pane{flex:1 1 auto;min-height:0}
.request-pane[hidden]{display:none}
.request-summary{overflow:auto}
.request-summary .details{margin-top:8px}
.request-live{display:flex;flex-direction:column}
.session-frame{display:block;width:100%;flex:1 1 auto;min-height:0;border:0;background:var(--bg)}
.eyebrow{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.review-bar{position:sticky;top:var(--gn-offset,0px);bottom:0;z-index:3;padding:12px 24px;border-block:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--bg);min-height:70px}
.page .phone-back{display:none}
.client-triage{padding:16px}
.research-note{margin:0;padding:12px 24px;font-size:.8125rem;line-height:1.6;background:var(--note-bg);border-bottom:1px solid var(--note-line);color:var(--note-ink)}
/* Client sites band: its links stand alone, so on a phone they get 16px text and 44px targets. */
@media (pointer:coarse),(max-width:760px){p.research-note{font-size:1rem}p.research-note a{display:flex;align-items:center;min-height:44px}p.research-note .rn-sep{display:none}}
.review{padding:24px}
.file-add{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 0 8px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.file-add .small-heading{margin-top:0}
.file-add input[type=file]{font:inherit;max-width:100%}
/* File pickers: a 44px button to tap (the native one is about 22px tall). */
.page input[type=file]{min-height:44px;max-width:100%}
.page input[type=file]::file-selector-button{min-height:44px;margin-right:10px;padding:0 14px;border:1px solid var(--control-line);border-radius:8px;background:var(--paper);color:var(--ink);font:600 .8125rem/1.4 var(--font-sans);cursor:pointer}
/* Touch screens (phones, tablets): every text field, text area and select at 16px
   or more, so iOS Safari does not zoom the page in when one gets focus. !important
   because pages size their own fields above the .page default (the request
   composer, the Feedback pickers, the rule filters); no field is larger than 16px,
   so this only ever raises one. tests/phone-touch.spec.mjs measures every page. */
@media (pointer:coarse),(max-width:760px){
  :is(input:not([type=radio],[type=checkbox],[type=file],[type=range],[type=color],[type=button],[type=submit],[type=reset],[type=image]),select,textarea){font-size:max(1rem,16px)!important}
}
.file-add.request-files{flex:0 0 auto;margin:0;padding:12px 16px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.upload-progress{display:block;width:100%;height:10px;border:0;border-radius:999px;background:var(--track);overflow:hidden;appearance:none;-webkit-appearance:none}
.upload-progress::-webkit-progress-bar{background:var(--track);border-radius:999px}
.upload-progress::-webkit-progress-value{background:var(--accent);border-radius:999px}
.upload-progress::-moz-progress-bar{background:var(--accent);border-radius:999px}
/* Adding a file, the same everywhere (public/file-pick.js): a drop area with a real
   Choose files button and the limits beside it, then one row per file with its
   progress, what went wrong, and Cancel / Retry / Remove. */
.file-input-hidden{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;min-width:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important}
.file-field{display:grid;gap:6px;margin:14px 0}
.file-chosen{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.875rem;color:var(--ink);overflow-wrap:anywhere}
.file-drop{display:grid;gap:6px;padding:14px 16px;border:2px dashed var(--control-line);border-radius:12px;background:var(--alt);transition:border-color .15s,background-color .15s}
.file-drop.file-drop-over{border-color:var(--accent);background:var(--sel)}
.file-drop-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.file-drop-title{margin:0;font-weight:600;color:var(--ink)}
.file-limits{margin:0;font-size:.8125rem;color:var(--muted)}
.fp-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fp-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name size actions" "bar bar actions" "state state actions";column-gap:10px;row-gap:2px;align-items:center;padding:6px 8px 6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:.875rem}
.fp-name{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.fp-size{grid-area:size;color:var(--muted);white-space:nowrap;font-size:.8125rem}
.fp-bar{grid-area:bar;width:100%;height:8px;accent-color:var(--accent)}
.fp-state{grid-area:state;min-width:0;color:var(--muted);font-size:.8125rem;overflow-wrap:anywhere}
.fp-actions{grid-area:actions;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.page .fp-btn{padding:0 12px;font-size:.8125rem}
.fp-row[data-state=failed]{border-color:var(--err-line);background:var(--err-bg)}
.fp-row[data-state=failed] .fp-state{color:var(--err-ink)}
.fp-row[data-state=done] .fp-state{color:var(--ok-ink)}
.ct-limits{margin:0;font-size:.75rem;color:var(--muted)}
.ct-actions{grid-column:3;grid-row:1/3;display:flex;align-items:center;gap:4px}
.page .ct-retry{min-height:36px;padding:0 10px;font-size:.75rem}
@media (pointer:coarse){.page .ct-retry{min-height:44px}}
@media (max-width:560px){.fp-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name size" "bar bar" "state state" "actions actions"}.fp-actions{justify-content:flex-start}}
/* "New version available" (public/version-check.js): a slim bar across the top that
   takes its own space while shown (html.update-banner-shown), so it never covers the
   header, the request tabs, the live chat or a composer. One row: the words (each one
   line), then Refresh and Later, 44px tall. */
html{--ub-space:56px}
.update-banner{position:fixed;top:0;left:0;right:0;z-index:60;box-sizing:border-box;height:var(--ub-space);display:flex;align-items:center;gap:8px;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--note-line);background:var(--note-bg);color:var(--note-ink);font-size:.8125rem;line-height:1.35;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.update-banner[hidden]{display:none}
.update-banner>span{flex:1 1 auto;min-width:0}
.update-banner strong,.update-banner .update-whats-new{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.update-banner strong{font-weight:600}
.update-banner .update-whats-new:empty{display:none}
.update-banner button{flex:none;font:inherit;padding:0 14px;min-height:44px;min-width:44px}
html.update-banner-shown body{padding-top:var(--ub-space)}
html.update-banner-shown .workspace.request-open{height:calc(100dvh - 170px - var(--ub-space) - var(--fbw-dock,0px))}
/* Phones: clear of the notch; a request open full screen starts below the bar. */
@media (max-width:760px){
 html{--ub-space:calc(60px + env(safe-area-inset-top,0px))}
 .update-banner{padding-top:env(safe-area-inset-top,0px);gap:6px;font-size:.75rem}
 .update-banner button{padding:0 12px}
 html.update-banner-shown .layout[data-phone-view=message]>.workspace.request-open{top:var(--ub-space);padding-top:0}
}
/* "Your sign-in has expired" (public/sign-in-watch.js): the update bar's look and
   place, and it stands in for that bar while shown. Its words may take two lines. */
.signin-banner strong,.signin-banner .signin-detail{display:block;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.signin-banner .signin-hide{padding:0;font-size:1.25rem;line-height:1}
html.signin-banner-shown .update-banner:not(.signin-banner){display:none}
html.signin-banner-shown body{padding-top:var(--ub-space)}
html.signin-banner-shown .workspace.request-open{height:calc(100dvh - 170px - var(--ub-space) - var(--fbw-dock,0px))}
@media (max-width:760px){
 .signin-banner strong{-webkit-line-clamp:2}
 .signin-banner .signin-detail{display:none}
 html.signin-banner-shown .layout[data-phone-view=message]>.workspace.request-open{top:var(--ub-space);padding-top:0}
}
.envelope{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 32px;margin:0;font-size:.8125rem;line-height:1.6;overflow-wrap:anywhere}
.envelope dt{color:var(--muted);font-weight:500}
.envelope dd{margin:0;min-width:0}
.envelope-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;grid-column:1/-1;min-width:0}
.subject{font-size:1.125rem;font-weight:600;line-height:1.5;margin:22px 0 16px;padding-top:20px;border-top:1px solid var(--line);letter-spacing:-.015em}
.preview{width:100%;border:1px solid var(--field-line);border-radius:8px;background:var(--paper);min-height:320px;display:block;padding:32px;margin:0;font:.875rem/1.7 var(--font-sans);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.edit-layout{padding:24px;display:grid;gap:24px}
.edit-form{min-width:0;max-width:1040px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.message-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 0 6px;font-weight:600;font-size:.8125rem}
.page textarea.editor{border-radius:8px;min-height:340px;padding:18px;font:.875rem/1.7 var(--font-sans);overflow-wrap:anywhere}
.details{margin:0 24px;border-top:1px solid var(--line);padding:4px 0 14px}
.helper{color:var(--muted);font-size:.75rem;line-height:1.6}
.freshness{margin:6px 0 0}.freshness.stale{color:var(--err-ink)}
p.helper{margin:6px 0 0}
.small-heading{font-size:.875rem;font-weight:600;margin:18px 0 6px}
.status{font-size:.8125rem;color:var(--muted);margin:0}.status.ok{color:var(--ok-ink)}.status.err{color:var(--err-ink)}
.inspect-banner{padding:12px 24px;background:var(--note-bg);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8125rem;color:var(--note-ink);border-bottom:1px solid var(--note-line)}
.notice{margin:16px 24px 0;background:var(--note-bg);border:1px solid var(--note-line);border-radius:9px;padding:12px 16px;color:var(--note-ink);line-height:1.6}
.notice.error,.error{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
.notice a{color:inherit;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.attachment-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.attachment-list li{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;border:1px solid var(--line);border-radius:8px;background:var(--alt);padding:6px 10px;color:var(--ink);overflow-wrap:anywhere;font-size:.8125rem}
.attachment-list li a{font-weight:600;text-decoration:none}.attachment-list li a:hover{text-decoration:underline}
.attachment-list li span{color:var(--muted);white-space:nowrap}
/* A long note wraps under the file name instead of squeezing it to one letter wide. */
.attachment-list li{flex-wrap:wrap}
.attachment-list li a{min-width:min(16ch,100%)}
.attachment-list li .att-note{white-space:normal;min-width:0}
@media (pointer:coarse),(max-width:760px){.attachment-list li a{display:inline-flex;align-items:center;min-height:44px}}
/* Pictures from a link (public/image.js): the box has its size before the picture arrives, a quiet placeholder while it loads, and a tidy stand-in when it can't be shown. */
.img-box{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;max-width:100%;overflow:hidden;border-radius:6px;background:var(--note-bg);color:var(--note-ink)}
.img-box img{display:block;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .12s ease-out}
.img-box[data-image-status=loaded]{background:transparent}
.img-box[data-image-status=loaded] img{opacity:1}
@media (prefers-reduced-motion:reduce){.img-box img{transition:none}}
.file-thumb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:6px;overflow:hidden;background:var(--note-bg)}
.file-thumb img{object-fit:cover}
.attachment-list li:has(> .file-thumb){display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center}
.attachment-list li > .file-thumb{grid-row:1 / span 3;align-self:start}
.attachment-list li:has(> .file-thumb) > :not(.file-thumb){grid-column:2;min-width:0}
.file-badge,.attachment-list li .file-badge{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--note-ink);font-size:.6875rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.client-title{display:flex;align-items:center;gap:12px;min-width:0}
.client-title h2{min-width:0}
.client-mark{border-radius:10px}
.client-mark img{object-fit:contain;background:var(--paper)}
.client-mark-initials{font-size:.9375rem;font-weight:700;letter-spacing:.02em;color:var(--note-ink)}
.plain-list{margin:0;padding-left:18px;font-size:.8125rem;line-height:1.7}
.pre{white-space:pre-wrap;margin:0;font-size:.8125rem;line-height:1.7}
.block{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.page .up-main{max-width:1040px;margin:0 auto;padding:24px 24px 48px}
.page .up-card,.page .up-drop{border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:none}
.page .up-card{padding:24px;margin:16px 0 0}
.page .up-intro h1{font-family:var(--font-sans);color:var(--ink);font-size:1.4375rem;font-weight:650;letter-spacing:-.02em;margin:0 0 8px}
.page .btn,.page a.btn{border-radius:8px;box-shadow:none;transform:none;min-height:44px;font-weight:600}
.page .btn.primary,.page a.button.primary{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent)}
.page .btn.primary:hover,.page a.button.primary:hover{background:var(--accent-hover);transform:none}
.page .up-drop{border-style:dashed;background:var(--alt);text-align:center;padding:32px 20px}
.page .up-drop.over{border-color:var(--spark);background:var(--sel)}
.page .up-agents pre{background:var(--code-bg);color:var(--code-ink);border-radius:8px;padding:12px 14px;overflow:auto}
/* A code block that scrolls is a Tab stop: its ring sits outside, on the page, not on the dark block. */
.page .up-agents pre:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.page .up-banner.ok{background:var(--ok-bg);color:var(--ok-ink);border-radius:9px;padding:12px 16px}
.page .up-banner.err{background:var(--err-bg);color:var(--err-ink);border-radius:9px;padding:12px 16px}

/* ---- Dialog (OfficeEmails .modal) ---------------------------------------- */
.modal{position:fixed;inset:0;margin:auto;width:min(640px,calc(100vw - 32px));height:fit-content;border:1px solid var(--line,#e2e8f0);border-radius:14px;--modal-pad:26px;padding:var(--modal-pad);background:var(--paper,#fff);color:var(--ink,#0f1f38);
  box-shadow:var(--glow,0 18px 70px rgb(15 31 56 / .28));font:.875rem/1.65 var(--font-sans);max-height:calc(100dvh - 40px);overflow:auto}
.modal::backdrop{background:rgb(6 13 26 / .64)}
.modal-brand{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.modal-brand .brand-icon{height:36px;width:36px}.modal-brand .brand-word{height:40px}
.modal .modal-brand button{min-width:44px;border:0;background:transparent;padding:8px}
.modal h2{font-family:var(--font-sans);color:var(--ink);font-size:1.4375rem;line-height:1.3;margin:0 0 18px;font-weight:650;letter-spacing:-.02em}
.modal p{margin:12px 0}
.modal-subject{border-block:1px solid var(--line,#e2e8f0);padding:14px 0;font-weight:600;font-size:1rem;overflow-wrap:anywhere}
.modal-actions{position:sticky;bottom:calc(-1 * var(--modal-pad));display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:24px 0 calc(-1 * var(--modal-pad));padding:12px 0 var(--modal-pad);background:var(--paper,#fff)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Confirm before an irreversible action, Undo after a reversible one
   (public/confirm-dialog.js, 2026-10-19). #b42318 under white is 6.5:1 in both themes. */
.modal .danger{background:#b42318;color:#fff;border-color:#b42318}
.modal .danger:hover:not(:disabled){background:#912018}
.confirm-dialog{width:min(480px,calc(100vw - 32px))}
.confirm-dialog h2{font-size:1.1875rem;overflow-wrap:anywhere}
.confirm-dialog::backdrop{background:rgb(6 13 26 / .64)}
/* Top of the screen, so it never covers a composer, Send or Attach; just under
   the top bar (--gn-offset is its height), so it never covers the bar's controls. */
.undo-notice{position:fixed;top:max(calc(var(--gn-offset,53px) + 8px),env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:2147482000;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:max-content;max-width:min(560px,calc(100vw - 24px));padding:6px 6px 6px 14px;border:1px solid var(--line,#e2e8f0);border-radius:12px;background:var(--paper,#fff);color:var(--ink,#0f1f38);box-shadow:var(--glow,0 10px 30px rgb(15 31 56 / .28));font:.875rem/1.4 var(--font-sans)}
.undo-notice[data-undo-notice=failed]{border-color:var(--err-line,#b42318);background:var(--err-bg,#fff);color:var(--err-ink,#7a1a12)}
.undo-notice-text{flex:1;min-width:0;overflow-wrap:anywhere}
.undo-notice button{min-height:44px;min-width:44px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font:600 .8125rem/1.4 var(--font-sans);padding:0 12px;cursor:pointer}
.undo-notice .undo-notice-action{text-decoration:underline}
.undo-notice .undo-notice-close{border:0;font-size:1.25rem}
.undo-notice button:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
.undo-notice button:disabled{opacity:.6;cursor:progress}

/* ---- Single centred card (sign-in, upload 404) ---------------------------- */
.solo{max-width:560px;margin:56px auto 0;padding:0 16px 48px}
.solo .panel{padding:26px}
.solo h1,.solo h2{font-family:var(--font-sans);color:var(--ink);font-size:1.4375rem;line-height:1.3;margin:0 0 12px;font-weight:650;letter-spacing:-.02em}
.solo p{margin:12px 0}
/* A not-found or "didn't open" page's links back (lib/not-found-page.js, public/404.html). */
.solo .message-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
/* The same "isn't available anymore" words inside a view's workspace (public/portal.js notFoundPanel). */
.workspace .not-found{padding:24px;max-width:560px}
.not-found h2{margin:0 0 8px}
/* Focus is moved to the heading so a screen reader says it; it is not a control, so no ring. */
.not-found h2[tabindex="-1"]:focus{outline:none}
/* A part of a page, or one item in a list, that couldn't be drawn (public/panel-guard.js):
   plain words and Try again, in the theme's alert colours. The rest of the page keeps working. */
.panel-failed{display:grid;gap:8px;justify-items:start;margin:12px;padding:14px 16px;border:1px solid var(--err-line);border-radius:9px;background:var(--err-bg);color:var(--err-ink);line-height:1.5}
.panel-failed p{margin:0;color:inherit;font-size:.875rem}
.panel-failed .panel-failed-text{font-weight:650}
.panel-failed-actions{display:flex;flex-wrap:wrap;gap:8px}
.panel-failed.inline{margin:6px 0;padding:10px 12px;gap:6px}
.page-failed .panel{border-color:var(--err-line)}
.page-failed h2[tabindex="-1"]:focus{outline:none}
.foot{text-align:center;color:var(--muted);font-size:.75rem;line-height:1.6;margin:20px 0 0}
.foot a{color:var(--blue)}

@media (max-width:1150px){
  .notice{margin-inline:16px}
  .layout{grid-template-columns:270px minmax(0,1fr);gap:16px;padding:16px}
  .workspace-header{flex-direction:column}
  .review-bar{flex-wrap:wrap}
  .workspace-header,.review,.edit-layout{padding:20px}
}
@media (max-width:760px){
  .page{font-size:1rem}
  .header{padding:14px 16px;flex-wrap:wrap}
  .header .actions{flex-wrap:wrap;justify-content:flex-end}
  .header-left{gap:14px}
  .header h1{font-size:1.125rem}
  .brand-word{display:none}
  .layout{grid-template-columns:minmax(0,1fr);padding:12px;gap:12px}
  .queue{position:static}
  .layout[data-phone-view=list]>:not(.queue){display:none}
  .layout[data-phone-view=message]>.queue{display:none}
  .queue-list{max-height:none;min-height:0}
  .workspace-header>*{min-width:0;max-width:100%}
  .page .phone-back{display:inline-flex;margin:-8px 0 8px -12px;border:0;background:transparent}
  .layout[data-phone-view=message]>.workspace.request-open{position:fixed;inset:0 0 var(--fbw-dock,0px) 0;z-index:20;height:auto;min-height:0;border:0;border-radius:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
  html:has(.layout[data-phone-view=message]>.workspace.request-open){overflow:hidden}
  body.fbw-on .layout[data-phone-view=message]>.workspace.request-open{padding-bottom:0}
  .page .request-bar{flex-wrap:wrap;gap:8px 10px;padding:8px 12px 10px}
  .request-bar .request-title{flex:1 1 100%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:4px}
  .page .request-bar .phone-back{margin:0 0 0 -10px;padding:0 8px}
  .request-bar h2{font-size:1rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
  .page .request-bar p.request-asked{grid-column:2;margin:0}
  .request-controls{flex:1 1 100%;justify-content:space-between;flex-wrap:wrap;row-gap:6px}
  .request-controls .tabs{flex:0 1 auto;flex-wrap:wrap}
  .workspace-header{padding:18px}
  .workspace-header h2{font-size:1.1875rem}
  .review-bar{padding:8px 12px;gap:8px;min-height:0}
  .review-bar>.actions{width:100%}
  .review-bar>.actions button{flex:1}
  .review,.edit-layout{padding:18px}
  .form-row{grid-template-columns:1fr}
  .details{margin-inline:18px}
  .notice{margin:12px}
  .modal{--modal-pad:20px}
  .modal-actions button{flex:1}
  .envelope{gap:8px}
  .envelope-row{grid-template-columns:68px minmax(0,1fr);gap:8px}
  .solo{margin-top:24px}
  .preview{padding:18px}
}
.page button,.page .button,.page .queue-item,.page .up-drop,.header{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Meetings tab (public/meetings.js) */
.meeting-item .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.meeting-quote{margin:8px 0 0;padding-left:10px;border-left:3px solid var(--line);color:var(--muted);font-size:.8125rem;line-height:1.6}
.meeting-source{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--alt)}
.meeting-source blockquote{margin:6px 0 0;font-size:.8125rem;line-height:1.7;white-space:pre-wrap}
.meeting-source mark{background:var(--busy-bg);color:inherit;padding:0 2px;border-radius:3px}
.meeting-item[data-status=done] strong,.meeting-item[data-status=dismissed] strong{text-decoration:line-through;color:var(--muted)}

/* Open-request tab bar and the session hosts that stay mounted */
.open-sessions-bar:not([hidden]){display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--alt);flex:0 0 auto;align-items:center}
.open-sessions-bar button{font-size:.75rem;padding:6px 10px;display:inline-flex;align-items:center;gap:4px;max-width:100%}
/* A tab and its close button read as one pill. */
.open-sessions-bar .open-tab{display:inline-flex;align-items:stretch;max-width:100%;min-width:0;border-radius:7px}
.page .open-sessions-bar .open-tab>button[data-open-sid]{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:2px;min-width:0}
.page .open-sessions-bar .open-tab>.close-tab{border-top-left-radius:0;border-bottom-left-radius:0;padding:6px 8px;font-weight:700;color:var(--muted);justify-content:center}
.page .open-sessions-bar .open-tab.on>.close-tab{background:var(--paper);box-shadow:0 0 0 1px var(--control-line),0 1px 2px rgb(18 16 26 / .12)}
.page .open-sessions-bar .close-tab:hover{color:var(--ink)}
@media(pointer:coarse){.page .open-sessions-bar .open-tab>.close-tab{min-width:44px;min-height:44px}}
.sessions-container:not([hidden]),.session-host:not([hidden]){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.composer-container:not([hidden]){display:block}
.submission-item{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}

/* Composer mic + attachments (public/composer-tools.js), every portal composer */
.ct-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin:6px 0}
.ct-tools{display:flex;gap:6px;flex:none}
.ct-file{display:none}
.page .ct-mic,.page .ct-attach{border-radius:999px;color:var(--accent)}
.page .ct-mic.listening,.page .ct-mic.listening:hover:not(:disabled){background:var(--err-bg);color:var(--err-ink);border-color:var(--err-line);animation:ct-pulse 1.4s ease-in-out infinite}
@keyframes ct-pulse{0%,100%{box-shadow:0 0 0 0 rgb(220 38 38 / .4)}50%{box-shadow:0 0 0 8px rgb(220 38 38 / 0)}}
@media (prefers-reduced-motion:reduce){.page .ct-mic.listening{animation:none}}
.ct-tray{flex:1 1 220px;min-width:0}
.ct-status{margin:0;min-height:1.25em;font-size:.8125rem;color:var(--muted)}
.ct-status.err{color:var(--err-ink)}
/* The line under a slow action (public/slow-action.js): "Still working… 12 s" with Cancel when that is safe,
   then the plain timeout message with Try again. Its buttons are full 44px controls like every other. */
.slow-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 0;font-size:.8125rem;color:var(--muted)}
.slow-line.err{color:var(--err-ink)}
.slow-line-text{min-width:0;overflow-wrap:anywhere}
.page .slow-line button{padding:6px 14px;font-size:.8125rem}
.ct-chips{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ct-chip{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;max-width:100%;min-width:200px;flex:0 1 300px;padding:4px 4px 4px 6px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:.8125rem}
.ct-chip[data-state=failed]{border-color:var(--err-line);background:var(--err-bg)}
.ct-thumb{grid-row:1/3;width:36px;height:36px;border-radius:6px;background:var(--note-bg);color:var(--note-ink);display:flex;align-items:center;justify-content:center;font-size:.625rem;font-weight:700;overflow:hidden}
.ct-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.ct-meta{grid-column:2;color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-progress{grid-column:2;width:100%;height:4px}
.page .ct-remove{grid-column:3;grid-row:1/3;width:36px;min-height:36px;border:0;background:transparent;font-size:1.25rem;line-height:1;color:var(--muted)}
@media (pointer:coarse){.page .ct-remove{width:44px;min-height:44px}}
.ct-drop{outline:2px dashed var(--accent);outline-offset:-4px;border-radius:12px}
html[data-theme=dark] .page .ct-mic,html[data-theme=dark] .page .ct-attach{color:var(--link)}

/* Reserve the viewport for the conversation. Auxiliary forms scroll inside
   bounded disclosure panels; they never displace the transcript/composer. */
.workspace.request-open{height:calc(100dvh - 170px - var(--fbw-dock,0px));min-height:0;overflow:hidden}
.session-host:not([hidden]){overflow:hidden}
.request-live{flex:1 1 0;min-height:0;overflow:hidden}
/* "Loading the live chat…" or "Couldn't open the live chat. Try again" above the frame: on a short
   screen (a phone on its side) the pane scrolls, so Try again is never cut off. */
.request-live:has(>.live-note:not([hidden])){overflow:auto}
.session-frame{height:100%;flex:1 1 0}
.session-host>.request-files,.session-host>.session-reply{flex:0 0 auto;max-height:min(150px,18dvh);overflow:auto;margin:0;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.session-host>.request-files:not([open])>*:not(summary){display:none}
.session-host>.request-files{display:block}
.session-host>details>summary{cursor:pointer;font-weight:600;font-size:.8125rem}
.session-reply .details{margin:8px 0 0}
.session-reply textarea{min-height:64px}
/* In the Files tab the reply drawer sits under "Attach client files"; same inset, so the two line up. */
.request-uploads>.session-reply{margin:0;padding:12px 16px 14px}
@media(max-width:760px){
 .layout[data-phone-view=message]>.workspace.request-open .session-host:not([hidden]){overflow:hidden}
 .layout[data-phone-view=message]>.workspace.request-open .request-pane{flex:1 1 0;min-height:0}
 .layout[data-phone-view=message]>.workspace.request-open .request-summary{overflow:auto}
 .layout[data-phone-view=message]>.workspace.request-open .request-live{height:auto;min-height:0}
 .session-host>.request-files,.session-host>.session-reply{padding:6px 12px;max-height:min(150px,18dvh)}
}

/* Keep disclosures touchable without spending two full toolbar rows on padding. */
.session-host>details>summary{min-height:32px;padding:4px 0;line-height:1.5rem}
.session-host>.request-files,.session-host>.session-reply{max-height:min(120px,15dvh);padding-block:2px}

@media(max-width:760px){
 .page .request-bar{padding:4px 10px;gap:4px}
 .request-bar .request-title .phone-back{margin:0;padding:4px 6px;min-height:44px}
 .request-bar .request-title h2{font-size:.875rem;line-height:1.25}
 .request-bar .request-asked{display:none}
 .request-controls{gap:4px}
 .request-controls button{padding:5px 8px;min-height:44px}
 .open-sessions-bar{padding:4px;gap:4px}
 .open-sessions-bar button{padding:4px 8px;min-height:32px}
}

@media(max-width:760px){
 .open-sessions-bar:not([hidden]){flex-wrap:nowrap;overflow-x:auto;padding:4px;gap:4px}
 .open-sessions-bar button,.open-sessions-bar .open-tab{flex:0 0 auto;white-space:nowrap;min-height:44px}
 .open-sessions-bar .close-tab{min-width:44px}
 /* A long request name ends in an ellipsis rather than being cut off mid-letter. */
 .open-sessions-bar button[data-open-sid]{display:block;max-width:65vw;overflow:hidden;text-overflow:ellipsis;padding:0 8px;line-height:2.625rem}
 .request-bar .request-title h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .request-controls>.badge,.request-controls>.request-status{display:none}
 .request-controls button{font-size:.75rem;padding:6px;min-height:44px}
 .request-controls .tabs{padding:2px;gap:0}
}

/* Short screens (a phone turned sideways): an open request fills the screen above
   the Feedback bar; the header scrolls away above it. */
@media (max-height:500px){
  .workspace.request-open{height:calc(100dvh - var(--fbw-dock,0px) - 16px);min-height:0}
  .session-host>.request-files,.session-host>.session-reply{max-height:30dvh}
}
/* Long unbroken text (an email address, a file name) wraps inside controls and
   links rather than run out of its box when text is enlarged. */
.page button,.page .button{max-width:100%;white-space:normal;overflow-wrap:break-word}


/* ---- "Showing 50 of 312" and Show more (public/show-more.js, lib/paging.js showMoreHtml) ---- */
.show-more{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.75rem 0}
.show-more[hidden],.show-more [hidden]{display:none}
.show-more-line{margin:0;font-size:.8125rem;color:var(--muted)}
.show-more-error{flex-basis:100%;margin:0;font-size:.8125rem}
.show-more-error button{margin-left:.5rem}
.queue>.show-more{margin:0;padding:.75rem 1rem;border-top:1px solid var(--line)}
.request-lookup{margin:.5rem 0 0}
.wm-partial{margin:.5rem 0;font-size:.8125rem;color:var(--muted)}
.pc-more-finished>summary{cursor:pointer;font-size:.8125rem;color:var(--muted);margin:.5rem 0}
/* ---- What to fix, beside the field (public/field-errors.js, 2026-10-19) ----
   Error text is --err-ink on the page or card behind it: 7.8:1 light
   (#9f1239 on #fff), 11:1 dark (#fecdd3 on #0d1a2f). The bar on the left and
   the field's own outline repeat it without relying on color alone. */
.field-error{display:block;margin:6px 0 0;padding:2px 0 2px 10px;border-left:3px solid var(--err-ink,#9f1239);color:var(--err-ink,#9f1239);font-size:.8125rem;font-weight:600;line-height:1.45;overflow-wrap:anywhere;text-align:left}
.page [aria-invalid=true]:is(input,textarea,select),.fbw [aria-invalid=true]:is(input,textarea,select){border-color:var(--err-ink,#9f1239);box-shadow:0 0 0 1px var(--err-ink,#9f1239)}
fieldset[aria-invalid=true]{border-color:var(--err-ink,#9f1239)}
/* "Required" as a word beside the label, not only an asterisk. The word is
   drawn by CSS on an aria-hidden span: screen readers hear "required" from the
   field itself, and the label's own text (its name) stays "Message", not
   "Message Required". */
.field-required::before{content:"Required"}
.field-required{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--line,#d5dce7);border-radius:9999px;color:var(--muted,#3f4d63);font-size:.6875rem;font-weight:600;line-height:1.5;vertical-align:.1em;text-transform:none;letter-spacing:0}
.field-error-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.field-label{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 0;max-width:100%}
.field-required{justify-self:start;align-self:flex-start;width:max-content;max-width:100%}
.field-label .field-required{align-self:center}

/* "Connection lost. Reconnecting…" / "Back online." (public/connection-status.js): the
   update bar's look and place, taking its own space while shown. It stands in for the
   "New version" bar (a refresh can't load offline); the sign-in bar stands in for it. */
.conn-banner{justify-content:center;text-align:center}
.conn-banner strong{white-space:normal}
.conn-status[data-state=restored] .conn-banner{border-bottom-color:var(--ok-line);background:var(--ok-bg);color:var(--ok-ink)}
html.conn-banner-shown .update-banner:not(.conn-banner):not(.signin-banner){display:none}
html.conn-banner-shown body{padding-top:var(--ub-space)}
html.conn-banner-shown .workspace.request-open{height:calc(100dvh - 170px - var(--ub-space) - var(--fbw-dock,0px))}
@media (max-width:760px){
 html.conn-banner-shown .layout[data-phone-view=message]>.workspace.request-open{top:var(--ub-space);padding-top:0}
}

/* Sender layout and colors never override the portal's readable email view. */
.email-body{font:1rem/1.65 var(--font-sans);color:var(--ink);overflow-wrap:anywhere;min-width:0;width:100%}
.email-body p,.email-body h1,.email-body h2,.email-body h3,.email-body h4,.email-body ul,.email-body ol,.email-body blockquote{margin:0 0 1em}
.email-body h1{font-size:1.5rem}.email-body h2{font-size:1.25rem}.email-body h3,.email-body h4{font-size:1.1rem}
.email-body a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.email-body a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.email-body pre,.email-body code{white-space:pre-wrap;font-size:1em;overflow-wrap:anywhere}
.email-body blockquote{border-left:3px solid var(--field-line);padding-left:1em}
.email-body-plain{white-space:pre-wrap}
/* "Jump to newest" beside a conversation the person has scrolled up in (public/follow-latest.js).
   Scoped under .page so it outranks the base .page button look. */
.follow-box{position:relative;display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.page .follow-jump{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:calc(100% - 24px);padding:6px 16px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font:600 .8125rem/1.4 var(--font-sans);white-space:nowrap;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.page .follow-jump:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.page .follow-box>.follow-jump{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5}
.page .follow-jump-page{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60}
.page .follow-jump[hidden]{display:none}
/* A save refused because the record changed elsewhere (public/edit-conflict.js): who/when, the
   kept text, and See their version / Keep mine / Copy my text. A note while editing reads quieter. */
.edit-conflict{margin:12px 0;padding:12px 14px;border:1px solid var(--err-line,#b42318);border-radius:9px;background:var(--err-bg,#fff4f2);color:var(--err-ink,#7a1a12);line-height:1.5}
.edit-conflict:focus{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
.edit-conflict-text{margin:0 0 8px;font-weight:600;overflow-wrap:anywhere}
.edit-conflict-actions{display:flex;flex-wrap:wrap;gap:8px}
.edit-conflict-compare{margin-top:10px;color:var(--ink,#1a1a1a);background:var(--paper,#fff);border-radius:8px;padding:8px;overflow-x:auto}
.edit-conflict-compare table{width:100%;border-collapse:collapse;font-size:.875rem}
.edit-conflict-compare th,.edit-conflict-compare td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--line,#e2e8f0);white-space:pre-wrap;overflow-wrap:anywhere}
.edit-conflict-compare p{margin:8px 0 0}
.edit-changed-note{margin:12px 0;padding:10px 14px;border:1px solid var(--note-line,#e2c46b);border-radius:9px;background:var(--note-bg,#fff8e1);color:var(--note-ink,#5b4300);line-height:1.5}
@media (max-width:600px){.edit-conflict-compare th,.edit-conflict-compare td{display:block;border-bottom:0;padding:2px 4px}.edit-conflict-compare thead{display:none}.edit-conflict-compare tr{display:block;padding:6px 0;border-bottom:1px solid var(--line,#e2e8f0)}.edit-conflict-compare td::before{font-weight:600;display:block}.edit-conflict-compare td:nth-of-type(1)::before{content:"Their version"}.edit-conflict-compare td:nth-of-type(2)::before{content:"Yours"}}
/* Selecting many rows at once (public/bulk-select.js, 2026-10-20): a box per row,
   Select all, and a sticky "N selected" bar after the list with the actions. */
.bulk-select-hit{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;margin:-4px;padding:4px;cursor:pointer;flex:none;vertical-align:middle}
.bulk-select-box{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--link,#9a3412)}
.bulk-select-box:focus-visible{outline:3px solid var(--focus,#2563eb);outline-offset:2px}
@media (pointer:coarse){.bulk-select-hit{min-width:44px;min-height:44px;margin:-10px;padding:10px}.bulk-select-box{width:22px;height:22px}}
.bulk-select-all{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:4px 0 10px;font:600 .8125rem/1.4 var(--font-sans)}
.bulk-select-matching{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;font-weight:400}
.page .bulk-select-link,.bulk-select-link{min-height:32px;padding:0 6px;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
@media (pointer:coarse){.page .bulk-select-link,.bulk-select-link{min-height:44px}}
.bulk-select-bar-wrap{position:sticky;bottom:var(--fbw-dock,0px);z-index:30}
.bulk-select-bar-wrap[data-bulk-inner]{bottom:0}
.bulk-select-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;margin:10px 0 0;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)) 14px;border:1px solid var(--control-line,#64748b);border-radius:12px;background:var(--paper,#fff);color:var(--ink,#0f1f38);box-shadow:0 -6px 24px rgb(15 31 56 / .18);font:.875rem/1.4 var(--font-sans)}
.bulk-select-count{white-space:nowrap}
.bulk-select-actions{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.page .bulk-select-bar .bulk-select-clear{border-color:transparent;text-decoration:underline;background:transparent}
.bulk-select-note{flex-basis:100%;margin:0;overflow-wrap:anywhere}
.page .bulk-select-bar button:disabled{opacity:.6;cursor:progress}
[data-bulk-item][data-selected]{outline:2px solid var(--link,#9a3412);outline-offset:-1px}
@media print{.bulk-select-bar-wrap,.bulk-select-hit,.bulk-select-all{display:none!important}}
@media (max-width:600px){.bulk-select-count{order:1}.page .bulk-select-bar .bulk-select-clear{order:2;margin-left:auto}.bulk-select-actions{order:3;flex-basis:100%}.bulk-select-note{order:4}}
.page label.bulk-select-hit{display:inline-flex;margin:-4px;font-size:inherit}
@media (pointer:coarse){.page label.bulk-select-hit{margin:-10px}}

/* ---- A client's submissions (public/portal.js submission, public/client-submission.js) ---- */
.client-links{margin:0 0 18px}
.sub-notes{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:10px 0}
.client-submission,.sub-files,.sub-note{min-width:0;max-width:100%}
.sub-note-label{margin:0 0 2px;font-weight:600;color:var(--muted);font-size:.8125rem}
.sub-note-text{margin:0;white-space:pre-line;overflow-wrap:anywhere;line-height:1.6;font-size:.875rem;max-width:72ch}
.page .sub-note-more,.page .sub-files-more{margin-top:8px}
.sub-files{margin:12px 0 0}
.sub-files>.sub-note{margin-bottom:6px}
.att-note-box{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.att-note{white-space:pre-line}
.page .att-note-more{min-height:44px}
@media (max-width:760px){
  .client-view .helper,.client-view .sub-note-text,.client-view .attachment-list li,.client-view .sub-note-label{font-size:1rem}
  .client-view .attachment-list li span:not(.file-badge){white-space:normal}
}

/* The bar shows its own Make a request button from 64em (global-nav.css);
   from there the page does not repeat it. */
@media (min-width: 64em) {
  .bar-cta-twin { display: none !important; }
}

/* Client page: this client's work comes first (public/client-work.js). */
.client-work { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.client-work .cw-h { margin: 0 0 6px; font-size: 1.125rem; }
.client-work .cw-h:focus { outline: none; }
.client-work .cw-h:focus-visible { outline: 2px solid var(--link, var(--accent)); outline-offset: 2px; }
.client-work p { margin: 4px 0; }
.client-work .cw-summary { font-size: 1.0625rem; }
.client-work .cw-jobs { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.client-work .cw-job { padding: 8px 0 8px 12px; border-left: 3px solid var(--line); }
/* Job titles are destination links drawn as the compact pill (.wk-filters a in work.css). */
.client-work .cw-title { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 650; overflow-wrap: anywhere; }
.client-work .cw-title:hover { border-color: var(--accent); }
.client-work .cw-title:focus-visible { outline: 2px solid var(--link, var(--accent)); outline-offset: 2px; }
.workspace-header:has(~ .review.client-view) { padding-bottom: 8px; }
.review.client-view { padding-top: 12px; }
.client-work .cw-k { color: var(--muted); }
.client-work .cw-meta, .client-work .cw-muted { color: var(--muted); font-size: 0.9375rem; }
.client-work .cw-stale, .client-work .cw-error { color: var(--err-ink); }
.client-work .cw-retry { min-height: 44px; }
.client-view .client-links { display: flex; flex-wrap: wrap; gap: 8px; }
.client-view .client-links > a { min-height: 44px; }
.client-view details.add-files { margin: 8px 0 12px; }
.client-view details.add-files > summary { display: inline-flex; align-items: center; min-height: 44px; border-radius: 999px; cursor: pointer; list-style: none; }
.client-view details.add-files > summary::-webkit-details-marker { display: none; }
.client-view details.add-files[open] > summary { margin-bottom: 8px; }
.client-view .client-background { margin: 16px 0; max-width: 72ch; }
.client-view .client-background p { margin: 4px 0; line-height: 1.55; }
.client-view details.client-materials { margin: 16px 0; border-top: 1px solid var(--line); padding-top: 8px; }
.client-view details.client-materials > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; cursor: pointer; }
.client-view .client-materials-title { font-weight: 650; }
.client-view .client-materials-cue { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 1rem; }
.client-view .client-materials-cue::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .16s ease; }
.client-view details.client-materials[open] > summary .client-materials-cue::after { transform: rotate(225deg); margin-top: 4px; }
.client-view details.client-materials:not([open]) > summary .if-open, .client-view details.client-materials[open] > summary .if-closed { display: none; }
.client-view details.client-materials > summary:hover .client-materials-cue { background: var(--sel); }
.client-view .client-purpose, .client-view .client-goal { max-width: 72ch; }
.client-view h2, .client-view h3, .client-work .cw-h { text-wrap: balance; }
.client-view p, .client-purpose, .client-work .cw-line, .client-work .cw-summary { text-wrap: pretty; }
/* The global reduced-motion rule (*) doesn't reach pseudo-elements. */
@media (prefers-reduced-motion: reduce) { .client-view .client-materials-cue::after { transition: none; } }

.sub-files-search { display: grid; gap: 4px; margin: 8px 0; max-width: 28rem; }
.sub-files-search input { min-height: 44px; font-size: 1rem; }

/* Phone reading text is 16px; meta lines (eyebrows, times, counts) at least 14px.
   The client upload page (.up-*) keeps its own sizes and release gate. */
@media (max-width: 760px) {
  .page .helper, .page label:not(.sr-only):not(.up-label), .page .show-more-line, .page .file-limits, .page p.status,
  .page .search-filters, .page .workspace-header p:not(.eyebrow), .page .tj-muted, .page .tj-item-text,
  .page .std-intro, .page .std-lead, .page .rec,
  .page .client-work .cw-muted, .page .client-view .client-links > a, .page .client-view details.add-files > summary { font-size: 1rem; }
  .page .eyebrow, .page .wm-location, .page .wm-freshness, .page .lib-meta, .page .brief-label, .page .recs-label,
  .page .fb-meta, .page td.numeric { font-size: .875rem; }
}

/* Phones show the task list alone until a task is chosen. */
@media (max-width: 700px) {
  .page #detail:has(> .detail-empty:only-child) { display: none; }
}

/* One back control: a real link, pill-shaped, at least 44px tall. */
.page a.back-link { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1px solid var(--line, #ced7df); border-radius: 999px; text-decoration: none; font-size: 1rem; line-height: 1.2; }
.page .tj-crumb a, .page .tj-side-link a { display: inline-flex; align-items: center; min-height: 44px; }
.page .brief-jumps a { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.page label.recipient { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.page .tj-row-head .tj-title { display: inline-flex; align-items: center; min-height: 44px; }

/* The fixed Screen feedback button (bottom left) must not cover the end of a
   page: keep its height free below the content on every page that has it. */
body:has(> .screen-launch:not([hidden])) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.samuel-words{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0;font-size:.9375rem;line-height:1.6}
.samuel-messages-filters{margin:12px 0}.samuel-messages-filters label{display:grid;gap:4px;min-width:0}.samuel-messages-filters .actions{align-self:end}

/* Home reads the existing Work filters; reading never resolves a record. */
.home-attention{padding:1rem;margin:0 0 1rem;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:.75rem;background:var(--paper);color:var(--ink)}
.home-attention h2{margin:0 0 .75rem;font-size:1.125rem}.home-attention-links{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}.home-attention-links .button{min-height:2.75rem;max-width:100%;white-space:normal}.home-attention .helper{margin:0}