/* Layout: a print-shop worksheet. Assumptions strip on top, the card lookup as the main sheet, the year's press run below. */
#tcg-supply-calculator {
  --bg: #f6f7f9; --panel: #f9fafb; --field: #ffffff; --ink: #14171c; --ink-2: #4b5260; --ink-3: #7a8190;
  --rule: #dfe2e8; --track: #eceef2; --accent: #1f5fae; --accent-soft: #e3ecf8;
  --main: #2a78d6; --special: #eb6834; --band: #d9e6f6; --check: #c9ced8; --warn: #9a5b00; --warn-soft: #fbf1e1;
  --r: 6px;
}

/* Scoped to #tcg-supply-calculator so it doesn't style the host page, and the host page styles it only through the font
   it inherits: the reset puts every element back to browser defaults (an id outranks a theme's class and element rules),
   then the rules below style it. */
#tcg-supply-calculator, #tcg-supply-calculator * { all: revert; box-sizing: border-box; }
#tcg-supply-calculator input, #tcg-supply-calculator select, #tcg-supply-calculator button { font-family: inherit; }
#tcg-supply-calculator [hidden] { display: none; }  /* Chrome's [hidden] is an author style, so the reset drops it */
#tcg-supply-calculator { color: var(--ink); font-size: 15px; line-height: 1.5; container-type: inline-size; }  /* breakpoints and sizes follow its own width */
/* The one rule aimed outside the calculator: lets its parent widen past a narrow text column (Hydeout caps each child
   of its content column at 38rem) to the width the calculator was designed for. */
