/* The app's own styles sit in a cascade layer, so the card editor's scoped
   card styles (unlayered) always win over them inside a card. See editor.js. */
@layer app {
/* Pages. */

/* ---------- hero (the torii) ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 340px;
  display: flex; align-items: flex-end;
  background: #070812;
}
.hero--tall { min-height: min(86vh, 820px); align-items: center; }
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; animation: hero-in 1.6s var(--ease-out) both; }
.hero--tall .hero__img img { object-position: 50% 60%; }
/* On wide screens the welcome's photo is set wider than the band so the
   gate stands two-thirds across — clear of the words, not behind them. */
@media (min-width: 1000px) {
  .hero--tall .hero__img { right: auto; width: 132%; }
  .hero--tall .hero__lede { max-width: 560px; }
}
@keyframes hero-in { from { opacity: 0; transform: scale(1.04); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 8, 18, 0.88) 0%, rgba(7, 8, 18, 0.55) 38%, rgba(7, 8, 18, 0) 70%),
    linear-gradient(0deg, var(--hero-fade) 0%, color-mix(in oklab, var(--hero-fade) 40%, transparent) 22%, transparent 55%);
}
.hero__inner {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: 72px var(--gutter) 44px;
  color: #f2f3fa;
}
.hero--tall .hero__inner { padding-top: 96px; padding-bottom: 96px; }
.hero .eyebrow { color: rgba(242, 243, 250, 0.72); }
.hero__title {
  margin-top: 18px;
  font: var(--type-display); font-size: clamp(48px, 7.4vw, 104px);
  letter-spacing: -0.02em; line-height: 0.98;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__title--sm { font-size: clamp(38px, 5vw, 64px); }
.hero__title em { font-style: italic; color: #ffd1e5; }
.hero__lede { margin-top: 16px; max-width: 52ch; font: var(--type-lede); color: rgba(242, 243, 250, 0.84); }
.hero__lede strong { color: #fff; font-weight: 650; }
.hero__cta { margin-top: 28px; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.hero__cta .btn--ghost { color: rgba(242, 243, 250, 0.86); }
.hero__cta .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* The secondary action over the photo: a quiet glass button, light in both themes. */
.hero__cta .btn:not(.btn--accent, .btn--ghost) { --btn-bg: rgba(255, 255, 255, 0.08); --btn-border: rgba(255, 255, 255, 0.2); --btn-fg: #fff; color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero__cta .btn:not(.btn--accent, .btn--ghost):hover { --btn-bg: rgba(255, 255, 255, 0.14); --btn-border: rgba(255, 255, 255, 0.3); }
.hero__note { margin-top: 22px; color: rgba(242, 243, 250, 0.7); font: var(--type-caption); font-size: 14px; }
.hero__note b { color: #fff; font-weight: 600; }
.hero__counts { display: inline-flex; gap: 18px; font: 500 14px/1 var(--font); color: rgba(242, 243, 250, 0.72); }
.hero__counts b { font: 650 17px/1 var(--font); font-variant-numeric: tabular-nums; margin-right: 4px; }
.hero__counts .n { color: #a8d4ff; }
.hero__counts .l { color: #ffad8f; }
.hero__counts .r { color: #8fe8bf; }
/* (The dashboard's compact band keeps its own short fade in both themes.) */
[data-theme="paper"] .hero:not(.hero--compact)::before {
  background:
    linear-gradient(90deg, rgba(7, 8, 18, 0.86) 0%, rgba(7, 8, 18, 0.5) 40%, rgba(7, 8, 18, 0) 72%),
    linear-gradient(0deg, var(--hero-fade) 0%, transparent 26%);
}

/* ---------- welcome ---------- */

/* Three plain columns: what it is, said once, without boxes around it. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
.pillar__title { font: 600 16px/1.3 var(--font); letter-spacing: -0.005em; }
.pillar__text { margin-top: 6px; max-width: 36ch; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- toolbars ---------- */

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }

/* ---------- deck page ---------- */

.deck-head {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border-soft);
  margin-bottom: 28px;
}
.deck-head .deck-art { height: 116px; }
.deck-head .deck-art__emblem { font-size: 72px; left: 28px; bottom: -6px; opacity: 0.95; }
.deck-head .deck-art__emblem.is-cjk { font-size: 60px; bottom: 8px; }
.deck-head__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 28px 6px; }
.deck-head__title { font: var(--type-title); font-size: 30px; letter-spacing: -0.028em; margin-top: 8px; }
.deck-head__desc { margin-top: 6px; color: var(--text-muted); max-width: 70ch; }
.deck-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deck-head__meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 28px 22px; flex-wrap: wrap; }
.deck-head__mastery { display: flex; align-items: center; gap: 12px; min-width: 220px; flex: 0 1 340px; }
.deck-head__mastery .mastery { flex: 1; height: 6px; }

.browser__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.browser__search { flex: 1 1 260px; max-width: 380px; }
.browser__search .input { padding-left: 40px; }
.browser__search-icon { position: absolute; left: 13px; width: 17px; height: 17px; color: var(--text-faint); pointer-events: none; }

.bulk {
  position: sticky; top: calc(var(--topbar-h) + 10px); z-index: 5;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px 8px 16px; margin-bottom: 12px; border-radius: 14px;
  background: var(--surface-active); border: 1px solid var(--accent-line);
  box-shadow: var(--shadow);
  animation: pop-in 0.18s var(--ease-out);
}
.bulk > span { margin-right: 8px; color: var(--text-dim); font-size: 14px; }

.table { border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--surface); overflow: hidden; }
.table__head, .table__row {
  display: grid; grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1fr) 120px;
  align-items: center; gap: 12px; padding: 0 16px;
}
.table__head { height: 42px; border-bottom: 1px solid var(--border-soft); font: var(--type-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint); background: var(--bg-elevated); }
.table__row { min-height: 56px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background-color var(--quick); }
.table__row:last-child { border-bottom: 0; }
.table__row:hover { background: var(--surface-hover); }
.table__row:focus-visible { outline-offset: -2px; border-radius: 0; background: var(--surface-hover); }
.table__row.is-selected { background: var(--accent-soft); }
.table__q { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.table__a { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table__tags { display: inline-flex; gap: 4px; flex: none; }
.table__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.table__thumb { flex: none; width: 30px; height: 30px; border-radius: 8px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.flag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; box-shadow: 0 0 8px var(--warn); }
@media (max-width: 760px) {
  .table__head, .table__row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .table__head > :nth-child(3), .table__row > :nth-child(3) { display: none; }
  .table__tags { display: none; }
  .deck-head__body, .deck-head__meta { padding-left: 18px; padding-right: 18px; }
}

.deck-pick { display: grid; gap: 4px; }
.deck-pick__item { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; text-align: left; }
.deck-pick__item:hover { background: var(--surface-hover); }
.deck-pick__item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--deck); }

/* ---------- deck dialog ---------- */

.deck-form__preview { margin: -20px -24px 22px; }
.deck-form__preview .deck-art { height: 120px; }
.deck-form__row { display: grid; grid-template-columns: 1fr 120px; gap: 20px; align-items: start; margin-top: 18px; }
.deck-form__emblem { text-align: center; font-size: 20px; font-weight: 700; }
@media (max-width: 520px) { .deck-form__row { grid-template-columns: 1fr; } }

/* ---------- card styling dialog ---------- */

/* Code on the left, the card on the right and always in view. On narrow
   screens the card sits on top and stays pinned while the code scrolls. */
.styling { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "code preview"; gap: 24px; align-items: start; }
.styling__editor { grid-area: code; }
.styling__preview { grid-area: preview; display: grid; gap: 10px; align-content: start; position: sticky; top: 0; }
.styling__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.styling__code { min-height: 360px; }
.styling__status { color: var(--warn, var(--text-muted)); min-height: 1.2em; }
.styling__status:empty { display: none; }
@media (max-width: 820px) {
  .styling { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "code"; gap: 16px; }
  /* Pinned to the top of the dialog's scrolling body, over the code. */
  .styling__preview { z-index: 2; margin: -20px -24px 0; padding: 12px 24px 14px; background: var(--surface); border-bottom: 1px solid var(--border-soft); }
  .styling__preview .preview-card__face { min-height: 120px; max-height: 32dvh; padding: 18px 16px 20px; }
  .styling__preview .preview-card__band { height: 24px; }
  .styling__code { min-height: 220px; }
}

/* ---------- preview card (editor, styling, shared) ---------- */

.preview-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card-ground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.preview-card__band { position: relative; height: 34px; overflow: hidden; --wave-size: 28px 14px; }
.preview-card__face { padding: 28px 24px 32px; min-height: 200px; max-height: 60vh; overflow-y: auto; display: grid; align-content: center; position: relative; isolation: isolate; contain: paint; }
.preview-card--lg .preview-card__face { min-height: 320px; padding: 48px 32px; }

/* ---------- editor page ---------- */

.editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }

.recent { margin-top: 36px; }
.recent ul { margin-top: 12px; display: grid; gap: 6px; }
.recent__item {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 8px 8px 8px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--deck);
  animation: pop-in 0.25s var(--ease-out);
}
.recent__q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent__a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }

