/*
  Title:      Zen Library styles
  File:       app/static/lib_style.css
  Version:    1.9.8
  Date:       2026-10-24
  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.9.8 2026-10-24 Claude Code: owner design rule 1.2 (was 1.9.6 before the restack on A20): the shelf set's look is the
              kit's .zn-key (only its layout stays here); .btn.zn-key .zh in the words' ink. The edge is the kit's own (zen_header.css 1.6.1).
              1.9.7 2026-10-24 Claude Code: owner A20: the person Access page as one table (.acc: faint lines, sticky headings in its own
              box, a bookcase row bold on a light band, its shelves indented, small drop-downs on one line, "from the bookcase" in the
              theme grey; a card per bookcase at 700 px and under); Sensitive information and the two download rights in one row (.acc-set) in the same form, one Save.
              1.9.5 2026-10-24 Claude Code: checker on 1.9.4: Admin › Bookcases' list box ends at the bottom of the screen at every width
              (--fit-top and --fit-below), so the page itself does not scroll (the end of this file).
              1.9.4 2026-10-24 Claude Code: checker on 1.9.3: Admin › Bookcases at 390 scrolls in its own box (data-fit-box, the end of
              this file). Also: the Sign in as band's meta text (role, end time, reason) and its mark at 1rem
              (16 px, was 15 px); on phones the even form grid's button cell (.fld-btns, also in .filter-bar) grows when its buttons wrap,
              so the Find box stacks cleanly at 390 (Find sat on the Kind label on /bookcases).
              1.9.2 2026-10-23 Claude Code: owner: the shelf's matched primary set (.prim-set, .btn.prim).
              1.9.1 2026-10-23 Claude Code (polish): the Copy dialog's "Copy to another shelf 复制到别的书架" stays on one line at 390.
              1.9.1 2026-10-23 Claude Code: owner Z1-Z3: the zip dialog (.zip-dlg: its steps, the red note .zip-warn in the theme's
              --bad mixed toward the ink for contrast, the two links, Copy these instructions, the password boxes).
              1.9.0 2026-10-24 Claude Code: Sign in as: the bright band at the end of this file (the same as Zen HQ's and the CMC's).
              1.8.0 2026-10-23 Claude Code: the Edit names box of the access tree (.nm-ticks); polish: the From the bookcase note on one line, the box under View at 390.
              1.7.9 2026-10-23 Claude Code: the download-right columns of the access grid (.g-dl).
              1.7.8 2026-10-23 Claude Code: Find filters and results (.find-filters, .found-where, .found-desc), the New mark (.new-mark),
              the Index's Find box (.idx-find-form).
              1.7.7 2026-10-23 Claude Code: owner E1: an item's description under its name on the shelf (.item-desc); the Edit name
              and description dialog (.name-dlg).
              1.7.6 2026-10-23 Claude Code: the Sensitive information card (.sens-card) and grid column (.g-sens); .no-show.
              1.7.5 2026-10-23 Claude Code: the grouped Link chooser (.link-g, .link-gh, .link-items, .link-whole); Properties 属性
              (.props-dlg, .props-list, .props-link).
              1.7.1 2026-10-22 Claude Code: Library links: the Link box (.link-dlg, .link-tabs, .link-list), a Link field's box
              with Pick (.link-box), links in tables and documents (.lib-link), Copy link (.copy-link); the shared small symbol
              buttons (.tb-ico, .tb-caret, .tb-svg), their tip (.tip-pop) and the menus that close (details.tb-menu).
              1.6.7 2026-10-22 Claude Code: document default sizes (classes), the Size classes, Zoom (only the document box).
              1.6.6 2026-10-22 Claude Code: checker: document colours 7:1 in every theme, real colours on the buttons, the toolbar under the
              sticky head, small menus, TOC links 44 px; the editor's colour / highlight / font buttons, the Table of contents.
              1.6.2 2026-10-22 Claude Code: documents: the editor's toolbar and box, the reading view, the colour / highlight / font classes.
              1.6.1 2026-10-22 Claude Code: paste preview "#" column narrow, headings aligned to the top, Add-as-new-column inside its cell.
              1.5.2 2026-10-22 Claude Code: the Locked mark is words only.
              1.5.1 2026-10-22 Claude Code: Locked mark drawn in CSS (no emoji); Hide note on its own line.
              1.5.0 2026-10-22 Claude Code: the grid (Edit mode), the Locked mark.
              1.4.8 2026-10-22 Claude Code: shelf list cards ignore the column widths the resize script sets (no overlapping lines).
              1.4.7 2026-10-22 Claude Code: shelf items list as cards below 1200 px (nothing cut at 1024); the table rules from 1201 px.
              1.4.6 2026-10-22 Claude Code: shelf items list widths: headings whole, action column fits, name takes the rest.
              1.4.5 2026-10-22 Claude Code: shelf items list: one-line buttons, sort arrows on the heading line, phone numbers left.
              1.4.4 2026-10-22 Claude Code: checker on 1.4.3: shelf items list buttons side by side on desktop, card labels and dates
              whole on a phone.
              1.4.3 2026-10-22 Claude Code: the table page easy to read (widths, wrapping, zebra rows, frozen headings, sort arrows).
              1.6.5 2026-10-22 Claude Code (Track B): the Templates page (.tpl-acts).
              1.6.4 2026-10-22 Claude Code (Track B): Form view (.view-switch, .fv-nav, .fv-read, .fv-hidden).
              1.6.3 2026-10-22 Claude Code (Track B): Add a table: the chooser dialog's three big choices (.at-choice), the template
              list (.at-card) and the column review (.at-cols).
              1.4.2 2026-10-22 Claude Code: paste preview cells on one line (emails never break mid-word; long notes end in …).
              1.4.1 2026-10-22 Claude Code: checker on 1.4.0: paste preview in its own scroll box with headings in view, 20 px
              sub-headings, warning/success words at 7:1.
              1.4.0 2026-10-22 Claude Code: the paste page and its preview; notes in full (.desc) and two lines on tiles (.clamp2).
              1.3.2 2026-10-22 Claude Code: checker: the shelf page's Tables and Files are cards on a phone; table headings keep their
              Chinese whole.
              1.3.1 2026-10-22 Claude Code: checker: section headings 20 px; people-list headings stick under the header while the page
              scrolls; the Audit as cards on a phone; Sort label above its box; the stricter mark darker; splash date line 1.5.
              1.3.0 2026-10-22 Claude Code: readability rules 1.1: rem units, reading text 16 px, nothing under 15 px, 44 px boxes and
              buttons, darker grey (--lib-mu) and link words (--lib-link), a lighter gold under button words (--lib-foil); tiles, Edit
              bookcase / shelf, Arrange.
              1.2.7 2026-10-22 Claude Code: .err-text for the Change name box's plain warning.
              1.2.6 2026-10-22 Claude Code: checker: on a phone the Admin › Bookcases card list grows the page (no fixed box height), so
              the suite label never lands on its buttons.
              1.2.5 2026-10-22 Claude Code: checker on 1.2.4: Admin › Bookcases buttons never break (17rem column); on a phone each
              bookcase is a card with labelled counts and its buttons in view.
              1.2.4 2026-10-22 Claude Code: checker on 1.2.3: table headings put the Chinese under the English (audit, Admin › Bookcases)
              so the columns fit at 1024; the Admin › Bookcases row buttons are one equal-width, centred stack.
              1.2.3 2026-10-22 Claude Code: separate checker on app 1.2.2: buttons break only between English and Chinese (.btn .en/.zh),
              audit headings and names on one line, Admin › Bookcases row buttons stack inside their cell at 1024, pill Chinese kept whole.
              1.2.2 2026-10-22 Claude Code: peeking dragon: finer lines (the .dg-* rules only: thinner strokes, deep-gold fills,
              .dg-shade and .dg-lit).
              1.2.1 2026-10-22 Claude Code: fixed rows (Bookcases), aligned tick columns (person tree), Archive actions in one column and
              phone cards, the change lines in the history and the audit log wrap in their cells.
              1.2.0 2026-10-22 Claude Code: the Archive table, Find, the Delete forever box with the dragon.
              1.1.0 2026-10-22 Claude Code: two levels: bookcase cards, shelf rows, the stricter mark, Change name, the person tree.
              1.0.3 2026-10-21 Claude Code: the Chinese on gold buttons in the button text colour; the people lists below the grid.
              1.0.2 2026-10-21 Claude Code: the three groups of the access pages, the no-role line, the only-Owners hint.
              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.3.0 (readability rules 1.1, owner 2026-10-22): darker grey and link words, a lighter gold under button words, the 44 px tap */
:root{--lib-mu:color-mix(in srgb,var(--mu) 40%,var(--ink));--lib-link:color-mix(in srgb,var(--gold-ink) 70%,var(--ink));--lib-tap:2.75rem;
  --lib-foil:linear-gradient(115deg,color-mix(in srgb,var(--gold) 50%,var(--gold-lt)) 0%,var(--gold-lt) 42%,color-mix(in srgb,var(--gold) 50%,var(--gold-lt)) 70%,var(--gold-lt) 100%)}
html{font-size:100%}


/* 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:1rem/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--lib-link)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15}
.zh{color:var(--lib-mu);font-size:max(15px,.9em);margin-left:6px;font-weight:500}
small{font-size:max(15px,.85em)}
.muted{color:var(--lib-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:.9375rem/1.2 system-ui,sans-serif;opacity:.55;pointer-events:none}
.flash{border-radius:10px;padding:10px 14px;margin:0 0 10px;font-size:1rem}
.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(--lib-mu)}
.sec-intro{margin:0 0 16px;color:var(--lib-mu);max-width:760px}
.group-h{margin:26px 0 10px;font:600 1rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--lib-link)}
.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:.9375rem;font-weight:500;background:var(--line-2);color:var(--lib-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(--lib-link)}
.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(--lib-link);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:1rem;color:var(--lib-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:2.75rem;padding:0 18px;border-radius:10px;border:1px solid var(--gold);
  background:var(--lib-foil);color:var(--on-accent);font:600 1rem 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:2.75rem;padding:0 14px;font-size:1rem}
.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:1rem}   /* 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(--lib-link);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:1rem;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:2.75rem}
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:2.75rem;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:1rem}
.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:.9375rem;letter-spacing:.04em;text-transform:uppercase;color:var(--lib-mu)}
.tablewrap tr.off td{color:var(--lib-mu)}
code{font-family:ui-monospace,monospace;font-size:.9375rem;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:1rem}
.tabs a:hover{background:var(--page)}
.tabs a[aria-current="page"]{background:var(--black);color:var(--gold-lt)}
.crumb{margin:0;font-size:1rem;color:var(--lib-mu)}
.crumb a{color:var(--lib-link)}
@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:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lib-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:.9375rem}

/* 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:2.75rem;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:.9375rem;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:.9375rem;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:1rem;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(--lib-mu);margin:4px 0 18px;font-size:1rem}
.door-card label{display:grid;gap:5px;font-weight:600;font-size:1rem;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(--lib-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:1rem;margin:0 0 12px}
.door-card .ok{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:8px 12px;font-size:1rem;margin:0 0 12px}
.door-card .forgot{text-align:center;font-size:1rem;margin:12px 0 0}
.door-card .fine{text-align:center;font-size:.9375rem;color:var(--lib-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:.9375rem;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(15px,.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:1.5rem 2.75rem 2.875rem;gap:4px;min-width:0;margin:0}
.fgrid .fld-l{display:block;line-height:1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:1rem}
.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:2.75rem;box-sizing:border-box;margin:0}
.fgrid .fld-s{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.9375rem;line-height:1.375rem;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:2.75rem;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:1rem}
.req{font-size:inherit}
@media (max-width:540px){form.f .fgrid>label.fld{grid-template-rows:1.5rem 2.75rem 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:1rem}
.zn-item .zh{margin-left:5px;font-size:.9375rem;color:inherit;opacity:.8}
.zn-panel .zh{margin-left:5px;font-size:.9375rem;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:.9375rem;line-height:1.375rem;font-weight:500}
form.f label.inline{font-size:1rem}
.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:1rem;height:2.75rem;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:1.5rem 2.75rem 2.875rem;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(--lib-mu);font-size:1rem}
.shelf-m{color:var(--lib-mu);font-size:1rem;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:1rem}
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:.9375rem;letter-spacing:0;text-transform:none;font-weight:500;color:var(--lib-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:1rem;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(--lib-link);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:.9375rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lib-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:1rem;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(--lib-mu);font-weight:500;font-size:.9375rem}
table.grid select{height:2.75rem;min-width:130px;padding:0 8px}
form.f table.grid select{height:2.75rem}
.lv-word{font-weight:600}
.lv-word.lv-owner{color:var(--lib-link)}
.lv-word.lv-none{color:var(--lib-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:1rem;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:1rem;overflow-wrap:anywhere}
.tree-items .pill{font-size:.9375rem;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:minmax(42px,auto)}                 /* 1.9.4: the row grows when its buttons wrap (Find no longer over Kind at 390) */
  .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:1rem;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(--lib-link)}
