/* Shared styles for the five list pages (vocab, grammar, core-grammar, adverbs, comprehensive).
   Behaviour lives in assets/list.js. */

/* 遮住中文: blur meanings for self-testing; tap one to reveal it */
body.hide-meaning #list .entry .meaning:not(.is-revealed) { filter: blur(6px); cursor: pointer; user-select: none; transition: filter .15s ease; }
body.hide-meaning #list .entry .meaning:not(.is-revealed):focus-visible { filter: none; outline: 2px solid var(--accent-focus, #17769d); outline-offset: 2px; }
.list-toggle { min-height: 44px; padding: 8px 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
.list-toggle:hover { background: var(--tint-1); }
.list-toggle[aria-pressed="true"] { border-color: var(--color-selected-line); background: var(--color-selected); color: var(--color-on-selected); }
.example-toggle { display: none; }
/* 隐藏例句 (setting in assets/list.js): examples show by default, and hide only when the learner asks */
body.hide-examples #list .entry:not(.example-open) .example-button { display: none; }

/* Repeated actions are icons, with full accessible names on the buttons. */
#list .entry .favorite-button { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 1.2rem; }
#list .entry .example-button { min-height: 44px; }
#list .entry .freq { display: inline-flex; align-items: center; width: fit-content; padding: 4px 9px 4px 7px; border-radius: var(--radius-chip-sm); background: var(--note-cream); color: var(--ink-2); font-size: .75rem; font-weight: 500; line-height: 1.4; }
#list .entry button.freq { border: 1px solid transparent; min-height: 44px; font-family: inherit; cursor: pointer; }
#list .entry button.freq:hover, #list .entry button.freq[aria-pressed="true"] { border-color: var(--control-line); }
#list .entry button.freq:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }
/* Worksheet/image references are bookkeeping, not study content. Keep their
   data, but show only the item number on cards at every screen size. */
#list .entry .num .source { display: none; }
#list .entry .favorite-button:focus-visible,
#list .entry .example-button:focus-visible,
#list .entry .example-toggle:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }
/* 「使用说明」 disclosure styles live in assets/help.css. */

/* Show the draft/confirmation explanation when the AI tool is in use, not in
   its collapsed heading. Never hide its status, quota, cost or error messages. */
#aiPanel:not([open]) > summary .ai-help { display: none; }

/* Shared study-card layout contract. All five renderers are mounted by list.js.
   Compact is the safe default; expand by available list width, not viewport width. */
#list { container: study-list / inline-size; }
#list .entry.study-card {
  display: grid;
  grid-template-columns: var(--study-card-rail) minmax(0, 1fr) var(--control-height);
  grid-template-areas: "number term save" ". meta meta" ". meaning meaning";
  gap: var(--study-card-gap);
  align-items: start;
  padding: var(--study-card-padding);
  border-radius: var(--radius-card);
}
#list .entry.study-card > * { min-width: 0; grid-column: auto; }
#list .entry.study-card .num { display: contents; margin: 0; font-size: .8rem; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
#list .entry.study-card .study-card-number { grid-area: number; padding-top: 12px; min-width: 0; overflow-wrap: anywhere; }
#list .entry.study-card .study-card-number .mine-badge { max-width: var(--study-card-rail); padding: 2px 4px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
#list .entry.study-card .favorite-button { grid-area: save; justify-self: center; margin: 0; }
#list .entry.study-card .study-card-term { grid-area: term; width: 100%; min-height: 52px; padding: 12px; border-radius: var(--radius-control); font-size: 1.1rem; font-weight: 700; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
#list .entry.study-card .study-card-meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
/* Readings and 接续 sit in a quiet cocoa brown, like furigana in soft pencil: normal spacing, never louder than the word */
#list .entry.study-card .study-card-meta :is(.reading, .connection) { font-size: .94rem; line-height: 1.5; font-weight: 400; letter-spacing: normal; color: var(--color-reading); overflow-wrap: anywhere; }
#list .entry.study-card .study-card-meta :is(.tag, .freq, .mini-row) { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#list .entry.study-card .study-card-meta .mine-action { margin: 0; justify-self: start; align-self: flex-start; min-height: var(--control-height); }
#list .entry.study-card .meaning { grid-area: meaning; margin: 0; color: var(--ink-2); font-size: .94rem; font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
#list .entry.study-card .meaning > strong { font: inherit; }
#list .entry.study-card .study-card-content { grid-column: 2 / -1; display: grid; gap: var(--study-card-gap); min-width: 0; }
#list .entry.study-card .study-card-content > * { grid-column: auto; min-width: 0; }
#list .entry.study-card .study-card-content :is(.point, .note) { margin: 0; color: var(--muted); font-size: .84rem; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
#list .entry.study-card .example-button { grid-column: auto; width: 100%; min-height: var(--control-height); margin: 0; padding: 10px 12px; border-radius: var(--radius-control); font-size: .94rem; font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
#list .entry.study-card .example-toggle { grid-area: toggle; }

