/*
  Title:      Zen Library styles
  File:       app/static/lib_style.css
  Version:    1.0.1
  Date:       2026-10-21
  Sections:   1 to 12 from the CMC's cmc_style.css 1.5.0 (tokens with China Gold fallbacks, base, page head, cards and pills, tiles,
              buttons, forms and tables, help and This app, the sign-in door and the splash, tablets and phones, the even form grid),
              without the CMC's My Day banner; then L1 the Library: the menu's Chinese line, dialogs, shelf cards, row actions, the table
              of rows and the hidden value, the history, the access grid and ticks, the tree, the audit filters, the form grid columns,
              phones
  Depends on: Google Fonts Cormorant Garamond, Figtree, Pinyon Script, Noto Sans SC, Noto Serif SC (lib_base.html, lib_login.html); theme
              variables from /theme.css (lib_themes.css)
  Used by:    every page
  Purpose:    The Zen look, the same sizes as the other apps (Zen-App-Design-Rules.md 1.0): nothing functional under 13 px, body text
              15 px or more, gold only for actions, the "* (required)" big, bold and gold on the label line, helper words under the box,
              long lists scroll inside their own box with the headings in view. 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).
  Revisions:  1.0.1 2026-10-21 Claude Code: the separate checker's findings: the table of rows (one Open per row, the first column frozen,
              one-line headings, no pinned actions; a card per row on a phone); the suite label in the page flow (it sat over the
              work); the splash words on a quiet backing; the Admin / Help row's current button without the gold fill; the gaps
              under Tick everything and the audit filters.
              1.0.0 2026-10-21 Claude Code: first version (sections 1 to 12 copied from cmc_style.css 1.5.0).
*/

/* 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}

/* 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}}

/* 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 */
@media (max-width:1100px){
  .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{grid-template-columns:1fr}
  .tiles.big .tile{min-height:0}
  .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}
/* L1. the Library */
.hide{display:none}
body{font-size:16px}
.zn-item .zh{margin-left:5px;font-size:14px;color:inherit;opacity:.8}
.zn-panel .zh{margin-left:5px;font-size:14px;color:inherit}
form.f .fld.bad input,form.f .fld.bad select,form.f label.wide.bad textarea{border-color:var(--bad);border-width:2px}
.fld.bad .fld-s,label.wide.bad .fld-s{color:var(--bad)}
label.wide .fld-s{font-size:14px;line-height:20px;font-weight:500}
form.f label.inline{font-size:15px}
.head-row .actions{justify-content:flex-end}
.head h1 .pill{vertical-align:middle;font-family:var(--body)}

/* the form grid: fixed columns (1, 2, 3 or 4), fewer on smaller screens */
form.f .fgrid{display:grid;column-gap:16px}
form.f .fgrid1{grid-template-columns:minmax(0,1fr)}
form.f .fgrid2{grid-template-columns:repeat(2,minmax(0,1fr))}
form.f .fgrid3{grid-template-columns:repeat(3,minmax(0,1fr))}
form.f .fgrid4{grid-template-columns:repeat(4,minmax(0,1fr))}
form.f input[type=file]{font:inherit;font-size:15px;height:42px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%;min-width:0}
form.f textarea{width:100%}
.fld-btns{display:grid;grid-template-rows:24px 42px 40px;gap:4px;min-width:0}
.fld-btns .fld-l{visibility:hidden}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:none}
.filter-bar{margin:0 0 6px}

/* dialogs (big entry forms open in a dialog from a gold button) */
dialog.dlg{border:0;border-radius:16px;padding:22px 26px 18px;background:var(--card);color:var(--ink);width:min(600px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.45);position:fixed}
dialog.dlg::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--foil)}
dialog.dlg-wide{width:min(1080px,calc(100vw - 32px))}
dialog.dlg-small{width:min(480px,calc(100vw - 32px))}
dialog.dlg::backdrop{background:color-mix(in srgb,var(--black) 62%,transparent)}
dialog.dlg h2{font-size:28px;margin:0 0 6px}
dialog.dlg form.f > p.muted{margin:0 0 14px}
dialog.dlg .fgrid{margin-top:12px}

/* shelves */
.shelf-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.shelf-card{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:18px 20px 16px 22px;
  text-decoration:none;color:var(--ink);position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.shelf-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--foil)}
