/*
  Title:      Zen CMC styles
  File:       app/static/cmc_style.css
  Version:    1.17.0
  Date:       2026-10-30 Arizona
  Sections:   1 tokens (China Gold fallbacks; /theme.css sets the theme), 2 base, 3 page head, 4 cards, pills, notes, 5 tiles, 6 the My Day
              banner, 7 buttons, forms, tables, tabs, 8 My Day numbers and lists, 9 help, This app, Tasks, 10 the sign-in door, 10b the
              splash (front page signed out and in), 11 tablets and
              phones, 12 the even form grid (.fgrid/.fld), 13 People and Deals lists, 14 the person's record (name strip, left menu, the
              Next block, details, the campaign checklist, communication), 15 Features and access, 16 the Membership agreement (the form,
              the summary card, Documents, Agreement settings), 17 the Dashboard and the funnel, 18 the calendar on My Day (and its print),
              19 the progress bar and the Owner card on the record, 20 the People filters, 21 the drop-down calendar of a date box
  Depends on: Google Fonts Cormorant Garamond, Figtree, Pinyon Script, Noto Sans SC, Noto Serif SC (cmc_base.html, cmc_login.html); theme
              variables from /theme.css (cmc_themes.css)
  Used by:    every page
  Purpose:    The Zen look (owner, Zentelle Master SRD section 11): easy to read first, decoration second; ivory paper, the header colour,
              the theme metal for rules and buttons, red only for real problems (one per screen: the late Next block, Do not call). Colours
              come only from the theme variables; the values in section 1 are China Gold's and only matter if /theme.css cannot load. The
              header, the Admin hub row and tiles are in the shared zen_header.css (copied from /home/wang/tools/zen_nav). Sections 1 to 11
              come from Zen OODA's zo_style.css 1.6.0, so the apps read as one; the record (section 14) follows bashCRM Deals' bd_style.css
              0.4 with every fixed colour replaced by a theme variable; form rows use Zen HQ's even form grid (hq_style.css 1.12.0 and
              section 25: one-line labels, the gold "* (required)" on the label line, 42 px boxes, helper words under the box).
  Revisions:  1.17.0 2026-10-30 Claude Code: the record's Details box: the heading with Edit details beside it (.dt-head) and the
              Edit details form (.dt-form) on the shared form layout (zen_form.css).
            1.16.2 2026-10-28 Claude Code: .pr-valwrap: the proposal's values box has no height cap (the rep rows made the last
              rows scroll out of sight).
              1.16.1 2026-10-28 Claude Code: .pr-links code wraps on phones (white-space normal; the checker found the links 650 px wide at 390).
              1.16.0 2026-10-28 Claude Code: the closing flow (.pr-*: the proposal page's actions, links, values; .inv-body: the
              customer's invoice text; .dash-going: Closing in progress).
              1.15.0 2026-10-28 Claude Code: the record's Files under Documents (.files-*): the inline buttons stay on the file's line,
              the share tick sits level with its words, Add a file opens a card.
              1.14.0 2026-10-28 Claude Code: the key page's Webhook section (.api-wh-*): the address spans two columns, the change
              ticks wrap in one row, the secret line sits level with the boxes.
              1.13.0 2026-10-26 Claude Code: .api-browser-warn, the key page's yellow notice while the browser switch is off.
              1.12.0 2026-10-26 Claude Code: .api-browser, the key page's "Calls from a browser test page" block.
              1.11.0 2026-10-24 Claude Code: Sign in as, section 35: the bright band (the same as Zen HQ's hq_style section 32).
              1.10.0 2026-10-23 Claude Code: Concierge alerts, section 28: the on-duty bar beside the tabs, my switches, the bell's
              shake (none with reduced motion), the chat hours rows; section 29: the pictures.
              1.9.1 2026-10-23 Claude Code: Admin › Agent Tools › Concierge: Button text beside On or off (two columns, one on a phone).
              1.9.0 2026-10-22 Claude Code: Concierge, section 27: the inbox, the chat page (the visitor left, staff right), the
              answer box; Admin › Agent Tools › Concierge's form across the two columns; checker round 1:
              the On/Off box 280 px wide, the line under the Concierge titles in the ink colour; round 2: the
              Concierge form's boxes 16 px and helper lines 15 px, the inbox pills 15 px; round 3: the names over
              the chat lines 15 px, 44 px buttons, tabs and the On/Off box on the Concierge pages.
              1.8.0 2026-10-22 Claude Code: Agent Tools, section 26: the menu item reads "Tools" in the phone's ☰ panel and at 991 to 1180 px (the name beside Sign out left out at 1024 to 1300), the
              tighter menu up to 1366 px, the ☰ links 44 px high, the
              Coming soon tiles of the Agent Tools page, the settings sections of Admin › Agent Tools.
              1.6.0 2026-10-21 Claude Code: partner API phase 1, section 24: Admin › API partners (the keys table, the even form grid in
              three and two columns, the limits folded), the key shown once, the confirmation boxes (details.ask: the safe button first),
              the call log, Campaign actions, and the Dashboard's Adobe Connect requests.
              1.5.0 2026-10-20 Claude Code: CMC Wave 2, section 23: the frozen tops (People, Deals, the record: everything down to the
              button row stays put; a phone keeps only the name and the buttons), the five-step Next box (items, one note box, quick notes,
              messages, the time boxes), the Put on hold box, Move to another step, the three-event warning, the Campaign card's items,
              the Events table, Messages and Send an email / a text, the deal page.
              1.4.1 2026-10-20 Claude Code: owner 2026-10-20 ("the Filters button is too faint"): section 20, on a phone or narrow
              tablet People's Filters button is the gold action button (the foil), full width at the top of the list, 46 px, 16 px words,
              a funnel icon and a dark round count badge while filters are on (.pf-ic, .pf-dot, .pf-n).
              1.4.0 2026-10-20 Claude Code: CMC Wave 1 (owner's priorities A to D): sections 17 to 21: the Dashboard's big numbers (numbers,
              not bars), the owner lists, the team tables and the funnel (sections in number order, plain bars in steps of 5 as classes .w0 to
              .w100 because the strict CSP allows no inline style); the calendar (a day of tiles; a week as seven day blocks, one under the
              other on a phone; on paper only the calendar prints); the record's progress bar (done / now / to come, the names under the
              blocks on a computer, numbers only on a phone), the Owner chip, the gold "waits for you to accept" line and the Owner card;
              People's Filters panel on the left (a Filters button on a phone); the drop-down calendar of a date box (Use this date = OK).
              1.3.0 2026-10-19 Claude Code: section 16, the Membership agreement (owner 2026-10-19): the form's cards and rows (.agr-grid2,
              .agr-grid3: the even form grid, one-line labels, 42 px boxes, helper words under the box; one column on a phone), the box with a
              problem (.fld.bad, its words in the helper slot so the row stays level), the payment check (.agr-check: matches, differs, not
              enough), the large memo (320 px, grows by hand), the strip Owner / Status / Approval, the box in the Next block, the summary
              card (a wider name column), Package Details (scrolls inside its box past 360 px), Documents, the disclaimers; on a phone the
              cards' sides are 14 px; See the agreement (.doc-*: a paper page in the theme's colours and display font, signature
              lines; on paper only the document prints, black on white); and "* (required)" spaced tighter, so "Total Membership Package ($) * (required)" stays on one line
              (labels 14 px from 400 px down, so it fits a 360 px phone too).
              1.2.1 2026-10-16 Claude Code: demo rehearsal: .no-campaign and .cmd (the note with no campaign shows the Da Laoban the
              one command to load it: 14 px monospace that wraps inside the note at every width, never a sideways scroll).
              1.2.0 2026-10-16 Claude Code: readable sizes and the splash front page (owner 2026-10-16, Zen-App-Design-Rules.md: nothing
              functional under 13 px, preferably 15; the same element the same size in every app). Raised: My Day's top line 12 to 15 px, the
              counters 13 to 15 (numbers 16 to 20), its buttons from small 32 px / 14 px to regular 42 px / 15 px; .btn.small 14 to 15 (38 px);
              .small 14 to 15; labels 14 to 15 (form rows 24 / 42 / 40 px, helper words 13 to 14); table headings, codes, pills, tab counts, list notes, step
              notes, the record's top line, status lights 12 or 13 to 14; the sign-in door's brand line 10.5 to 13, note, eyebrow and fine
              print 12 to 14 or 15, footer 12.5 to 14; the suite stamp 11 to 13; every Chinese label at least 14 px and every <small> at least 13 px (were .85em,
              down to 8.9 px). New section 10b: the splash (cmc_splash.html), the app's name big (52 to 88 px), Open My Day / People /
              Deals as 50 px buttons when signed in. The suite stamp light on the dark splash and, on phones, under the page instead of
              floating over it (separate checker's findings). A test (tests/cmc_test_all.py) fails on any font size under 13 px in this file.
              1.1.0 2026-10-16 Claude Code: the compact My Day banner (owner 2026-10-16: "the header eats over half the screen"):
              sections 6 and 8 rewritten: three one-line rows (name line and date; greeting, Chinese line and the small intro sentence;
              the five numbers with the two buttons to their right), the dragon tucked right and sized by the banner, the theme picture
              small in the corner and out of the flow; tighter number pills below 1200 px so three-digit counts still fit beside the
              buttons at 1024 (checker finding). Height 501 to 142 px at 1440, 478 to 142 at 1024, 661 to 240 at 390.
              1.0.0 2026-10-16 Claude Code: first version (with the separate checker's fixes: dl.facts no longer squeezes This app's table;
              Features and access shows whole role names and its whole table; codes and C-/D- numbers never break; phone tables keep their
              columns and scroll sideways inside their box).
*/

/* 1. tokens */
:root{
  --page:#F3EEE3; --card:#FBF8F2; --ink:#1D1913; --mu:#6A5F50; --line:#D6CAB4; --line-2:#E6DCC8;
  --black:#12100E; --on-dark:#F4EEE4; --on-dark-2:#CFC6B8; --on-dark-acc:#C9B27C;
  --gold:#B08A3E; --gold-lt:#E9CF8F; --gold-ink:#7A5A22; --gold-bg:#F6EBCF;
  --ok:#2F5A1F; --ok-bg:#E3EFD9; --warn:#8A5A12; --warn-bg:#F7E7C6; --bad:#9B3A2E; --bad-bg:#F6DCD6; --info:#2E4F6B; --info-bg:#DCE7F0;
  --foil:linear-gradient(115deg,#8C6A2F 0%,#E9CF8F 42%,#A57C35 70%,#D9B872 100%);
  --bar-rgb:233,207,143; --focus:#7A5A22; --on-accent:#12100E;
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif,"Noto Sans SC","Noto Sans Thai";
  --body:"Figtree","Segoe UI",system-ui,"PingFang SC","Noto Sans SC","Microsoft YaHei","Noto Sans Thai","Leelawadee UI",sans-serif;
  --zh:"Noto Serif SC","Songti SC","Noto Sans SC",serif;
  --radius:12px;
}

/* 2. base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--gold-ink)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15}
.zh{color:var(--mu);font-size:max(14px,.9em);margin-left:6px;font-weight:500}
small{font-size:max(13px,.85em)}
.muted{color:var(--mu)}
.m0{margin:0}
main{width:min(1440px,100% - 40px);margin:0 auto;padding:18px 0 64px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.suite-ver{position:fixed;right:10px;bottom:6px;z-index:5;font:13px/1.2 system-ui,sans-serif;opacity:.55;pointer-events:none}
.flash{border-radius:10px;padding:10px 14px;margin:0 0 10px;font-size:15px}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.gold{background:var(--warn-bg);color:var(--warn)}
.flash.err{background:var(--bad-bg);color:var(--bad)}

/* 3. page head and the Admin hub row (the same pattern in every Zen app) */
.head{padding:10px 0 14px;border-bottom:1px solid var(--line-2);margin-bottom:18px}
.head h1{font-size:36px;margin:0}
.head .sub{margin:2px 0 0;color:var(--mu)}
.sec-intro{margin:0 0 16px;color:var(--mu);max-width:760px}
.group-h{margin:26px 0 10px;font:600 15px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.group-h .zh{letter-spacing:.06em}

/* 4. cards, pills, notes */
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 20px;position:relative}
.card h2{font-size:26px;margin:0 0 10px}
.narrow-card{max-width:820px}
.note-card{max-width:820px;border-left:4px solid var(--gold)}
.pill{display:inline-block;border-radius:999px;padding:2px 11px;font-size:14px;font-weight:500;background:var(--line-2);color:var(--mu)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.gold{background:var(--gold-bg);color:var(--gold-ink)}
.note{background:var(--gold-bg);border-left:4px solid var(--gold);border-radius:8px;padding:10px 14px;margin:0 0 14px}
.ic{width:26px;height:26px;color:var(--gold-ink);flex:none}

/* 5. tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:18px 20px 18px 22px;
  text-decoration:none;color:var(--ink);position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.06);transition:border-color .2s,transform .2s}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--foil)}
a.tile:hover{border-color:var(--gold);transform:translateY(-1px)}
.tile-top{display:flex;align-items:center;gap:10px}
.tile-top b{font:600 23px var(--display)}
.tile-d{font-size:15px;color:var(--mu)}
.tile .pill{align-self:flex-start}
.tiles.big .tile{min-height:150px;padding:22px 24px 20px 26px}
.tiles.big .tile-top b{font-size:26px}
.tiles.big .ic{width:30px;height:30px}

/* 6. Home banner: compact (1.1.0, owner 2026-10-16: "the header eats over half the screen"). Three short lines: the name line and the
   date; the greeting, the Chinese line and the small intro sentence; the numbers and the two buttons. Nothing in it sets the height
   but those lines: the dragon is a background sized by the banner, the theme picture sits small in the right corner, out of the flow. */
.hb{position:relative;overflow:hidden;background:var(--black);color:var(--on-dark);margin:-18px calc(50% - 50vw) 0}
/* the artwork is sized by the banner's height and tucked to the right, beside the corner picture; its sides melt into the header colour */
.hb-art{position:absolute;right:max(170px,calc(50vw - 720px + 170px));bottom:0;height:calc(100% + 20px);width:auto;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.hb-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--black) 92%,transparent) 0,
  color-mix(in srgb,var(--black) 70%,transparent) 40%,color-mix(in srgb,var(--black) 20%,transparent) 70%,color-mix(in srgb,var(--black) 40%,transparent) 100%)}
