/*
 * 715 — Foundry.
 *
 * The app's own Foundry theme on the web. Every colour below is lifted
 * verbatim from src/design/themes.ts, so the site and the app are the same
 * object: soot #1A1713, panel #23201A, brass #C8892E, display figures
 * #D9A441. Oswald carries the UI, headings, labels, names and every figure,
 * matching the theme's condensed voice; running body copy is a neutral sans,
 * because paragraphs of condensed type are hard work.
 *
 * Structure first, decoration second: the first block is layout and motion
 * only, the second is the Foundry surface, the third covers pages the mixed
 * lot screen doesn't exercise.
 *
 * Oswald is SIL OFL 1.1 — see assets/fonts/OFL.txt.
 */

@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;
 src:url(fonts/oswald-400.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
 src:url(fonts/oswald-500.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
 src:url(fonts/oswald-600.woff2) format('woff2')}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

/* ---- motion ------------------------------------------------------------- */
a,button,input,.line,.lrm,.combo li,.seg button,.tabs button{
 transition:color .2s cubic-bezier(.2,.7,.3,1),background-color .2s cubic-bezier(.2,.7,.3,1),
 border-color .2s cubic-bezier(.2,.7,.3,1),opacity .2s cubic-bezier(.2,.7,.3,1),
 box-shadow .22s cubic-bezier(.2,.7,.3,1),transform .22s cubic-bezier(.2,.7,.3,1)}
@keyframes lineIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes paneIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.line{animation:lineIn .26s cubic-bezier(.2,.7,.3,1) both}
.line:nth-child(2){animation-delay:.03s}.line:nth-child(3){animation-delay:.06s}
.line:nth-child(4){animation-delay:.09s}.line:nth-child(5){animation-delay:.12s}
.line:nth-child(n+6){animation-delay:.15s}
.pane:not([hidden]){animation:paneIn .24s cubic-bezier(.2,.7,.3,1) both}
.combo ul:not([hidden]){animation:menuIn .18s cubic-bezier(.2,.7,.3,1) both}
.btn:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- head --------------------------------------------------------------- */
.site-head .top{display:flex;align-items:center;gap:18px;padding-block:16px}
.brand{color:inherit;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.brand .mark svg{width:8px;height:7.5px;display:block;margin-bottom:1px}
.site-head .top nav{margin-left:auto;display:flex}
.site-head .top nav a{text-decoration:none;display:flex;align-items:center;position:relative}
.crumbs a{text-decoration:none}
.crumbs i{font-style:normal;margin:0 7px;opacity:.45}
p{margin:0 0 11px}
h1,h2{text-wrap:balance}
.lede,.prose p{text-wrap:pretty}

/* ---- calculator --------------------------------------------------------- */
.calc-grid{display:grid}
/* Three across on the desktop default: inputs | ledger | totals. These live
   here, above the max-width:880px reset further down, because they carry no
   media query of their own — placed after it they would win the cascade and
   drop the ledger into column 2 of a one-column mobile grid. */
.lot .calc-grid{grid-template-columns:minmax(400px,1fr) minmax(400px,1.05fr) 320px;gap:0 44px}
.lot .calc-in{grid-column:1;grid-row:1}
.lot .ledgerlines{grid-column:2;grid-row:1;margin-top:0}
.lot .calc-out{grid-column:3;grid-row:1;padding-top:0}
/* Each column is its own height; without this the shorter ones stretch. */
.lot .calc-in,.lot .ledgerlines,.lot .calc-out{align-self:start}
.market{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.market .inp{width:92px}
.money{position:relative;display:inline-block}
.money .cur{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none}
.money .inp{padding-left:13px}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.inp,.combo input{width:100%;font:inherit;border:0;background:transparent}
.inp:focus,.combo input:focus{outline:0}
.coinrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.combo{position:relative}
.combo-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;
 fill:none;stroke-width:1.9;stroke-linecap:round;pointer-events:none}
.combo .caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;
 display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px}
.combo .caret svg{width:12px;height:8px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.combo ul{position:absolute;z-index:30;left:-10px;right:-10px;top:calc(100% + 8px);
 max-height:300px;overflow-y:auto;margin:0;padding:6px;list-style:none}
.combo ul[hidden]{display:none}
.combo li{padding:8px 11px;cursor:pointer;display:flex;align-items:baseline;gap:8px}
.combo li .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo li .d{margin-left:auto;flex:0 0 auto;display:flex;align-items:baseline;gap:18px}
.combo li .dp{width:50px;text-align:right}
.combo li .doz{width:84px;text-align:right}

/* The spec row IS the specifications table: label above value, no box, no
   separate section repeating it further down the page. */
.specline{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline;margin:10px 0 0}
.specline>div{display:block}
.specline dt,.specline dd{margin:0}

/* One label column, one answer column, three rows. */
.fields{display:grid}
/* The label column gives way before the controls do: the card is narrower on a
   coin page than on the lot page, and narrower again in a small window. */
.field{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);align-items:center}
.field>.lbl{margin-bottom:0}
/* Everything in this row must be able to shrink, or the widest mode (bags:
   number + "bags of" + size) pushes out through the card padding. */
.amtrow{display:flex;gap:18px;align-items:stretch;min-width:0}
.amtqty{flex:1 1 180px;min-width:84px}
/* The amount is the headline input; the bag denomination is a choice beside
   it, so it sizes to its own text and never shrinks into an ellipsis. The
   quantity field absorbs whatever is left. */
.amtbag{flex:0 0 auto;display:flex;align-items:stretch;gap:12px}
.amtsep{flex:0 0 auto;display:flex;align-items:center}
.amtbag select{flex:0 0 auto;width:auto}
.amtbag[hidden],.field[hidden],.lot-empty[hidden],.fieldnote[hidden],
.seg button[hidden]{display:none}
/* mode + condition: text, underlined when live — no filled chrome */
.seg{display:inline-flex;gap:20px}
.seg button{font:inherit;cursor:pointer;border:0;background:transparent;padding:3px 0;position:relative}
.seg button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
 transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.seg button[aria-pressed=true]::after{transform:scaleX(1)}
.addbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.btn{font:inherit;cursor:pointer;border:0}

/* ---- ledger ------------------------------------------------------------- */
.ledgerhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* Two explicitly placed rows:
 *     qty | name ....... melt | x
 *     qty | meta ....... oz   | x
 * The name was previously a flex item competing for whatever the fixed
 * columns left over. In the narrow ledger column that came to ~115px, so
 * "Walking Liberty Half" broke over three lines and its meta line over five.
 * Placing both rows means nothing has to wrap; anything genuinely too long
 * truncates with an ellipsis and keeps its full text in the title. */
.linehead,.line{display:grid;column-gap:14px;row-gap:2px;
 grid-template-columns:46px minmax(0,1fr) auto 22px;
 grid-template-areas:"qty name melt rm" "qty meta oz rm";
 align-items:baseline}
.lines{list-style:none;margin:0;padding:0}
.lqty{grid-area:qty;align-self:center}
.lname,.lmeta{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lname{grid-area:name}
.lmeta{grid-area:meta}
.loz{grid-area:oz;text-align:right}
.lmelt{grid-area:melt;text-align:right}
.lrm{grid-area:rm;align-self:center;border:0;background:transparent;cursor:pointer;
 opacity:0;line-height:1}
.line:hover .lrm,.lrm:focus-visible{opacity:1}
/* The header is a single row; "Silver" would otherwise label a second-row
   value that sits under the meta line, so it is dropped from the header. */
.linehead{grid-template-areas:"qty name melt rm"}
.linehead .loz{display:none}
.linehead .lrmhead{grid-area:rm}
/* .lqty and .lmelt set a font-size on the span itself, which beat the
   font-size on .linehead and left the column headers rendering at 18px —
   as loud as the figures they label. Re-assert the header scale here. */
.linehead>span{white-space:nowrap;font-size:10px;font-weight:500;
 letter-spacing:.13em;color:var(--hint)}

/* ---- summary ------------------------------------------------------------ */
.tabs{display:flex;gap:22px}
.tabs button{font:inherit;cursor:pointer;border:0;background:transparent;padding:0 0 9px;position:relative}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
 transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.tabs button[aria-selected=true]::after{transform:scaleX(1)}
.pane[hidden]{display:none}
.stats{display:grid;margin:0}
.stats div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.stats dt,.stats dd{margin:0}
.dealline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}

/* ---- app banner + foot -------------------------------------------------- */
.appbanner{display:grid;position:relative;overflow:hidden}
.appbanner ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px}
.appbanner li{display:flex;gap:10px}
.appbanner .top{display:flex;align-items:center;gap:10px}
.appbanner .art img{width:100%;height:auto;display:block}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badges a{text-decoration:none}
.footgrid{display:grid;gap:30px}
.footcol a{display:block;text-decoration:none}
.footbase{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* keep the currency glyph clear of the figure whatever the variant's padding */
.market .money .inp,.dealinputs .money .inp,.calc-out .money .inp{padding-left:.66em}

@media(max-width:880px){
 .lot .calc-grid{grid-template-columns:1fr}
 .lot .calc-in,.lot .ledgerlines,.lot .calc-out{grid-column:1;grid-row:auto}
 .loz,.linehead .loz{display:none}
 .lrm{opacity:1}
}

:root{
 --page:#100E0C;--bg:#1A1713;--panel:#23201A;--track:#201D18;
 --ink:#E8E2D6;--ink2:#C4BBA9;--muted:#8C8272;--hint:#6B6155;
 --line:#2C2721;--line2:#3A342C;--chip:#4A423A;
 --accent:#C8892E;--disp:#D9A441;--onink:#1A1713;
 --good:#8FB87A;--bad:#D9754F;
 --os:"Oswald","Arial Narrow",system-ui,sans-serif;
 --txt:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 --card:0 1px 0 rgba(255,255,255,.035) inset,0 2px 6px rgba(0,0,0,.42)}
body{background:var(--bg);color:var(--ink);font-family:var(--os);font-size:16px;line-height:1.6;
 -webkit-font-smoothing:antialiased}
.wrap{max-width:1000px}

/* ---- head --------------------------------------------------------------- */
.brand .mark svg{fill:var(--accent)}
.brand .mark b{font-size:20px;font-weight:600;letter-spacing:.01em}
.brand i{font-style:normal;font-size:11px;font-weight:400;letter-spacing:.18em;
 text-transform:uppercase;color:var(--hint)}
.site-head .top{padding-block:16px}
.site-head .top nav{gap:22px}
.site-head .top nav a{font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.site-head .top nav a:hover{color:var(--ink2)}
.site-head .top nav a[aria-current]{color:var(--accent)}
.site-head .top nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;
 height:1.5px;background:var(--accent)}
.crumbs{font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--hint);margin:14px 0 0}
.crumbs a{color:var(--hint)}
.crumbs a:hover{color:var(--muted)}
h1{font-size:clamp(30px,2.7vw,40px);font-weight:500;letter-spacing:.006em;
 line-height:1.06;margin:8px 0 10px}