.tbl-note{margin:0 0 8px;font-size:.9375rem}
.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(--lib-mu);font-size:1rem;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:1.5rem 2.75rem}
form.f.filter-bar .fld-s{display:none}
@media (max-width:700px){form.f.filter-bar .fld-btns{grid-template-rows:minmax(42px,auto)}}
.filter-bar + p.muted{margin:10px 0 10px}
.head h1 .pill .zh,.pill .zh{font-size:.9375rem;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(15px,.6em);color:var(--lib-mu);margin-left:6px}
#zen-hub .zn-tile-t .zh{font-size:1rem}
/* 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}

/* 1.0.2 (owner feedback after go-live): the three groups of the access pages, the no-role line, the hint when there are only Owners */
.hint-owners{max-width:900px}
.hint-owners .zh-line{color:var(--lib-mu);margin-top:4px}
.hint-owners .actions{margin-top:10px}
tr.grp th{background:var(--page);text-transform:none;letter-spacing:0;font-size:1rem;color:var(--lib-link);font-weight:600;position:static}
table.grid tr.grp th{position:sticky;left:0}
.norole{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.norole-t{font-weight:600}
.norole-why{display:block;font-size:.9375rem;margin-top:4px}
td.norole-cell{white-space:normal}
tr.grp .count{margin-left:12px;color:var(--lib-mu);font-weight:500;letter-spacing:0}
form.f label.tick{flex-wrap:nowrap}
@media (max-width:700px){
  table.people th:nth-child(2),table.people td:nth-child(2){display:none}
  .ticks{gap:8px 14px}
}

/* 1.0.3 (checker): the Chinese line on a gold button has the button's own text colour (it was grey on gold, about 1.3:1), in every
   theme; on a plain button it follows the button's text too; the people below the grid as plain lists (never cut off on a phone) */
.btn:not(.plain) .zh{color:var(--on-accent);opacity:1}
.btn.plain .zh{color:inherit;opacity:.8}
.door-card button .zh{color:var(--on-accent)}
.plist{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px;max-width:1100px}
.plist-i{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 14px}
.plist-why{margin:0 0 8px}
td.wrapcell{white-space:normal}
.nobody-yet{max-width:900px}
.role-badge .zh{margin-left:4px}
table.grid th.g-name small .zh{font-size:.9375rem}
table.grid select,form.f table.grid select{min-width:160px}

/* 1.1.0 (owner 2026-10-22): two levels: bookcase cards with their shelves, the stricter mark, Change name, the two-level person tree */
.case-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.case-card{position:relative;overflow:hidden;padding:18px 20px 16px 22px}
.case-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--foil)}
.case-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px}
.case-name{font:600 24px/1.15 var(--display);color:var(--ink);text-decoration:none}
a.case-name:hover{color:var(--lib-link)}
.case-d{color:var(--lib-mu);font-size:1rem;margin:0 0 8px}
.shelf-rows{list-style:none;margin:8px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line-2);display:grid;gap:8px}
.shelf-rows li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:1rem}
.shelf-rows li > a{font-weight:600}
.pill.strict{background:var(--info-bg);color:var(--info)}
.pill.strict .zh{color:inherit}
.title-acts{margin-top:8px}
.owner-note{font-size:.9375rem}
.rename-btn{white-space:nowrap}
.shelf-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.inline-form,.inline-form form{display:inline}
.follow-line,.strict-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.from-case{display:inline-block;margin-left:10px;font-size:.9375rem;color:var(--lib-mu)}
form.f label.tick.locked{opacity:.75;cursor:default}
.tree-h2{display:flex;justify-content:space-between;align-items:center;gap:8px 18px;flex-wrap:wrap}
.tree-name{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.tree-name > a,.tree-h2 .tree-name > a{font-weight:600}
.tree-lv{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.lv-label{font-size:.9375rem;font-weight:600;color:var(--lib-link)}
.tree-shelves{list-style:none;margin:12px 0 0;padding:0 0 0 16px;border-left:2px solid var(--line-2);display:grid;gap:12px}
.strict-mark{display:block;font-size:.9375rem;font-weight:500;color:var(--info);text-decoration:none;margin-top:2px;white-space:normal}
.xmark{display:block;font-size:.9375rem;color:var(--lib-link);margin-top:4px}
@media (max-width:700px){.case-list{grid-template-columns:1fr}.from-case{display:block;margin:4px 0 0}}
/* 1.1.0: the Archive grouped by Bookcase › Shelf */
.arch-case{margin:0 0 26px}
.arch-h{font-size:28px;margin:0 0 10px}
.arch-h .pill,.arch-sh .pill{font-family:var(--body);font-size:.9375rem;vertical-align:middle}
.arch-shelf{margin:0 0 14px 4px;padding:0 0 0 16px;border-left:2px solid var(--line-2)}
.arch-sh{font:600 20px var(--display);margin:6px 0 8px}
.arch-entry{margin:0 0 10px;max-width:1000px;display:grid;gap:8px}
.arch-k{margin:10px 0 6px;font-size:.9375rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lib-link)}
.arch-k .zh{letter-spacing:0}
.arch-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:1100px}
.arch-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;background:var(--card);border:1px solid var(--line-2);border-radius:10px;padding:8px 12px}
.arch-t{overflow-wrap:anywhere;min-width:0}
.arch-by{font-size:.9375rem}
.arch-acts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;align-items:center}
form.move-form{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
form.f.move-form select{height:2.75rem;min-width:220px;width:auto}
.gone-line{margin:4px 0 6px}
.shelf-rows li .rename-btn{margin-left:auto}
@media (max-width:700px){.arch-acts{margin-left:0}form.f.move-form select{min-width:0;width:100%}}
/* 1.2.0: the Archive table, Find, Delete forever with the dragon */
.arch-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 6px}
.find{display:grid;gap:4px;min-width:0;flex:1 1 280px;max-width:460px}
.find .fld-l{font-weight:600;font-size:1rem}
.find input{font:inherit;height:2.75rem;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);width:100%}
.arch-btns{display:flex;flex-wrap:wrap;gap:10px}
.arch-hint{margin:4px 0 10px}
.arch-wrap{max-height:calc(100vh - 300px)}
.arch-table td{vertical-align:top}
.arch-table .c-pick{width:44px}
.arch-table input[type=checkbox]{width:20px;height:20px;accent-color:var(--gold)}
.sort-btn{all:unset;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.sort-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
th[aria-sort="ascending"] .sort-btn::after{content:" ▲";font-size:.9375rem}
th[aria-sort="descending"] .sort-btn::after{content:" ▼";font-size:.9375rem}
.arch-label{font-weight:600;overflow-wrap:anywhere}
.arch-inside,.gone-line{display:block;margin-top:2px}
.gone-line{color:var(--warn);font-size:.9375rem}
.arch-acts{white-space:normal;text-align:left;min-width:220px}
.arch-acts .inline-form,.arch-acts .move-form{margin:2px 0}
.danger-text{color:var(--bad)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--on-dark)}
.btn.danger .zh{color:inherit}
.bad-words{color:var(--bad)!important}
.purge-dlg{overflow:visible;padding-top:58px;margin-top:max(80px,15vh)}
.dragon-peek{position:absolute;left:50%;top:-58px;transform:translateX(-50%);width:200px;height:auto}
.dg-head{fill:var(--gold);stroke:var(--gold-ink);stroke-width:1.5;stroke-linejoin:round}
.dg-shade{fill:var(--gold-ink);fill-opacity:.45}
.dg-lit{stroke:var(--gold-bg);stroke-width:1.2;stroke-linecap:round;stroke-opacity:.9}
.dg-snout{fill:var(--gold-lt);stroke:var(--gold-ink);stroke-width:1.3}
.dg-horn,.dg-mane{fill:color-mix(in srgb,var(--gold) 55%,var(--gold-ink));stroke:var(--gold-ink);stroke-width:1.3}
.dg-whisker{stroke:var(--gold-ink);stroke-width:1.6;stroke-linecap:round}
.dg-eye{fill:var(--card);stroke:var(--ink);stroke-width:1.3}
.dg-pupil{fill:var(--ink)}
.dg-brow{stroke:var(--ink);stroke-width:2.8;stroke-linecap:round}
.dg-scale{stroke:var(--gold-ink);stroke-width:1.2;stroke-linecap:round}
.find-form{margin:0 0 14px;max-width:900px}
form.f .fgrid-find{grid-template-columns:minmax(0,1fr) auto}
.find-arch{white-space:nowrap;margin:0 10px 0 0}
.fld-btns .btn-row{align-items:center}
.found-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:1000px}
.found-i{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px}
.found-i a{font-weight:600;overflow-wrap:anywhere}
@media (max-width:700px){form.f .fgrid-find{grid-template-columns:minmax(0,1fr)}.arch-btns{width:100%}.find{max-width:none}}
.arch-acts{min-width:300px}
form.f.move-form select{min-width:260px}
@media (max-width:700px){form.f.move-form select{min-width:260px;width:auto}}
dialog.dlg.purge-dlg{overflow:visible;max-height:none}
form.f input[type=search]{font:inherit;font-weight:400;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);height:2.75rem;width:100%;box-sizing:border-box}
.arch-table th{white-space:nowrap}
.arch-table td.c-item{min-width:280px}
.arch-table td:nth-child(2),.arch-table td:nth-child(3){min-width:130px}
.dragon-peek{top:-66px;width:220px}
.purge-dlg{padding-top:56px}
.dg-antler{stroke:color-mix(in srgb,var(--gold) 70%,var(--gold-ink));stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.dg-glint{fill:var(--card)}
.dg-nostril{fill:var(--ink);stroke:var(--gold-ink);stroke-width:1.2;stroke-linecap:round}
dialog.dlg.purge-dlg{padding-top:50px;margin-top:max(96px,14vh)}
dialog.dlg.purge-dlg .dragon-peek{top:-62px}

/* 1.2.1 (checker): fixed rows on the Bookcases page; the person tree's tick columns line up; the Archive's actions in one column; phone cards */
.case-h,.shelf-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 12px}
.row-main{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;overflow-wrap:anywhere}
.row-side{display:flex;justify-content:flex-end}
.shelf-rows li .rename-btn{margin-left:0}
.tree-h,.tree-h2{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px}
.tree-lv{display:grid;grid-template-columns:170px 190px 230px;align-items:center;gap:6px 12px}
.tree-lv > .muted.small{grid-column:2 / 4}
.tree-lv .from-case{margin-left:0}
.arch-do{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.arch-do .inline-form,.arch-do .move-form{margin:0}
.arch-acts{min-width:300px;max-width:330px}
form.f.move-form{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%}
form.f.move-form select{min-width:0;width:100%;max-width:300px}
.arch-cards{display:none;list-style:none;margin:0;padding:0;gap:10px}
.arch-card{display:grid;gap:6px;padding:12px 14px}
.ac-h{display:flex;align-items:flex-start;gap:10px}
.ver-diffs{margin:0 0 8px;padding-left:20px;font-size:1rem}
.audit-wrap td{white-space:normal;overflow-wrap:anywhere}
.audit-wrap td:nth-child(4){min-width:280px}
@media (max-width:1100px){.tree-lv{grid-template-columns:150px 180px 200px}}
@media (max-width:700px){
  .arch-wrap{display:none}
  .arch-cards{display:grid}
  .tree-h,.tree-h2{grid-template-columns:minmax(0,1fr)}
  .tree-lv{grid-template-columns:minmax(0,1fr)}
  .tree-lv > .muted.small{grid-column:auto}
}
.arch-card[hidden],[hidden]{display:none!important}

/* 1.2.2 (checker): the Archive switches to cards below 1200 px (no sideways scroll at 1024); the audit's time on one line; the tree's labels */
@media (max-width:1199px){.arch-wrap{display:none}.arch-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}}
@media (max-width:700px){.arch-cards{grid-template-columns:1fr}}
.audit-wrap td.nowrap{white-space:nowrap}
.audit-wrap td:nth-child(4){min-width:320px;width:40%}
.lv-label{white-space:nowrap}
.tree-lv{grid-template-columns:200px 190px 230px}
@media (max-width:1100px){.tree-lv{grid-template-columns:200px 180px 200px}}
@media (max-width:700px){.tree-lv{grid-template-columns:minmax(0,1fr)}}
.arch-card{align-content:start}

