/* ==========================================================================
   WORLD DAILY · Apple-style layer (loaded last)
   Follows Apple's Liquid Glass guidance: glass is reserved for the floating control layer
   (nav, toolbar, tab bar, drawer, sheets). Buttons inside content are solid tinted fills
   ("prominent") or quiet grey fills (system fill) — never glass-on-glass.
   ========================================================================== */
:root{
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --sys-fill:rgba(120,120,128,.14);--sys-fill-2:rgba(120,120,128,.22);
  --tint-text:var(--accent);
  --card-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px -14px rgba(0,0,0,.28);
  --spring-soft:cubic-bezier(.25,.8,.3,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sys-fill:rgba(120,120,128,.26);--sys-fill-2:rgba(120,120,128,.36);--card-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -14px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--sys-fill:rgba(120,120,128,.26);--sys-fill-2:rgba(120,120,128,.36);--card-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -14px rgba(0,0,0,.7)}
/* forest dark: saturated green fill with white text instead of pastel-on-dark */
@media (prefers-color-scheme:dark){:root[data-style="forest"]:not([data-theme="light"]){--oxblood-hi:#3C9068;--oxblood:#2F7A55;--oxblood-lo:#246245;--on-accent:#fff}}
:root[data-style="forest"][data-theme="dark"]{--oxblood-hi:#3C9068;--oxblood:#2F7A55;--oxblood-lo:#246245;--on-accent:#fff}

/* ---------- content buttons: prominent fill / system fill ---------- */
.button,.reading-tools button,.reading-tools a:not([data-language]),.paper-nav a,.edition-footer a,.topline a,#reader-links a,.drawer-open{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;text-shadow:none!important;
  font-family:var(--ui)!important;font-weight:600!important;letter-spacing:0!important;border-radius:999px!important}
.button::before,.button::after,.reading-tools button::before,.reading-tools button::after,.reading-tools a::before,.reading-tools a::after,
.paper-nav a::before,.paper-nav a::after,.edition-footer a::before,.edition-footer a::after,.topline a::before,.topline a::after,#reader-links a::before,#reader-links a::after{display:none!important}
.button{min-height:44px;padding:0 22px!important;font-size:15px!important;gap:8px!important;justify-content:center!important}
.button:not(.secondary),.reading-tools [aria-pressed=true]{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),var(--oxblood)!important;color:var(--on-accent)!important;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 6px 16px -8px color-mix(in srgb,var(--oxblood) 70%,transparent)!important}
.button.secondary,.reading-tools button:not([aria-pressed=true]),.reading-tools a:not([data-language]),.paper-nav a,.edition-footer a,.topline a,#reader-links a,.drawer-open{
  background:var(--sys-fill)!important;color:var(--tint-text)!important;box-shadow:none!important}
.button:hover,.reading-tools button:hover:not(:disabled),.paper-nav a:hover,.drawer-open:hover{transform:none!important;filter:brightness(1.04)}
.button.secondary:hover,.reading-tools button:not([aria-pressed=true]):hover,.drawer-open:hover{background:var(--sys-fill-2)!important}
#latest-actions .text-button,.issue-row .text-button{font-family:var(--ui);font-weight:600;color:var(--tint-text)!important}
/* press: Apple "scale and bounce" — a soft spread with a thin ring of light, slow settle */
.is-pressed:is(.button,.reading-tools button,.reading-tools a,.paper-nav a,.edition-footer a,.topline a,#reader-links a,.drawer-open,.get-pill,.cat-tile,.tab-mode){
  transform:scale(1.035,.94)!important;filter:brightness(1.08)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 0 22px rgba(255,255,255,.25)!important;
  transition:transform .25s var(--spring-soft),box-shadow .25s,filter .25s!important}
.is-released:is(.button,.reading-tools button,.reading-tools a,.paper-nav a,.edition-footer a,.topline a,#reader-links a,.drawer-open,.get-pill,.cat-tile,.tab-mode){animation:settle2 1s var(--spring-soft)!important}
@keyframes settle2{0%{transform:scale(1.035,.94)}40%{transform:scale(.992,1.012)}100%{transform:scale(1)}}
.is-pressed:is(.hero-card,.story-card,.app-list a,.paper-cover){transform:scale(.975)!important;transition:transform .3s var(--spring-soft)!important}
.is-released:is(.hero-card,.story-card,.app-list a,.paper-cover){animation:settleCard .9s var(--spring-soft)}
@keyframes settleCard{0%{transform:scale(.975)}55%{transform:scale(1.004)}100%{transform:scale(1)}}

/* ---------- iOS segmented control (繁中 / English) ---------- */
.reading-tools .seg-lang{position:relative;display:inline-flex;padding:2px;border-radius:999px;background:var(--sys-fill)!important;border:0!important;touch-action:none;cursor:pointer;isolation:isolate}
.reading-tools .seg-lang .seg-thumb{position:absolute;z-index:0;top:2px;left:0;height:calc(100% - 4px);border-radius:999px;border:0!important;
  background:#fff!important;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04),0 0 0 .5px rgba(0,0,0,.04)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:transform .55s var(--spring-soft),width .55s var(--spring-soft)}
:root[data-theme="dark"] .reading-tools .seg-lang .seg-thumb{background:#636366!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .reading-tools .seg-lang .seg-thumb{background:#636366!important}}
.reading-tools .seg-lang a{all:unset;position:relative;z-index:1;cursor:pointer;padding:7px 18px!important;font:600 13px/1.2 var(--ui)!important;color:var(--ink)!important;opacity:.6;transition:opacity .3s,transform .35s var(--spring-soft)}
.reading-tools .seg-lang a[data-on]{opacity:1}
.seg.dragging .seg-thumb{transition:none!important}
.seg.dragging .seg-thumb{transform-origin:center}
.reading-tools .seg-lang.dragging .seg-thumb{box-shadow:0 6px 16px rgba(0,0,0,.2)!important}
.seg .lens{transform:scale(1.12)}
.seg-thumb.settle{animation:thumbSettle .9s var(--spring-soft)}
@keyframes thumbSettle{0%{scale:1.06 .92}45%{scale:.99 1.02}100%{scale:1 1}}

/* tab bar → tabbar.css */
.style-picker{display:none!important}
body{padding-bottom:104px}

/* ---------- App Store "Today" home ---------- */
.today{padding-top:22px!important}
.today-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 18px}
.today-date{margin:0 0 2px;font:600 13px/1.2 var(--ui);color:var(--muted);letter-spacing:.02em}
.today-title{margin:0;font:800 34px/1.1 var(--ui);letter-spacing:.01em;color:var(--ink)}
.today-count{margin:0 0 4px;font:500 13px var(--ui);color:var(--muted)}
.hero-card{position:relative;display:block;overflow:hidden;border-radius:22px;width:100%;height:clamp(320px,40vw,540px);color:#fff;text-decoration:none;
  box-shadow:var(--card-shadow);background:var(--slate);isolation:isolate;transition:transform .5s var(--spring-soft)}
.hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--spring-soft)}
.hero-card:hover img{transform:scale(1.03)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72))}
.hero-text{position:absolute;left:0;right:0;bottom:0;padding:22px 24px 24px;display:grid;gap:8px}
.hero-text strong{font:800 clamp(24px,3.4vw,36px)/1.25 var(--head-font,var(--serif));letter-spacing:.01em;text-wrap:balance}
.hero-dek{font:400 15px/1.6 var(--ui);opacity:.88;max-width:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eyebrow-s{font:700 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;opacity:.85;color:var(--c,inherit)}
.hero-text .eyebrow-s{color:rgba(255,255,255,.85)}
.shelf{margin-top:34px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:.5px solid var(--line);padding-top:14px;margin-bottom:12px}
.shelf-head h3{margin:0;font:800 22px/1.2 var(--ui);color:var(--ink)}
.shelf-head a{font:500 15px var(--ui);color:var(--tint-text);text-decoration:none}
.shelf-sub{font:500 13px var(--ui);color:var(--muted)}
.shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,320px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;margin:0 -2px;scrollbar-width:none}
.shelf-row::-webkit-scrollbar{display:none}
.story-card{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--glass-tint-strong,var(--paper));
  box-shadow:var(--card-shadow);text-decoration:none;color:var(--ink);min-width:0}
