#structured-note-app { --note-fail:#b42318; --note-warn:#b54708; --note-pass:#067647; --note-tint:color-mix(in srgb,var(--blue) 4%,var(--paper)); }
.note-section { padding-block:48px; }
.note-heading { margin-bottom:28px; }
.note-heading .eyebrow { margin-bottom:12px; }
.note-heading h2 { font-size:clamp(1.8rem,3vw,2.5rem); }
.note-subtitle { margin-top:12px; color:var(--muted); font-size:1rem; max-width:60ch; }

/* Stepper */
.note-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; padding:0; margin:0 0 28px; }
.note-step { position:relative; display:flex; align-items:center; gap:10px; width:100%; padding:14px 8px 0 0; border:0; border-top:2px solid var(--border); background:none; color:var(--muted); font:inherit; text-align:left; cursor:pointer; transition:border-color .25s,color .25s; }
.note-num { font-family:var(--mono); font-size:.72rem; }
.note-label { font-size:.88rem; font-weight:600; }
.note-step[data-state="done"] { border-top-color:var(--navy); color:var(--navy); }
.note-step[data-state="active"] { border-top-color:var(--blue); color:var(--blue); }
.note-step[data-tone="fail"] { border-top-color:var(--note-fail); color:var(--note-fail); }
.note-step:hover { color:var(--navy); }

/* Story + record */
.note-body { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; align-items:start; }
.note-kicker { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; }
.note-story h3 { font-size:1.5rem; margin-top:10px; }
.note-text { margin-top:12px; color:var(--muted); line-height:1.6; max-width:46ch; }
.note-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.note-nav .button { font-size:.82rem; padding:8px 14px; min-height:42px; cursor:pointer; }
.note-nav .button:disabled { opacity:.4; cursor:default; }

.note-card { min-height:340px; border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); box-shadow:0 1px 2px rgb(23 43 66 / 4%),0 8px 24px rgb(23 43 66 / 5%); overflow:hidden; }
.note-card header { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--note-tint); }
.note-caption { font-size:.72rem; color:var(--muted); }
.note-card header strong { font-family:var(--mono); font-size:.85rem; }
.note-status { font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid currentColor; color:var(--muted); }
.note-status[data-tone="fail"] { color:var(--note-fail); background:color-mix(in srgb,var(--note-fail) 7%,var(--paper)); }
.note-status[data-tone="pass"] { color:var(--note-pass); background:color-mix(in srgb,var(--note-pass) 7%,var(--paper)); }
.note-card-body { padding:6px 18px 18px; }
.note-card-body > * { animation:note-in .35s ease-out both; }

.note-fields { font-family:var(--mono); font-size:.76rem; margin:0; }
.note-fields > div { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:12px; padding:9px 6px; border-bottom:1px solid var(--border); }
.note-fields dt { color:var(--muted); overflow-wrap:anywhere; }
.note-fields dd { margin:0; display:flex; justify-content:space-between; gap:8px; overflow-wrap:anywhere; }
.note-from { display:block; font-size:.68rem; opacity:.75; margin-top:2px; }
.note-mark { flex-shrink:0; font-family:system-ui,sans-serif; font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.note-fields .is-renamed dt { color:var(--blue); }
.note-fields .is-renamed .note-mark { color:var(--blue); opacity:.7; }
.note-fields .is-added { background:color-mix(in srgb,var(--blue) 5%,transparent); }
.note-fields .is-added .note-mark { color:var(--blue); }
.note-fields .is-missing { background:color-mix(in srgb,var(--note-warn) 8%,transparent); color:var(--note-warn); }
.note-fields .is-missing dt { color:var(--note-warn); }
.note-fields .is-restored { background:color-mix(in srgb,var(--note-pass) 8%,transparent); color:var(--note-pass); }
.note-fields .is-restored dt { color:var(--note-pass); }
.note-fields .is-missing,.note-fields .is-restored,.note-fields .is-added { animation:note-flash 1.2s ease-out; }

.note-checks { list-style:none; padding:0; margin:12px 0 0; font-size:.85rem; }
.note-checks li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:10px 6px; border-bottom:1px solid var(--border); animation:note-in .3s ease-out both; animation-delay:calc(var(--i) * 180ms); }
.note-checks strong { font-size:.75rem; }
.note-checks .is-pass strong { color:var(--note-pass); }
.note-checks .is-fail { color:var(--note-fail); background:color-mix(in srgb,var(--note-fail) 6%,transparent); }
.note-checks .is-skip strong { color:var(--muted); font-weight:500; }
.note-checks strong::before { content:'· '; }
.note-checks .is-pass strong::before { content:'✓ '; }
.note-checks .is-fail strong::before { content:'✕ '; }

.note-report { margin-top:18px; }
.note-total { font-size:.88rem; color:var(--muted); }
.note-total strong { font-size:1.6rem; color:var(--navy); margin-right:4px; }
.note-bar { display:flex; height:14px; margin-top:12px; border-radius:4px; overflow:hidden; background:var(--border); }
.note-bar-others { background:var(--navy); }
.note-bar-note { transition:background-color .5s; }
.note-bar-note.is-in { background:var(--note-pass); }
.note-bar-note.is-out { background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--note-fail) 22%,var(--paper)) 0 4px,var(--paper) 4px 8px); box-shadow:inset 0 0 0 1px var(--note-fail); }
.note-legend { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; margin-top:8px; font-size:.75rem; color:var(--muted); }
.note-legend span:last-child { font-family:var(--mono); }

.note-footnote { font-size:.75rem; line-height:1.5; color:var(--muted); margin-top:24px; }
.note-fallback { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; padding:0; list-style:none; font-size:.88rem; }
#structured-note-app :focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

@keyframes note-in { from { opacity:0; transform:translateY(4px); } }
@keyframes note-flash { from { box-shadow:inset 3px 0 0 currentColor; } }

@media(max-width:860px) {
  .note-body { grid-template-columns:1fr; gap:24px; }
  .note-card { min-height:0; }
  .note-text { max-width:none; }
}
@media(max-width:600px) {
  .note-section { padding-block:40px; }
  .note-steps { margin-bottom:20px; }
  .note-step { justify-content:center; padding-right:0; }
  .note-label { display:none; }
  .note-fields > div { grid-template-columns:1fr; gap:2px; }
  .note-fallback { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  #structured-note-app *,#structured-note-app *::before,#structured-note-app *::after { animation:none!important; transition:none!important; }
}