/* today.css - Today (#/, js/screens/home.js), and the phone rules of Decks and Add class material (decks.js, add.js;
   this sheet is loaded on every page): only what the design system (app.css) lacks. Tokens only, so light and dark
   both follow; 44 px targets; nothing wider than the screen at 320. Phone first (docs/mobile-plan.md T1 to T4, T11,
   T12): on a phone the band shows the date and the days in a row, the headline and the one button (its word over the
   step it starts) before Tomo's two-line hello; the plan is rows of a title, up to two lines, its minutes in plain
   words and a ›, with this week's stamps as one row at its foot and the minutes a day behind its ⋯. */

/* The band: the date line keeps its chip in plain case; Start carries its arrow; on a phone the band keeps to the
   headline, Start and Tomo's hello under it (the lead and the step bar wait for a wider screen: the plan says it). */
/* the date line in plain case at 14 px (no all-caps label over the headline) */
.td-band .eyebrow { text-transform: none; letter-spacing: 0; font-size: var(--fs-14); }
.td-band .eyebrow .chip { text-transform: none; letter-spacing: 0; margin-left: var(--s-2); vertical-align: 1px; }
.td-band .btn.start svg { width: 20px; height: 20px; margin-left: var(--s-1); }
.td-band .btn.start { gap: var(--s-2); }
/* Keep going, and under it the step it starts ("Review 18 items"), on one line each */
.td-band .btn.td-go { flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; padding-block: var(--s-2); }
.td-go-main { display: inline-flex; align-items: center; gap: var(--s-2); }
.td-go-next { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); font-weight: 400; line-height: 1.3; }
.td-band > #td-hello:empty { display: none; }
.td-hello-words .tutor-hello-say::after { display: none; }
.td-done-go { display: grid; gap: var(--s-3); }
.td-tomorrow { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: var(--fs-18); font-weight: 700; color: var(--band-ink); }
.td-tomorrow .hanamaru { width: 40px; height: 40px; }
.td-run { white-space: nowrap; }
@media (max-width: 720px) {
  /* Start comes before Tomo's hello at every phone size: the one next thing first, never pushed off the screen. */
  .td-band > .band-go { order: 2; }
  .td-band > .tutor-hello { order: 3; }
  /* Her hello is about two lines (home.js picks a line that fits): her small self (44 px, a tap opens her chat)
     beside one short Japanese line and its English. Her name tag is for screen readers only: her face says it. */
  .td-band > .tutor-hello { align-items: flex-end; gap: var(--s-2); }
  .td-band .tutor-hello-me { width: 44px; }
  .td-band p.tutor-hello-say { flex: 1 1 auto; margin: 0; padding: var(--s-2) var(--s-3); font-size: var(--fs-16); line-height: 1.5; }
  .td-band p.tutor-hello-say::after { bottom: 16px; }
  .td-band .tutor-hello-say > b:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .td-band .td-hi-ja { display: block; }
  .td-band .td-hi-ja:has(rt) { line-height: var(--lh-ruby-big); }
  .td-band .tutor-hello-say .en { margin-top: 2px; }
}
@media (max-width: 600px) {
  .td-band .td-lead { display: none; }
  .td-band h1 { margin-bottom: 0; }
}
@media (max-width: 480px) {
  .td-band .td-segbar { display: none; }
  .td-band .td-know { width: 100%; }
}

/* A first visit: the level as five tiles (one tap saves it), the placement test, and three small choices. */
.td-level { margin-top: var(--grid-gap); }
.td-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-4); }
.td-lv { display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 72px; padding: var(--s-2); border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); text-align: center; line-height: 1.25; white-space: normal; }
.td-lv b { font-size: var(--fs-24); font-variant-numeric: tabular-nums; }
.td-lv span { font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); }
@media (hover: hover) { .td-lv:hover { border-color: var(--accent-text); background: var(--accent-soft); } }
.td-unsure { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); margin: var(--s-3) 0 0; }
.td-unsure svg, .td-more .go svg { width: 18px; height: 18px; }
.td-yours { display: grid; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.td-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.td-yours .td-pick .seg-label { min-width: 13em; }
@media (max-width: 720px) {
  .td-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .td-yours .td-pick { display: grid; gap: var(--s-2); }
  .td-yours .td-pick .seg-label { min-width: 0; }
}

/* The plan: the steps to do (each a way in, with its ›), the steps done folded into one line, its note, and the
   minutes a day behind the ⋯ in its head. */
.td-grid { margin-top: var(--grid-gap); }
.td-notes { display: grid; gap: var(--s-3); padding-top: var(--s-4); }
.td-note { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; font-size: var(--fs-14); color: var(--ink-2); }
.td-note svg { width: 20px; height: 20px; color: var(--accent-text); margin-top: 2px; }
.td-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); margin: 0; font-size: var(--fs-14); color: var(--ink-2); }
.plan-row .pi .td-hm { width: 36px; height: 36px; }
.plan-row.done .pi .maru { font-size: var(--fs-24); }
.td-done { border-bottom: 1px solid var(--line); }
.td-plan .card-head + .td-done { border-top: 1px solid var(--line); }
.td-done > summary { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-5); color: var(--ink-2); cursor: pointer; list-style: none; }
.td-done > summary::-webkit-details-marker { display: none; }
.td-done > summary::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--ink-3); -webkit-mask: var(--i-chev) center / 18px no-repeat;
  mask: var(--i-chev) center / 18px no-repeat; transition: transform .15s; }