.card-art{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--slate)}
.card-art img{width:100%;height:100%;object-fit:cover;display:block}
.gen-art{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(120% 120% at 20% 10%,color-mix(in srgb,var(--c) 85%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000))}
.gen-art b{font:900 72px/1 var(--head-font,var(--serif));color:rgba(255,255,255,.9);text-shadow:0 4px 20px rgba(0,0,0,.18)}
.card-text{display:grid;gap:6px;padding:12px 14px 16px}
.card-text strong{font:700 17px/1.4 var(--head-font,var(--serif));text-wrap:balance}
.app-list{list-style:none;margin:0;padding:0}
.app-list li+li a{border-top:.5px solid var(--line)}
.app-list a{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:14px;padding:12px 0;color:var(--ink);text-decoration:none}
.app-icon{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;color:#fff;font:800 24px var(--head-font,var(--serif));
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 80%,#fff),color-mix(in srgb,var(--c) 85%,#000));box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
.app-text{display:grid;gap:3px;min-width:0}
.app-text strong{font:600 16px/1.35 var(--ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-text span{font:400 13px var(--ui);color:var(--muted)}
.get-pill{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:30px;padding:0 14px;border-radius:999px;background:var(--sys-fill);
  color:var(--tint-text);font:700 14px/1 var(--ui);text-decoration:none;white-space:nowrap}
.get-pill.solid{background:var(--oxblood);color:var(--on-accent)}
.paper-card{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:16px;border-radius:20px;background:var(--glass-tint);box-shadow:var(--card-shadow)}
.paper-cover{display:block;perspective:900px}
.paper-cover img{width:100%;display:block;border-radius:4px;box-shadow:0 12px 26px -10px rgba(0,0,0,.45);transform:rotateY(-12deg);transform-origin:left;transition:transform .8s var(--spring-soft)}
.paper-cover:hover img{transform:rotateY(0)}
.paper-info{display:grid;gap:6px;min-width:0}
.paper-info strong{font:700 18px var(--head-font,var(--serif))}
.paper-info>span{font:400 13px var(--ui);color:var(--muted)}
.paper-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cat-tile{all:unset;cursor:pointer;position:relative;display:flex;align-items:flex-end;justify-content:space-between;height:74px;padding:12px 14px;border-radius:16px;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 75%,#fff),color-mix(in srgb,var(--c) 85%,#000));box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 6px 16px -10px rgba(0,0,0,.4);overflow:hidden}
.cat-tile span{font:700 15px/1.2 var(--ui);text-shadow:0 1px 2px rgba(0,0,0,.2)}
.cat-tile b{font:800 26px/1 var(--ui);opacity:.9;font-variant-numeric:tabular-nums}
.cat-tile.tw{--c:var(--accent)}
.cat-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){
  .hero-card{height:clamp(380px,120vw,500px)}
  .paper-card{grid-template-columns:110px 1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- newspaper view: page turn while scrolling ---------- */
.flip-page{perspective:1800px;perspective-origin:50% 30%}
.flip-page>a{display:block;position:relative;transform-origin:left center;transform-style:preserve-3d;
  transform:translateY(var(--lift,0)) rotateY(var(--turn,0deg));will-change:transform}
.flip-shade{position:absolute;inset:0;pointer-events:none;border-radius:6px;
  background:linear-gradient(90deg,rgba(0,0,0,var(--shade,0)) 0%,rgba(0,0,0,calc(var(--shade,0) * .4)) 35%,rgba(0,0,0,0) 70%)}
@media(prefers-reduced-motion:reduce){.flip-page>a{transform:none}.flip-shade{display:none}}

.reading-tools .seg-lang a[data-on],.reading-tools .seg-lang a[aria-current=page]{color:var(--ink)!important}

.app-icon.has-photo{padding:0;overflow:hidden;position:relative}
.app-icon.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.app-icon.has-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--c)}
.card-art{position:relative}
.photo-credit{position:absolute;right:8px;bottom:6px;max-width:80%;font:500 9.5px/1.3 var(--ui);color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.6);text-align:right;pointer-events:none}
.hero-card .photo-credit{top:12px;bottom:auto;right:14px}
.photo-credits{margin:30px 0 0;font:400 12.5px/1.7 var(--ui);color:var(--muted)}
.photo-credits summary{cursor:pointer;font-weight:600;color:var(--tint-text)}
.photo-credits ul{margin:8px 0;padding-left:18px}
.photo-credits a{color:inherit}

/* top nav as a sliding segmented control */
.main-nav .seg-nav{position:relative;display:inline-flex;align-items:center;gap:0;padding:3px;border-radius:999px;touch-action:none;cursor:pointer;isolation:isolate;flex:none}
.main-nav .seg-nav a{all:unset;position:relative;z-index:1;cursor:pointer;padding:7px 16px;border-radius:999px;font:500 14px/1.2 var(--ui);color:var(--ink);opacity:.72;white-space:nowrap;transition:opacity .3s,color .3s,transform .45s var(--spring-soft)}
.main-nav .seg-nav a::after{display:none!important}
.main-nav .seg-nav a[data-on]{opacity:1;font-weight:600;color:var(--accent)}
.main-nav .seg-nav .seg-thumb{position:absolute;z-index:0;top:3px;left:0;height:calc(100% - 6px);border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18));box-shadow:inset 0 0 0 .6px rgba(255,255,255,.8),inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px -2px rgba(0,0,0,.18);
  transition:transform .6s var(--spring-soft),width .6s var(--spring-soft)}