@container study-list (min-width: 720px) {
  #list .entry.study-card {
    grid-template-columns: var(--study-card-rail) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
    grid-template-areas: "rail term meta meaning";
  }
  #list .entry.study-card .num { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  #list .entry.study-card .study-card-number { padding-top: 0; }
  #list .entry.study-card .favorite-button { grid-area: auto; }
  #list .entry.study-card .study-card-meta, #list .entry.study-card .meaning { padding-top: 10px; }
}

@media (max-width: 600px) {
  /* Same component, with one disclosure action beside the meaning on phones. */
  #list .entry.study-card { padding: var(--space-3); gap: var(--space-2); grid-template-areas: "number term save" ". meta meta" ". meaning toggle"; }
  #list .entry.study-card .study-card-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
  #list .entry.study-card .study-card-meta .mine-action { margin-left: auto; }
  body.hide-examples #list .entry.study-card > .example-toggle { display: inline-flex; align-items: center; justify-content: center; justify-self: end; width: 44px; min-height: 44px; padding: 4px; border: 0; background: transparent; color: var(--color-link); font: inherit; font-size: 1rem; white-space: nowrap; cursor: pointer; }
}

/* Sandy's corner on the list pages (2026-10-12): one bubble, not two. Her bubble already says where you are
   (「点我从「整える」继续听读」, from SandyResume in assets/nav.js), so the separate 「进度：…」 pill is dropped wherever
   the page has a Sandy bubble. Phones hide both already (assets/nav.css). */
.floating-controls:has(.floating-sandy-bubble) > .floating-progress { display: none; }

/* ── Minimal toolbar (2026-10-12, owner-approved): search · 遮住中文 · ⋯ on one row, at every width ──
   Everything else lives in the ⋯ sheet (assets/list.js moves the page's own nodes there). 自动听读 has its own
   always-there ▶ (.list-play, 2026-10-12): icon only on phones, icon + label wider; ⏸ on an apricot fill while it reads. `.app .list-bar > .toolbar …` outranks the older
   wrapping-toolbar rules in assets/site.css and each page's <style>. */
