/* 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(--blue-600, #17769d); outline-offset: 2px; }
.list-toggle { min-height: 44px; padding: 8px 14px; border: 1px solid var(--border, var(--line)); border-radius: var(--radius-control, 10px); background: var(--surface); color: var(--ink, var(--ink)); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
.list-toggle:hover { background: var(--blue-50, var(--tint-1)); }
.list-toggle[aria-pressed="true"] { border-color: var(--control-line); background: var(--blue-100, var(--tint-2)); color: var(--blue-600, var(--blue-600)); }
.list-more-toggle { display: none; }
.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; border-radius: 999px; background: var(--warm-bg); 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; }
.study-help { margin-top: 16px; color: var(--muted); font-size: .86rem; }
.study-help > summary { display: list-item; width: fit-content; min-height: 44px; padding: 10px 4px; cursor: pointer; }
.study-help > summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 3px; }
.study-help .sandy-tip, .study-help .tip { margin-top: 0; }

/* One discoverable help entry beside the title; expanded directions use the full width.
   These selectors apply only after list.js has moved the static introduction/footer tips. */
.page-header.has-study-help { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.page-header.has-study-help > .page-title { flex: 1 1 230px; min-width: 0; margin: 0; }
.page-header.has-study-help > .study-page-help { flex: 0 0 auto; margin: 0 0 0 auto; }
.study-page-help > summary { min-width: 44px; margin-left: auto; padding: 10px 8px; white-space: nowrap; }
.page-header.has-study-help > .study-page-help[open] { flex: 1 1 100%; padding: 0 12px 12px; border: 1px solid var(--border, var(--line)); border-radius: var(--radius-control, 10px); background: var(--surface); }
.study-page-help > .page-desc { margin: 0; color: var(--ink-2); line-height: 1.7; }
.study-page-help > .sandy-tip, .study-page-help > .tip { margin: 12px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* 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); }
#list .entry.study-card .study-card-meta :is(.reading, .connection) { font-size: .94rem; line-height: 1.5; font-weight: 500; color: var(--blue-500); 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: 500; 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) {
  /* Toolbar: search, then one row of actions; voice settings live behind ⋯ */
  .toolbar > * { order: 1; }
  .toolbar .search { order: 0; }
  .toolbar .sound-toggle, .toolbar .voice-picker, .toolbar .list-example-setting { order: 2; }
  .toolbar:not(.show-settings) .sound-toggle, .toolbar:not(.show-settings) .voice-picker, .toolbar:not(.show-settings) .list-example-setting { display: none; }
  .toolbar .list-toggle.list-more-toggle { display: inline-flex; flex: 0 0 44px; justify-content: center; padding: 8px 0; }
  .toolbar .list-toggle { flex: 1 1 0; min-width: 0; padding: 6px; font-size: .8rem; line-height: 1.2; white-space: normal; text-wrap: balance; }
  /* Every list page has three actions + ⋯ here. A grid row sizes them by label length and never wraps a button onto
     its own line; a label that still doesn't fit (English at 360px) wraps between words, never inside a Chinese word. */
  .toolbar { display: grid !important; grid-template-columns: repeat(3, minmax(0, auto)) 44px; gap: 8px 6px; }
  .toolbar .search, .toolbar .voice-picker, .toolbar .sound-toggle, .toolbar .list-example-setting { grid-column: 1 / -1; }
  .toolbar .favorite-filter, .toolbar .scroll-toggle, .toolbar .auto-toggle, .toolbar .list-toggle { word-break: keep-all; overflow-wrap: anywhere; }

  /* 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(--blue-600); font: inherit; font-size: 1rem; white-space: nowrap; cursor: pointer; }
}