/* 1.2.3: longer labels with Chinese (separate checker on 1.2.2) */
.btn .en,.btn .zh,.pill .zh{white-space:nowrap}
.arch-table .btn .en,.arch-table .btn .zh{display:inline-block}
.audit-wrap td:nth-child(1),.audit-wrap td:nth-child(2),.audit-wrap td:nth-child(6){white-space:nowrap}
.audit-wrap th,.cases-wrap th{white-space:nowrap}
.audit-wrap th .zh,.cases-wrap th .zh{display:block;margin:2px 0 0}
.cases-wrap td:nth-child(2){min-width:10em}
.cases-wrap td.row-acts{white-space:normal;width:17rem;min-width:17rem}
.cases-wrap td.row-acts form{display:block;margin:0 0 6px}
.cases-wrap td.row-acts .btn{white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin:0 0 6px;padding-top:0;padding-bottom:0;box-sizing:border-box}
.cases-wrap td.row-acts form .btn{margin:0}
@media (max-width:700px){
  .cases-wrap{overflow:visible;max-height:none;height:auto}
  .cases-wrap table,.cases-wrap tbody,.cases-wrap tr,.cases-wrap td{display:block;width:auto;min-width:0}
  .cases-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .cases-wrap tr{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px;background:var(--card)}
  .cases-wrap td{padding:4px 0;border:0}
  .cases-wrap td[data-label]{display:inline-block;margin-right:16px}
  .cases-wrap td[data-label]::before{content:attr(data-label) ": ";color:var(--lib-mu);font-size:.9375rem}
  .cases-wrap td.row-acts{width:auto;min-width:0;padding-top:10px}
}
.err-text{color:var(--bad);font-weight:600}

/* 1.3.0 (owner 2026-10-22): tiles for bookcases and shelves, Arrange, Edit bookcase / Edit shelf, the quieter More row */
.tile-list{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.case-tile{display:flex;flex-direction:column;gap:.375rem;min-height:7rem;height:100%;background:var(--card);border:1px solid var(--line-2);border-radius:14px;
  padding:1.125rem 1.25rem 1rem 1.375rem;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.case-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--foil)}
a.case-tile:hover,a.case-tile:focus-visible{border-color:var(--gold)}
.tile-name{font:600 1.5rem/1.2 var(--display);overflow-wrap:anywhere}
.tile-count{color:var(--lib-mu);font-size:1rem}
.tile-strict{color:var(--info);font-size:1rem}
.move-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.move-btns form{margin:0}
.more-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:1.5rem 0 0;padding-top:.75rem;border-top:1px solid var(--line-2)}
.more-k{color:var(--lib-mu);font-size:1rem;font-weight:600}
.can-line{color:var(--lib-mu)}
.who-link{margin:.5rem 0}
.edit-form .owner-note{font-size:1rem}

/* 1.3.0: readability rules 1.1 (measured with tests/lib_read_check.py): 16 px everywhere but tags, counters and column headings;
   44 px ticks; darker placeholders; the splash words in the full light colour */
.zh{font-size:max(1rem,.85em)}
small{font-size:max(1rem,.85em)}
.fgrid .fld-s,label.wide .fld-s,.fld-s{font-size:1rem;line-height:1.375rem}
.fgrid .fld-l,form.f label{font-size:1rem}
input::placeholder,textarea::placeholder{color:var(--lib-mu);opacity:1}
form.f label.tick,form.f label.inline,label.tick,label.inline{min-height:var(--lib-tap);display:inline-flex;align-items:center;gap:.5rem}
.pick-l{display:inline-flex;align-items:center;justify-content:center;min-height:var(--lib-tap);min-width:var(--lib-tap);cursor:pointer}
.door-left p,.door-eb,.door-left .door-tag,.door-title,.door-date,.door-left .door-lede{color:var(--on-dark)}
.door-note,.door-foot,.door-card .fine,.door .brand small{font-size:1rem}
.from-case,.norole-why,.tbl-note,.lv-label,.xmark,.gone-line,.owner-note,.arch-by,.strict-mark,.th-note,.tree-items .pill{font-size:1rem}
.gone-line{color:var(--lib-mu);font-weight:600}
.btn,.btn.small{min-height:var(--lib-tap);height:auto;font-size:1rem}
.btn.small{padding:0 .875rem}
form.f input[type=text],form.f input[type=email],form.f input[type=search],form.f select,form.f input[type=file]{min-height:var(--lib-tap);font-size:1rem}
body{line-height:1.5}
.tile-note{color:var(--lib-mu);font-size:1rem;overflow-wrap:anywhere}
.zn-item .zh,.zn-panel .zh{font-size:1rem}
.door-tag em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold-lt)}
.btn.small,.row-acts .btn.small,.arch-do .btn.small{min-height:var(--lib-tap)!important;height:auto!important}
.ver-vals dt{font-size:1rem}
.pill .zh{color:inherit}
.sort-btn{min-height:var(--lib-tap);display:inline-flex;align-items:center}
.arch-acts{min-width:16rem;max-width:18rem}
.arch-table td.c-item{min-width:15rem}
.arch-table td:nth-child(2),.arch-table td:nth-child(3){min-width:7rem}
.audit-wrap td:nth-child(4){min-width:15rem;width:auto}
.purge-row{margin-top:.75rem;padding-top:.5rem;border-top:1px dashed var(--line)}
.btn.danger-outline{background:var(--card);color:var(--bad);border-color:var(--bad)}
.btn.danger-outline .zh{color:inherit}
.card-sort{display:none;align-items:center;gap:.75rem;margin:0 0 .75rem}
.card-sort select{min-height:var(--lib-tap);font:inherit;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:0 .75rem}
@media (max-width:1199px){.card-sort{display:flex}}
/* the walk-through: lists grow the page on the access pages and on a phone (no 640 px box with most of the list hidden) */
.tablewrap:has(table.people),.tablewrap.grid-wrap{max-height:none}
@media (max-width:700px){.tablewrap,.wide-table,.arch-wrap,.audit-wrap,.grid-wrap{max-height:none}}
.dup-box{border:1px solid var(--line);border-radius:10px;padding:.5rem 1rem;margin:0 0 .75rem}
.dup-box legend{font-weight:600}
.door-left .door-tag em{color:var(--on-dark);font-style:italic}
.arch-table td:nth-child(2),.arch-table td:nth-child(3){min-width:6rem}
.btn .zh,.sort-btn .zh{color:inherit}
.arch-table th{white-space:normal}
.arch-table td.c-item{min-width:12rem}
form.f label.tick.locked{opacity:1;color:var(--lib-mu)}
form.f label.tick.locked .zh{color:inherit}
form.f label.tick.locked input{opacity:.7}
td.arch-acts{display:table-cell;max-width:none;min-width:15rem}
.arch-do,.arch-do form.f.move-form{width:100%;min-width:0}
.arch-do .btn{white-space:normal;max-width:100%}
.door-left{background:color-mix(in srgb,var(--black) 90%,transparent);padding-right:26px}
.door-right .sig{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold-lt)}
#addcase-dlg,#add-dlg{width:min(700px,calc(100vw - 32px))}
form.f .fld-l.long{letter-spacing:-.03em;word-spacing:-.05em}form.f .fld-l.long .zh{letter-spacing:0}
/* 1.3.1, checker */
@media (max-width:1199px){.card-sort{display:flex;flex-direction:column;align-items:stretch;gap:.375rem;max-width:22rem}.card-sort .fld-l{white-space:nowrap}}
/* 1.3.1, checker (design rule 5): the people lists on the access pages keep their column headings in view while the PAGE scrolls
   (no inner scroll box; top = the header's height, --lib-head set by lib_app.js); the Audit is cards on a phone */
.tablewrap:has(> table.people){overflow:visible;max-height:none}
.tablewrap:has(> table.people) th{top:var(--lib-head,4rem);z-index:5}
@media (max-width:700px){
  .audit-wrap{overflow:visible;max-height:none;border:0;background:transparent}
  .audit-wrap table,.audit-wrap tbody,.audit-wrap tr,.audit-wrap td{display:block;width:auto;min-width:0}
  .audit-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .audit-wrap tr{border:1px solid var(--line);border-radius:12px;padding:.75rem .875rem;margin:0 0 .75rem;background:var(--card)}
  .audit-wrap td{padding:.125rem 0;border:0;white-space:normal}
  .audit-wrap td[data-label]::before{content:attr(data-label) ": ";color:var(--lib-mu);font-size:.9375rem}
  .audit-wrap td:empty{display:none}
}
.group-h{font-size:1.25rem;letter-spacing:.08em}
.group-h .zh{letter-spacing:.04em}
.tile-strict{color:color-mix(in srgb,var(--info) 55%,var(--ink))}
.door-left .door-hello,.door-date{line-height:1.5}
@media (max-width:700px){table.people td,table.people th{white-space:normal;overflow-wrap:anywhere}table.people .from-case{white-space:normal}table.people td:first-child{min-width:0;width:40%}}
/* 1.3.2, checker: the shelf page's Tables and Files lists are cards on a phone (as the Archive, Audit and Admin cards) */
th .zh{white-space:nowrap}
@media (max-width:700px){
  .pc-wrap{overflow:visible;max-height:none;border:0;background:transparent}
  .pc-wrap table.pc,.pc-wrap table.pc tbody,.pc-wrap table.pc tr,.pc-wrap table.pc td{display:block;width:auto;min-width:0}
  .pc-wrap table.pc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .pc-wrap table.pc tr{border:1px solid var(--line);border-radius:12px;padding:.75rem .875rem;margin:0 0 .75rem;background:var(--card)}
  .pc-wrap table.pc td{padding:.125rem 0;border:0;white-space:normal;overflow-wrap:anywhere}
  .pc-wrap table.pc td.pc-title{font-size:1.0625rem;margin:0 0 .25rem}
  .pc-wrap table.pc td[data-label]::before{content:attr(data-label) ": ";color:var(--lib-mu);font-size:.9375rem}
  .pc-wrap table.pc td.row-acts{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.625rem;white-space:normal}
  .pc-wrap table.pc td.row-acts form{display:block;flex-basis:100%;margin:.25rem 0 0;padding-top:.5rem;border-top:1px dashed var(--line)}
}
/* 1.4.0, owner: notes shown: in full under the name of a bookcase or shelf; two lines then … on the tiles */
.desc{font-size:1rem;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;max-width:72ch;margin:.25rem 0 .375rem;color:var(--ink)}
.tile-note{white-space:pre-line;line-height:1.5}
.clamp2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* 1.4.0: New table from paste */
.paste-box{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1rem;line-height:1.5;white-space:pre;overflow:auto;min-height:9rem}
.paste-wrap{max-height:none;overflow-x:auto}
table.paste-prev th{vertical-align:top;min-width:11rem;text-transform:none;letter-spacing:0;font-size:1rem;color:var(--ink)}
table.paste-prev th .pp-name{display:block;font-weight:700;margin:0 0 .375rem;overflow-wrap:anywhere}
table.paste-prev th .pp-kind select{width:100%;min-height:var(--lib-tap);font:inherit;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:0 .5rem}
table.paste-prev th .pp-sens{display:flex;align-items:center;gap:.5rem;min-height:var(--lib-tap);font-weight:400;cursor:pointer}
table.paste-prev th .pp-sens input{width:1.25rem;height:1.25rem;accent-color:var(--gold)}
table.paste-prev .pp-n{width:3rem;min-width:3rem;color:var(--lib-mu)}
table.paste-prev td{white-space:pre-line;overflow-wrap:anywhere;max-width:22rem}
table.paste-prev td.pp-bad{background:var(--bad-bg);color:var(--ink)}
table.paste-prev .pp-why{color:var(--bad);font-weight:600}
.dup-list li{margin:0 0 .5rem}
.dup-pick{display:flex;flex-wrap:wrap;gap:.25rem 1rem}
label.inline{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--lib-tap);cursor:pointer}
@media (max-width:700px){.paste-wrap{overflow-x:auto}}
table.paste-prev .pp-n{position:sticky;left:0;background:var(--card);z-index:1}
.paste-form section.card{margin:1.25rem 0}
.paste-form .paste-wrap{margin:.75rem 0 0}