/* ---------- import ---------- */

.importer { display: grid; gap: 20px; }
.dropzone { border-radius: var(--radius); border: 1.5px dashed var(--border); background: var(--bg-elevated); transition: border-color var(--quick), background-color var(--quick); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.importer__text { border: 0; background: transparent; min-height: 170px; font: 14px/1.6 var(--font-mono); box-shadow: none !important; }
.dropzone__bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--border-soft); }
.dropzone__bar .hint { display: inline-flex; align-items: center; gap: 6px; }
.dropzone__bar label { cursor: pointer; }
.importer__row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.importer__row .field { margin: 0; min-width: 170px; }
.importer__check { display: inline-flex; align-items: center; gap: 8px; height: var(--control); color: var(--text-dim); }
.importer__preview { margin-top: 16px; }
.imp-table { border: 1px solid var(--border-soft); border-radius: 12px; overflow: auto; }
.imp-table__head, .imp-table__row { display: grid; grid-template-columns: repeat(var(--cols), minmax(140px, 1fr)); gap: 0; }
.imp-table__head { background: var(--bg-elevated); border-bottom: 1px solid var(--border-soft); padding: 8px; gap: 8px; }
.imp-table__row span { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.imp-table__row:last-child span { border-bottom: 0; }
.imp-table__row .is-skip { color: var(--text-faint); text-decoration: line-through; }
.select--sm { height: 32px; font-size: 13px; padding-left: 10px; }

.callout { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border-soft); }
.callout > .icon { color: var(--success); margin-top: 2px; }
.callout--accent { background: var(--accent-soft); border-color: var(--accent-line); }
.callout--accent > .icon { color: var(--accent); }
.callout--quiet > .icon { color: var(--text-muted); }
.email-status { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-weight: 600; }
.email-status.is-pending { color: var(--hard); }
/* The email reminder: words on the left, its one action on the right. */
.verify-notice { align-items: center; margin-bottom: 24px; }
.verify-notice > div { flex: 1; min-width: 0; }
.verify-notice .hint { margin-top: 2px; }
@media (max-width: 560px) { .verify-notice { flex-wrap: wrap; } .verify-notice > .btn { width: 100%; } }

