/* DAY 02 is a working decision board: evidence and artifacts, not a lecture clone. */

.lesson-pane[data-activity="day02"] {
  --journey-accent: var(--blue-700);
  --journey-soft: var(--blue-50);
}
.lesson-pane[data-activity="day02"][data-journey="Prepare"] { --journey-accent: var(--ink-900); --journey-soft: var(--ink-50); }
.lesson-pane[data-activity="day02"][data-journey="Discover"] { --journey-accent: var(--red-700); --journey-soft: var(--red-50); }
.lesson-pane[data-activity="day02"][data-journey="Frame"] { --journey-accent: var(--amber-700); --journey-soft: var(--amber-50); }
.lesson-pane[data-activity="day02"][data-journey="Decide"] { --journey-accent: var(--blue-700); --journey-soft: var(--blue-50); }
.lesson-pane[data-activity="day02"][data-journey="Validate"] { --journey-accent: var(--green-700); --journey-soft: var(--green-50); }
.lesson-pane[data-activity="day02"][data-journey="Reflect"] { --journey-accent: var(--ink-900); --journey-soft: var(--ink-50); }

.day02-content-blocks { margin-bottom: 0; }

.day02-principles {
  margin: var(--space-2) 0;
  padding: var(--space-5);
  border: 1px solid var(--ink-200);
  border-left: 5px solid var(--journey-accent);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.day02-principles .eyebrow { color: var(--journey-accent); }
.day02-principles ol { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding-left: 1.4rem; }
.day02-principles li { padding-left: var(--space-2); color: var(--ink-800); font-weight: 700; }

.day02-activity { margin-top: var(--section-gap); }
.day02-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.day02-form-grid .field:has(textarea) { grid-column: span 2; }
.day02-form-grid .field > span,
.day02-simulator__control label span { color: var(--ink-800); font-size: var(--text-sm); font-weight: 700; }
.day02-form-grid textarea { min-height: 104px; }

.progressive-form { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.progressive-form__head { display: grid; grid-template-columns: auto minmax(140px, 1fr); align-items: end; gap: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink-200); }
.progressive-form__head > div { display: grid; gap: 3px; }
.progressive-form__head span { color: var(--blue-800); font: 700 var(--text-xs)/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.progressive-form__head strong { color: var(--ink-800); font-size: var(--text-sm); }
.progressive-form__meter { height: 5px; display: block; overflow: hidden; border-radius: var(--radius-pill); background: var(--ink-100); }
.progressive-form__meter i { height: 100%; display: block; border-radius: inherit; background: var(--blue-700); transition: width 180ms var(--ease); }
.progressive-form__steps { min-height: 220px; }
.progressive-form__step { min-height: 220px; display: grid; align-content: start; padding: var(--space-5); border: 1px solid var(--ink-200); border-left: 5px solid var(--blue-700); border-radius: var(--radius-lg); background: var(--paper); }
.progressive-form__step[hidden] { display: none; }
.progressive-form__step .field > span { margin-bottom: var(--space-2); color: var(--ink-900); font: 700 var(--text-lg)/1.25 var(--font-display); }
.progressive-form__step textarea { min-height: 132px; }
.progressive-form__error { padding: var(--space-3); border-left: 4px solid var(--red-700); background: var(--red-50); }
.progressive-form__actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); }
.progressive-form__actions [data-day02-status] { justify-self: end; }

.day02-postcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-5); overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.day02-postcard.is-revealed { grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); }
.day02-postcard__front, .day02-postcard__back { padding: var(--space-5); }
.day02-postcard__front { display: grid; gap: var(--space-4); background: var(--paper); }
.day02-postcard__front h3 { margin: 0; font: 700 var(--text-xl)/1.35 var(--font-display); }
.day02-postcard__back { color: var(--paper); background: var(--ink-950); }
.day02-postcard__back .eyebrow { color: var(--blue-100); }
.day02-postcard__back ul { display: grid; gap: var(--space-3); padding-left: 1.2rem; }
.day02-postcard__back p:last-child { color: var(--ink-300); font-size: var(--text-sm); }
.field-error { margin: 0; color: var(--red-800); font-weight: 700; }

