/* Theme toggle, the theme switch animation and hand-tuned dark values. Loads after the generated
   theme-dark*.css (scripts/build_theme.py), so rules here win. */
.theme-toggle.theme-toggle{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer;position:relative;transition:background-color .2s,transform .2s cubic-bezier(.2,.9,.3,1.4)}
.theme-toggle:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.theme-toggle:active{transform:scale(.88)}
.theme-toggle.theme-toggle .icon{width:1.2rem;height:1.2rem;grid-area:1/1;margin:0;transition:opacity .25s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
[data-theme-toggle] .t-auto,[data-theme-toggle] .t-sun,[data-theme-toggle] .t-moon{opacity:0;transform:rotate(-90deg) scale(.5)}
:root[data-theme-pref=system] [data-theme-toggle] .t-auto,:root[data-theme-pref=light] [data-theme-toggle] .t-sun,:root[data-theme-pref=dark] [data-theme-toggle] .t-moon,:root:not([data-theme-pref]) [data-theme-toggle] .t-auto{opacity:1;transform:none}
.mobile-theme{display:flex;align-items:center;gap:.7rem;width:100%;padding:.75rem .9rem;border-radius:.9rem;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.mobile-theme .icon{width:1.15rem;height:1.15rem;transition:opacity .25s,transform .45s}
.mobile-theme .t-auto,.mobile-theme .t-sun,.mobile-theme .t-moon{position:absolute}
.mobile-theme span{margin-left:1.85rem}
/* Hub -> platform cross-link */
.platform-link{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:999px;font-size:.82rem;font-weight:600;white-space:nowrap;background:linear-gradient(120deg,color-mix(in srgb,var(--ink) 7%,transparent),color-mix(in srgb,var(--ink) 3%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);transition:transform .2s,box-shadow .2s}
.platform-link:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent);color:inherit}
.platform-link .icon{width:1rem;height:1rem}
/* the header is at most ~1280px wide: with 獎學金 in the nav the platform link is an icon (its title and aria-label name it) */
.platform-link span{display:none}.platform-link{padding:.55rem}
@media (max-width:700px){.platform-link{display:none}}
.mobile-platform-link .icon:last-child{width:.9rem;height:.9rem;opacity:.6;margin-left:auto}
.theme-toggle-label{font-size:.82rem}

/* Circular reveal from the toggle (View Transitions). The hub's page-navigation transitions name parts of
   the page and switch the root snapshot off, so during a theme switch the whole page is one snapshot again. */
:root.theme-anim{view-transition-name:root!important}
:root.theme-anim *{view-transition-name:none!important}
:root.theme-anim::view-transition-old(root),:root.theme-anim::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.theme-anim::view-transition-new(root){animation:theme-reveal .55s cubic-bezier(.4,0,.2,1)}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--theme-x,50%) var(--theme-y,0))}to{clip-path:circle(150vmax at var(--theme-x,50%) var(--theme-y,0))}}

/* ---------- dark: hand-tuned ---------- */
:root[data-theme=dark]{color-scheme:dark;--bg:#111112;--surface:#1c1c1e;--ink:#ececee;--muted:#a1a4a9;--line:#323235;--accent:#f2f2f3;--accent-hover:#ffffff;--shadow:0 0 0 1px #ffffff12,0 8px 30px #00000059}
:root[data-theme=dark] img:not([src$=".svg"]){filter:brightness(.92)}
:root[data-theme=dark] ::selection{background:#4b5563;color:#fff}
/* Logos drawn in black on transparent stay readable. */
:root[data-theme=dark] img[src*="molekiu-lockup"],:root[data-theme=dark] img[src*="molekiu-dots"],:root[data-theme=dark] img[src*="mark.svg"]{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
/* Printed artefacts keep paper colours even in dark mode. */
:root[data-theme=dark] .printable-document,:root[data-theme=dark] .notice-ai-pages img{color-scheme:light}

/* 老師 | 學生・家長 switch (base.html): one size and one place in both versions, so the same spot switches
   back; the knob shows where you are and crosses over when clicked (site.js) before the page changes. */
.version-switch{position:relative;isolation:isolate;flex:none;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;margin:0 .25rem;padding:.2rem;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);text-decoration:none;white-space:nowrap;transition:box-shadow .2s}
.version-switch:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent);color:var(--ink)}
.version-switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.vs-opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.32rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--muted);transition:color .3s ease}
.vs-opt .icon{width:.95rem;height:.95rem}
.vs-knob{position:absolute;z-index:0;top:.2rem;bottom:.2rem;left:.2rem;width:calc((100% - .4rem) / 2);border-radius:999px;background:var(--ink);box-shadow:0 2px 8px rgb(0 0 0 / .16);transition:transform .38s cubic-bezier(.3,1.3,.5,1)}
.version-switch.is-family .vs-knob,.version-switch.is-switching:not(.is-family) .vs-knob{transform:translateX(100%)}
.version-switch.is-family.is-switching .vs-knob{transform:none}
.version-switch:not(.is-family):not(.is-switching) .vs-teacher,.version-switch.is-family:not(.is-switching) .vs-family,
.version-switch.is-switching:not(.is-family) .vs-family,.version-switch.is-family.is-switching .vs-teacher{color:var(--bg)}
@media (max-width:1300px){.vs-opt>span{display:none}.vs-opt{padding:.38rem .62rem}}
@media (max-width:1180px){.header-subscribe>span{display:none}.header-subscribe{padding-inline:.6rem}}   /* both versions, so the switch stays put */
@media (max-width:700px){.version-switch{display:none}}
@media (prefers-reduced-motion:reduce){.vs-knob,.vs-opt{transition:none}}
/* 熱門比賽專題 in the footer of every page (base.html, portal/landings.py FOOTER) */
.footer-topics{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.footer-topics span{font-size:.75rem;font-weight:700;color:var(--muted)}
.footer-topics a{font-size:.75rem;color:var(--muted);text-decoration:none}
.footer-topics a:hover{color:var(--ink);text-decoration:underline}

/* 熱門專題 index (templates/portal/_topic_tiles.html): both home pages and the foot of each topic page. A contents page,
   not a grid of icon tiles: hairlines, the count in large figures, live facts, and covers of real items that fan out on
   hover. site.js sets [data-animate] and then .is-in once the list scrolls into view; without it everything shows as is. */
.topic-section{margin:0 0 2.8rem}
.topic-section .section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.6rem}
.topic-section .section-heading h2{margin:.2rem 0 0}
.topic-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.6rem;margin:0;padding:0;list-style:none}
.topic-index>li{position:relative;min-width:0}
.topic-index>li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left;pointer-events:none}
.ti-row{position:relative;isolation:isolate;display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto 1.2rem;align-items:center;gap:.9rem;
  min-height:5.6rem;padding:.9rem .6rem .9rem .2rem;color:var(--ink);text-decoration:none}