.hb-in{position:relative;z-index:2;width:min(1440px,100% - 40px);margin:0 auto;padding:20px 140px 20px 0}
.hb-words{min-width:0}
.hb-eb{font-size:15px;line-height:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);opacity:.9;margin:0 0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-greet{display:flex;align-items:baseline;gap:6px 16px;min-width:0;margin:0 0 12px}
.hb h1{font:500 34px/1.1 var(--display);color:var(--on-dark);margin:0;white-space:nowrap;flex:none}
.hb-zh{margin:0;flex:none;white-space:nowrap}
.hb-zh .zh{margin:0;font:600 19px var(--zh);letter-spacing:.16em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-lede{flex:1 1 0;min-width:0;color:var(--on-dark-2);margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-lede em{font-style:italic;font-family:var(--display);font-size:1.15em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-lede-must{flex-basis:100%;white-space:normal}
.hb-greet:has(.hb-lede-must){flex-wrap:wrap}
.hb-sum{margin:0;display:flex;gap:8px;flex-wrap:wrap}
/* the theme picture: small, in the corner, out of the flow (it never sets the banner's height) */
.hb-pic{position:absolute;right:20px;top:50%;transform:translateY(-50%);margin:0;text-align:center;width:110px}
.hb-pic img,.hb-pic svg.pic{display:block;width:74px;height:auto;margin:0 auto;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.hb-sig{font:400 18px/1.1 "Pinyon Script",cursive;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;margin:2px 0 0;white-space:nowrap}
.hb + .group-h{margin-top:28px}

/* 7. buttons, forms, tables, tabs (from Zen OODA section 12; colours from the theme variables only) */
.btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--gold);
  background:var(--foil);color:var(--on-accent);font:600 15px var(--body);cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.05)}
.btn.plain{background:var(--card);color:var(--ink);border-color:var(--line);font-weight:500}
.btn.plain:hover{border-color:var(--gold);filter:none}
.btn.plain.dark{background:transparent;color:var(--gold-lt);border-color:rgba(var(--bar-rgb),.5)}
.btn.small{height:38px;padding:0 14px;font-size:15px}
.btn.big{height:50px;padding:0 24px;font-size:17px;border-radius:12px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
.small{font-size:15px}   /* 1.2.0: 15 px, the preferred size (owner rule 2026-10-16: never under 13 px); it only drops the weight of a cell, not its size */
.mt{margin-top:18px}
.nowrap{white-space:nowrap}
.req{color:var(--gold-ink);font-weight:700;font-size:inherit;letter-spacing:.08em;text-transform:uppercase;margin-left:4px}
form.f label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font-weight:600;font-size:15px;margin-bottom:12px}
form.f label > input[type=text],form.f label > select,form.f label > textarea{flex:1 1 100%}
form.f .req{margin-left:0}
form.f label.inline{display:inline-flex;align-items:center;gap:6px;margin:0 14px 6px 0;font-weight:500;white-space:nowrap}
form.f input[type=text],form.f select,form.f textarea{font:inherit;font-weight:400;padding:0 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);width:100%;box-sizing:border-box}
form.f input[type=text],form.f select{height:42px}
form.f textarea{min-height:130px;padding:10px 12px;resize:vertical;line-height:1.5}
form.f input:focus,form.f select:focus,form.f textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
form.f td input[type=text],form.f td select{height:36px;padding:0 8px;min-width:120px}
form.f td input.wide{min-width:260px}
form.f input.narrow{width:70px;min-width:0}
.two{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.checks{margin:6px 0 0}
.tablewrap{max-height:calc(100vh - 260px);overflow:auto;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--card)}
.tablewrap table{width:100%;border-collapse:collapse;font-size:15px}
.tablewrap th,.tablewrap td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.tablewrap th{position:sticky;top:0;background:var(--page);z-index:2;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--mu)}
.tablewrap tr.off td{color:var(--mu)}
code{font-family:ui-monospace,monospace;font-size:14px;background:var(--page);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px}
.tabs{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.tabs a{padding:8px 15px;border-radius:9px;text-decoration:none;color:var(--ink);font-weight:500;font-size:15px}
.tabs a:hover{background:var(--page)}
.tabs a[aria-current="page"]{background:var(--black);color:var(--gold-lt)}
.crumb{margin:0;font-size:15px;color:var(--mu)}
.crumb a{color:var(--gold-ink)}
@media (max-width:700px){.grid2{grid-template-columns:1fr}.tabs{display:flex;width:100%}.tabs a{flex:1;text-align:center;padding:7px 6px}}

/* 8. My Day: the live numbers and the buttons, on one line (the buttons to the right of the numbers), then the lists */
.hb-bar{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;min-width:0}
.hb-nums{display:flex;gap:8px;flex-wrap:nowrap;margin:0;min-width:0}
.hb-nums a{display:inline-flex;align-items:baseline;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid rgba(var(--bar-rgb),.35);
  background:color-mix(in srgb,var(--black) 55%,transparent);color:var(--on-dark);text-decoration:none;font-size:15px;line-height:24px;white-space:nowrap}
.hb-nums a:hover{border-color:var(--gold-lt)}
.hb-nums b{font:600 20px/1 var(--body);color:var(--gold-lt);font-variant-numeric:tabular-nums}
.hb-acts{display:flex;gap:10px;flex-wrap:nowrap;margin:0;flex:none}
.hb-acts .btn{white-space:nowrap}
.hb-acts .btn.plain.dark{background:color-mix(in srgb,var(--black) 55%,transparent)}
.home-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:6px}
.loop-list,.chan-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.loop-list a,.chan-list a{display:block;background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);position:relative}
.loop-list a:hover,.chan-list a:hover{border-color:var(--gold)}
.loop-list small,.chan-list small{display:block;color:var(--mu);font-size:14px;margin-top:2px}
.chan-list .n{position:absolute;right:14px;top:12px;font-size:14px;color:var(--mu)}
.chan-list a{padding-right:84px}

/* 9. help, This app, coming pages, Tasks */
.help-wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.help{max-width:820px;padding:22px 28px}
.help h3{font-size:24px;margin:20px 0 6px}
.help h3:first-child{margin-top:0}
.help p,.help li{max-width:70ch}
.help ul{padding-left:20px}
.help li{margin:4px 0}
.help-side{display:grid;gap:4px;position:sticky;top:84px}
.help-side .group-h{margin:0 0 6px}
.help-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;color:var(--ink);text-decoration:none;font-weight:500}
.help-side a:hover{border-color:var(--line)}
.help-side a[aria-current="page"]{background:var(--card);border-color:var(--gold)}
.help-side .ic{width:22px;height:22px}
table.facts{border-collapse:collapse;width:100%}
table.facts th,table.facts td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line-2)}
table.facts tr:last-child th,table.facts tr:last-child td{border-bottom:0}
table.facts th{width:150px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);font-weight:600}
.coming-k{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.doors{list-style:none;padding:0;margin:10px 0 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.doors a{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--page);color:var(--ink);text-decoration:none}
.doors a:hover{border-color:var(--gold)}
.doors .muted{margin-left:auto;font-size:14px}

/* 10. the sign-in door */
body.door{background:var(--black);color:var(--on-dark);min-height:100vh;display:flex;flex-direction:column}
.door .brand{display:flex;align-items:center;gap:10px;color:var(--on-dark);text-decoration:none}
.door .brand img{width:42px;height:42px;border-radius:10px}
.door .brand b{display:block;font:600 28px/1.05 var(--display);color:var(--gold-lt);letter-spacing:.02em}
.door .brand small{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-acc);margin-top:3px}
.door .brand small .zh{margin:0;color:inherit}
.door-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,44px);
  border-bottom:3px solid transparent;border-image:var(--foil) 1}
.door-note{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.door-stage{position:relative;flex:1;overflow:hidden;display:flex;align-items:center}
.door-art{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;min-height:520px;width:auto;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.door-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--black) 92%,transparent) 0,
  color-mix(in srgb,var(--black) 55%,transparent) 34%,color-mix(in srgb,var(--black) 30%,transparent) 62%,color-mix(in srgb,var(--black) 70%,transparent) 100%)}
