/* Dashboard and direct login ------------------------------------------------
   These rules deliberately use the same slightly uneven ink lines as the
   learning paths: thin navy strokes, a coral brush mark and pale washi washes.
   The generated concept lives at assets/ui/dashboard-concept-v1.png; the live
   interface below is semantic HTML rather than text baked into that image. */

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("assets/fonts/josefin-sans-variable.ttf") format("truetype");
}

:root {
  --button-texture-coral: url("assets/ui/button-texture-coral-v1.png");
  --button-texture-indigo: url("assets/ui/button-texture-indigo-v1.png");
  --button-texture-powder: url("assets/ui/button-texture-powder-v1.png");
  --button-texture-mint: url("assets/ui/button-texture-mint-v1.png");
  --button-texture-gold: url("assets/ui/button-texture-gold-v1.png");
  --button-texture-lavender: url("assets/ui/button-texture-lavender-v1.png");
}

#dashboard-home {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V10M10 19V5M16 19v-7M3 19h18'/%3E%3Cpath d='m3 8 6-5 6 6 6-5'/%3E%3C/svg%3E");
}

.learning-nav-divider {
  width: 1px;
  height: 32px;
  align-self: center;
  background: rgba(17, 45, 80, .14);
  transform: rotate(1.5deg);
}

.learning-nav button + .learning-nav-divider,
.learning-nav-divider + button { margin-left: 0; }
.learning-nav .learning-nav-divider + button {
  padding-left: 20px;
  border-left: 0;
  border-radius: 12px;
}

/* The approved MojiMichi poster stays one composition at every viewport size. */
.profile-gate {
  box-sizing: border-box;
  width: 100%;
  place-items: center;
  overflow: hidden auto;
  padding: clamp(14px, 3vw, 34px);
  background:
    repeating-linear-gradient(0deg, rgba(30,50,70,.018) 0 1px, transparent 1px 5px),
    #f3eee4;
}
.profile-panel {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: min(100%, 940px);
  min-height: min(850px, calc(100dvh - 28px));
  overflow: hidden;
  padding: clamp(28px, 4vw, 46px) clamp(28px, 6vw, 72px);
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 78%, rgba(203,220,243,.15), transparent 23%),
    #fffaf2;
  border: 10px solid transparent;
  border-image: none;
  border-radius: 0;
  box-shadow: 7px 9px 0 rgba(17,45,80,.06), 0 24px 62px rgba(31,44,55,.12);
  transform: none;
}
.profile-panel::before,
.profile-panel::after { content: none; display: none; }