.lede{font-family:var(--txt);color:var(--muted);font-size:16.5px;max-width:58ch;margin:0 0 20px;line-height:1.6}
h2{font-size:25px;font-weight:500;letter-spacing:.008em;margin:0 0 13px}
main.wrap>h2{margin-top:38px}
main.wrap>h2+.cards,main.wrap>h2+.prose{margin-top:0}
main.wrap>h3{font-size:16.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
 color:var(--disp);margin:28px 0 9px}
/* Running copy outside .prose still needs a readable measure. */
main.wrap>p{font-family:var(--txt);color:var(--muted);font-size:16px;line-height:1.72;max-width:70ch}
main.wrap>p.lede{font-size:16.5px;max-width:58ch}

/* ---- spot: a line in the margin, not a bar ------------------------------ */
.market{margin-bottom:18px;color:var(--hint)}
.mlabel{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.market .inp{font-size:25px;font-weight:500;color:var(--disp);width:94px;letter-spacing:.01em}
/* The prefix belongs to the figure it sits against, so it matches the field's
   size rather than inheriting body text. U+00D7 draws smaller than a digit at
   the same size, so the multiplier gets a little more. */
.money .cur{font-size:25px;font-weight:500;color:var(--disp)}
.money .cur.mult{font-size:30px}
.money .cur.mult+.inp,.money .inp.hasmult{padding-left:.86em}
.market .cur{font-size:25px;font-weight:500;color:var(--disp)}
.market .inp:focus{color:var(--accent)}
.munit{font-size:13px;letter-spacing:.04em}
.mmeta{margin-left:auto;font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto;align-self:center}
.dot.stale{background:var(--hint)}

/* ---- the panel (C's container, Foundry's surface) ----------------------- */
.calc-grid{grid-template-columns:1fr 330px;gap:0 60px}
/* The grid would otherwise stretch the panel to match the taller summary
   column, leaving dead space under the last control. */
.calc-in{background:var(--panel);border-radius:18px;padding:24px 28px;box-shadow:var(--card);
 align-self:start}
.calc-out{padding:24px 0 0}
.lbl,.eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--hint)}
.lbl{display:block;margin-bottom:8px}

