:root {
  color-scheme: light;
  --ink: #1b2830;
  --muted: #61717a;
  --paper: #f4f6f5;
  --mist: #e6ecec;
  --line: #c8d2d3;
  --navy: #24495b;
  --blue: #39708a;
  --ice: #d7e7e7;
  --amber: #a56524;
  --red: #8d4138;
  --radius: 6px;
  --shadow: 0 12px 28px rgba(28, 55, 64, .08);
  --display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --body: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--mist); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.45; }
button, input, textarea { font: inherit; }
button, input, textarea { accent-color: var(--navy); }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
h1 { max-width: 690px; margin-bottom: 10px; font-family: var(--display); font-size: 4.5rem; font-weight: 500; line-height: .98; }
h2 { margin-bottom: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 500; }
h3 { margin-bottom: 0; font-size: .9rem; }
label { display: grid; gap: 6px; color: var(--muted); font-size: .82rem; font-weight: 700; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 3px; padding: 10px 11px; color: var(--ink); background: #fff; box-shadow: inset 0 1px 0 rgba(15, 36, 44, .03); }
textarea { resize: vertical; min-height: 184px; font-family: "Menlo", "Courier New", monospace; font-size: .85rem; line-height: 1.45; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #80501d; outline-offset: 3px; }

.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; transform: translateY(-180%); padding: 9px 12px; color: #fff; background: var(--navy); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-hidden { display: none !important; }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; min-height: 68px; align-items: center; gap: 26px; border-bottom: 1px solid var(--line); padding: 0 max(22px, calc((100vw - 1280px) / 2)); background: rgba(244, 246, 245, .96); }
.wordmark { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; text-decoration: none; font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.wordmark-mark { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50% 50% 6px 50%; color: #fff; background: var(--navy); font-family: var(--body); font-size: .62rem; letter-spacing: .04em; }
.primary-nav { display: flex; flex: 1; align-self: stretch; align-items: stretch; }
.primary-nav a { display: grid; min-height: 44px; align-items: center; padding: 0 14px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-size: .86rem; font-weight: 700; }
.primary-nav a[aria-current="page"] { border-color: var(--blue); color: var(--ink); }
.mobile-nav { display: none; }
.format-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.format-switch button { min-height: 44px; border: 0; border-radius: 2px; padding: 0 11px; color: var(--muted); background: transparent; font-size: .77rem; font-weight: 700; }
.format-switch button[aria-pressed="true"] { color: #fff; background: var(--navy); }

main { width: min(1280px, calc(100% - 44px)); margin: 0 auto; }
.view { padding: 64px 0 76px; }
.mutation-status { min-height: 0; color: var(--muted); font-size: .82rem; }
.mutation-status:not(:empty) { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.mutation-status[data-kind="success"] { color: #286550; }
.mutation-status[data-kind="error"] { color: var(--red); }
.page-heading { display: flex; align-items: start; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.lede { max-width: 620px; margin-bottom: 0; color: var(--muted); }
.catalog-note { max-width: 240px; margin-top: 5px; color: var(--muted); font-size: .76rem; text-align: right; }
.ledger-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 26px; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--line); background: #f9faf9; }
.ledger-strip span { display: flex; align-items: baseline; gap: 7px; min-height: 62px; padding: 14px 18px; border-right: 1px solid var(--line); color: var(--muted); font-size: .76rem; font-weight: 700; }
.ledger-strip span:last-child { border-right: 0; }
.ledger-strip strong { color: var(--ink); font-family: var(--display); font-size: 1.7rem; font-weight: 600; }

.planner-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 440px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.deck-drawer { padding: 20px 14px; border-right: 1px solid var(--line); background: #edf1f1; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.text-button { min-height: 44px; border: 0; padding: 0 4px; color: var(--navy); background: transparent; text-decoration: underline; text-underline-offset: 3px; font-size: .8rem; font-weight: 700; }
.compact-form { gap: 11px; margin: 0 0 14px; padding: 13px; border: 1px solid var(--line); background: #fff; }
.compact-form label { display: grid; }
.compact-form input { min-height: 38px; padding: 8px; }
.action-button { min-height: 44px; border: 1px solid var(--navy); border-radius: 3px; padding: 0 15px; color: #fff; background: var(--navy); font-size: .8rem; font-weight: 800; }
.action-button:hover { background: #183845; }
.action-button:disabled { cursor: not-allowed; border-color: var(--line); color: #8e9ba0; background: #e6ebeb; }
.action-button--quiet { color: var(--navy); background: #fff; }
.action-button--quiet:hover { color: #fff; background: var(--navy); }
.deck-list { display: grid; gap: 8px; }
.deck-card { position: relative; overflow: hidden; border: 1px solid transparent; background: transparent; }
.deck-card:hover, .deck-card:focus-within { border-color: #aebfc3; background: rgba(255,255,255,.68); }
.deck-card.is-active { border-color: var(--navy); background: #fff; }
.deck-card-content { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: stretch; }
.deck-select { display: grid; min-width: 44px; min-height: 54px; place-items: center; }
.deck-select input { width: 16px; height: 16px; }
.deck-open { display: flex; min-height: 54px; flex-direction: column; align-items: start; justify-content: center; gap: 2px; border: 0; padding: 8px 10px; color: var(--ink); background: transparent; text-align: left; }
.deck-open strong { overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.deck-open span { color: var(--muted); font-size: .72rem; }
.deck-workspace { min-width: 0; padding: 28px; }
.empty-state { display: grid; min-height: 370px; align-content: center; justify-items: start; max-width: 430px; }
.empty-state p:last-child { color: var(--muted); }
.deck-workspace-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.deck-workspace-head h2 { font-size: 2.25rem; }
.deck-meta { margin-bottom: 5px; color: var(--blue); font-size: .78rem; font-weight: 700; }
.deck-health { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
.health-chip { border: 1px solid var(--line); border-radius: 20px; padding: 6px 9px; color: var(--muted); background: #f7f9f9; font-size: .75rem; font-weight: 700; }
.health-chip--ok { border-color: #9ec1b4; color: #286550; background: #eef7f2; }
.health-chip--warn { border-color: #dbc58e; color: #815d1d; background: #fff8e8; }
.health-chip--bad { border-color: #d2a6a1; color: var(--red); background: #fff1f0; }
.deck-edit-grid { display: grid; grid-template-columns: minmax(230px, .92fr) minmax(280px, 1.08fr); gap: 26px; }
.decklist-form { display: grid; align-content: start; gap: 10px; }
.decklist-save { display: flex; justify-content: flex-start; }
.requirements-panel { min-width: 0; }
.requirements-list { border-top: 1px solid var(--line); }
.requirement-row { display: grid; grid-template-columns: minmax(110px, 1fr) repeat(4, auto); gap: 10px; align-items: center; min-height: 46px; border-bottom: 1px solid var(--line); font-size: .78rem; }
.requirement-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }
.requirement-row span { color: var(--muted); white-space: nowrap; }
.requirement-row .missing { color: var(--red); font-weight: 800; }
.rules-link { color: var(--blue); font-size: .74rem; }
.rules-link a { color: inherit; }
.optimizer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; margin-top: 28px; border-top: 3px solid var(--navy); padding: 26px 0; }
.optimizer h2 { max-width: 560px; font-size: 1.9rem; }
.optimizer-actions { display: flex; align-items: end; flex-direction: column; gap: 9px; color: var(--muted); font-size: .78rem; }
.optimizer-result { grid-column: 1 / -1; }
.plan-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: #fff; }
.plan-summary > div { padding: 16px; border-right: 1px solid var(--line); }
.plan-summary > div:last-child { border-right: 0; }
.plan-summary h3 { margin-bottom: 8px; }
.plan-summary ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .82rem; }
.plan-summary p { margin: 0; color: var(--muted); font-size: .82rem; }

.collection-layout { display: grid; grid-template-columns: minmax(250px, .76fr) minmax(0, 1.24fr); gap: 26px; align-items: start; }
.intake-panel { display: grid; gap: 12px; padding: 20px; border-top: 3px solid var(--navy); background: #e9eeee; }
.search-row { display: flex; gap: 8px; }
.search-row input { min-width: 0; }
.field-help { margin: -5px 0 0; color: var(--muted); font-size: .74rem; }
.catalog-results { display: grid; gap: 5px; min-height: 0; }
.catalog-result { min-height: 44px; border: 1px solid var(--line); padding: 8px; color: var(--ink); background: #fff; text-align: left; }
.catalog-result[aria-pressed="true"] { border-color: var(--navy); background: #edf4f3; }
.catalog-result strong, .catalog-result span { display: block; }
.catalog-result span { color: var(--muted); font-size: .72rem; }
.collection-table-wrap { min-width: 0; padding: 7px 0; }
.data-operations { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.data-operations p { margin: 5px 0 12px; color: var(--muted); font-size: .78rem; }
.data-operation-links { display: flex; flex-wrap: wrap; gap: 8px; }
.data-operation-links a { display: inline-flex; align-items: center; text-decoration: none; }
.data-operation-links a[aria-disabled="true"] { pointer-events: none; border-color: var(--line); color: #8e9ba0; background: #e6ebeb; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--navy); }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { min-height: 48px; border-bottom: 1px solid var(--line); padding: 12px; text-align: left; }
th { color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
td { font-size: .86rem; }
td:not(:first-child) { color: var(--muted); font-variant-numeric: tabular-nums; }
td:last-child { color: #286550; font-weight: 800; }

.review-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
.review-sidebar { display: grid; gap: 26px; }
.photo-upload { display: grid; gap: 12px; border-top: 3px solid var(--navy); padding: 20px; background: #e9eeee; }
.photo-upload input[type="file"] { min-height: 44px; padding: 8px; font-size: .78rem; }
.review-queue { display: grid; gap: 6px; }
.review-queue > p { color: var(--muted); font-size: .78rem; }
.review-batch { min-height: 58px; border: 1px solid var(--line); padding: 9px 11px; color: var(--ink); background: #fff; text-align: left; }
.review-batch[aria-pressed="true"] { border-color: var(--navy); background: #edf4f3; }
.review-batch strong, .review-batch span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-batch span { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.review-detail { min-width: 0; border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 26px; background: #fff; box-shadow: var(--shadow); }
.review-detail > .empty-state { min-height: 330px; }
.review-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.review-detail-head h2 { margin-bottom: 4px; font-size: 2rem; }
.review-detail-head p { margin: 0; color: var(--muted); font-size: .78rem; }
.review-photo { display: block; width: min(100%, 720px); max-height: 520px; margin: 0 auto 22px; border: 1px solid var(--line); object-fit: contain; background: var(--mist); }
.review-status { border: 1px solid var(--line); border-radius: 20px; padding: 6px 9px; color: var(--muted); background: #f7f9f9; font-size: .72rem; font-weight: 800; }
.review-failure { border: 1px solid #d2a6a1; padding: 18px; background: #fff5f4; }
.review-failure h3 { margin-bottom: 7px; color: var(--red); }
.review-failure p { margin-bottom: 7px; color: var(--muted); font-size: .8rem; }
.review-failure p:last-child { margin-bottom: 0; }
.review-candidates { display: grid; gap: 18px; }
.review-candidate { display: grid; grid-template-columns: minmax(160px, .65fr) minmax(260px, 1.35fr); gap: 20px; border-bottom: 1px solid var(--line); padding: 0 0 18px; }
.review-candidate:last-child { border-bottom: 0; padding-bottom: 0; }
.review-candidate-copy h3 { margin-bottom: 5px; font-size: 1rem; }
.review-candidate-copy p { margin-bottom: 7px; color: var(--muted); font-size: .78rem; }
.review-candidate-copy strong { display: block; overflow-wrap: anywhere; }
.review-confidence { color: var(--blue); font-size: .72rem; font-weight: 800; }
.review-controls { display: grid; gap: 10px; }
.review-selected { min-height: 44px; border: 1px solid var(--line); padding: 9px 11px; background: #f7f9f9; font-size: .78rem; }
.review-selected strong, .review-selected span { display: block; }
.review-selected span { color: var(--muted); font-size: .72rem; }
.review-match-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.review-match-list .catalog-result { overflow: hidden; }
.review-actions { display: grid; grid-template-columns: 92px minmax(130px, 1fr) auto; gap: 8px; align-items: end; }
.review-actions label { min-width: 0; }
.review-search-results { display: grid; gap: 5px; }
.review-decision { display: flex; flex-wrap: wrap; gap: 8px; }
.review-decision .text-button { color: var(--red); }
.status-error { border-color: #d2a6a1; background: #fff5f4; }

@media (max-width: 760px) {
  body { padding-bottom: calc(60px + max(16px, env(safe-area-inset-bottom))); }
  h1 { font-size: 3.25rem; }
  button, input:not([type="checkbox"]), textarea { min-height: 44px; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; min-height: 64px; padding: 8px 18px; }
  .wordmark { grid-column: 1; grid-row: 1; margin-right: 0; }
  .format-switch { grid-column: 2; grid-row: 1; }
  .primary-nav { display: none; }
  .mobile-nav { position: fixed; z-index: 12; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-top: 1px solid var(--line); padding: 8px 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -8px 24px rgba(28, 55, 64, .1); }
  .mobile-nav a { display: grid; min-height: 44px; place-items: center; border-radius: 3px; color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 800; }
  .mobile-nav a[aria-current="page"] { color: #fff; background: var(--navy); }
  main { width: min(100% - 28px, 620px); }
  .view { padding: 36px 0 42px; }
  .page-heading { display: block; margin-bottom: 25px; }
  .catalog-note { max-width: none; margin-top: 17px; text-align: left; }
  .ledger-strip { grid-template-columns: repeat(2, 1fr); }
  .ledger-strip span:nth-child(2) { border-right: 0; }
  .ledger-strip span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .planner-layout, .collection-layout, .deck-edit-grid, .review-layout, .review-candidate { grid-template-columns: 1fr; }
  .deck-drawer { border-right: 0; border-bottom: 1px solid var(--line); }
  .deck-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck-workspace { padding: 20px; }
  .deck-workspace-head { align-items: stretch; flex-direction: column; }
  .deck-workspace-head .action-button { width: 100%; }
  .decklist-save { position: sticky; z-index: 2; bottom: calc(58px + max(16px, env(safe-area-inset-bottom))); margin: 2px -8px -8px; border-top: 1px solid var(--line); padding: 10px 8px; background: #fff; }
  .decklist-save .action-button { width: 100%; }
  .requirement-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; padding: 9px 0; }
  .requirement-row strong { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
  .requirement-row span { white-space: normal; }
  .optimizer { grid-template-columns: 1fr; }
  .optimizer-actions { align-items: stretch; }
  .plan-summary { grid-template-columns: 1fr; }
  .plan-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .plan-summary > div:last-child { border-bottom: 0; }
  .collection-table-wrap .table-scroll { overflow: visible; }
  .collection-table-wrap table, .collection-table-wrap tbody, .collection-table-wrap tr, .collection-table-wrap td { display: block; width: 100%; }
  .collection-table-wrap thead { display: none; }
  .collection-table-wrap tbody { display: grid; gap: 10px; }
  .collection-table-wrap tr { border: 1px solid var(--line); padding: 7px 12px; background: #fff; }
  .collection-table-wrap td { display: grid; grid-template-columns: minmax(92px, .4fr) minmax(0, 1fr); gap: 10px; min-height: 36px; align-items: baseline; border: 0; padding: 5px 0; overflow-wrap: anywhere; }
  .collection-table-wrap td::before { content: attr(data-label); color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .review-layout { gap: 20px; }
  .review-sidebar { display: contents; }
  .photo-upload { order: -2; }
  .review-queue-section { order: 0; }
  .review-detail { padding: 20px; }
  .review-detail { order: -1; }
  .review-detail-head { align-items: stretch; flex-direction: column; }
  .review-detail-head .action-button { width: 100%; }
  .review-decision { position: sticky; z-index: 2; bottom: calc(58px + max(16px, env(safe-area-inset-bottom))); margin: 2px -12px -10px; border-top: 1px solid var(--line); padding: 10px 12px; background: #fff; }
  .review-decision > * { flex: 1; }
}

@media (max-width: 900px) and (max-height: 500px) {
  body { padding-bottom: calc(52px + max(8px, env(safe-area-inset-bottom))); }
  button, input:not([type="checkbox"]), textarea, select { min-height: 44px; }
  .primary-nav { display: none; }
  .mobile-nav { position: fixed; z-index: 12; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-top: 1px solid var(--line); padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -8px 24px rgba(28, 55, 64, .1); }
  .mobile-nav a { display: grid; min-height: 44px; place-items: center; border-radius: 3px; color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 800; }
  .mobile-nav a[aria-current="page"] { color: #fff; background: var(--navy); }
  .review-layout, .review-candidate { grid-template-columns: 1fr; }
  .review-detail { order: -1; padding: 20px; }
  .review-decision { position: sticky; z-index: 2; bottom: calc(52px + max(8px, env(safe-area-inset-bottom))); margin: 2px -12px -10px; border-top: 1px solid var(--line); padding: 10px 12px; background: #fff; }
  .review-decision > * { flex: 1; }
  .deck-edit-grid { grid-template-columns: 1fr; }
  .decklist-save { position: sticky; z-index: 2; bottom: calc(52px + max(8px, env(safe-area-inset-bottom))); border-top: 1px solid var(--line); padding: 8px; background: #fff; }
}

@media (max-width: 390px) {
  h1 { font-size: 2.35rem; }
  .topbar { padding-inline: 14px; }
  main { width: calc(100% - 24px); }
  .format-switch button { padding-inline: 8px; }
  .deck-list { grid-template-columns: 1fr; }
  .search-row { flex-direction: column; }
  .search-row .action-button { width: 100%; }
  .review-match-list, .review-actions { grid-template-columns: 1fr; }
  .review-actions .action-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}