/* ---------- settings ---------- */

.saved { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font: 600 13px/1 var(--font); opacity: 0; transition: opacity 0.3s var(--ease); }
.saved.is-on { opacity: 1; }
.settings { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: start; }
.settings__nav { position: sticky; top: calc(var(--topbar-h) + 28px); display: grid; gap: 2px; }
.settings__nav a { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; color: var(--text-muted); font: 550 14px/1 var(--font); transition: background-color var(--quick), color var(--quick); }
.settings__nav a:hover { background: var(--surface-hover); color: var(--text); }
.settings__nav a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.settings__body { display: grid; gap: 22px; }
.settings__section { scroll-margin-top: calc(var(--topbar-h) + 24px); padding: 8px 28px 10px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-soft); }
.settings__title { display: flex; align-items: center; gap: 10px; padding: 22px 0 14px; font: var(--type-heading); font-size: 19px; letter-spacing: -0.015em; }
.settings__intro { color: var(--text-muted); margin-bottom: 8px; max-width: 70ch; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--border-soft); }
.setting--stack { grid-template-columns: 1fr; gap: 14px; }
.setting--end { grid-template-columns: 1fr; justify-items: end; border-top: 0; padding-top: 0; }
.setting__label { font: 600 15px/1.35 var(--font); color: var(--text); display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.setting__label b { color: var(--accent); font-weight: 650; }
.setting .hint { margin-top: 4px; max-width: 60ch; }
.setting__control { display: flex; justify-content: flex-end; }
.setting__control .segmented { max-width: 100%; }
.setting__control > .select, .setting__control > .input { max-width: 300px; }
.input--mono { font-family: var(--font-mono); font-size: 14px; }
.num-input { position: relative; width: 160px; }
.num-input .input { padding-right: 56px; font-variant-numeric: tabular-nums; }
.num-input__suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; pointer-events: none; }
.range-scale { display: flex; justify-content: space-between; color: var(--text-faint); font: var(--type-caption); }
.range-scale span:nth-child(2) { margin-left: 8%; }
.range-scale span:nth-child(3) { margin-right: 8%; }
.stack { display: grid; gap: 8px; width: 100%; }
.advanced { padding: 16px 0 20px; border-top: 1px solid var(--border-soft); }
.advanced summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-dim); font-weight: 550; list-style: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced[open] > summary .icon { transform: rotate(90deg); }
.advanced summary .icon { transition: transform var(--quick); }
.advanced .hint { margin: 10px 0; }
.advanced--rows { margin-top: 4px; padding-bottom: 4px; }
.advanced--rows[open] { padding-bottom: 0; }
.advanced--rows > summary { padding: 4px 0; }
.account-form .setting__control .input { max-width: 300px; }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.theme-opt { display: grid; gap: 10px; padding: 10px; border-radius: 16px; border: 1.5px solid var(--border-soft); text-align: left; transition: border-color var(--quick); }
.theme-opt:hover { border-color: var(--border-strong); }
.theme-opt[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-opt__art { position: relative; height: 84px; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; gap: 8px; padding: 12px; }
.theme-opt--night .theme-opt__art { background: linear-gradient(160deg, #1a1f3f, #090a13); }
.theme-opt--paper .theme-opt__art { background: linear-gradient(160deg, #fbf8f0, #ece4d3); }
.theme-opt--system .theme-opt__art { background: linear-gradient(110deg, #fbf8f0 0 50%, #11142a 50% 100%); }
.theme-opt__card { width: 44%; height: 46px; border-radius: 8px; }
.theme-opt--night .theme-opt__card { background: #1a1e36; border-top: 3px solid #ff8fbf; }
.theme-opt--paper .theme-opt__card { background: #fff; border-top: 3px solid #b0245f; box-shadow: 0 4px 10px rgba(60, 45, 20, 0.12); }
.theme-opt--system .theme-opt__card:first-child { background: #fff; border-top: 3px solid #b0245f; }
.theme-opt--system .theme-opt__card:last-child { background: #1a1e36; border-top: 3px solid #ff8fbf; }
.theme-opt__label { font: 600 14px/1 var(--font); padding: 0 4px 4px; display: flex; justify-content: space-between; }
@media (max-width: 900px) {
  .settings { grid-template-columns: 1fr; gap: 16px; }
  .settings__nav { position: sticky; top: var(--topbar-h); z-index: 6; display: flex; overflow-x: auto; gap: 4px; padding: 8px 0; margin: 0 -16px; padding-left: 16px; background: var(--bg); scrollbar-width: none; }
  .settings__nav a { flex: none; }
  .settings__section { padding: 4px 18px 8px; }
  .setting { grid-template-columns: 1fr; gap: 12px; }
  .setting__control { justify-content: flex-start; }
}

/* ---------- stats ---------- */

.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.stats-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr; } }
.chart { position: relative; }
.chart svg { overflow: visible; }
.chart-grid { stroke: var(--border-soft); stroke-width: 1; }
.chart-grid.is-base { stroke: var(--border); }
.chart-axis { fill: var(--text-muted); font: 500 10.5px var(--font); font-variant-numeric: tabular-nums; }
.chart-hit { cursor: default; }
.chart-hit.is-on { fill: color-mix(in oklab, var(--text) 5%, transparent); }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  display: grid; gap: 3px; padding: 9px 12px; border-radius: 10px;
  background: var(--surface-active); border: 1px solid var(--border); box-shadow: var(--shadow);
  font: 500 12.5px/1.35 var(--font); color: var(--text-dim); white-space: nowrap;
  opacity: 0; transition: opacity 0.12s var(--ease);
}
.chart-tip strong { color: var(--text); font-weight: 650; }
/* "View data": the table behind a chart, shown in place of it. */
.chart.show-table svg, .chart.show-table .heatmap__scroll { display: none; }
.chart.show-table .chart-table { position: static !important; width: 100% !important; height: auto !important; clip: auto !important; margin: 0 !important; overflow: visible !important; white-space: normal !important;
  border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.chart.show-table .chart-table caption { text-align: left; color: var(--text-muted); padding-bottom: 8px; }
.chart.show-table .chart-table th, .chart.show-table .chart-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-soft); text-align: left; }
.chart.show-table .chart-table { display: table; max-height: 320px; }
.chart.show-table { max-height: 360px; overflow: auto; }
.chart-empty { display: grid; place-items: center; min-height: 160px; color: var(--text-muted); text-align: center; padding: 20px; }
.heatmap__scroll { overflow-x: auto; padding-bottom: 6px; }
.hm { fill: var(--hm-0); }
.hm-1 { fill: var(--hm-1); } .hm-2 { fill: var(--hm-2); } .hm-3 { fill: var(--hm-3); } .hm-4 { fill: var(--hm-4); }
.hm:hover { stroke: var(--text); stroke-width: 1.5; }
.hm-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; color: var(--text-faint); font: var(--type-caption); }
.hm-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hm-legend .hm-0 { background: var(--hm-0); } .hm-legend .hm-1 { background: var(--hm-1); } .hm-legend .hm-2 { background: var(--hm-2); } .hm-legend .hm-3 { background: var(--hm-3); } .hm-legend .hm-4 { background: var(--hm-4); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; list-style: none; padding: 0; }
.legend li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font: var(--type-caption); }
.legend b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.legend small { color: var(--text-faint); }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.legend--inline { margin: 0; }
.parts { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2); }
.parts span { min-width: 3px; }
.ret { display: grid; gap: 16px; margin: 0 0 16px; }
.ret > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.ret dt { color: var(--text-dim); }
.ret dd { margin: 0; font: 650 16px/1 var(--font); font-variant-numeric: tabular-nums; }
.ret__bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.ret__bar span { display: block; height: 100%; background: var(--chart-pass); border-radius: 6px; }
.ret__bar--target span { background: var(--text-faint); }

/* ---------- auth ---------- */
.auth__art { position: relative; overflow: hidden; background: #070812; }
.auth__art .auth__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.auth__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 14, 0.85), rgba(5, 6, 14, 0.1) 55%); }
.auth__quote { position: absolute; left: 44px; right: 44px; bottom: 44px; z-index: 2; margin: 0; color: #f2f3fa; }
.auth__main { display: grid; place-items: center; padding: 48px 32px; }
.auth__form { width: 100%; max-width: 400px; display: grid; gap: 0; }
.auth__form .field + .field { margin-top: 16px; }
.auth__title { margin-top: 18px; font: var(--type-display); font-size: 42px; letter-spacing: -0.015em; }
.auth__sub { margin: 10px 0 28px; color: var(--text-muted); }
.auth__form .btn--block { margin-top: 24px; }
.auth__form [data-error] { margin-top: 14px; }
.auth__switch { margin-top: 20px; text-align: center; color: var(--text-muted); }
.auth__forgot { margin-top: 10px; text-align: center; }
@media (max-width: 900px) {
  .auth__art { display: none; }
  .auth__main { padding: 32px 20px; align-items: start; }
}

/* ---------- shared deck ---------- */

.shared-preview { max-width: 640px; margin: 0 auto; display: grid; gap: 14px; }
.shared-preview__nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.shared-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.shared-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft); }
.shared-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- share dialog ---------- */

.share { display: grid; gap: 16px; }
.share .setting { border-top: 0; padding: 0; grid-template-columns: 1fr auto; }
.share .input-group .input { padding-right: 96px; font-size: 14px; }
.lost__img, .finish__img, .finish__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
.lost__inner, .finish__inner { padding: 48px 24px; max-width: 640px; display: grid; justify-items: center; gap: 14px; animation: rise 0.8s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.lost__title, .finish__title { font: var(--type-display); font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.015em; }
.lost__text, .finish__lede { color: rgba(242, 243, 250, 0.78); max-width: 46ch; margin-bottom: 14px; }
.finish__stats { display: flex; gap: 14px; margin: 14px 0 22px; flex-wrap: wrap; justify-content: center; }
.finish__stats > div { min-width: 130px; padding: 16px 20px; border-radius: 16px; background: rgba(13, 15, 29, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.finish__stats dt { font: var(--type-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgba(242, 243, 250, 0.6); }
.finish__stats dd { margin: 8px 0 0; font: 600 30px/1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.finish__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.finish__save { margin-top: 18px; color: rgba(242, 243, 250, 0.78); }

/* ---------- Today (returning) ---------- */

.auth__art { background: linear-gradient(160deg, #141a3a, #07080f 70%); --wave-color: rgba(170, 182, 255, 0.12); }
.auth__art::after { display: none; }
.auth__brand { position: absolute; left: 44px; top: 40px; display: flex; align-items: center; gap: 12px; color: #f2f3fa; font: 650 18px/1 var(--font); }
.auth__brand .auth__mark { display: block; width: 34px; height: auto; }
.auth__quote { position: absolute; left: 44px; right: 44px; bottom: 48px; margin: 0; color: #f2f3fa; font: var(--type-display); font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; max-width: 12ch; }
.auth__title { margin-top: 0; }
.finish__wave, .lost__wave { position: absolute; inset: 0; z-index: -1; --wave-color: color-mix(in oklab, var(--deck, var(--accent)) 12%, transparent); }
.finish__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in oklab, var(--deck, var(--accent)) 16%, var(--surface)); color: var(--deck-text, var(--accent)); margin-bottom: 4px; }
.finish__icon .icon { width: 30px; height: 30px; }
.finish__lede, .lost__text { color: var(--text-dim); }
.finish__stats > div { background: var(--surface); border-color: var(--border-soft); backdrop-filter: none; -webkit-backdrop-filter: none; }
.finish__stats dt { color: var(--text-muted); }
.finish__save { color: var(--text-dim); }
.finish__save .link { color: var(--accent); }
.lost__code { font: 600 13px/1 var(--font); letter-spacing: .3em; color: var(--accent); }


/* ---------- the torii, back where it was ---------- */

.hero--compact { min-height: max(340px, 22vw); align-items: center; container-type: inline-size; }
.hero--compact .hero__inner { padding-top: 40px; padding-bottom: 40px; }
/* The gate stands at the center of the window, not of the band beside the
   side rail: the photo reaches back under the rail (out of sight) by the
   rail's width — the photo is cropped so the gate is its exact middle.
   Vertically, its top beam sits 34px below the band's top at any width:
   the photo is as wide as its box (100cqw + the rail) and 0.6734 as tall,
   and the beam stands at 50.5% of its height, so the photo's top goes at
   34px − 0.34 × that width. (Wide windows get a taller band, so the gate's
   feet and a short reflection stay in.) Narrow screens scale the photo by
   height instead, so there it's placed by percentage. */
.hero--compact .hero__img { left: calc(-1 * var(--rail-w)); right: auto; width: calc(100% + var(--rail-w)); }
.hero--compact .hero__img img { object-position: 50% calc(34px - 0.34 * (100cqw + var(--rail-w))); animation: none; }
@media (max-width: 900px) {
  /* Here the photo is scaled to the band's height, so the water is cut by
     making the photo's box taller than the band: bottom-aligned, its last
     18% falls below the band, out of sight. */
  .hero--compact .hero__img img { height: calc(100% / 0.82); object-position: 50% 100%; }
}
/* Darken the left for the words; fade only the reflection into the page. */
.hero--compact::before {
  background:
    linear-gradient(90deg, rgba(7, 8, 18, 0.82) 0%, rgba(7, 8, 18, 0.45) 34%, rgba(7, 8, 18, 0) 60%),
    linear-gradient(0deg, var(--hero-fade) 0%, color-mix(in oklab, var(--hero-fade) 50%, transparent) 6%, transparent 15%);
}
.hero__later { color: rgba(242, 243, 250, 0.66); }

/* ---------- the torii on a phone ----------
   No room beside the words, so the words come first and the gate stands
   in a band below them: the welcome starts 96px under the bar with its
   actions stacked; Today's band puts the gate to the right of the words. */
@media (max-width: 560px) {
  .hero--tall { min-height: 0; align-items: flex-start; }
  .hero--tall .hero__inner { padding: 96px 20px 300px; }
  .hero--tall .hero__img { top: auto; height: 340px; }
  .hero--tall .hero__img img { object-position: 50% 62%; }
  .hero--tall::before { background: linear-gradient(180deg, #070812 0%, #070812 calc(100% - 340px), rgba(7, 8, 18, 0.55) calc(100% - 270px), rgba(7, 8, 18, 0) calc(100% - 160px)), linear-gradient(0deg, var(--hero-fade) 0%, transparent 30%); }
  .hero--tall .hero__title { font-size: 44px; line-height: 1.05; }
  .hero--tall .hero__lede { font-size: 17px; line-height: 26px; }
  .hero--tall .hero__cta { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero--tall .hero__cta .btn { width: 100%; height: 48px; }
  .hero--tall .hero__note { margin-top: 20px; font-size: 14px; line-height: 21px; }

  .hero--compact { min-height: 0; }
  .hero--compact .hero__inner { padding: 40px 20px 32px; }
  .hero--compact .hero__img img { object-position: 12% 100%; }
  .hero--compact .hero__cta { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* Today's section header stays one row on a phone: the heading, then
   "All decks" in words and New deck as a plus. */
@media (max-width: 420px) {
  .section__head--row { align-items: center; }
  .section__head--row .section__title { font: 600 20px/1.2 var(--font); }
  .section__head--row .page-head__actions { flex-wrap: nowrap; gap: 8px; }
  .section__head--row .btn--icon-sm { width: 44px; height: 44px; padding: 0; }
  .section__head--row .btn--icon-sm .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.page--after-hero { padding-top: 32px; }
/* The first thing after the band starts right at that padding — the
   welcome-back slot counts only when it's showing. */
.page--after-hero > :is(:first-child, [data-backlog]:empty + *) { margin-top: 0; }
.page--after-hero > [data-backlog]:empty { display: none; }
.auth__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.auth__art::after { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 14, 0.85), rgba(5, 6, 14, 0.15) 55%, rgba(5, 6, 14, 0.45)); }
.auth__art .wave { display: none; }
.auth__brand, .auth__quote { z-index: 2; }

.browser__more .select { height: 36px; min-width: 150px; }
.chip--xs { height: 20px; padding: 0 7px; font-size: 11px; flex: none; }
/* ---------- the torii photo pages: sign-in panel, session complete, 404 ----------
   Light text over the darkened photo, in both themes. */

.on-photo { --photo-ground: #070812; --photo-ink: #f2f3fa; --photo-dim: rgba(242, 243, 250, 0.8); --photo-faint: rgba(242, 243, 250, 0.6); --photo-accent: #ffb3d4; }

.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 560px); min-height: calc(100dvh - var(--topbar-h)); }
.auth__art { position: relative; overflow: hidden; background: var(--photo-ground); }
.auth__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.auth__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 14, 0.85), rgba(5, 6, 14, 0.15) 55%, rgba(5, 6, 14, 0.45)); }
.auth__brand { position: absolute; z-index: 2; left: 44px; top: 40px; display: flex; align-items: center; gap: 12px; color: var(--photo-ink); font: 650 18px/1 var(--font); }
.auth__quote { position: absolute; z-index: 2; left: 44px; right: 44px; bottom: 48px; margin: 0; max-width: 12ch; color: var(--photo-ink); font: var(--type-display); font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; }
.auth__main { display: grid; place-items: center; padding: 48px 32px; }
.auth__form { width: 100%; max-width: 400px; display: grid; }
.auth__form .field + .field { margin-top: 16px; }
.auth__form .btn--block { margin-top: 24px; }
.auth__form [data-error] { margin-top: 14px; }
.auth__title { font: var(--type-display); font-size: 42px; letter-spacing: -0.015em; }
.auth__sub { margin: 10px 0 28px; color: var(--text-muted); }
.auth__switch { margin-top: 20px; text-align: center; color: var(--text-muted); }
.auth__forgot { margin-top: 10px; text-align: center; }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__art { display: none; }
  .auth__main { padding: 32px 20px; align-items: start; }
}

.lost, .finish {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100dvh - var(--topbar-h));
  display: grid; place-items: center; text-align: center;
  background: var(--photo-ground); color: var(--photo-ink);
}
/* The 404 and the email pages: the words up in the sky, the gate below them. */
.lost { place-items: start center; padding-top: clamp(64px, 14vh, 180px); }
.lost .lost__img { object-position: 50% 30%; }
.finish { min-height: 100dvh; }
.lost__img, .finish__img, .finish__img img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.lost::before, .finish::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 45%, rgba(7, 8, 18, 0.4), rgba(7, 8, 18, 0.88)); }
.lost__inner, .finish__inner { display: grid; justify-items: center; gap: 14px; max-width: 640px; padding: 48px 24px; animation: rise 0.8s var(--ease-out) both; }
.lost__code { font: 600 13px/1 var(--font); letter-spacing: 0.3em; color: var(--photo-accent); }
.lost__title, .finish__title { font: var(--type-display); font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.015em; }
.lost__text, .finish__lede { max-width: 46ch; margin-bottom: 14px; color: var(--photo-dim); }
.finish__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #ffd1e5; }
.finish__icon .icon { width: 30px; height: 30px; }
.finish__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 14px 0 22px; }
.finish__stats > div { min-width: 130px; padding: 16px 20px; border-radius: 16px; background: rgba(13, 15, 29, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.finish__stats dt { font: var(--type-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--photo-faint); }
.finish__stats dd { margin: 8px 0 0; font: 600 30px/1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.finish__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.finish__save { margin-top: 18px; color: var(--photo-dim); }
.finish__save .link { color: var(--photo-accent); }
/* Buttons over the photo. */
.on-photo .btn:not(.btn--accent) { --btn-bg: rgba(255, 255, 255, 0.08); --btn-border: rgba(255, 255, 255, 0.16); --btn-fg: #fff; color: #fff; }
.on-photo .btn--ghost { --btn-bg: transparent; --btn-border: transparent; }
}