/* fields are stamped wells, not outlined boxes */
.inp,.combo input{padding:10px 14px;background:var(--track);border-radius:12px;color:var(--ink);
 font-size:25px;font-weight:500;letter-spacing:.01em}
.market .inp,.calc-out .inp{background:transparent;padding:2px 0;border-radius:0}
/* The price field keeps its rule at rest. It used to appear only on :focus, so
   clicking a unit button blurred the field and the line vanished with it —
   leaving a figure floating with nothing to say it was still an input. */
.calc-out .inp{box-shadow:inset 0 -1.5px 0 var(--accent)}
.inp:focus,.combo input:focus{background:#1C1915;box-shadow:inset 0 0 0 1px var(--chip)}
.market .inp:focus{background:transparent;box-shadow:inset 0 -1.5px 0 var(--accent)}
.calc-out .inp:focus{background:transparent;box-shadow:inset 0 -2.5px 0 var(--disp)}
/* The coin field is the one control that opens something, so it is the one
   control that is outlined: a magnifier, a chevron in a brass well, and a
   border the other fields don't have. */
.combo input{padding-left:48px;padding-right:52px;box-shadow:inset 0 0 0 1px var(--chip)}
.combo input::placeholder{color:var(--hint);font-size:17px;letter-spacing:.02em}
.combo-icon{stroke:var(--muted);transition:stroke .2s cubic-bezier(.2,.7,.3,1)}
.combo .caret{background:rgba(200,137,46,.15);transition:background-color .2s cubic-bezier(.2,.7,.3,1)}
.combo .caret svg{stroke:var(--accent);transition:stroke .2s cubic-bezier(.2,.7,.3,1)}
.combo:hover input{box-shadow:inset 0 0 0 1px var(--muted)}
.combo:hover .combo-icon{stroke:var(--ink2)}
.combo:hover .caret{background:rgba(200,137,46,.26)}
.combo:focus-within input{background:#1C1915;box-shadow:inset 0 0 0 1.5px var(--accent)}
.combo:focus-within .combo-icon{stroke:var(--accent)}
.combo:focus-within .caret{background:var(--accent)}
.combo:focus-within .caret svg{stroke:var(--onink)}
.combo ul{left:0;right:0;background:#1C1915;border-radius:16px;padding:7px;
 box-shadow:inset 0 0 0 1px var(--line2),0 30px 66px -20px rgba(0,0,0,.9)}
.combo li{border-radius:10px;color:var(--ink2)}
/* Three levels, same shape as the coin board: country, denomination, coin.
   The indents are what carry the hierarchy. */
.combo li[role=option]{padding-left:38px}
.combo .subhead{padding:9px 10px 4px 22px;font-size:9.5px;font-weight:500;letter-spacing:.16em;
 text-transform:uppercase;color:var(--muted);cursor:default}
.combo .grouphead+.subhead{padding-top:4px}
.combo li .n{font-size:15px;font-weight:400;letter-spacing:.03em;text-transform:uppercase}
/* These were --hint on the menu panel: 2.89:1, under the 4.5:1 floor. The
   weight is what people scan for, so it gets the brighter of the two. */
.combo li .d{font-size:13px;font-weight:400;text-transform:none;letter-spacing:.02em;
 font-variant-numeric:tabular-nums}
.combo li .dp{color:var(--muted)}
.combo li .doz{color:var(--ink2)}
.combo li[aria-selected=true],.combo li:hover{background:rgba(200,137,46,.14);color:var(--ink)}
/* the tint lightens the row, so the metadata lifts with it to stay legible */
.combo li[aria-selected=true] .dp,.combo li:hover .dp{color:var(--ink2)}
.combo li[aria-selected=true] .doz,.combo li:hover .doz{color:var(--ink)}
.combo .grouphead{padding:12px 10px 5px;font-size:10px;font-weight:500;letter-spacing:.2em;
 text-transform:uppercase;color:var(--accent);cursor:default}
.coinname{font-size:25px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.speclbl{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
 color:var(--accent);margin:20px 0 0}
.specline{margin-top:11px}
.specline dt{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--hint)}
.specline dd{margin-top:4px;font-size:15.5px;font-weight:500;letter-spacing:.02em;color:var(--ink2);
 font-variant-numeric:tabular-nums}

/* ---- controls: text with a brass underline ------------------------------ */
.fields{gap:15px;margin-top:22px}
.field{gap:8px 22px}
.seg{gap:22px}
.seg button{font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--hint)}
.seg button:hover{color:var(--muted)}
.seg button[aria-pressed=true]{color:var(--disp)}
.seg button::after{background:var(--accent)}
/* closes the card, under everything it qualifies */
.fieldnote{font-family:var(--txt);font-size:13px;color:var(--hint);line-height:1.55;
 margin:20px 0 0;padding-top:15px;box-shadow:inset 0 1px 0 var(--line)}
.addbar{margin-top:20px}
.btn{background:var(--accent);color:var(--onink);border-radius:999px;padding:12px 26px;
 font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.btn:hover{background:var(--disp)}
.btn.ghost{background:transparent;color:var(--hint);box-shadow:none;padding:0;border-radius:0;
 font-size:10.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase}
.btn.ghost:hover{color:var(--muted);transform:none;box-shadow:none}
.addhint{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:.03em}
.amtsep{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:.03em;white-space:nowrap}
/* The custom piece's own fields sit above the quantity question, in the same
   label column, so the card reads as one form rather than two. */
.customfields{gap:15px;margin:14px 0 0}
.customfields .amtqty{flex:0 1 150px}
.customfields .amtbag select{width:118px}
.amtbag select{font-size:19px;padding-left:13px}

/* ---- ledger: stamped rows ----------------------------------------------- */
.ledgerlines{margin-top:30px}
.ledgerhead{margin-bottom:14px;padding:0 32px}
.ledgerhead h2{margin:0;font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.linehead{padding:0 32px 10px;font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--hint)}
.line{padding:13px 32px;border-radius:14px}
.line:hover{background:var(--panel)}
.lqty{font-size:18px;font-weight:500;color:var(--disp);letter-spacing:.01em}
.lname{font-size:15px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
 line-height:1.15}
.lmeta{font-size:12.5px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;
 color:var(--muted);line-height:1.15}
.loz{font-size:13px;font-weight:400;color:var(--hint);letter-spacing:.02em;line-height:1.15}
.lmelt{font-size:18.5px;font-weight:500;letter-spacing:.01em}
.lrm{color:var(--hint);font-size:17px}
.lrm:hover{color:var(--bad)}
.lot-empty,.savenote{font-family:var(--txt);font-size:12px;color:var(--hint);padding:14px 32px 0}

/* ---- summary ------------------------------------------------------------ */
.tabs{margin-bottom:26px;gap:24px}
.tabs button{font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--hint)}
.tabs button:hover{color:var(--muted)}
.tabs button[aria-selected=true]{color:var(--disp)}
.tabs button::after{background:var(--accent)}
.big{font-size:44px;font-weight:500;letter-spacing:.006em;line-height:1;margin:9px 0 7px;
 color:var(--disp);font-variant-numeric:tabular-nums}
.big.good{color:var(--good)}.big.bad{color:var(--bad)}
.bigsub{font-size:11px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--hint);margin-bottom:22px}
.stats{gap:13px}
.stats div{font-size:14px;letter-spacing:.03em}
.stats dt{color:var(--muted);font-weight:400}
.stats dd{font-size:16.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.hint,.deal-empty{font-family:var(--txt);font-size:13px;color:var(--hint);margin-top:26px;line-height:1.6}
.dealinputs{padding-bottom:26px}
.askfield{margin-top:12px}
.appcta{margin:22px 0 10px}
.appnote{color:var(--muted);font-size:14px}
/* A dealer quotes "18 times face" or "$25 an ounce" as often as a total, so
   the unit is part of the input rather than something to convert first. */
.askunit{gap:18px;margin:10px 0 12px}
.askunit button[hidden]{display:none}
.askecho{font-family:var(--txt);font-size:12.5px;color:var(--muted);margin:10px 0 0;min-height:1.5em}
.askecho b{font-weight:400;color:var(--ink2)}
.pill{font-size:9.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.pill.good{color:var(--good)}.pill.bad{color:var(--bad)}
/* The broad middle: an ordinary price is neither a win nor an alarm. */
.pill.ok{color:var(--ink2)}
.big.ok,.dealline.ok strong{color:var(--disp)}
.dealline strong{font-size:38px;font-weight:500;font-variant-numeric:tabular-nums}
.dealline.good strong{color:var(--good)}.dealline.bad strong{color:var(--bad)}

/* ---- prose, banner, foot ------------------------------------------------ */
.prose{max-width:60ch;margin-top:0}
.prose p{font-family:var(--txt);color:var(--muted);font-size:16px;line-height:1.75}
.appbanner{grid-template-columns:1fr 258px;gap:40px;align-items:center;margin:70px 0 0;padding:42px;
 border-radius:24px;background:var(--panel);box-shadow:var(--card)}
.appbanner .top img{width:28px;height:28px;border-radius:8px}
.appbanner .top span{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--hint)}
.appbanner h2{font-size:28px;margin:15px 0 10px;color:var(--ink);letter-spacing:.01em}
.appbanner h2 em{font-style:normal;color:var(--disp)}
.appbanner p{font-family:var(--txt);color:var(--muted);font-size:15.5px;max-width:44ch}
.appbanner ul{font-size:15px;font-weight:400;color:var(--ink2);letter-spacing:.03em}
.appbanner li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);
 margin-top:10px;flex:0 0 auto}
