/* ==========================================================================
   Walkthrough — the day-by-day P5R calendar (subphase-3 refinement).
   Motif: the in-game Confidant-Calendar day card. Full-width date-stamp header
   over a two-column Day | Night body. Loud frame (date plates, month dividers,
   deadline banners, rank plates, milestone stamps, Palace dossiers); calm
   content (the day's action steps stay level and scannable).

   Colour discipline: the running sentence is always --paper. Hue lives only on
   the small inline objects — sun/moon ticks, stat pills, item/media/seed chips.
   --blood stays the only colour on the frame and on every completion state.
   Every added hue names a real game meaning (warm sun, cool moon, red/green/
   blue Will Seeds) — no decoration.
   ========================================================================== */

:root {
  --wt-strip-offset: 4.25rem;

  /* Day / Night accents (game-accurate warm sun / cool moon) */
  --sun: #e8a838;
  --moon: #6f74d6;
  /* Media (books / DVDs / movies) — used nowhere else */
  --media: #46a99a;
  /* Mementos dive dossier — the "other dungeon", green so it reads apart from
     the Palace's blood-red infiltration block (#4) */
  --mem: #3f8a5c;
  --mem-deep: #23412f;
  --mem-bright: #79cf90;
  /* Will Seeds — literally coloured crystals */
  --seed-red: #d9433a;
  --seed-green: #4fa85f;
  --seed-blue: #4f86c7;

  /* Social-stat hues (constrained micro-palette, only on the stat pills) */
  --stat-kn: #5b8fc7;
  --stat-gu: #d9a441;
  --stat-pr: #5fa86a;
  --stat-ki: #cf74a1;
  --stat-ch: #d9803a;

  /* Trophy metals */
  --metal-bronze: #c07a3c;
  --metal-silver: #c2c6cc;
  --metal-gold: #e0a52a;
  --metal-platinum: #94bcd0;
}

[hidden] { display: none !important; }

/* ---- Loading skeleton ---------------------------------------------------- */

#loading { display: grid; gap: var(--space-3); padding-block: var(--space-4); }
.skel {
  height: 3.5rem;
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%);
  background-size: 200% 100%;
  animation: skel-slide 1.1s linear infinite;
}
@keyframes skel-slide { to { background-position: -200% 0; } }
.load-error { padding: var(--space-6) 0; }
.load-error p { margin-bottom: var(--space-4); }

/* ---- Intro card ---------------------------------------------------------- */

.wt-intro { margin-bottom: var(--space-5); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wt-intro-head {
  width: 100%; border: none; background: transparent; color: var(--paper); cursor: pointer;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--text-base); text-align: left;
}
.wt-intro-head::before { content: ""; width: 0.5em; height: 1em; background: var(--blood); transform: skewX(var(--slant)); flex: none; }
.wt-intro-head .intro-chev {
  margin-left: auto; width: 0.6em; height: 0.6em;
  border-right: 2px solid var(--smoke-lift); border-bottom: 2px solid var(--smoke-lift);
  transform: rotate(45deg); transition: transform var(--t-med) var(--ease-out);
}
.wt-intro.is-open .intro-chev { transform: rotate(-135deg); }
.wt-intro-body { display: none; padding: 0 var(--space-4) var(--space-4); }
.wt-intro.is-open .wt-intro-body { display: block; }
.wt-intro-body p { font-size: var(--text-sm); color: var(--smoke-lift); margin-bottom: var(--space-3); }
.wt-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2) var(--space-4); margin-top: var(--space-2);
  border-top: 1px solid var(--line); padding-top: var(--space-3);
}
.wt-legend-item { font-size: var(--text-xs); }
.wt-legend-item b { color: var(--paper); text-transform: uppercase; letter-spacing: 0.06em; }
.wt-legend-item span { color: var(--smoke-lift); display: block; margin-top: 0.15em; line-height: 1.45; }

/* ---- Toolbar ------------------------------------------------------------- */

.wt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.wt-search { flex: 1; min-width: 14rem; }
.wt-confidant { flex: none; min-width: 0; width: auto; max-width: 12rem; cursor: pointer; }

/* ---- Two-zone layout: month rail + timeline ------------------------------ */