.day02-sort { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.day02-sort__bank { padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--ink-50); }
.day02-sort__bank > header,
.day02-patterns__bank > header { display: grid; gap: 4px; margin-bottom: var(--space-3); }
.day02-sort__bank header small,
.day02-patterns__bank header small { color: var(--ink-600); }
.day02-sort__cards { min-height: 126px; display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); align-items: stretch; gap: var(--space-2); }
.day02-sort-card {
  position: relative;
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--ink-200);
  border-top: 4px solid var(--ink-800);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  background: var(--paper);
  cursor: grab;
  text-align: left;
}
.day02-sort-card:hover, .day02-sort-card.is-selected { border-color: var(--blue-700); background: var(--blue-50); }
.day02-sort-card .drag-handle { position: absolute; top: 8px; right: 8px; width: auto; color: var(--ink-400); font-size: var(--text-xs); }
.day02-sort-card span { color: var(--ink-600); font-size: var(--text-xs); line-height: 1.4; }
.day02-sort__zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.day02-sort-zone { min-height: 220px; padding: var(--space-4); border: 1px dashed var(--ink-300); border-top: 5px solid var(--blue-700); border-radius: var(--radius-lg); background: var(--ink-50); }
.day02-sort-zone:nth-child(1) { border-top-color: var(--ink-800); }
.day02-sort-zone:nth-child(3) { border-top-color: var(--amber-700); }
.day02-sort-zone header { display: grid; gap: 4px; margin-bottom: var(--space-3); }
.day02-sort-zone header small { color: var(--ink-600); }
.day02-sort-zone > div { min-height: 128px; display: grid; align-content: start; gap: var(--space-2); cursor: pointer; }
.day02-sort-zone .day02-sort-card { width: 100%; min-height: 94px; }
.day02-sort [data-drop-empty],
.day02-patterns [data-drop-empty] { align-self: center; color: var(--ink-500); font-size: var(--text-sm); text-align: center; }

.day02-patterns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.day02-patterns__bank { grid-column: 1 / -1; padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--ink-50); }
.day02-patterns__bank > div { min-height: 88px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); cursor: pointer; }
.day02-patterns article { display: grid; grid-template-rows: auto 1fr; padding: var(--space-4); border: 1px solid var(--ink-200); border-top: 4px solid var(--blue-700); border-radius: var(--radius-lg); background: var(--paper); }
.day02-patterns article header { min-height: 74px; }
.day02-patterns article header span { color: var(--blue-800); font: 700 var(--text-lg)/1 var(--font-mono); }
.day02-patterns article h3 { margin: var(--space-2) 0 var(--space-4); font: 700 var(--text-md)/1.25 var(--font-display); }
.day02-pattern-drop { min-height: 146px; display: grid; align-content: start; padding: var(--space-2); border: 1px dashed var(--ink-300); border-radius: var(--radius-md); background: var(--ink-50); cursor: pointer; }
.day02-tradeoff-card { position: relative; min-height: 84px; display: grid; align-content: start; padding: var(--space-3) 2rem var(--space-3) var(--space-3); border: 1px solid var(--ink-300); border-left: 4px solid var(--blue-700); border-radius: var(--radius-md); color: var(--ink-800); background: var(--paper); cursor: grab; text-align: left; line-height: 1.45; }
.day02-tradeoff-card:hover,
.day02-tradeoff-card.is-selected { border-color: var(--blue-700); background: var(--blue-50); box-shadow: var(--shadow-focus); }
.day02-tradeoff-card .drag-handle { position: absolute; top: 10px; right: 9px; color: var(--ink-400); font-size: var(--text-xs); }
.day02-patterns .activity-actions { grid-column: 1 / -1; }
.day02-sort-card.is-sortable-ghost,
.day02-tradeoff-card.is-sortable-ghost { opacity: .3; }
.day02-sort-card.is-sortable-chosen,
.day02-tradeoff-card.is-sortable-chosen { border-color: var(--blue-700); box-shadow: var(--shadow-focus); }

