/* ─────────────────────────────────────────────
   au.cloudhyc.com · 墨爾本・雪梨十日 百科全書實戰版
   配色：尤加利綠（全站）、雅拉河藍（墨爾本）、赭石橙（雪梨）
   ───────────────────────────────────────────── */
:root{
  --sand:#F3EEE4;
  --paper:#FFFDF8;
  --sunk:#E9E2D4;
  --ink:#1E2321;
  --soft:#5B655F;
  --faint:#8A938D;
  --line:#DCD4C4;
  --line-strong:#C3B9A5;

  --gum:#3E6B4F;        /* eucalyptus */
  --gum-wash:#E1EDE4;
  --mel:#2E5A7A;        /* Yarra blue */
  --mel-wash:#E0EBF2;
  --syd:#BF6229;        /* ochre */
  --syd-wash:#F7E7DA;
  --air:#6E7A75;
  --air-wash:#E6E9E7;
  --alert:#B23A2E;
  --alert-wash:#F6E0DC;
  --gold:#C89B38;
  --gold-wash:#F6EDD6;

  --shadow:0 1px 2px rgba(30,35,33,.05), 0 10px 30px -18px rgba(30,35,33,.25);
  --r:14px;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",Georgia,serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,4vw,40px);
  --measure:68ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sand:#141917; --paper:#1C2320; --sunk:#0F1412;
    --ink:#E8ECE9; --soft:#A2ACA6; --faint:#7E8983;
    --line:#2B3532; --line-strong:#3C4844;
    --gum:#8BC4A0; --gum-wash:#1B2A21;
    --mel:#8AB8DA; --mel-wash:#182732;
    --syd:#E5A26E; --syd-wash:#332318;
    --air:#9AA5A0; --air-wash:#222927;
    --alert:#EF8A7E; --alert-wash:#33201D;
    --gold:#E0B85C; --gold-wash:#2E2717;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --sand:#141917; --paper:#1C2320; --sunk:#0F1412;
  --ink:#E8ECE9; --soft:#A2ACA6; --faint:#7E8983;
  --line:#2B3532; --line-strong:#3C4844;
  --gum:#8BC4A0; --gum-wash:#1B2A21;
  --mel:#8AB8DA; --mel-wash:#182732;
  --syd:#E5A26E; --syd-wash:#332318;
  --air:#9AA5A0; --air-wash:#222927;
  --alert:#EF8A7E; --alert-wash:#33201D;
  --gold:#E0B85C; --gold-wash:#2E2717;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:74px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif); margin:0; line-height:1.3; text-wrap:balance}
p{margin:0}
a{color:var(--gum); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gum); outline-offset:3px; border-radius:3px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.wrap{max-width:1040px; margin:0 auto; padding-inline:var(--gut)}
.kicker{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
b,strong{font-weight:600}

/* ───── hero ───── */
.hero{
  position:relative; padding-block:clamp(44px,8vw,84px) clamp(36px,6vw,60px);
  background:
    radial-gradient(900px 420px at 10% -10%, var(--mel-wash), transparent 70%),
    radial-gradient(800px 400px at 95% 110%, var(--syd-wash), transparent 70%),
    var(--sand);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:clamp(24px,4vw,48px); align-items:start}
.hero-grid > *{min-width:0}
@media (max-width:820px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero .eyebrow{font-family:var(--mono); font-size:13px; color:var(--soft); letter-spacing:.04em}
.hero h1{font-size:clamp(36px,7.4vw,66px); font-weight:900; letter-spacing:-.01em; margin-block:10px 14px}
.hero h1 small{display:block; font-size:.42em; font-weight:700; color:var(--soft); letter-spacing:.02em; margin-top:6px}
.hero .lead{max-width:var(--measure); color:var(--soft); font-size:15.5px}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chip{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px;
  padding:5px 12px; border-radius:999px; border:1px solid currentColor; color:var(--soft); background:transparent;
}
.chip.mel{color:var(--mel)} .chip.syd{color:var(--syd)} .chip.gum{color:var(--gum)}
.chip.count{color:var(--alert); font-weight:600; border-width:1.5px}

.hero-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:20px clamp(16px,2.5vw,24px);
}
.hero-card h2{font-size:17px; margin-bottom:12px; display:flex; align-items:baseline; gap:10px}
.hero-card h2 .kicker{font-size:10.5px}
.facts{margin:0; display:grid; gap:12px}
.facts > div{display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:start; font-size:14px}
.facts dt{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-top:4px}
.facts dd{margin:0; color:var(--ink)}
.facts dd small{display:block; color:var(--soft); font-size:12.5px; line-height:1.5; margin-top:1px}
.flight{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.flight .code{font-family:var(--mono); font-size:12px; color:var(--gum); font-weight:600; padding:1px 7px; border:1px solid var(--gum); border-radius:4px}
.flight .t{font-family:var(--mono); font-size:14px; font-weight:500}
.flight .arrow{color:var(--faint)}
.lockline{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line-strong); font-size:13px; color:var(--soft)}
.lockline b{color:var(--alert)}

/* ───── weather strip ───── */
.wx{margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){.wx{grid-template-columns:1fr}}
.wx-card{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:74px; min-width:0}
.wx-card h3{font-size:13px; font-family:var(--sans); font-weight:600; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.wx-card h3 span{font-family:var(--mono); font-size:11px; color:var(--faint); font-weight:400}
.wx-days{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(52px,1fr); gap:4px; margin-top:8px; overflow-x:auto; padding-bottom:2px}
.wx-day{text-align:center; font-family:var(--mono); font-size:11px; color:var(--soft); padding:6px 2px; border-radius:8px; background:var(--sunk)}
.wx-day.trip{background:var(--gum-wash); color:var(--ink)}
.wx-day .d{font-weight:600}
.wx-day .ic{font-size:17px; line-height:1.3}
.wx-day .tt{font-size:11px}
.wx-day .pp{font-size:10px; color:var(--mel)}
.wx-note{font-size:12px; color:var(--faint); margin-top:6px}

/* ───── sticky nav ───── */
.topnav{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-scroll{
  display:flex; gap:6px; overflow-x:auto; padding:9px var(--gut); scrollbar-width:none;
  max-width:1040px; margin:0 auto; -webkit-overflow-scrolling:touch;
}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll a{
  flex:0 0 auto; font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--soft);
  padding:6px 11px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.nav-scroll a:hover{text-decoration:none; background:var(--sunk)}
.nav-scroll a.active{color:var(--ink); background:var(--sunk); border-color:var(--line-strong)}
.nav-scroll a.mel.active{color:var(--mel); background:var(--mel-wash); border-color:var(--mel)}
.nav-scroll a.syd.active{color:var(--syd); background:var(--syd-wash); border-color:var(--syd)}
.nav-scroll a.today{position:relative}
.nav-scroll a.today::after{content:""; position:absolute; right:6px; top:6px; width:6px; height:6px; border-radius:50%; background:var(--alert)}
.nav-sep{flex:0 0 1px; background:var(--line); margin:4px 4px}

/* ───── generic card / section ───── */
main{padding-block:28px 60px; display:flex; flex-direction:column; gap:26px}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:clamp(18px,3vw,28px);
}
.section-head{margin-bottom:16px}
.section-head h2{font-size:clamp(21px,3.6vw,28px); font-weight:700; margin-top:6px}
.section-head .lede{color:var(--soft); margin-top:8px; max-width:var(--measure); font-size:14.5px}
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px}
.note{font-size:13.5px; color:var(--soft); margin-top:12px; max-width:var(--measure)}
.note b{color:var(--ink)}

/* pills */
.pill-grid{display:flex; flex-wrap:wrap; gap:8px}
.pill-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line-strong); background:var(--sand); color:var(--ink);
}
.pill-link:hover{text-decoration:none; border-color:var(--gum); color:var(--gum)}
.pill-link::after{content:"↗"; font-family:var(--mono); font-size:11px; color:var(--faint)}