/* 1.4.1 (checker on 1.4.0): the paste preview scrolls in its own box so its headings (kinds, Sensitive) stay in view (design rule 5);
   preview sub-headings 20 px; warning and success words in full-strength ink (7:1) with a coloured edge */
.paste-wrap{max-height:60vh;overflow:auto}
table.paste-prev td,table.paste-prev th{white-space:nowrap}
table.paste-prev td{max-width:28rem;overflow:hidden;text-overflow:ellipsis}
.note-card h3{font-size:1.25rem}
.flash.err{color:var(--ink);border-left:5px solid var(--bad)}
.flash.ok{color:var(--ink);border-left:5px solid var(--ok)}
table.paste-prev .pp-why{color:var(--ink);font-weight:700;text-decoration:underline wavy var(--bad)}
/* 1.4.3, owner after the demo ("it doesn't look like a table"): the shared spreadsheet look. Markup (any page): div.sheet-wrap >
   table.sheet, headings th.sheet-h (data-sort on the sortable ones); lib_app.js sheets() sorts and resizes. Grid lines on every cell,
   a bold shaded heading row frozen inside the box, the first column fixed, widths that fit (8 to 22 rem; a dragged width wins), long
   text wraps between words (an email, a number or a date never breaks inside), zebra rows, 16 px. */
:root{--sheet-line:var(--line);--sheet-head:color-mix(in srgb,var(--gold) 16%,var(--page))}
.sheet-wrap{max-height:calc(100vh - 15rem);overflow:auto;border:1px solid var(--sheet-line);border-radius:var(--radius);background:var(--card)}
table.sheet{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:1rem;line-height:1.5}
table.sheet th,table.sheet td{min-width:8rem;max-width:22rem;padding:.5rem .75rem;vertical-align:top;text-align:left;color:var(--ink);
  border-right:1px solid var(--sheet-line);border-bottom:1px solid var(--sheet-line)}
table.sheet tr > :last-child{border-right:0}
table.sheet tbody tr:last-child > *{border-bottom:0}
table.sheet td{white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
table.sheet td.c-email,table.sheet td.c-number,table.sheet td.c-money,table.sheet td.c-date,table.sheet td.c-phone,table.sheet td.c-yesno,
table.sheet td.c-ein{white-space:nowrap;max-width:none}
table.sheet td.c-number,table.sheet td.c-money,table.sheet td.num{text-align:right;font-variant-numeric:tabular-nums}
table.sheet td.c-textarea{min-width:14rem}
table.sheet thead th{position:sticky;top:0;z-index:3;background:var(--sheet-head);font-weight:700;font-size:1rem;letter-spacing:0;text-transform:none;
  white-space:nowrap;vertical-align:bottom;border-bottom:2px solid var(--sheet-line)}
table.sheet th:first-child,table.sheet td:first-child{position:sticky;left:0;z-index:1;min-width:14rem;border-right:2px solid var(--sheet-line)}
table.sheet thead th:first-child{z-index:4}
table.sheet tbody tr:nth-child(odd) td{background:var(--card)}
table.sheet tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--page) 60%,var(--card))}
table.sheet tbody tr:hover td{background:color-mix(in srgb,var(--gold) 10%,var(--card))}
table.sheet th.sheet-h{position:sticky}
table.sheet .sort-btn{display:inline-flex;align-items:center;min-height:var(--lib-tap);font-weight:700;padding-right:.5rem}
table.sheet th[aria-sort="none"] .sort-btn::after{content:" ↕";color:var(--lib-mu);font-weight:400}
table.sheet th[data-sort]:not(:has(.sort-btn)){cursor:pointer}
table.sheet .sheet-grip{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:5;touch-action:none}
table.sheet .sheet-grip:hover{background:color-mix(in srgb,var(--gold) 45%,transparent)}
table.sheet td:first-child .first-cell{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
table.sheet td:first-child .ent-name{overflow-wrap:anywhere}
@media (max-width:700px){.sheet-wrap{max-height:calc(100vh - 10rem)}}
/* 1.4.3: the shelf's one list (tables and files) */
table.sheet.items td.row-acts{white-space:nowrap;min-width:0;max-width:none}
table.sheet.items td.row-acts form{display:inline}
table.sheet.items td.row-acts .btn + .btn,table.sheet.items td.row-acts .btn + form{margin-left:.375rem}
@media (max-width:700px){.sheet-wrap.pc-wrap{max-height:none;overflow:visible;border:0;background:transparent}
  table.sheet.pc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  table.sheet.pc td,table.sheet.pc th{position:static;border:0;min-width:0;max-width:none;background:transparent}
  table.sheet.pc tbody tr:nth-child(even) td,table.sheet.pc tbody tr:nth-child(odd) td{background:transparent}
  table.sheet.pc td.row-acts{white-space:normal}}
/* 1.4.3: the file viewer (lib_view.html, the viewer helper's page) in the same look */
.sheet-tabs{display:flex;flex-wrap:wrap;gap:.375rem;margin:.75rem 0 0;padding:0;list-style:none;border-bottom:2px solid var(--sheet-line)}
.sheet-tab{display:inline-flex;align-items:center;min-height:var(--lib-tap);padding:0 1rem;border:1px solid var(--sheet-line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--page);color:var(--ink);text-decoration:none;font-size:1rem}
.sheet-tab:hover{background:color-mix(in srgb,var(--gold) 10%,var(--page))}
.sheet-tab.current,.sheet-tab[aria-current="page"]{background:var(--sheet-head);font-weight:700;box-shadow:inset 0 -3px 0 var(--gold)}
.sheet-count{margin:.5rem 0;font-size:1rem;color:var(--ink)}
.sheet-pager{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;margin:.75rem 0}
.sheet-page{display:inline-flex;align-items:center;min-height:var(--lib-tap);padding:0 .5rem;font-size:1rem;color:var(--ink)}
.view-pic{margin:1rem 0;padding:.75rem;border:1px solid var(--sheet-line);border-radius:var(--radius);background:var(--card);text-align:center;overflow:auto}
.view-img{display:block;max-width:100%;height:auto;margin:0 auto}
/* 1.4.3, owner: the table gets the room. A compact head (crumbs, title with the count, the actions; the long words folded under
   More), and the table's box as tall as the screen allows, so its heading row stays frozen at the top and its side-scroll bar is
   always on screen at the bottom of the box (the box scrolls both ways; the page does not need to). */
.head-compact{margin-bottom:.5rem;padding-bottom:.5rem;align-items:center}
.head-compact .crumb{margin:0}
.head-compact h1{margin:.125rem 0;font-size:1.5rem;line-height:1.3}
.head-compact .h-count{font-size:1rem;font-weight:400;color:var(--lib-mu);margin-left:.5rem;font-family:var(--body)}
.more-sub{margin:.125rem 0 0}
.more-sub summary{cursor:pointer;min-height:var(--lib-tap);display:inline-flex;align-items:center;color:var(--lib-link);font-size:1rem}
.sheet-wrap.sheet-fill{max-height:max(20rem,calc(100vh - var(--lib-head,4rem) - 8.5rem));overflow:auto;overscroll-behavior:contain}
.sheet-wrap::-webkit-scrollbar{width:14px;height:14px}
.sheet-wrap::-webkit-scrollbar-track{background:var(--page)}
.sheet-wrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--line) 50%,var(--ink) 50%);border-radius:7px;border:3px solid var(--page)}
.sheet-wrap::-webkit-scrollbar-corner{background:var(--page)}
@media (max-width:700px){.head-compact h1{font-size:1.375rem}}
/* 1.4.3: the table page's head (title, count, buttons) stays under the site header while the table scrolls */
.head-compact{position:sticky;top:var(--lib-head,4rem);z-index:20;background:var(--page)}
.sheet-wrap.sheet-fill{max-height:none}
@media (max-width:700px){.head-compact{position:static}}
/* 1.4.3, owner: compact heads on the bookcase, shelf and table pages: breadcrumb, "Shelf 书架: name", one role line, the note beside
   the title (two lines, then more), the buttons pulled up beside them; the head stays under the site header */
.head-compact{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:flex-start;justify-content:space-between}
.head-compact .head-main{flex:0 1 auto;min-width:16rem}
.head-compact .head-note{flex:1 1 18rem;max-width:46rem;padding-top:1.75rem}
.head-compact .head-note:empty{display:none}
.head-compact > .actions{flex:0 1 auto;margin:0;align-self:center}
.head-compact h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem}
.head-compact .lvl{font-family:var(--body);font-size:1rem;font-weight:600;color:var(--lib-mu)}
.head-compact .lvl .zh{color:inherit}
.role-line{margin:0;font-size:1rem;line-height:1.5;color:var(--ink)}
.note-more summary{list-style:none;cursor:pointer;display:block}
.note-more summary::-webkit-details-marker{display:none}
.note-more .desc{margin:0}
.note-more .more-w,.note-more .less-w{display:inline-flex;align-items:center;min-height:var(--lib-tap);color:var(--lib-link);font-size:1rem}
.note-more .less-w,.note-more[open] .more-w,.note-more[open] summary .clamp2{display:none}
.note-more[open] .less-w{display:inline-flex}
.note-more[open] summary{display:flex;flex-direction:column-reverse}
.back-link{display:none}
.head-sticky{position:sticky;top:var(--lib-head,4rem);z-index:20;background:var(--page)}
table.sheet.items td.row-acts{white-space:normal;max-width:18rem}
table.sheet.items td:first-child{max-width:20rem}
@media (max-width:700px){.head-compact .head-note{padding-top:0}.head-sticky{position:static}
  .back-link{display:inline-flex;align-items:center;min-height:var(--lib-tap);font-size:1rem}
}
table.sheet.items th,table.sheet.items td{min-width:0}
table.sheet.items thead th{white-space:normal}
table.sheet.items th:first-child,table.sheet.items td:first-child{min-width:11rem}
table.sheet.items td.row-acts{max-width:15rem}
table.sheet.items th:first-child,table.sheet.items td:first-child{min-width:10rem;max-width:14rem}
table.sheet.items .sort-btn{white-space:normal;flex-wrap:wrap;text-align:left}
table.sheet.items td:nth-child(2),table.sheet.items td:nth-child(3),table.sheet.items th:nth-child(2),table.sheet.items th:nth-child(3){max-width:9rem}
table.sheet.items td.row-acts{max-width:11rem}
table.sheet.items td.row-acts .btn,table.sheet.items td.row-acts form{display:flex;margin:0 0 .375rem 0}
table.sheet.items td.row-acts .btn + .btn,table.sheet.items td.row-acts .btn + form{margin-left:0}
@media (max-width:700px){table.sheet.items td.row-acts .btn,table.sheet.items td.row-acts form{display:inline-flex}table.sheet.items td:first-child,table.sheet.items td.row-acts,table.sheet.items td:nth-child(2),table.sheet.items td:nth-child(3){max-width:none}}
table.sheet.items{width:100%;min-width:0}
table.sheet.items td:nth-child(4){white-space:normal;max-width:8rem}
table.sheet thead tr > :last-child .sheet-grip{right:0}
table.sheet.items td.row-acts{max-width:none;min-width:12rem}
table.sheet.items td.row-acts .btn{white-space:nowrap}
table.sheet.items th:first-child,table.sheet.items td:first-child{max-width:18rem}
table.sheet .zh{white-space:nowrap}

/* 1.4.4 (checker on 1.4.3): the shelf items list, settled in one place. Desktop: the row's buttons sit side by side and wrap evenly
   (no full-width Open over a narrow Move to Archive); the date stays on one line. Phone cards: labels and dates never break mid-word. */
