/*
  Title:      Zen CMC styles
  File:       app/static/cmc_style.css
  Version:    1.0.0
  Date:       2026-10-16
  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, 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
  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.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:.85em;margin-left:6px;font-weight:500}
.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:11px/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 10px;font-size:13px;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:14.5px;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 */
.hb{position:relative;overflow:hidden;background:var(--black);color:var(--on-dark);min-height:460px;margin:-18px calc(50% - 50vw) 0}
/* the artwork is sized by the banner's height (the whole scene shows, the crane and the moon included) and its sides melt into the
   header colour, so it never looks cut on a wide screen */
.hb-art{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:calc(100% + 20px);width:auto;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.hb-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--black) 94%,transparent) 0,
  color-mix(in srgb,var(--black) 64%,transparent) 36%,color-mix(in srgb,var(--black) 0%,transparent) 58%,color-mix(in srgb,var(--black) 40%,transparent) 100%)}
.hb-in{position:relative;z-index:2;width:min(1440px,100% - 40px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:24px;align-items:center;min-height:460px;padding:30px 0}
.hb-words{max-width:min(500px,calc(42vw - 40px))}
.hb-eb{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);opacity:.9;margin:0 0 12px}
.hb-date{display:block;margin-top:5px}
.hb h1{font:500 clamp(36px,4.4vw,56px)/1.05 var(--display);color:var(--on-dark);margin:0 0 6px}
.hb-zh{margin:0 0 12px}
.hb-zh .zh{margin:0;font:600 clamp(18px,2vw,25px) var(--zh);letter-spacing:.18em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-lede{max-width:46ch;color:var(--on-dark-2);margin:0 0 16px;font-size:17px}
.hb-lede em{font-style:italic;font-family:var(--display);font-size:1.18em;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-sum{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.hb-pic{justify-self:end;margin:0 4% 0 0;text-align:center}
.hb-pic img,.hb-pic svg.pic{display:block;width:min(240px,100%);height:auto;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.hb-sig{font:400 32px "Pinyon Script",cursive;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 0}
.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:32px;padding:0 12px;font-size:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
.small{font-size:14px}
.mt{margin-top:18px}
.nowrap{white-space:nowrap}
.req{color:var(--gold-ink);font-weight:700;font-size:12px;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:14px;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:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mu)}
.tablewrap tr.off td{color:var(--mu)}
code{font-family:ui-monospace,monospace;font-size:13px;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:7px 14px;border-radius:9px;text-decoration:none;color:var(--ink);font-weight:500;font-size:14.5px}
.tabs a:hover{background:var(--page)}
.tabs a[aria-current="page"]{background:var(--black);color:var(--gold-lt)}
.crumb{margin:0;font-size:14px;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 lists */
.hb-nums{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.hb-nums a{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:10px;border:1px solid rgba(var(--bar-rgb),.35);
  color:var(--on-dark-2);text-decoration:none;font-size:14px}
.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:wrap;margin:0}
.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:13px;margin-top:2px}
.chan-list .n{position:absolute;right:14px;top:12px;font-size:13px;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:13px;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:13px}

/* 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:10.5px;letter-spacing:.22em;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:12px;letter-spacing:.2em;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:12px;letter-spacing:.22em;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:2px 0 18px;font-size:14px}
.door-card label{display:grid;gap:5px;font-weight:600;font-size:14px;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:14px;margin:0 0 12px}
.door-card .ok{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 12px}
.door-card .forgot{text-align:center;font-size:14px;margin:12px 0 0}
.door-card .fine{text-align:center;font-size:12px;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 */
.hb-pic svg.pic,.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:12.5px;color:var(--on-dark-2);padding:14px;border-top:1px solid rgba(var(--bar-rgb),.18)}

/* 11. tablets and phones */
@media (max-width:1100px){
  .ooda-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .door-grid{grid-template-columns:minmax(0,1fr) 380px}
  .door-right{display:none}
}
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-in{grid-template-columns:1fr;align-items:start;padding:26px 0 230px}
  .hb-words{max-width:none}
  .hb-pic{display:none}
  .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 p{display:none}
  .door-card{width:min(420px,100%);justify-self:center}
}
@media (max-width:700px){
  main{width:calc(100% - 24px);padding-top:12px}
  .head h1{font-size:30px}
  .tiles,.ooda-steps,.home-grid{grid-template-columns:1fr}
  .tiles.big .tile{min-height:0}
  .hb{min-height:0;margin-top:-12px}
  .hb-in{width:calc(100% - 28px);min-height:0;padding:20px 0 270px}
  .hb-fade{background:linear-gradient(180deg,color-mix(in srgb,var(--black) 96%,transparent) 0,color-mix(in srgb,var(--black) 88%,transparent) 48%,color-mix(in srgb,var(--black) 0%,transparent) 72%)}
  .hb-art{height:auto;width:780px;-webkit-mask-image:none;mask-image:none}
  .hb h1{font-size:34px}
  .hb-lede{font-size:16px}
  .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:22px 42px 36px;gap:4px;min-width:0;margin:0}
.fgrid .fld-l{display:block;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:14px}
.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:13px;line-height:18px;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:14px}
.req{font-size:inherit}
@media (max-width:540px){form.f .fgrid>label.fld{grid-template-rows:22px 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:12.5px;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 13px 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:14px;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:13px;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:12px;letter-spacing:.18em;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:14px}
.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:14px}
.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:14px;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:13px}
.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:150px minmax(0,1fr) auto;gap:10px;font-size:14px;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)}
.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:14px}
  .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}
}