/* Layout: the myth versus reality first, then the 15-step journey (phase rail, illustration, facts),
   the kiln chart, and the timeline builder. Palette follows the JewelLoop site; kiln heat uses gold to ruby. */
:root {
  --paper: #ffffff;
  --ink: #16161a;
  --ink-soft: #3d3d45;
  --muted: #6b6b75;
  --rule: #e4e2de;
  --mist: #f4f3f1;
  --ruby: #9b1b30;
  --gold: #b8892f;
  --wait: #c9c5bc;
  --machine: #b8892f;
  --work: #9b1b30;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="dark"] {
  --paper: #121216; --ink: #f1efe9; --ink-soft: #c9c6bf; --muted: #9a978f; --rule: #2c2c33; --mist: #1b1b21;
  --ruby: #e0566c; --gold: #e1b25a; --wait: #4a4a52; --machine: #e1b25a; --work: #e0566c; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
a { color: var(--ink); text-decoration-color: var(--ruby); text-underline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 48px; display: grid; gap: 28px; }
header.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ruby); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; flex: none; width: 4px; height: 15px; background: var(--gold); clip-path: polygon(0 24%, 100% 0, 100% 76%, 0 100%); }
h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.03; letter-spacing: -.01em; margin: 6px 0 0; text-wrap: balance; }
h2.sec { font-family: var(--font-display); font-weight: 500; font-size: 28px; margin: 0; line-height: 1.1; text-wrap: balance; }
.lede { max-width: 56ch; color: var(--ink-soft); margin: 0; }
.prototype { font-size: 12px; color: var(--muted); border: 1px solid var(--rule); padding: 4px 10px; white-space: nowrap; }
p.copy { margin: 0; color: var(--ink-soft); max-width: 66ch; }
.mini { font: 600 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--ink-soft); }
section.study { border-top: 1px solid var(--ink); padding-top: 18px; display: grid; gap: 16px; }

/* myth vs reality */
.myth { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 12px; align-items: center; }
@media (max-width: 560px) { .bar-row { grid-template-columns: 1fr; gap: 4px; } }
.bar-row .label { font-size: 14px; font-weight: 600; }
.bar-row .label small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.track { position: relative; height: 34px; background: var(--mist); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: max-content; display: flex; align-items: center; padding-inline: 10px; font: 500 13px var(--font-data); color: var(--paper); white-space: nowrap; transition: width .6s ease; }
.fill.myth-fill { background: var(--muted); }
.fill.real-fill { background: var(--ruby); }
.bigline { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); margin: 4px 0 0; max-width: 34ch; text-wrap: balance; }

/* journey */
.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 700px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.phase { padding: 8px 0 10px; border-top: 3px solid var(--rule); }
.phase.active { border-top-color: var(--ruby); }
.phase .ph-name { font: 600 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.steps { display: flex; flex-wrap: wrap; gap: 4px; }
.step { width: 30px; height: 30px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 600 12px var(--font-data); cursor: pointer; }
.step[aria-current="step"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.step.done { border-color: var(--ink); }
.step:focus-visible, .navbtn:focus-visible, .seg button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ruby); outline-offset: 2px; }
.stage-view { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .stage-view { grid-template-columns: 1fr; } }
.art { background: var(--mist); aspect-ratio: 4 / 3; width: 100%; max-width: 100%; display: block; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.art .ink { stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.art .thin { stroke: var(--ink-soft); fill: none; stroke-width: 1.2; }
.art .accent { stroke: var(--ruby); fill: none; stroke-width: 2.2; }
.art .gold { fill: var(--gold); }
.art .goldline { stroke: var(--gold); fill: none; stroke-width: 2.2; }
.art .paperfill { fill: var(--paper); }
.art .mistfill { fill: var(--wait); opacity: .55; }
.art .rubyfill { fill: var(--ruby); }
.art text { fill: var(--muted); font: 500 13px var(--font-body); }
.facts { display: grid; gap: 12px; min-width: 0; }
.step-no { font: 500 13px var(--font-data); color: var(--ruby); margin: 0; }
.step-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; margin: 0; line-height: 1.05; }
.what { margin: 0; color: var(--ink-soft); }
.times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.times div { padding: 8px 10px; background: var(--mist); min-width: 0; }
.times dt { font-size: 12px; color: var(--muted); }
.times dd { margin: 2px 0 0; font: 500 14px var(--font-data); }
.times .k-work { border-top: 3px solid var(--work); } .times .k-machine { border-top: 3px solid var(--machine); } .times .k-wait { border-top: 3px solid var(--wait); }
.risk, .tip { margin: 0; padding: 8px 12px; font-size: 14px; }
.risk { border-left: 3px solid var(--ruby); background: var(--mist); }
.tip { border-left: 3px solid var(--gold); background: var(--mist); }
.risk strong, .tip strong { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.nav { display: flex; gap: 8px; }
.navbtn { font: 600 13px var(--font-body); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: 7px 14px; cursor: pointer; }
.navbtn:disabled { opacity: .35; cursor: default; }

/* kiln */
.kiln { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .kiln { grid-template-columns: 1fr; } }
#kilnChart { width: 100%; height: auto; display: block; background: var(--mist); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 18px; height: 3px; display: inline-block; }
.legend i.box { height: 12px; width: 12px; }

/* builder */
.builder { display: grid; gap: 20px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); align-items: start; }
@media (max-width: 960px) { .builder { grid-template-columns: 1fr; } }
.controls { display: grid; gap: 14px; min-width: 0; }
.field { display: grid; gap: 5px; }
.field label, .field .lab { font-size: 13px; font-weight: 600; }
.field .help { font-size: 12px; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: 500 13px var(--font-body); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 6px 10px; cursor: pointer; }
.seg button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input[type="number"], select { font: 500 14px var(--font-data); padding: 6px 8px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); width: 100%; border-radius: 0; }
input[type="range"] { width: 100%; accent-color: var(--ruby); }
details.workshop { border: 1px solid var(--rule); padding: 8px 12px; }
details.workshop summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.workshop .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.result { display: grid; gap: 12px; min-width: 0; }
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .summary { grid-template-columns: 1fr; } }
.summary div { background: var(--mist); padding: 10px 12px; min-width: 0; }
.summary dt { font-size: 12px; color: var(--muted); }
.summary dd { margin: 2px 0 0; font: 500 24px var(--font-data); font-variant-numeric: tabular-nums; }
.summary dd small { font-size: 13px; color: var(--muted); }
.ganttwrap { overflow-x: auto; }
#gantt { display: block; min-width: 640px; width: 100%; height: auto; }
#gantt text { font: 500 12px var(--font-body); fill: var(--ink-soft); }
#gantt .tick { font: 500 12px var(--font-data); fill: var(--muted); }
.insight { margin: 0; font-size: 15px; border-left: 3px solid var(--ruby); padding: 8px 12px; background: var(--mist); }
.sources { font-size: 13px; color: var(--ink-soft); display: grid; gap: 4px; padding-left: 18px; margin: 0; }
footer.note { font-size: 12px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; max-width: 95ch; }
@media (prefers-reduced-motion: reduce) { .fill { transition: none; } .art * { animation: none !important; } }
@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes drip { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }
@keyframes bubble { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(-60px); opacity: 0; } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.anim-rise { transform-origin: bottom; animation: rise 3.5s ease-in-out infinite alternate; transform-box: fill-box; }
.anim-drip { animation: drip 1.6s linear infinite; transform-box: fill-box; }
.anim-bubble { animation: bubble 2.2s ease-in infinite; transform-box: fill-box; }
.anim-glow { animation: glow 2.4s ease-in-out infinite; }
/* jewelloop.net: one column that never grows wider than the screen */
.wrap { grid-template-columns: minmax(0, 1fr); }
.jl-table-scroll { overflow-x: auto; max-width: 100%; }
/* shown once the page's script has run (static/visual/ready.js): no jump while loading */
html:not(.jl-ready) .wrap { visibility: hidden; }

/* On jewelloop.net the page around it shows the title and the introduction. */
header.top { display: none !important; }