/* The client portal's stylesheet: the approved round 1 and round 2 look (Ryan, 16 October 2026, 498 and 515: "approved with these
   changes"), carried from the mock-ups into the build.
   The portal is its own site (Cloudflare), not EA AI, so it has its own small stylesheet; every colour below is taken from
   the practice's own brand sources, never guessed:
   - navy #223B76: the practice's brand navy (Ryan, 2026-10-03, branding item 11; EA AI's colours.css --primary/--header)
   - sky blue #57C7F3 = rgb(87,199,243): the logo mark's own fill (practice file [branding] logo_mark_svg); an accent on navy
     only, never text on white (1.9:1)
   - crimson rgb(245,81,95) to rgb(159,4,27): the logo mark's gradient; kept in the logo only (red means "late" below)
   - text, link, lines, status tints: EA AI's checked tokens (colours.css, each pair 4.5:1 or better), so the portal and EA AI
     share one palette
   The website www.eastbourneaccountants.co.uk gave its tone ("jargon free", "friendly team"); no colour value could be read
   from it, so none is taken from it.
   Font: Source Sans 3 (SIL OFL 1.1), already self-hosted by EA AI. */
@font-face { font-family: "Source Sans 3"; font-weight: 400; src: url("fonts/SourceSans3-Regular.ttf.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; src: url("fonts/SourceSans3-Semibold.ttf.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; src: url("fonts/SourceSans3-Bold.ttf.woff2") format("woff2"); }

:root {
  --navy: #223B76; --on-navy: #FFFFFF; --sky: #57C7F3;
  --text: #17212B; --link: #1D4F91; --page: #FFFFFF; --soft: #F4F6F8; --soft-2: #F6F8FA; --line: #DCE2E9; --line-2: #EAEEF3;
  --ok-bg: #E4F3EA; --ok-text: #17603B; --warn-bg: #FCEFD8; --warn-text: #7F4400; --info-bg: #E6EEF9; --info-text: #1F3F73;
  --bad-bg: #FCE6E4; --bad-text: #9E1F15; --focus: #1D4F91;
  --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--page); line-height: 1.45; -webkit-text-size-adjust: 100%;
  min-height: 100vh; display: flex; flex-direction: column; }   /* the picture review's point 11: the footer at the window's foot on short pages */
a { color: var(--link); }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0; font-weight: 700; color: var(--navy); }
h2 { font-size: 1.25rem; line-height: 1.25; margin: 0; font-weight: 700; }
h3 { font-size: 1.0625rem; margin: 0; font-weight: 700; }
p { margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 24px; height: 24px; flex: none; }

/* the top bar: logo, client switcher, account */
.top { background: var(--page); border-bottom: 1px solid var(--line-2); }
.top-in { max-width: 1320px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand img { width: 40px; height: 37px; }
.brand-name { font-weight: 700; font-size: 1.0625rem; line-height: 1.1; letter-spacing: .01em; }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.me { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--on-navy); display: grid; place-items: center; font-weight: 700; font-size: .9rem; border: 0; }
.me-wide { display: none; }
.switch { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-2);
  font: inherit; color: var(--text); text-align: left; }
.switch b { font-weight: 700; }
.switch .chev { margin-left: auto; }
.switch-row { max-width: 1320px; margin: 0 auto; padding: 12px 16px 0; }
.switch-menu { border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; background: var(--page); box-shadow: 0 8px 24px rgba(16,30,54,.12); overflow: hidden; }
.switch-menu a { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; text-decoration: none; color: var(--text); border-top: 1px solid var(--line-2); }
.switch-menu a:first-child { border-top: 0; }
.switch-menu a[aria-current] { background: var(--info-bg); font-weight: 700; }

/* the main nav: a bottom bar on a phone (an installable web app, P8), a row in the top bar on a computer */
.nav-top { display: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--page); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); z-index: 5; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center; text-decoration: none; color: var(--text);
  font-size: .8125rem; font-weight: 600; border-radius: 10px; position: relative; }
.tabbar a[aria-current="page"] { color: var(--navy); background: var(--info-bg); font-weight: 700; }
.badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--navy); color: #fff; font-size: .8125rem; font-weight: 700; display: inline-grid; place-items: center; }
.tabbar .badge { position: absolute; top: 2px; left: calc(50% + 6px); }