.day02-carry-tray { display: none; }
.day02-carry-tray[hidden] { display: none; }

.day02-simulator { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.day02-simulator__control { padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--ink-50); }
.day02-simulator__control label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.day02-simulator__control output { color: var(--paper); background: var(--ink-950); padding: .45rem .65rem; font: 700 var(--text-md)/1 var(--font-mono); }
.day02-simulator__control input { width: 100%; min-height: var(--control-min); margin-top: var(--space-2); accent-color: var(--blue-700); }
.day02-confusion { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); }
.day02-confusion > div { min-height: 108px; display: grid; align-content: center; gap: 3px; padding: var(--space-4); border-right: 1px solid var(--ink-200); background: var(--paper); }
.day02-confusion > div:last-child { border-right: 0; }
.day02-confusion small { color: var(--ink-500); font: 700 var(--text-xs)/1 var(--font-mono); }
.day02-confusion strong { color: var(--ink-950); font: 700 1.8rem/1 var(--font-mono); }
.day02-confusion span { color: var(--ink-600); font-size: var(--text-xs); }
.day02-incident { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); border-left: 5px solid var(--amber-700); border-radius: var(--radius-lg); color: var(--amber-800); background: var(--amber-50); }

.day02-record .record-video-stage video { display: block; width: 100%; aspect-ratio: 16/9; background: var(--ink-950); }

.day02-required-chip { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .55rem; border: 1px solid var(--amber-100); border-radius: var(--radius-pill); color: var(--amber-800); background: var(--amber-50); font: 700 .68rem/1 var(--font-mono); }
.day02-completion-contract { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--space-6); overflow: hidden; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--paper); }
.day02-completion-contract > div { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-4); border-right: 1px solid var(--ink-200); }
.day02-completion-contract > div:last-child { border-right: 0; }
.day02-completion-contract > div > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--amber-700); border-radius: 50%; color: var(--amber-800); background: var(--amber-50); font: 700 .72rem/1 var(--font-mono); }
.day02-completion-contract > div.is-done > span { border-color: var(--green-700); color: var(--paper); background: var(--green-700); }
.day02-completion-contract p,
.day02-completion-contract b,
.day02-completion-contract small { display: block; margin: 0; }
.day02-completion-contract b { color: var(--ink-900); font-size: var(--text-sm); }
.day02-completion-contract small { margin-top: 3px; color: var(--ink-600); font-size: var(--text-xs); }

.day02-prerequisite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); padding: var(--space-5); border: 1px solid var(--amber-100); border-left: 5px solid var(--amber-700); border-radius: var(--radius-lg); color: var(--amber-800); background: var(--amber-50); }
.day02-prerequisite > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--amber-700); border-radius: 50%; font: 700 var(--text-lg)/1 var(--font-mono); }
.day02-prerequisite b { color: var(--ink-950); }
.day02-prerequisite p { margin: var(--space-1) 0 var(--space-3); }