.badges a{padding:12px 24px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
 text-transform:uppercase;background:var(--accent);color:var(--onink)}
.badges a:hover{background:var(--disp)}
.badges a.alt{background:var(--track);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
.badges a.alt:hover{color:var(--ink2)}
.appbanner .free{font-family:var(--txt);font-size:11.5px;color:var(--hint);margin-top:18px}
.site-foot{margin-top:72px;padding:44px 0 56px;color:var(--hint);font-size:13px;
 box-shadow:inset 0 1px 0 var(--line)}
.footgrid{grid-template-columns:1.7fr 1fr 1fr 1fr}
.footcol h3{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.footcol a{color:var(--muted);padding:5px 0;font-size:14.5px;letter-spacing:.04em}
.footcol a:hover{color:var(--disp)}
.footbase{margin-top:40px;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.footbase a{color:var(--hint);margin-left:18px}
/* Phones. Sizes step DOWN from desktop — an earlier version of this block
   set them larger, which is how the mobile layout ended up shoutier than the
   desktop one. Text-only controls also get a real touch target here: a 20px
   tall word is fine for a cursor and useless for a thumb. */
@media(max-width:880px){
 .calc-grid{gap:30px}
 h1{font-size:26px}
 .lede{font-size:14px}
 h2{font-size:19px}
 main.wrap>h2{margin-top:32px}
 .big{font-size:32px}
 .inp,.combo input,.coinname{font-size:19px}
 .combo input{padding-left:42px;padding-right:46px}
 .combo input::placeholder{font-size:14.5px}
 .combo-icon{left:14px;width:17px;height:17px}
 .combo .caret{right:8px;width:27px;height:27px}
 .combo li[role=option]{padding-left:30px}
 .combo .subhead{padding-left:18px}
 .combo li .dp{display:none}
 .combo li .d{gap:0}
 .combo li .doz{width:78px}
 /* The bag row must fit one line even at 360px, or picking Bags reflows the
    card. Budget there is ~288px of card interior. */
 .amtrow{gap:10px}
 .amtqty{min-width:70px}
 .amtbag{gap:8px}
 .amtbag select{font-size:16px;padding-left:11px;padding-right:28px;background-position:right 10px center}
 .amtsep{font-size:12.5px}
 /* "Adds $60,760.80 · 1,125.200 oz" is three times the length of the count
    equivalent, so it wraps and the bar grows. Give it its own line with room
    for two, and the bar is the same height whatever the mode. */
 .addbar{gap:12px}
 .addhint{flex:1 1 100%;min-height:2.9em}
 .market .inp,.market .cur{font-size:20px}
 .money .cur{font-size:19px}
 .money .cur.mult{font-size:23px}
 .market .inp{width:76px}
 .calc-in{padding:18px}
 .calc-out{padding-top:20px}
 .speclbl{margin-top:16px}
 .specline{gap:12px 22px}
 .specline dd{font-size:13.5px}
 .appbanner{padding:24px;margin-top:40px}
 .stats dd{font-size:14.5px}

 .seg{gap:16px}
 .seg button{padding:11px 0}
 .seg button::after{bottom:8px}
 .tabs{gap:20px}
 .tabs button{padding:11px 0 12px}
 .btn{padding:13px 24px;font-size:12px}
 .btn.ghost{padding:11px 0}
 .fields{gap:16px;margin-top:18px}
 .field{grid-template-columns:1fr;gap:7px}
 .lrm{flex:0 0 34px;height:34px;font-size:19px}
 .line{padding-left:14px;padding-right:14px}
 .linehead,.ledgerhead,.lot-empty,.savenote{padding-left:14px;padding-right:14px}
 .changecoin{padding:8px 0}

 /* vertical rhythm: a phone has a third of the height, so the opener gets a
    third of the air */
 .crumbs{margin-top:16px}
 h1{margin:8px 0 10px}
 .lede{margin-bottom:18px}
 .market{margin-bottom:18px}
 .addbar{margin-top:20px}
 .ledgerlines{margin-top:24px}
 .prose{margin-top:0}
}

/* ======================================================================
   Pages the mixed-lot screen doesn't exercise: home, the coin price
   board, country pages, coin pages. Same Foundry vocabulary throughout —
   soot panel, brass accent, Oswald caps for anything that acts as a label.
   ====================================================================== */

/* ---- calculator on non-lot pages ---------------------------------------- */
.calc:not(.lot) .calc-out{padding:24px 0 0}
.coinhead{margin-bottom:4px}
.coinrow{margin-bottom:2px}
.changecoin{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
 color:var(--muted);text-decoration:none;flex:0 0 auto;padding:6px 13px;border-radius:999px;
 box-shadow:inset 0 0 0 1px var(--chip)}
.changecoin::after{content:" \203A";color:var(--accent)}
.changecoin:hover{color:var(--disp);box-shadow:inset 0 0 0 1px var(--accent)}
.seg.full{gap:22px}
select.inp{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6155' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 14px center;background-size:10px 6px}
.verdict-note{font-family:var(--txt);font-size:12px;color:var(--hint);margin:0;line-height:1.6}

/* ---- card grid: browse by country, other coins -------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px;margin:0 0 10px}
.cards a{display:block;padding:18px 20px;border-radius:14px;background:var(--panel);
 text-decoration:none;color:var(--ink);box-shadow:var(--card);
 transition:background-color .2s cubic-bezier(.2,.7,.3,1),transform .22s cubic-bezier(.2,.7,.3,1)}
.cards a:hover{background:#282419;transform:translateY(-2px)}
.cards b{display:block;font-size:17px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.cards span{display:block;margin-top:5px;font-size:13.5px;font-weight:400;letter-spacing:.04em;color:var(--muted)}

/* ---- coin page: what it works out to ------------------------------------- */
.qty-table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 10px;max-width:560px}
.qty-table th{text-align:left;font-size:10px;font-weight:500;letter-spacing:.13em;
 text-transform:uppercase;color:var(--hint);padding:0 0 10px;white-space:nowrap}
.qty-table th.num,.qty-table td.num{text-align:right}
.qty-table td{padding:12px 0;box-shadow:inset 0 -1px 0 var(--line);font-size:15px;
 letter-spacing:.03em;color:var(--ink2);font-variant-numeric:tabular-nums}
.qty-table td:first-child{color:var(--muted)}
.qty-table td.melt{font-size:17px;font-weight:500;color:var(--disp)}
.qty-foot{font-family:var(--txt);font-size:12.5px;color:var(--hint);margin-top:12px}
.twins{font-family:var(--txt);font-size:15px;color:var(--muted)}
.twins a{color:var(--disp);text-decoration:none}
.twins a:hover{text-decoration:underline}

/* ---- coin page: key dates ----------------------------------------------- */
.keydates{list-style:none;margin:0 0 14px;padding:0}
.keydates li{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:13px 0;
 box-shadow:inset 0 -1px 0 var(--line)}
.kd-date{order:1;flex:0 0 auto;font-size:18px;font-weight:500;color:var(--disp);letter-spacing:.02em}
.kd-tag{order:2;flex:0 0 auto;font-size:9.5px;font-weight:500;letter-spacing:.17em;
 text-transform:uppercase;padding:3px 9px;border-radius:999px;
 background:var(--chip);color:var(--ink2)}
.kd-key{background:var(--accent);color:var(--onink)}
.kd-note{order:3;flex:1 1 100%;font-family:var(--txt);font-size:14.5px;color:var(--muted);line-height:1.6}
.kd-foot{font-family:var(--txt);font-size:13.5px;color:var(--hint);max-width:60ch;line-height:1.65}

/* ---- coin price board ---------------------------------------------------- */
.board{margin-top:6px}
.board .market{margin-bottom:22px}
.filter{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.filter input{flex:1 1 auto;min-width:0;font:inherit;font-size:17px;font-weight:400;
 letter-spacing:.03em;color:var(--ink);background:var(--panel);border:0;border-radius:12px;
 padding:12px 16px;transition:box-shadow .2s cubic-bezier(.2,.7,.3,1)}
.filter input::placeholder{color:var(--hint)}
.filter input:focus{outline:0;box-shadow:inset 0 0 0 1px var(--chip)}
.filter input::-webkit-search-cancel-button{-webkit-appearance:none}
.filter .count{flex:0 0 auto;font-size:10.5px;font-weight:500;letter-spacing:.15em;
 text-transform:uppercase;color:var(--hint);white-space:nowrap}
.board-country{margin-bottom:44px}
.board-country>h2{font-size:25px;margin:0 0 6px}
.board-group{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
 color:var(--accent);margin:30px 0 8px}
.board-country>h2+.board-group{margin-top:20px}
.board-country>h2 span{font-size:10.5px;font-weight:500;letter-spacing:.17em;
 text-transform:uppercase;color:var(--hint);margin-left:12px;vertical-align:middle}
/* Fixed columns so every denomination table in a country lines up, and the
   header is stated once per country rather than once per table. */
.board-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.board-table th:nth-child(1),.board-table td:nth-child(1){width:33%}
.board-table th:nth-child(2),.board-table td:nth-child(2){width:16%}
.board-table th:nth-child(3),.board-table td:nth-child(3){width:11%}
.board-table th:nth-child(4),.board-table td:nth-child(4){width:14%}
.board-table th:nth-child(5),.board-table td:nth-child(5){width:16%}
.board-table th:nth-child(6),.board-table td:nth-child(6){width:10%}
.board-country .board-table:not(:first-of-type) thead{display:none}
.board-country .board-table:not(:first-of-type) .board-group{margin-top:30px}
.board-table th{text-align:left;font-size:10px;font-weight:500;letter-spacing:.13em;
 text-transform:uppercase;color:var(--hint);padding:0 12px 10px;white-space:nowrap}
.board-table th.num{text-align:right}
.board-table td{padding:13px 12px;box-shadow:inset 0 -1px 0 var(--line);vertical-align:baseline}
.board-table tr{transition:background-color .2s cubic-bezier(.2,.7,.3,1)}
.board-table tbody tr:hover td{background:var(--panel)}
.board-table td:first-child,.board-table th:first-child{padding-left:16px}
.board-table td:last-child,.board-table th:last-child{padding-right:16px}
.cname a{font-size:15px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
 color:var(--ink);text-decoration:none}
.cname a:hover{color:var(--disp)}
.cyears{font-size:13.5px;font-weight:400;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.board-table .num{text-align:right;font-size:15px;font-weight:400;color:var(--muted);
 font-variant-numeric:tabular-nums;white-space:nowrap}
.board-table .melt{font-size:17px;font-weight:500;color:var(--disp)}
.golink{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
 color:var(--hint);text-decoration:none}
.golink:hover{color:var(--disp)}

/* ---- footer brand block -------------------------------------------------- */
.footbrand p{font-family:var(--txt);font-size:14px;color:var(--hint);margin:14px 0 0;
 max-width:34ch;line-height:1.65}

@media(max-width:880px){
 .calc-grid{grid-template-columns:1fr}
 .cards{grid-template-columns:1fr}
 .board-table,.board-table tbody,.board-table tr,.board-table td{display:block;width:100%}
 /* Those display rules beat the UA sheet's [hidden]{display:none}, which is
    how the filter hides rows — without this the filter counted matches and
    hid nothing on every phone. */
 .board-table[hidden],.board-table tr[hidden],.board-country[hidden],
 .board-group[hidden]{display:none}
 .board-table thead{display:none}
 .board-table tr{padding:14px 16px;margin-bottom:8px;border-radius:14px;background:var(--panel)}
 .board-table tbody tr:hover td{background:transparent}
 .board-table td{padding:3px 0;box-shadow:none;display:flex;justify-content:space-between;gap:14px}
 .board-table td:first-child,.board-table td:last-child{padding-left:0;padding-right:0}
 .board-table td.num::before{content:attr(data-label);font-size:9.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--hint)}
 .board-country>h2{font-size:19px}
 .board-country{margin-bottom:30px}
 .filter{margin-bottom:24px}
 .board-group{margin:22px 0 8px}
 .keydates li{padding:12px 0}
 .kd-note{font-size:13px}
 /* the whole stacked row is the tap target, not just the coin name */
 .board-table tr{padding:14px}
 .cname a{display:block;padding:2px 0}
 .golink{display:block;padding:6px 0}
}

/* ======================================================================
   Narrow screens. The header is the only thing that needs a different
   shape rather than different numbers: the nav moves under the wordmark
   and scrolls sideways instead of being crushed.
   ====================================================================== */
@media(max-width:880px){
 .wrap{padding:0 18px}
 .site-head .top{flex-wrap:wrap;gap:12px;padding-block:14px}
 .brand i{display:none}
 .site-head .top nav{margin-left:0;width:100%;gap:20px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .site-head .top nav::-webkit-scrollbar{display:none}
 .site-head .top nav a{font-size:11.5px;white-space:nowrap;padding:2px 0}
 .site-head .top nav a[aria-current]::after{bottom:-3px}
 /* the desktop column widths must not survive into the stacked rows */
 .board-table td:nth-child(1),.board-table td:nth-child(2),.board-table td:nth-child(3),
 .board-table td:nth-child(4),.board-table td:nth-child(5),.board-table td:nth-child(6){width:auto}
 .footgrid{grid-template-columns:1fr 1fr;gap:26px}
 .footbrand{grid-column:1/-1}
 .appbanner{grid-template-columns:1fr}
 .appbanner .art{display:none}
 .market{margin-bottom:28px}
 .mmeta{margin-left:0;flex:1 1 100%}
}
@media(max-width:560px){
 .footgrid{grid-template-columns:1fr}
}


/* ---- lot page: three columns ------------------------------------------- */
/* The ledger used to sit under the input panel, which pushed it below the
   fold on a laptop — you added a coin and couldn't see it land. At desk
   widths the three parts sit side by side instead: enter a coin, watch the
   line appear, read the total. This page is a tool rather than a reading
   column, so it gets a wider measure than the 1120px used everywhere else. */
.wrap.wide{max-width:1400px}

/* Without a divider these read as the single phrase "COPY LINK CLEAR". */
.ledgeracts{display:flex;align-items:center;gap:0}
.ledgeracts .btn.ghost{padding:0 12px}
.ledgeracts .btn.ghost:last-child{padding-right:0}
.ledgeracts .btn.ghost+.btn.ghost{border-left:1px solid var(--line)}
.sharednote{font-family:var(--txt);font-size:12.5px;line-height:1.5;color:var(--hint);
 background:var(--panel);border-radius:12px;padding:11px 16px;margin:0 0 16px}
.sharednote[hidden]{display:none}
.linkish{border:0;background:transparent;padding:0;cursor:pointer;font:inherit;
 color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.linkish[hidden]{display:none}

/* The ledger sat on bare page beside the equally-bare summary column, so the
   two ran together. It gets the theme's recessed surface rather than the
   raised one used for inputs: you don't type into the ledger, but it is a
   container holding your lines — neither a control panel nor a readout. A
   hairline ring rather than a drop shadow keeps it crisp instead of adding a
   second floating card next to .calc-in. Cosmetic only; the grid placement
   lives further up, above the mobile reset. */
.lot .ledgerlines{background:var(--track);border-radius:18px;padding:22px 6px;
 box-shadow:inset 0 0 0 1px var(--line)}
/* 32px of gutter was sized for a full-width ledger, not a column. */
.lot .ledgerhead,.lot .linehead,.lot .lot-empty,.lot .savenote{padding-left:18px;padding-right:18px}
.lot .line{padding-left:18px;padding-right:18px}

/* Between tablet and 1200px there isn't room for three, so fall back to the
   original two-column arrangement. Bounded at the bottom by 881px because the
   880px rules live earlier in the file and would otherwise be overridden. */
@media(max-width:1199px) and (min-width:881px){
  .lot .calc-grid{grid-template-columns:1fr 330px;gap:0 60px}
  .lot .calc-in{grid-column:1;grid-row:1}
  .lot .ledgerlines{grid-column:1;grid-row:2;margin-top:30px;padding:24px 6px}
  .lot .calc-out{grid-column:2;grid-row:1/span 2;padding-top:24px}
  .lot .ledgerhead,.lot .linehead,.lot .lot-empty,.lot .savenote{padding-left:32px;padding-right:32px}
  .lot .line{padding-left:32px;padding-right:32px}
}