/* Today: the daily spaced review (js/ailp-today.js): its home tile, the #today page and the results. */

/* Subject colours (the same as the home folders) */
.td-s-fa { --c: #2f7a63; } .td-s-ma { --c: #34609f; } .td-s-pc { --c: #6c49a0; } .td-s-tax { --c: #a9562a; } .td-s-law { --c: #8f3450; }
:root[data-theme="dark"] .td-s-fa { --c: #5cc3a3; } :root[data-theme="dark"] .td-s-ma { --c: #79a3e8; } :root[data-theme="dark"] .td-s-pc { --c: #b595e3; }
:root[data-theme="dark"] .td-s-tax { --c: #e5935f; } :root[data-theme="dark"] .td-s-law { --c: #e5809e; }

/* ---------- the home tile: first in the row of feature cards, the full width, compact ---------- */
.today-tile {
  --td-flame: var(--warn, #b7791f);
  grid-column: 1 / -1; order: -1; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 16px;
  background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
}
.today-tile:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.today-tile:active { transform: scale(0.99); }
.today-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Something to review: the strongest card on the page, like a primary button */
.today-tile.hot { background: var(--ink); color: var(--bg); border-color: var(--ink); --td-flame: #f0b955; }
:root[data-theme="dark"] .today-tile.hot { --td-flame: #b7791f; }
.today-tile.quiet { box-shadow: none; border-style: dashed; }
.today-tile.done { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.tt-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tt-kicker { font: 700 0.68rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
.tt-big { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.tt-big b { font: 800 1.55rem/1 var(--mono); }
.tt-big svg { color: var(--good); flex: none; }
.tt-sub { font-size: 0.85rem; opacity: 0.78; overflow-wrap: anywhere; }
.tt-streak { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.tt-streak small { font-weight: 500; font-size: 0.8rem; opacity: 0.78; }
.tt-streak .td-flame { color: var(--td-flame); flex: none; }
.tt-streak.cold .td-flame { opacity: 0.45; }
.tt-go {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 12px;
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.92rem; white-space: nowrap;
}
.tt-go::after { content: "→"; margin-left: 8px; transition: transform 0.15s var(--ease); }
.today-tile:hover .tt-go::after { transform: translateX(3px); }
.today-tile.hot .tt-go { background: var(--bg); color: var(--ink); }
.today-tile.quiet .tt-go, .today-tile.calm .tt-go { background: none; color: var(--ink); border: 1.5px solid var(--line); }
/* A grid item spanning every column stops the grid's auto-fit from widening the cards below it, which would leave
   gaps in their row (two cards under four columns). So with the tile there, the row of cards wraps as flex: the
   tile takes a line of its own and the cards after it share the next line evenly, each at least as wide as before. */
.home-tools:has(> .today-tile) { display: flex; flex-wrap: wrap; }
.home-tools:has(> .today-tile) > * { flex: 1 1 210px; min-width: 0; }
.home-tools:has(> .today-tile) > .today-tile { flex-basis: 100%; }
@media (max-width: 520px) {
  .home-tools:has(> .today-tile) > * { flex-basis: 100%; }
  .today-tile { padding: 12px 14px; gap: 8px 12px; }
  .tt-main { flex-basis: 100%; }
  .tt-go { margin-left: auto; min-height: 38px; padding: 0 14px; }
}

/* ---------- the Today page ---------- */
.td-head p { max-width: 34em; }
.td-alert { margin: 14px auto 0; max-width: 520px; text-align: center; }
.td-stats { max-width: 520px; margin: 20px auto 16px; text-align: center; }
.td-strip { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto; }
.td-strip-label { font: 600 0.68rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.td-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; width: min(100%, 300px); }
.td-day { aspect-ratio: 1; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); }
.td-day.on { background: var(--good); border-color: var(--good); }
.td-day.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.td-page .td-actions { max-width: 520px; margin: 22px auto 0; }
.td-start { white-space: normal; }
.td-note { margin: 12px auto 0; max-width: 32em; text-align: center; color: var(--muted); font-size: 0.9rem; }
.td-subhead { margin: 30px 0 10px; font: 700 0.72rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.td-subjects { display: grid; gap: 12px; }
.td-subj { min-width: 0; padding: 14px 16px; border-left: 4px solid var(--c, var(--line)); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.td-subj h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; font-size: 1rem; }
.td-subj h3 small { margin-left: auto; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.td-unit { min-width: 0; overflow-wrap: anywhere; }
.td-chip {
  display: inline-block; padding: 2px 7px; border-radius: 6px; font: 700 0.68rem/1.4 var(--mono); letter-spacing: 0.06em; vertical-align: 1px;
  background: color-mix(in srgb, var(--c, var(--muted)) 16%, transparent); color: var(--c, var(--muted));
}
.td-levels { list-style: none; margin: 0; padding: 0; }
.td-levels li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.td-levels li:first-child { border-top: 0; }
.td-lt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.td-lt small { display: block; color: var(--muted); font-size: 0.78rem; }
.td-later { margin: 6px 0 0; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
/* How well a level has stuck: one dot per box */
.td-pips { display: inline-flex; gap: 3px; flex: none; }
.td-pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.td-pips i.on { background: var(--good); }
.td-how { margin: 26px 0 0; color: var(--muted); font-size: 0.9rem; }
.td-how summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.td-how p { margin: 8px 0 0; max-width: 40em; }

/* ---------- caught up / nothing yet / results ---------- */
.td-caught .td-strip, .td-results .td-strip { margin-top: 4px; }
.td-empty { padding-top: 40px; }
.td-empty .tricky, .td-caught .tricky { max-width: 32em; margin-left: auto; margin-right: auto; }
.td-streak-msg {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 auto 4px; padding: 8px 14px; border-radius: 14px;
  background: var(--warn-soft, var(--soft)); color: var(--ink); font-weight: 600; font-size: 0.92rem; text-align: left;
}
.td-streak-msg .td-flame { color: var(--warn, #b7791f); flex: none; }
.td-list .rl-txt { min-width: 0; overflow-wrap: anywhere; }
.td-list .rl-txt small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.78rem; }
.td-page .done-wrap .actions .ailp-btn { white-space: normal; }
@media (max-width: 600px) {
  .td-page .done-wrap .actions { flex-direction: column-reverse; align-items: stretch; }
  .td-subj { padding: 12px 14px; }
  .td-subhead { margin-top: 24px; }
}