:has(> #tcg-supply-calculator) { max-width: 1080px; }
#tcg-supply-calculator .wrap { display: grid; gap: 22px; }
#tcg-supply-calculator h2, #tcg-supply-calculator h3 { margin: 0; text-wrap: balance; letter-spacing: .005em; }
#tcg-supply-calculator h2 { font-size: 20px; font-weight: 600; }
#tcg-supply-calculator h3 { font-size: 15px; font-weight: 600; }
#tcg-supply-calculator p { margin: 0; }
#tcg-supply-calculator .eyebrow { font-weight: 600; font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }
#tcg-supply-calculator .lede { color: var(--ink-2); }
#tcg-supply-calculator .num, #tcg-supply-calculator .mono { font-variant-numeric: tabular-nums; }
#tcg-supply-calculator a { color: var(--accent); }
#tcg-supply-calculator .panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px; display: grid; gap: 14px; min-width: 0; }
#tcg-supply-calculator header { display: grid; gap: 8px; }
#tcg-supply-calculator .stamp { display: inline-flex; gap: 8px; flex-wrap: wrap; font-weight: 500; font-size: 12px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#tcg-supply-calculator .stamp span { border: 1px solid var(--rule); border-radius: 3px; padding: 5px 7px; background: var(--panel); }

/* Assumptions */
#tcg-supply-calculator .assume { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
@container (max-width: 760px) { #tcg-supply-calculator .assume { grid-template-columns: 1fr; } }
#tcg-supply-calculator .ctrl { display: grid; gap: 6px; }
#tcg-supply-calculator .ctrl label { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
#tcg-supply-calculator .ctrl label output { font-weight: 500; font-size: 14px; line-height: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
#tcg-supply-calculator .ctrl small { color: var(--ink-3); font-size: 12.5px; }
#tcg-supply-calculator input[type=range] { width: 100%; accent-color: var(--accent); }
#tcg-supply-calculator .check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
#tcg-supply-calculator .check input { margin-top: 3px; accent-color: var(--accent); }
#tcg-supply-calculator .scale { position: relative; height: 46px; margin-top: 4px; }
#tcg-supply-calculator .scale .bar { position: absolute; left: 0; right: 0; top: 14px; height: 10px; background: var(--track); border-radius: 5px; }
#tcg-supply-calculator .scale .seg { position: absolute; top: 14px; height: 10px; border-radius: 5px; }
#tcg-supply-calculator .scale .chk { background: var(--check); }
#tcg-supply-calculator .scale .sel { background: var(--accent); opacity: .85; height: 6px; top: 16px; }
#tcg-supply-calculator .scale .lab { position: absolute; top: 31px; font-weight: normal; font-size: 11px; line-height: normal; color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
#tcg-supply-calculator .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
#tcg-supply-calculator .legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 1px; }

/* Lookup */
#tcg-supply-calculator .lookup { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; }
@container (max-width: 760px) { #tcg-supply-calculator .lookup { grid-template-columns: 1fr; } }
#tcg-supply-calculator .pick { display: grid; gap: 12px; align-content: start; }
#tcg-supply-calculator .field { display: grid; gap: 5px; }
#tcg-supply-calculator .field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
#tcg-supply-calculator select, #tcg-supply-calculator input[type=search] { font-weight: normal; font-size: 14px; line-height: normal; color: var(--ink); background: var(--field); border: 1px solid var(--rule);
  border-radius: 4px; padding: 8px 9px; width: 100%; }
#tcg-supply-calculator select:focus-visible, #tcg-supply-calculator input:focus-visible, #tcg-supply-calculator button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#tcg-supply-calculator .hits { display: grid; gap: 2px; max-height: 220px; overflow: auto; }
#tcg-supply-calculator .hits button { text-align: left; font-weight: normal; font-size: 13.5px; line-height: normal; color: var(--ink); background: none; border: 0; border-radius: 4px; padding: 6px 7px; cursor: pointer; display: grid; gap: 1px; }
#tcg-supply-calculator .hits button:hover, #tcg-supply-calculator .hits button[aria-current=true] { background: var(--accent-soft); }
#tcg-supply-calculator .hits small { color: var(--ink-3); font-size: 12px; }
#tcg-supply-calculator .answer { display: grid; gap: 16px; align-content: start; min-width: 0; }
#tcg-supply-calculator .answer .who { display: grid; gap: 3px; }
#tcg-supply-calculator .answer .head { display: flex; gap: 16px; align-items: flex-start; }
#tcg-supply-calculator .answer .head .who { flex: 1; min-width: 0; }
#tcg-supply-calculator .art { flex: none; width: clamp(96px, 22cqi, 150px); }
#tcg-supply-calculator .art img { display: block; width: 100%; aspect-ratio: 245 / 342; border-radius: 4.5% / 3.2%; background: var(--track);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 4px 14px rgba(0, 0, 0, .12); }
#tcg-supply-calculator .art a { color: var(--accent); font-size: 13px; }
#tcg-supply-calculator .art a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#tcg-supply-calculator .answer .who .sub { color: var(--ink-2); font-size: 14px; }
#tcg-supply-calculator .big { font-weight: 700; font-size: clamp(34px, 6cqi, 52px); line-height: 1; letter-spacing: -.01em; }
#tcg-supply-calculator .est { display: grid; gap: 8px; }
#tcg-supply-calculator .est .bounds { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 500; font-size: 14px; line-height: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#tcg-supply-calculator .est .bounds b { font-weight: 600; color: var(--ink-2); }
#tcg-supply-calculator .est small { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
#tcg-supply-calculator .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
#tcg-supply-calculator .fact { border-top: 2px solid var(--rule); padding-top: 8px; display: grid; gap: 2px; }
#tcg-supply-calculator .fact b { font-weight: 600; font-size: 18px; line-height: normal; font-variant-numeric: tabular-nums; }
#tcg-supply-calculator .fact span { font-size: 12.5px; color: var(--ink-2); }
#tcg-supply-calculator .chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
#tcg-supply-calculator .chain li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; font-size: 14px; color: var(--ink-2); }
#tcg-supply-calculator .chain li::before { counter-increment: step; content: counter(step); font-weight: 600; font-size: 12px; line-height: 22px; text-align: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; }
#tcg-supply-calculator .chain b { color: var(--ink); font-weight: 600; }
#tcg-supply-calculator .note { font-size: 13px; color: var(--warn); background: var(--warn-soft); border-radius: 4px; padding: 8px 10px; }
#tcg-supply-calculator .src { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }

/* Year view */
#tcg-supply-calculator .yearpick { max-width: 240px; }
#tcg-supply-calculator .run { display: grid; gap: 4px; }
#tcg-supply-calculator .row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 120px); gap: 10px; align-items: center;
  padding: 5px 4px; border-radius: 4px; cursor: pointer; }
#tcg-supply-calculator .row:hover, #tcg-supply-calculator .row.on { background: var(--accent-soft); }
#tcg-supply-calculator .row .nm { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tcg-supply-calculator .row .nm em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: 4px; }
#tcg-supply-calculator .row .tr { position: relative; height: 18px; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
#tcg-supply-calculator .row .rg { position: absolute; top: 5px; height: 8px; border-radius: 4px; }
#tcg-supply-calculator .row .pt { position: absolute; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--panel); transform: translateX(-50%); }
#tcg-supply-calculator .row .vl { font-weight: normal; font-size: 12.5px; line-height: normal; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
@container (max-width: 560px) { #tcg-supply-calculator .row { grid-template-columns: minmax(0, 1fr) minmax(0, 92px); } #tcg-supply-calculator .row .tr { grid-column: 1 / -1; grid-row: 2; } }
#tcg-supply-calculator .axis { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 120px); gap: 10px; font-weight: normal; font-size: 11px; line-height: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#tcg-supply-calculator .axis div:nth-child(2) { display: flex; justify-content: space-between; }
@container (max-width: 560px) { #tcg-supply-calculator .axis { grid-template-columns: 1fr; } #tcg-supply-calculator .axis div:first-child, #tcg-supply-calculator .axis div:last-child { display: none; } }
#tcg-supply-calculator .tablewrap { overflow-x: auto; }
#tcg-supply-calculator table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
#tcg-supply-calculator th, #tcg-supply-calculator td { padding: 7px 8px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
#tcg-supply-calculator th { font-weight: 600; font-size: 11px; line-height: normal; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
#tcg-supply-calculator th:first-child, #tcg-supply-calculator td:first-child { text-align: left; }
#tcg-supply-calculator .pill { display: inline-block; font-weight: 600; font-size: 10.5px; line-height: 1; text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: 3px; color: var(--panel); }
#tcg-supply-calculator .pill.main { background: var(--main); } #tcg-supply-calculator .pill.special { background: var(--special); }
#tcg-supply-calculator .tip { position: fixed; z-index: 20; pointer-events: none; background: var(--ink); color: var(--bg); font-weight: normal; font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 4px; max-width: 260px; }
#tcg-supply-calculator footer { color: var(--ink-3); font-size: 12.5px; display: grid; gap: 6px; }
@media (prefers-reduced-motion: no-preference) { #tcg-supply-calculator .row .rg, #tcg-supply-calculator .row .pt, #tcg-supply-calculator .scale .sel { transition: left .2s, width .2s; } }