/* 找 / find —— 樣式移植自回家作業「找」頁原始設計（Astro 版 index.astro + FilterBar.astro） */
:root{
  --bg:#faf6ef;
  --bg-card:#ffffff;
  --ink:#2b2420;
  --ink-soft:#4a4038;
  --muted:#8a7d6e;
  --line:#e6ddd0;
  --line-strong:#d8cbb8;
  --accent:#b5541f;
  --c1:#2f6f4e;
  --c3:#b5541f;
  --c5:#375a8c;
  --font-display:"Zen Kaku Gothic New","Noto Sans TC",sans-serif;
  --font-body:"Noto Sans TC",-apple-system,sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1b1715; --bg-card:#252019; --ink:#f0e9df; --ink-soft:#cfc3b4;
    --muted:#9c8f7f; --line:#3a332a; --line-strong:#4a4134; --accent:#e2884f;
    --c1:#5fa37d; --c3:#e2884f; --c5:#7fa3d9;
    color-scheme: dark;
  }
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.75;padding-inline:20px;
}
.wrap{max-width:980px;margin:0 auto;}
a{color:inherit;}
[hidden]{display:none!important;}

header.site{padding-block:20px 0;margin-bottom:0;display:flex;align-items:baseline;gap:10px;}
.brand{
  display:flex;align-items:baseline;gap:10px;text-decoration:none;
  font-family:var(--font-body);
}
.brand .zh{font-family:var(--font-display);font-size:1.4rem;font-weight:700;letter-spacing:-0.01em;}
.brand .en{font-size:0.8rem;color:var(--muted);font-family:ui-monospace,monospace;}

.head{padding-top:1rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);margin-bottom:2.5rem;}
.eyebrow{color:var(--muted);letter-spacing:.12em;font-size:.85rem;margin:0 0 .3rem;}
.head h1{margin:0 0 2rem;font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.3rem);}

.toprow{display:flex;align-items:center;gap:.8rem 1.2rem;flex-wrap:wrap;}
.head .subcats{margin-top:1.7rem;}
.cats{display:flex;flex-wrap:wrap;gap:.5rem;flex:none;}
.cat{
  font:inherit;font-size:1.05rem;line-height:1;text-decoration:none;display:inline-block;
  padding:.85em 1.5em;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--ink);border:1.5px solid var(--gc);min-height:48px;
}
.cat:hover{background:color-mix(in srgb, var(--gc) 12%, transparent);}
.cat[aria-pressed='true'], .cat.is-current{
  background:color-mix(in srgb, var(--gc) 78%, #14120c);
  border-color:color-mix(in srgb, var(--gc) 78%, #14120c);
  color:#fff;font-weight:600;
}
:root[data-theme='dark'] .cat[aria-pressed='true'],
:root[data-theme='dark'] .cat.is-current{
  background:var(--gc);border-color:var(--gc);color:#17160f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme='light']) .cat[aria-pressed='true'],
  :root:not([data-theme='light']) .cat.is-current{
    background:var(--gc);border-color:var(--gc);color:#17160f;
  }
}

.subcats{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:0 0 1.5rem 1.5rem;padding-left:1rem;border-left:2px solid var(--gc);
}
.subcats[hidden]{display:none;}
.subcats.level3{
  margin:0 0 .9rem;padding-left:0;border-left:0;gap:.2rem 1.1rem;
  border-bottom:1px solid var(--line);
}
.subcats.level3 .subcat{
  border:0;border-radius:0;background:none;padding:.5em .1em;min-height:40px;
  font-size:.95rem;color:var(--muted);box-shadow:inset 0 -2px 0 transparent;
}
.subcats.level3 .subcat:hover{
  background:none;color:var(--ink);
  box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--gc) 40%, transparent);
}
.subcats.level3 .subcat[aria-pressed='true']{
  background:none;color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--gc);
}
.subcat{
  font:inherit;font-size:.875rem;line-height:1;padding:.6em 1.1em;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--ink-soft);border:1px solid var(--line-strong);min-height:40px;
}
.subcat:hover{background:color-mix(in srgb, var(--gc) 10%, transparent);color:var(--ink);}
.subcat[aria-pressed='true']{
  background:color-mix(in srgb, var(--gc) 16%, transparent);border-color:var(--gc);color:var(--ink);font-weight:600;
}