/* verdict */
.verdict{
  display:inline-block; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  padding:5px 11px; border-radius:6px; margin-bottom:10px;
  background:var(--gum-wash); color:var(--gum); border:1px solid var(--gum);
}
.verdict.warn{background:var(--gold-wash); color:#8A6A1F; border-color:var(--gold)}
:root[data-theme="dark"] .verdict.warn{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .verdict.warn{color:var(--gold)}}
.compact{margin:10px 0 0; padding-left:18px; font-size:14px; color:var(--soft)}
.compact li+li{margin-top:6px}
.compact b{color:var(--ink)}

/* table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--paper)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:14px}
th,td{text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  font-weight:600; background:var(--sunk); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
td.w{font-family:var(--mono); font-size:12.5px; white-space:nowrap}
td .city{font-family:var(--mono); font-size:11.5px; font-weight:600}
td .city.mel{color:var(--mel)} td .city.syd{color:var(--syd)}

/* ───── day ───── */
.day{--c:var(--air); --cw:var(--air-wash); position:relative; overflow:hidden}
.day.mel{--c:var(--mel); --cw:var(--mel-wash)}
.day.syd{--c:var(--syd); --cw:var(--syd-wash)}
.day::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--c)}
.day.is-today{box-shadow:0 0 0 2px var(--alert), var(--shadow)}
.day-head{display:grid; grid-template-columns:auto 1fr; gap:14px 18px; align-items:start; margin-bottom:16px}
.day-num{
  font-family:var(--mono); font-size:44px; font-weight:600; line-height:1; color:var(--c); letter-spacing:-.03em;
  padding-top:2px;
}
.day-num small{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:6px; font-weight:600}
.day-title h2{font-size:clamp(20px,3.4vw,26px); font-weight:700}
.day-meta{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:8px}
.day-date{font-family:var(--mono); font-size:13px; color:var(--soft)}
.tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border:1px solid var(--line-strong); border-radius:4px; color:var(--soft);
}
.tag.lock{border-color:var(--c); color:var(--c); background:var(--cw)}
.tag.today{border-color:var(--alert); color:var(--alert)}
.day-lede{color:var(--soft); font-size:14.5px; margin-top:10px; max-width:var(--measure)}
.day-lede b{color:var(--ink)}