.wt-layout { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-5); align-items: start; }

.wt-rail {
  position: sticky; top: var(--wt-strip-offset);
  display: flex; flex-direction: column; gap: var(--space-1);
  max-height: calc(100vh - var(--wt-strip-offset) - var(--space-4)); overflow-x: hidden; overflow-y: auto;
}
.wt-rail-tab {
  position: relative; border: none; font: inherit; cursor: pointer; text-align: left;
  background: transparent; color: var(--smoke-lift);
  padding: var(--space-2) var(--space-3);
  transform: skewX(var(--slant)); box-shadow: inset 0 0 0 1px var(--line);
  transition: color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  overflow: hidden;
}
.wt-rail-tab > span { display: block; transform: skewX(calc(-1 * var(--slant))); }
.wt-rail-tab .rt-name { font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-sm); }
.wt-rail-tab .rt-count { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--smoke); }
.wt-rail-tab .rt-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--blood); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease-out); }
.wt-rail-tab:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
.wt-rail-tab.is-active { background: var(--blood); color: var(--paper); box-shadow: none; }
.wt-rail-tab.is-active .rt-count { color: var(--paper); }
.wt-rail-tab.is-active .rt-fill { background: var(--paper); }
.wt-rail-tab.is-done .rt-name { color: var(--paper); }
.wt-rail-tab.is-marker .rt-name::after {
  content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.4em;
  background: var(--blood); transform: skewX(calc(-1 * var(--slant))) rotate(45deg); vertical-align: middle;
}
.wt-rail-tab.is-active.is-marker .rt-name::after { background: var(--paper); }

/* ---- Month sections ------------------------------------------------------ */

