/* Cheatsheet page styles — page-specific only; shared styles.css / v3.css are not modified here.
   Glyph highlight method: each stage renders an SVG built from the actual contours of this
   site's bundled Noto Serif SC (SIL OFL). Ink contours stay ink; highlighted component
   contours are drawn in cinnabar on top. No clip-path approximation is used. */

.cs-hero { position: relative; overflow: hidden; padding: 30px clamp(24px, 7vw, 105px) 26px; border-bottom: 1px solid var(--line); }
.cs-hero h1 { font-family: var(--song); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.02em; margin: 8px 0 10px; line-height: 1.12; }
.cs-honesty-banner { display: inline-block; border: 1px solid rgba(163, 58, 43, .35); border-left: 4px solid var(--cinnabar); background: rgba(163, 58, 43, .05); color: var(--cinnabar); padding: 8px 14px; font-size: 13px; font-weight: 700; }
.cs-honesty-banner .zh { font-weight: 700; }
.cs-hero .cs-lead { color: #53635b; font-size: 13px; max-width: 680px; margin: 12px 0 0; }

.cs-controls { padding: 20px clamp(24px, 7vw, 105px) 6px; display: grid; gap: 10px; }
.cs-search-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cs-search-row label { font-size: 12px; color: var(--ink); font-weight: 650; }
.cs-search { flex: 1 1 220px; min-width: 0; min-height: 40px; border: 1px solid var(--line); background: rgba(255, 255, 255, .5); color: var(--ink); font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 2px; }
.cs-search:focus-visible { outline: 3px solid #b75a37; outline-offset: 2px; }
.cs-clear { min-height: 40px; border: 1px solid rgba(49, 95, 82, .35); background: transparent; color: var(--pine); font-size: 11px; font-weight: 650; padding: 8px 14px; cursor: pointer; border-radius: 2px; }
.cs-clear:hover { background: rgba(49, 95, 82, .07); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 20px; padding: 7px 14px; font-size: 12px; cursor: pointer; }
.cs-chip:hover { background: rgba(49, 95, 82, .05); }
.cs-chip[aria-pressed="true"] { border-color: var(--pine); background: rgba(49, 95, 82, .09); color: var(--pine-dark); font-weight: 700; }
.cs-chip-count { color: var(--muted); font-size: 10px; margin-left: 5px; }
.cs-chip[aria-pressed="true"] .cs-chip-count { color: var(--pine); }
.cs-status { color: var(--muted); font-size: 11px; margin: 0; }

.cs-grid { padding: 14px clamp(16px, 4vw, 60px) 50px; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-card { --cs-g: clamp(112px, 13vw, 148px); border: 1px solid var(--line); border-top: 2px solid var(--pine); padding: 15px 17px 14px; min-width: 0; display: flex; flex-direction: column; }
.cs-card:hover { background: rgba(49, 95, 82, .03); }

.cs-title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 8px; font-weight: 400; }
.cs-glyph { position: relative; display: grid; width: var(--cs-g); height: var(--cs-g); flex: 0 0 auto; align-items: center; justify-items: center; }
.cs-glyph svg { width: 100%; height: 100%; display: block; }
.cs-glyph svg .cs-ink { fill: var(--ink); }
.cs-glyph svg .cs-hi { fill: var(--cinnabar); }
.cs-glyph-fallback { font-family: var(--song); font-weight: 500; font-size: calc(var(--cs-g) * .88); line-height: 1; color: var(--ink); }
.cs-pinyin { font-family: var(--song); color: var(--pine); font-size: clamp(19px, 1.8vw, 25px); }

.cs-meaning { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
.cs-mnemonic { margin: 0 0 8px; font-size: 13px; color: var(--ink); background: rgba(255, 255, 255, .45); border-left: 2px solid var(--pine); padding: 7px 10px; }
.cs-explain { margin: 0 0 8px; color: #53635b; font-size: 11px; }
.cs-explain strong { color: var(--ink); }
.cs-context { margin: 0 0 8px; color: var(--muted); font-size: 10px; }
.cs-context::before { content: "Culture note · "; color: #8b958d; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cs-tag { border: 1px solid rgba(163, 58, 43, .38); color: var(--cinnabar); background: rgba(163, 58, 43, .05); border-radius: 3px; padding: 4px 9px; font-size: 10px; line-height: 1.5; }

.cs-more { margin: 0 0 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.cs-more summary { cursor: pointer; color: var(--pine); font-size: 11px; font-weight: 650; }
.cs-more[open] summary { margin-bottom: 6px; }
.cs-more p { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 5px 0 0; }
.cs-more a { color: var(--pine); overflow-wrap: anywhere; }
.cs-more .cs-kind { color: #52655b; }
.cs-more .cs-provenance { display: block; color: var(--pine); margin: 4px 0; font-size: 10px; line-height: 1.5; }

.cs-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; }
.cs-detail { color: var(--pine); font-size: 11px; font-weight: 700; text-decoration: none; text-underline-offset: 4px; }
.cs-detail:hover { color: var(--cinnabar); }

.cs-empty { margin: 10px clamp(16px, 4vw, 60px) 60px; border: 1px dashed rgba(49, 95, 82, .4); padding: 30px 22px; text-align: center; color: var(--muted); font-size: 12px; }
.cs-empty strong { display: block; color: var(--ink); font-family: var(--song); font-size: 18px; font-weight: 400; margin-bottom: 6px; }

@media (max-width: 1100px) {
  .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-card { --cs-g: clamp(112px, 30vw, 140px); }
  .cs-hero, .cs-controls { padding-left: 19px; padding-right: 19px; }
  .cs-grid { padding-left: 19px; padding-right: 19px; }
  .cs-empty { margin-left: 19px; margin-right: 19px; }
}
@media (max-width: 340px) {
  .cs-card { --cs-g: 104px; padding: 13px 12px 12px; }
  /* the shared three-link header does not fit 320px; tighten it on this page only */
  .site-header { padding: 0 8px; gap: 6px; }
  .wordmark { font-size: 11px; gap: 6px; }
  .seal { width: 24px; height: 24px; font-size: 15px; }
  .nav { gap: 8px; }
}