/* Layer rendering, the strawman guard, and the landing-page furniture.
 *
 * Emitted by theme/_includes/layout-layers.njk. See specs/decisions.md decisions 20 and
 * 22 for what these blocks are and why the t30 carries a label.
 *
 * TWO UNIT RULES, both learned the hard way — see KNOWN_CSS_BUGS_260909.md:
 *
 * 1. No `rem`. theme.css sets html{font-size:12px}, so every rem here rendered 25% small.
 *    Sizes are px.
 * 2. No `ch` for max-width. `ch` scales with the element's OWN font size, so the same
 *    `68ch` gave the h1 1190px and the t30 panel 557px — a headline at double the width
 *    of the box beneath it. One physical measure, shared by everything in the column.
 *
 * DARK MODE: .content-grid-area in themes.css is hardcoded white with no html.dark
 * override, so content always sits on white. Values here are dark-on-light with no dark
 * variant; adding one today would put white text on a white panel.
 */

html {
  /* The single column measure. Everything in the content column uses this. */
  --layer-measure: 640px;

  --layer-t30-background: #f5f7f9;
  --layer-t30-border: #d8dee4;
  --layer-t30-text: #2c3e50;
  --layer-t30-label: #a22831;

  --strawman-background: #fdf3d3;
  --strawman-border: #c9971a;
  --strawman-text: #4a3708;
}

/* ---------- The column ---------- */

/* One measure for every element in the column, so the page reads as a single shape.
 * .markdown-body itself is deliberately left alone: the strawman banner is a guard and
 * should not be narrower than the content it guards. */
.markdown-body > h1:first-of-type,
.markdown-body p,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.layer-t30,
.fork,
.bridge,
.ledger,
.sp-continue,
df-routing-selector {
  max-width: var(--layer-measure);
}

.markdown-body > h1:first-of-type {
  line-height: 1.2;
  text-wrap: balance;
}

.markdown-body h2 {
  margin-top: 32px;
  line-height: 1.25;
}

/* ---------- t30: the thirty-second layer ---------- */

/* A complete statement at its own length, not an introduction to the page. The panel and
 * its label are what make it read as something you may stop at. */
.layer-t30 {
  margin: 20px 0 28px;
  padding: 16px 20px;
  background: var(--layer-t30-background);
  border: 1px solid var(--layer-t30-border);
  border-radius: 4px;
}

.layer-t30-label {
  margin: 0 0 7px;
  font-family: var(--secondary-font-family, 'Montserrat', sans-serif);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--layer-t30-label);
}

/* Density, not brevity, is what makes a summary readable. The t30 carries inline
 * markdown so it can breathe: short paragraphs, and bold on the load-bearing claim so a
 * skimmer gets the argument from the bold alone. Generous leading and paragraph spacing
 * are doing as much work here as the word budget. */
.layer-t30__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--layer-t30-text);
}

.layer-t30__body p {
  margin: 0 0 12px;
}

.layer-t30__body p:last-child {
  margin-bottom: 0;
}

.layer-t30__body strong {
  font-weight: 700;
  color: #1b2a38;
}

/* ---------- The ledger: what you'd have, and what it never cost ---------- */

/* The page's argument is "all of this, AND none of that." Two groups side by side make
 * the inversion the composition rather than something the prose has to carry alone.
 * The second group's items are the damage, struck through — the mark IS the meaning. */
.ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 28px 0;
}

.ledger__group {
  flex: 1 1 260px;
}

.ledger__heading {
  margin: 0 0 10px;
  font-family: var(--secondary-font-family, 'Montserrat', sans-serif);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--layer-t30-label);
}

.ledger ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ledger li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--layer-t30-text);
}

.ledger li::before {
  position: absolute;
  left: 0;
  content: '\2713'; /* tick — both columns are things achieved */
  font-weight: 700;
  color: var(--primary-color, #e63946);
}

/* The damage, crossed off. */
.ledger__group--without li {
  color: #6b7785;
  text-decoration: line-through;
  text-decoration-color: var(--primary-color, #e63946);
  text-decoration-thickness: 2px;
}

/* ---------- The strawman guard ---------- */

/* A guard, not decoration. It must survive scrolling, because a notice that leaves the
 * viewport stops guarding the page below it. */
.strawman-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--strawman-background);
  border: 1px solid var(--strawman-border);
  border-left-width: 6px;
  border-radius: 0; /* single-sided accent, so square corners */
  font-family: var(--secondary-font-family, 'Montserrat', sans-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--strawman-text);
}