/* 搜尋列（FilterBar 精簡版） */
.filterbar{margin-left:auto;flex:0 1 22rem;min-width:0;}
.searchrow{display:flex;align-items:center;gap:.7rem;}
.search{
  flex:1;display:flex;align-items:center;gap:.55rem;background:var(--bg-card);
  border:1px solid var(--line);border-radius:999px;padding:0 .9rem;min-height:40px;
}
.search:focus-within{border-color:var(--accent);}
.search input{flex:1;border:0;background:none;color:var(--ink);font:inherit;font-size:.92rem;padding:.35rem 0;min-width:0;}
.search input:focus{outline:none;}
.search svg{width:1.1rem;height:1.1rem;color:var(--muted);flex:none;}
.count{margin:0;color:var(--muted);font-size:.9rem;white-space:nowrap;display:flex;align-items:center;gap:.6rem;}
.reset{font:inherit;font-size:.82rem;padding:.2em;background:none;border:0;cursor:pointer;color:var(--accent);text-decoration:underline;text-underline-offset:.2em;}

.group{margin-bottom:4.5rem;}
.group:not([hidden]) + .group:not([hidden]){border-top:1px solid var(--line);padding-top:3.5rem;}
.ghead{margin-bottom:1.5rem;}
.ghead h2{margin:0 0 .2rem;font-size:1.6rem;display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);}
.dot{width:.7rem;height:.7rem;border-radius:999px;background:var(--gc);flex:none;}
.gblurb{color:var(--muted);margin:0;font-size:.95rem;}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));}
.card{display:block;padding:1.25rem 1.35rem;text-decoration:none;color:inherit;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;transition:transform .15s ease;}
.card:hover{transform:translateY(-2px);border-color:var(--gc);}
.card h3{margin:0 0 .45rem;font-size:1.08rem;color:var(--ink);line-height:1.4;display:flex;align-items:center;gap:.5rem;}
.fav{flex:none;width:18px;height:18px;object-fit:contain;border-radius:4px;background:var(--bg-card);padding:1px;}
.fav-letter{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:.68rem;font-weight:700;color:var(--muted);border:1px solid var(--line);text-transform:uppercase;border-radius:4px;}
.row .fav, .row .fav-letter{width:16px;height:16px;}
.card:hover h3{color:var(--accent);}
.blurb{margin:0 0 .35rem;font-size:.95rem;line-height:1.6;color:var(--ink-soft);}
.when{margin:0;font-size:.88rem;line-height:1.6;color:var(--muted);}

.more{margin-top:2.5rem;}
.more summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;padding:.5rem .2rem;color:var(--accent);font-size:.95rem;min-height:44px;}
.more summary::-webkit-details-marker{display:none;}
.more summary::after{content:'more…';}
.more[open] summary{color:var(--muted);}
.more summary:hover::after{text-decoration:underline;text-underline-offset:.25em;}
.more .list{margin-top:.4rem;}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;padding:.7rem .2rem;border-bottom:1px solid var(--line);}
.row > a{font-weight:600;text-decoration:none;flex:none;display:inline-flex;align-items:center;gap:.45rem;}
.row > a:hover{text-decoration:underline;}
.rblurb{color:var(--ink-soft);font-size:.92rem;flex:1 1 14rem;line-height:1.5;}
.paytag{flex:none;font-size:.72rem;line-height:1;padding:.3em .6em;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.empty{text-align:center;color:var(--muted);padding:3rem 0;}
.foot{
  font-weight:300;font-size:.82rem;color:color-mix(in srgb, var(--muted) 70%, transparent);
  border-top:1px solid var(--line);padding-top:1.2rem;margin-top:1rem;padding-bottom:3rem;
}
footer.site{color:var(--muted);font-size:.85rem;line-height:1.7;border-top:1px solid var(--line);padding-top:1.2rem;margin-top:1rem;padding-bottom:3rem;}

@media (max-width:640px){
  .cat{font-size:1rem;padding:.8em 1.1em;}
  .subcats{margin-left:.75rem;padding-left:.75rem;}
  .grid{grid-template-columns:1fr;}
  .row{gap:.25rem .6rem;}
  .rblurb{flex-basis:100%;}
  .filterbar{flex-basis:100%;margin-left:0;}
}