.day02-assignment-card { border-top-color: var(--ink-950); }
.day02-assignment-card .activity-head { align-items: flex-start; }
.day02-assignment-card .assignment-form .field small { color: var(--ink-500); font: 600 var(--text-xs)/1.4 var(--font-mono); }
.day02-acknowledgements { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--ink-50); }
.day02-acknowledgements legend { padding: 0 var(--space-2); color: var(--ink-900); font-weight: 700; }
.day02-acknowledgements label { min-height: 44px; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2); color: var(--ink-700); cursor: pointer; }
.day02-acknowledgements input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: .1rem; accent-color: var(--green-700); }
.day02-dossier { position: sticky; top: calc(var(--header-h) + var(--space-4)); overflow: hidden; border: 1px solid var(--ink-300); border-radius: var(--radius-xl); background: var(--paper); box-shadow: var(--shadow-md); }
.day02-dossier > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); color: var(--paper); background: var(--ink-950); }
.day02-dossier > header small { color: var(--ink-300); font: 700 var(--text-xs)/1.2 var(--font-mono); letter-spacing: .04em; }
.day02-decision-stamp { max-width: 150px; padding: .45rem .65rem; border: 2px solid var(--red-100); color: var(--red-100); font: 800 .78rem/1 var(--font-mono); letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: rotate(-2deg); overflow-wrap: anywhere; }
.day02-dossier__body { display: grid; gap: 0; }
.day02-dossier__body > div { padding: var(--space-4); border-bottom: 1px solid var(--ink-200); }
.day02-dossier__body small { display: block; margin-bottom: var(--space-1); color: var(--blue-800); font: 700 .67rem/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.day02-dossier__body p { max-height: 126px; margin: 0; overflow: auto; color: var(--ink-800); font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; }
.day02-dossier .rubric { margin: 0; padding: var(--space-4); }
.day02-dossier .rubric-row.is-covered { color: var(--green-800); }
.day02-dossier .rubric-row.is-covered strong { color: var(--green-800); }

@media (max-width: 900px) {
  .day02-sort__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day02-sort__zones, .day02-patterns { grid-template-columns: 1fr; }
  .day02-patterns__bank { grid-column: auto; }
  .day02-patterns__bank > div { grid-template-columns: 1fr; }
  .day02-patterns .activity-actions { grid-column: auto; }
}

@media (max-width: 760px) {
  .day02-form-grid, .day02-postcard.is-revealed, .day02-confusion { grid-template-columns: 1fr; }
  .day02-form-grid .field:has(textarea) { grid-column: auto; }
  .progressive-form__head { grid-template-columns: 1fr; gap: var(--space-3); }
  .progressive-form__steps, .progressive-form__step { min-height: 200px; }
  .progressive-form__step { padding: var(--space-4); }
  .progressive-form__actions { grid-template-columns: 1fr 1fr; }
  .progressive-form__actions [data-day02-status] { grid-column: 1 / -1; justify-self: start; }
  .day02-sort__cards { grid-template-columns: 1fr; }
  .day02-sort-card { min-height: 88px; }
  .day02-carry-tray:not([hidden]) {
    position: fixed;
    z-index: 30;
    right: var(--space-3);
    bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    left: var(--space-3);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--blue-700);
    border-left: 6px solid var(--blue-700);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / .97);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
  }
  .day02-carry-tray__card { min-width: 0; display: grid; gap: 2px; padding-right: 2rem; }
  .day02-carry-tray__card small { color: var(--blue-800); font: 700 .64rem/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
  .day02-carry-tray__card strong { overflow: hidden; color: var(--ink-900); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
  .day02-carry-tray__targets { grid-column: 1 / -1; display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 2px; }
  .day02-carry-tray__targets button { min-height: 44px; flex: 0 0 auto; padding: .55rem .7rem; border: 1px solid var(--ink-200); border-radius: var(--radius-pill); color: var(--blue-800); background: var(--paper); font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
  .day02-carry-tray__targets button:hover:not(:disabled) { border-color: var(--blue-700); background: var(--blue-50); }
  .day02-carry-tray__targets button:disabled { color: var(--ink-400); background: var(--ink-50); cursor: default; }
  .day02-carry-tray__cancel { position: absolute; top: var(--space-2); right: var(--space-2); width: 44px; height: 44px; border: 0; color: var(--ink-700); background: transparent; font-size: 1.25rem; cursor: pointer; }
  .day02-confusion > div { min-height: 76px; border-right: 0; border-bottom: 1px solid var(--ink-200); }
  .day02-confusion > div:last-child { border-bottom: 0; }
  .day02-incident { grid-template-columns: 1fr; gap: var(--space-2); }
  .day02-completion-contract { grid-template-columns: 1fr; }
  .day02-completion-contract > div { border-right: 0; border-bottom: 1px solid var(--ink-200); }
  .day02-completion-contract > div:last-child { border-bottom: 0; }
  .day02-prerequisite { grid-template-columns: 1fr; }
  .day02-dossier { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .day02-sort-card { transition: none; }
}