/* One visual grammar per concept, across reading, travelling and editing. */
body{--shape:12px;--control:8px;--heading:var(--serif);--panel:var(--white);--divider:solid;--weight:500}
body[data-theme="glass"]{--shape:22px;--control:13px;--heading:var(--sans);--weight:650}
body[data-theme="night"]{--shape:6px;--control:6px;--panel:#162b37;--weight:400}
body[data-theme="aurora"]{--shape:24px;--control:12px;--heading:var(--sans);--panel:#25344d;--weight:650}
body[data-theme="mono"]{--shape:0px;--control:0px;--heading:ui-monospace,Consolas,"Microsoft YaHei",monospace;--divider:dashed;--weight:600}
body[data-concept="crystal"]{--shape:26px;--control:99px;--heading:var(--sans);--weight:650}
body[data-concept="journal"]{--shape:0px;--control:2px;--heading:Georgia,"Songti SC",STSong,serif;--weight:400}
body[data-concept="field"]{--shape:10px;--control:7px;--heading:var(--sans);--panel:#192d3b;--weight:650;color-scheme:dark}
.solid,.outline,.upload-label,.tabs button,.provider select,.row-tools button{border-radius:var(--control)}
.mini,.food-intro,.request,.small-place,.photo-note,.stop-link{border-radius:var(--shape)}
.chapter h2,.feature h3,.dialog-top h2,.trip-stop h3,.trip-intro h2{font-family:var(--heading);font-weight:var(--weight)}
.chapter-head .eyebrow,.mini>summary small{color:var(--accent)}
.edit-row input,.edit-row textarea,.edit-title,.edit-note,.add-form input,.add-form select{color:var(--ink);border-radius:var(--control);background:var(--white);border:1px solid var(--line)}
.edit-row{border-bottom-style:var(--divider)}
#edit .request{border:1px solid var(--line);background:var(--sage)}
#edit .edit-label{font-weight:650;letter-spacing:.04em;margin-top:26px}
#edit .dialog-head,#edit .dialog-foot{background:var(--paper)}
#edit .dialog-body{padding-bottom:30px}
#edit .edit-row label{font-size:12px;line-height:1.6}
#edit .edit-row input{min-height:44px}
.tabs button[aria-selected=true]{background:var(--green);color:var(--paper)}
.map-tab .map-order,.map-tab .map-order>summary{border-radius:var(--control)}
.map-tab .direct-map{background:var(--white);padding:6px;border:1px solid var(--line)}
.section-fold>summary,.text-fold>summary{border-radius:0}
.fold-icon{border-radius:var(--control);font-style:normal}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button:active{scale:.98}button{transition:background-color .15s,scale .15s}
.gallery .photo,.shopping-pair img{outline:1px solid #00000014;outline-offset:-1px}
[data-theme="night"] .gallery .photo,[data-theme="aurora"] .gallery .photo,[data-concept="field"] .gallery .photo{outline-color:#ffffff1a}
/* 01 — Native grouped lists. Repeated inset rows, soft square controls. */
[data-theme="glass"] .section-fold{background:var(--white);border:1px solid var(--line);padding:0 20px;border-radius:22px;margin:14px 0}
[data-theme="glass"] .feature{padding:12px 0 24px;box-shadow:none;background:none;margin:0}
[data-theme="glass"] .text-fold{padding-inline:12px;background:var(--paper);margin-top:6px;border:0;border-radius:12px}
[data-theme="glass"] .food-intro{background:var(--white);border:1px solid var(--line)}
[data-theme="glass"] .check{padding:16px 0}[data-theme="glass"] .checks{gap:0 22px}
[data-theme="glass"] .phrase b{font-family:var(--sans);font-size:22px}
[data-theme="glass"] .gallery-caption{font-family:var(--sans);font-weight:600}
[data-theme="glass"] #edit .edit-row{padding:16px;background:var(--white);border:1px solid var(--line);border-radius:20px;margin-top:12px}
[data-theme="glass"] #trip .trip-stop{border-radius:18px}
/* 02 — Quiet editorial: asymmetry, spacious photograph, narrow text column. */
body:not([data-theme]):not([data-concept]) .feature{grid-template-columns:1.25fr .85fr;gap:54px;align-items:start}
body:not([data-theme]):not([data-concept]) .feature>.gallery{padding-bottom:25px}
body:not([data-theme]):not([data-concept]) .feature .photo{height:460px;border-radius:100px 100px 4px 4px}
body:not([data-theme]):not([data-concept]) .feature>div{padding-top:38px}
body:not([data-theme]):not([data-concept]) .chapter-head>span{font:italic 58px Georgia,serif;color:var(--accent)}
body:not([data-theme]):not([data-concept]) .shopping-pair{grid-template-columns:1.5fr 1fr;align-items:end;gap:32px}
body:not([data-theme]):not([data-concept]) .shopping-pair figure:last-child{padding-bottom:40px}
body:not([data-theme]):not([data-concept]) #trip .trip-stop h3{font-size:22px}
body:not([data-theme]):not([data-concept]) #edit .edit-row{border:0;border-bottom:1px solid var(--line);padding:24px 0}
body:not([data-theme]):not([data-concept]) #edit .edit-row input{border-width:0 0 1px;border-radius:0;background:transparent}
/* 03 — Cinematic sequence: widescreen photos and restrained captions. */
[data-theme="night"] .chapter-head .eyebrow{letter-spacing:.25em;font-size:10px}
[data-theme="night"] .section-fold>summary{border-block:1px solid var(--line)}
[data-theme="night"] .feature>.gallery .photo{border-radius:2px;aspect-ratio:2.25;height:auto}
[data-theme="night"] .gallery-caption{padding:12px 0;letter-spacing:.1em;border-bottom:1px solid var(--line)}
[data-theme="night"] .section-fold{border:0}[data-theme="night"] .food-intro{background:transparent;border-left:2px solid var(--accent);padding:12px 22px}
[data-theme="night"] .facts{border:0;background:var(--panel);padding:18px}
[data-theme="night"] .mini{background:var(--panel);border-left:2px solid var(--accent)}
[data-theme="night"] #trip .trip-intro img{border-radius:2px}
[data-theme="night"] #trip .tabs{background:transparent;padding:0;border-radius:0;gap:8px}
[data-theme="night"] #trip .tabs button{background:transparent;border-bottom:2px solid transparent;border-radius:0}
[data-theme="night"] #trip .tabs button[aria-selected=true]{border-bottom-color:var(--accent);color:var(--ink)}
[data-theme="night"] #edit .edit-row{background:transparent;border-left:1px solid var(--line);border-radius:0;padding-left:18px}
[data-theme="night"] #edit .edit-row input,[data-theme="night"] #edit .edit-row textarea{background:var(--panel)}
/* 04 — Modular cockpit: compact metric groups and contained workspaces. */
[data-theme="aurora"] .facts{gap:8px;border:0;padding:0}
[data-theme="aurora"] .facts>div{border-radius:12px;background:var(--sage);padding:14px}
[data-theme="aurora"] .text-fold{border:1px solid var(--line);border-radius:12px;margin-top:8px;padding:0 12px}
[data-theme="aurora"] .food-intro{background:var(--panel);border:1px solid var(--line)}
[data-theme="aurora"] .phrase b{font-family:var(--sans);font-weight:600;font-size:21px}
[data-theme="aurora"] #edit .edit-row{padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:18px;margin-bottom:12px}
[data-theme="aurora"] #edit .add-form,[data-theme="aurora"] #edit .references{background:var(--panel);padding:14px;border-radius:18px}
[data-theme="aurora"] #trip .trip-stats>div{border:1px solid var(--line);border-radius:8px;padding:5px 8px}
[data-theme="aurora"] #trip .trip-stats{gap:8px}
/* 05 — Functional travel archive: ledger rows, mono labels, stamped squares. */
[data-theme="mono"] .eyebrow,[data-theme="mono"] .gallery-caption,[data-theme="mono"] .tabs button,[data-theme="mono"] .edit-label{font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em}
[data-theme="mono"] .gallery .photo{border-radius:0}
[data-theme="mono"] .facts{border:1px solid var(--ink);padding:0;gap:0}
[data-theme="mono"] .facts>div{padding:12px;border-right:1px solid var(--line)}
[data-theme="mono"] .food-intro{background:transparent;border:1px solid var(--ink)}
[data-theme="mono"] .section-fold>summary{border-bottom:1px dashed var(--line)}
[data-theme="mono"] .phrase{border:1px solid var(--ink);padding:18px;margin:14px 0}
[data-theme="mono"] #edit .edit-row{background:transparent;border-block:1px dashed var(--ink);border-radius:0;margin:16px 0}
[data-theme="mono"] #trip .tabs{border:1px solid var(--ink);padding:0;border-radius:0;gap:0}
[data-theme="mono"] #trip .tabs button{border-radius:0;border-right:1px solid var(--line)}
[data-theme="mono"] #trip .trip-stop h3{font-family:var(--sans)}
/* 06 — Photo companion: soft floating capsules, horizontal photo cards. */
[data-concept="crystal"] .new-header h1{font-family:var(--sans);font-weight:650;font-size:clamp(38px,5vw,68px)}
[data-concept="crystal"] .feature,[data-concept="crystal"] .feature.compact{grid-template-columns:155px 1fr;gap:24px;align-items:start}
[data-concept="crystal"] .gallery .photo{height:210px;border-radius:20px}
[data-concept="crystal"] .gallery-caption{font-size:9px;flex-wrap:wrap;gap:8px}
[data-concept="crystal"] .feature h3{font-family:var(--sans);font-size:27px}
[data-concept="crystal"] .section-fold>summary{padding:15px 0}
[data-concept="crystal"] .text-fold{border:0;background:var(--paper);padding:0 15px;margin-top:8px;border-radius:16px}
[data-concept="crystal"] .facts{border:0;gap:18px;padding:0}
[data-concept="crystal"] .day{padding:0 18px;margin:12px 0;background:var(--paper);border:0;border-radius:22px}
[data-concept="crystal"] .day-body{padding-left:0}
[data-concept="crystal"] .shopping-pair .photo{border-radius:22px}
[data-concept="crystal"] #trip .tabs{border-radius:99px;background:var(--sage);padding:4px}
[data-concept="crystal"] #trip .tabs button{border-radius:99px}
[data-concept="crystal"] #trip .trip-intro img{border-radius:99px}
[data-concept="crystal"] #edit .edit-row{padding:16px;border:0;border-radius:22px;background:white;margin-bottom:12px}
[data-concept="crystal"] #edit .edit-row input,[data-concept="crystal"] #edit .edit-row textarea{border-radius:10px;background:var(--paper)}
/* 07 — Printed journal: marginal notes and typeset folios, no rounded cards. */
[data-concept="journal"] .chapter-head .eyebrow{letter-spacing:.15em;font-size:10px}
[data-concept="journal"] .gallery-caption{font-family:Georgia,serif;font-size:10px}
[data-concept="journal"] .section-fold>summary{border-bottom:1px solid var(--line);margin-bottom:8px}
[data-concept="journal"] .day-no{font:42px Georgia,serif;color:var(--accent)}
[data-concept="journal"] .mini{background:transparent;border-block:3px double var(--line)}
[data-concept="journal"] .stop-strip{display:block}
[data-concept="journal"] .stop-link{display:grid;grid-template-columns:80px 1fr;gap:5px 15px;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 0}
[data-concept="journal"] .stop-link span{grid-column:2}
[data-concept="journal"] .stop-link b{margin:0}
[data-concept="journal"] .facts{border-block:3px double var(--line);font-family:Georgia,var(--sans)}
[data-concept="journal"] .food-intro{background:none;border:1px solid var(--line)}
[data-concept="journal"] .phrase{border-left:2px solid var(--accent);padding-left:20px}
[data-concept="journal"] #edit .edit-row input{background:none;border-width:0 0 1px;border-radius:0}
[data-concept="journal"] #edit .edit-row textarea{background:var(--white);border-style:dotted}
[data-concept="journal"] #edit .request{background:none;border-block:3px double var(--line)}
/* 08 — Field instrument: map + waypoint hierarchy and compact operational rows. */
[data-concept="field"] .periods{display:block;border-left:2px solid var(--accent);padding-left:18px}
[data-concept="field"] .periods>div{display:grid;grid-template-columns:45px 1fr;gap:12px;margin:10px 0}
[data-concept="field"] .day{background:var(--panel);border:1px solid var(--line);padding:0 18px;border-radius:10px;margin-bottom:14px}
[data-concept="field"] .day-no{font:600 24px ui-monospace,Consolas,monospace}
[data-concept="field"] .day-body{padding-left:0}
[data-concept="field"] .mini{background:var(--paper);border:1px solid var(--line)}
[data-concept="field"] .facts{border:0;background:var(--panel);padding:12px}
[data-concept="field"] .text-fold{border-left:2px solid var(--line);padding-left:12px;margin:8px 0}
[data-concept="field"] .food-intro{background:var(--panel);border-left:3px solid var(--accent)}
[data-concept="field"] .phrase b{font:600 21px var(--sans)}
[data-concept="field"] #trip .trip-stop .eyebrow{font-family:ui-monospace,Consolas,monospace;color:var(--accent)}
[data-concept="field"] #trip .tabs{background:transparent;padding:0;border-radius:0;gap:4px}
[data-concept="field"] #trip .tabs button{border-radius:7px;background:var(--panel)}
[data-concept="field"] #trip .tabs button[aria-selected=true]{background:var(--accent);color:#172316}
[data-concept="field"] #edit .edit-row{background:var(--panel);padding:14px;border-left:3px solid var(--accent);margin:12px 0;border-radius:0 10px 10px 0}
[data-concept="field"] #edit .edit-row input{font-variant-numeric:tabular-nums}
@media(max-width:760px){body:not([data-theme]):not([data-concept]) .feature{display:block}body:not([data-theme]):not([data-concept]) .feature>.gallery{width:88%;padding-bottom:0}body:not([data-theme]):not([data-concept]) .feature .photo{height:330px;border-radius:80px 80px 3px 3px}body:not([data-theme]):not([data-concept]) .feature>div{padding-top:24px}body:not([data-theme]):not([data-concept]) .shopping-pair{gap:14px}body:not([data-theme]):not([data-concept]) .shopping-pair figure:last-child{padding-bottom:20px}[data-theme="night"] .feature>.gallery .photo{aspect-ratio:1.6;height:auto}[data-theme="glass"] .section-fold{padding:0 14px}[data-concept="crystal"] .feature,[data-concept="crystal"] .feature.compact{grid-template-columns:88px 1fr;gap:14px}[data-concept="crystal"] .gallery .photo{height:150px;border-radius:15px}[data-concept="crystal"] .feature h3{font-size:23px}[data-concept="crystal"] .facts{flex-wrap:wrap;gap:8px}[data-concept="crystal"] .day{padding-inline:12px}.facts{flex-wrap:wrap}.facts>div{min-width:70px}.new-header .clock{flex-wrap:wrap}.edit-row{min-width:0}.edit-row>div{min-width:0}}
@media(max-width:360px){[data-concept="crystal"] .feature,[data-concept="crystal"] .feature.compact{grid-template-columns:1fr}[data-concept="crystal"] .gallery .photo{height:200px}.chapter-head h2{overflow-wrap:anywhere}}
@media(max-width:760px){:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .feature{align-items:start;grid-template-columns:110px minmax(0,1fr);gap:12px 16px}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .feature>div{display:contents}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .feature>div>*{grid-column:1/-1;min-width:0}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .feature>.gallery{grid-column:1;grid-row:1/4;min-width:0}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .feature>div>.eyebrow{grid-column:2;grid-row:1;font-size:10px;align-self:end}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .feature>div>h3{grid-column:2;grid-row:2;margin:0;align-self:center}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .feature>div>.english{grid-column:2;grid-row:3;margin:0;font-size:14px}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .gallery .photo{height:145px}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .gallery-controls{flex-wrap:wrap;gap:4px}:is([data-concept="crystal"],[data-concept="journal"],[data-concept="field"]) .gallery-controls [data-counter]{flex-basis:100%}.gallery-controls{flex-wrap:wrap}button:active{scale:.96}}
@media(prefers-reduced-motion:reduce){button{transition:none}button:active{scale:1}}