.td-done[open] > summary::after { transform: rotate(180deg); }
@media (hover: hover) { .td-done > summary:hover { background: var(--surface-2); } }
.td-done > summary:focus-visible { outline-offset: -2px; }
.td-done > summary .maru { font-size: var(--fs-20); }
.td-done-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-done > .plan-list { border-top: 1px solid var(--line); }
.td-done > .plan-list > li:last-child { border-bottom: 0; }
.td-plan .card-head { align-items: center; }
.td-planmenu { margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) auto; }
.td-planmenu .menu-list { min-width: 240px; }
.td-change b { margin-left: var(--s-1); }
/* every row a way in: a › at its end, as on every other list */
.td-plan a.plan-row { grid-template-columns: 28px 44px minmax(0, 1fr) auto auto 20px; grid-template-areas: "idx icon main extra time chev"; }
.td-plan a.plan-row::after { content: ""; grid-area: chev; width: 20px; height: 20px; background: var(--ink-3); -webkit-mask: var(--i-next) center / 20px no-repeat; mask: var(--i-next) center / 20px no-repeat; }
@media (max-width: 720px) {
  /* A step is a row of its title, one line and its minutes in plain words: no icon well, no kanji tiles, no price
     tag; the next one carries an accent edge, a step done the site's done mark; each ends in its ›. */
  .td-plan .plan-row:not(.done) { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "main time chev"; }
  .td-plan .plan-row.done { grid-template-columns: 44px minmax(0, 1fr) auto 20px; grid-template-areas: "icon main time chev"; }
  .td-plan .plan-row:not(.done) .pi { display: none; }
  .td-plan .plan-row { min-height: 64px; align-items: center; }
  .td-plan .plan-row .pi, .td-plan .plan-row .price { align-self: center; }
  .td-plan .plan-row .extra { display: none; }
  .td-plan .plan-row .pt { font-size: var(--fs-16); }
  /* a step's line wraps to its end (never cut with …: it may be the Japanese the learner is about to say) */
  .td-plan .plan-row .pd { display: block; white-space: normal; overflow-wrap: anywhere; }
  .td-plan .plan-row.next { box-shadow: inset 3px 0 0 var(--accent); }
  .td-plan .plan-row .price { height: auto; padding: 0; background: none; color: var(--ink-3); clip-path: none; border-radius: 0; font-weight: 400; }
  .td-plan .plan-row .price::before { display: none; }
  .td-plan .plan-row .price b { font-size: var(--fs-14); font-weight: 400; }
  .td-done > summary { padding: var(--s-2) var(--s-4); }
}

/* The stamp row at the plan's foot: "This week" on the left, on one baseline with the day letters, the seven stamps on
   the right (the days in a row are on the band's date line); today, once stamped, in ai. Every day has its mark slot
   over its letter: a past day with no stamp an empty ring, so the stamps never float over a row of bare letters. */
.stampcard .today-done { color: var(--accent-text); font-weight: 700; }
.td-streak { border-top: 1px solid var(--line); }
.td-stamprow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); }
.td-week { flex: none; margin: 0; font-size: var(--fs-14); line-height: 1.4; color: var(--ink-2); }
.td-streak .stampcard > li > span:last-child { line-height: 1.4; }
.td-streak .stampcard .missed .st { border: 1.5px solid var(--line-strong); }
.td-streak .stampcard { flex: 0 1 auto; grid-template-columns: repeat(7, minmax(0, 32px)); gap: 4px; margin: 0; padding: 0; border: 0; background: none; }
.td-streak .stampcard > li { gap: 2px; }
.td-streak .stampcard .st { width: 32px; max-width: 100%; }
.td-streak .stampcard .rest .st { font-size: var(--fs-14); }
.td-rest { margin: 0; padding: 0 var(--s-5) var(--s-3); }
@media (max-width: 720px) { .td-stamprow { padding: var(--s-3) var(--s-4); } .td-rest { padding: 0 var(--s-4) var(--s-3); } }
@media (max-width: 380px) { .td-stamprow { flex-wrap: wrap; row-gap: var(--s-1); } .td-streak .td-stamps { flex: 1 1 100%; justify-content: space-between; } }