@media (min-width:1201px){
  table.sheet.items td.row-acts{white-space:normal;min-width:17rem;max-width:none}
  table.sheet.items td.row-acts .btn,table.sheet.items td.row-acts form{display:inline-flex;width:auto;margin:0 .375rem .375rem 0;vertical-align:top}
  table.sheet.items td.row-acts form .btn{margin:0}
  table.sheet.items td:nth-child(4){white-space:nowrap;max-width:none}
}
@media (max-width:1200px){
  table.sheet.items td[data-label]{white-space:nowrap}
  table.sheet.items td[data-label]::before{white-space:nowrap}
}

/* 1.4.5: shelf items list: buttons on one line (shorter words), sort arrows on the heading's line, phone card numbers left like the rest */
@media (min-width:1201px){
  table.sheet.items td.row-acts{white-space:nowrap;min-width:0}
  table.sheet.items td.row-acts .btn,table.sheet.items td.row-acts form{margin-bottom:0}
}
table.sheet.items .sort-btn{white-space:nowrap;flex-wrap:nowrap}
@media (max-width:1200px){table.sheet.items td.num{text-align:left}}

/* 1.4.6: shelf items list widths settled: headings never wrap or get cut; the action column fits its buttons; the name takes the rest */
@media (min-width:1201px){
  table.sheet.items th{white-space:nowrap;max-width:none}
  table.sheet.items td:nth-child(2),table.sheet.items td:nth-child(3),table.sheet.items th:nth-child(2),table.sheet.items th:nth-child(3){max-width:none}
  table.sheet.items td.row-acts{white-space:nowrap;min-width:21rem;width:21rem}
  table.sheet.items th:first-child,table.sheet.items td:first-child{min-width:9rem;max-width:none;white-space:normal}
}

/* 1.4.7: the shelf items list switches to cards below 1200 px (like the Archive), so nothing is cut at 1024 */
@media (min-width:701px) and (max-width:1200px){
  .items-wrap{overflow:visible;max-height:none;border:0;background:transparent}
  .items-wrap table.items,.items-wrap table.items tbody,.items-wrap table.items tr,.items-wrap table.items td{display:block;width:auto;min-width:0;max-width:none}
  .items-wrap table.items thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .items-wrap table.items tr{border:1px solid var(--line);border-radius:12px;padding:.75rem .875rem;margin:0 0 .75rem;background:var(--card)}
  .items-wrap table.items td{padding:.125rem 0;border:0;position:static;background:transparent;overflow-wrap:anywhere}
  .items-wrap table.items tbody tr:nth-child(even) td,.items-wrap table.items tbody tr:nth-child(odd) td{background:transparent}
  .items-wrap table.items td.pc-title{font-size:1.0625rem;margin:0 0 .25rem;white-space:normal}
  .items-wrap table.items td[data-label]{display:inline-block;margin-right:1.25rem}
  .items-wrap table.items td[data-label]::before{content:attr(data-label) ": ";color:var(--lib-mu);font-size:.9375rem}
  .items-wrap table.items td.row-acts{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.625rem;white-space:normal}
  .items-wrap table.items td.row-acts .btn,.items-wrap table.items td.row-acts form{display:inline-flex;margin:0}
  .items-wrap table.items td,.items-wrap table.items th{width:auto!important;min-width:0!important;max-width:none!important}   /* 1.4.8: the widths the resize script sets on cells do not apply to cards */
  .items-wrap table.items td[data-label]{white-space:normal}
  .items-wrap table.items{width:100%!important;table-layout:auto}
}
/* 1.5.0: the grid (lib_grid.js) */
.grid-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.grid-status{min-height:1.5rem;margin:.25rem 0 .5rem;font-size:1rem;color:var(--ink)}
.grid-status.ok{color:var(--ink);border-left:4px solid var(--ok);padding-left:.5rem}   /* 1.6.8 fix: the words in full ink (7:1), green only as the edge */
.grid-status.bad{color:var(--ink);border-left:4px solid var(--bad);padding-left:.5rem}
.grid-status.busy{color:var(--lib-mu)}
.grid-box{position:relative;overflow:auto;max-height:calc(100vh - 16rem);min-height:12rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);outline:none}
.grid-box:focus-visible{box-shadow:0 0 0 3px var(--focus,var(--gold))}
table.lg{border-collapse:separate;border-spacing:0;font-size:1rem;line-height:1.5;min-width:100%}
table.lg th,table.lg td{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:0 .5rem;height:2.75rem;min-width:9rem;max-width:22rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;vertical-align:middle;color:var(--ink);background:var(--card)}
table.lg thead th{position:sticky;top:0;z-index:3;background:var(--page);font-weight:700}
table.lg th.g-row,table.lg th.g-corner{position:sticky;left:0;z-index:2;min-width:4rem;width:4rem;background:var(--page);color:var(--lib-mu);font-weight:600}
table.lg thead th.g-corner{z-index:4}
table.lg th.g-col{white-space:nowrap}
table.lg .g-lock{font-weight:400;color:var(--lib-mu)}
table.lg .g-menu,table.lg .g-rmenu{min-width:2.75rem;min-height:2.75rem;margin-left:.25rem;border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;border-radius:8px}
table.lg .g-menu:hover,table.lg .g-rmenu:hover{background:var(--quiet,var(--line-2))}
table.lg th.g-row{display:table-cell}
table.lg th.g-row span{display:inline-block;min-width:1.5rem}
table.lg td{cursor:cell}
table.lg td.sel{background:color-mix(in srgb,var(--gold) 14%,var(--card))}
table.lg td.on{outline:3px solid var(--gold);outline-offset:-3px}
table.lg td.dirty{box-shadow:inset 4px 0 0 var(--warn)}
table.lg td.bad{background:var(--bad-bg);box-shadow:inset 4px 0 0 var(--bad)}
table.lg td.editing{padding:0;overflow:visible}
table.lg td .g-in{width:100%;min-width:12rem;height:2.75rem;border:0;outline:3px solid var(--gold);outline-offset:-3px;padding:0 .5rem;font:inherit;color:var(--ink);background:var(--card)}
table.lg td .dots{letter-spacing:.1em;margin-right:.5rem}
table.lg td .g-show{min-height:2.25rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;padding:0 .5rem;cursor:pointer}
.hidden-cols .hc{display:inline-flex;align-items:center;gap:.25rem;margin:0 .75rem .25rem 0}
.grid-foot{margin:.5rem 0 0}
.col-msg{color:var(--ink);min-height:1.5rem;margin:.5rem 0 0}
@media (max-width:700px){.grid-box{max-height:calc(100vh - 12rem)}table.lg th,table.lg td{min-width:8rem}}
.lock-mark{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--body);font-size:1rem;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:0 .625rem;background:var(--quiet,var(--card))}
.lock-mark::before{content:none}   /* 1.5.2: no icon; the words "Locked 锁定" say it (an emoji or a drawn box did not read as a lock) */
table.lg td .g-show{min-height:var(--lib-tap);margin:0}

/* 1.5.1: the column menu Hide note sits on its own line under the tick */
.hide-note{display:block;margin:.25rem 0 0}
.pp-match{display:block;font-weight:400;color:var(--ink);margin:.25rem 0}

/* 1.6.1 (checker on 1.6.0): the paste preview's "#" column is narrow (it inherited the sheet's 14rem first column), every heading's
   controls start at the top, and "Add as a new column" stays inside its cell */
table.paste-prev th.pp-n,table.paste-prev td.pp-n{min-width:3rem!important;width:3rem!important;max-width:3.5rem!important;text-align:right;padding-right:.5rem}
table.paste-prev thead th{vertical-align:top}
table.paste-prev thead th .pp-add{white-space:normal;display:flex;align-items:flex-start;gap:.375rem;max-width:16rem}
@media (max-width:700px){table.paste-prev thead th{min-width:10rem}}
/* 1.6.2: documents (the page's own editor and the reading view) */
.doc-view{max-width:48rem;margin:1rem 0 2rem;padding:1.25rem 1.5rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);font-size:1rem;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.doc-view h1,.doc-edit h1{font-size:1.5rem;margin:1rem 0 .5rem}
.doc-view h2,.doc-edit h2{font-size:1.375rem;margin:1rem 0 .5rem}
.doc-view h3,.doc-edit h3{font-size:1.25rem;margin:.875rem 0 .375rem}   /* 1.6.2: 20 px (design rules 1.1: headings 20-24 px) */
.doc-view p,.doc-edit p{margin:.5rem 0}
.doc-view ul,.doc-view ol,.doc-edit ul,.doc-edit ol{margin:.5rem 0;padding-left:1.75rem}
.doc-view hr,.doc-edit hr{border:0;border-top:1px solid var(--line);margin:1.25rem 0}
.doc-view a,.doc-edit a{color:var(--lib-link);text-decoration:underline}
.doc-tools{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;margin:.75rem 0 .5rem;padding:.375rem;border:1px solid var(--line);border-radius:12px;background:var(--page);position:sticky;top:calc(var(--lib-head,4rem) + .25rem);z-index:6}
.doc-tools[hidden],.doc-edit[hidden]{display:none}
.doc-tools .tb{min-height:var(--lib-tap);min-width:var(--lib-tap);padding:0 .75rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:1rem;cursor:pointer}
.doc-tools .tb:hover{background:color-mix(in srgb,var(--gold) 12%,var(--card))}
.doc-tools .tb-sep{width:1px;align-self:stretch;background:var(--line);margin:0 .25rem}
.doc-label{margin:.25rem 0}
.doc-edit{min-height:22rem;max-width:48rem;padding:1rem 1.25rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);font-size:1rem;line-height:1.6;color:var(--ink);outline:none;overflow-wrap:anywhere}
.doc-edit:focus-visible{box-shadow:0 0 0 3px var(--focus,var(--gold))}
.doc-body{width:100%;max-width:48rem;font:inherit;font-size:1rem;line-height:1.5}
.doc-hint{max-width:48rem;margin:.5rem 0}
.c-gold{color:var(--gold-ink)} .c-red{color:var(--bad)} .c-blue{color:var(--info)} .c-green{color:var(--ok)} .c-grey{color:var(--lib-mu)}
.h-yellow{background:var(--warn-bg)} .h-green{background:var(--ok-bg)} .h-blue{background:var(--info-bg)}
.f-serif{font-family:Georgia,"Noto Serif SC",serif} .f-mono{font-family:ui-monospace,Consolas,monospace} .f-body{font-family:var(--body)}
fieldset.dl-fmt{min-width:0;border:0;padding:0;margin:.5rem 0}
fieldset.dl-fmt label.inline{display:flex;white-space:normal;align-items:center}

/* L-B1 1.6.3 (Track B): Add a table: the chooser's three choices, the template cards, the column review with Sensitive ticks */
.at-choices{display:grid;gap:10px;margin:12px 0 4px}
.btn.at-choice{height:auto;min-height:3.75rem;padding:.625rem 1rem;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;white-space:normal}
.btn.at-choice b{font-size:1.0625rem}
.at-what{font-size:1rem;color:var(--lib-mu);font-weight:500}
.at-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:12px}
.at-card{display:flex;flex-direction:column;gap:6px}
.at-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.at-h h3{font-size:1.25rem}
.at-cols-line{overflow-wrap:anywhere}
.at-wrap{margin:10px 0 6px;max-height:none}
table.at-cols td{vertical-align:middle}
table.at-cols td .tick{white-space:nowrap}
.at-tiles{margin:12px 0}
@media (max-width:700px){
  table.at-cols thead{display:none}
  table.at-cols,table.at-cols tbody,table.at-cols tr,table.at-cols td{display:block;width:auto!important;min-width:0!important;max-width:none!important}
  table.at-cols tr{border-bottom:1px solid var(--line-2);padding:8px 10px}
  table.at-cols td{border:0!important;padding:2px 0!important;white-space:normal!important}
  table.at-cols td.at-name{font-weight:600}
  table.at-cols td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--lib-mu)}
  table.at-cols td.at-sens .muted{display:block}
}