.profile-story {
  position: static;
  z-index: 2;
  display: block;
  min-width: 0;
  padding: 0;
  overflow: visible;
  text-align: left;
}
.profile-story::after { content: none; display: none; }
.profile-brand {
  position: relative;
  z-index: 2;
  width: 295px;
  height: 84px;
}
.profile-brand-art {
  display: block;
  width: 100%;
  height: 100%;
  background: url("assets/ui/mojimichi-logo-transparent-v1.png") center / 100% auto no-repeat;
}
.profile-form-copy { margin: 0 0 clamp(52px, 8vh, 78px); }
.profile-form-copy .profile-tagline {
  box-sizing: border-box;
  width: 390px;
  height: 154px;
  overflow: hidden;
  margin: 0;
  color: transparent;
  background: url("assets/ui/mojimichi-tagline-transparent-v1.png") center / 100% auto no-repeat;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  white-space: nowrap;
}
.profile-landscape {
  position: absolute;
  z-index: 0;
  inset: 72px -54px -16px -54px;
  opacity: .94;
  pointer-events: none;
}
.profile-road-scene {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
}
.profile-road-scene.is-mobile { display: none; }
.profile-road-scene text {
  fill: var(--ink);
  stroke: #fffaf2;
  stroke-width: 5px;
  paint-order: stroke fill;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--jp-serif);
  font-weight: 800;
}
.profile-falling-leaves {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.profile-falling-leaves span {
  position: absolute;
  top: -28px;
  left: var(--leaf-x);
  width: var(--leaf-size);
  height: calc(var(--leaf-size) * .66);
  background: var(--button-texture-coral) center / cover no-repeat;
  border-radius: 0 85% 0 85%;
  opacity: 0;
  transform-origin: 50% 20%;
  animation: profile-leaf-fall var(--leaf-time) linear infinite;
  animation-delay: var(--leaf-delay);
}
.profile-falling-leaves span:nth-child(1) { --leaf-x: 12%; --leaf-size: 20px; --leaf-time: 15s; --leaf-delay: -3s; }
.profile-falling-leaves span:nth-child(2) { --leaf-x: 36%; --leaf-size: 26px; --leaf-time: 19s; --leaf-delay: -12s; }
.profile-falling-leaves span:nth-child(3) { --leaf-x: 68%; --leaf-size: 17px; --leaf-time: 16s; --leaf-delay: -8s; }
.profile-falling-leaves span:nth-child(4) { --leaf-x: 84%; --leaf-size: 24px; --leaf-time: 20s; --leaf-delay: -16s; }
.profile-falling-leaves span:nth-child(5) { --leaf-x: 54%; --leaf-size: 16px; --leaf-time: 18s; --leaf-delay: -5s; }
.profile-falling-leaves span:nth-child(6) { --leaf-x: 25%; --leaf-size: 21px; --leaf-time: 22s; --leaf-delay: -19s; }
@keyframes profile-leaf-fall {
  0% { opacity: 0; transform: translate(0, -25px) rotate(-28deg); }
  8% { opacity: .72; }
  25% { transform: translate(30px, 23vh) rotate(95deg); }
  50% { transform: translate(-26px, 46vh) rotate(220deg); }
  75% { transform: translate(34px, 70vh) rotate(330deg); opacity: .72; }
  100% { opacity: 0; transform: translate(-12px, 100vh) rotate(480deg); }
}
@media (prefers-reduced-motion: reduce) {
  .profile-falling-leaves { display: none; }
  .profile-road-scene text { display: none; }
}

.profile-login {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  gap: 0;
  margin: clamp(26px, 4vh, 34px) 0 0;
  padding: 0;
}
.profile-field { display: grid; gap: 8px; margin-top: 16px; }
.profile-login label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink);
  font: 800 .94rem/1.2 var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