.page { max-width: 1320px; margin: 0 auto; padding: 20px 16px 110px; display: flex; flex-direction: column; gap: 28px; flex: 1 0 auto; width: 100%; box-sizing: border-box; }
.page > .contact { margin-top: auto; }
.page--chat { padding: 0; gap: 0; }
.hello { display: flex; flex-direction: column; gap: 6px; }
.hello p { font-size: 1.0625rem; }

/* cards and rows */
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--page); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 18px 18px 6px; }
.card-pad { padding: 18px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--line-2); }
.row:first-child { border-top: 0; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-title { font-weight: 700; }
.row-kind { display: inline-flex; align-items: center; gap: 8px; }
.kind-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--info-bg); color: var(--navy); }
.due { font-size: 1rem; }
.due b { font-weight: 700; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 2px solid var(--navy);
  background: var(--page); color: var(--navy); font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn--primary { background: var(--navy); color: var(--on-navy); }
.btn--wide { width: 100%; }
.btn--plain { border-color: transparent; background: transparent; color: var(--link); text-decoration: underline; padding: 0 8px; }
.btn--sm { min-height: 44px; padding: 0 14px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.pill--ok { background: var(--ok-bg); color: var(--ok-text); }
.pill--warn { background: var(--warn-bg); color: var(--warn-text); }
.pill--info { background: var(--info-bg); color: var(--info-text); }

.news { border-radius: 16px; background: var(--navy); color: var(--on-navy); padding: 18px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.news-from { font-weight: 700; color: var(--sky); font-size: 1rem; }
.news h2 { color: #fff; padding-right: 48px; }
.news a { color: #fff; }
.news .x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.news-foot { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }

.msgs-line { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; color: var(--text); }
.msgs-line .row-main { gap: 2px; }

.contact { border-top: 1px solid var(--line-2); padding-top: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 1rem; }
.contact b { color: var(--navy); }

.nothing { display: flex; gap: 14px; align-items: center; padding: 22px 18px; }
.nothing .kind-ic { background: var(--ok-bg); color: var(--ok-text); }
.nothing p { font-size: 1.125rem; font-weight: 600; }

/* the undecided option, drawn as an option */
.option { border: 3px dashed #B7791F; /* EA AI's --edge-warn */ border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.option-tag { align-self: flex-start; background: var(--warn-bg); color: var(--warn-text); font-weight: 700; padding: 4px 12px; border-radius: 8px; }

/* messages (WhatsApp-like) */
.chat-top { position: sticky; top: 0; background: var(--page); border-bottom: 1px solid var(--line-2); z-index: 4; }
.chat-top-in { display: flex; align-items: center; gap: 10px; padding: 10px 12px; max-width: 1180px; margin: 0 auto; }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 2px; color: var(--link); text-decoration: none; font-weight: 600; }
.chat-who { display: flex; flex-direction: column; line-height: 1.2; }
.chat-who b { color: var(--navy); }
.chat-body { background: var(--soft); padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.day { align-self: center; background: var(--page); border: 1px solid var(--line); border-radius: 999px; padding: 3px 14px; font-weight: 700; font-size: .9375rem; margin: 8px 0 2px; }
.bub { max-width: 82%; padding: 10px 14px 8px; border-radius: 18px; display: flex; flex-direction: column; gap: 4px; }
.bub--them { align-self: flex-start; background: var(--page); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bub--me { align-self: flex-end; background: var(--navy); color: var(--on-navy); border-bottom-right-radius: 6px; }
.bub-name { font-weight: 700; color: var(--navy); font-size: 1rem; }
.bub-meta { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-size: .9375rem; }
.bub--me .bub-meta { color: #FFFFFF; }
.tick { width: 22px; height: 14px; }
.tick--read { color: var(--sky); }
.photo { width: 230px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; display: block; background: #E7DCC8; }
.photo svg { width: 100%; height: 100%; display: block; }
.file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft-2); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.file b { display: block; }
.saved { font-size: 1rem; }
.composer { position: sticky; bottom: 0; background: var(--page); border-top: 1px solid var(--line); padding: 10px 10px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 6px; }
.composer .iconbtn { width: 48px; height: 48px; border-radius: 24px; border: 0; background: var(--soft); color: var(--navy); display: grid; place-items: center; flex: none; }
.composer textarea { flex: 1; min-height: 48px; border: 1px solid var(--line); border-radius: 24px; padding: 11px 16px; font: inherit; resize: none; color: var(--text); }
.composer .send { width: 48px; height: 48px; border-radius: 24px; border: 0; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; }
.threads { display: none; }

/* documents */
.uploadbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.folders { display: grid; grid-template-columns: 1fr; gap: 10px; }
.folder { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--text); }
.folder[aria-current] { border: 2px solid var(--navy); background: var(--info-bg); }
.folder .row-main span { font-size: 1rem; }
.search { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.input, select.input { min-height: 50px; border: 1px solid #9AA7B4; border-radius: 12px; padding: 10px 14px; font: inherit; font-weight: 400; color: var(--text); background: var(--page); width: 100%; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pagehead { display: flex; flex-direction: column; gap: 20px; }
.seg { display: grid; grid-template-columns: auto auto auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg a { text-align: center; padding: 12px 6px; text-decoration: none; color: var(--text); font-weight: 600; border-left: 1px solid var(--line); }
.seg a:first-child { border-left: 0; }
.seg a[aria-current] { background: var(--navy); color: #fff; font-weight: 700; }
.year { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.doc { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--text); }
.doc:first-of-type { border-top: 0; }
.doc .row-main span { font-size: 1rem; }
.doc-ic { width: 40px; height: 48px; border-radius: 8px; border: 2px solid var(--navy); color: var(--navy); display: grid; place-items: center; font-weight: 700; font-size: .75rem; flex: none; }

/* requests */
.req-q { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.answer { background: var(--soft-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; white-space: pre-wrap; }
.done-line { display: flex; gap: 10px; align-items: center; color: var(--ok-text); font-weight: 700; }
.reqlist { display: none; }

/* sign */
.docview { border: 1px solid var(--line); border-radius: 14px; background: var(--soft); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.paper { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 20px 18px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 2px 8px rgba(16,30,54,.08); }
.paper .ph { height: 10px; border-radius: 5px; background: #DCE2E9; }
.paper .ph--h { height: 16px; width: 60%; background: #223B76; opacity: .85; }
.paper .ph--n { width: 70%; } .paper .ph--s { width: 45%; }
.paper-title { font-weight: 700; color: var(--navy); }
.steps { display: flex; flex-direction: column; gap: 20px; }
.step-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 16px; background: var(--navy); color: #fff; font-weight: 700; margin-right: 10px; flex: none; }
.step-h { display: flex; align-items: center; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.check input { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--navy); flex: none; }
.pad { border: 2px dashed #9AA7B4; border-radius: 14px; background: var(--page); height: 170px; position: relative; }
.pad svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pad-line { position: absolute; left: 20px; right: 20px; bottom: 40px; border-top: 2px solid #9AA7B4; }
.pad-x { position: absolute; left: 22px; bottom: 44px; font-weight: 700; color: var(--text); }
.pad-foot { display: flex; justify-content: space-between; align-items: center; }
.signed-box { border-radius: 16px; background: var(--ok-bg); padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.signed-box h1 { color: var(--ok-text); }

.two { display: flex; flex-direction: column; gap: 28px; }

/* hidden on a phone */
.desk-only { display: none; }
.switch--top, .switch-wrap { display: none; }

/* a computer: the nav moves into the top bar; two columns where they help */
@media (min-width: 900px) {
  html { font-size: 18px; }
  .top-in { padding: 14px 32px; gap: 16px; }   /* five tabs since To do (18 October 2026): room for the switcher and the account at 1440 */
  .brand img { width: 46px; height: 42px; }
  .brand-name { font-size: 1.125rem; }
  .nav-top { display: flex; gap: 4px; }
  .nav-top a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; white-space: nowrap; border-radius: 12px; text-decoration: none; color: var(--text); font-weight: 600; }
  .nav-top a[aria-current="page"] { background: var(--info-bg); color: var(--navy); font-weight: 700; }
  .tabbar { display: none; }
  .switch-row { display: none; }
  .switch-wrap { display: block; position: relative; }
  .switch--top { display: flex; width: auto; min-height: 48px; white-space: nowrap; }
  .me-wide { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); font: inherit; color: var(--text); font-weight: 600; white-space: nowrap; }
  .page { padding: 36px 32px 60px; gap: 32px; }
  h1 { font-size: 2.125rem; }
  .two { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
  .two--even { grid-template-columns: 360px minmax(0, 1fr); }
  .folders { grid-template-columns: repeat(3, 1fr); }
  .uploadbar { display: flex; justify-content: flex-end; }
  .search { flex-direction: row; align-items: flex-end; }
  .search .field { flex: 1; }
  .filters { display: flex; gap: 10px; }
  .filters .field { min-width: 180px; }
  .seg { display: inline-grid; grid-template-columns: repeat(3, auto); align-self: flex-start; }
  .pagehead { flex-direction: row; align-items: center; justify-content: space-between; }
  .seg a { padding: 12px 22px; }
  .threads { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 760px; }
  .chat-shell { display: grid; grid-template-columns: 360px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .chat-main { display: flex; flex-direction: column; min-width: 0; }
  .chat-main .chat-top { position: static; }
  .chat-main .back { display: none; }
  .chat-body { flex: 1; padding: 18px 28px; }
  .bub { max-width: 62%; }
  .reqlist { display: block; }
  .two--even .back { display: none; }
  .page--chat { padding: 28px 32px 40px; gap: 28px; }
  .desk-only { display: block; }
  .contact { flex-direction: row; flex-wrap: wrap; gap: 4px 24px; }
}
.thread { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--text); }
.thread:first-of-type { border-top: 0; }
.thread[aria-current] { background: var(--info-bg); box-shadow: inset 4px 0 0 var(--navy); }
.thread-top { display: flex; justify-content: space-between; gap: 8px; }
.thread-top b { color: var(--navy); }
.threads-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-main-head { display: flex; align-items: center; justify-content: space-between; }

/* Round 2's additions (approved with changes, 515).
   Colours only from portal.css's tokens (the practice's brand navy #223B76, the logo's sky blue on navy only, EA AI's checked
   text/line/status tokens). */

/* page heads */
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crumb { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--link); font-weight: 600; text-decoration: none; }
.lede { font-size: 1.0625rem; }

/* Messages: threads by subject */
.tlist { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--page); }
.titem { display: flex; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--text); }
.titem:first-child { border-top: 0; }
.titem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.titem-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.titem-sub { font-weight: 700; color: var(--navy); font-size: 1.0625rem; }
.titem-when { white-space: nowrap; font-size: 1rem; }
.titem-low { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.titem-low > span:first-child { min-width: 0; }
.titem--unread .titem-when { color: var(--navy); font-weight: 700; }
.titem--unread .titem-last { font-weight: 600; }
.titem[aria-current] { background: var(--info-bg); box-shadow: inset 4px 0 0 var(--navy); }
.tlist-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-subject { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat-subject b { color: var(--navy); font-size: 1.0625rem; }
.msg-narrow { max-width: 860px; width: 100%; }
.newmsg { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.hint { font-size: 1rem; }
.textarea { font-weight: 400; min-height: 150px; border: 1px solid #9AA7B4; border-radius: 12px; padding: 12px 14px; font: inherit; color: var(--text); width: 100%; resize: vertical; font-weight: 400; }
.attach-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Documents: folder-first */
.searchall { display: flex; flex-direction: column; gap: 6px; }
.searchall-box { position: relative; }
.searchall-box .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--navy); }
.searchall-box .input { padding-left: 48px; min-height: 56px; font-size: 1.0625rem; }
/* the picture review's point 8: a compact folder grid (smaller tiles); empty folders stay shown */
.ftiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ftile { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--text); background: var(--page); min-height: 92px; position: relative; }
.ftile .kind-ic { width: 36px; height: 36px; }
.ftile-name { font-weight: 700; font-size: 1.125rem; color: var(--navy); line-height: 1.2; }
.ftile-n { font-size: 1rem; }
.ftile .badge { position: absolute; top: 14px; right: 14px; }
.ftile--us .kind-ic { background: var(--navy); color: #fff; }
.uploadrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uploadrow .btn { padding: 0 10px; min-width: 0; }
.docs-top { display: flex; flex-direction: column; gap: 14px; }
.ftile-new { font-weight: 700; color: var(--navy); }
.filelist { border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; }
.filelist .doc:first-child { border-top: 0; }
.fromtag { display: inline-flex; padding: 1px 10px; border-radius: 999px; font-weight: 700; font-size: .9375rem; background: var(--soft); }
.fromtag--us { background: var(--info-bg); color: var(--info-text); }

/* upload: which folder */
.sheet { border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px; display: flex; flex-direction: column; gap: 18px; background: var(--page); max-width: 680px; box-shadow: 0 8px 28px rgba(16,30,54,.10); }
.chosen { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--soft-2); border: 1px solid var(--line); }
.chosen .photo { width: 64px; aspect-ratio: 3 / 4; border-radius: 8px; flex: none; }
.chosen b { display: block; }
.chosen--req { font-weight: 400; }
.chosen--req .kind-ic { width: 40px; height: 40px; }
.radios { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; }
.radios legend { font-weight: 700; font-size: 1.125rem; margin-bottom: 4px; padding: 0; }
.radio { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.radio input { width: 24px; height: 24px; accent-color: var(--navy); flex: none; margin: 0; }
.radio--on { border: 2px solid var(--navy); background: var(--info-bg); }
.radio-main { display: flex; flex-direction: column; gap: 2px; }
.radio-main b { font-weight: 700; }
.sugg { display: inline-flex; align-self: flex-start; padding: 1px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: .9375rem; }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Request answered: clear blocks */
.blocks { border: 1px solid var(--line); border-radius: 16px; background: var(--page); }
.blk { padding: 18px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); }
.blk:first-child { border-top: 0; }
.blk-h { font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin: 0; }
.blk .req-q { color: var(--text); }

/* E-signature, the client: field by field */
.sig-head { display: flex; flex-direction: column; gap: 10px; }
.prog { display: flex; align-items: center; gap: 12px; }
.prog-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.prog-bar span { display: block; height: 100%; width: 33.4%; background: var(--navy); }
.prog b { white-space: nowrap; }
.sigdoc { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sigdoc .paper { position: relative; padding-bottom: 26px; }
.fbox { margin-top: 14px; border: 3px solid var(--navy); background: var(--info-bg); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 0 0 6px rgba(34,59,118,.14); }
.fbox b { color: var(--navy); }
.fbox--later { border: 2px dashed #9AA7B4; background: var(--page); box-shadow: none; }
.pagenote { font-size: 1rem; }
.fsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fsteps li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.fsteps li[aria-current] { border: 2px solid var(--navy); background: var(--info-bg); }
.fsteps .step-n { margin: 0; }
.fsteps .step-n--todo { background: var(--page); color: var(--navy); border: 2px solid var(--navy); }
.fsteps-main { display: flex; flex-direction: column; }
.pad--small { height: 140px; }
.navbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.finish { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--soft); }
.finish b { color: var(--navy); }
.opened { display: flex; gap: 8px; align-items: center; color: var(--ok-text); font-weight: 700; }

/* the email */
.mail-wrap { background: var(--soft); padding: 18px 0 28px; }
.mail-cap { margin: 0 24px 14px; padding: 6px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-weight: 700; font-size: 1rem; }
.mail-hdr { margin: 0 24px; padding: 12px 16px; background: var(--page); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 1rem; }
.mail { margin: 0 24px; background: var(--page); border: 1px solid var(--line); border-radius: 0 0 12px 12px; overflow: hidden; }
.mail-brand { display: flex; align-items: center; gap: 10px; padding: 18px 24px; border-bottom: 4px solid var(--navy); color: var(--navy); }
.mail-brand img { width: 40px; height: 37px; }
.mail-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; font-size: 1.0625rem; }
.mail-body h1 { font-size: 1.5rem; }
.mail-foot { padding: 16px 24px 20px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; font-size: 1rem; }

@media (min-width: 900px) {
  .sheet { margin: 0 auto; width: 100%; }
  .ftiles { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .ftile { min-height: 104px; padding: 14px 16px; }
  .uploadrow { display: flex; }
  .searchall { max-width: 760px; }
  .docs-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
  .sig-two { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
  .blocks-two { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px; align-items: start; }
  .blocks-two .back { display: none; }
  .chat-shell .tlist { border: 0; border-radius: 0; border-right: 1px solid var(--line); min-height: 760px; }
  .page--chat .chat-shell .tlist { display: block; }
}
@media (max-width: 899px) {
  .page--chat .chat-shell .tlist { display: none; }
  .blocks-two .reqlist { display: none; }
}
.pad--small .pad-line { bottom: 22px; }
.fbox { align-self: flex-start; width: 240px; max-width: 70%; }
.fbox-ink { display: block; height: 56px; }
.fbox-ink svg { width: 100%; height: 100%; display: block; }

/* round 2, after the review */
.ph-only { display: inline; } .dt-only { display: none; }
@media (min-width: 900px) { .ph-only { display: none; } .dt-only { display: inline; } }
.tap { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 8px; }
.radios .tap { align-self: flex-start; padding: 0 2px; }
.doc { display: flex; }
.doc-name { color: var(--text); text-decoration: none; }
.dlbtn { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--navy); color: var(--navy); display: grid; place-items: center; flex: none; }
.btn--off { background: var(--soft); border: 2px dashed #9AA7B4; color: var(--text); cursor: not-allowed; }
.off-why, .off-note { font-size: 1rem; margin-top: -10px; }
.option .off-note { margin-top: 0; }
.fbox--sign { width: 100%; max-width: 100%; align-self: stretch; border-style: solid; }
.fbox--sign .fbox-ink { height: 110px; border-bottom: 2px solid #9AA7B4; background: var(--page); border-radius: 6px; }
.fbox-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.optsig summary { color: var(--link); font-weight: 700; cursor: pointer; padding: 0 2px; }
.fbox--sign { max-width: 440px; align-self: flex-start; }

/* the practice's logo with its lettering (Ryan, 16 October) */
.brand-logo { display: block; height: 40px; width: auto; }
.mail-brand .brand-logo { height: 44px; }
@media (min-width: 900px) { .brand-logo { height: 46px; } }
.brand img.brand-logo, .mail-brand img.brand-logo { width: auto; height: 44px; max-width: none; }
@media (min-width: 900px) { .brand img.brand-logo { height: 48px; } }

/* ---------------------------------------------------------------- the build's additions (17 October 2026): working forms, alerts,
   signing over the page pictures, the account menu. Colours only from the tokens above. */
.layout-gap { display: flex; flex-direction: column; gap: 28px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.alert { border-radius: 12px; padding: 12px 16px; font-weight: 600; }
.alert--ok { background: var(--ok-bg); color: var(--ok-text); }
.alert--bad { background: var(--bad-bg); color: var(--bad-text); }
.alert--info { background: var(--info-bg); color: var(--info-text); }
.err { color: var(--bad-text); font-weight: 700; font-size: 1rem; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border: 2px solid var(--bad-text); }
.hint { font-weight: 400; }
.auth { max-width: 520px; margin: 0 auto; width: 100%; }
.auth form { display: flex; flex-direction: column; gap: 18px; }
.auth h1 { margin-bottom: 4px; }
.links { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.code-input { letter-spacing: .35em; font-size: 1.5rem; text-align: center; max-width: 260px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.empty { padding: 22px 18px; font-size: 1.0625rem; }
.composer-form { display: flex; flex-direction: column; gap: 8px; }
.composer label.iconbtn { cursor: pointer; }
.composer input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.unread-n { min-width: 24px; height: 24px; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 700; font-size: .875rem; display: inline-grid; place-items: center; padding: 0 7px; }
.bub-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--soft-2); color: var(--text); text-decoration: none; border: 1px solid var(--line); }
.bub--me .saved { color: #fff; }
.acct { position: relative; }
.acct > summary { list-style: none; cursor: pointer; }
.acct > summary::-webkit-details-marker { display: none; }
.acct-menu { position: absolute; right: 0; top: 52px; min-width: 240px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); box-shadow: 0 8px 24px rgba(16,30,54,.12); z-index: 10; display: flex; flex-direction: column; overflow: hidden; }
.acct-menu a, .acct-menu button { padding: 14px 16px; text-align: left; border: 0; border-top: 1px solid var(--line-2); background: var(--page); font: inherit; color: var(--text); text-decoration: none; cursor: pointer; }
.acct-menu form { margin: 0; display: flex; }
.acct-menu form button { width: 100%; }
.sw > summary { list-style: none; }
.sw > summary::-webkit-details-marker { display: none; }
.sw .switch-menu { position: absolute; z-index: 10; min-width: 300px; }
.sw { position: relative; }
.inline { display: inline; margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.kv dt { font-weight: 700; }
.kv dd { margin: 0; }
/* signing: each page as a picture, the fields over it (positions from the sign's own stylesheet, /sign/<ref>/fields.css) */
.spage { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 8px rgba(16,30,54,.08); overflow: hidden; }
.spage img { display: block; width: 100%; height: auto; }
.sfield { position: absolute; border: 2px solid var(--navy); background: rgba(230,238,249,.85); border-radius: 5px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--navy); font-weight: 700; font-size: clamp(.5rem, 1.6vw, .875rem); overflow: hidden; white-space: nowrap; box-sizing: border-box; }
.sfield--now { box-shadow: 0 0 0 6px rgba(34,59,118,.25); }
.sfield--done { background: rgba(228,243,234,.6); border-color: var(--ok-text); }
.sfield--other { border: 2px dashed #9AA7B4; background: rgba(255,255,255,.6); color: var(--text); font-weight: 600; }
.sfield img { max-width: 100%; max-height: 100%; }
.spages { display: flex; flex-direction: column; gap: 16px; }
.padbox { border: 2px solid var(--navy); border-radius: 12px; background: #fff; touch-action: none; display: block; width: 100%; height: 180px; }
.signers { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.signers li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.hidden { display: none; }
@media (min-width: 900px) { .auth { padding-top: 24px; } }
@media (max-width: 899px) { .chat-shell--list .chat-main { display: none; } .chat-shell--thread .tlist { display: none; } .page--chat .chat-shell--list .tlist { display: block; } }
progress.prog-bar { appearance: none; -webkit-appearance: none; border: 0; width: 100%; height: 10px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
progress.prog-bar::-webkit-progress-bar { background: var(--line-2); border-radius: 5px; }
progress.prog-bar::-webkit-progress-value { background: var(--navy); border-radius: 5px; }
progress.prog-bar::-moz-progress-bar { background: var(--navy); }
.switch-item { display: block; width: 100%; text-align: left; padding: 14px 16px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--text); min-height: 48px; }
.switch-item[aria-current] { background: var(--info-bg); font-weight: 700; }
.switch-menu form:first-child .switch-item { border-top: 0; }
p.switch { cursor: default; }
/* the drawing box on the page, at the field being signed (positioned by the sign's own stylesheet) */
.sfield-pad { position: absolute; min-height: 36px; background: #fff; border: 3px solid var(--navy); border-radius: 8px; padding: 0;
  box-shadow: 0 0 0 5px rgba(34,59,118,.18); display: flex; z-index: 2; box-sizing: border-box; }
.padbox--inplace { height: 100%; min-height: 32px; border: 0; border-radius: 6px; }

/* the picture review (17 October 2026): the sign-in page's welcome line, security note and help line (point 2); a normal button
   disabled until the document is opened (point 4); declining (point 5) */
.welcome { margin: 0; font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.secnote, .help { margin: 0; font-size: 1rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.decline { border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 8px; }
.decline summary { color: var(--link); font-weight: 600; cursor: pointer; }
.decline form { margin-top: 12px; }
.sub { font-weight: 400; }

@media (max-width: 599px) {   /* a phone: the page as wide as the screen allows, so each field is big enough to draw in */
  .sigdoc { padding: 4px; border: 0; background: transparent; }
}
.brand--text { font-weight: 700; font-size: 1.2rem; color: var(--navy); text-decoration: none; white-space: nowrap; }