/* ---- tokens ------------------------------------------------------------ */
:root{
  --ink:#15191f;
  --muted:#6a7381;
  --line:#e2e5ea;
  --accent:#1257b8;
  --accent-soft:#eef3fb;
  --gap:18px;            /* header padding == gap under the rule (see below) */
  --wrap:960px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font:17px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC",
       "Noto Sans TC","Microsoft JhengHei",sans-serif;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:20px;padding-right:20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- header: the only grey rule at the top ----------------------------- */
.site-head{background:#fff;border-bottom:1px solid var(--line)}
.head-inner{display:flex;gap:20px;align-items:center;
  padding-top:var(--gap);padding-bottom:var(--gap)}
.brand{font-size:23px;font-weight:700;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--accent)}
.search{display:flex;flex:1;min-width:0}
.search input{flex:1;min-width:0;padding:10px 13px;border:1px solid var(--line);
  border-radius:7px 0 0 7px;font-size:16px;outline:none;background:#fff;color:var(--ink)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search button{padding:10px 20px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;border-radius:0 7px 7px 0;cursor:pointer;font-size:16px;white-space:nowrap}
.search button:hover{background:#0e468f;border-color:#0e468f}

/* the body starts exactly one --gap below the rule */
main.wrap{padding-top:var(--gap);padding-bottom:56px}

/* ---- sections ---------------------------------------------------------- */
.block{margin:0 0 34px}
.block:last-child{margin-bottom:0}
h1,h2,h3{line-height:1.35;margin:0}
.page-title{font-size:27px;margin:0 0 10px;letter-spacing:-.01em}
.lede{color:var(--muted);margin:0 0 4px}
h2.sec{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
h3.sub{font-size:16px;margin:18px 0 8px}

/* ---- entry ------------------------------------------------------------- */
.entry-head{margin:0 0 26px}
.entry-head h1{font-size:38px;letter-spacing:-.02em;word-break:break-word;margin:0 0 6px}
.entry-head h1 .qual{font-size:16px;color:var(--muted);font-weight:400;
  letter-spacing:0;margin-left:8px;white-space:nowrap}
.phon{color:var(--muted);font-size:16px;font-variant-numeric:tabular-nums}
.sense{margin:0 0 16px}
.sense:last-child{margin-bottom:0}
em.pos{display:inline-block;font-style:normal;color:var(--accent);background:var(--accent-soft);
  border-radius:4px;padding:1px 9px;font-size:13px;font-weight:700;margin-bottom:6px}
em.pos span{font-weight:400;opacity:.85}

.samples-list{margin:0;padding-left:1.35em}
.samples-list li{margin:0 0 15px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.samples-list li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.s-dst{color:var(--muted);font-size:16px}

/* ---- word chips -------------------------------------------------------- */
.word-list{display:flex;flex-wrap:wrap;gap:8px}
.word-list a{display:inline-block;border:1px solid var(--line);border-radius:18px;
  padding:5px 14px;font-size:15px;color:var(--accent);background:#fff;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.word-list a:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none}

/* inline auto-links inside definitions/examples */
a.xref{border-bottom:1px dotted var(--accent)}
a.xref:hover{background:var(--accent-soft);text-decoration:none}

/* ---- home -------------------------------------------------------------- */
.stat-row{display:flex;flex-wrap:wrap;gap:26px;margin:0 0 6px;color:var(--muted);font-size:15px}
.stat-row b{color:var(--ink);font-size:19px;display:block;line-height:1.3}
.usage{margin:0;padding-left:1.2em;color:var(--muted)}
.az{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.az a{display:inline-block;min-width:38px;text-align:center;padding:6px 8px;
  border:1px solid var(--line);border-radius:6px;font-weight:700;font-size:15px}
.az a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager{display:flex;gap:18px;align-items:center;margin-top:22px;color:var(--muted);font-size:15px}
.attrib{color:var(--muted);font-size:13px;margin:22px 0 0}

/* ---- footer ------------------------------------------------------------ */
.site-foot{border-top:1px solid var(--line);padding:var(--gap) 0;color:var(--muted);font-size:15px}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:8px}
.site-foot p{margin:0}

/* ---- tablet ------------------------------------------------------------ */
@media (max-width:820px){
  :root{--gap:16px}
  body{font-size:16px}
  .entry-head h1{font-size:32px}
  .page-title{font-size:24px}
}

/* ---- phone -------------------------------------------------------------- */
@media (max-width:600px){
  :root{--gap:14px}
  .wrap{padding-left:16px;padding-right:16px}
  .head-inner{flex-wrap:wrap;gap:12px}
  .brand{font-size:21px}
  .search{flex:1 0 100%}
  .entry-head h1{font-size:27px}
  .entry-head h1 .qual{display:block;margin:4px 0 0;font-size:15px}
  .samples-list{padding-left:1.15em}
  .word-list a{font-size:14px;padding:5px 12px}
  .az a{min-width:34px;padding:5px 6px;font-size:14px}
  .stat-row{gap:18px}
}