.app .list-bar { position: relative; }
.app .list-bar > .toolbar { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app .list-bar > .toolbar > .search { flex: 1 1 auto; align-self: stretch; width: auto; min-width: 0; text-overflow: ellipsis; }
.app .list-bar > .toolbar > button { flex: 0 0 auto; min-height: var(--control-height); padding: 8px 14px; font-size: .875rem; line-height: 1.3; white-space: nowrap; }
.app .list-bar > .toolbar > .list-more-toggle { display: inline-grid; place-items: center; width: var(--control-height); padding: 0; }
.app .list-bar > .toolbar > .list-play { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--control-height); padding: 0 14px 0 12px; }
.app .list-bar > .toolbar > .list-play .ui-icon { width: 20px; height: 20px; }
.app .list-bar > .toolbar > .list-more-toggle { font-size: 1.25rem; line-height: 1; letter-spacing: 1px; }
.app .list-bar > .toolbar > .list-more-toggle[aria-expanded="true"] { background: var(--tint-2); }
.app .list-bar > .toolbar > .list-play[aria-pressed="true"] { border-color: var(--color-selected-line); background: var(--color-selected); color: var(--color-on-selected); }
.app .list-bar > .toolbar > .list-play[hidden] { display: none; }
@media (max-width: 600px) {
  .app .list-bar > .toolbar > .list-play { width: var(--control-height); padding: 0; }
  .app .list-bar > .toolbar > .list-play .list-play-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.app .list-bar > .toolbar > button:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

/* ── The ⋯ sheet: a bottom sheet above the tab bar on phones, a popover under ⋯ on desktop; rows on hairlines
   (the same feel as the quiz ⋯ sheet in assets/quiz.css) ── */
.list-scrim { position: fixed; inset: 0; z-index: calc(var(--z-popover) - 1); background: rgb(var(--shadow-rgb) / .18); }
.list-sheet { position: fixed; z-index: var(--z-popover); left: 8px; right: 8px; bottom: calc(var(--sn-bottom-bar, 66px) + 8px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - var(--sn-bottom-bar, 66px) - 88px); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) var(--space-4) var(--space-2); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-float); text-align: left; animation: list-sheet-up .2s ease-out; }
.list-scrim[hidden], .list-sheet[hidden] { display: none; }
@keyframes list-sheet-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.list-row { display: flex; flex-wrap: wrap; align-items: center; min-height: 52px; margin: 0; border-top: 1px solid var(--color-line); }
.list-sheet > .list-row:first-child { border-top: 0; }
/* each row is one full-width button: label (with its icon) on the left */
.app .list-sheet .list-row-btn {
  position: relative; display: flex; flex: 1 1 100%; align-items: center; width: 100%; min-height: 52px; margin: 0; padding: 0;
  border: 0; border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; transform: none;
  font: inherit; font-size: .9375rem; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; cursor: pointer;
}
.app .list-sheet .list-row-btn:hover { color: var(--color-link); background: transparent; }
.app .list-sheet .list-row-btn:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; border-radius: 6px; }
.app .list-sheet .list-row-btn:disabled { color: var(--muted); cursor: default; }
/* 隐藏例句 and 语音: a switch at the right (track ≥3:1 off, the text-safe accent on), like the quiz 朗读 switch */
.app .list-sheet .list-switch { padding-right: 60px; }
.app .list-sheet .list-switch::before { content: ""; position: absolute; top: 50%; right: 2px; width: 44px; height: 26px; margin-top: -13px; border-radius: var(--radius-pill); background: var(--control-line); transition: background .16s ease; }
.app .list-sheet .list-switch::after { content: ""; position: absolute; top: 50%; right: 23px; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .25); transition: transform .16s ease; }
.app .list-sheet .list-switch[aria-pressed="true"]::before { background: var(--color-accent); }
.app .list-sheet .list-switch[aria-pressed="true"]::after { transform: translateX(18px); }
/* 日语声音: the real select (site.css's input rule sets `font: inherit`, so size it here) */
.app .list-sheet .voice-picker { display: flex; flex: 1 1 100%; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; margin: 0; color: var(--ink); font-size: .9375rem; font-weight: 400; white-space: nowrap; }
.app .list-sheet .voice-picker select { flex: 0 1 220px; min-width: 0; max-width: 220px; height: var(--control-height); min-height: var(--control-height); padding: 0 var(--space-2); border: 1px solid var(--control-line); border-radius: var(--radius-input); color: var(--ink); background: var(--surface); font-size: .875rem; line-height: 1.3; text-overflow: ellipsis; }
/* 标签筛选: the page's own fold, as a row; the tags open inside the sheet */
.app .list-sheet :is(.category-panel, .filter-panel) { flex: 1 1 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app .list-sheet :is(.category-toggle, .filter-toggle) { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 52px; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; font-size: .9375rem; font-weight: 400; }
.app .list-sheet :is(.category-toggle, .filter-toggle) > span:first-child { flex: 1 1 auto; font-weight: 400; }
.app .list-sheet :is(.category-groups, .categories) { border-top: 0; padding-top: 0; }
/* 使用说明: the page's help fold (assets/help.js) moved into its row */
.list-help-row { display: block; }
.list-sheet .list-help-row .study-help { margin: 0; color: var(--ink); font-size: .9375rem; }
.list-sheet .list-help-row .study-help > summary { display: flex; justify-content: space-between; width: 100%; min-height: 52px; margin: 0; padding: 0; color: var(--ink); font-size: .9375rem; }
.list-sheet .list-help-row .study-help[open] { padding-bottom: var(--space-2); }
.list-sheet .list-help-row .study-help > :not(summary) { display: block; margin: 0 0 var(--space-1); color: var(--ink-2); font-size: .875rem; line-height: 1.7; }
/* folded directions never show beside the title before list.js moves them into ⋯ */
main > .page-header > .study-page-help { display: none; }
/* ＋ 添加我的词 / 语法 (assets/my-entries-ui.js) */
.app .list-sheet .mine-add.list-row-btn { color: var(--ink); }
.app .list-sheet .mine-add.list-row-btn:hover { color: var(--color-link); }
@media (min-width: 901px) {
  /* desktop: an anchored popover under ⋯; a tap outside still closes it */
  .list-scrim { background: transparent; }
  .list-sheet { position: absolute; top: calc(100% - var(--space-4) + 4px); right: 0; bottom: auto; left: auto; width: 360px; max-height: min(560px, calc(100vh - 160px)); }
}
/* while the sheet is open, Sandy stays where she is; only her speech bubble steps aside */
body.list-sheet-open .floating-sandy-bubble { display: none; }


/* ── Active filters: one quiet chip each (只看收藏 ×, 动词 ×, 搜索：“…” ×) under the toolbar ──
   The selected sticky-note look (--color-selected, AA text) drawn as a 32px band inside a 44px tap target. */
.list-filters { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: calc(-1 * var(--space-3)) 0 var(--space-2); }
.list-filters[hidden] { display: none; }
.list-filter-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); color: var(--color-on-selected); background: linear-gradient(var(--color-selected), var(--color-selected)) center / 100% 32px no-repeat; font: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.3; cursor: pointer; }
.list-filter-chip > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-filter-x { font-size: 1rem; line-height: 1; opacity: .8; }
.list-filter-chip:hover .list-filter-x { opacity: 1; }
.list-filter-chip:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }

