/* Why Am I Tired but Can't Sleep? — one stylesheet, no dependencies. */

:root {
  --ink: #14171a;
  --muted: #5b646d;
  --line: #d9dee3;
  --bg: #ffffff;
  --soft: #f5f7f9;
  --accent: #10331f;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.62;
  overflow-wrap: break-word;
}

img, table, pre { max-width: 100%; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 72px;
}

h1 {
  font-size: 1.85em;
  line-height: 1.2;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.28em;
  line-height: 1.28;
  margin: 40px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

p { margin: 0 0 18px; }

/* A date and a length under the title: a text-heavy page with no visible freshness
   signal reads as an undated essay, and readers cannot tell a five-minute page from
   a twenty-minute one before committing to it. */
.meta {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: -6px 0 22px;
}

.answer {
  font-size: 1.08em;
  border-left: 4px solid var(--accent);
  padding-left: 16px;
  margin-bottom: 28px;
}

.start {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px 6px;
  margin: 0 0 30px;
}

.start p { font-weight: bold; margin-bottom: 10px; }

/* ---- links inside body copy ----
   No rule styled a link in the article text, so every in-text link fell back to
   the browser default: #0000EE, then purple once visited, on a page that is ink
   and green everywhere else. It read as an unstyled document rather than a page. */

.page p a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.page p a:visited { color: #2c4a3a; }

.page p a:hover { color: #0b6b3a; text-decoration-thickness: 2px; }

.page p a:focus-visible {
  outline: 3px solid #0b6b3a;
  outline-offset: 2px;
  border-radius: 3px;
}

.start ol { margin: 0 0 14px; padding-left: 22px; }

.start li { margin-bottom: 10px; }

/* ---- download entry ---- */

.entry {
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 20px 20px 16px;
  margin: 0 0 40px;
  background: #fbfdfb;
}

.entry-title {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.06em;
  font-weight: 700;
  margin: 0 0 8px;
}

.entry-lead { font-size: 0.95em; margin-bottom: 16px; }

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.btn {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.94em;
  font-weight: 600;
  line-height: 1.25;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 8px;
  border: 2px solid var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
}

.btn-primary { background: var(--accent); color: #fff; }

.btn-secondary { background: #fff; color: var(--accent); }

.btn:focus-visible { outline: 3px solid #0b6b3a; outline-offset: 2px; }

.entry-note { font-size: 0.85em; color: var(--muted); margin: 0; }

/* ---- code-ish blocks ---- */

pre.calc, pre.fields {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82em;
  line-height: 1.5;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 18px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

ul { padding-left: 22px; }

li { margin-bottom: 10px; }

/* ---- homepage guide list: one card per guide, title then a quiet line ---- */

.guides {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: grid;
  gap: 10px;
}

.guides li {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: #fff;
}

.guides li:hover { border-color: var(--accent); }

/* Fifteen cards in one list, all the same weight: the page's own entry point was
   card one of fifteen, indistinguishable from a page about mattresses. The
   flagship card now carries a label and a tint, so the list has a top. */
.guides li.g-first {
  background: #f2f7f3;
  border: 1px solid #b9cdbf;
  border-left: 4px solid var(--accent);
}

.g-label {
  display: block;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.guides li.g-first .g-title { font-size: 1.1em; }

/* The whole card is the link: on a phone the title alone was a 24px target, so a
   tap on the description did nothing while the card still looked tappable. */
.guides a {
  display: block;
  padding: 14px 16px 13px;
  color: var(--accent);
  text-decoration: none;
}

.guides a:focus-visible {
  outline: 3px solid #0b6b3a;
  outline-offset: -3px;
  border-radius: 6px;
}

.g-title {
  display: inline-block;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.02em;
  font-weight: 700;
  line-height: 1.3;
  padding: 3px 0;
}

.guides a:hover .g-title { text-decoration: underline; }

.g-note {
  display: block;
  margin-top: 3px;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- inline figures ---- */

.fig {
  margin: 26px 0 30px;
  padding: 18px 16px 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.fig svg { display: block; width: 100%; height: auto; }

.fig figcaption {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.82em;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}

/* ---- screen comparison table ----
   There was no table styling at all, so any table on a page rendered as the
   browser default: serif at 18px, no rules, columns of different widths. This
   is the compact version, and the wrapper lets it scroll on a phone instead of
   squeezing four columns into 330px. */

.cmp-wrap {
  margin: 26px 0 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.cmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.82em;
  line-height: 1.45;
}

table.cmp thead th {
  background: var(--soft);
  color: var(--ink);
  font-size: 0.95em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

table.cmp tbody th,
table.cmp tbody td {
  text-align: left;
  vertical-align: top;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

table.cmp tbody th {
  width: 20%;
  color: var(--accent);
  font-weight: 700;
}

table.cmp tbody tr:last-child th,
table.cmp tbody tr:last-child td { border-bottom: 0; }

table.cmp tbody tr:nth-child(even) { background: #fbfcfd; }

/* The scroll itself is invisible: a table cut off mid-word reads as a broken
   layout rather than a scrollable one, so the phone view gets a one-line hint. */
.cmp-note { display: none; }

.related {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.related p { font-size: 0.95em; }

/* ---- site chrome: header nav + footer ---- */

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.wrap-head, .wrap-foot {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
}

.brand {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.02em;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  gap: 6px 18px;
  flex-wrap: wrap;
}

.site-nav a {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.92em;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

.site-nav a:hover { color: var(--accent); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 56px;
}

.site-foot .wrap-foot {
  display: block;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.86em;
  line-height: 1.55;
  color: var(--muted);
}

.site-foot p { margin: 0 0 8px; }

.site-foot .foot-links {
  display: flex;
  gap: 6px 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.site-foot .foot-links a {
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.site-foot a { color: var(--muted); }
.site-foot .foot-links a:hover { color: var(--accent); text-decoration: underline; }

.updated { color: var(--muted); font-size: 0.9em; }

/* ---- page provenance: the four required blocks ---- */

/* The four blocks at the foot of every article ran together: bold label,
   paragraph, bold label, paragraph, in one grey slab. On a phone the Sources
   entry alone is a screen and a half of 14px text, and nothing marked where one
   block ended and the next began. The labels are now small caps and each block
   is separated by a hairline, so the box can be scanned instead of read. */
.provenance {
  margin-top: 40px;
  padding: 18px 20px 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.86em;
  line-height: 1.6;
  color: #414a52;
}

.prov-title {
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}

.provenance dl { margin: 0; }

.provenance dt {
  font-weight: 700;
  font-size: 0.86em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.provenance dl > dt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.provenance dd { margin: 4px 0 0; }

/* ---- print-only sheet: hidden on screen ---- */

.sheet { display: none; }

@media print {
  @page { size: A4 portrait; margin: 10mm; }

  html, body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  .wrap { display: none !important; }

  .site-head, .site-foot { display: none !important; }

  .sheet { display: block !important; }

  .sheet-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15pt;
    font-weight: bold;
    margin: 0 0 2mm;
    letter-spacing: 0;
  }

  .sheet-sub {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
    margin: 0 0 3mm;
  }

  table.diary {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
  }

  table.diary th, table.diary td {
    border: 0.6pt solid #000;
    padding: 1mm 1.2mm;
    height: 8.5mm;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
  }

  table.diary thead th {
    height: 6mm;
    font-size: 7.5pt;
    font-weight: bold;
    background: #fff;
  }

  table.diary th.rowlab {
    width: 18%;
    text-align: left;
    font-weight: normal;
    font-size: 6.8pt;
    line-height: 1.15;
  }

  table.diary tr.calcrow th.rowlab { font-weight: bold; }

  .sheet-foot { margin-top: 4mm; }

  .sheet-foot .formula {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7pt;
    margin: 0 0 1mm;
  }

  .sheet-foot .range {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 7.5pt;
    margin: 3mm 0 1mm;
  }

  .sheet-foot .avg {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    margin: 3mm 0 0;
  }

  .sheet-foot .blank {
    display: inline-block;
    width: 22mm;
    border-bottom: 0.6pt solid #000;
  }
}

/* ---- phone width ---- */

@media (max-width: 560px) {
  body { font-size: 16.5px; line-height: 1.58; }

  .wrap { padding: 22px 15px 56px; }

  .wrap-head, .wrap-foot { padding-left: 15px; padding-right: 15px; }

  /* The header was the first thing a phone showed, and it was the worst thing on
     the page: three nav links at desktop size wrapped onto two ragged lines under
     the brand, reading as stray grey text and pushing the headline 145px down.
     Below the brand they now sit on one line, evenly spread, at a size that fits. */
  .wrap-head { gap: 0; padding-top: 9px; padding-bottom: 3px; }

  .site-nav {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0 8px;
    margin-top: -2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar { display: none; }

  .site-nav a { font-size: 0.78em; min-height: 40px; white-space: nowrap; }

  h1 { font-size: 1.5em; }

  h2 { font-size: 1.18em; margin-top: 34px; }

  /* The first screen on a phone was the answer paragraph and nothing else: at
     390px the longest of them ran sixteen lines behind a full-height green rule
     with no padding, which reads as a quotation from somebody else rather than
     as the site's own answer. On a phone it becomes a panel — the rule moves
     inside the padding — so the opening screen reads as a summary. Desktop keeps
     the plain rule, where the paragraph is only six lines and the border is a
     margin note rather than a box. */
  .answer {
    font-size: 1em;
    background: var(--soft);
    border-left-width: 3px;
    border-radius: 0 8px 8px 0;
    padding: 14px 14px 14px 12px;
    margin-bottom: 26px;
  }

  .start, .entry { padding: 16px 14px; }

  .entry-actions { flex-direction: column; }

  .btn { width: 100%; }

  pre.calc, pre.fields { font-size: 0.76em; padding: 12px 12px; }

  /* A 640-unit SVG squeezed into ~330px halves its labels to about 7px. Keep the
     diagram at a readable scale and let the figure scroll sideways instead. */
  .fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fig svg { min-width: 540px; }
  .fig::after {
    content: "Swipe the diagram sideways to see all of it.";
    display: block;
    margin-top: 8px;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.76em;
    color: var(--muted);
  }

  /* A diagram whose labels all sit inside the first ~390 of its 640 units is
     fully visible at 390px, so the swipe hint would be telling the reader to
     look at empty canvas. Only figures that really are cut off keep it. */
  .fig-narrow::after { content: none; }

  /* The same figure still carried a scrollbar over the empty right-hand canvas,
     which read as a broken diagram. Nothing is cut off, so the bar goes. */
  .fig-narrow { scrollbar-width: none; }
  .fig-narrow::-webkit-scrollbar { display: none; }

  table.cmp { font-size: 0.78em; }
  table.cmp thead th { padding: 9px 10px; }
  table.cmp tbody th, table.cmp tbody td { padding: 10px; }

  /* A three-column comparison fits a phone; it does not need 560px. Left at the
     default width its second column sat entirely off-screen, which turns a
     comparison into a list of one thing. Four-column tables still scroll. */
  .cmp-wrap--fit { overflow-x: visible; }
  .cmp-wrap--fit table.cmp { min-width: 0; table-layout: fixed; }
  /* 26% was tuned on row labels of two or three words ("heat", "minutes to
     sleep"). A row label that is a phrase — "time awake after falling asleep,
     wrist monitor" — broke into five ragged lines and made every row twice as
     tall as its content, so the table read as a column of stacked words. A third
     of the width fits those phrases in three lines and costs the value column
     almost nothing. */
  .cmp-wrap--fit tbody th { width: 34%; }

  /* The hint used to sit below the table, after the crop had already happened.
     On a phone the table is wider than the column, so the reader met a word cut
     in half, decided the layout was broken, and only then found the sentence
     explaining it. It now comes first, as a directional label. */
  .cmp-note {
    display: block;
    margin: 0 0 8px;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.76em;
    color: var(--accent);
  }

  .cmp-note::after { content: " \2192"; }
}

/* Narrower than a 360 phone the one-line nav runs out of room and clips the last
   link, which reads as a broken menu. Drop the type one more step rather than
   let the row overflow. */
@media (max-width: 340px) {
  .site-nav a { font-size: 0.72em; }
}