/* ==========================================================================
   Sourdough Bake Archive, structure.
   carries no colour and no typeface. both themes layer on top of this, so
   any layout fix lands in both at once.

   sizing is fluid rather than stepped: type and spacing interpolate with the
   viewport via clamp(), so there are no jarring jumps at breakpoints. every
   clamp keeps a rem term in the middle so browser zoom and user font-size
   settings still work, a pure-vw scale would break both.
   ========================================================================== */

:root {
  /* type scale */
  --t-xs:  clamp(0.66rem, 0.63rem + 0.13vw, 0.74rem);
  --t-sm:  clamp(0.78rem, 0.75rem + 0.16vw, 0.88rem);
  --t-base:clamp(0.97rem, 0.93rem + 0.22vw, 1.06rem);
  --t-md:  clamp(1.06rem, 1.00rem + 0.30vw, 1.22rem);
  --t-lg:  clamp(1.30rem, 1.15rem + 0.75vw, 1.62rem);
  --t-xl:  clamp(1.85rem, 1.45rem + 2.00vw, 3.40rem);

  /* spacing scale */
  --sp-2xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.4rem);
  --sp-xs:  clamp(0.4rem,  0.33rem + 0.35vw, 0.7rem);
  --sp-sm:  clamp(0.7rem,  0.58rem + 0.6vw,  1.1rem);
  --sp-md:  clamp(1.1rem,  0.88rem + 1.1vw,  1.85rem);
  --sp-lg:  clamp(1.7rem,  1.25rem + 2.2vw,  3rem);
  --sp-xl:  clamp(2.4rem,  1.7rem + 3.4vw,   4.4rem);

  /* page gutter, tight on a phone, generous on a desktop */
  --gutter: clamp(0.95rem, 0.45rem + 2.6vw, 3rem);

  --rail-w: clamp(11rem, 9rem + 6vw, 15rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* nothing may push the page sideways. */
img, svg, table { max-width: 100%; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.7rem 1.1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

/* --- Shell: narrow rail + wide document ---------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--sp-lg);
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--gutter);
  align-items: start;
}

.rail {
  position: sticky;
  top: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  font-size: var(--t-sm);
}

.rail__id { margin: 0; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1; }
.rail__archive, .rail__conf, .rail__switch { margin: 0; }
.rail__nav ul { margin: 0; padding: 0; list-style: none; }
.rail__nav li + li { margin-top: var(--sp-2xs); }
/* comfortable tap targets on touch screens. */
.rail__nav a { display: inline-block; padding: 0.3rem 0; min-height: 1.9rem; }

.marker {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.45rem;
}

.doc { min-width: 0; }

/* --- Header -------------------------------------------------------------- */

.head { margin-bottom: var(--sp-lg); }
.head__kicker { margin: 0 0 var(--sp-xs); font-size: var(--t-xs); }
.head h1 { margin: 0 0 var(--sp-md); font-size: var(--t-xl); line-height: 1.1; }

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--sp-sm) var(--sp-md);
  margin: 0;
}
.meta > div { min-width: 0; }
.meta dt { font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; }
.meta dd { margin: 0.15rem 0 0; }

/* --- Panels -------------------------------------------------------------- */