.wt-month { scroll-margin-top: calc(var(--wt-strip-offset) + var(--space-3)); }
.wt-month + .wt-month { margin-top: var(--space-5); }
.wt-month-head {
  width: 100%; border: none; cursor: pointer; background: transparent; color: var(--paper);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0 calc(var(--space-3) + 5px); border-bottom: 1px solid var(--line); text-align: left;
}
.wt-month-head .mh-name {
  font-family: "Alfa Slab One", "Arsenal", serif; font-weight: 400; font-size: var(--text-2xl);
  line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--paper); background: var(--ink); transform: skewX(var(--slant));
  padding: 0.14em 0.42em 0.2em; margin-right: 5px; box-shadow: 5px 5px 0 var(--blood);
}
.wt-month-head .mh-name > span { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.wt-month-head:hover .mh-name { box-shadow: 5px 5px 0 var(--maroon); }
.wt-month-head .mh-range { font-size: var(--text-sm); color: var(--smoke-lift); font-style: italic; }
.wt-month-head .mh-spacer { flex: 1; }
.wt-month-head .mh-count { font-size: var(--text-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.wt-month-head .mh-count .slash { color: var(--blood); padding-inline: 0.1em; }
.wt-month-head .mh-count .mh-total { color: var(--smoke-lift); font-weight: 400; }
.wt-month-head .mh-chev {
  width: 0.7em; height: 0.7em; margin-left: var(--space-2);
  border-right: 2px solid var(--smoke-lift); border-bottom: 2px solid var(--smoke-lift);
  transform: rotate(45deg); transition: transform var(--t-med) var(--ease-out);
}
.wt-month.is-open .wt-month-head .mh-chev { transform: rotate(-135deg); }
.wt-month-head:hover .mh-chev { border-color: var(--blood); }
.wt-month-body { display: none; padding-top: var(--space-4); }
.wt-month.is-open .wt-month-body, .wt-month.is-peek .wt-month-body { display: block; }

/* ---- The day card -------------------------------------------------------- */

.wt-day { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.wt-day:last-child { border-bottom: none; }

/* Date-stamp header plate (loud frame, full width) */
.wt-dayhead {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
}
.wt-date {
  display: inline-block; background: var(--paper); color: var(--ink); transform: skewX(var(--slant));
  padding: 0.1em 0.5em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: var(--text-lg); line-height: 1.1; box-shadow: 2px 2px 0 var(--line-strong);
}
.wt-date b { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.wt-date .d-sep { color: var(--blood); }
.wt-wd {
  display: inline-block; background: transparent; color: var(--smoke-lift);
  transform: skewX(var(--slant)); padding: 0.1em 0.4em; box-shadow: inset 0 0 0 1px var(--line-strong);
  font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs);
}
.wt-wd { display: inline-block; transform: skewX(var(--slant)); }
.wt-wd > * { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.wt-dayhead .wt-here {
  margin-left: auto; border: none; cursor: pointer; background: transparent; color: var(--smoke);
  font: inherit; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25em 0.6em; box-shadow: inset 0 0 0 1px var(--line-strong); flex: none;
  transition: color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.wt-dayhead .wt-here:hover { color: var(--paper); box-shadow: inset 0 0 0 1px var(--smoke-lift); }
.wt-day.is-marker .wt-here { color: var(--paper); background: var(--maroon); box-shadow: inset 0 0 0 1px var(--blood); }

/* Completed day: plate flips blood, numerals strike */
.wt-day.is-complete .wt-date { background: var(--blood); color: var(--paper); position: relative; }
.wt-day.is-complete .wt-date .d-sep { color: var(--ink); }
.wt-day.is-complete .wt-dayhead { box-shadow: inset 0 0 0 1px var(--maroon); }
.wt-day.is-marker { position: relative; }
.wt-day.is-marker::before { content: ""; position: absolute; left: calc(-1 * var(--space-3)); top: 0; bottom: 0; width: 3px; background: var(--blood); }

/* ---- Two-column body ----------------------------------------------------- */

.wt-cols { display: grid; gap: var(--space-4); }
.wt-cols[data-mode="split"] { grid-template-columns: 1fr 1fr; }
.wt-cols[data-mode="all"],
.wt-cols[data-mode="day-only"],
.wt-cols[data-mode="night-only"] { grid-template-columns: minmax(0, 1fr); }
/* .wt-col is a <section>, so the global `section + section` top margin lands on
   the night column and opens a large phantom gap — reset it here. */
.wt-col { min-width: 0; position: relative; margin: 0; }
.wt-cols[data-mode="split"] .wt-col[data-slot="night"] { padding-left: var(--space-4); }
.wt-cols[data-mode="split"] .wt-col[data-slot="night"]::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-2)); top: 0; bottom: 0;
  width: 2px; background: var(--blood); opacity: 0.55; transform: skewX(var(--slant));
}

/* ---- Tick control (column header, coloured sun/moon) --------------------- */

.wt-tick {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  border: none; cursor: pointer; background: var(--panel); color: var(--smoke-lift);
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-xs);
  padding: var(--space-2); margin-bottom: var(--space-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.wt-tick .tick-glyph {
  width: 1.7rem; height: 1.7rem; flex: none; display: grid; place-content: center;
  box-shadow: inset 0 0 0 2px currentColor; transform: skewX(var(--slant));
  transition: background var(--t-fast) var(--ease-out);
}
.wt-tick .tick-glyph svg { width: 1.05rem; height: 1.05rem; transform: skewX(calc(-1 * var(--slant))); display: block; }
.tick-glyph[data-slot="day"] { color: var(--sun); }
.tick-glyph[data-slot="night"] { color: var(--moon); }
.tick-glyph[data-slot="all"] { color: var(--smoke-lift); }
.tick-glyph[data-slot="all"] .disc-sun { color: var(--sun); }
.tick-glyph[data-slot="all"] .disc-moon { color: var(--moon); }
.wt-tick:hover { box-shadow: inset 0 0 0 1px var(--smoke-lift); color: var(--paper); }
.wt-tick[aria-pressed="true"] { color: var(--paper); }
.wt-tick[aria-pressed="true"] .tick-glyph[data-slot="day"] { background: var(--sun); }
.wt-tick[aria-pressed="true"] .tick-glyph[data-slot="night"] { background: var(--moon); }
.wt-tick[aria-pressed="true"] .tick-glyph[data-slot="day"] svg { color: var(--ink); }
.wt-tick[aria-pressed="true"] .tick-glyph[data-slot="night"] svg { color: var(--paper); }
.wt-tick[aria-pressed="true"] .tick-glyph[data-slot="all"] .disc-sun,
.wt-tick[aria-pressed="true"] .tick-glyph[data-slot="all"] .disc-moon { opacity: 1; }
.wt-tick[aria-pressed="true"] .tick-glyph[data-slot="all"] { box-shadow: inset 0 0 0 2px var(--blood); }
.wt-tick:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ---- Action flow (calm content) ------------------------------------------ */

.wt-flow { display: flex; flex-direction: column; gap: var(--space-2); }
.wt-line { display: block; }
.wt-step {
  position: relative; padding-left: 1.1em; font-size: var(--text-sm); line-height: 1.55; color: var(--paper);
}
.wt-step::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45em; height: 0.45em; background: var(--smoke); transform: skewX(var(--slant)); }
.wt-note {
  padding-left: 0.9em; font-size: var(--text-xs); line-height: 1.5; color: var(--smoke-lift);
  font-style: italic; border-left: 2px solid var(--line-strong); margin-left: 0.2em;
}

/* Confidant dialogue picks: indented answer options, blood arrow marker, so a
   run of "Choose …" replies reads as the responses to a spend-time step, not
   as more tasks in the checklist. */
.wt-line--option { margin-left: 1.15em; }
.wt-step--option { color: var(--smoke-lift); }
.wt-step--option::before {
  width: 0; height: 0; top: 0.5em; background: transparent; transform: none;
  border-left: 0.42em solid var(--blood);
  border-top: 0.3em solid transparent; border-bottom: 0.3em solid transparent;
}

/* Inline chips: item (blood), media (teal), seed (crystal colour) */
.wt-chip { display: inline-flex; align-items: baseline; gap: 0.25em; font-weight: 700; font-size: 0.94em; vertical-align: baseline; }
.chip-item .chip-lbl { color: var(--paper); }
.chip-item::before { content: "["; color: var(--blood); }
.chip-item::after { content: "]"; color: var(--blood); }
.chip-item { padding: 0 0.15em; background: color-mix(in srgb, var(--blood) 12%, transparent); }
.chip-media .chip-lbl { color: var(--media); box-shadow: inset 0 -1px 0 0 var(--media); }
.chip-seed { gap: 0.15em; }
.chip-seed .chip-gem { width: 0.85em; height: 0.85em; display: inline-grid; place-content: center; }
.chip-seed .chip-gem svg { width: 100%; height: 100%; }
.chip-seed[data-seed="red"] { color: var(--seed-red); }
.chip-seed[data-seed="green"] { color: var(--seed-green); }
.chip-seed[data-seed="blue"] { color: var(--seed-blue); }
.chip-seed .chip-lbl { color: inherit; }

/* Social-stat pill: full name, hue on the border + name, value stays paper */
.wt-stat {
  display: inline-flex; align-items: baseline; gap: 0.35em; font-size: var(--text-xs); font-weight: 700;
  padding: 0.1em 0.45em; margin-left: 0.15em; transform: skewX(var(--slant));
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--stat-hue, var(--line-strong)); color: var(--paper);
  vertical-align: baseline;
}
.wt-stat > * { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.wt-stat .st-name { color: var(--stat-hue, var(--smoke-lift)); letter-spacing: 0.02em; }
.wt-stat .st-rank { color: var(--stat-hue); font-style: italic; font-size: 0.9em; }
.wt-stat[data-stat="Kn"] { --stat-hue: var(--stat-kn); }
.wt-stat[data-stat="Gu"] { --stat-hue: var(--stat-gu); }
.wt-stat[data-stat="Pr"] { --stat-hue: var(--stat-pr); }
.wt-stat[data-stat="Ki"] { --stat-hue: var(--stat-ki); }
.wt-stat[data-stat="Ch"] { --stat-hue: var(--stat-ch); }

/* Confidant rank-up plate (the P5R rank-up moment) */
.wt-rank { display: inline-flex; align-items: stretch; font-size: var(--text-sm); transform: skewX(var(--slant)); box-shadow: 2px 2px 0 var(--maroon); }
.wt-rank .rk-name {
  display: inline-block; background: var(--ink); color: var(--paper);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2em 0.55em;
}
.wt-rank .rk-name, .wt-rank .rk-badge > * { transform: skewX(calc(-1 * var(--slant))); }
.wt-rank .rk-badge { display: inline-flex; align-items: baseline; gap: 0.3em; background: var(--blood); color: var(--paper); padding: 0.2em 0.55em; }
.wt-rank .rk-word { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82em; }
.wt-rank .rk-num { font-family: "Alfa Slab One", "Arsenal", serif; font-weight: 400; font-size: 1.05em; line-height: 1; }

/* Item chip (legacy) already covered by .chip-item */

/* Trophy chip: one SVG, four metal tiers */
.wt-trophy {
  display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700;
  padding: 0.25em 0.6em 0.25em 0.4em; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--paper); --metal: var(--metal-bronze);
}
.wt-trophy[data-tier="bronze"] { --metal: var(--metal-bronze); }
.wt-trophy[data-tier="silver"] { --metal: var(--metal-silver); }
.wt-trophy[data-tier="gold"] { --metal: var(--metal-gold); }
.wt-trophy[data-tier="platinum"] { --metal: var(--metal-platinum); box-shadow: inset 0 0 0 1px var(--metal-platinum); }
.wt-trophy .tr-cup { width: 1.25rem; height: 1.25rem; flex: none; color: var(--metal); position: relative; overflow: hidden; }
.wt-trophy .tr-cup svg { width: 100%; height: 100%; display: block; }
.wt-trophy .tr-name { color: var(--metal); }
.wt-trophy .tr-cond { color: var(--smoke-lift); font-weight: 400; font-size: 0.9em; }
.wt-trophy .tr-cup::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.85) 50%, transparent 65%); transform: translateX(-120%); }
.wt-trophy.is-earned .tr-cup::after { animation: tr-glint 0.6s var(--ease-out) 1; }
@keyframes tr-glint { to { transform: translateX(120%); } }