.shelf-card:hover{border-color:var(--gold)}
.shelf-t{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shelf-t b{font:600 24px/1.15 var(--display)}
.shelf-d{color:var(--mu);font-size:15px}
.shelf-m{color:var(--mu);font-size:15px;margin-top:auto}

/* tables of the Library: row actions, file names, the rows of a data table */
.row-acts{white-space:nowrap;text-align:right}
.row-acts form{display:inline}
.row-acts .btn + .btn,.row-acts .btn + form,.row-acts form + .btn{margin-left:6px}
td.fname{overflow-wrap:anywhere;min-width:180px}
.tablewrap td a{font-weight:500}
.wide-table{max-height:calc(100vh - 250px)}
table.rows{min-width:1500px}
table.rows td{font-size:15px}
table.rows td.c-textarea{max-width:320px;min-width:220px}
table.rows td.c-text,table.rows td.c-email{min-width:140px}
table.rows th:first-child,table.rows td:first-child{position:sticky;left:0;background:var(--card);z-index:1;min-width:200px;box-shadow:inset -1px 0 0 var(--line-2)}
table.rows th:first-child{background:var(--page);z-index:3}
.th-note{display:block;font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--mu);margin-top:2px;max-width:260px;white-space:normal}
.hidden-val{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hv{font-family:ui-monospace,monospace;font-size:15px;letter-spacing:.06em}
.hv.shown{background:var(--gold-bg);color:var(--ink);border-radius:6px;padding:2px 8px}

/* the history */
.versions{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:1100px}
.ver-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px}
.ver-h b{font:600 22px var(--display)}
.ver-ch{font-weight:600;color:var(--gold-ink);margin:0 0 8px}
.ver-vals{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 18px;margin:0 0 10px}
.ver-vals dt{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);font-weight:600}
.ver-vals dd{margin:2px 0 0;overflow-wrap:anywhere}

/* the access grid, the ticks, the tree */
.grid-wrap{max-height:calc(100vh - 280px)}
table.grid th,table.grid td{white-space:nowrap}
table.grid thead th{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
table.grid .g-name{position:sticky;left:0;background:var(--card);z-index:1;min-width:200px;box-shadow:inset -1px 0 0 var(--line-2)}
table.grid thead .g-name{background:var(--page);z-index:3}
table.grid th.g-name small{display:block;color:var(--mu);font-weight:500;font-size:14px}
table.grid select{height:38px;min-width:130px;padding:0 8px}
form.f table.grid select{height:38px}
.lv-word{font-weight:600}
.lv-word.lv-owner{color:var(--gold-ink)}
.lv-word.lv-none{color:var(--mu);font-weight:500}
.ticks{display:inline-flex;gap:8px 18px;flex-wrap:wrap;align-items:center}
form.f label.tick{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:600;font-size:15px;white-space:nowrap;cursor:pointer}
.tick input{width:20px;height:20px;accent-color:var(--gold)}
.tick .zh{margin-left:0}
.tree{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:1100px}
.tree-h{display:flex;justify-content:space-between;align-items:center;gap:10px 18px;flex-wrap:wrap}
.tree-h > a b{font:600 22px var(--display)}
.tree-items{list-style:none;margin:10px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line-2);display:grid;gap:4px}
.tree-items li{font-size:15px;overflow-wrap:anywhere}
.tree-items .pill{font-size:13px;padding:1px 8px;margin-right:4px}
table.people td{vertical-align:middle}
.audit-wrap{max-height:calc(100vh - 330px)}

/* the front page: the splash fills the screen under the header */
body.front main{min-height:calc(100vh - 64px)}

@media (max-width:1100px){
  form.f .fgrid3,form.f .fgrid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  form.f .fgrid2,form.f .fgrid3,form.f .fgrid4{grid-template-columns:minmax(0,1fr)}
  dialog.dlg{padding:20px 16px 14px}
  dialog.dlg h2{font-size:24px}
  .head-row .actions{justify-content:flex-start}
  .shelf-list{grid-template-columns:1fr}
  .row-acts{white-space:normal;text-align:left}
  .row-acts .btn{margin:2px 0}
  .fld-btns .fld-l{display:none}
  .fld-btns{grid-template-rows:42px}
  .tree-h{align-items:flex-start}
}