.blk{margin-top:22px}
.blk-h{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--c); font-weight:600;
}
.blk-h::after{content:""; flex:1; height:1px; background:var(--line)}
.blk-h span{color:var(--faint); font-weight:400; letter-spacing:.04em}

/* timeline */
.tl{list-style:none; margin:0; padding:0; position:relative}
.tl::before{content:""; position:absolute; left:63px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl li{display:grid; grid-template-columns:52px 1fr; gap:4px 24px; padding:8px 0; position:relative; align-items:baseline}
.tl li::before{
  content:""; position:absolute; left:58px; top:15px; width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--c);
}
.tl .t{font-family:var(--mono); font-size:12.5px; color:var(--soft); font-variant-numeric:tabular-nums; text-align:right}
.tl .n{font-size:15px; font-weight:500}
.tl .n a{color:inherit; border-bottom:1px dotted var(--line-strong)}
.tl .n a:hover{text-decoration:none; color:var(--gum); border-color:var(--gum)}
.tl .note{grid-column:2; margin:0; font-size:13.5px; color:var(--soft); line-height:1.6; padding-top:1px}
.tl li.flag::before{border-color:var(--alert); background:var(--alert-wash)}
.tl li.flag .t,.tl li.flag .n{color:var(--alert)}
.tl li.opt::before{border-color:var(--gum); background:var(--gum-wash); border-style:dashed}
.tl li.opt .t{color:var(--gum); font-weight:600}
.tl li.opt .n{color:var(--gum)}
.tl li.opt .n::before{content:"選項 "; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--gum); vertical-align:1px}
.tl li.lockstop::before{background:var(--c)}
.tl li.meal::before{border-color:var(--gold); background:var(--gold-wash)}
.tl li.meal .t{color:#8A6A1F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tl li.meal .t{color:var(--gold)}}
:root[data-theme="dark"] .tl li.meal .t{color:var(--gold)}
@media (max-width:560px){
  .tl::before{left:47px}
  .tl li{grid-template-columns:40px 1fr; gap:3px 18px}
  .tl li::before{left:42px}
  .tl .t{font-size:11.5px}
  .tl .n{font-size:14.5px}
}

/* subcards */
.sub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px}
.subcard{background:var(--sand); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.subcard h4{font-size:14.5px; font-family:var(--sans); font-weight:700; margin-bottom:8px; display:flex; gap:8px; align-items:baseline}
.subcard h4 .kicker{font-size:10px}
.subcard ul{margin:0; padding-left:16px; font-size:13.5px; color:var(--soft)}
.subcard li+li{margin-top:6px}
.subcard li b{color:var(--ink)}
.subcard.alt{border-left:3px solid var(--gum)}
.subcard.transit{border-left:3px solid var(--mel)}
.subcard.warn{border-left:3px solid var(--alert); background:var(--alert-wash)}
.subcard.warn ul{color:var(--ink)}
.badge{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:1px 6px; border-radius:3px; margin-right:4px; vertical-align:1px;
}
.badge.rain{background:var(--mel-wash); color:var(--mel)}
.badge.bonus{background:var(--gum-wash); color:var(--gum)}
.badge.swap{background:var(--gold-wash); color:#8A6A1F}
.badge.todo{background:var(--alert-wash); color:var(--alert)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge.swap{color:var(--gold)}}
:root[data-theme="dark"] .badge.swap{color:var(--gold)}

/* food */
.meal{margin-top:14px}
.meal-h{font-size:13.5px; font-weight:600; margin-bottom:8px; display:flex; gap:8px; align-items:baseline}
.meal-h .kicker{font-size:10px}
.meal-h em{font-style:normal; font-size:12.5px; color:var(--faint); font-weight:400}
.spots{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:10px}
.spot{
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 13px 11px;
  display:flex; flex-direction:column; gap:6px; transition:transform .15s ease, border-color .15s ease;
}
.spot:hover{transform:translateY(-1px); border-color:var(--line-strong)}
.spot.pick{border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c)}
.spot-top{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline}
.spot-top h5{margin:0; font-size:15px; font-weight:700; font-family:var(--sans)}
.spot-top .en{font-family:var(--mono); font-size:11px; color:var(--faint)}
.spot .why{font-size:13px; color:var(--soft); line-height:1.55; flex:1}
.spot .dish{font-size:12.5px; color:var(--ink)}
.spot .dish::before{content:"點 "; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--gold); text-transform:uppercase}
.spot-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:2px}
.spot .area{font-family:var(--mono); font-size:11px; color:var(--faint)}
.map-btn{
  font-family:var(--mono); font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:6px;
  background:var(--gum-wash); color:var(--gum); border:1px solid transparent; white-space:nowrap;
}
.map-btn:hover{text-decoration:none; border-color:var(--gum)}
.spot .star{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--c); border:1px solid var(--c); padding:1px 6px; border-radius:3px}