/* hover: a wash sweeps in from the left */
.ti-row::before{content:"";position:absolute;inset:.35rem -.6rem;z-index:-1;border-radius:1rem;background:var(--surface);box-shadow:var(--shadow);
  transform:scaleX(.6);transform-origin:left;opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.ti-row:hover::before,.ti-row:focus-visible::before{transform:none;opacity:1}
.ti-count{display:flex;align-items:baseline;gap:.15rem}
.ti-count b{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ti-count small{font-size:.8rem;color:var(--muted)}
.ti-body{display:grid;gap:.3rem;min-width:0}
.ti-name{font-size:1.06rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-meta{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-size:.8rem;color:var(--muted)}
.ti-open{display:inline-flex;align-items:center;gap:.4rem;color:#0b8a5a;font-weight:700}
:root[data-theme=dark] .ti-open{color:#53d69a}
.ti-open i{position:relative;width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.ti-open i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:0}
/* covers of real items, stacked like photos; they fan out and straighten on hover */
.ti-covers{position:relative;width:7.2rem;height:3.4rem}
.ti-covers img{position:absolute;right:0;top:.2rem;width:3rem;height:3rem;object-fit:cover;border-radius:.7rem;border:2px solid var(--bg);
  box-shadow:0 6px 14px -8px rgb(0 0 0 / .45);z-index:calc(3 - var(--n));
  transform:translateX(calc(var(--n) * -1.25rem)) rotate(calc((var(--n) - 1) * 5deg));
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .4s ease}
.ti-row:hover .ti-covers img,.ti-row:focus-visible .ti-covers img{transform:translateX(calc(var(--n) * -2.15rem)) translateY(-.15rem) rotate(0)}
.ti-go{color:var(--muted);transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s}
.ti-row:hover .ti-go,.ti-row:focus-visible .ti-go{transform:translateX(4px);color:var(--ink)}

/* entrance, once (site.js): the line draws, the row rises, the covers drop in, the green dot pings twice */
.topic-index[data-animate]>li::before{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms)}
.topic-index[data-animate] .ti-row{opacity:0;transform:translateY(10px);transition:opacity .45s ease calc(var(--i) * 55ms + 80ms),transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms + 80ms)}
.topic-index[data-animate] .ti-covers img{opacity:0;transform:translate(.6rem,-.8rem) scale(.6) rotate(12deg)}
.topic-index.is-in>li::before{transform:none}
.topic-index.is-in .ti-row{opacity:1;transform:none}
.topic-index.is-in .ti-covers img{opacity:1;transform:translateX(calc(var(--n) * -1.25rem)) rotate(calc((var(--n) - 1) * 5deg));
  transition-delay:calc(var(--i) * 55ms + 260ms + (2 - var(--n)) * 70ms)}
.topic-index.is-in .ti-row:hover .ti-covers img{transform:translateX(calc(var(--n) * -2.15rem)) translateY(-.15rem) rotate(0);transition-delay:0s}
.topic-index.is-in .ti-open i::after{animation:ti-ping 1.4s ease-out calc(var(--i) * 55ms + .6s) 2}
@keyframes ti-ping{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@media (max-width:820px){
  .topic-index{grid-template-columns:minmax(0,1fr)}
  .ti-row{grid-template-columns:3.6rem minmax(0,1fr) auto 1rem;gap:.7rem;min-height:5rem}
  .ti-count b{font-size:2rem}
  .ti-covers{width:5.4rem;height:2.9rem}
  .ti-covers img{width:2.5rem;height:2.5rem;border-radius:.6rem}
}
@media (max-width:420px){.ti-covers img:nth-child(3){display:none}.ti-covers{width:4.4rem}}
@media (prefers-reduced-motion:reduce){.ti-row::before,.ti-covers img,.ti-go{transition:none}}
:root.reduceMotion .ti-row::before,:root.reduceMotion .ti-covers img,:root.reduceMotion .ti-go{transition:none}
/* 這些情報，值得留意: items the system added to fill the row (views.home_picks) */
.pick-auto{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--muted)}
.pick-auto .icon{width:.85rem;height:.85rem}