/* Shared UI source of truth. Page-specific layout belongs in app.css. */
:root{
 --ink:#092d50;--book-navy:var(--ink);--orange:#bd4b13;--book-orange:var(--orange);
 --muted:#596a70;--paper:#faf8f1;--surface:#fffdf8;--line:#d8d2c5;--mint:#edf0e5;
 --font-ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
 --font-title:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;--display:var(--font-title);
 --text-xs:12px;--text-sm:14px;--text-body:16px;--text-nav:17px;--text-brand:30px;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
 --radius-control:12px;--radius-card:12px;--radius-pill:999px;
 --control-height:48px;--control-compact:44px;--page-gutter:clamp(20px,4.5vw,80px);
}
body{font-family:var(--font-ui);font-size:var(--text-body);color:var(--ink)}
/* Exactly the same masthead on every route. */
.header{height:88px;padding:0 var(--page-gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-6);border-bottom:1px solid var(--line);background:var(--paper)}
.logo{display:flex;align-items:center;gap:var(--space-3);font:800 var(--text-brand)/1.25 var(--font-title);letter-spacing:2px;color:var(--ink);width:max-content}
.header .logo small{display:block;font:400 11px/1.8 var(--font-ui);letter-spacing:.4px}
.seal{font:18px/1.05 var(--font-title);padding:6px 7px;border:1px solid var(--orange);border-radius:4px;color:var(--orange);transform:rotate(-4deg)}
.header nav{display:flex;align-items:center;gap:var(--space-12);font:600 var(--text-nav)/1.5 var(--font-ui);white-space:nowrap}
.header nav a{padding:16px 0 12px;border-bottom:2px solid transparent}
.header nav a.active{border-color:var(--orange)}
.header .account{justify-self:end;white-space:nowrap}
.footer .logo{font-size:24px;margin-right:auto}
/* Common typography: role-based sizes, not per-page overrides. */
.page-heading h1{font:800 clamp(30px,3.2vw,44px)/1.5 var(--font-title);margin:0 0 var(--space-4)}
.section h2,.empty h2,.prose h2,.order-card h2,dialog h2{font:700 28px/1.5 var(--font-title)}
.card-body h3,.chapter-row h3,.info b{font:700 22px/1.6 var(--font-title)}
.page-heading p,.info p,.chapter-row p,.prose p,.order-card li,.discovery-copy p{font-size:var(--text-body);line-height:1.9}
.card-body p{font-size:var(--text-sm);line-height:1.8;min-height:50px}
.meta,.status,.results-count,.card-bottom,.notice,dialog p{font-size:var(--text-sm);line-height:1.7}
.eyebrow,.card-visual .tag,.footnote{font-size:var(--text-xs)}
/* Button variants share height, padding, weight, radius and interaction states. */
.primary,.secondary,.account,.discovery-link,.tool,.chip,.reading-controls button,.book-search button{
 display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:10px var(--space-6);
 border:1px solid var(--line);border-radius:var(--radius-pill);font:600 var(--text-body)/1.5 var(--font-ui);text-decoration:none;
 background:var(--surface);color:var(--ink);transition:background .15s,border-color .15s;
}
.primary,.discovery-link,.chip.selected{background:var(--ink);border-color:var(--ink);color:white}
.book-search button{background:var(--orange);border-color:var(--orange);color:white;min-height:var(--control-compact);padding:8px var(--space-4)}
.tool,.chip,.reader-toolbar .tool{min-height:var(--control-compact);font-size:var(--text-sm);padding:8px var(--space-4)}
.primary:hover,.discovery-link:hover{background:#174968;border-color:#174968}
.secondary:hover,.account:hover,.tool:hover,.chip:not(.selected):hover,.reading-controls button:not(:disabled):hover{background:#efeee5;border-color:#a79f8e}
button:disabled{opacity:.45;cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* Native select keeps keyboard/platform behavior; inset its arrow by 16px. */
.search-row{display:flex;gap:var(--space-3);align-items:stretch;margin:var(--space-6) 0}
.search-row input,dialog input{height:var(--control-height);padding:12px var(--space-4);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);font:400 var(--text-body)/1.5 var(--font-ui);color:var(--ink)}
.search-row .select-field{min-width:180px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);padding:0 var(--space-4);display:flex;align-items:center}
.search-row .select-field select{width:100%;height:46px;padding:0 24px 0 0;margin:0;border:0;border-radius:0;background:transparent;font:400 var(--text-body)/1.5 var(--font-ui);color:var(--ink);cursor:pointer}
.select-field:focus-within{outline:3px solid var(--orange);outline-offset:3px}
.select-field select:focus-visible{outline:none}
.book-search{min-height:56px;border-color:var(--line);padding:4px 5px 4px var(--space-6)}
.book-search input{font:400 var(--text-body)/1.5 var(--font-ui)}
/* Reusable spacing for content and form components. */
.container{max-width:1400px;padding-inline:var(--page-gutter)}
.page-heading{padding:var(--space-12) 0 var(--space-6)}
.section{padding:var(--space-12) 0}.section-head{gap:var(--space-6);margin-bottom:var(--space-6)}
.info,.order-card,.city-card{border-radius:var(--radius-card)}
.info,.card-body{padding:var(--space-6)}
.city-grid,.city-intro,.order-layout{gap:var(--space-6)}
.actions,.form-actions{gap:var(--space-3);flex-wrap:wrap;margin:var(--space-6) 0}
.chips{gap:var(--space-2);margin:var(--space-4) 0 var(--space-6)}
.chapter-row{padding:var(--space-6) 0;gap:var(--space-6)}
dialog{border-radius:16px;padding:var(--space-8)}
dialog label{font-size:var(--text-sm);margin:var(--space-4) 0 var(--space-2)}
.close{min-width:44px;min-height:44px;right:8px;top:8px}
.reader-menu a{min-height:48px;font-size:var(--text-body)}
.quiz button{min-height:48px;border-radius:var(--radius-control)}
@media(max-width:1000px){.header nav{gap:var(--space-6)}.header{gap:var(--space-4);grid-template-columns:auto 1fr auto}.header nav{justify-content:center}}
@media(max-width:700px){
 :root{--text-brand:24px;--text-nav:14px;--page-gutter:20px}
 .header{height:auto;min-height:112px;padding:12px var(--page-gutter) 4px;grid-template-columns:1fr auto;gap:4px 8px}
 .header nav{grid-column:1/-1;grid-row:2;gap:32px;width:100%;margin:0;display:flex}
 .header nav a{min-height:44px;padding:10px 0 8px}
 .header .logo small{font-size:9px;letter-spacing:0}.logo{gap:8px;letter-spacing:1px}.seal{font-size:15px}
 .header .account{font-size:14px;padding:8px 12px;min-height:44px}
 .page-heading{padding-top:32px}.page-heading h1{font-size:30px}
 .section{padding:32px 0}.info,.card-body,.order-card{padding:20px}.city-grid{gap:12px}
 .search-row{flex-wrap:wrap}.search-row input{flex-basis:100%}.search-row .select-field{width:100%;min-width:0}
 .search-row .select-field select{flex:1;font-size:16px}.primary,.secondary{padding-inline:20px}
 .reader-toolbar .tool{font-size:14px;min-height:44px}.reader-toolbar .tools{gap:8px}
 .footer{gap:16px}.footer .logo{width:100%}
}
@media(max-width:380px){.header{padding-inline:12px}.header .logo small{max-width:170px;white-space:normal}.header .account{font-size:12px;padding-inline:10px}}
@media print{.header{display:none!important}}
.page-heading .eyebrow{font-size:var(--text-xs);letter-spacing:2px}
.book-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font:600 14px/1.5 var(--font-ui);border-radius:var(--radius-pill)}
.book-cta.ready{font-size:16px}
@keyframes turn{from{opacity:.55;transform:perspective(1800px) rotateY(5deg)}to{opacity:1;transform:none}}
@media(max-width:700px){.book-cta,.book-cta.ready{font-size:12px;min-height:40px;padding:8px 12px}}