.dfoot{margin-top:18px; padding:12px 14px; border-left:3px solid var(--line-strong); background:var(--sand); border-radius:0 10px 10px 0; font-size:13.5px; color:var(--soft)}
.dfoot b{color:var(--ink)}

/* ───── encyclopedia picks ───── */
.city-block{--c:var(--gum); --cw:var(--gum-wash)}
.city-block.mel{--c:var(--mel); --cw:var(--mel-wash)}
.city-block.syd{--c:var(--syd); --cw:var(--syd-wash)}
.city-block + .city-block{margin-top:26px}
.city-bar{display:flex; align-items:baseline; gap:12px; padding-bottom:8px; border-bottom:2px solid var(--c); margin-bottom:12px}
.city-bar h3{font-size:20px; color:var(--c)}
.city-bar span{font-family:var(--mono); font-size:11.5px; color:var(--soft)}
.picks{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:12px}
.pick{background:var(--sand); border:1px solid var(--line); border-radius:12px; padding:14px 15px; display:flex; flex-direction:column; gap:8px}
.pick-top{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline}
.pick-top h4{font-size:16px; font-weight:700; font-family:var(--sans)}
.pick-top .en{font-family:var(--mono); font-size:11px; color:var(--faint)}
.pick p{font-size:13.5px; color:var(--soft); line-height:1.6; flex:1}
.pick p b{color:var(--ink)}
.pick .facts-row{display:flex; flex-wrap:wrap; gap:4px 14px; font-family:var(--mono); font-size:11px; color:var(--faint)}
.pick .facts-row b{color:var(--ink); font-weight:500}
.slotin{font-size:13px; padding:8px 10px; background:var(--cw); border-left:2px solid var(--c); border-radius:0 8px 8px 0}
.slotin > b:first-child{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--c); margin-right:6px}
.pick .row{display:flex; justify-content:space-between; align-items:center; gap:8px}