:root[data-theme="dark"] .main-nav .seg-nav .seg-thumb{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05));box-shadow:inset 0 0 0 .6px rgba(255,255,255,.25),0 2px 8px -2px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .main-nav .seg-nav .seg-thumb{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05));box-shadow:inset 0 0 0 .6px rgba(255,255,255,.25),0 2px 8px -2px rgba(0,0,0,.5)}}
.main-nav .seg-nav.dragging .seg-thumb{top:-2px;height:calc(100% + 4px)}
.main-nav .seg-nav a.is-pressed{transform:none!important}
@media(max-width:600px){.main-nav .seg-nav a{padding:7px 11px;font-size:14px}}

.main-nav .seg-nav,.reading-tools .seg-lang{touch-action:pan-y}

/* font size: headlines and side notes follow the reader's size, with a visible toast */
.story h2{font-size:calc(var(--reader-size,20px) * 1.6)!important}
.story.lead h2{font-size:calc(var(--reader-size,20px) * 1.85)!important}
.overview li{font-size:calc(var(--reader-size,20px) - 3px)!important}
@media(max-width:600px){.story h2{font-size:calc(var(--reader-size,20px) * 1.35)!important}.story.lead h2{font-size:calc(var(--reader-size,20px) * 1.55)!important}}
.wd-toast{position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);padding:12px 20px;border-radius:16px;font:600 15px var(--ui);
  color:var(--ink);background:var(--glass-tint-strong);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 0 0 .5px var(--line),0 12px 30px -10px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s,transform .4s cubic-bezier(.3,1.3,.5,1)}
.wd-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* dark: quiet selection, white label (iOS) */
:root[data-theme="dark"] .main-nav .seg-nav .seg-thumb{background:rgba(255,255,255,.13)!important;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)!important}
:root[data-theme="dark"] .main-nav .seg-nav a[data-on]{color:var(--ink)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .main-nav .seg-nav .seg-thumb{background:rgba(255,255,255,.13)!important;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)!important}
:root:not([data-theme="light"]) .main-nav .seg-nav a[data-on]{color:var(--ink)!important}}