/* Residency Rank List Builder — app styles (on top of /assets/labs.css) */
.app-page .page-title { margin-bottom: 18px; }
.app-block { margin-top: 20px; }
.h-sm { font-size: 22px; margin: 0; }
.h-xs { font-size: 17px; margin: 18px 0 8px; }
.deadline { margin-top: 20px; padding: 18px 24px; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.deadline .h-xs { margin-top: 0; }
.deadline p { margin-bottom: 6px; }
.block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.field-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.field-msg.err { color: var(--danger); font-weight: 600; }
.field-msg.ok { color: var(--ok); font-weight: 600; }
.danger { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 45%, var(--line)) !important; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Criteria */
.crit-list { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 10px; }
.crit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.crit label { gap: 4px; }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type="range"] { min-height: 38px; padding: 0; border: 0; background: transparent; accent-color: var(--accent); flex: 1; }
.range-row input[type="range"]:focus { box-shadow: none; }
.range-row input[type="range"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wout { font-weight: 750; font-size: 18px; min-width: 2ch; text-align: right; }
@media (max-width: 640px) { .crit { grid-template-columns: 1fr auto; } .crit-name { grid-column: 1 / -1; } }

/* Add form */
.add-form { display: grid; gap: 16px; grid-template-columns: 2fr 1.2fr 1fr auto; align-items: end; }
@media (max-width: 860px) { .add-form { grid-template-columns: 1fr 1fr; } .add-form label:first-child, .add-form .btn { grid-column: 1 / -1; } }
@media (max-width: 480px) { .add-form { grid-template-columns: 1fr; } }
.paste { margin: 4px 0 12px; }
.paste summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 6px 0; }
.paste-form { margin-top: 10px; }
.grid-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Program cards */
.prog-list { display: grid; gap: 10px; margin-top: 10px; }
.prog { padding: 0; background: var(--bg); }
.prog summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head badge" "done badge"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: var(--radius); }
.prog summary::-webkit-details-marker { display: none; }
.prog summary::before { content: ""; display: none; }
.prog-head { grid-area: head; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.prog-name { font-weight: 650; overflow-wrap: anywhere; }
.prog-done { grid-area: done; }
.score-badge { grid-area: badge; font-weight: 750; font-size: 20px; letter-spacing: -0.02em; background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.score-badge.none { font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--muted); }
.prog[open] summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.prog-body { padding: 16px 18px 18px; display: grid; gap: 16px; }
.scores { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.scores legend { font-weight: 650; padding: 0 6px; font-size: 15px; }
.score-field { font-weight: 500; font-size: 14px; }
.score-field select { min-height: 42px; padding: 8px 10px; }
.score-field.zero span { color: var(--muted); }

/* Rank list */
.rank-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.rank-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.rank-row .pos { width: 36px; height: 36px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 750; }
.rank-row.excluded .pos { background: var(--surface-2); color: var(--muted); }
.rank-row.excluded strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.rank-title { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.rank-title strong { overflow-wrap: anywhere; }
.rank-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.gap-note { margin-top: 6px; font-size: 13px; color: var(--text); background: color-mix(in srgb, var(--warn) 12%, var(--bg)); border-left: 3px solid var(--warn); padding: 6px 10px; border-radius: 6px; }
.icon-btn { background: transparent; border: 1px solid var(--line); color: var(--text); border-radius: 8px; min-height: 40px; min-width: 40px; padding: 0 12px; font: inherit; font-size: 15px; cursor: pointer; }
.icon-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.inline-check { font-size: 14px; align-items: center; }
.inline-check input { margin-top: 0; }
.line-label { margin: 18px 0 0; padding-top: 12px; border-top: 2px dashed var(--line); font-size: 14px; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) {
  .rank-row { grid-template-columns: 40px minmax(0, 1fr); }
  .rank-ctl { grid-column: 1 / -1; justify-content: flex-start; }
}
.copy-label { font-size: 0; gap: 0; }
.copy-label textarea { font-size: 14px; margin-top: 12px; font-family: var(--mono); }
.copy-label textarea[hidden] { display: none; }

/* Insights */
.stable-ok { font-weight: 600; color: var(--ok); }
.stable-warn { font-weight: 600; color: var(--text); }
.flips { margin: 0 0 10px; padding-left: 22px; }
.flips li { margin-bottom: 6px; }
.viz-root { --viz-bar: #2a78d6; --viz-top: #00756d; --viz-grid: #e6e8eb; --viz-text: #0b1f3a; --viz-muted: #52606f; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root { --viz-bar: #3987e5; --viz-top: #2cc6b8; --viz-grid: #253041; --viz-text: #eef2f6; --viz-muted: #a8b3c0; }
}
:root[data-theme="dark"] .viz-root { --viz-bar: #3987e5; --viz-top: #2cc6b8; --viz-grid: #253041; --viz-text: #eef2f6; --viz-muted: #a8b3c0; }
#chart svg { width: 100%; height: auto; }
#chart .grid { stroke: var(--viz-grid); stroke-width: 1; }
#chart .tick { fill: var(--viz-muted); font-size: 12px; }
#chart .lbl { fill: var(--viz-text); font-size: 13px; }
#chart .val { fill: var(--viz-text); font-size: 13px; font-weight: 700; }
#chart .bar { fill: var(--viz-bar); }
#chart .bar.top { fill: var(--viz-top); }

/* File import button */
.file-btn { position: relative; display: inline-flex; flex-direction: row; font-weight: 650; font-size: 14px; }
.file-btn:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.file-input { position: absolute; inset: 0; opacity: 0; width: 100%; min-height: 0; height: 100%; cursor: pointer; padding: 0; }

/* Undo bar */
.undo-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20; display: flex; gap: 14px; align-items: center; background: var(--text); color: var(--bg); padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: var(--shadow); font-size: 14px; max-width: calc(100% - 32px); }
.undo-bar[hidden] { display: none; }

.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.jump a { font-size: 14px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }
.jump a:hover { border-color: var(--accent); text-decoration: none; }
.pos-input { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.app-page h2, .app-page h3 { scroll-margin-top: 84px; }
.pos-input input { width: 64px; min-height: 40px; padding: 6px 8px; text-align: center; }
.print-notes, .print-only { display: none; }

/* Print: only the rank list */
@media print {
  .top, .foot, .skip, .notice, .deadline, .app-block:not(.rank-block), .no-print, .rank-ctl, .eyebrow, .copy-label, .field-msg, .rank-block > p.muted.small { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 0; padding: 0; background: #fff; }
  .rank-row { break-inside: avoid; border-color: #999; }
  .rank-row .pos { background: #fff; color: #000; border: 1px solid #000; }
  .gap-note { display: none; }
  .page-title { display: none; }
  .print-only { display: block; font-size: 22px; font-weight: 700; margin: 0 0 12px; }
  .print-notes { display: block; font-size: 12px; margin-top: 4px; white-space: pre-wrap; }
}