/* Today's kanji on a phone: the grid paper beside its meaning and readings, not over them. */
@media (max-width: 560px) {
  .td-kanji .kanji-card-body { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
  .td-kanji .hogan { width: 96px; }
  .td-kanji .hogan .model { font-size: 66px; }
  .td-kanji .kmeaning { font-size: var(--fs-20); }
}

/* Today's kanji: the grid paper and the meaning open its page. */
a.hogan { color: var(--ink); text-decoration: none; }
@media (hover: hover) { a.hogan:hover { border-color: var(--accent-text); } }
.kmeaning a { color: inherit; text-decoration: none; }
@media (hover: hover) { .kmeaning a:hover { text-decoration: underline; } }
.td-kmeta { margin: var(--s-3) 0 0; }
.td-kmeta a { display: inline-flex; align-items: center; min-height: var(--tap); }
.td-kword { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.td-kword .kword { min-height: var(--tap); align-items: center; }
.col-stack > .td-culture { margin-top: 0; }

/* The culture note: its Japanese beside a play button, its English held to three lines until Read more. */
.td-cu-ja { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr); gap: var(--s-3); align-items: start; margin-top: var(--s-3); }
.td-cu-ja .ja { margin: 0; font-size: var(--fs-22); color: var(--pop-ink); }
.td-cu-en { margin-top: var(--s-3); max-width: var(--measure); }
.td-cu-en.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.td-culture .link { min-height: var(--tap); color: var(--pop-ink); text-decoration-color: var(--shu); text-decoration-thickness: 3px; text-underline-offset: 5px; font-weight: 700; }
.td-culture .td-readmore { display: inline-flex; align-items: center; margin-top: var(--s-1); }
.td-culture .td-readmore[hidden] { display: none; }

/* Small fixes: a word that must not break; on the smallest or shortest phones Start keeps to two words. */
.td-nowrap { white-space: nowrap; }
@media (max-width: 380px), (max-width: 720px) and (max-height: 700px) {
  .td-band .td-start-more { display: none; }
}
/* the shortest phones keep the plan's first row in sight: the button keeps to its word (the plan marks the step) */
@media (max-width: 720px) and (max-height: 660px) {
  .td-band .td-go-next { display: none; }
}
@media (max-width: 380px) {
  .td-yours .seg button { padding: 0 var(--s-3); }
  .td-yours .td-ja { display: none; }
  .td-levels { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .td-lv { padding: var(--s-2) var(--s-1); }
}

/* Cards from Anki or a spreadsheet (decks.js ankiImport, on Add and Decks): each column with a few of its values
   and what it holds, the first cards as they will look, then the deck. */
.anki h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-18); }
.anki-how { margin: var(--s-3) 0; }
.anki-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-3); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.anki-col { display: grid; gap: var(--s-2); align-content: start; min-width: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.anki-sample { font-size: var(--fs-14); color: var(--ink-2); overflow-wrap: anywhere; }
.anki-sample[lang=ja] { font-size: var(--fs-16); }
.anki-preview td[lang=ja] { font-size: var(--fs-20); line-height: var(--lh-ruby); }
.anki-deck { margin-top: var(--s-4); align-items: end; }
.anki-sum { margin: var(--s-3) 0; font-weight: 700; }
.anki.done h2 { display: flex; align-items: center; gap: var(--s-2); }

/* Decks (decks.js): New deck a quiet button with Import and Back up behind ⋯ (on a phone New deck waits in the ⋯
   too, beside the title: most visits study a deck already there); a deck is its name, up to two lines and its
   cards, the whole card the way in, with Study on its foot row (the deck to study first has the one main button);
   the search across every card only once there are more than six decks on a phone. */
.dk-head > .row { flex-wrap: nowrap; }
.dk-head .menu { flex: none; }
.dk-search { margin-bottom: var(--s-4); }
.dk-search input { max-width: 460px; }
.dk-item { position: relative; display: grid; min-width: 0; }
.dk-item > .deck { height: 100%; }
.deck .dk-name { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.deck .dk-name h3 { min-width: 0; }
.deck .dk-due { flex: none; font-size: var(--fs-14); font-weight: 700; color: var(--warn-text); white-space: nowrap; }
.deck .dk-about { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-item .deck .foot { min-height: var(--tap); align-items: center; }
.dk-item:has(.dk-study) .deck .foot { padding-right: 7.5em; }
.dk-study { position: absolute; right: var(--s-5); bottom: var(--s-5); gap: var(--s-1); min-height: var(--tap); padding: 0 var(--s-4); }
.dk-study svg { width: 18px; height: 18px; }
.dk-bin { margin-top: var(--s-7); }
.dk-bin .list { padding: var(--s-1) var(--s-4); }
@media (max-width: 720px) {
  .dk-search.few { display: none; }
  .deckgrid { gap: var(--s-3); }
  .deck { padding: var(--s-4); gap: var(--s-1); }
  .dk-study { right: var(--s-4); bottom: var(--s-4); }
  /* the title and its ⋯ side by side (New deck waits in the ⋯ on a phone), so the decks come first */
  .pagehead.dk-head { flex-wrap: nowrap; }
  .pagehead.dk-head > .grow { flex: 1 1 auto; min-width: 0; }
  .pagehead.dk-head > .row { width: auto; flex: none; justify-content: flex-end; }
}
/* One deck: Study first, then Quiz, Drills and ⋯ in one row; on a phone Add cards and Edit cards wait in the ⋯, the
   filter waits for more than 20 cards and a card's delete for Edit cards, with Done by the cards to end it (a
   computer keeps Add, Paste and the deletes in view). */
.dk-tools { margin-bottom: 14px; }
@media (max-width: 720px) {
  .dk-tools.dk-few:not(.dk-editing) { display: none; }
  .dk-tools .filter.dk-few { display: none; }
  .dk-tools > button { flex: 1 1 0; }
  .dk-deck:not(.editing) [data-del] { display: none; }
  .dk-deck.editing [data-del] { color: var(--bad-text); }
}

/* Add class material (add.js): on a finger, Take a photo first and no "drop a file" box; the tips in one fold. One
   set of buttons is drawn and these rules choose the main one, with the same test as app.css's coarse-only words (a
   coarse pointer, or a page a finger has touched): Choose a file with a mouse, Take a photo on a finger. */
.add-ways > h2 { justify-content: center; margin-top: var(--s-2); }
.add-ways > .row { justify-content: center; margin-top: 6px; }
.add-row > .add-main-fine { order: -1; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
@media (hover: hover) { .add-row > .add-main-fine:hover { background: var(--accent-hover); border-color: var(--accent-hover); } }
.add-tips { max-width: 760px; }
.add-tips ul { margin: var(--s-1) 0 var(--s-3); padding-left: var(--s-5); }
.add-tips li + li { margin-top: var(--s-2); }
/* the other ways in under the tips (a phone): one list of rows, lined up */
@media (max-width: 720px) { ul.add-alt.foot { display: block; margin: var(--s-4) 0 0; border-top: 1px solid var(--line); } }
@media (hover: none) and (pointer: coarse) {
  .drop.add-ways { display: flex; flex-direction: column; border: 0; background: none; padding: 0; text-align: left; }
  .drop.add-ways > svg, .drop.add-ways > h2 { display: none; }
  .drop.add-ways > p.mute { order: 2; margin: var(--s-3) 0 0; font-size: var(--fs-14); }
  .drop.add-ways > .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); margin-top: 0; }
  .drop.add-ways > .row > .big { min-height: 52px; padding: 0 var(--s-3); font-size: var(--fs-16); }
  .drop.add-ways > .row > .add-main-fine { order: 0; background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
  .drop.add-ways > .row > .add-main-coarse { order: -1; grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
}
html[data-touch]:not([data-keys]) .drop.add-ways { display: flex; flex-direction: column; border: 0; background: none; padding: 0; text-align: left; }
html[data-touch]:not([data-keys]) .drop.add-ways > :is(svg, h2) { display: none; }
html[data-touch]:not([data-keys]) .drop.add-ways > p.mute { order: 2; margin: var(--s-3) 0 0; font-size: var(--fs-14); }
html[data-touch]:not([data-keys]) .drop.add-ways > .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); margin-top: 0; }
html[data-touch]:not([data-keys]) .drop.add-ways > .row > .big { min-height: 52px; padding: 0 var(--s-3); font-size: var(--fs-16); }
html[data-touch]:not([data-keys]) .drop.add-ways > .row > .add-main-fine { order: 0; background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
html[data-touch]:not([data-keys]) .drop.add-ways > .row > .add-main-coarse { order: -1; grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }