/* Debasement Basement — shared layout for every page except the homepage.
   Hand-written on purpose (Sep 27, 2026): site.css is compiled by
   tools/build-css.py and only contains classes it finds in the source, so a
   rule here can never silently fail to exist. See CLAUDE.md §6.

   Four things live here:
     1. .site-hd      the one header used on all inner pages
     2. .rp / .rp-*   the reading-order block at the foot of every article
     3. .art-layout   article + sticky side rail on wide screens
     4. .tool-split   inputs and result side by side on wide screens
   Phones (<1024px) keep the single-column layout for 3 and 4. */

/* ---------- 1. Header ---------- */
.site-hd{background:#1B2027;border-bottom:1px solid #333C47;}
.site-hd__in{max-width:1100px;margin:0 auto;padding:.75rem 1.25rem 0;
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand cta" "nav nav";
  align-items:center;column-gap:1rem;row-gap:.55rem;}
.site-hd__brand{grid-area:brand;display:flex;align-items:center;gap:.6rem;min-width:0;}
.site-hd__brand span{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:1.12rem;
  color:#F7F4EE;line-height:1;white-space:nowrap;}
.site-hd__cta{grid-area:cta;}
.site-hd__brand svg{flex-shrink:0;}
/* Narrow phones (Oct 3, 2026): at 320px the wordmark was clipped to "Debasement Basemen"
   and the logo square was squeezed to nothing. The wordmark now scales with the screen
   (it is ~9.7 times its font size wide), never above its normal size. */
@media (max-width:419px){
  .site-hd .site-hd__in{padding-left:.875rem;padding-right:.875rem;column-gap:.625rem;}
  .site-hd .site-hd__brand{gap:.5rem;}
  .site-hd .site-hd__brand span{font-size:min(1.12rem, calc((100vw - 172px) / 9.7));}
  .site-hd .site-hd__cta{padding-left:.75rem;padding-right:.75rem;}
}
@media (max-width:309px){
  .site-hd .site-hd__brand svg{display:none;}
  .site-hd .site-hd__brand span{font-size:calc((100vw - 138px) / 9.7);}
}
.site-hd__nav{grid-area:nav;display:flex;gap:.4rem;border-top:1px solid #333C47;margin:0 -.6rem;}
.site-hd__nav a{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;font-weight:600;color:#B8BCC2;min-height:44px;display:inline-flex;align-items:center;
  padding:0 .6rem;}
.site-hd__nav a:hover{color:#E3C15B;}
.site-hd__nav a[aria-current]{color:#E3C15B;}
@media (min-width:768px){
  .site-hd__in{grid-template-columns:auto 1fr auto;grid-template-areas:"brand nav cta";
    padding:.75rem 2rem;}
  .site-hd__brand span{font-size:1.3rem;}
  .site-hd__nav{border-top:0;justify-content:flex-end;gap:.9rem;margin:0 .5rem 0 0;}
}

/* ---------- 2. Reading order at the foot of an article ---------- */
.rp{margin-top:3rem;border-top:2px solid #1B2027;padding-top:1.25rem;}
.rp__meta{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;font-weight:600;color:rgba(0,0,0,.5);}
.rp__meta b{color:#8A6D0F;font-weight:600;}
.rp__grid{margin-top:1rem;display:grid;gap:.75rem;}
@media (min-width:640px){.rp__grid{grid-template-columns:1fr 1fr;}}
.rp__card{display:flex;flex-direction:column;gap:.35rem;border:1px solid rgba(0,0,0,.12);
  background:#fff;border-radius:2px;padding:1rem 1.1rem;min-height:5.25rem;
  transition:border-color .15s;}
.rp__card:hover{border-color:#C9A227;}
.rp__card--next{background:#1B2027;border-color:#1B2027;}
.rp__card--next .rp__title{color:#F7F4EE;}
.rp__card--next .rp__dir{color:#E3C15B;}
.rp__card--next:only-child{grid-column:1/-1;}
@media (min-width:640px){.rp__card--next{text-align:right;}}
.rp__dir{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.66rem;font-weight:600;color:#8A6D0F;}
.rp__title{font-family:Newsreader,Georgia,serif;font-weight:700;font-size:1.15rem;
  line-height:1.25;color:#1B2027;}
.rp__all{display:inline-block;margin-top:1rem;font-family:Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;font-weight:600;color:#8A6D0F;padding:.4rem 0;}

/* The tool box under an article, pointing at one specific tool */
.try-tool{display:block;margin-top:3rem;border:2px solid #C9A227;background:#fff;border-radius:2px;
  padding:1.25rem 1.35rem;transition:background .15s;}
.try-tool:hover{background:#FBF7EA;}
.try-tool__k{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.66rem;font-weight:600;color:#8A6D0F;}
.try-tool__t{display:block;margin-top:.35rem;font-family:Newsreader,Georgia,serif;font-weight:700;
  font-size:1.3rem;line-height:1.2;color:#1B2027;}
.try-tool__p{display:block;margin-top:.4rem;font-size:.97rem;line-height:1.6;color:rgba(0,0,0,.72);}
.try-tool__go{display:block;margin-top:.7rem;font-family:Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;font-weight:600;color:#8A6D0F;}

/* ---------- 3. Article + side rail ---------- */
.art-rail{display:none;}
@media (min-width:1024px){
  .art-layout{display:grid;grid-template-columns:minmax(0,68ch) 250px;
    justify-content:space-between;column-gap:3rem;}
  .art-layout > nav[aria-label="Breadcrumb"]{grid-column:1/-1;}
  .art-layout > article{grid-column:1;}
  .art-rail{display:block;grid-column:2;grid-row:2;align-self:start;position:sticky;top:1.5rem;
    margin-top:1.6rem;max-height:calc(100vh - 3rem);overflow-y:auto;padding-bottom:1rem;}
}
.art-rail__h{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.66rem;font-weight:600;color:rgba(0,0,0,.5);border-bottom:2px solid #1B2027;
  padding-bottom:.45rem;}
.art-rail ol{margin-top:.6rem;counter-reset:rp;}
.art-rail li{counter-increment:rp;display:grid;grid-template-columns:1.6rem 1fr;
  font-size:.86rem;line-height:1.35;padding:.32rem 0;}
.art-rail li::before{content:counter(rp,decimal-leading-zero);font-family:"JetBrains Mono",monospace;
  font-size:.72rem;color:rgba(0,0,0,.38);padding-top:.1rem;}
.art-rail li a{color:rgba(27,32,39,.78);}
.art-rail li a:hover{color:#8A6D0F;text-decoration:underline;text-underline-offset:2px;}
.art-rail li[aria-current]{font-weight:700;color:#1B2027;}
.art-rail li[aria-current]::before{color:#8A6D0F;}
.art-rail__part{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:.6rem;font-weight:600;color:#8A6D0F;margin-top:.7rem;display:block;}
.art-rail__tool{display:block;margin-top:1.25rem;background:#1B2027;border-radius:2px;padding:1rem;}
.art-rail__tool span{display:block;}
.art-rail__tool .k{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.6rem;font-weight:600;color:#E3C15B;}
.art-rail__tool .t{margin-top:.35rem;font-family:Newsreader,Georgia,serif;font-weight:700;
  font-size:1.02rem;line-height:1.25;color:#F7F4EE;}
.art-rail__tool:hover .t{color:#E3C15B;}

/* ---------- 4. Tools: inputs and result side by side on wide screens ---------- */
@media (min-width:1024px){
  .tool-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.75rem;
    align-items:start;}
  .tool-split > section{margin-top:0;}
  .tool-split > .tool-out{position:sticky;top:1.25rem;}
  .tool-split > .tool-out > section{margin-top:0;}
  /* Grids designed for a full-width panel collapse to one column in a half-width one */
  .tool-split .sm\:grid-cols-2{grid-template-columns:minmax(0,1fr);}
}
@media (min-width:1024px){.tool-split{margin-top:2.25rem;}}
/* On a phone the cards stack; the way forward goes first */
@media (max-width:639px){.rp__card--next{order:-1;}}

/* A bigger touch area for small text links, without moving anything: the padding
   grows the hit box, the negative margin gives the space back (Sep 27, 2026). */
.tap{display:inline-block;padding:.75rem 0;margin:-.75rem 0;}
/* Salary presets were 20px tall; the other tools' chips are 34-38px. */
#salaryPicks button{min-height:38px;}
/* A figure at a field's ceiling, in yen, is wider than a phone card. Let an extreme number
   wrap inside the card instead of spilling past its edge; ordinary figures never wrap. */
#card [id^="out"]{overflow-wrap:anywhere;}
/* silver-quarter's figures sit beside their labels in a row: a figure too long for the
   row drops onto its own line first, and only then breaks. At ordinary values the row is
   exactly as before. */
#card .flex:has(> [id$="Out"]){flex-wrap:wrap;column-gap:.75rem;}
#card .flex > [id$="Out"]{overflow-wrap:anywhere;max-width:100%;}
/* Never on the footer line: the domain is the attribution a screenshot carries. */

/* Utilities the pages use but build-css.py does not generate (found Sep 27, 2026 by
   checking its UNHANDLED list against this file). Without these, bulleted lists showed no
   bullets and a few links lost their gold underline. */
.list-disc{list-style:disc;}
.whitespace-nowrap{white-space:nowrap;}
.decoration-gold\/50{text-decoration-color:rgba(201,162,39,.5);}
.hover\:decoration-gold:hover{text-decoration-color:#C9A227;}
.accent-gold-ink{accent-color:#8A6D0F;}

/* --- Article navigation, Oct 3, 2026 ------------------------------------------
   The strip under the byline, and the end cards as a left/right pair on every
   screen (they used to stack on phones with Next first). Later rules here
   deliberately override the earlier .rp__ ones. */
.art-strip{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:1.1rem;
  padding:.35rem;border:1px solid rgba(27,32,39,.12);border-radius:999px;background:#EFEBE2;}
.art-strip__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:#1B2027;color:#E3C15B;font-size:1.2rem;line-height:1;transition:background .2s;}
.art-strip__btn:hover,.art-strip__btn:focus-visible{background:#2E3744;}
.art-strip__btn.is-off{background:transparent;color:rgba(27,32,39,.28);border:1px dashed rgba(27,32,39,.22);}
.art-strip__mid{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .5rem;
  font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:rgba(27,32,39,.72);text-align:center;}
.art-strip__mid b{color:#6E5310;font-weight:700;}
.art-strip__mid:hover{color:#1B2027;}
.rp__grid{grid-template-columns:1fr 1fr;}
.rp__card--next{order:0;text-align:right;}
.rp__card--prev:only-child{grid-column:1;}
.rp__dir{display:flex;align-items:center;gap:.5rem;}
.rp__card--next .rp__dir{justify-content:flex-end;}
.rp__arr{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;
  border-radius:50%;border:1px solid currentColor;font-size:1rem;letter-spacing:0;}
.rp__card--end{background:#fff;border-color:#C9A227;}
@media (max-width:639px){
  .rp__card{padding:1rem .9rem;}
  .rp__title{font-size:1rem;}
  .rp__dir{font-size:.68rem;}
}

/* Oct 4, 2026: build-css.py does not generate list-style utilities; used by the coin checkers. */
.list-disc{list-style:disc}

/* ---------- Four header links on small phones (Guides added Oct 17, 2026) ---------- */
@media (max-width:399px){
  .site-hd__nav{gap:0;}
  .site-hd__nav a{padding:0 .45rem;letter-spacing:.1em;}
}

/* ---------- CSV download under data tables (table-csv.js, Oct 18, 2026) ---------- */
/* gold-ink text on paper (4.5:1); gold only for the border, per the contrast rule in CLAUDE.md §3. */
.csv-btn{display:inline-flex;align-items:center;min-height:44px;margin-top:.6rem;padding:0 1rem;
  border:1px solid #C9A227;border-radius:2px;background:transparent;color:#8A6D0F;
  font:600 .8rem/1 Inter,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;}
.csv-btn:hover,.csv-btn:focus-visible{background:#EFEBE2;}