/* ---- Palace / infiltration dossier --------------------------------------- */

.wt-palace {
  margin: var(--space-3) 0; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--maroon);
}
.wt-palace-head {
  background: repeating-linear-gradient(-45deg, var(--maroon), var(--maroon) 10px, color-mix(in srgb, var(--maroon) 78%, #000) 10px, color-mix(in srgb, var(--maroon) 78%, #000) 20px);
  padding: var(--space-2) var(--space-3);
}
.wt-palace-head .pl-title {
  display: inline-block; background: var(--ink); color: var(--paper); transform: skewX(var(--slant));
  padding: 0.15em 0.6em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-sm);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.wt-palace-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
/* Two-column palace dossier: steps left, boss card right, so a heist day with a
   boss uses the full width instead of a narrow column (new #1). */
.wt-palace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: start; }
.wt-palace-grid .wt-palace-body { flex: 1; }
.wt-palace-bosses { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); border-left: 1px solid var(--line); }
@media (max-width: 780px) {
  .wt-palace-grid { grid-template-columns: minmax(0, 1fr); }
  .wt-palace-bosses { border-left: 0; border-top: 1px solid var(--line); }
}

/* Heist milestone stamp */
.wt-milestone {
  display: block; background: var(--blood); color: var(--paper); transform: skewX(var(--slant));
  padding: 0.35em 0.8em; margin: var(--space-1) 0; box-shadow: 3px 3px 0 var(--ink);
  font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-sm);
}
.wt-milestone .ms-text { display: block; transform: skewX(calc(-1 * var(--slant))); }
.wt-milestone.is-stamped { animation: ms-stamp 0.4s var(--ease-out) 1; }
@keyframes ms-stamp { 0% { transform: skewX(var(--slant)) scale(1.12); opacity: 0.4; } 100% { transform: skewX(var(--slant)) scale(1); opacity: 1; } }