/* L-B2 1.6.4 (Track B): Form view: the Table view | Form view switch, the record navigation, the read-only record, the hidden values */
.view-switch{display:inline-flex;gap:0}
.view-switch .btn{border-radius:0}
.view-switch .btn:first-child{border-radius:10px 0 0 10px}
.view-switch .btn:last-child{border-radius:0 10px 10px 0;margin-left:-1px}
.view-switch .btn.on{border-color:var(--gold);font-weight:700;box-shadow:inset 0 -3px 0 var(--gold)}
.fv-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 6px}
.fv-count{font-size:1rem;padding:0 6px}
.fv-go{display:inline-flex;align-items:center;gap:6px;margin:0}
.fv-go input{width:6rem;height:2.75rem;font-size:1rem;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.fv-hidden{display:flex;flex-wrap:wrap;gap:6px 24px;margin:10px 0}
.fv-hidden .hidden-val{display:inline-flex;align-items:center;gap:8px}
.fv-read{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:12px 0}
.fv-pair{min-width:0}
.fv-read dt{font-weight:600;font-size:1rem;color:var(--lib-mu)}
.fv-read dd{margin:2px 0 0;font-size:1rem;overflow-wrap:anywhere;white-space:pre-wrap}
.fv-archive{margin-top:6px}
@media (max-width:700px){.fv-read{grid-template-columns:1fr}.view-switch{width:100%}.view-switch .btn{flex:1;justify-content:center}}

/* L-B3 1.6.5 (Track B): the Templates page */
.tpl-name{font-size:1.375rem}
.tpl-acts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:6px}
.tpl-rename{flex:1 1 32rem;min-width:0}