.panel { margin: 0 0 var(--sp-xl); }
.panel > h2 {
  margin: 0 0 var(--sp-sm);
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Status chips: shape carries meaning, not just colour ---------------- */

.chip {
  display: inline-block;
  align-self: flex-start;
  padding: 0.24em 0.75em;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid;
}
.chip--outlined { background: transparent; }
.chip--dashed   { background: transparent; border-style: dashed; }
.chip--hatched  { border-style: double; border-width: 4px; }

/* --- Key figures --------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: 1px;
  margin: 0;
}
.stat { padding: var(--sp-sm) var(--sp-xs); }
.stat dt { font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase; }
.stat dd { margin: var(--sp-2xs) 0 0; font-size: var(--t-lg); line-height: 1.1; }

/* --- Formula table ------------------------------------------------------- */

.formula {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.formula caption {
  text-align: left;
  margin-bottom: var(--sp-sm);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.formula th, .formula td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.formula thead th {
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.formula .num { text-align: right; white-space: nowrap; }
.formula .note { font-size: var(--t-sm); }
.formula tfoot th, .formula tfoot td { font-weight: 700; }

.num { font-variant-numeric: tabular-nums; }

/* --- Hydration gauge ----------------------------------------------------- */

.gauge { display: grid; gap: var(--sp-sm); }
.gauge__row {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) 3.6rem;
  align-items: center;
  gap: var(--sp-xs) var(--sp-sm);
}
.gauge__label { font-size: var(--t-sm); }
.gauge__track { height: 0.85rem; display: block; }
.gauge__fill { display: block; height: 100%; }
.gauge__val { font-variant-numeric: tabular-nums; text-align: right; }
.gauge__desc {
  grid-column: 1 / -1;
  font-size: var(--t-xs);
  margin-top: -0.3rem;
}

/* --- Flags & notices ----------------------------------------------------- */

.flags { padding: var(--sp-md); margin: 0 0 var(--sp-lg); }
.flags h2 { margin: 0 0 var(--sp-xs); font-size: var(--t-sm); letter-spacing: 0.12em; text-transform: uppercase; }
.flags ul { margin: 0; padding-left: 1.1rem; }
.flags li + li { margin-top: var(--sp-xs); }

.alert { padding: var(--sp-sm); margin: var(--sp-md) 0 0; }
.hint  { font-size: var(--t-sm); margin: var(--sp-sm) 0 0; }
.empty { font-style: italic; }
.nr { font-style: italic; font-size: 0.92em; white-space: nowrap; }

/* --- Scale island -------------------------------------------------------- */

.scale__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-md);
}
.scale__controls label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.scale__controls input {
  width: 100%;
  min-width: 0;
  max-width: 9rem;
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  font: inherit;
  font-size: max(1rem, var(--t-sm));
  padding: 0.5rem 0.6rem;
}
.scale__controls button {
  padding: 0.6rem 1.1rem;
  min-height: 2.75rem;
  font: inherit;
  cursor: pointer;
}
.unit { font-size: var(--t-sm); }

.scale__list { margin: 0; padding: 0; list-style: none; }
.scale__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.2rem;
  gap: var(--sp-xs);
  padding: 0.4rem 0;
}
.scale__g { text-align: right; font-variant-numeric: tabular-nums; }
.scale__u { font-size: var(--t-sm); }
.scale__total { margin: var(--sp-sm) 0 0; font-weight: 700; }

/* --- Plot ---------------------------------------------------------------- */

.plot { margin: 0; }
.plot svg { width: 100%; max-width: 32rem; height: auto; display: block; }
.plot figcaption { margin-top: var(--sp-xs); font-size: var(--t-sm); max-width: 34rem; }
.dot--dashed  { stroke-dasharray: 2 2; }
.dot--hatched { stroke-dasharray: 4 2; }

/* --- Tags ---------------------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin: 0; padding: 0; list-style: none; }
.tags li { padding: 0.2em 0.65em; font-size: var(--t-sm); }

/* --- Footer -------------------------------------------------------------- */

.foot { margin-top: var(--sp-xl); padding-top: var(--sp-md); font-size: var(--t-sm); }
.foot p { margin: 0 0 var(--sp-xs); }

/* ==========================================================================
   narrow: rail becomes a header strip
   ========================================================================== */

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }
  .rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-xs) var(--sp-md);
    padding-bottom: var(--sp-sm);
  }
  .rail__archive { flex: 1 1 100%; }
  .rail__nav { flex: 1 1 100%; margin-top: 0; }
  .rail__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-md); }
  .rail__nav li + li { margin-top: 0; }
}

/* ==========================================================================
   phone: the formula table stops being a table and becomes a list.
   four columns cant stay readable at 360px, and a horizontal scrollbar
   hides the percentages, which are the whole point.
   ========================================================================== */

@media (max-width: 620px) {
  .formula, .formula tbody, .formula tfoot, .formula tr,
  .formula th, .formula td { display: block; width: 100%; }

  /* a table-caption inside a display:block table shrinks to fit its longest
     word - "Day one: the pot" came out one word per line at 375px. */
  .formula caption { display: block; width: 100%; }

  .formula thead { position: absolute; left: -9999px; }

  .formula tbody tr, .formula tfoot tr { padding: var(--sp-sm) 0; }

  .formula tbody th, .formula tfoot th {
    padding: 0 0 var(--sp-2xs);
    font-size: var(--t-md);
  }

  .formula td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-sm);
    padding: 0.15rem 0;
    text-align: right;
  }

  /* the stripped column header comes back as an inline label. */
  .formula td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.72;
  }

  /* an empty cell would otherwise render as a stray label. */
  .formula td:empty { display: none; }
  .formula td.note { text-align: left; }
  .formula td.note::before { display: none; }
  .formula td.note { font-style: italic; padding-top: var(--sp-2xs); }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gauge__row { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .gauge__label { grid-column: 1 / -1; }
  .gauge__track { grid-column: 1 / 2; }

  .scale__controls { gap: var(--sp-sm); }
  .scale__controls label { flex: 1 1 8rem; }
  .scale__controls button { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Print: formula on one page, status legible in greyscale ------------- */

@media print {
  .rail__nav, .skip, .scale__controls, .rail__switch { display: none; }
  .shell { display: block; max-width: none; padding: 0; }
  .panel { break-inside: avoid; margin-bottom: 1.2rem; }
  .formula { break-inside: avoid; }
  .formula thead { position: static; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
}