.door-grid{position:relative;z-index:2;width:min(1320px,100% - 40px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 400px minmax(0,.8fr);
  gap:36px;align-items:center;padding:44px 0 56px}
.door-eb{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 12px}
.door-eb .zh{display:block;margin:0 0 6px;font:600 22px var(--zh);letter-spacing:.24em;color:var(--gold-lt)}
.door-left h1{font:500 clamp(36px,4vw,54px)/1.06 var(--display);margin:0 0 14px;color:var(--on-dark)}
.door-left h1 em{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.door-left p{color:var(--on-dark-2);max-width:40ch;margin:0}
.door-card{background:color-mix(in srgb,var(--card) 97%,transparent);color:var(--ink);border-radius:16px;padding:28px 26px 22px;position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(var(--bar-rgb),.5)}
.door-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:16px 16px 0 0;background:var(--foil)}
.door-card h2{font-size:32px;margin:0;text-align:center}
.door-card .sub{text-align:center;color:var(--mu);margin:4px 0 18px;font-size:15px}
.door-card label{display:grid;gap:5px;font-weight:600;font-size:15px;margin-bottom:12px}
.door-card input{font:inherit;font-weight:400;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.door-card input:focus{outline:2px solid var(--gold);outline-offset:1px}
.door-card button{width:100%;height:48px;border:1px solid var(--gold);border-radius:10px;background:var(--foil);color:var(--on-accent);font:600 16px var(--body);cursor:pointer;margin-top:4px}
.door-card .err{background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:8px 12px;font-size:15px;margin:0 0 12px}
.door-card .ok{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:8px 12px;font-size:15px;margin:0 0 12px}
.door-card .forgot{text-align:center;font-size:15px;margin:12px 0 0}
.door-card .fine{text-align:center;font-size:14px;color:var(--mu);margin:12px 0 0}
.door-right{margin:0;justify-self:center;text-align:center}
.door-right img,.door-right svg.pic{display:block;width:min(240px,100%);height:auto;margin:0 auto;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
/* the inline picture (living art) is sized like the <img>; a fixed width keeps the figure as narrow as the picture */
.door-right svg.pic{width:240px;max-width:100%}
.door-right .q{display:block;margin:12px 0 0;font:italic 500 19px var(--display);color:var(--on-dark-2)}
.door-right .sig{display:block;font:400 30px "Pinyon Script",cursive;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.door-foot{position:relative;z-index:3;text-align:center;font-size:14px;color:var(--on-dark-2);padding:14px;border-top:1px solid rgba(var(--bar-rgb),.18)}

/* 10b. the splash (1.2.0, owner 2026-10-16: every app opens on a big splash, the theme's art and the app's name; signing in pops up over it;
   signed in, the same splash without the card). cmc_splash.html is the one stage for /login (signed out) and / (signed in, body.front). */
.door-main{flex:1;display:flex;flex-direction:column}
.door-left h1.door-name{font:600 clamp(52px,6vw,88px)/1 var(--display);margin:0 0 6px;color:var(--gold-lt);letter-spacing:.01em}
.door-title{font:600 clamp(22px,2.1vw,30px)/1.2 var(--display);color:var(--on-dark);margin:0 0 18px}
.door-title .zh{color:var(--gold-lt);font-family:var(--zh);font-size:max(13px,.8em);margin-left:10px;white-space:nowrap}
/* signed out the card takes the centre, so the name and title are a size smaller and stay on one line each */
.door-grid:not(.signed) h1.door-name{font-size:clamp(48px,4.6vw,70px);white-space:nowrap}
.door-grid:not(.signed) .door-title{font-size:clamp(20px,1.7vw,25px)}
.door-left .door-tag{font:italic 500 clamp(22px,2vw,28px)/1.2 var(--display);color:var(--on-dark);margin:0 0 12px}
.door-tag em{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.door-left .door-lede{font-size:17px;max-width:44ch}
.door-left .door-hello{font:500 22px/1.3 var(--body);color:var(--on-dark);margin:26px 0 14px;max-width:none}
.door-date{display:inline-block;margin-left:10px;font-size:17px;color:var(--on-dark-2)}
.door-acts{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.door-acts .btn.plain.dark{background:color-mix(in srgb,var(--black) 55%,transparent)}
body.front{background:var(--black)}
body.front main{width:100%;padding:0;margin:0;display:flex;flex-direction:column;min-height:calc(100vh - 64px)}
body.front .flash{margin:10px 20px}
body.front .suite-ver,body.door .suite-ver{color:var(--on-dark-2)}
.door-stage.signed{flex:1;min-height:560px}
.door-grid.signed{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);padding:56px 0 64px}

/* 11. tablets and phones */
/* the intro sentence on the greeting line shows only where it fits whole; elsewhere it is the line's tooltip (a blocked role's line always shows) */
@media (max-width:1199px){.hb-lede{display:none}.hb-lede.hb-lede-must{display:block}.hb-bar{column-gap:12px}.hb-nums{gap:6px}.hb-nums a{padding:8px 11px}}
@media (max-width:1100px){
  .ooda-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .door-grid{grid-template-columns:minmax(0,1fr) 380px}
  .door-grid.signed{grid-template-columns:1fr}
  .door-right{display:none}
}
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .help-wrap{grid-template-columns:1fr}
  .help-side{position:static;order:-1;display:flex;flex-wrap:wrap}
  .help-side .group-h{width:100%}
}
@media (max-width:760px){
  .door-grid{grid-template-columns:1fr;gap:20px;padding:26px 0 200px}
  .door-left h1{font-size:34px}
  .door-left h1.door-name{font-size:48px}
  .door-grid.signed{padding:30px 0 220px}
  .door-date,.door-title .zh{display:block;margin:4px 0 0}
  .door-left .door-lede{display:none}
  .door-card{width:min(420px,100%);justify-self:center}
}
@media (max-width:700px){
  main{width:calc(100% - 24px);padding-top:12px}
  .suite-ver{position:static;text-align:right;padding:0 12px 10px}   /* phones: under the page, never over the work (checker finding) */
  .head h1{font-size:30px}
  .tiles,.ooda-steps,.home-grid{grid-template-columns:1fr}
  .tiles.big .tile{min-height:0}
  .hb{margin-top:-12px}
  .hb-in{width:calc(100% - 28px);padding:14px 0}
  .hb-pic{display:none}
  .hb-fade{background:linear-gradient(90deg,color-mix(in srgb,var(--black) 88%,transparent) 0,color-mix(in srgb,var(--black) 55%,transparent) 100%)}
  .hb-art{right:-60px}
  .hb-eb{white-space:normal;letter-spacing:.08em;font-size:14px;line-height:20px}
  .hb-greet{flex-wrap:wrap;margin-bottom:10px}
  .hb h1{font-size:28px;white-space:normal}
  .hb-bar,.hb-nums{flex-wrap:wrap}
  .hb-nums{gap:6px}.hb-nums a{padding:6px 10px}
  .help{padding:18px}
  table.facts th{width:96px}
  .door-art{height:auto;min-height:0;width:860px;-webkit-mask-image:none;mask-image:none}
}


/* 12. the even form grid (Zen HQ hq_style.css 1.12.0): each field is three rows: the label on ONE line, the 42 px box, a two-line helper slot
   that is always there, so a helper never pushes a neighbour and every box in a row shares one top */
form.f .fgrid{align-items:start;row-gap:6px;margin-bottom:6px}
form.f .fgrid>label.fld{display:grid;grid-template-rows:24px 42px 40px;gap:4px;min-width:0;margin:0}
.fgrid .fld-l{display:block;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:15px}
.fgrid .fld-l .zh,.fgrid .fld-l .req{display:inline}
form.f .fgrid input[type=text],form.f .fgrid input[type=email],form.f .fgrid input[type=datetime-local],form.f .fgrid select{width:100%;min-width:0;height:42px;box-sizing:border-box;margin:0}
.fgrid .fld-s{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:20px;font-weight:500;overflow-wrap:anywhere}
form.f input[type=email],form.f input[type=datetime-local]{font:inherit;font-weight:400;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);height:42px;width:100%;box-sizing:border-box}
form.f label.wide{display:grid;gap:4px;margin:0 0 12px}
form.f label.wide .fld-l{font-weight:600;font-size:15px}
.req{font-size:inherit}
@media (max-width:540px){form.f .fgrid>label.fld{grid-template-rows:24px 42px auto}.fgrid .fld-s:empty{display:none}form.f .fgrid{row-gap:14px}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 13. People and Deals lists */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.list-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.tabs .n{color:var(--mu);font-size:14px;margin-left:4px;font-variant-numeric:tabular-nums}
.tabs a[aria-current="page"] .n{color:var(--on-dark-2)}
form.search{display:flex;gap:8px;align-items:center;flex:1 1 320px;max-width:520px;margin:0}
form.search input[type=text]{flex:1 1 auto;min-width:0}
.tablewrap tr.late td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.group-h .count{font:500 14px var(--body);letter-spacing:0;color:var(--mu);margin-left:6px;text-transform:none}
.day-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.day-head .group-h{margin-bottom:10px}
.form-card{max-width:900px}
.consent{border:1px solid var(--line-2);border-radius:10px;padding:10px 14px 12px;margin:0 0 12px}
.consent legend{font-weight:600;font-size:15px;padding:0 6px}

/* 14. the person's record */
.idstrip{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:6px 0 12px;border-bottom:1px solid var(--line-2);margin-bottom:16px}
.idstrip h1{font-size:36px;margin:2px 0 6px}
.idstrip h1 small{font-size:20px;color:var(--mu)}
.id-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.id-contact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lights{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0}
.lights li{font-size:14px;font-weight:600;border-radius:999px;padding:3px 10px;border:1px solid var(--line)}
.lights li.on{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.lights li.off{background:var(--card);color:var(--mu)}
.lights li.stop{background:var(--bad-bg);color:var(--bad);border-color:transparent}
.rec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.recnav{display:grid;gap:2px;position:sticky;top:84px}
.recnav a{text-decoration:none;color:var(--ink);padding:7px 10px;border-radius:8px;font-weight:500;font-size:15px}
.recnav a:hover,.recnav a:focus-visible{background:var(--card);box-shadow:inset 3px 0 0 var(--gold)}
.rec-body{max-width:980px;min-width:0;display:grid;gap:14px}
.rec-body section{scroll-margin-top:84px}
.rec-body .card h2{font-size:24px}
.next{background:var(--black);color:var(--on-dark);border-radius:14px;padding:16px 20px 18px;border-top:4px solid var(--gold);position:relative}
.next.late{border-top-color:var(--bad)}
.next-eb{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 4px}
.next .lane{color:var(--gold-lt)}
.next h2{font:600 30px var(--display);color:var(--on-dark);margin:0 0 4px;padding-right:150px}
.next-due{margin:0 0 6px;color:var(--on-dark-2);font-size:15px}
.next-guide{margin:0 0 12px;color:var(--on-dark-2);max-width:70ch}
.next form.f .fld-l{color:var(--on-dark)}
.next form.f .fld-s{color:var(--on-dark-2)}
.next form.f input[type=text],.next form.f input[type=datetime-local],.next form.f select{border-color:rgba(var(--bar-rgb),.45);background:var(--card)}
.next-form{margin:0}
.out-btns{display:flex;gap:8px;flex-wrap:wrap}
.next .btn.plain{background:transparent;color:var(--gold-lt);border-color:rgba(var(--bar-rgb),.5)}
.next .btn.plain:hover{background:rgba(var(--bar-rgb),.1)}
.stop-box{margin-top:12px}
.stop-box summary{cursor:pointer;color:var(--on-dark-2);font-size:15px}
.stop-box form{background:var(--card);color:var(--ink);border-radius:10px;padding:12px 14px;margin-top:8px;max-width:760px}
.stop-box form.f .fld-l{color:var(--ink)}
.stop-box form.f .fld-s{color:var(--mu)}
.start-deal{margin:8px 0 0;max-width:760px}
.dnc-warn{background:var(--bad-bg);color:var(--bad);border-radius:10px;padding:8px 12px;margin:0 0 10px;font-weight:600}
.take{position:absolute;top:14px;right:16px;margin:0}
.next .take .btn{color:var(--gold-lt)}
dl.facts{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 14px;margin:0 0 10px}
.facts dt{color:var(--mu);font-size:15px;font-weight:600}
.facts dd{margin:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.facts dd.pre{white-space:pre-wrap;display:block}
.inline-form{display:inline-flex;gap:6px;margin:0}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.checklist li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;padding:6px 8px;border-radius:8px}
.checklist .tick{grid-row:span 2;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);margin-top:3px;box-sizing:border-box}
.checklist .st-meta{color:var(--mu);font-size:14px}
.checklist li.st-done .tick{background:var(--ok);border-color:var(--ok)}
.checklist li.st-skipped .tick{border-style:dashed}
.checklist li.st-skipped .st-title{color:var(--mu);text-decoration:line-through}
.checklist li.st-current{background:var(--gold-bg)}
.checklist li.st-current .tick{border-color:var(--gold);background:var(--gold)}
.checklist li.st-hold .tick{border-color:var(--info);background:var(--info-bg)}
.checklist li.st-stopped .tick{border-color:var(--mu);background:var(--line-2)}
.checklist li.st-ahead .st-title{color:var(--mu)}
.log-form{border-bottom:1px solid var(--line-2);padding-bottom:12px;margin-bottom:12px}
.log-form textarea{min-height:90px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.timeline li{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:10px;font-size:15px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.timeline .tl-at{color:var(--mu)}
.timeline .tl-what{white-space:pre-wrap;overflow-wrap:anywhere}
.timeline small{color:var(--mu);font-size:14px}
.soonish h2{font-size:21px !important;display:flex;align-items:center;gap:10px}
.sec-intro{margin:0 0 16px;color:var(--mu);max-width:820px}

/* 15. Features and access */
.tablewrap table.access th{position:static}
table.access select{width:210px;min-width:210px;height:36px;padding-right:28px;font:inherit;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
table.access .routes code{display:inline-block;margin:0 4px 4px 0;white-space:nowrap}
.tablewrap{position:relative}
.tablewrap.full{max-height:none}
code,.nowrap-id{white-space:nowrap}
@media (max-width:700px){.tablewrap table{min-width:680px}.tablewrap table.access{min-width:900px}}
table.access .routes code.edit{border-color:var(--gold)}

@media (max-width:900px){
  .rec{grid-template-columns:1fr}
  .recnav{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .recnav a{white-space:nowrap;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:15px}
  .take{position:static;margin-top:10px}
  .next h2{padding-right:0}
}
@media (max-width:640px){
  .idstrip h1{font-size:30px}
  dl.facts{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr}
  .out-btns .btn{flex:1 1 calc(50% - 8px);justify-content:center}
  form.search{max-width:none}
}

/* 1.2.1: the note when no campaign is open (cmc_no_campaign.html): the load command wraps inside the note */
.no-campaign p+p,.no-campaign pre+p{margin-top:8px}
.no-campaign .cmd{font-family:ui-monospace,monospace;font-size:14px;line-height:1.5;background:var(--page);border:1px solid var(--line-2);border-radius:6px;
  padding:8px 10px;margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;user-select:all;white-space:normal;max-width:100%;box-sizing:border-box}

/* 16. The Membership agreement (1.3.0): the form, the summary card, Documents, Agreement settings */
.agr-head .sub{max-width:900px}
.agr-form,.agr-set{max-width:1120px}
.agr-card{margin:0 0 16px}
.agr-card h2{font-size:24px;margin:0 0 12px}
.agr-intro{margin:0 0 12px}
.agr-grid2,.agr-grid3{display:grid;gap:0 16px}
.agr-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.agr-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
form.f .agr-grid2+.agr-grid2,form.f .agr-grid2+.agr-grid3,form.f .agr-grid3+.agr-grid2,form.f .agr-grid3+.agr-grid3{margin-top:6px}
.fld-err{color:var(--bad);font-weight:600}
form.f .fld.bad input,form.f .fld.bad select,form.f .agr-memo.bad textarea{border-color:var(--bad);border-width:2px}
form.f .agr-memo{margin:0}
form.f .agr-memo textarea{min-height:320px;width:100%;box-sizing:border-box;resize:vertical;line-height:1.55;font-size:15px}
form.f .agr-memo .fld-s{font-size:14px;line-height:20px}
.agr-check{margin:4px 0 14px;padding:10px 14px;border-radius:10px;font-size:15px;line-height:1.5;background:var(--page);color:var(--mu);border:1px solid var(--line-2)}
.agr-check.match{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.agr-check.differ{background:var(--warn-bg);color:var(--warn);border-color:transparent;font-weight:500}
.agr-strip{list-style:none;display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 16px;padding:0}
.agr-strip li{background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:8px 14px;font-size:15px}
.agr-k{color:var(--mu);font-weight:600;margin-right:4px}
.agr-actions{margin-top:4px}
.agr-foot{margin:8px 0 0;font-size:15px}
.agr-next{margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--bar-rgb),.35);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.agr-next-t{margin:0;color:var(--on-dark);font-size:15px}
.agr-next-b{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.agr-sum h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
dl.facts.agr-facts{grid-template-columns:250px minmax(0,1fr)}
.agr-h3{font-size:17px;font-weight:600;margin:14px 0 8px}
.agr-details{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;border:1px solid var(--line-2);border-radius:10px;padding:10px 14px;
  background:var(--page);font-size:15px;line-height:1.55}
.agr-ver{margin:10px 0}
.agr-discl{margin-top:16px;border-top:1px solid var(--line-2);padding-top:4px;font-size:15px}
.agr-risk{white-space:pre-wrap;margin:0 0 8px;color:var(--mu)}
.agr-links{display:flex;gap:18px;flex-wrap:wrap;margin:0}
.agr-links a,.docs-list a{color:var(--gold-ink)}
.docs-list{list-style:none;margin:0 0 6px;padding:0;font-size:15px}
.docs-list li{padding:6px 0;border-bottom:1px solid var(--line-2)}
@media (max-width:900px){.agr-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .agr-grid2,.agr-grid3{grid-template-columns:1fr}
  dl.facts.agr-facts{grid-template-columns:1fr;gap:2px 0}
  .agr-facts dd{margin-bottom:6px}
  .agr-actions .btn{flex:1 1 100%;justify-content:center}
  .agr-card{padding:16px 14px}
  .agr-form .fld-l .req{letter-spacing:.02em}
}
@media (max-width:400px){.agr-form .fgrid .fld-l{font-size:14px}}

/* 16b. See the agreement (1.3.0): the document page; on paper only the document prints */
.doc-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:900px;margin:0 auto 14px}
.doc-tools-note{font-size:15px}
.doc{max-width:900px;margin:0 auto;background:var(--card);border:1px solid var(--line-2);border-top:6px solid var(--gold);border-radius:6px;
  padding:40px 52px 48px;color:var(--ink);font-size:16px;line-height:1.6;box-shadow:0 2px 14px rgba(0,0,0,.06)}
.doc-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:2px solid var(--gold);padding-bottom:14px;margin-bottom:20px}
.doc-co{font:600 28px/1.2 var(--display);margin:0;color:var(--ink)}
.doc-co-sub{margin:4px 0 0;color:var(--mu);font-size:15px}
.doc-meta p{margin:0;font-size:15px}
.doc-l{color:var(--mu);font-weight:600;margin-right:6px}
.doc-title{font:600 38px/1.15 var(--display);text-align:center;margin:6px 0 16px;letter-spacing:.02em}
.doc-intro{margin:0 0 18px}
.doc-sec{margin:0 0 18px;break-inside:avoid}
.doc-sec h2{font:600 22px/1.3 var(--display);margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line-2);color:var(--gold-ink)}
.doc-line{margin:2px 0}
.doc-none{color:var(--mu);font-style:italic}
.doc-details{white-space:pre-wrap;overflow-wrap:anywhere}
.doc-risk{white-space:pre-wrap;margin:0 0 8px}
.doc-discl{font-size:15px}
.doc-discl a{color:var(--gold-ink);overflow-wrap:anywhere}
.doc-sign-note{margin:0 0 26px}
.doc-sign-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:34px 28px}
.doc-sign-box{display:flex;flex-direction:column;gap:6px}
.doc-sign-line{display:block;border-bottom:1px solid var(--ink);height:34px}
.doc-sign-cap{font-size:14px;color:var(--mu)}
.doc-initials{margin:30px 0 0;font-size:15px;color:var(--mu);display:flex;align-items:flex-end;gap:10px}
.doc-init-line{display:inline-block;width:110px;border-bottom:1px solid var(--ink);height:22px}
@media (max-width:640px){
  .doc{padding:22px 16px 28px;font-size:15px}
  .doc-title{font-size:30px}
  .doc-sign-grid{grid-template-columns:1fr;gap:24px}
}
@media print{
  body.doc-page{background:#fff}
  body.doc-page .doc-tools,body.doc-page .flash,body.doc-page .suite-ver{display:none !important}
  body.doc-page main{width:100%;padding:0;margin:0}
  .doc{border:0;box-shadow:none;max-width:none;padding:0;color:#000;background:#fff}
  .doc *{color:#000 !important}
  .doc-head{border-bottom-color:#000}
  .doc a::after{content:""}
}

/* 17. the Dashboard (1.4.0): big numbers, the owner lists, the team tables, the funnel */
.dash-head{align-items:flex-start}
.dash-per{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin:0}
.dash-range{position:relative}
.dash-range summary{list-style:none;cursor:pointer;padding:8px 15px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-weight:500;font-size:15px;line-height:24px}
.dash-range summary::-webkit-details-marker{display:none}
.dash-range[open] summary{background:var(--black);color:var(--gold-lt)}
.dash-range-in{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;
  display:grid;grid-template-columns:auto 150px;gap:8px 10px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.dash-range-in label{margin:0 !important;font-weight:600;font-size:15px}
.dash-range-in .btn{grid-column:1 / -1;justify-content:center}
form.f .dash-range-in input[type=text]{height:42px}
.dash-note{margin:-6px 0 10px;font-size:15px}
.dash-sec{margin:0 0 8px}
.dnums{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:12px;margin:0 0 12px}
.dnum{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;text-decoration:none;color:var(--ink);
  position:relative;overflow:hidden}
.dnum::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--foil)}
.dnum:hover{border-color:var(--gold)}
.dnum b{font:600 36px/1.1 var(--body);color:var(--gold-ink);font-variant-numeric:lining-nums tabular-nums}
.dnum span{font-size:15px;font-weight:600;color:var(--mu)}
.dnum.warn b{color:var(--warn)}
.dnum.warn::before{background:var(--warn)}
.dnums.small3 .dnum b{font-size:30px}
.dash-h3{font-size:19px;margin:14px 0 8px}
.dash-owners{display:grid;gap:8px}
.dash-owner{padding:10px 16px}
.dash-owner summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:16px}
.do-name{font-weight:600}
.do-n b{font-variant-numeric:tabular-nums}
.dash-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px;font-size:15px}
.dash-list li{padding:5px 0;border-bottom:1px solid var(--line-2)}
.dash-list li.late,.dash-accept li.late{box-shadow:inset 3px 0 0 var(--warn);padding-left:8px}
.dash-accept{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dash-accept li{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:10px 14px}
.dash-accept form{margin:0}
.da-who{min-width:0}
table.dash-team td.num,table.dash-team th.num{text-align:right;font-variant-numeric:tabular-nums;width:120px}
table.dash-team tr.tot td{font-weight:600;background:var(--page)}
table.dash-team tr.late td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.dash-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.dash-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dash-steps a{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:10px 14px;
  text-decoration:none;color:var(--ink);font-size:15px}
.dash-steps a:hover{border-color:var(--gold)}
.dash-steps b{font:600 20px var(--body);font-variant-numeric:lining-nums tabular-nums;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.funnel{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fun-sec details,.fun-sec>.fun-row{background:var(--card);border:1px solid var(--line-2);border-radius:12px}
.fun-sec summary,.fun-row,.fun-stages a{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr) 64px;gap:14px;align-items:center;padding:10px 14px;
  text-decoration:none;color:var(--ink)}
.fun-sec summary{cursor:pointer;font-size:16px;list-style:none}
.fun-sec summary::-webkit-details-marker{display:none}
.fun-sec summary .fun-label::before{content:"\25B8";display:inline-block;width:18px;color:var(--gold-ink);transition:transform .15s}
.fun-sec details[open] summary .fun-label::before{transform:rotate(90deg)}
.fun-sec.empty summary{color:var(--mu)}
.fun-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fun-label b{font-variant-numeric:tabular-nums}
.fun-bar{display:block;height:14px;background:var(--page);border-radius:7px;overflow:hidden;border:1px solid var(--line-2)}
.bar{display:block;height:100%;background:var(--foil);border-radius:7px}
.bar.w0{width:0%}.bar.w5{width:5%}.bar.w10{width:10%}.bar.w15{width:15%}.bar.w20{width:20%}.bar.w25{width:25%}.bar.w30{width:30%}.bar.w35{width:35%}.bar.w40{width:40%}.bar.w45{width:45%}.bar.w50{width:50%}.bar.w55{width:55%}.bar.w60{width:60%}.bar.w65{width:65%}.bar.w70{width:70%}.bar.w75{width:75%}.bar.w80{width:80%}.bar.w85{width:85%}.bar.w90{width:90%}.bar.w95{width:95%}.bar.w100{width:100%}
.fun-n{text-align:right;font:600 20px var(--body);font-variant-numeric:tabular-nums;color:var(--gold-ink)}
.fun-stages{list-style:none;margin:0;padding:0 0 6px;border-top:1px solid var(--line-2)}
.fun-stages li{border-bottom:1px solid var(--line-2)}
.fun-stages li:last-child{border-bottom:0}
.fun-stages a,.fun-stages .fun-row{padding:7px 14px 7px 32px;font-size:15px}
.fun-stages .fun-row{display:grid;grid-template-columns:minmax(0,302px) minmax(0,1fr) 64px;gap:14px;align-items:center}
.fun-stages a:hover{background:var(--gold-bg)}
.fun-stages li.empty{color:var(--mu)}
.fun-stages li.empty .fun-n{color:var(--mu);font-weight:500}
.fun-stages .fun-n{font-size:17px}
.fun-all{margin:6px 14px 4px 32px;font-size:15px}
@media (max-width:900px){.dash-two{grid-template-columns:1fr}}
@media (max-width:640px){
  .dnums{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .dnum{padding:10px 10px 10px 14px}
  .dnum b{font-size:30px}
  .dnum span{font-size:14px;line-height:1.3}
  .fun-sec summary,.fun-row,.fun-stages a,.fun-stages .fun-row{grid-template-columns:minmax(0,1fr) 54px;gap:4px 10px}
  .fun-sec summary .fun-bar,.fun-row .fun-bar,.fun-stages .fun-bar{grid-column:1 / -1;grid-row:2}
  .fun-stages a,.fun-stages .fun-row{padding-left:22px}
  .fun-label{white-space:normal}
  .dash-range-in{right:auto;left:0;grid-template-columns:auto minmax(0,1fr);width:min(320px,calc(100vw - 24px))}
  .dash-per{width:100%}
  table.dash-team td.num,table.dash-team th.num{width:70px}
  .tablewrap table.dash-team{min-width:0}
}

/* 18. the calendar on My Day (1.4.0) */
.tabs.whose{margin:20px 0 0}
.cal-wrap{margin:8px 0 0}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap}
.cal-head .group-h{margin-bottom:8px}
.cal-tools{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.cal-nav{display:flex;gap:6px;flex-wrap:wrap}
.cal-title{margin:0 0 10px;font-size:15px;font-weight:600}
.cal-title .muted{font-weight:400}
.cal-days.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal-day{min-width:0}
.cal-days.week .cal-day{background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:8px}
.cal-days.week .cal-day.is-today{border-color:var(--gold)}
.cal-dh{font:600 15px var(--body);margin:0 0 6px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.cal-dh a{color:var(--ink);text-decoration:none}
.cal-dh .count{font-size:14px;color:var(--mu);margin-left:auto}
.cal-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cal-days.day .cal-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cal-item{background:var(--card);border:1px solid var(--line-2);border-left:4px solid var(--gold);border-radius:10px;padding:8px 12px;min-width:0}
.cal-item.event{border-left-color:var(--info)}
.cal-item.late{border-left-color:var(--warn)}
.cal-days.week .cal-item{padding:6px 8px;background:var(--page)}
.cal-item p{margin:0;overflow-wrap:anywhere}
.ci-top{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:15px}
.ci-time{font-weight:700;font-variant-numeric:tabular-nums}
.ci-kind{color:var(--mu);font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.ci-what{font-weight:600;font-size:15px;margin-top:2px !important}
.ci-who,.ci-move{font-size:14px}
.ci-move{color:var(--mu)}
.ci-stage{color:var(--ink)}
.cal-empty{margin:0;font-size:15px}
.cal-days.week .cal-empty{font-size:14px}
@media (max-width:1100px){.cal-days.week{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cal-days.week{grid-template-columns:1fr}.cal-days.day .cal-list{grid-template-columns:1fr}.cal-tools{width:100%}}
@media print{
  body[data-here="myday"] header,body[data-here="myday"] .zn-band,body[data-here="myday"] .suite-ver,body[data-here="myday"] main > :not(.cal-wrap){display:none !important}
  body[data-here="myday"]{background:#fff}
  body[data-here="myday"] main{width:100%;padding:0}
  .cal-tools{display:none !important}
  .cal-wrap *{color:#000 !important}
  .cal-item,.cal-days.week .cal-day{background:#fff !important;border-color:#999 !important;break-inside:avoid}
  .cal-days.week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cal-item a{text-decoration:none}
}

/* 19. the record: the progress bar, the Owner chip, the accept line, the Owner card (1.4.0) */
.own-chip{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--ink);text-decoration:none}
.own-chip:hover b{text-decoration:underline}
.accept-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;background:var(--gold-bg);border-left:4px solid var(--gold);
  border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:15px}
.accept-bar form{margin:0}
.prog{margin:0 0 16px}
.prog-t{margin:0 0 6px;font-size:15px}
.prog-bar{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.pg{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.pg-n{display:flex;align-items:center;justify-content:center;height:26px;border-radius:6px;font:600 14px var(--body);background:var(--line-2);color:var(--mu);
  font-variant-numeric:tabular-nums}
.pg-name{font-size:14px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.pg-done .pg-n{background:var(--ok);color:var(--ok-bg)}
.pg-skipped .pg-n{background:var(--card);border:1px dashed var(--mu);color:var(--mu)}
.pg-skipped .pg-name{text-decoration:line-through}
.pg-current .pg-n{background:var(--foil);color:var(--on-accent);box-shadow:0 0 0 2px var(--gold)}
.pg-current .pg-name{color:var(--ink);font-weight:600}
.pg-hold .pg-n{background:var(--info-bg);color:var(--info);box-shadow:0 0 0 2px var(--info)}
.pg-stopped .pg-n{background:var(--line);color:var(--ink)}
.prog-key{margin:6px 0 0;font-size:14px;color:var(--mu);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.prog-key .k{display:inline-block;width:14px;height:10px;border-radius:3px;background:var(--line-2);margin-right:2px;vertical-align:middle}
.prog-key .k-done{background:var(--ok)}.prog-key .k-current{background:var(--gold)}.prog-key .k-skipped{background:var(--card);border:1px dashed var(--mu)}
.own-card .facts{margin-bottom:8px}
.assign-box{margin-top:10px;border-top:1px solid var(--line-2);padding-top:10px}
.assign-box summary{cursor:pointer;font-weight:600;color:var(--gold-ink);font-size:15px}
.assign-box form{margin-top:10px}
.own-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.own-move{border:1px solid var(--line-2);border-radius:10px;padding:8px 14px 4px;margin:0 0 6px}
.own-move legend{font-weight:600;font-size:15px;padding:0 6px}
@media (max-width:640px){
  .pg-name{display:none}
  .own-grid{grid-template-columns:1fr}
  form.f .own-move label.inline{white-space:normal}
}

/* 20. People: the Filters panel (1.4.0) */
.people-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.people-main{min-width:0}
.pf{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);padding:12px 14px;position:sticky;top:84px}
.pf-h{font:600 15px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 6px}
.pf-toggle{display:none}
form.f.pf-body{margin:0}
form.f .pf-l{display:block;margin:8px 0 3px;font-size:15px;font-weight:600}
form.f.pf-body select{height:42px}
.pf-acts{display:grid;gap:8px;margin:12px 0 0}
.pf-acts .btn{justify-content:center}
.pf-on{margin:0 0 10px;font-size:15px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (max-width:900px){
  .people-wrap{grid-template-columns:1fr}
  .pf{position:static;padding:10px 12px}
  .pf-toggle{display:flex;width:100%;justify-content:center;gap:8px;height:46px;font-size:16px;-webkit-tap-highlight-color:transparent}   /* 1.4.1: the gold action button */
  .pf-toggle .pf-ic{width:20px;height:20px;flex:none}
  .pf-toggle .pf-dot{font-weight:600}
  .pf-toggle .pf-n{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;box-sizing:border-box;border-radius:13px;
    background:var(--ink);color:var(--card);font:600 15px var(--body)}
  .js .pf .pf-h{display:none}
  .js .pf:not(.open) .pf-body{display:none}
  .pf.open .pf-toggle{margin-bottom:6px}
}

/* 21. the drop-down calendar of a date box (1.4.0; cmc_app.js datePicker) */
.dp{position:relative;display:block;min-width:0}
form.f .dp input[type=text]{width:100%;padding-right:48px}
.dp-btn{position:absolute;right:4px;top:4px;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--gold-ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.dp-btn:hover{border-color:var(--gold)}
.dp-pop{position:absolute;left:0;top:calc(100% + 4px);z-index:30;width:296px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:0 16px 36px rgba(0,0,0,.2);font-weight:400}
.dp-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px}
.dp-m{font-size:16px}
.dp-nav{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:20px;cursor:pointer}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wd{text-align:center;font-size:13px;color:var(--mu);font-weight:600;padding:2px 0}
.dp-day{height:36px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font:500 15px var(--body);cursor:pointer}
.dp-day:hover{border-color:var(--gold)}
.dp-day.today{border-color:var(--line)}
.dp-day.on{background:var(--black);color:var(--gold-lt)}
.dp-sel{margin:8px 0 6px;font-size:14px;color:var(--mu)}
.dp-acts{display:flex;gap:8px}
.dp-acts .btn{flex:1;justify-content:center}

/* 16c. the compact Agreements list (1.4.0, owner 2026-10-20: one line each, opened by a click) */
.agr-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.agr-row{border:1px solid var(--line-2);border-radius:10px;background:var(--page)}
.agr-row summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:8px 12px;font-size:15px}
.agr-row[open] summary{border-bottom:1px solid var(--line-2)}
.ar-total{font-weight:600;font-variant-numeric:tabular-nums}
.ar-meta{font-size:14px}
.agr-body{padding:10px 12px}
details.agr-discl summary{cursor:pointer;font-size:15px;color:var(--gold-ink);padding:8px 0 4px}

/* 14b. Communication's headings and the folded history (1.4.0, owner 2026-10-20: larger headings for poor eyesight; newest 3 lines first) */
.comm-h3{font:600 23px/1.2 var(--display);margin:18px 0 10px;padding-bottom:4px;border-bottom:1px solid var(--line-2)}
.tl-more summary{cursor:pointer;font-weight:600;color:var(--gold-ink);font-size:16px;padding:10px 0 4px}
.tl-more .timeline{margin-top:6px}

/* 22. the header at 991 to 1180 px (1.4.0): the CMC's menu has six items (Dashboard first), so the items and gaps are a little tighter to keep
   ONE row at 1024 (no text is smaller); the shared rule is in zen_header.css section 5 */
@media (max-width:1180px) and (min-width:991px){
  body #zen-nav .zn-in{gap:10px}
  body #zen-nav .zn-item{padding:0 7px}
  body #zen-nav .zn-menu{gap:0}
  body #zen-nav .zn-right,body #zen-nav .zn-tools{gap:6px}
}

/* 19b. the Snapshot at the top of the record and the Notes card (1.4.0, owner 2026-10-20: everything that matters without scrolling) */
.snap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.4fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--radius);
  overflow:hidden;margin:0 0 14px}
.snap-cell{background:var(--card);padding:10px 14px;font-size:15px;min-width:0;overflow-wrap:anywhere}
.snap-k{display:block;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:2px}
.snap-pins{margin:0;padding-left:18px}
.snap-pins li{margin:0 0 2px}
.notes-card .note-form{border-bottom:1px solid var(--line-2);padding-bottom:12px;margin-bottom:10px}
.notes-card .note-form textarea{min-height:80px}
.notes-list li.pinned .tl-what{font-weight:600}
.notes-list small{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
@media (max-width:1100px){.snap{grid-template-columns:repeat(2,minmax(0,1fr))}.snap-notes{grid-column:1 / -1}}
@media (max-width:540px){.snap{grid-template-columns:1fr}}
.rec-body{grid-template-columns:minmax(0,1fr)}
form.f.note-form label.inline{white-space:normal}

/* 17b. Renewals next month and Performance (1.4.0, owner 2026-10-20) */
.dnums.perf5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dnum.soon b{color:var(--mu)}
table.dash-perf td.num,table.dash-perf th.num{text-align:right;font-variant-numeric:tabular-nums;width:110px}
table.dash-perf td.bars{width:30%}
table.dash-perf tr.tot td{font-weight:600;background:var(--page)}
@media (max-width:1100px){.dnums.perf5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.dnums.perf5{grid-template-columns:repeat(2,minmax(0,1fr))}table.dash-perf td.bars,table.dash-perf th.bars{display:none}.tablewrap table.dash-perf,.tablewrap table.dash-renew{min-width:0}}
/* 1.4.0, checker round 1: the Agreements count and the Performance table read clearly; "+ Task" steps aside on a small phone so My Day shows whole */
.agr-sum h2 .count{font:600 15px var(--body);color:var(--mu)}
table.dash-perf td.nowrap{white-space:nowrap}
.dash-perf + .dash-note,.tablewrap + .dash-note{margin-top:10px}
@media (max-width:440px){body #zen-nav .zn-task{display:none}}
/* 1.4.0, checker round 2: the Stages tabs and the Performance Dates button keep a gap from what follows */
.dash-sec .day-head{margin-bottom:8px}
.dash-sec .day-head + .dash-note{margin-top:4px}
@media (max-width:640px){.dash-per .dash-range{margin-bottom:8px}.dash-sec .day-head .tabs{margin-bottom:6px}}

/* 23. CMC Wave 2 (1.5.0): the frozen tops, the five-step Next box, Put on hold, Move to another step, Events, Messages, the deal page.
   The frozen top sits under the shared header (67 px on a computer, 103 px on a narrow tablet, 55 px on a phone, zen_header.css);
   cmc_app.js freeze() measures the frozen part and writes --freeze-h (and People's --pmtop-h), so the column headers stop under it. */
:root{--hdr-h:67px;--freeze-h:0px;--pmtop-h:0px}
@media (max-width:990px){:root{--hdr-h:103px}}
@media (max-width:700px){:root{--hdr-h:55px}}
.freeze-top{position:sticky;top:var(--hdr-h);z-index:30;background:var(--page)}
.list-page .head.freeze-top{margin-bottom:0;padding:8px 0 12px;box-shadow:0 1px 0 var(--line-2)}
.list-page .head.freeze-top + *{margin-top:12px}
@media (min-width:701px){
  .list-page .tablewrap.frz{max-height:none;overflow:visible}
  .list-page .tablewrap.frz th{top:calc(var(--hdr-h) + var(--freeze-h));z-index:20}
  .list-page .tablewrap.frz2 th{top:calc(var(--hdr-h) + var(--freeze-h) + var(--pmtop-h))}
  .pm-top{position:sticky;top:calc(var(--hdr-h) + var(--freeze-h));z-index:25;background:var(--page);padding-top:10px}
  .list-page .people-wrap .pf{top:calc(var(--hdr-h) + var(--freeze-h) + 10px);max-height:calc(100vh - var(--hdr-h) - var(--freeze-h) - 20px);overflow:auto}
}
@media (max-width:700px){.list-page .head.freeze-top{position:static;box-shadow:none}}
/* the record: name, number, deal, step and the button row stay put */
.rec-page .idstrip.freeze-top{margin-bottom:0;padding:8px 0 10px;box-shadow:0 1px 0 var(--line-2)}
.rec-page .idstrip.freeze-top + *{margin-top:14px}
.rec-page .recnav{top:calc(var(--hdr-h) + var(--freeze-h) + 12px)}
.rec-page .rec-body section,.rec-page #snapshot,.rec-page .prog{scroll-margin-top:calc(var(--hdr-h) + var(--freeze-h) + 12px)}
.id-step{color:var(--gold-ink);font-weight:600}
.id-more{display:none}
@media (max-width:700px){
  .rec-page .idstrip .crumb,.rec-page .idstrip .id-tags,.rec-page .idstrip .lights{display:none}
  .rec-page .idstrip{padding:6px 0 8px;gap:6px}
  .rec-page .idstrip h1{font-size:24px;margin:0 0 2px}
  .rec-page .id-contact{gap:6px}
  .rec-page .id-contact .btn.contact{height:38px;padding:0 10px;font-size:15px}
  .id-more{display:block;margin:0 0 10px}
  .id-more-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .pill.bad{background:var(--bad-bg);color:var(--bad)}
}
/* the five-step Next box (on the dark card) */
.wu-form{margin:0}
.wu-note{background:rgba(var(--bar-rgb),.08);border:1px solid rgba(var(--bar-rgb),.3);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.wu-note .fld-l{display:block;font-weight:600;font-size:15px;color:var(--on-dark);margin:0 0 4px}
.wu-note textarea{width:100%;box-sizing:border-box;min-height:62px;background:var(--card);color:var(--ink);border:1px solid rgba(var(--bar-rgb),.45);border-radius:8px;padding:8px 10px;font:inherit}
.wu-note .muted{color:var(--on-dark-2)}
.quick-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 4px}
.next .quick-row .btn.plain{height:36px;padding:0 12px}
.wu-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wu-item{background:rgba(var(--bar-rgb),.06);border:1px solid rgba(var(--bar-rgb),.25);border-radius:10px;padding:10px 12px;min-width:0}
.wu-item.late{border-color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
.wu-head{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wu-head .tick{width:18px;height:18px;border-radius:50%;border:2px solid var(--gold-lt);box-sizing:border-box;flex:none}
.wu-done .wu-head .tick{background:var(--ok);border-color:var(--ok)}
.wu-skipped .wu-head .tick,.wu-not_completed .wu-head .tick{border-style:dashed;border-color:var(--on-dark-2)}
.wu-done .wu-title,.wu-skipped .wu-title,.wu-not_completed .wu-title{text-decoration:line-through;color:var(--on-dark-2)}
.wu-title{font-weight:600;font-size:17px}
.wu-kind{font-size:14px;color:var(--gold-lt)}
.wu-meta,.wu-guide{margin:4px 0 0 26px;font-size:15px;color:var(--on-dark-2);max-width:72ch;overflow-wrap:anywhere}
.wu-meta b{color:var(--on-dark)}
.wu-msg{margin:8px 0 0 26px;background:var(--card);color:var(--ink);border-radius:8px;padding:8px 10px;font-size:15px;display:grid;gap:6px;overflow-wrap:anywhere}
.wu-msg .btn.plain{color:var(--gold-ink);border-color:var(--gold)}
.wu-body{white-space:pre-wrap}
.wu-blocked{color:var(--warn);font-weight:600;font-size:15px}
form.f .wu-time{margin:8px 0 0 26px;max-width:360px;grid-template-columns:1fr;display:grid}
.wu-item .out-btns{margin:6px 0 0 26px;align-items:center}
.third-warn{background:var(--warn-bg);color:var(--ink);border-radius:10px;padding:10px 14px;margin:0 0 12px;display:grid;gap:8px}
.third-warn .actions{display:flex;flex-wrap:wrap;gap:8px}
.next .third-warn .btn.plain{color:var(--ink);border-color:var(--warn)}
.hold-box{margin-top:10px}
.hold-box > summary{cursor:pointer;color:var(--gold-lt);font-size:15px;font-weight:600;padding:4px 0}
.hold-box form{background:var(--card);color:var(--ink);border-radius:10px;padding:12px 14px;margin-top:8px;max-width:760px}
.hold-box form.f .fld-l{color:var(--ink)}
.hold-box form.f .fld-s{color:var(--mu)}
.hold-days,.hold-follow{border:0;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.hold-days legend,.hold-follow legend{font-weight:600;font-size:15px;margin:0 0 4px;padding:0;width:100%}
.hold-why{color:var(--mu)}
form.f .hold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 12px}
/* the progress line and Move to another step */
.prog-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px}
.move-box > summary{cursor:pointer;font-weight:600;color:var(--gold-ink);font-size:15px;padding:2px 0;list-style:none}
.move-box > summary::-webkit-details-marker{display:none}
.move-box > summary::before{content:"\21C4  "}
.move-box[open]{flex-basis:100%}
.move-box form{background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;margin:6px 0 10px;max-width:700px}
form.f .move-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 12px;margin-top:8px}
/* the Campaign card: each step with its items */
.wu-check .st-items{list-style:none;margin:4px 0 0;padding:0;grid-column:2;display:grid;gap:2px}
.wu-check .st-items li{display:block;font-size:15px;padding:0 0 0 14px;position:relative;border-radius:0;background:none}
.wu-check .st-items li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--line)}
.wu-check .st-items li.si-done::before{background:var(--ok)}
.wu-check .st-items li.si-open::before{background:var(--gold)}
.wu-check .st-items li.si-done .si-t,.wu-check .st-items li.si-skipped .si-t,.wu-check .st-items li.si-moved .si-t{text-decoration:line-through;color:var(--mu)}
.si-m{color:var(--mu);font-size:14px}
/* Events, Messages, Send */
.ev-table td{vertical-align:top}
.msg-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.msg{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;background:var(--page);display:grid;gap:4px;overflow-wrap:anywhere}
.msg.ready{border-color:var(--gold)}
.msg-body{white-space:pre-wrap;font-size:15px}
.msg-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.send-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;margin:8px 0 4px}
.send-box{flex:1 1 300px;min-width:0}
.send-box > summary{list-style:none;width:max-content}
.send-box > summary::-webkit-details-marker{display:none}
.send-box form{margin-top:8px;display:grid;gap:8px;background:var(--page);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px}
.send-box label.wide{display:grid;gap:4px}
.send-box textarea,.send-box input[type=text]{width:100%;box-sizing:border-box}
.send-why{margin:6px 0 0}
.deal-card .facts{margin:0}
.plain-list{margin:0;padding-left:18px;display:grid;gap:4px}
@media (max-width:640px){
  .wu-meta,.wu-guide,.wu-msg,.wu-item .out-btns,form.f .wu-time{margin-left:0}
  .wu-item .out-btns .btn{flex:1 1 calc(50% - 8px)}
}
/* a closed box shows only its summary (no hidden form may stretch the page) */
details.hold-box:not([open]) > :not(summary),details.move-box:not([open]) > :not(summary),details.send-box:not([open]) > :not(summary),
details.stop-box:not([open]) > :not(summary){display:none}
@media (min-width:701px) and (max-width:1300px){
  .list-page .tablewrap.frz td,.list-page .tablewrap.frz th{padding:8px 8px}
  .list-page .tablewrap.frz .col-email{display:none}         /* the email shows on the record and at full width */
  .list-page .tablewrap.frz .col-last{display:none}          /* People: Last activity steps aside so no word breaks in the middle */
}
/* the "?" and the Chinese labels inside the dark Next box */
.next .zh{color:var(--on-dark-2)}
.next .btn.out-done .zh{color:inherit;opacity:.85}
.next .quick-row,.next .out-btns{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.next .quick-row .zhelp,.next .out-btns .zhelp{margin-left:2px}
/* People: the Filters panel never slides under the frozen head at the end of the list */
@media (min-width:701px){
  .list-page .people-wrap .pf{max-height:calc(100vh - var(--hdr-h) - var(--freeze-h) - 130px)}
}
/* a shorter frozen top: compact contact buttons on one row */
@media (max-width:1100px){
  .rec-page .idstrip h1{font-size:28px;margin:0 0 2px}
  .rec-page .id-contact .btn.contact{height:34px;padding:0 10px;font-size:14px;white-space:nowrap}
  .rec-page .lights li{padding:2px 8px}
}
@media (max-width:700px){
  .rec-page .idstrip h1{font-size:24px}
  .rec-page .ph-hide{display:none}
  .rec-page .id-contact{flex-wrap:nowrap}
}
@media (max-width:640px){
  .wu-item .out-btns .btn{flex:1 1 auto;white-space:nowrap}
  .btn .zh{white-space:nowrap}
}
/* the contact buttons: one normal word space where a phone hides words (no flex gap there) */
.rec-page .id-contact .btn.contact{gap:0}
.rec-page .id-contact .ph-hide{margin-right:.28em}
.rec-page .id-contact .ph-hide.ph-after{margin-right:0;margin-left:.28em}

/* 24. the partner API (1.6.0): Admin › API partners, a key, the call log, Campaign actions, the Dashboard's Adobe Connect requests */
.api-grid3,.api-grid2{display:grid;gap:0 16px}
.api-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.api-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.api-form{margin:0 0 18px}
.api-form h2{font-size:22px}
.api-intro{margin:6px 0 12px;max-width:80ch}
.api-refused{margin:0 0 6px}
.api-refused.warn{border-left:4px solid var(--warn)}
.api-big{font-size:22px;font-variant-numeric:tabular-nums}
.api-keys{max-height:none}
.api-keys td.num,.api-keys th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.api-keys tr.off td{color:var(--mu)}
.api-keys td:last-child{white-space:nowrap;text-align:right}
.api-limits{margin:4px 0 12px;border-top:1px solid var(--line-2);padding-top:10px}
.api-limits>summary{cursor:pointer;font-weight:600;min-height:32px;line-height:32px}
.api-limits[open]>summary{margin-bottom:8px}
.api-h-name{font-size:20px;color:var(--mu);font-weight:500}
.api-secret{border:2px solid var(--gold);margin:0 0 16px}
.api-secret h2{margin:0 0 6px;font-size:22px}
.api-secret-box{margin:12px 0}
.api-secret-box code{display:block;font-size:17px;padding:12px 14px;border-radius:10px;background:var(--page);border:1px solid var(--line);overflow-wrap:anywhere;word-break:break-all;user-select:all;white-space:normal;max-width:100%;box-sizing:border-box}
.api-state{margin:0 0 6px;display:grid;gap:12px}
.api-state h2{margin:0;font-size:22px}
.api-state .actions{margin:0}
.api-browser{display:grid;gap:6px;border-top:1px solid var(--line-2);padding-top:12px}   /* 1.12.0: the key's browser switch */
.api-browser-warn{margin:0;padding:10px 14px;border-radius:8px;border:1px solid var(--warn);background:var(--warn-bg);color:var(--warn);font-size:1rem;line-height:1.4}   /* 1.13.0 */
.api-gap{margin-top:2px}
.api-log{max-height:calc(100vh - 220px)}
.api-log td{overflow-wrap:anywhere}
.api-filter{margin:0 0 14px}
.api-filter-go{display:grid;grid-template-rows:24px 42px;gap:4px;justify-items:start}
.api-filter-go .btn{height:42px}
form.f.api-filter .fgrid>label.fld{grid-template-rows:24px 42px}
.api-log td.nowrap{white-space:nowrap}
form.f.api-form .fgrid+.fgrid{margin-top:8px}
details.ask{display:block}
details.ask>summary{list-style:none;width:max-content}
details.ask>summary::-webkit-details-marker{display:none}
details.ask[open]>summary{margin-bottom:8px}
.ask-box{border:1px solid var(--warn);background:var(--warn-bg);border-radius:10px;padding:12px 14px;display:grid;gap:10px;max-width:640px}
.ask-box .actions{margin:0}
.ask-box form{margin:0}
.dash-adobe{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dash-adobe li{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ad-who{min-width:0;flex:1 1 320px;overflow-wrap:anywhere}
.ad-line{font-size:15px}
.ad-err{color:var(--bad)}
.ad-acts{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.ad-acts form{margin:0}
/* ---------- 25. 1.7.0: API key permissions (cmc_api_key.html: the areas, the field grid, the copyable text, Deleted by the partner) ---------- */
.api-perm-tools{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-start;margin:0 0 14px}
.api-perm-tools>form{margin:0}
.api-perm-tools>p{flex:1 1 100%}
.api-tmpl{display:grid;gap:4px;width:100%;max-width:420px}
.api-tmpl select,.api-tmpl .zs{width:100%;min-width:240px;box-sizing:border-box}
.api-text{margin:0 0 14px;display:grid;gap:8px}
.api-text h2{margin:0;font-size:20px}
.api-textbox{width:100%;box-sizing:border-box;min-height:300px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.45;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--ink);white-space:pre;overflow:auto;resize:vertical}
.api-perm{margin:0 0 18px;display:grid;gap:18px}
.api-area{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px 6px;margin:0;min-width:0;display:grid;gap:8px}
.api-area>legend{font-family:inherit;font-weight:700;font-size:19px;padding:0 6px}
.api-ops{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.api-tick{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-weight:600;white-space:nowrap}
.api-tick input{width:20px;height:20px;margin:0}
.api-tick.off{font-weight:400}
.api-ticktools{display:inline-flex;gap:8px;margin-left:auto}
.api-ticktools[hidden]{display:none}
.api-fields-wrap{max-height:none}
.api-fields{width:100%;border-collapse:collapse;table-layout:fixed}
.tablewrap .api-fields tbody th{position:static}
.api-fields th,.api-fields td{padding:7px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle;text-align:left}
.api-fields thead th{font-size:14px}
.api-fields tbody th{font-weight:500;overflow-wrap:anywhere;text-transform:none;letter-spacing:normal;font-size:15px;color:var(--ink);background:none}
.api-fields tbody th .req{text-transform:none;letter-spacing:0}
.api-tick input,.api-fields input[type=radio]{accent-color:var(--gold-ink)}
.api-fields .c{text-align:center;width:96px}
.api-fields td.c[colspan]{width:auto}
.api-fields input[type=radio]{width:20px;height:20px;margin:0}
.api-fields .req{letter-spacing:.02em;font-size:13px}
.api-fn{font-size:13px;color:var(--mu);text-transform:none;letter-spacing:normal;max-width:100%;overflow-wrap:anywhere;word-break:break-all;white-space:normal;box-sizing:border-box}
.api-fl{font-weight:600}
@media (max-width:700px){
  .tablewrap table.api-fields{min-width:0}
  .api-fields .c{width:62px;padding:7px 4px}
  .api-fields thead th.c{font-size:13px;line-height:1.2}
  .api-fn{display:block;width:max-content}
  .api-ticktools{margin-left:0}
}
@media (max-width:1100px){.api-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .api-grid3,.api-grid2{grid-template-columns:1fr}
  .api-keys table{min-width:760px}
  .api-log table{min-width:720px}
  .ad-acts{width:100%}
  .head-row .actions{width:100%}
}

/* 26. Agent Tools (1.8.0, owner 2026-10-22): the menu item is "Agent Tools 工具" in the bar and "Tools" in the phone's ☰ panel; the Coming
   soon tiles read in full (not faded: they say what is coming); Admin › Agent Tools, one card per tool */
#zen-nav .tl-short{display:none}
#zen-nav .zn-panel .tl-long{display:none}
#zen-nav .zn-panel .tl-short{display:inline}
#zen-nav .zn-item .zh{margin-left:4px;color:inherit}
/* seven menu items on ONE row (measured, tests/cmc_shots_tools.py): 1181 to 1366 px takes section 22's tighter items and gaps (no text
   smaller); 991 to 1180 px (1024, a tablet on its side) also reads "Tools" in the bar and leaves out the person's name beside Sign out
   (it is on the Dashboard and in the bell); at 701 to 990 the menu has its own row, so the long name stays */
@media (max-width:1366px) and (min-width:1181px){
  body #zen-nav .zn-in{gap:10px}
  body #zen-nav .zn-item{padding:0 7px}
  body #zen-nav .zn-menu{gap:0}
  body #zen-nav .zn-right,body #zen-nav .zn-tools{gap:6px}
}
@media (max-width:1180px) and (min-width:701px){
  #zen-nav .zn-menu .tl-long{display:none}
  #zen-nav .zn-menu .tl-short{display:inline}
}
@media (max-width:1180px) and (min-width:991px){body #zen-nav .zn-who{display:none}}
/* the last few pixels: 1181 to 1300 the person's name beside Sign out is left out too; 991 to 1023 takes the menu-on-its-own-row layout of
   701 to 990 (zen_header.css section 5), with the person's name back; the bar reads "Tools" at every width from 701 to 1180 */
@media (max-width:1300px) and (min-width:1181px){body #zen-nav .zn-who{display:none}}
@media (max-width:1023px) and (min-width:991px){
  body #zen-nav .zn-in{flex-wrap:wrap; row-gap:4px; padding:8px 0 6px; gap:14px}
  body #zen-nav .zn-brand{height:44px}
  body #zen-nav .zn-title small{display:block}
  body #zen-nav .zn-menu{order:5; flex:1 1 100%; margin-left:-9px}
  body #zen-nav .zn-who{display:flex}
}
/* the phone's ☰ links: 44 px high for a thumb (design rules; the shared zen_header.css draws them 38) */
body #zen-nav .zn-panel a{height:44px}
/* checker round 1: the Agent Tools page reads at 16 px in the ink colour (7:1); "Coming soon" 15 px; the Chinese beside a tool's name is
   16 px on both pages (the tile and the settings card) */
#zen-hub.tools-hub .zn-hub-intro, #zen-hub.tools-hub .zn-tile-d{font-size:16px;color:var(--ink)}
#zen-hub.tools-hub .zn-tile-m{font-size:15px}
#zen-hub .zn-tile.tool-soon{cursor:default}
#zen-hub .zn-tile.tool-soon .zn-tile-m{color:var(--ink)}
#zen-hub.tools-hub .zn-tile-t .zh, .tools-set h2 .zh{margin-left:0;font-size:16px;color:var(--ink)}
.tools-set h2 .zh{margin-left:6px}
.tools-set .card p, .tools-head .sub, .kc-head .sub{font-size:16px;color:var(--ink)}
.tools-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tools-set .card p.tools-state{margin:10px 0 0}
@media (max-width:860px){.tools-set{grid-template-columns:1fr}}

/* 27. Concierge (1.9.0, owner 2026-10-22): the inbox (waiting first, gold), the chat page, Admin › Agent Tools › Concierge */
.tools-set .tools-wide{grid-column:1 / -1}
#set-concierge form.f .fgrid.tools-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,280px)) minmax(0,340px);gap:0 16px;margin:14px 0 4px}
@media (max-width:1100px){#set-concierge form.f .fgrid.tools-grid2{grid-template-columns:repeat(2,minmax(0,280px))}}
@media (max-width:640px){#set-concierge form.f .fgrid.tools-grid2{grid-template-columns:minmax(0,1fr)}}
#set-concierge form.f .fgrid input[type=text]{height:44px;font-size:16px}
.tools-wides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
.tools-wides textarea{width:100%;min-height:96px;box-sizing:border-box;resize:vertical;font-size:16px;line-height:1.45}
.tools-wides .fld-s{font-size:15px;line-height:20px}
#set-concierge form.f select,#set-concierge form.f textarea{font-size:16px}
#set-concierge form.f .fld-s{font-size:15px;line-height:20px}
#set-concierge form.f .fgrid>label.fld{grid-template-rows:24px 44px auto}
#set-concierge form.f .fgrid select,#set-concierge form.f .fgrid .zs-btn,#set-concierge form.f .fgrid [class^="zs"] button{height:44px;min-height:44px}
.kc-row .pill,.kc-state .pill{font-size:15px}
/* round 3: 44 px buttons, tabs and the On/Off box on the Concierge pages.(the CMC-wide .btn stays 42 px for now) */
.kc-head .btn,.kc-chat .btn,.kc-acts .btn,#set-concierge .btn{height:44px;min-height:44px}
#kc-inbox .tabs a{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
@media (max-width:1100px){.tools-wides{grid-template-columns:1fr}}
.kc-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.kc-row a{display:flex;flex-direction:column;gap:4px;padding:14px 18px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;min-height:44px}
.kc-row a:hover,.kc-row a:focus-visible{border-color:var(--gold)}
.kc-row.kc-wait a{border-left:4px solid var(--gold)}
.kc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:17px}
.kc-no{color:var(--mu);font-size:15px;font-weight:500}
.kc-site{display:inline-block;max-width:min(36ch,50vw);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:bottom;font-size:16px;color:var(--ink)}
.kc-sep{color:var(--ink);font-size:16px}
h1 .kc-no{font-size:18px;margin-left:8px}
.kc-last{font-size:16px;overflow-wrap:anywhere}
.kc-meta{font-size:15px;color:var(--mu)}
.kc-state{margin:0 0 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kc-chat{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);padding:16px 18px;max-width:900px}
.kc-lines{list-style:none;margin:0;padding:0 4px 0 0;display:flex;flex-direction:column;gap:10px;max-height:min(56vh,560px);overflow:auto}
.kc-line{max-width:80%;padding:9px 13px;border-radius:12px;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.kc-visitor{align-self:flex-start;background:var(--page);border:1px solid var(--line-2)}
.kc-staff{align-self:flex-end;background:var(--gold-bg);border:1px solid var(--line)}
.kc-system{align-self:center;max-width:100%;color:var(--mu);font-size:15px;padding:2px 6px;text-align:center}
.kc-who{display:block;font-size:15px;font-weight:600;color:var(--gold-ink);white-space:normal}
.kc-at{font-weight:400;color:var(--mu);margin-left:4px}
.kc-reply{margin:14px 0 0;border-top:1px solid var(--line-2);padding-top:12px}
.kc-reply .kc-box{display:flex;flex-direction:column;gap:4px}
.kc-reply textarea{min-height:80px}
.kc-reply .actions{display:flex;align-items:center;gap:12px;margin-top:8px}
.kc-err{color:var(--bad)}
.kc-acts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.kc-acts form{margin:0}
@media (max-width:700px){.kc-line{max-width:92%}.kc-chat{padding:12px}.kc-acts .btn{width:100%;justify-content:center}.kc-acts form{flex:1 1 100%}}

/* 28. Concierge alerts (1.10.0, owner 2026-10-23): who is on duty beside the tabs, my Sign in and switches, the bell's shake, the hours */
.kc-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin:0 0 6px}
.kc-bar .tabs{margin:0}
.kc-duty{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;justify-content:flex-end}
.kc-onduty{font-size:16px;color:var(--ink)}
.kc-agent.kc-me{font-weight:600}
.kc-none{color:var(--ink)}
.kc-mine{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kc-mine form{margin:0}
.kc-mine .btn{height:44px;min-height:44px}
.kc-tog[aria-pressed="false"]{border-style:dashed}
.kc-offnote{margin:8px 0 0;font-size:16px;color:var(--ink)}
@media (max-width:700px){.kc-bar{flex-direction:column;align-items:stretch}.kc-duty{justify-content:flex-start}.kc-mine form{flex:1 1 auto}.kc-mine .btn{width:100%;justify-content:center}}
@keyframes kc-shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(12deg)}45%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
#zen-nav .zn-bell.kc-shake > summary{animation:kc-shake .9s ease-in-out 1;transform-origin:50% 10%}
@media (prefers-reduced-motion:reduce){#zen-nav .zn-bell.kc-shake > summary{animation:none;outline:3px solid var(--gold);outline-offset:2px}}
#set-concierge .kc-hours{border:1px solid var(--line-2);border-radius:var(--radius);margin:4px 0 14px;padding:10px 14px 12px;max-width:620px}
#set-concierge .kc-hours legend{padding:0 6px;font-size:15px;font-weight:600}
#set-concierge .kc-hrow{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);gap:4px 12px;align-items:end;margin:8px 0 0}
#set-concierge .kc-day{font-size:16px;font-weight:600;line-height:44px}
#set-concierge .kc-t{display:flex;flex-direction:column;gap:2px;margin:0}
#set-concierge .kc-tl{font-size:15px;line-height:20px}
#set-concierge .kc-t input{height:44px;font-size:16px;width:100%;box-sizing:border-box;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
@media (max-width:480px){#set-concierge .kc-hrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#set-concierge .kc-day{grid-column:1 / -1;line-height:24px}}

/* 29. Concierge pictures (1.10.0): the header picture in Admin and my chat photo in the inbox, a round preview with the gold ring */
.kc-pic{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line-2)}
.kc-mypic{border-top:1px solid var(--line-2);margin-top:22px}
.kc-pic-h{margin:0 0 8px;font-size:20px}
.kc-pic-row{display:flex;gap:14px;align-items:center;margin:0 0 10px;font-size:16px;color:var(--ink)}
.kc-face{flex:none;width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;background:var(--page)}
.kc-pic-form{margin:0 0 8px}
.kc-pic input[type=file]{font-size:16px;min-height:44px;padding:8px 0;width:100%;max-width:100%;box-sizing:border-box}
.kc-pic .btn{height:44px;min-height:44px}
.kc-pic form{margin:0 0 8px}

/* 30. the Header picture beside Button text (1.11.1, owner 2026-10-23): the live preview in the gold ring, the file box, the default face */
#set-concierge .kc-picfld{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0}
#set-concierge .kc-picfld > label.fld-l{display:block;height:24px;line-height:24px;margin:0;padding:0;font-weight:600;font-size:15px;white-space:nowrap}
#set-concierge .kc-picrow{display:flex;align-items:center;gap:10px;min-width:0}
#set-concierge .kc-face-sm{width:44px;height:44px;flex:none}
#set-concierge .kc-picrow input[type=file]{flex:1 1 auto;min-width:0;max-width:100%;height:44px;line-height:44px;box-sizing:border-box;font-size:16px;padding:0}
#set-concierge .kc-picrow input[type=file]::file-selector-button{height:44px;margin:0 10px 0 0;padding:0 16px;border:1px solid var(--gold);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
#set-concierge .kc-chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;color:var(--ink);cursor:pointer}
#set-concierge .kc-chk input{width:20px;height:20px;margin:0}
#set-concierge .kc-picfld .fld-s{font-size:15px;line-height:20px}

/* 31. Concierge: the Phone box when the visitor's phone fails the check (URGENT 2026-10-23) */
.kc-fixphone{margin:14px 0 0;max-width:900px;border-left:4px solid var(--gold)}
.kc-fixphone p{font-size:16px;color:var(--ink)}
form.f.kc-fixphone .fgrid.kc-fixgrid{display:grid;grid-template-columns:minmax(0,320px);margin:12px 0 4px}
form.f.kc-fixphone .fgrid>label.fld{grid-template-rows:24px 44px auto}
form.f.kc-fixphone .fgrid input[type=text]{height:44px;font-size:16px}
.kc-fixphone .btn{height:44px;min-height:44px}
.kc-fixphone .actions{display:flex;gap:10px;flex-wrap:wrap}

/* 32. the Sign in to Concierge dialog (owner 2026-10-23): Take this chat and Reply need the person on duty */
.kc-dlg{max-width:min(520px,calc(100vw - 32px));width:100%;border:1px solid var(--line-2);border-top:4px solid var(--gold);border-radius:var(--radius);
  padding:20px 22px;background:var(--card);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.3)}
.kc-dlg::backdrop{background:rgba(20,17,13,.55)}
.kc-dlg-top{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.kc-dlg-top h2{margin:0;font-size:22px;line-height:1.3}
.kc-dlg-top h2 .zh{display:block;font-size:16px;margin:2px 0 0}
.kc-dlg-list{margin:0 0 16px;padding-left:20px;font-size:16px;line-height:1.5}
.kc-dlg-list li{margin:0 0 6px}
.kc-dlg .actions{display:flex;gap:10px;flex-wrap:wrap}
.kc-dlg .btn{height:44px;min-height:44px}
.kc-needsign{margin:10px 0 0;font-size:16px;color:var(--ink)}
.linkbtn{display:inline;min-height:44px;padding:10px 0;margin:0;border:0;background:none;color:var(--gold-ink);font:inherit;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}

/* 33. Concierge New message, Chat history, the person's Chats (owner 2026-10-23) */
.kc-row.kc-new a{border-left:6px solid var(--gold);background:var(--gold-bg)}
.kc-newbadge{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:var(--ink);color:var(--card);
  font-size:15px;font-weight:700}
.kc-newbadge .kc-count{display:inline-block;min-width:22px;padding:0 6px;border-radius:999px;background:var(--gold-bg);color:var(--ink);text-align:center}
.kc-row .pill.kc-since{color:var(--ink)}
.kc-row.kc-new .kc-last{font-weight:600}
form.f.kc-search{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:12px 0 4px}
form.f.kc-search .fld{display:flex;flex-direction:column;gap:4px;min-width:min(420px,100%);flex:0 1 420px}
form.f.kc-search .fld > .fld-l{line-height:24px}
form.f.kc-search .fld > input[type=text]{flex:none;height:44px;font-size:16px}
form.f.kc-search .actions{margin-top:28px;display:flex;gap:10px}
form.f.kc-search .fld-s{font-size:15px}
form.f.kc-search .btn{height:44px;min-height:44px}
.kc-plist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kc-plist li{font-size:16px;line-height:1.45}
.kc-plist li > a{display:inline-flex;align-items:center;min-height:44px}
.kc-plist .muted{font-size:15px}
.kc-pfirst{display:block;overflow-wrap:anywhere}
.kc-pmore summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}

/* 34. the Ways in editor on the campaign page (owner 2026-10-23) */
.wi-table td{vertical-align:middle}
.wi-rename{display:flex;gap:8px;align-items:center;margin:0;min-width:260px}
.wi-rename input{flex:1 1 auto;min-width:0;height:44px;font-size:16px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.wi-table form{margin:0}
.wi-table .btn{height:44px;min-height:44px;white-space:nowrap}
.wi-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wi-add{margin:16px 0 0}
.wi-add h3{font-size:20px;margin:0 0 10px}
form.f .fgrid.wi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px}
@media (max-width:1100px){form.f .fgrid.wi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){form.f .fgrid.wi-grid{grid-template-columns:minmax(0,1fr)}}
.wi-add .btn{height:44px;min-height:44px}
form.f.wi-add .fgrid>label.fld{grid-template-rows:24px 44px auto}
form.f.wi-add .fgrid input[type=text],form.f.wi-add .fgrid select{height:44px;font-size:16px}
.wi-sub{max-width:900px;font-size:16px;color:var(--ink)}
.wi-add-h{font-size:22px;margin:0 0 10px}
.wi-all td{font-size:16px}
/* the Ways in tables as stacked cards on a phone (checker: no sideways scroll), helper text 15 px */
.wi-add .fld-s{font-size:15px}
@media (max-width:640px){
  .tablewrap .wi-table{min-width:0}
  .wi-table thead{display:none}
  .wi-table,.wi-table tbody,.wi-table tr,.wi-table td{display:block;width:100%}
  .wi-table tr{border:1px solid var(--line-2);border-radius:var(--radius);padding:10px 12px;margin:0 0 12px;background:var(--card)}
  .wi-table td{border:0;padding:4px 0}
  .wi-table td[data-l]::before{content:attr(data-l);display:block;font-size:15px;font-weight:600;color:var(--ink)}
  .wi-rename{min-width:0}
}

/* 35. 2026-10-24 Sign in as (owner request 2026-10-24; cmc_act_banner.html): the bright amber band under the header on every page
   (never red: nothing is wrong), 16 px text, a 44 px Return button; the same look as Zen HQ's band. */
.act-band{background:#FFC93C;color:#1E1A12;border-bottom:3px solid #B07A00;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.act-in{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.act-say{margin:0;font-size:16px;line-height:22px;flex:1 1 320px;min-width:0}
.act-say b{font-weight:700}
.act-meta{font-size:15px;color:#3A2E14;overflow-wrap:anywhere}
.act-eye{display:inline-block;margin-right:8px;font-size:15px}
.act-ret{margin:0;flex:0 0 auto}
.act-ret-btn{height:44px;padding:0 18px;border-radius:10px;border:2px solid #1E1A12;background:#1E1A12;color:#FFE7A3;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.act-ret-btn:hover,.act-ret-btn:focus{background:#000;color:#fff;outline:2px solid #1E1A12;outline-offset:2px}
@media (max-width:540px){.act-ret{width:100%}.act-ret-btn{width:100%}}
/* 1.14.0: the key page's Webhook section */
.api-wh-url{grid-column:1 / -1}
.api-wh-secret{display:flex;align-items:center;height:42px;margin:4px 0;box-sizing:border-box}
.api-wh-kinds{border:0;margin:6px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.api-wh-kinds legend{padding:0;margin:0 0 6px}
.api-wh-kind{display:inline-flex;align-items:flex-start;gap:8px;font-weight:400;max-width:100%}
.api-wh-kind input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0}
.api-wh-kind span{flex:1 1 auto;min-width:0}
@media (max-width:900px){.api-wh-url{grid-column:auto}}
/* 1.15.0: the record's Files (Documents) */
.files-box{margin:8px 0 12px}
.files-h{margin:6px 0 4px;font-size:16px}
.files-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.files-inline{display:inline-block;margin:0}
.files-add{margin:6px 0 0}
.files-form{margin:8px 0 0}
.files-share{display:flex;align-items:flex-start;gap:8px;margin:4px 0 10px;font-weight:400}
.files-share input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0}
/* 1.16.0: the closing flow */
.pr-acts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px}
.pr-acts form{margin:0}
.pr-links code{white-space:normal;overflow-wrap:anywhere}
.tablewrap.pr-valwrap{max-height:none}
.pr-links p+p{margin-top:6px}
.pr-vals th{text-align:left;width:34%;font-weight:600}
.pr-preview{overflow-x:auto}
.pr-vers{padding-left:18px}
.inv-body{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;margin:12px 0 0}
.dash-going{padding-left:18px}

/* 1.17.0: the record's Details box: Edit details beside the heading, the form above the facts */
.dt-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px}
.dt-head h2{margin:0}
.dt-form{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dt-form .dt-note{margin-top:8px}
.dt-card .facts .btn.small{min-height:42px}