/* ---- Boss card (inline, spoiler-blurred) --------------------------------- */

.wt-boss { position: relative; margin: var(--space-2) 0; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong); padding: var(--space-3); }
.wt-boss.is-ruler { box-shadow: inset 0 0 0 2px var(--blood); }
.wt-boss-label { display: inline-block; font-size: var(--text-xs); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blood); margin-bottom: var(--space-2); }
.wt-boss.is-ruler .wt-boss-label { background: var(--blood); color: var(--paper); padding: 0.1em 0.5em; transform: skewX(var(--slant)); }
.wt-boss-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.wt-boss-chip { font-size: var(--text-xs); font-weight: 700; padding: 0.1em 0.5em; background: var(--panel-2); color: var(--smoke-lift); transform: skewX(var(--slant)); }
.wt-boss-chip > span { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.wt-boss-reveal { position: relative; }
.wt-boss-name { font-weight: 700; font-size: var(--text-base); }
.wt-boss-loc { font-size: var(--text-xs); color: var(--smoke-lift); margin: 0.2em 0 0.4em; }
.wt-boss-strat { font-size: var(--text-sm); line-height: 1.55; }
.wt-boss.is-spoiler .wt-boss-reveal > * { filter: blur(7px); -webkit-user-select: none; user-select: none; pointer-events: none; opacity: 0.7; }
.wt-boss.is-spoiler .wt-boss-veil {
  position: absolute; inset: 0; display: grid; place-content: center; cursor: pointer;
  color: var(--paper); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  background: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(217,35,35,0.10) 8px, rgba(217,35,35,0.10) 16px);
}
.wt-boss.is-spoiler .wt-boss-veil:hover { color: var(--blood); }
.wt-boss.is-revealed .wt-boss-reveal > * { filter: none; -webkit-user-select: auto; user-select: auto; pointer-events: auto; opacity: 1; }
.wt-boss.is-revealed .wt-boss-veil { display: none; }