/* ── Card head: one row on every page — 「我加的」 (if any) left; tag(s), eye and ☆ together on the right ──
   No 「No. 001」 numbers. `.app #list … > .num.study-card-head` outranks each page's older number/star layout. */
.app #list .entry.study-card > .num.study-card-head { display: flex; flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0 var(--space-1); grid-column: 1 / -1; grid-row: 1; min-width: 0; min-height: var(--control-height); margin: 0; padding: 0; text-align: left; }
.app #list .entry.study-card > .num.study-card-head > .study-card-number { flex: 0 1 auto; margin-right: auto; padding: 0; }
.app #list .entry.study-card > .num.study-card-head > .study-card-number:empty { display: none; }
.app #list .entry.study-card .study-card-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 var(--space-2); min-width: 0; margin-left: auto; }
.app #list .entry.study-card .study-card-tags > .tag { margin-left: 0; }
.app #list .entry.study-card .study-card-tags .mine-action { margin: 0; }
.app #list .entry.study-card .study-card-tags .mini-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 var(--space-2); }
.app #list .entry.study-card > .num.study-card-head > .favorite-button { flex: 0 0 var(--control-height); margin: 0; }
.app #list .entry.study-card > .study-card-meta:empty { display: none; }
/* The card being read (auto-read, or a tapped card): a soft apricot sheet behind the whole card plus the orange edge, so
   it's clear the reading goes card by card (owner, 2026-10-12: the old faint tint and thin line were easy to miss). The
   sheet reaches 12px past the card on each side (box-shadow, so nothing in the list moves). */
.app #list .entry.study-card { transition: background-color .25s ease, box-shadow .25s ease; }
.app #list .entry.study-card.playing { --reading-sheet: color-mix(in srgb, var(--color-selected) 42%, var(--surface)); border-radius: 4px; background: var(--reading-sheet); box-shadow: -12px 0 0 var(--reading-sheet), 12px 0 0 var(--reading-sheet), -15px 0 0 var(--color-accent-deco); }
@media (prefers-reduced-motion: reduce) { .app #list .entry.study-card { transition: none; } }
/* …and Sandy wears the same colours while she reads, at every width (phones: assets/sandy.css, the dock) */
.floating-controls .floating-sandy-toggle[aria-pressed="true"] { border-radius: 16px; background: color-mix(in srgb, var(--color-selected) 42%, var(--surface)); box-shadow: inset 0 0 0 2px var(--color-accent-deco); }

/* ── Sandy's corner on the list pages: no 「自动听读」 label under her and no 「点我自动听读」 bubble (2026-10-12: the
   toolbar's ▶ is the way in; tapping her stays a quiet shortcut). ── */
.floating-controls .floating-sandy-status, .floating-controls .floating-sandy-bubble { display: none; }

@media (max-width: 600px) {
  /* The page name is already the selected section tab: keep the h1 for screen readers only */
  .app > .page-header { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app .list-bar > .toolbar { margin-bottom: var(--space-3); gap: 6px; }
  .app .list-bar > .toolbar > .search { padding-inline: 14px; }
  .app .list-bar > .toolbar > .list-toggle:not(.list-more-toggle) { max-width: 7.5em; padding: 6px 10px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
  /* English (Nunito, a little wider): 「Hide meanings」 stays on one line; the search box gives up the room */
  :root:lang(en) .app .list-bar > .toolbar > .list-toggle:not(.list-more-toggle) { max-width: none; white-space: nowrap; }
  .list-filters { margin-top: calc(-1 * var(--space-2)); }
}