@font-face{font-family:"Gloock";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/gloock-latin.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/sourcesans3-latin.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/sourcesans3-italic-latin.woff2) format("woff2")}

:root{
  --bg:#f8f6f0;--paper:#fffdf8;--ink:#14213d;--text:#1f2533;--muted:#5b6170;--line:#ddd8cc;
  --accent:#b5401a;--navy:#13213f;--on-navy:#f8f6f0;--link:#1d4f91;
  --upd:#c4161c;--mark:#fff1a8;--mark-line:#c4161c;--card:#fffdf8;--btn:#ffffff;
  --serif:"Gloock",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1420;--paper:#151b29;--ink:#e9e6de;--text:#dcdad4;--muted:#9aa0ad;--line:#2a3243;
    --accent:#f08a5d;--navy:#0a0f1a;--on-navy:#e9e6de;--link:#8db8ff;
    --upd:#ff5a5f;--mark:#5a4a00;--mark-line:#ff7a7f;--card:#151b29;--btn:#1b2233;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1420;--paper:#151b29;--ink:#e9e6de;--text:#dcdad4;--muted:#9aa0ad;--line:#2a3243;
  --accent:#f08a5d;--navy:#0a0f1a;--on-navy:#e9e6de;--link:#8db8ff;
  --upd:#ff5a5f;--mark:#5a4a00;--mark-line:#ff7a7f;--card:#151b29;--btn:#1b2233;color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.55 var(--sans);overflow-x:hidden}
a{color:var(--link);text-underline-offset:2px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* banner */
.banner{background:var(--navy);color:var(--on-navy);text-align:center;font-size:15px;padding:8px 16px;line-height:1.4}
.banner a{color:var(--on-navy);font-weight:600}
.banner strong{color:#ffd27a}

/* masthead */
.mast{text-align:center;padding:26px 16px 18px;border-bottom:3px double var(--ink)}
.mast-link{display:inline-block;color:var(--ink);text-decoration:none}
.mast-inner{display:inline-flex;flex-direction:column;align-items:stretch}
.mast .big{font-family:var(--serif);font-size:clamp(64px,17vw,132px);line-height:.9;letter-spacing:-.01em}
.mast .spread{display:flex;justify-content:space-between;font-family:var(--serif);font-size:clamp(17px,4.2vw,30px);line-height:1.2}
.mast .spread .gap{width:.8em}
.mast .small:first-child{margin-bottom:4px}
.mast .small:last-child{margin-top:0}
.tagline{margin:10px 0 0;font-style:italic;color:var(--muted);font-size:18px}

/* nav */
.topnav{background:var(--paper);border-bottom:1px solid var(--line)}
.navrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:10px;padding-bottom:10px}
.topnav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:20px}
.topnav a.on{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.ed-pick{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:18px}
.ed-pick select{font-size:18px;font-weight:600}
select,input[type=search],button{font:inherit;font-size:16px;color:var(--text);background:var(--btn);border:1px solid var(--line);border-radius:6px;padding:7px 10px}
select{max-width:100%}
button{cursor:pointer;font-weight:600}
button:hover{border-color:var(--accent)}
.search{display:flex;align-items:center;gap:6px;flex:0 1 300px}
.search input{flex:1;min-width:0}
.search button{border:2px solid var(--accent);color:var(--accent)}
.beta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--accent);border:1px solid var(--line);border-radius:4px;padding:1px 6px;background:var(--bg);vertical-align:middle}
.display{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.theme-btn{white-space:nowrap}
.font-pick{display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;font-size:15px}
@media (max-width:640px){
  .navrow{gap:8px 18px}
  .navrow>a{order:1}
  .ed-pick{order:2;flex-basis:100%}
  .ed-pick select{flex:1}
}
/* top-right corner: search and Settings */
.corner{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:-12px 0 14px}
.settings-btn{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:var(--text);text-decoration:none;background:var(--btn);border:1px solid var(--line);border-radius:6px;padding:7px 12px;white-space:nowrap}
.settings-btn:hover,.settings-btn.on{border-color:var(--accent);color:var(--accent)}
@media (max-width:640px){.corner{margin:-14px 0 16px}.corner .search{flex:1 1 auto}}
/* Settings page */
.settings{display:grid;gap:14px;margin:18px 0 24px;max-width:560px}
.set-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.set-row select{width:100%}
.set-voice{display:flex;gap:8px;flex-wrap:wrap}
.set-voice select{flex:1 1 220px;min-width:0}
.settings-note{color:var(--muted)}
.preview{border-top:1px solid var(--line)}
.preview>summary{cursor:default}
.story.preview>summary::after,.story.preview[open]>summary::after{content:none}
@media (max-width:480px){.set-row{grid-template-columns:1fr;gap:4px}}

/* reading font choices (the masthead keeps its own face) */
:root[data-font="serif"]{--sans:Charter,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif}
:root[data-font="easy"]{--sans:Verdana,Tahoma,"DejaVu Sans","Segoe UI",sans-serif}
:root[data-font="easy"] body{letter-spacing:.01em;line-height:1.65}
:root[data-font="system"]{--sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}

/* section bar */
.secbar{border-bottom:1px solid var(--line);background:var(--bg);font-size:17px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.secbar .wrap{display:flex;gap:20px;overflow-x:auto;padding-top:10px;padding-bottom:10px;white-space:nowrap}
.secbar a{color:var(--ink);text-decoration:none}
.secbar a span{color:var(--muted);font-weight:600}

/* layout */
.layout{display:grid;grid-template-columns:1fr;gap:24px;padding-top:24px;padding-bottom:40px}
@media (min-width:900px){.layout{grid-template-columns:minmax(0,1fr) 300px}.col-side{position:sticky;top:16px;align-self:start}}
.kicker{margin:0;color:var(--accent);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:17px}
.ed-date{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(34px,7vw,56px);line-height:1.05;margin:6px 0 8px}
.byline{margin:0 0 14px;color:var(--muted)}
.byline strong{color:var(--text)}
.older{background:var(--paper);border-left:4px solid var(--accent);padding:8px 12px}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.tools button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.voice-opt{font-size:15px;color:var(--muted)}
.voice-pick{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--muted);font-weight:600;max-width:100%}
.voice-pick select{max-width:260px}
.voice-pick[hidden]{display:none}
.voice-note{font-size:14px;color:var(--muted);margin:4px 0}
.count{color:var(--muted);font-size:15px;margin:6px 0 0}
.legend{font-size:15px;color:var(--muted)}

/* sections + stories */
.sec{margin-top:28px}
.sec-h{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:30px;margin:0 0 4px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.story{border-bottom:1px solid var(--line)}
.story>summary{list-style:none;cursor:pointer;padding:14px 28px 14px 0;position:relative}
.story>summary::-webkit-details-marker{display:none}
.story>summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:24px;color:var(--muted);line-height:1}
.story[open]>summary::after{content:"\2212"}
.hl{display:inline;font-family:var(--sans);font-weight:700;font-size:1.111em;line-height:1.3;color:var(--ink);margin:0}
.followon .hl{font-size:1em}
.outlet{font-weight:400;color:var(--muted);font-size:.833em;white-space:nowrap}
.outlet::before{content:"\00b7  "}
.tag{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:4px;vertical-align:2px;white-space:nowrap}
.tag.upd{background:var(--upd);color:#fff}
.tag.new{border:1px solid var(--accent);color:var(--accent)}
.story .body{padding:0 0 16px}
.story .body p{margin:0 0 12px}
.story .body ul{margin:0 0 12px;padding-left:22px}
.next{border-left:3px solid var(--line);padding-left:10px}
.sources{font-size:.778em;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.sources strong{color:var(--text)}
.followon{margin:4px 0 12px 0;padding:0 12px;background:var(--paper);border:1px solid var(--line);border-radius:8px}
.followon:last-child{border-bottom:1px solid var(--line)}
mark.chg{background:var(--mark);color:inherit;text-decoration:underline;text-decoration-color:var(--mark-line);text-decoration-thickness:2px;text-underline-offset:3px;padding:0 1px}
.story.reading{background:var(--paper);box-shadow:-8px 0 0 var(--paper),-12px 0 0 var(--accent)}

/* price card */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.card h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:26px;line-height:1.15;margin:8px 0 10px}
.free-badge{display:inline-block;margin:0;background:#fff3c4;color:#6b4e00;border:1px solid #e6c65c;border-radius:6px;padding:3px 10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.terms-short{padding-left:20px;margin:10px 0}
.small-links{font-size:14px;margin:8px 0 0}

/* pages */
.prose{max-width:760px;padding-top:28px;padding-bottom:48px}
.prose h1{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:40px;line-height:1.1;margin:0 0 14px}
.prose h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:26px;margin:28px 0 8px}
.draft{background:var(--paper);border:1px dashed var(--line);padding:6px 10px;font-size:15px;color:var(--muted)}
.archive{list-style:none;padding:0}
.archive>li{padding:14px 0;border-bottom:1px solid var(--line)}
.a-date{font-family:var(--serif);font-size:24px;color:var(--ink)}
.archive a{text-decoration:none}
.a-n{color:var(--muted);font-size:15px;margin-left:6px}
.a-top{margin:6px 0 0;padding-left:20px;color:var(--muted);font-size:16px}
.search.big{max-width:none;margin:0 0 12px}
.results{padding-left:22px}
.results li{margin:0 0 16px}
.results .r-meta{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.results .r-t{font-weight:700;font-size:19px}
.results .r-x{margin:2px 0 0;font-size:16px}
.results mark{background:var(--mark);color:inherit}

/* footer */
.foot{border-top:3px double var(--ink);padding:20px 0 32px;color:var(--muted);font-size:15px}
.foot strong{color:var(--ink)}
.foot-links a{margin-right:14px}
.fine{font-size:14px}

@media print{.banner,.topnav,.secbar,.tools,.col-side,.foot-links{display:none}.story .body{display:block}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* audio: per-story Listen button and the player bar */
.story-listen{margin-left:10px;font-size:13px;padding:2px 9px;vertical-align:2px;white-space:nowrap}
.story.reading .story-listen{border-color:var(--accent);color:var(--accent)}
.story.current:not(.reading)>summary .hl{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.player{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-top:2px solid var(--accent);box-shadow:0 -4px 16px rgba(0,0,0,.12);padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
.player[hidden]{display:none}
.player-now{margin:0 auto 6px;max-width:1100px;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-now strong{color:var(--text)}
.player-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.player-btns button{min-width:84px}
body.has-player{padding-bottom:110px}
@media print{.player,.story-listen{display:none}}
@media (max-width:520px){.player-btns{flex-wrap:nowrap;gap:6px}.player-btns button{min-width:0;flex:1 1 0;padding:8px 0;font-size:14px;white-space:nowrap}body.has-player{padding-bottom:96px}}
/* SitrepSun wordmark */
.mast .big .sun{color:var(--accent)}

/* reader's text size and line spacing (stories only; saved on the device) */
.story{font-size:18px}
:root[data-size="s"] .story{font-size:16px}
:root[data-size="l"] .story{font-size:21px}
:root[data-size="xl"] .story{font-size:24px}
:root[data-lh="tight"] .story .body{line-height:1.4}
:root[data-lh="relaxed"] .story .body{line-height:1.8}
:root[data-lh="wide"] .story .body{line-height:2.1}
:root[data-lh="relaxed"] .story .body p{margin-bottom:16px}
:root[data-lh="wide"] .story .body p{margin-bottom:20px}
@media (max-width:640px){.display .font-pick.half{flex:1 1 40%;flex-direction:column;align-items:stretch;gap:2px}.display .font-pick.half select{width:100%}}

/* Page text: everything except the article body and the logo scales together */
:root[data-ui="s"]{--pz:.9}
:root[data-ui="l"]{--pz:1.15}
:root[data-ui="xl"]{--pz:1.3}
.banner,.corner,.tagline,.topnav,.secbar,.kicker,.ed-date,.byline,.tools,.voice-note,.count,.legend,.sec-h,.col-side,.foot,.player,.story>summary,.prose>:not(.preview){zoom:var(--pz,1)}
.story>summary{font-size:18px}   /* headlines follow Page text, not Article text */
.set-help{margin:-8px 0 2px;font-size:15px;color:var(--muted);grid-column:1/-1}
@media (min-width:481px){.set-help{padding-left:160px}}
@media (max-width:640px){
  .ed-pick select{min-width:0;width:100%;text-overflow:ellipsis}
}

/* masthead: sun icon left of the wordmark; space under SITREP scales with the logo */
:root{--sun:#e2622a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sun:#f08a5d}}
:root[data-theme="dark"]{--sun:#f08a5d}
.mast-logo{display:inline-flex;align-items:flex-start;gap:.1em;font-size:clamp(46px,14.5vw,132px)}
.mast-icon{width:.82em;height:.82em;flex:none;margin-top:.02em;color:var(--ink)}
.mast .big{font-size:1em;padding-bottom:.29em}
/* header round 3: Archive and About small in the top-left corner; no menu line */
.corner-links{display:flex;gap:14px;margin-right:4px}
.corner-links a{font-size:15px;font-weight:600;color:var(--muted);text-decoration:none}
.corner-links a:hover,.corner-links a.on{color:var(--accent)}
.corner-links a.on{text-decoration:underline;text-underline-offset:4px}
.mast + .secbar,.mast + main .secbar{border-top:0}
@media (max-width:640px){
  .corner{gap:6px}
  .corner-links{gap:10px}
  .corner-links a{font-size:14px}
  .settings-btn{padding:7px 9px}
  .settings-btn .set-label{display:none}
}
.corner{justify-content:flex-start}
.corner .search{margin-left:auto}
@media (max-width:380px){.corner-links{gap:8px}}

/* ===== Masthead round 5 ===== */
/* --L is the logo size (font size of "SitrepSun"); everything in the header scales from it.
   Gloock metrics (measured): capital S runs .061em-.839em down the .9em line box; with the
   .25em gap and the SITUATION REPORT line (.227em type, 1.2 line height) the two-line block
   is 1.422em tall and its letters end .049em above the bottom. The sun mark is cropped to its
   drawn area (56 x 33.5) and spans from the top of the S to the bottom of SITUATION REPORT:
   1.312em tall, 2.193em wide. */
.mast{--L:clamp(80px,calc(12.53vw - 32px),140px);text-align:left;padding:16px 16px 20px}
.mast-row{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px 24px}
.mast-left{min-width:0;flex:0 1 auto}
.mast-link{display:inline-block}
.mast-logo{display:inline-flex;align-items:flex-start;gap:.12em;font-size:var(--L)}
.mast-icon{width:2.193em;height:1.312em;margin-top:.061em;flex:none;color:var(--ink)}
.mast .big{font-size:1em;line-height:.9;letter-spacing:-.01em;padding:0 0 .25em}
/* SITUATION REPORT: same letter size; evenly spaced, 98% of SitrepSun's width, centered;
   the word gap is two letter-spaces (the gap span adds nothing of its own). */
.mast .spread{display:flex;justify-content:space-between;font-size:.227em;line-height:1.2;width:98%;margin:0 auto}
.mast .spread .gap{width:0;flex:0 0 0}
.mast .tagline{margin:10px 0 0}
/* weather icon colors (light / dark) */
:root{--wx-sun:#ef8a24;--wx-moon:#bfae4e;--wx-cloud:#b4bfcc;--wx-cloud2:#8794a4;--wx-rain:#2a6fbf;--wx-snow:#5a9bd0;--wx-bolt:#e1a400;--wx-ink:#34404f;--wx-hot:#d6452f;--wx-cold:#2a6fbf}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wx-moon:#e8dc92;--wx-cloud:#a3afbf;--wx-cloud2:#6f7c8e;--wx-rain:#73a9ff;--wx-snow:#aed3f2;--wx-ink:#c9cdd6;--wx-cold:#73a9ff}}
:root[data-theme="dark"]{--wx-moon:#e8dc92;--wx-cloud:#a3afbf;--wx-cloud2:#6f7c8e;--wx-rain:#73a9ff;--wx-snow:#aed3f2;--wx-ink:#c9cdd6;--wx-cold:#73a9ff}

/* weather box: one card; the Week ahead button sits inside, under high/low and place */
.wxbox{position:relative;flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.wxbox[hidden]{display:none}
.wx-ico{display:block;flex:none}
.wx-main{display:flex;align-items:center;gap:16px;width:100%;text-align:left;font-weight:400;background:none;border:0;border-radius:10px;padding:0;color:var(--text)}
.wx-main:hover .wx-t{color:var(--accent)}
.wx-ico-now{width:calc(var(--L) * 1.312);height:calc(var(--L) * 1.312)}
.wx-col{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:150px;padding-bottom:44px}
.wx-t{font-family:var(--serif);font-size:calc(var(--L) * .42);line-height:1;color:var(--ink);white-space:nowrap}
.wx-x{font-size:18px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-hl{font-size:15px;white-space:nowrap}
.wx-hs{display:none;white-space:nowrap}
.wx-p{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-week{position:absolute;bottom:16px;left:calc(16px + var(--L) * 1.312 + 16px);font-size:14px;padding:5px 14px;border-radius:999px;white-space:nowrap}
.wx-set{display:inline-flex;align-items:center;gap:12px;font-weight:700;color:var(--link);text-decoration:none}
.wx-set .wx-ico{width:calc(var(--L) * .7);height:calc(var(--L) * .7)}
.wxbox:has(.wx-set){border-style:dashed;border-width:2px}

/* tablet: logo on its own line, weather as a row under it */
@media (max-width:899px){
  .mast{--L:min(110px,calc((100vw - 32px) / 6.75))}
  .mast-row{flex-direction:column;align-items:center}
  .mast-left{text-align:center}
}
@media (max-width:899px){
  .wxbox{display:flex;align-items:center;gap:10px;width:100%;max-width:600px;padding:8px 12px;border-radius:12px}
  .wx-main{flex:1 1 auto;min-width:0;gap:10px}
  .wx-ico-now{width:44px;height:44px}
  .wx-col{flex-direction:row;align-items:baseline;gap:8px;max-width:none;padding:0;overflow:hidden}
  .wx-t{font-size:26px}
  .wx-x{font-size:15px;flex:0 1 auto}
  .wx-hl,.wx-p{font-size:14px}
  .wx-week{position:static;flex:none;font-size:13px;padding:6px 10px}
  .wx-set .wx-ico{width:34px;height:34px}
}

/* phone: menu row, then weather, then search, then the logo at full width */
@media (max-width:599px){
  .mast{--L:calc((100vw - 32px) / 6.75);display:grid;grid-template-columns:1fr auto;
        grid-template-areas:"links set" "wx wx" "search search" "logo logo";gap:10px 8px;padding:10px 16px 16px}
  .corner,.mast-row{display:contents}
  .corner-links{grid-area:links;align-self:center}
  .mast .settings-btn{grid-area:set;margin:0}
  .mast .corner .search{grid-area:search;margin:0;flex:none;width:100%}
  .wxbox{grid-area:wx;max-width:none;padding:6px 8px 6px 10px;gap:6px}
  .mast-left{grid-area:logo;text-align:center;margin-top:4px}
  .wx-main{gap:6px}
  .wx-ico-now{width:30px;height:30px}
  .wx-col{gap:5px}
  .wx-t{font-size:20px}
  .wx-x{font-size:13px;min-width:0}
  .wx-hl,.wx-p{display:none}
  .wx-hs{display:inline;font-size:13px}
  .wx-week{font-size:12px;padding:4px 8px}
  .secbar .wrap{flex-wrap:wrap;overflow:visible}
  .mast .tagline{font-size:15px;margin-top:8px}
}
/* forecast pop-up */
.wx-dlg{border:1px solid var(--line);border-radius:14px;padding:0;background:var(--paper);color:var(--text);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto}
.wx-dlg::backdrop{background:rgba(10,15,26,.55)}
.wx-dlg-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:14px 14px 6px 18px}
.wx-dlg-head h2{margin:0;font-family:var(--serif);font-weight:400;font-size:28px;color:var(--ink)}
.wx-dlg-place{margin:0;color:var(--muted);font-size:15px}
.wx-close{margin-left:auto;font-size:24px;line-height:1;padding:4px 12px}
.wx-tabs{display:flex;gap:4px;padding:0 18px;border-bottom:1px solid var(--line)}
.wx-tabs [role=tab]{border:0;border-bottom:3px solid transparent;border-radius:0;background:none;padding:10px 12px;color:var(--muted);font-weight:700}
.wx-tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.wx-pan{padding:4px 18px 8px}
.wx-pan:focus-visible,.wx-tabs [role=tab]:focus-visible,.wx-main:focus-visible,.wx-week:focus-visible,.wx-close:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.wx-list{list-style:none;margin:0;padding:0}
.wx-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.wx-row:last-child{border-bottom:0}
.wx-row .wx-ico{width:52px;height:52px}
.wx-row-name{margin:0;font:700 17px/1.3 var(--sans);color:var(--ink)}
.wx-row-short{margin:0;font-size:15px;color:var(--muted);line-height:1.35}
.wx-row-num{display:flex;flex-direction:column;align-items:flex-end;font-size:15px;white-space:nowrap}
.wx-row-t{font-weight:700;color:var(--ink)}
.wx-row-lo{color:var(--muted)}
.wx-row-pop{color:var(--link)}
.wx-src{margin:0;padding:6px 18px 16px;font-size:13px;color:var(--muted)}
@media (max-width:420px){.wx-row{grid-template-columns:40px 1fr auto;gap:10px}.wx-row .wx-ico{width:40px;height:40px}}

/* search box: always visible, clear border in light and dark */
:root{--search-b:#4a5263}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--search-b:#8f98aa}}
:root[data-theme="dark"]{--search-b:#8f98aa}
.search input[type=search]{display:block;border:2px solid var(--search-b);background:var(--btn);color:var(--text)}
.search input[type=search]::placeholder{color:var(--muted);opacity:1}
.search input[type=search]:focus{outline:3px solid var(--link);outline-offset:2px;border-color:var(--link)}
.corner .search{flex:0 1 300px;margin-left:auto}
@media (min-width:600px) and (max-width:640px){
  .corner{flex-wrap:wrap}
  .corner .settings-btn{margin-left:auto}
  .corner .search{order:3;flex:1 1 100%;margin-left:0}
}

/* why no photos */
.no-photos{font-size:15px;color:var(--muted);margin:2px 0 12px}
.prose .no-photos{font-size:inherit;color:var(--text)}
.howto{font-size:16px}
.set-place{display:flex;flex-direction:column;gap:8px;min-width:0}
@media (max-width:359px){
  .wx-t{font-size:18px}
  .wx-x,.wx-hs{font-size:12px}
  .wx-col{gap:4px}
  .wx-week{font-size:11px;padding:4px 7px}
}
.wx-hl{overflow:hidden;text-overflow:ellipsis}