/* the Chinese line and "* (required)" inside a one-line label never make the label taller than its 24 px row */
.fgrid .fld-l .zh,.fgrid .fld-l .req,label.wide .fld-l .zh{line-height:1;vertical-align:baseline}
/* the screen-reader labels inside a scrolling table stay inside its box (else the page scrolls sideways on a phone) */
.tablewrap{position:relative}
/* the grid's names in plain case; the counts beside a heading spaced off; the row actions of a wide table stay in view at the right */
table.grid th.g-name{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.group-h .count{margin-left:12px}
@media (max-width:700px){
  .zn-menu .zn-item .zh{display:none}      /* phones: the bar keeps the English word; the Chinese line shows in the ☰ panel and on the page */
}
/* phones: the app's long name ("Zentelle Library") wraps and the splash grid never grows past the screen (it was cut off on the left) */
@media (max-width:760px){
  .door-grid{grid-template-columns:minmax(0,1fr)}
  .door-grid:not(.signed) h1.door-name,.door-left h1.door-name{white-space:normal;font-size:44px;overflow-wrap:anywhere}
}

/* 1.0.1 (checker 2026-10-21) */
/* the table of rows: headings on one line, every column scrolls inside the box, Entity Name frozen, one Open per row */
table.rows{min-width:0;width:max-content;max-width:none}
.rows-wrap table.rows{width:max-content;min-width:100%}
table.rows th{white-space:nowrap}
table.rows td{min-width:120px;max-width:280px}
table.rows td.c-textarea{min-width:240px;max-width:360px}
table.rows td.c-ein{min-width:0;white-space:nowrap}
table.rows th:first-child,table.rows td:first-child{min-width:240px;max-width:320px}
.first-cell{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ent-name{font-weight:600;color:var(--ink)}
a.ent-name:hover{color:var(--gold-ink)}
.tbl-note{margin:0 0 8px;font-size:14px}
.row-cards{display:none;list-style:none;margin:0;padding:0;gap:10px}
.rc-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rc-m{color:var(--mu);font-size:15px;margin-top:4px}
.row-card{padding:12px 14px}
@media (max-width:700px){
  .rows-wrap{display:none}
  .row-cards{display:grid}
}
/* the suite label sits in the page flow at the bottom, never over the work */
.suite-ver{position:static;text-align:right;padding:4px 20px 12px;opacity:.7;pointer-events:auto}
body.front .suite-ver{background:var(--black)}
/* the splash words on a quiet backing from the theme, kept in the left part of the stage */
.door-left{background:color-mix(in srgb,var(--black) 78%,transparent);border-radius:16px;padding:22px 26px;max-width:600px;position:relative}
@media (min-width:1101px){.door-grid.signed{grid-template-columns:minmax(0,600px) minmax(0,1fr)}}
.door-grid.signed .door-left{justify-self:start}
@media (max-width:760px){.door-left{padding:16px 16px}}
/* the Admin / Help row: the current one has the subtle mark of the top menu, not the gold fill (gold is for actions) */
body #zen-secs .zn-sec[aria-current="page"]{background:var(--card);color:var(--ink);border-color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
/* gaps: the buttons above a list, the audit filters */
form.f > p.actions + .tree,form.f > p.actions + .tablewrap{margin-top:14px}
form.f > p.actions:first-of-type{margin-bottom:0}
.filter-bar .fgrid{margin-bottom:0}
form.f.filter-bar .fgrid>label.fld,form.f.filter-bar .fld-btns{grid-template-rows:24px 42px}
form.f.filter-bar .fld-s{display:none}
@media (max-width:700px){form.f.filter-bar .fld-btns{grid-template-rows:42px}}
.filter-bar + p.muted{margin:10px 0 10px}
.head h1 .pill .zh,.pill .zh{font-size:14px;margin-left:4px;color:inherit}
.door-left h1.door-name .zh{font:600 max(22px,.42em) var(--zh);letter-spacing:.2em;color:var(--gold-lt);margin-left:12px;vertical-align:middle;white-space:nowrap}
.door-grid:not(.signed) h1.door-name{white-space:normal}
#zen-hub .zn-hub-h h1 .zh,#zen-hub .zn-tile-t .zh{font-size:max(14px,.6em);color:var(--mu);margin-left:6px}
#zen-hub .zn-tile-t .zh{font-size:15px}
/* signed in: the name on one line, the art moved right so the words sit in the quiet left part; the small picture is left out */
.door-grid.signed .door-left h1.door-name{font-size:clamp(48px,4.6vw,70px)}
@media (min-width:1101px){.door-stage.signed .door-art{left:66%}.door-grid.signed .door-right{display:none}}
@media (min-width:761px) and (max-width:1100px){.door-stage.signed .door-art{left:70%}}
.door-left{background:linear-gradient(90deg,color-mix(in srgb,var(--black) 84%,transparent) 0,color-mix(in srgb,var(--black) 80%,transparent) 78%,transparent 100%);padding-right:48px}