.profile-login label span { color: var(--coral-dark); font: 700 .64rem/1.2 var(--jp-sans); letter-spacing: .06em; }
.profile-login input,
.profile-login input:focus {
  box-sizing: border-box;
  width: 100%;
  height: 58px;
  padding: 9px 18px;
  color: var(--ink);
  background: rgba(255,253,248,.76);
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}
.profile-login input:focus {
  background: rgba(255,247,239,.96);
  border-image-source: var(--ink-frame-coral);
}
.profile-login input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px #fffaf2 inset;
  -webkit-text-fill-color: var(--ink);
}
.profile-login .profile-submit {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 0 12px 0 30px;
  color: #fffaf2;
  background: var(--coral);
  border: 8px solid transparent;
  border-image: var(--ink-frame-coral) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
  font: 800 clamp(1rem, 2vw, 1.25rem)/1 var(--serif);
  text-transform: none;
}
.profile-login .profile-submit span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 47% 53% 46% 54%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
}
.profile-login .profile-submit span { width: 40px; height: 40px; background: rgba(255,255,255,.12); border-color: #fffaf2; transform: rotate(-2deg); }
.profile-login .profile-submit:hover { color: #fff; background: #d94743; transform: none; }
.profile-login .profile-submit:disabled { opacity: .62; cursor: wait; }
.profile-login .profile-feedback { min-height: 1.35em; margin: 7px 0 0; text-align: left; }
.profile-or {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 13px 0 10px;
  color: #52677b;
  font: 800 .65rem/1 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.profile-or::before,
.profile-or::after {
  content: "";
  height: 4px;
  flex: 1;
  background: var(--ink-rule-navy) center / 100% 100% no-repeat;
  opacity: .42;
}
.profile-guest {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  justify-self: center;
  padding: 5px 8px;
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.profile-guest strong { font: 800 .94rem/1 var(--serif); text-shadow: 0 0 5px #fffaf2, 0 0 12px #fffaf2; }
.profile-guest-arrow {
  color: var(--ink);
  font: 800 1.2rem/1 var(--serif);
  text-shadow: 0 0 5px #fffaf2, 0 0 12px #fffaf2;
}
.profile-guest:hover { color: var(--coral-dark); background: transparent; text-decoration: underline; text-underline-offset: 3px; transform: none; }
.profile-guest-note { margin-top: 2px; color: #52677b; text-align: center; text-shadow: 0 0 6px #fffaf2, 0 0 12px #fffaf2; }

/* Dashboard canvas ------------------------------------------------------- */
body.dashboard-home {
  background:
    url("assets/ui/washi-learning-v3.png") center top / cover fixed no-repeat,
    #f5f0e7;
}
body.dashboard-home .shell { width: min(calc(100% - 38px), 1500px); }
body.dashboard-home .start-menu {
  padding: 18px 5px 42px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.dashboard-home .deck-picker { display: block; width: 100%; }
body.dashboard-home .menu-head,
body.dashboard-home .menu-tabs { display: none; }
.dashboard-page { color: var(--ink); }
.dashboard-intro {
  position: relative;
  display: grid;
  min-height: 235px;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  align-items: center;
  gap: 50px;
  padding: 32px clamp(20px, 5vw, 70px) 28px;
  overflow: hidden;
  border-bottom: 1px solid rgba(17, 45, 80, .2);
}
.dashboard-intro::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -135px;
  width: 370px;
  height: 270px;
  background: radial-gradient(circle at 50% 20%, rgba(237,85,77,.8) 0 31%, transparent 32%);
  opacity: .16;
  pointer-events: none;
}
.dashboard-intro::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 18px;
  width: 78px;
  height: 6px;
  background: var(--coral);
  border-radius: 60% 30% 70% 40%;
  transform: rotate(-2deg);
}
.dashboard-intro .eyebrow { margin: 0 0 10px; color: var(--ink); }
.dashboard-intro h2 {
  margin: 0;
  font: 800 clamp(2.8rem, 5.7vw, 5.25rem)/.88 var(--serif);
  letter-spacing: -.06em;
}
.dashboard-intro > div > p:last-child { margin: 18px 0 0; font-size: 1rem; }
.dashboard-proverb { position: relative; z-index: 1; display: grid; justify-items: start; gap: 5px; }
.dashboard-proverb strong { font: 500 clamp(1.4rem, 2.5vw, 2.1rem)/1.2 var(--jp-serif); letter-spacing: .11em; }
.dashboard-proverb em { color: var(--muted); font-family: var(--serif); }
.dashboard-proverb span { color: var(--ink); font-size: .84rem; }

.dashboard-metrics {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: 9px;
  margin: 18px 0 34px;
}
.dashboard-metric {
  position: relative;
  min-height: 178px;
  padding: 22px 20px;
  overflow: hidden;
  background: rgba(255, 250, 242, .83);
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
}
.dashboard-metric:nth-child(2) { background: rgba(203, 220, 243, .66); transform: rotate(.08deg); }
.dashboard-metric:nth-child(3) { background: rgba(204, 231, 216, .66); transform: rotate(-.07deg); }
.dashboard-metric:nth-child(4) { background: rgba(247, 234, 208, .72); transform: rotate(.06deg); }
.dashboard-metric:nth-child(5) { background: rgba(210, 227, 244, .72); transform: rotate(-.08deg); }
.dashboard-metric h3 { margin: 0 0 26px; font: 800 .92rem/1.15 var(--serif); }
.dashboard-metric > strong { display: block; font: 800 clamp(2.2rem, 3.2vw, 3.35rem)/.9 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.dashboard-metric p { margin: 12px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.dashboard-metric.is-memory {
  padding-left: 126px;
  background: rgba(246, 206, 201, .72);
}
.dashboard-metric.is-memory::before,
.dashboard-metric.is-memory::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 58px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
}
.dashboard-metric.is-memory::before { background: conic-gradient(var(--coral) var(--memory-score), rgba(255,255,255,.55) 0); }
.dashboard-metric.is-memory::after { inset: 69px auto auto 33px; width: 60px; height: 60px; background: rgba(255, 250, 242, .92); }
.dashboard-metric.is-memory > strong { position: relative; z-index: 1; }

.dashboard-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: start;
  gap: 18px;
}
.dashboard-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 10px 15px;
}
.dashboard-section-heading .eyebrow { margin: 0 0 4px; color: var(--coral-dark); }
.dashboard-section-heading h3 { margin: 0; font: 800 clamp(1.8rem, 3vw, 2.65rem)/1 var(--serif); letter-spacing: -.035em; }
.dashboard-section-heading > span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.dashboard-group {
  --group-surface: rgba(246, 206, 201, .72);
  --group-accent: #d94743;
  margin-bottom: 10px;
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  background: var(--group-surface);
  box-shadow: none;
}
.dashboard-group.dashboard-tone-1 { --group-surface: rgba(204, 231, 216, .76); --group-accent: #176955; }
.dashboard-group.dashboard-tone-2 { --group-surface: rgba(203, 220, 243, .8); --group-accent: #224f82; }
.dashboard-group.dashboard-tone-3 { --group-surface: rgba(247, 234, 208, .82); --group-accent: #b36c31; }
.dashboard-group > summary,
.dashboard-deck > summary {
  display: grid;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.dashboard-group > summary::-webkit-details-marker,
.dashboard-deck > summary::-webkit-details-marker { display: none; }
.dashboard-group > summary {
  min-height: 112px;
  grid-template-columns: 70px minmax(155px, .9fr) minmax(160px, 1fr) 80px 80px 30px;
  gap: 15px;
  padding: 17px 20px;
}
.dashboard-group[open] > summary { border-bottom: 1px solid rgba(17,45,80,.22); }
.dashboard-group-glyph {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  background: rgba(255,250,242,.6);
  border: 1px solid rgba(17,45,80,.15);
  border-radius: 48% 52% 47% 53%;
  font: 1.95rem/1 var(--jp-serif);
  transform: rotate(-2deg);
}
.dashboard-group-title,
.dashboard-deck-title { display: grid; min-width: 0; gap: 5px; }
.dashboard-group-title > strong { font: 800 1.35rem/1 var(--serif); }
.dashboard-group-title small,
.dashboard-deck-title small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-group-progress { display: grid; gap: 8px; }
.dashboard-group-progress > span {
  height: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,45,80,.15);
  border-radius: 9px 4px 8px 5px;
}
.dashboard-group-progress b { display: block; height: 100%; background: var(--group-accent); border-radius: inherit; }
.dashboard-group-progress small { color: var(--muted); font-size: .65rem; }
.dashboard-group-stat,
.dashboard-deck-stat { display: grid; justify-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.dashboard-group-stat strong,
.dashboard-deck-stat strong { font: 800 1.05rem/1 var(--serif); }
.dashboard-group-stat small,
.dashboard-deck-stat small { color: var(--muted); font-size: .57rem; text-transform: uppercase; letter-spacing: .06em; }
.dashboard-chevron { font-size: 1.25rem; transition: transform 160ms ease; }
details[open] > summary .dashboard-chevron { transform: rotate(180deg); }

.dashboard-decks { padding: 9px; background: rgba(255,250,242,.62); }
.dashboard-deck {
  margin: 6px 0;
  background: rgba(255,253,248,.78);
  border: 7px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 5px / 0 stretch;
}
.dashboard-deck > summary {
  min-height: 75px;
  grid-template-columns: 46px minmax(155px, 1fr) 72px 72px 72px 25px;
  gap: 10px;
  padding: 10px 14px;
}
.dashboard-deck[open] > summary { border-bottom: 1px solid rgba(17,45,80,.14); }
.dashboard-deck-icon { font: 1.55rem/1 var(--jp-serif); text-align: center; }
.dashboard-deck-title > strong { overflow: hidden; font: 800 .88rem/1.2 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.dashboard-card-list { padding: 8px; background: rgba(17,45,80,.025); }
.dashboard-card-row {
  display: grid;
  min-height: 76px;
  grid-template-columns: 58px minmax(170px, 1fr) minmax(120px, .55fr) 76px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(17,45,80,.12);
}
.dashboard-card-row:last-child { border-bottom: 0; }
.dashboard-card-face { overflow: hidden; font: 1.55rem/1 var(--jp-serif); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-card-name,
.dashboard-card-latest,
.dashboard-card-score { display: grid; gap: 4px; }
.dashboard-card-name > strong { font: 800 .78rem/1 var(--serif); }
.dashboard-card-name span,
.dashboard-card-name small,
.dashboard-card-latest span,
.dashboard-card-latest small,
.dashboard-card-score span,
.dashboard-card-score small { color: var(--muted); font-size: .6rem; line-height: 1.3; }
.dashboard-card-score { justify-items: center; text-align: center; }
.dashboard-card-score > strong { font: 800 1.4rem/1 var(--serif); }
.dashboard-card-score span { text-transform: uppercase; letter-spacing: .06em; }

.dashboard-accuracy {
  padding: 23px 18px 20px;
  background: rgba(255,250,242,.84);
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
  transform: rotate(.05deg);
}
.dashboard-accuracy .dashboard-section-heading { margin-inline: 2px; }
.dashboard-accuracy .dashboard-section-heading h3 { font-size: 1.5rem; }
.dashboard-accuracy-rows { display: grid; gap: 15px; margin-top: 24px; }
.dashboard-accuracy-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 9px;
}
.dashboard-accuracy-row > span { font: 800 .72rem/1.2 var(--serif); }
.dashboard-accuracy-row > i { height: 8px; overflow: hidden; background: rgba(17,45,80,.1); border-radius: 7px 4px 8px 5px; }
.dashboard-accuracy-row > i b { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), #176955); }
.dashboard-accuracy-row > strong { font: 800 .8rem/1 var(--serif); text-align: right; }
.dashboard-accuracy-row > small { grid-column: 2 / 4; margin-top: -5px; color: var(--muted); font-size: .58rem; }
.dashboard-muted { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }

.dashboard-empty {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  padding: 34px;
  text-align: center;
  background: rgba(246,206,201,.45);
  border: 8px solid transparent;
  border-image: var(--ink-frame-navy) 72 82 / 7px / 1px stretch;
  border-radius: 0;
}
.dashboard-empty > span { font: 3rem/1 var(--jp-serif); }
.dashboard-empty h3 { margin: 12px 0 6px; font: 800 1.7rem/1 var(--serif); }
.dashboard-empty p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.55; }
.dashboard-empty button {
  margin-top: 22px;
  padding: 12px 18px;
  color: var(--ink);
  background: rgba(255,250,242,.82);
  border: 7px solid transparent;
  border-image: var(--ink-frame-coral) 72 82 / 6px / 1px stretch;
  border-radius: 0;
  box-shadow: none;
  font: 800 .86rem/1 var(--serif);
}
.dashboard-empty button:hover { color: var(--coral-dark); background: #fffaf2; }

.dashboard-group summary:focus-visible,
.dashboard-deck summary:focus-visible,
.profile-guest:focus-visible,
.dashboard-empty button:focus-visible { outline: 3px solid rgba(237,85,77,.38); outline-offset: 3px; }

@media (max-width: 1120px) {
  .dashboard-metrics { grid-template-columns: repeat(3, 1fr); }
  .dashboard-metric.is-memory { grid-column: span 1; }
  .dashboard-content { grid-template-columns: 1fr; }
  .dashboard-accuracy { order: -1; }
  .dashboard-accuracy-rows { grid-template-columns: repeat(2, 1fr); }
  .dashboard-group > summary { grid-template-columns: 62px minmax(150px, 1fr) minmax(150px, 1fr) 70px 30px; }
  .dashboard-group-stat:nth-of-type(2) { display: none; }
}

@media (max-height: 760px) {
  .profile-gate { place-items: start center; padding-block: 10px; }
  .profile-panel { min-height: calc(100dvh - 20px); padding-block: 24px; }
  .profile-brand { height: 78px; }
  .profile-login { margin-top: 20px; }
  .profile-form-copy { margin-bottom: 42px; }
  .profile-field { margin-top: 11px; }
  .profile-login input,
  .profile-login input:focus { height: 54px; }
  .profile-login .profile-submit { min-height: 58px; margin-top: 18px; }
  .profile-login .profile-submit span { width: 37px; height: 37px; }
  .profile-login .profile-feedback { margin-top: 4px; }
  .profile-or { margin-block: 7px; }
  .profile-guest { min-height: 44px; }
}

@media (max-width: 880px) {
  .profile-gate { place-items: start center; padding: 10px; }
  .profile-panel {
    width: min(calc(100vw - 20px), 660px);
    min-height: 0;
    overflow: hidden;
    padding: 28px clamp(20px, 7vw, 46px) 30px;
  }
  .profile-story {
    z-index: 1;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }
  .profile-brand { width: 295px; height: 84px; }
  .profile-landscape {
    display: block;
    inset: 66px -260px -28px -250px;
    opacity: .46;
  }
  .profile-road-scene.is-wide {
    width: auto;
    height: 92%;
    inset: auto auto 0 66%;
    transform: translateX(-66%);
  }
  .profile-login { z-index: 1; max-width: none; margin-top: 28px; padding: 0; }
  .profile-form-copy { margin-bottom: clamp(28px, 5vh, 50px); }
}

@media (max-width: 760px) {
  .learning-nav-divider { display: none; }
  .learning-nav .learning-nav-divider + button { padding-left: 12px; }
  body.dashboard-home .shell { width: min(calc(100% - 18px), 1500px); }
  .dashboard-intro { min-height: 0; grid-template-columns: 1fr; gap: 25px; padding: 28px 10px 24px; }
  .dashboard-intro h2 { font-size: clamp(2.65rem, 13vw, 4.1rem); }
  .dashboard-proverb { display: none; }
  .dashboard-metrics { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .dashboard-metric { min-height: 138px; padding: 16px 13px; }
  .dashboard-metric h3 { margin-bottom: 18px; font-size: .78rem; }
  .dashboard-metric > strong { font-size: 2.1rem; }
  .dashboard-metric.is-memory { grid-column: 1 / -1; min-height: 145px; padding-left: 128px; }
  .dashboard-metric.is-memory::before { top: 47px; }
  .dashboard-metric.is-memory::after { top: 58px; }
  .dashboard-accuracy-rows { grid-template-columns: 1fr; }
  .dashboard-section-heading { align-items: start; }
  .dashboard-group > summary {
    min-height: 104px;
    grid-template-columns: 48px minmax(0, 1fr) 26px;
    gap: 10px;
    padding: 13px 12px;
  }
  .dashboard-group-glyph { width: 44px; height: 44px; font-size: 1.5rem; }
  .dashboard-group-progress { grid-column: 2; }
  .dashboard-group-stat { display: none; }
  .dashboard-chevron { grid-column: 3; grid-row: 1 / 3; }
  .dashboard-deck > summary { grid-template-columns: 38px minmax(0,1fr) 58px 24px; padding: 9px; }
  .dashboard-deck-stat:nth-of-type(2),
  .dashboard-deck-stat:nth-of-type(3) { display: none; }
  .dashboard-card-row { grid-template-columns: 43px minmax(0,1fr) 62px; gap: 8px; padding: 9px 6px; }
  .dashboard-card-latest { display: none; }
  .dashboard-card-face { font-size: 1.3rem; }
  .dashboard-card-name small { display: none; }
}

@media (max-width: 470px) {
  .dashboard-metrics { grid-template-columns: 1fr 1fr; }
  .dashboard-metric:nth-child(5) { grid-column: 1 / -1; }
  .dashboard-metric p { font-size: .63rem; }
  .dashboard-section-heading > span { display: none; }
}

@media (max-width: 880px) {
  .profile-gate { place-items: start stretch; padding: 0; }
  .profile-panel {
    width: 100%;
    min-height: 100dvh;
    padding-inline: 22px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.profile-locked .profile-panel { border-radius: 0; }
  .profile-landscape {
    inset: 0 -135px -30px;
    opacity: .8;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.35) 12%, rgba(0,0,0,.65) 28%, rgba(0,0,0,.9) 44%, #000 55%, #000 95%, transparent);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.35) 12%, rgba(0,0,0,.65) 28%, rgba(0,0,0,.9) 44%, #000 55%, #000 95%, transparent);
  }
  .profile-road-scene.is-wide { display: none; }
  .profile-road-scene.is-mobile {
    display: block;
    width: auto;
    height: calc(160% - 211.2px);
    inset: auto clamp(40px, 8vw, 68px) 60px auto;
    transform: none;
  }
  .profile-brand { width: min(281px, calc(100vw - 64px)); height: auto; aspect-ratio: 281 / 80; }
  .profile-form-copy { margin: 0 0 4px 14px; }
  .profile-form-copy .profile-tagline {
    width: auto;
    height: auto;
    overflow: visible;
    color: var(--ink);
    background: none;
    font: 700 clamp(.65rem, 3.2vw, .82rem)/1.15 "Josefin Sans", var(--ui);
    letter-spacing: .155em;
    text-indent: 0;
    text-shadow: none;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .profile-tagline span:first-child,
  .profile-tagline-accent {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }
  .profile-form-copy + .profile-field { margin-top: 4px; }
  .profile-login { margin-top: 0; }
  .profile-login label { text-shadow: 0 0 3px #fffaf2, 0 0 8px #fffaf2, 0 0 14px #fffaf2; }
  .profile-field { margin-top: 14px; }
  .profile-login input,
  .profile-login input:focus { height: 56px; }
  .profile-login .profile-submit { padding-left: 18px; font-size: 1rem; }
}

@media (max-width: 360px) {
  .profile-login .profile-submit { padding-left: 14px; font-size: .9rem; }
}

/* ImageGen paper textures give controls the same tactile printed surface as
   the login concept. Functional game controls keep their high-contrast HUD. */
.profile-login .profile-submit,
body:not(.is-playing) .learning-continue,
body:not(.is-playing) .deck-launch-start,
body:not(.is-playing) .dashboard-empty button {
  background-image: linear-gradient(rgba(255,250,242,.14), rgba(255,250,242,.14)), var(--button-texture-coral);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .learning-nav button,
body:not(.is-playing) .learning-pager button,
body:not(.is-playing) .card-list-pager .text-button,
body:not(.is-playing) .active-profile,
body:not(.is-playing) .path-app-back,
body:not(.is-playing) .path-app-close {
  background-image: linear-gradient(rgba(255,250,242,.42), rgba(255,250,242,.42)), var(--button-texture-powder);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .learning-nav button[aria-current="page"],
body:not(.is-playing) .menu-head .text-button,
body:not(.is-playing) .menu-tab.is-current {
  background-image: linear-gradient(rgba(255,250,242,.42), rgba(255,250,242,.42)), var(--button-texture-coral);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .learning-tracks button,
body:not(.is-playing) .menu-tab,
body:not(.is-playing) .deck-launch-clear {
  background-image: linear-gradient(rgba(255,250,242,.34), rgba(255,250,242,.34)), var(--button-texture-gold);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .learning-tracks button[aria-pressed="true"],
body:not(.is-playing) .deck-option.is-picked {
  background-image: linear-gradient(rgba(255,250,242,.2), rgba(255,250,242,.2)), var(--button-texture-mint);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .deck-option:not(.learning-lesson):not(.learning-area-card):nth-child(4n+1),
body:not(.is-playing) .learning-trail > li:nth-child(4n+1) .learning-lesson,
body:not(.is-playing) .learning-area-card:nth-child(4n+1) {
  background-image: linear-gradient(rgba(255,250,242,.42), rgba(255,250,242,.42)), var(--button-texture-coral);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .deck-option:not(.learning-lesson):not(.learning-area-card):nth-child(4n+2),
body:not(.is-playing) .learning-trail > li:nth-child(4n+2) .learning-lesson,
body:not(.is-playing) .learning-area-card:nth-child(4n+2) {
  background-image: linear-gradient(rgba(255,250,242,.2), rgba(255,250,242,.2)), var(--button-texture-mint);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .deck-option:not(.learning-lesson):not(.learning-area-card):nth-child(4n+3),
body:not(.is-playing) .learning-trail > li:nth-child(4n+3) .learning-lesson,
body:not(.is-playing) .learning-area-card:nth-child(4n+3) {
  background-image: linear-gradient(rgba(255,250,242,.66), rgba(255,250,242,.66)), var(--button-texture-indigo);
  background-position: center;
  background-size: cover;
}
body:not(.is-playing) .deck-option:not(.learning-lesson):not(.learning-area-card):nth-child(4n+4),
body:not(.is-playing) .learning-trail > li:nth-child(4n+4) .learning-lesson,
body:not(.is-playing) .learning-area-card:nth-child(4n+4) {
  background-image: linear-gradient(rgba(255,250,242,.24), rgba(255,250,242,.24)), var(--button-texture-gold);
  background-position: center;
  background-size: cover;
}

/* The five top-level learning choices carry the full palette. They are the
   colourful focal point; the controls and deeper lists above stay quieter. */
body.learning-home .learning-area-card:nth-child(1) { background-image: var(--button-texture-coral); }
body.learning-home .learning-area-card:nth-child(2) { background-image: var(--button-texture-mint); }
body.learning-home .learning-area-card:nth-child(3) {
  background-image: linear-gradient(rgba(255,250,242,.48), rgba(255,250,242,.48)), var(--button-texture-indigo);
}
body.learning-home .learning-area-card:nth-child(4) { background-image: var(--button-texture-gold); }
body.learning-home .learning-area-card:nth-child(5) { background-image: var(--button-texture-lavender); }