/* ───── checklist ───── */
.ck-status{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:18px; font-family:var(--mono); font-size:12px; color:var(--soft)}
.ck-prog{flex:1 1 160px; min-width:120px; height:7px; background:var(--sunk); border-radius:99px; overflow:hidden}
.ck-prog i{display:block; height:100%; width:0%; background:var(--gum); transition:width .25s ease}
.ck-reset{font-family:var(--mono); font-size:11px; background:none; border:1px solid var(--line-strong); color:var(--soft); border-radius:6px; padding:3px 9px; cursor:pointer}
.ck-reset:hover{border-color:var(--alert); color:var(--alert)}
.ck-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:22px}
.ck-group h4{
  font-size:15px; font-family:var(--sans); font-weight:700; padding-bottom:6px; margin-bottom:2px;
  border-bottom:1.5px solid var(--line-strong); display:flex; justify-content:space-between; gap:8px; align-items:baseline;
}
.ck-group h4 em{font-family:var(--mono); font-size:11px; font-style:normal; color:var(--faint); font-weight:400}
.ck-group ul{list-style:none; margin:0; padding:0}
.ck-group li{border-bottom:1px solid var(--line)}
.ck-group li.urgent{box-shadow:inset 3px 0 0 var(--alert); padding-left:8px}
.ck-group label{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; padding:9px 2px; cursor:pointer; font-size:14px; line-height:1.55}
.ck-group input{
  appearance:none; -webkit-appearance:none; margin:4px 0 0; width:16px; height:16px; border:1.5px solid var(--line-strong);
  border-radius:4px; background:var(--paper); cursor:pointer; display:grid; place-content:center;
}
.ck-group input:checked{background:var(--gum); border-color:var(--gum)}
.ck-group input:checked::after{content:""; width:9px; height:5px; border-left:2px solid var(--paper); border-bottom:2px solid var(--paper); transform:rotate(-45deg) translate(1px,-1px)}
.ck-group input:checked + span{color:var(--faint); text-decoration:line-through; text-decoration-color:var(--line-strong)}
.ck-group label small{display:block; color:var(--faint); font-size:12.5px; line-height:1.5}
.ck-group li.urgent label > span{font-weight:500}

/* ───── notes ───── */
.notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px}
.note-card{background:var(--sand); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.note-card h4{font-size:15.5px; font-family:var(--sans); font-weight:700; margin-bottom:8px}
.note-card ul{margin:0; padding-left:17px; font-size:13.5px; color:var(--soft); line-height:1.65}
.note-card li+li{margin-top:6px}
.note-card b{color:var(--ink)}
.note-card.hot{background:var(--alert-wash); border-color:transparent}
.note-card.hot h4{color:var(--alert)}
.note-card.hot ul{color:var(--ink)}

/* footer + fab */
.site-footer{padding:26px var(--gut) 70px; font-size:12.5px; color:var(--faint); line-height:1.7; max-width:1040px; margin:0 auto}
.site-footer a{color:var(--soft)}
.fab{
  position:fixed; right:14px; bottom:16px; z-index:60; display:none; gap:8px;
}
.fab.show{display:flex}
.fab a{
  font-family:var(--mono); font-size:12px; font-weight:600; padding:9px 13px; border-radius:999px;
  background:var(--ink); color:var(--paper); box-shadow:0 8px 24px -10px rgba(0,0,0,.5);
}
.fab a:hover{text-decoration:none}
.fab a.today-btn{background:var(--alert)}

details.more{margin-top:10px}
details.more summary{cursor:pointer; font-family:var(--mono); font-size:12px; color:var(--gum); list-style:none; display:inline-flex; gap:6px; align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+"; font-weight:600}
details.more[open] summary::before{content:"−"}
details.more > div{margin-top:10px}