/* ---- Deadline banner ----------------------------------------------------- */

.wt-deadline {
  display: flex; align-items: baseline; gap: var(--space-3); background: var(--blood); color: var(--paper);
  transform: skewX(var(--slant)); padding: 0.4em 0.8em; margin-bottom: var(--space-3); box-shadow: 4px 4px 0 var(--ink);
}
.wt-deadline > * { transform: skewX(calc(-1 * var(--slant))); }
.wt-deadline .dl-label { font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-xs); white-space: nowrap; }
.wt-deadline .dl-text { font-size: var(--text-sm); }

/* ---- Mementos dive: Request #N dossiers ---------------------------------- */

/* Mementos dive dossier — same architecture as .wt-palace, green frame so the
   two dungeon types are unmistakable (#4). */
.wt-mementos {
  margin: var(--space-3) 0; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--mem);
}
.wt-mementos-head {
  background: repeating-linear-gradient(-45deg, var(--mem-deep), var(--mem-deep) 10px, color-mix(in srgb, var(--mem-deep) 60%, #000) 10px, color-mix(in srgb, var(--mem-deep) 60%, #000) 20px);
  padding: var(--space-2) var(--space-3);
}
.wt-mementos-head .mem-title {
  display: inline-block; background: var(--ink); color: var(--mem-bright); transform: skewX(var(--slant));
  padding: 0.15em 0.6em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-sm);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.wt-mementos-body { padding: var(--space-3); }
.wt-req { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.wt-req:first-of-type { border-top: none; }
.wt-req-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.wt-req-no { font-size: var(--text-xs); font-weight: 700; color: var(--paper); background: var(--blood); padding: 0.1em 0.5em; transform: skewX(var(--slant)); text-transform: uppercase; letter-spacing: 0.04em; }
.wt-req-no > span { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.wt-req-target { font-weight: 700; font-size: var(--text-sm); }
.wt-grade { font-size: var(--text-xs); font-weight: 700; padding: 0.05em 0.45em; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--smoke-lift); transform: skewX(var(--slant)); margin-left: auto; }
.wt-grade > span { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
.wt-grade[data-grade="A"], .wt-grade[data-grade="S"] { color: var(--blood); box-shadow: inset 0 0 0 1px var(--blood); }
.wt-req-detail { font-size: var(--text-xs); color: var(--smoke-lift); margin-top: 0.25em; display: flex; flex-wrap: wrap; gap: 0.2em 0.9em; }
.wt-req-detail b { color: var(--paper); font-weight: 700; }

/* ---- Jazz Club call-out (music mark) ------------------------------------- */

.wt-jazz {
  margin-top: var(--space-3); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong);
  padding: var(--space-3); display: flex; gap: var(--space-3); align-items: flex-start;
}
.wt-jazz .jz-mark { flex: none; width: 1.9rem; height: 1.9rem; color: var(--blood); }
.wt-jazz .jz-mark svg { width: 100%; height: 100%; display: block; }
.wt-jazz .jz-eq .eq-b { fill: currentColor; }
.wt-jazz.is-live .jz-eq .eq-b { animation: eq-bob 0.9s var(--ease-in-out, ease-in-out) infinite; transform-origin: bottom; }
.wt-jazz.is-live .jz-eq .eq-2 { animation-delay: 0.15s; }
.wt-jazz.is-live .jz-eq .eq-3 { animation-delay: 0.3s; }
.wt-jazz.is-live .jz-eq .eq-4 { animation-delay: 0.45s; }
@keyframes eq-bob { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
.wt-jazz .jz-main { min-width: 0; display: flex; flex-direction: column; gap: 0.2em; }
.wt-jazz .jz-head { display: flex; align-items: center; gap: var(--space-2); }
.wt-jazz-label { font-size: var(--text-xs); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper); background: var(--ink); box-shadow: inset 0 0 0 1px var(--blood); padding: 0.1em 0.6em; transform: skewX(var(--slant)); }
.wt-jazz .jz-live { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper); background: var(--blood); padding: 0.05em 0.45em; transform: skewX(var(--slant)); }
.wt-jazz-skill { font-weight: 700; font-size: var(--text-sm); }
.wt-jazz-effect { font-size: var(--text-xs); color: var(--smoke-lift); }
.wt-bring { align-self: flex-start; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--paper); background: var(--blood); padding: 0.1em 0.5em; transform: skewX(var(--slant)); margin-top: 0.15em; }
.wt-bring > span { display: inline-block; transform: skewX(calc(-1 * var(--slant))); }
/* Soft recommendation (no build-critical skill that night) — outlined, not solid blood. */
.wt-bring--soft { color: var(--smoke-lift); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---- No-results & reset -------------------------------------------------- */

.no-results { padding: var(--space-6) 0; color: var(--smoke-lift); }
.page-actions { margin-top: var(--space-6); display: flex; justify-content: flex-end; }
.reset-btn.is-armed { box-shadow: inset 0 0 0 1px var(--blood); color: var(--blood); }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 780px) {
  .wt-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  /* Rail: all ten months visible at once, no horizontal scroll */
  .wt-rail {
    position: sticky; top: var(--wt-strip-offset); z-index: 10;
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
    flex-direction: row; overflow: visible; max-height: none;
    padding: var(--space-2) 0; background: var(--ink); border-bottom: 1px solid var(--line);
  }
  .wt-rail-tab { padding: 0.4em 0.1em; text-align: center; }
  .wt-rail-tab > span { text-align: center; }
  .wt-rail-tab .rt-name { font-size: 0.6rem; letter-spacing: 0.02em; }
  .wt-rail-tab .rt-count { display: none; }
  .wt-rail-tab.is-marker .rt-name::after { display: none; }
  /* Two columns stack — keep a clear break between the Day and Night blocks */
  .wt-cols[data-mode="split"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .wt-cols[data-mode="split"] .wt-col[data-slot="night"] { padding-left: 0; }
  .wt-cols[data-mode="split"] .wt-col[data-slot="night"]::before { display: none; }
  .wt-month-head .mh-name { font-size: var(--text-xl); }
}

@media (max-width: 420px) {
  .wt-dayhead { flex-wrap: wrap; }
  .wt-dayhead .wt-here { margin-left: 0; }
}

/* ---- Touch targets ------------------------------------------------------- */

@media (pointer: coarse) {
  .wt-tick, .wt-here, .wt-rail-tab, .wt-boss-veil { min-height: 44px; }
}

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .wt-jazz.is-live .jz-eq .eq-b { animation: none; }
  .wt-trophy.is-earned .tr-cup::after,
  .wt-milestone.is-stamped { animation: none; }
  .skel { animation: none; }
}