.strawman-banner strong {
  display: inline-block;
  margin-right: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media print {
  /* A printed strawman page still has to say so. */
  .strawman-banner {
    position: static;
    border: 2px solid var(--strawman-text);
  }
}

/* ---------- The fork (landing site only) ---------- */

/* [hidden] must win. The UA stylesheet sets display:none, but any author display rule
 * beats it, so an element toggled with .hidden would stay visible. This bit the landing
 * page's no-JS fallback: both the fallback and the component rendered at once. */
[hidden] {
  display: none !important;
}

/* Two doors, equal weight. Decision 2: no default selection, so neither is preferred. */
.fork {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0;
}

.fork-door {
  flex: 1 1 224px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px;
  background: var(--layer-t30-background);
  border: 1px solid var(--layer-t30-border);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.fork-door:hover,
.fork-door:focus-visible {
  background: #fff;
  border-color: var(--layer-t30-label);
  text-decoration: none;
}

.fork-door-label {
  font-family: var(--secondary-font-family, 'Montserrat', sans-serif);
  font-size: 22px;
  font-weight: bold;
  color: var(--layer-t30-label);
}

.fork-door-sublabel {
  font-family: var(--secondary-font-family, 'Montserrat', sans-serif);
  font-size: 15px;
  color: var(--layer-t30-text);
}

/* ---------- The cross-site bridge ---------- */

/* Deliberately quiet. It exists for the visitor who came through the wrong door and
 * should be findable without competing with the page. */
.bridge {
  margin: 40px 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--layer-t30-border);
  font-family: var(--secondary-font-family, 'Montserrat', sans-serif);
  font-size: 14px;
  color: #5a6875;
}

.bridge a {
  color: var(--layer-t30-label);
}

/* ---------- The routing continue action (landing site only) ---------- */

/* A real link with a real href, so it works on middle-click and keyboard, and the
 * destination is visible in the status bar before committing. */
.sp-continue {
  margin: 24px 0 0;
}

.sp-continue a {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--layer-t30-label);
  border-radius: 4px;
  font-family: var(--secondary-font-family, 'Montserrat', sans-serif);
  font-size: 15px;
  font-weight: bold;
  color: var(--layer-t30-label);
  text-decoration: none;
}

.sp-continue a:hover,
.sp-continue a:focus-visible {
  background: var(--layer-t30-background);
  text-decoration: none;
}

df-routing-selector {
  display: block;
  margin: 32px 0 0;
}

/* ---------- Emphasis ---------- */

/* theme.css sets html{font-weight:300}, and the UA default for <strong> is `bolder`,
 * which is computed RELATIVE to the inherited weight — from 300 it resolves to 400.
 * Body prose is 300, so emphasis lands one step above it and is invisible in Cardo at
 * body size. Nothing is misconfigured; it is arithmetic. State the weight absolutely.
 * See KNOWN_CSS_BUGS_260909.md #5. */
.markdown-body strong,
.markdown-body b {
  font-weight: 700;
}

/* ---------- TBD: deliberately hideous ---------- */

/* This is meant to be embarrassing. The goal is zero TBD banners in the system, and the
 * fastest route there is making one unbearable to look at in front of other people.
 * Hazard stripes and Comic Sans are load-bearing. Do not tidy this up — tidying it
 * removes the incentive. Write the page instead. */
.tbd {
  margin: 24px 0;
  padding: 10px;
  background: repeating-linear-gradient(
    45deg,
    #ffe14d,
    #ffe14d 14px,
    #1a1a1a 14px,
    #1a1a1a 28px
  );
  border: 4px solid #1a1a1a;
}

.tbd__inner {
  padding: 16px 18px;
  background: #fffbe6;
  font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', cursive;
  color: #1a1a1a;
  text-align: center;
}

.tbd__shout {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tbd__since {
  margin: 0;
  font-size: 14px;
}