/* 1.6.5 fix (checker): heading sizes 20-24 px on the new Track B pages; the Table view / Form view switch stays on one line on a phone */
.sec-h{font-size:1.25rem}
.at-card h2.tpl-name{font-size:1.375rem}
.view-switch a,.view-switch .btn{white-space:nowrap}
@media (max-width:700px){.view-switch{display:flex;width:100%}.view-switch .btn{flex:1 1 0;min-width:0;white-space:normal;justify-content:center;text-align:center}}
/* 1.6.3: the editor's colour / highlight / font buttons and the Table of contents */
.doc-tools .tb-group{display:inline-flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.doc-tools .tb-lab{font-size:1rem;color:var(--ink);margin:0 .25rem 0 .5rem}
.doc-tools .tb.sw{min-width:var(--lib-tap);padding:0 .5rem;font-weight:700}
.doc-edit p.doc-toc,.doc-view p.doc-toc{border:1px dashed var(--line);border-radius:8px;padding:.5rem .75rem;color:var(--lib-mu)}
.doc-toc-list{border:1px solid var(--line);border-radius:10px;padding:.5rem 1rem;margin:1rem 0;background:var(--page)}
.doc-toc-list .toc-h{font-weight:700;margin:.25rem 0}
.doc-toc-list ul{list-style:none;padding-left:0;margin:.25rem 0}
.doc-toc-list li{margin:.25rem 0}
.doc-toc-list .toc-2{padding-left:1.25rem}
.doc-toc-list .toc-3{padding-left:2.5rem}
.doc-view mark,.doc-edit mark{color:var(--ink)}
/* 1.6.3, checker: the document colours reach 7:1 in every theme (each mixed with the theme's ink), the colour and highlight buttons show
   their colour, the toolbar sits under the sticky head, the small menus, Table of contents links 44 px tall */
.doc-view .c-gold,.doc-edit .c-gold,.tb.c-gold{color:color-mix(in srgb,var(--gold-ink) 60%,var(--ink))}
.doc-view .c-red,.doc-edit .c-red,.tb.c-red{color:color-mix(in srgb,var(--bad) 70%,var(--ink))}
.doc-view .c-blue,.doc-edit .c-blue,.tb.c-blue{color:color-mix(in srgb,var(--info) 75%,var(--ink))}
.doc-view .c-green,.doc-edit .c-green,.tb.c-green{color:color-mix(in srgb,var(--ok) 65%,var(--ink))}
.doc-view .c-grey,.doc-edit .c-grey,.tb.c-grey{color:color-mix(in srgb,var(--mu) 60%,var(--ink))}
.doc-tools .tb.sw-c{font-weight:800;border-bottom:5px solid currentColor}
.doc-tools .tb.sw-h.h-yellow{background:var(--warn-bg)} .doc-tools .tb.sw-h.h-green{background:var(--ok-bg)} .doc-tools .tb.sw-h.h-blue{background:var(--info-bg)}
.doc-tools .tb.sw-h{color:var(--ink)}
.doc-tools .sw-name{font-weight:400;color:var(--ink)}
.doc-tools{top:calc(var(--lib-head,4rem) + var(--lib-headbar,0px) + .25rem)}
.doc-tools .tb-menu{position:relative}
.doc-tools .tb-menu > summary{list-style:none;display:inline-flex;align-items:center;gap:.25rem}
.doc-tools .tb-menu > summary::-webkit-details-marker{display:none}
.doc-tools .tb-pop{position:absolute;top:calc(100% + .25rem);left:0;z-index:30;display:flex;flex-direction:column;gap:.25rem;min-width:11rem;padding:.375rem;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.doc-tools .tb-pop .tb{justify-content:flex-start;display:flex;align-items:center;gap:.5rem;width:100%}
.doc-toc-list a{display:inline-flex;align-items:center;min-height:var(--lib-tap)}
.doc-toc-list li{margin:0}
@media (max-width:700px){.doc-tools .tb-word{display:none}.doc-tools{position:static}}
/* 1.6.7, owner: the default sizes inside documents (classes from the Admin setting; the owner's choice for document text only: text
   16 px, Heading 1 20 px bold, Heading 2 16 px bold, Heading 3 16 px bold italic; the app's own page headings keep 20 px), the Size
   menu's classes, and Zoom: --doc-zoom on the document box only (set by lib_doc.js) */
.doc-view,.doc-edit{--doc-zoom:1;--doc-t:1rem;--doc-h1:1.25rem;--doc-h2:1rem;--doc-h3:1rem;font-size:calc(var(--doc-t) * var(--doc-zoom))}
.doc-view h1,.doc-edit h1{font-size:calc(var(--doc-h1) * var(--doc-zoom));font-weight:700;font-style:normal}
.doc-view h2,.doc-edit h2{font-size:calc(var(--doc-h2) * var(--doc-zoom));font-weight:700;font-style:normal}
.doc-view h3,.doc-edit h3{font-size:calc(var(--doc-h3) * var(--doc-zoom));font-weight:700;font-style:italic}
.doc-view h1,.doc-view h2,.doc-view h3,.doc-edit h1,.doc-edit h2,.doc-edit h3{font-family:var(--body)}
.doc-t-16{--doc-t:1rem}.doc-t-18{--doc-t:1.125rem}.doc-t-20{--doc-t:1.25rem}.doc-t-22{--doc-t:1.375rem}.doc-t-24{--doc-t:1.5rem}.doc-t-28{--doc-t:1.75rem}.doc-t-32{--doc-t:2rem}
.doc-h1-16{--doc-h1:1rem}.doc-h1-18{--doc-h1:1.125rem}.doc-h1-20{--doc-h1:1.25rem}.doc-h1-22{--doc-h1:1.375rem}.doc-h1-24{--doc-h1:1.5rem}.doc-h1-28{--doc-h1:1.75rem}.doc-h1-32{--doc-h1:2rem}
.doc-h2-16{--doc-h2:1rem}.doc-h2-18{--doc-h2:1.125rem}.doc-h2-20{--doc-h2:1.25rem}.doc-h2-22{--doc-h2:1.375rem}.doc-h2-24{--doc-h2:1.5rem}.doc-h2-28{--doc-h2:1.75rem}.doc-h2-32{--doc-h2:2rem}
.doc-h3-16{--doc-h3:1rem}.doc-h3-18{--doc-h3:1.125rem}.doc-h3-20{--doc-h3:1.25rem}.doc-h3-22{--doc-h3:1.375rem}.doc-h3-24{--doc-h3:1.5rem}.doc-h3-28{--doc-h3:1.75rem}.doc-h3-32{--doc-h3:2rem}
.doc-view .s-16,.doc-edit .s-16{font-size:calc(1rem * var(--doc-zoom))}.doc-view .s-18,.doc-edit .s-18{font-size:calc(1.125rem * var(--doc-zoom))}
.doc-view .s-20,.doc-edit .s-20{font-size:calc(1.25rem * var(--doc-zoom))}.doc-view .s-24,.doc-edit .s-24{font-size:calc(1.5rem * var(--doc-zoom))}
.doc-view .s-28,.doc-edit .s-28{font-size:calc(1.75rem * var(--doc-zoom))}.doc-view .s-32,.doc-edit .s-32{font-size:calc(2rem * var(--doc-zoom))}
.zoom-bar{display:flex;align-items:center;gap:.5rem;margin:.5rem 0}
.zoom-bar[hidden]{display:none}
.zoom-btn{min-width:var(--lib-tap);min-height:var(--lib-tap);font-weight:700}
.zoom-pct{min-width:3.5rem;text-align:center;font-size:1rem}
.dd-sample{margin:1rem 0;max-width:48rem}

/* 1.6.7 fix: the zoom label never breaks */
.zoom-l,.zoom-pct{white-space:nowrap}
/* L-B4 1.6.8 (Track B): the Table view | Form view switch at the top of the table area: two parts, 44 px tall, the current part
   filled with the action colour (the gold buttons' fill and words: contrast as every gold button), visible at every width */
.view-seg{display:inline-flex;margin:10px 0 8px;border:1px solid var(--gold);border-radius:12px;overflow:hidden;max-width:100%}
.view-seg .seg{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:2.75rem;padding:0 20px;font:600 1rem var(--body);
  color:var(--ink);background:var(--card);text-decoration:none;white-space:nowrap}
.view-seg .seg + .seg{border-left:1px solid var(--gold)}
.view-seg .seg.on{background:var(--lib-foil);color:var(--on-accent);font-weight:700}
.view-seg .seg.on .zh{color:var(--on-accent);opacity:1}
.view-seg .seg:not(.on):hover{background:var(--page)}
@media (max-width:700px){.view-seg{display:flex;width:100%}.view-seg .seg{flex:1;padding:0 10px}}

/* L-B5 1.7.0 (Track B3): Arrange: the quiet first / last mark where a move cannot go */
.move-end{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 10px;font-size:1rem}
/* 1.7.1, owner: Library links. The Link box (two tabs, the search list as Bookcase › Shelf › Item buttons), a Link field's box with
   Pick beside it, links in tables (underlined, the theme's link colour) and Copy link. */
.link-dlg{width:min(40rem,calc(100vw - 2rem))}
.link-tabs{display:flex;gap:0;margin:0 0 .75rem}
.link-tabs .btn{border-radius:0;flex:1 1 0;justify-content:center}
.link-tabs .btn:first-child{border-radius:10px 0 0 10px}
.link-tabs .btn:last-child{border-radius:0 10px 10px 0;margin-left:-1px}
.link-tabs .btn.on{border-color:var(--gold);font-weight:700;box-shadow:inset 0 -3px 0 var(--gold)}
.link-pane[hidden]{display:none}
.link-msg{margin:.25rem 0 0;padding:.5rem .75rem;border-radius:8px;background:var(--bad-bg);color:var(--bad);font-size:1rem}
.link-msg:empty{display:none}
.link-list{list-style:none;margin:.5rem 0 0;padding:0;max-height:min(22rem,50vh);overflow:auto;border:1px solid var(--line);border-radius:10px}
.link-list li{margin:0;border-bottom:1px solid var(--line)}
.link-list li:last-child{border-bottom:0}
.link-list li.muted{padding:.75rem}
.link-list .link-item{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem;width:100%;min-height:var(--lib-tap);border:0;border-radius:0;text-align:left;white-space:normal}
.link-kind{font-size:1rem;font-weight:700}
.link-box{display:flex;gap:.5rem;align-items:center}
.link-box input{flex:1 1 auto;min-width:0}
.link-box .btn{flex:0 0 auto}
a.lib-link{text-decoration:underline;overflow-wrap:anywhere}
.copy-link{white-space:nowrap}
/* 1.7.1, owner: small symbol buttons, SHARED by every toolbar (documents now, tables next): <button class="tb-ico" aria-label="Undo 撤销"
   data-tip="Undo 撤销">↶</button>; a menu is <details class="tb-menu"><summary class="tb-ico" ...>¶<span class="tb-caret">▾</span>
   </summary><div class="tb-pop">...</div></details>. The tap stays 44 px; the name (English and Chinese) is in the tip (.tip-pop,
   lib_app.js tips()) and in aria-label. */
.tb-ico{display:inline-flex;align-items:center;justify-content:center;gap:.125rem;min-width:var(--lib-tap);min-height:var(--lib-tap);padding:0 .5rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:1.125rem;line-height:1;cursor:pointer}
.tb-ico:hover{background:color-mix(in srgb,var(--gold) 12%,var(--card))}
.tb-ico:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.doc-tools .tb.tb-ico{padding:0 .5rem;font-size:1.125rem}
details.tb-menu > summary.tb-ico{list-style:none}
details.tb-menu > summary.tb-ico::-webkit-details-marker{display:none}
details.tb-menu[open] > summary.tb-ico{border-color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
.tb-caret{font-size:1rem;margin-left:.125rem}
.tb-svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb-colour{font-weight:800;border-bottom:4px solid var(--gold);line-height:1.1}
.tb-mark{padding:0 .25rem;border-radius:4px;background:var(--warn-bg);color:var(--ink)}
.tb-size{font-size:1rem}.tb-size b{font-size:1.25rem}
.tb-ico sub{font-size:1rem;vertical-align:-.25em}
.tip-pop{position:fixed;left:var(--tip-x,0);top:var(--tip-y,0);z-index:1000;max-width:min(20rem,calc(100vw - 1rem));padding:.375rem .625rem;border-radius:8px;background:var(--ink);color:var(--card);font-size:1rem;line-height:1.35;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.tip-pop[hidden]{display:none}
details.tb-menu:not([open]) > .tb-pop{display:none}
.tb-pop.tb-pop-r{left:auto;right:0}
@media (max-width:480px){.doc-tools .tb-pop{max-width:calc(100vw - 2rem)}}

/* L-B6 1.7.2 (Track B4): the shelf list's Download menu (opens in place, so the list's scroll box never cuts it), the Index icon,
   the Index page and its clean print layout */
.row-acts .dl-menu{display:inline-block;position:static;vertical-align:top}
.row-acts .dl-menu > summary{list-style:none;cursor:pointer}
.row-acts .dl-menu > summary::-webkit-details-marker{display:none}
.row-acts .dl-pop{position:static;display:flex;flex-direction:column;align-items:stretch;gap:.375rem;margin:.375rem 0;padding:.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:10px;min-width:13rem}
.row-acts .dl-pop form{display:flex;flex-direction:column;gap:.375rem;margin:0}
.row-acts .dl-pop .btn{justify-content:flex-start;white-space:nowrap}
.row-acts .dl-pop .dl-hidden{display:flex;align-items:center;gap:.375rem;white-space:normal;font-weight:600;min-height:2.75rem}
.more-row .idx-ico{text-decoration:none}
.idx-shelf{margin:0 0 1.25rem}
.idx-h{font-size:1.375rem;margin:1rem 0 .5rem}
.idx-wrap{margin-left:1.5rem;max-height:none}
.idx-kind{font-size:1rem;margin-left:.375rem}
.idx-none{margin-left:1.5rem}
@media (max-width:700px){.idx-wrap,.idx-none{margin-left:.5rem}}
@media print{
  body.page-index > :not(main), body.page-index .no-print, body.page-index .flash, body.page-index .sheet-grip, #zen-nav, #zen-band,
  body.page-index footer, body.page-index .tip-pop{display:none !important}
  body.page-index{background:#fff;color:#000}
  body.page-index main{padding:0;margin:0;max-width:none}
  body.page-index .head{position:static;border:0}
  body.page-index .sort-btn{border:0;background:none;padding:0;font:inherit;color:#000}
  body.page-index .sheet-wrap{overflow:visible;max-height:none;border:0}
  body.page-index table.sheet{width:100%;border-collapse:collapse}
  body.page-index table.sheet th,body.page-index table.sheet td{border:0;border-bottom:1px solid #999;color:#000;background:#fff;padding:2px 6px}
  body.page-index a{color:#000;text-decoration:none}
  body.page-index .idx-shelf{break-inside:avoid-page}
}
/* 1.7.2: the icon set (lib_icons.svg): crisp at every size, the colour of the words */
.ico{width:1.375rem;height:1.375rem;display:block;flex:none}
a.tb-ico,summary.tb-ico{text-decoration:none;color:var(--ink)}
.row-acts .tb-ico,.arch-do .tb-ico{vertical-align:middle;margin:0 .125rem}
.row-acts form,.arch-do form{display:inline-block}
.tb-ico.tb-danger{color:var(--bad);border-color:var(--bad)}
table.sheet.idx{width:100%;min-width:0}
table.sheet.idx th,table.sheet.idx td{min-width:0;max-width:none}
@media (max-width:700px){table.sheet.idx td,table.sheet.idx th{overflow-wrap:anywhere}}
.copied-pop{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .5rem;font-size:1rem;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--gold);border-radius:8px;margin:0 .25rem;vertical-align:middle}
.icon-key{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;margin:.5rem 0 0;font-size:1rem}
.icon-key > span{display:inline-flex;align-items:center;gap:.375rem}
.icon-key .ico{width:1.25rem;height:1.25rem}
.row-acts{white-space:nowrap}

/* L-B7 1.7.4 (Track B5): selected items on a shelf: the check boxes (44 px taps), the bar above the list, the two dialogs */
.sel-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 0 8px}
.sel-hint{font-size:1rem}
.sel-btn{gap:6px}
.sel-btn .ico{width:1.25rem;height:1.25rem}
.sel-msg{font-weight:600;color:var(--ink)}
.sel-msg:empty{display:none}
table.sheet.items th.sel-h,table.sheet.items td.sel-c{min-width:3rem;width:3rem;max-width:3rem;padding:0;text-align:center;vertical-align:middle}
.sel-box{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;cursor:pointer}
.sel-box input{width:20px;height:20px;accent-color:var(--gold)}
table.sheet.items tr.selected td{background:color-mix(in srgb,var(--gold) 10%,var(--card))}
.sel-list{max-height:12rem;overflow:auto;margin:.5rem 0;padding-left:1.25rem}
.sel-fmt,.sel-how{border:0;padding:0;margin:.5rem 0;min-width:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.sel-fmt legend,.sel-how legend{width:100%;margin-bottom:4px}
.mv-tree{max-height:18rem;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:.5rem .75rem;margin:.25rem 0}
.mv-case > summary{min-height:2.75rem;display:flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.mv-shelves{list-style:none;margin:0 0 .5rem;padding-left:1.25rem}
.mv-new{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.mv-new input[type=text]{height:2.75rem;font-size:1rem;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);min-width:12rem}
.sel-err:empty{display:none}
@media (max-width:1200px){table.sheet.pc.items td.sel-c{width:auto;max-width:none;text-align:left}}
/* 1.7.5, owner: the Link box's From the Library is grouped Bookcase › Shelf › items (headings that open and close; the items indented
   under their shelf; the whole shelf or bookcase as its own quiet button at the end of the group) */
.link-list .link-g{margin:0}
.link-list .link-g > summary{display:flex;align-items:center;gap:.5rem;min-height:var(--lib-tap);padding:0 .75rem;cursor:pointer;font-weight:700;background:color-mix(in srgb,var(--gold) 8%,var(--card))}
.link-list .link-g2 > summary{padding-left:1.5rem;font-weight:600;background:var(--card)}
.link-list .link-shelves,.link-list .link-items{list-style:none;margin:0;padding:0}
.link-list .link-items .link-item{padding-left:2.5rem;flex-direction:row;align-items:center;gap:.5rem}
.link-list .link-items .link-kind{font-weight:400;min-width:6.5rem}
.link-list .link-whole{display:flex;align-items:center;gap:.5rem;width:100%;min-height:var(--lib-tap);border:0;border-radius:0;padding-left:2.5rem;text-align:left;white-space:normal}
.link-list .link-g2 .link-whole{padding-left:2.5rem}
.link-list > .link-case > .link-g > .link-whole{padding-left:1.5rem}
.link-list .link-whole .link-kind{font-weight:400;font-size:1rem}
.link-list .link-none{padding:.5rem .75rem .5rem 2.5rem}
.link-list li.link-case,.link-list li.link-shelf{border-bottom:1px solid var(--line)}
@media (max-width:480px){.link-list .link-items .link-item{flex-direction:column;align-items:flex-start;gap:0}.link-list .link-items .link-kind{min-width:0}}
/* 1.7.5: the Help guide's Chinese line under a key sentence */
.help-zh{margin-top:-.25rem}
/* 1.7.6, owner Q11: the Sensitive information card on a person's access page, and its column in the access grid */
.sens-card{margin:0 0 1rem;display:flex;flex-direction:column;gap:.5rem}
.sens-card h2{font-size:1.25rem}
.sens-form .fgrid{margin:0}
table.grid th.g-sens{white-space:nowrap}
table.grid td.g-sens select,form.f table.grid td.g-sens select{min-width:18rem;width:18rem}
.no-show{margin-left:.25rem}
/* 1.7.7 (owner E1): an item's description under its name on the shelf list; the Edit name and description dialog */
table.sheet.items td .item-desc{display:-webkit-box;font-weight:400;max-width:48ch;margin:.125rem 0 0;color:var(--ink)}
dialog.dlg.name-dlg textarea{min-height:6.5rem;width:100%;box-sizing:border-box}
.props-actions-gap,.props-dlg .actions .btn .ico{vertical-align:-.15em}
/* 1.7.8, owner S1-S4: the Find filters, results with Bookcase › Shelf and the description, the New (7 days) mark, the Index's Find box */
.find-filters{margin-top:4px}
@media (max-width:700px){.find-filters{margin-top:14px}}      /* 1.9.4: on a phone the filters keep the grid's 14 px from Find */
.find-new,.idx-new{white-space:nowrap;min-height:var(--lib-tap)}
.fld-btns .lib-idx{margin-right:8px}
.found-i{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.found-where{font-size:1rem}
.found-desc{flex-basis:100%;font-size:1rem;overflow-wrap:anywhere}
.pill.new-mark{background:var(--ok-bg);color:var(--ink);border:1px solid var(--ok);font-weight:700;white-space:nowrap}
.idx-find-form{max-width:900px;margin:0 0 12px}
@media print{.new-mark{border:1px solid #000;background:none;color:#000}}
/* 1.7.8, owner S3: the Index's last column New (7 days); at a phone width each line is a small card: Name, then Description, then New */
table.idx th.idx-newh,table.idx td.idx-newc{white-space:nowrap;width:1%}
.new-mark-t{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--ok-bg);color:var(--ink);border:1px solid var(--ok);font-weight:700;font-size:1rem}
@media (max-width:600px){
  table.idx,table.idx tbody,table.idx tr,table.idx td{display:block;width:auto;min-width:0;max-width:100%}
  table.idx{width:100%}
  table.idx thead{display:block}
  table.idx thead tr{display:flex;flex-wrap:wrap}
  table.idx thead th{flex:1 1 8rem;min-width:0;max-width:none;width:auto !important}
  table.idx thead th .sort-btn{white-space:normal;text-align:left;min-width:0;width:100%}
  table.idx tbody tr{padding:6px 0;border-bottom:1px solid var(--line)}
  table.idx td{border:0;padding:2px 8px}
  table.idx td.idx-newc:empty{display:none}
  table.idx .sheet-grip{display:none}
  table.idx th.idx-newh,table.idx td.idx-newc{width:auto}
}
@media print{.new-mark-t{background:none;color:#000;border:1px solid #000}}
/* 1.7.9, owner D2: the download rights in the access grid (two short Yes / No columns) */
table.grid th.g-dl{white-space:nowrap}
table.grid td.g-dl select,form.f table.grid td.g-dl select{min-width:7.5rem;width:7.5rem}
/* 1.7.9, checker on 1.7.8: the Index's check boxes each on one line (the row grows), Skip empty shelves, Find's count line */
.idx-boxes{display:flex;flex-wrap:wrap;gap:4px 16px}
.idx-boxes label,.find-arch,.find-new{white-space:nowrap}
.fld-btns .btn-row{flex-wrap:wrap;row-gap:6px}
body.idx-skip-empty section.idx-empty{display:none}
/* 1.8.0, owner E3: "Edit names" beside View / Edit on each bookcase and shelf of a person's access tree */
.nm-ticks{margin-left:12px}
.nm-from,.nm-word{margin-left:8px}
.nm-from,.from-case .zh{white-space:nowrap}
@media (max-width:700px){.nm-ticks{margin-left:0}}
@media (min-width:701px){.tree-lv > .nm-ticks,.tree-lv > .nm-word{grid-column:2;margin-left:0}.tree-lv > .nm-from{grid-column:3;margin-left:0}}

/* Sign in as, 1.9.0 2026-10-24 (owner request 2026-10-24; lib_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 and the CMC'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:1rem;color:#3A2E14;overflow-wrap:anywhere}
.act-eye{display:inline-block;margin-right:8px;font-size:1rem}
.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%}}
/* L-zip 1.9.1 (owner Z1-Z3): the zip dialog after a download's format */
.zip-dlg .zip-what{font-weight:600;overflow-wrap:anywhere;margin:0 0 10px}
.zip-dlg .zip-what:empty{display:none}
.zip-dlg .zip-q{font-size:1.125rem;margin:4px 0}
.zip-dlg .zip-step .actions .btn{min-height:var(--lib-tap,44px)}
.zip-dlg .zip-pws{margin-top:4px}
/* the password boxes take the house box (the same as a text box: lines 177, 331, 760), with the shared eye inside (zen_pw.css) */
form.f .zip-pws input[type=password],form.f .zip-pws .pw-wrap > input{font:inherit;font-weight:400;padding:0 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);width:100%;min-width:0;height:2.75rem;min-height:var(--lib-tap,44px);box-sizing:border-box;margin:0;font-size:1rem}
form.f .zip-pws > label.fld{grid-template-rows:1.5rem 2.75rem auto}
.zip-dlg .zip-err{color:var(--ink);font-weight:600}
.zip-dlg .zip-err:not(:empty){border-left:5px solid var(--bad);padding:6px 10px;margin:6px 0;background:var(--bad-bg)}
.zip-warn{margin:12px 0 10px;padding:10px 14px;border-radius:10px;border-left:5px solid var(--bad);background:var(--card);
  color:color-mix(in srgb,var(--bad) 78%,var(--ink));font-weight:600}
.zip-warn .zh{color:inherit}
.zip-warn .zip-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:4px}
.zip-warn .zip-links a{display:inline-flex;align-items:center;min-height:var(--lib-tap,44px);color:var(--lib-link);font-weight:600}
.zip-copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px}
.zip-copy-row .btn{min-height:var(--lib-tap,44px)}
.zip-copied{color:var(--ok);font-weight:600}
.zip-dlg .zip-help a{display:inline-flex;align-items:center;min-height:var(--lib-tap,44px)}
/* 1.9.1 polish: the Copy dialog's two choices stay on one line each at 390 (the words and their Chinese fit in 320 px) */
#copy-dlg .sel-how label.inline{flex-wrap:nowrap;white-space:nowrap}
@media (max-width:370px){#copy-dlg .sel-how label.inline{flex-wrap:wrap;white-space:normal}}
/* 1.9.2, owner: the shelf's set (Upload a file, Add table, Add document, Add shelf). 1.9.8 (owner, design rule 1.2): the look is the shared
   kit's subtle button (class="btn zn-key", zen_header.css section 8: a thin accent edge, a soft small shadow, a light tint on hover);
   only the layout lives here: a row, a 2 x 2 from 481 to 600 px, stacked below (each label on one line), an icon each. */
.prim-set{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center}
.prim-set > .btn .ico{width:1.25rem;height:1.25rem;flex:none}
@media (max-width:600px){.prim-set{display:grid;grid-template-columns:1fr 1fr;width:100%}.prim-set > .btn{justify-content:flex-start;padding:0 12px;min-width:0;white-space:nowrap}}
@media (max-width:480px){.prim-set{grid-template-columns:1fr}}      /* a phone: stacked, each label on one line */
/* 1.9.4 (checker on 1.9.3, design rule 5): Admin › Bookcases on a phone: the cards scroll in their own box, which ends at the bottom of
   the screen (--fit-top from lib_app.js fitBoxes), so the heading and "Add a bookcase" stay in view; never shorter than 16rem */
/* 1.9.5 (checker on 1.9.4): at every width, not only on a phone: the old .tablewrap height (100vh - 260px) assumed the list starts at
   260 px; on Admin › Bookcases it starts at 320, so its bottom sat below the screen and the page scrolled. Now the box ends at the bottom
   of the screen less what comes after it (--fit-below, the footer), so only the list scrolls */
.tablewrap.cases-wrap[data-fit-box]{max-height:max(16rem,calc(100dvh - var(--fit-top,16rem) - var(--fit-below,16px)));overflow:auto;overscroll-behavior:contain}
@media (max-width:700px){
  .tablewrap.cases-wrap[data-fit-box]{border:1px solid var(--line-2);border-radius:var(--radius);padding:8px}
}

/* L-acc 1.9.7 (owner A20): the person Access page: one table, a group per bookcase */
.acc-set{margin:0 0 14px;min-width:0}
.acc-set .acc-intro{overflow-wrap:anywhere;max-width:100%}
.acc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:6px 0 6px}
.acc-all{gap:8px}
.acc-legend{margin:0 0 10px;max-width:100%;overflow-wrap:anywhere}
/* checker on A20: a data-fit-box: it ends at the bottom of the screen less what follows it (the Save row), so the page does not scroll */
.tablewrap.acc-wrap[data-fit-box]{max-height:max(16rem,calc(100dvh - var(--fit-top,16rem) - var(--fit-below,16px)));overflow:auto;overscroll-behavior:contain}
.acc-set{padding:12px 18px}
.acc-set .acc-set-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:6px}
.acc-set .acc-set-f{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.acc-set .acc-set-l{font-weight:600}
.acc-set select.acc-sel{height:var(--lib-tap,44px);font:inherit;font-size:1rem;padding:0 30px 0 10px;border:1px solid var(--line);border-radius:8px;background-color:var(--card);color:var(--ink)}
table.acc{width:100%;border-collapse:collapse}
table.acc thead th{position:sticky;top:0;z-index:3;background:var(--page);color:var(--ink);font-weight:700;font-size:1rem;letter-spacing:0;text-transform:none;
  white-space:nowrap;padding:10px 14px;border-bottom:2px solid var(--line)}
table.acc thead th .zh{color:var(--lib-mu)}
table.acc tbody th,table.acc tbody td{position:static;text-transform:none;letter-spacing:0;font-size:1rem;color:var(--ink);background:transparent;
  padding:6px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle;text-align:left}
table.acc tbody th{font-weight:500}
table.acc td.acc-v{white-space:nowrap;width:1%}
table.acc tr.acc-bc > *{background:color-mix(in srgb,var(--gold-bg) 55%,var(--card));border-top:1px solid var(--line)}
table.acc tr.acc-bc th.acc-name{font-weight:700}
table.acc tr.acc-bc th.acc-name a{font-weight:700}
table.acc .acc-kind{font-weight:500;font-size:1rem;color:var(--lib-mu);white-space:nowrap}
/* design rules 1.3 (List pages): the first column stays when the table scrolls sideways; its heading stays in the corner */
table.acc tbody th.acc-name{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:inset -1px 0 0 var(--line-2)}
table.acc thead th:first-child{left:0;z-index:4}
table.acc tr.acc-bc > th.acc-name{background:color-mix(in srgb,var(--gold-bg) 55%,var(--card))}
table.acc .acc-indent{padding-left:2.25rem}
table.acc .acc-name a{overflow-wrap:anywhere}
table.acc select.acc-sel{height:var(--lib-tap,44px);min-height:var(--lib-tap,44px);font:inherit;font-size:1rem;padding:0 30px 0 10px;border:1px solid var(--line);
  border-radius:8px;background-color:var(--card);color:var(--ink);width:auto;min-width:7.5rem;max-width:100%}
table.acc .acc-from,.acc-legend .acc-from{color:var(--lib-mu);margin-left:10px;font-size:1rem;white-space:nowrap}
.acc-legend .acc-from{margin-left:0}
table.acc .acc-dash{color:var(--lib-mu)}
.acc-save{margin-top:12px}
@media (max-width:700px){
  .tablewrap.acc-wrap{border:0;background:transparent;padding:0}
  .tablewrap.acc-wrap[data-fit-box]{max-height:none;overflow:visible}       /* a phone: the cards grow the page (one scroll, never two) */
  table.acc,table.acc tbody,table.acc tr,table.acc th,table.acc td{display:block;width:auto}
  table.acc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.acc tbody.acc-case{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--card);margin:0 0 12px;overflow:hidden}
  table.acc tr.acc-bc > *{border-top:0}
  table.acc tr{border-bottom:1px solid var(--line-2);padding:6px 12px}
  table.acc tr.acc-bc{background:color-mix(in srgb,var(--gold-bg) 55%,var(--card))}
  table.acc tbody th,table.acc tbody td{border:0;padding:4px 0}
  table.acc tbody th.acc-name{position:static;box-shadow:none;background:transparent}
  table.acc td.acc-v{width:auto;display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:center;gap:4px 8px;white-space:normal}
  table.acc td.acc-v::before{content:attr(data-label);font-size:1rem;color:var(--lib-mu);font-weight:600;white-space:nowrap}
  table.acc td.acc-v > .acc-from{grid-column:1 / -1;justify-self:end;margin-left:0;white-space:nowrap}
  table.acc select.acc-sel{width:100%;min-width:0}
  table.acc .acc-indent{padding-left:0}
  table.acc tr.acc-sh th.acc-name::before{content:"› ";color:var(--lib-mu)}
}
.help-fig{margin:12px 0 16px}
.help-fig img{display:block;max-width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--radius)}
/* checker on A20: a compact head and settings row, so the table box gets the screen and the page itself does not scroll */
.head.acc-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;padding:4px 0 8px;margin-bottom:10px}
.head.acc-head .crumb{flex-basis:100%;margin:0}
.head.acc-head h1{font-size:30px}
.acc-set{margin:0 0 8px}
.acc-top{margin:2px 0 4px}
.acc-legend{margin:0 0 8px}
.acc-set .acc-set-f{flex-wrap:nowrap}
form.f .acc-set .acc-set-f > select{flex:none;width:auto;max-width:100%}
.acc-page main{padding-bottom:12px}
.acc-top{justify-content:flex-start}
.acc-set{padding:10px 18px}
.acc-set .acc-set-row{margin-top:0}
.head.acc-head .crumb{flex-basis:auto}
.acc-foot{display:flex;align-items:center;gap:6px 18px;margin-top:8px}
.acc-foot .acc-save{margin:0;flex:none}
.acc-foot .acc-legend{margin:0;flex:1 1 20rem;min-width:0}
@media (max-width:700px){.acc-foot{flex-wrap:wrap}}
.acc-set{padding:0;margin:0 0 6px}
.acc-top{margin:0 0 6px}
.head.acc-head{padding:2px 0 4px;margin-bottom:4px}
.acc-set{margin:0 0 4px}
.acc-top{margin:0 0 4px}
.acc-foot{margin-top:4px}
.acc-foot .acc-legend{line-height:1.4}
.acc-page main{padding-bottom:4px}
/* checker on 779dd5c: at 700 px and under the settings row is a 2-column grid (label, then the drop-down in the rest), so the three
   drop-downs share one left edge and stay inside the 16 px gutter; wider screens keep the one-line row */
@media (max-width:700px){
  .acc-set .acc-set-row{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 8px;align-items:center}
  .acc-set select.acc-sel{padding:0 24px 0 8px}
  .acc-set .acc-set-f{display:contents}
  form.f .acc-set .acc-set-f > select,.acc-set .acc-set-v{width:100%;max-width:100%;min-width:0;justify-self:stretch}
  .acc-set .acc-set-row > .muted{grid-column:1 / -1}
}
/* 1.9.8 (owner, design rule 1.2): a subtle key button (the kit's .zn-key) keeps its Chinese in the words' own ink: the gold button's
   .btn:not(.plain) .zh rule (the ink on the accent) is not for it */
.btn.zn-key .zh{color:inherit;opacity:1}