/*
 * Fillbrook website. One stylesheet, no web fonts, no scripts.
 * Colours are the Paper and Evening Edition tokens from design/DESIGN-KIT.md; High Contrast follows the app's
 * highContrast palette (app/src/theme/palette.ts) when the reader's system asks for more contrast.
 * The Content-Security-Policy in ../_headers allows only same-origin stylesheets, so keep every style in this file
 * (no style="" attributes, no <style> blocks).
 */

:root {
  color-scheme: light dark;

  /* Paper (default) */
  --page: #F6F1E7;
  --surface: #FFFDF8;
  --ink: #1B1A17;
  --muted: #595349;
  --keyline: #1B1A17;
  --rule: #766F64;
  --accent: #1D4E89;
  --accent-hover: #15346F;
  --on-accent: #FFFDF8;
  --brick: #9E3B2B;
  --mark-bg: #FFF1BF;
  --mark-ink: #1B1A17;

  /* Grid */
  --cell: #FFFDF8;
  --block: #23211D;
  --hatch: #23211D;
  --gridline: #766F64;
  --frame: #1E1C19;
  --pen: #15346F;
  --given: #1B1A17;
  --starter: #E8DFCC;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, Cambria, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 42rem;
  --gutter: 1rem;
  --radius: 8px;
}

/* Evening Edition (Dark) */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #141311;
    --surface: #1E1C19;
    --ink: #EEE9DF;
    --muted: #B3AB9D;
    --keyline: #948C80;
    --rule: #948C80;
    --accent: #8FB8F2;
    --accent-hover: #B7D1F6;
    --on-accent: #141311;
    --brick: #C68D80;
    --mark-bg: #4A3A0B;
    --mark-ink: #F5F0E6;

    --cell: #26241F;
    --block: #0A0908;
    --hatch: #857E72;
    --gridline: #948C80;
    --frame: #C9C1B3;
    --pen: #D6E4FF;
    --given: #F5F0E6;
    --starter: #3B372F;
  }
}

/* High Contrast (light systems that ask for more contrast) */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root {
    --page: #FFFFFF;
    --surface: #FFFFFF;
    --ink: #000000;
    --muted: #333333;
    --keyline: #000000;
    --rule: #000000;
    --accent: #0038A8;
    --accent-hover: #002A7F;
    --on-accent: #FFFFFF;
    --brick: #000000;
    --mark-bg: #FFE97A;
    --mark-ink: #000000;

    --cell: #FFFFFF;
    --block: #000000;
    --gridline: #000000;
    --frame: #000000;
    --pen: #000000;
    --given: #000000;
    --starter: #D6D6D6;
  }
}

/* ------------------------------------------------------------------------------------------------ base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem; /* 18px at default browser settings */
  line-height: 1.6;
  overflow-wrap: break-word;
  border-top: 4px solid var(--brick);
}

h1,
h2,
h3 {
  font-family: var(--serif);
  line-height: 1.25;
  color: var(--ink);
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  margin: 2rem 0 0.75rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

h3 {
  font-size: 1.2rem;
  margin: 1.75rem 0 0.5rem;
}

p,
ul,
ol,
dl,
table,
figure {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.4rem;
}

li {
  margin: 0.35rem 0;
}

strong {
  font-weight: 700;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
}

/* Visually hidden, still read aloud */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  font-weight: 700;
}

.skip:focus {
  top: 0.75rem;
  color: var(--on-accent);
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ------------------------------------------------------------------------------------------------ masthead */

.masthead {
  padding-top: 1.5rem;
  text-align: center;
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.wordmark a {
  color: var(--ink);
  text-decoration: none;
}

.wordmark a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.dateline {
  margin: 0.75rem 0 0;
  padding: 0.4rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif);
  font-variant: small-caps;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  display: inline-block;
  min-height: 44px;
  padding: 0.55rem 0.25rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

/* ------------------------------------------------------------------------------------------------ content */

main {
  padding-bottom: 3rem;
}

.lead {
  font-size: 1.25rem;
}

.note {
  color: var(--muted);
}

.updated {
  color: var(--muted);
  margin-bottom: 0.25rem;
}

/* The "Coming soon" stamp: an accent rectangle, slightly tilted, like the diary's date stamps. */
.stamp {
  display: inline-block;
  margin: 0.5rem 0 1rem;
  padding: 0.45rem 0.9rem;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  border-radius: 3px;
  transform: rotate(-2deg);
}

.card {
  background: var(--surface);
  border: 1px solid var(--keyline);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  margin-top: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.cards > li {
  margin: 0;
}

.path {
  font-weight: 600;
}

/* Builder placeholders on the privacy page: impossible to miss, and obviously not final text. */
.ph {
  background: var(--mark-bg);
  color: var(--mark-ink);
  outline: 2px dashed var(--brick);
  outline-offset: 1px;
  padding: 0 0.2em;
  border-radius: 2px;
  font-weight: 700;
}

/* Contents list on the privacy page */
.toc {
  margin: 1.5rem 0;
}

.toc h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 1.2rem;
}

.toc ol {
  margin: 0;
}

/* Tables: no sideways scrolling, cells wrap */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 1rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--rule);
  overflow-wrap: anywhere;
}

th {
  font-weight: 700;
}

/* Narrow screens (and 200% zoom): each row becomes a small stacked block */
@media (max-width: 30rem) {
  table.stack,
  table.stack tbody,
  table.stack tr,
  table.stack td {
    display: block;
    width: 100%;
  }

  table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  table.stack tr {
    border: 1px solid var(--rule);
    border-bottom: 0;
  }

  table.stack tr:last-child {
    border-bottom: 1px solid var(--rule);
  }

  table.stack td {
    border: 0;
  }

  table.stack td:first-child {
    font-weight: 700;
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------------------------------------------ sample grid */

.sample {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 2rem;
  margin: 1.5rem 0 2rem;
}

.sample svg {
  display: block;
  width: 100%;
  max-width: 17.5rem;
  height: auto;
}

.sample figcaption {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 1rem;
}

.grid .cell { fill: var(--cell); }
.grid .starter { fill: var(--starter); }
.grid .block { fill: var(--block); }
.grid .hatch-bg { fill: var(--block); }
.grid .hatch-line { stroke: var(--hatch); stroke-width: 1; }

/* Evening Edition blocks carry a 45° hatch (DESIGN-KIT.md), so they read as blocks on a dark page. The hatch line sits
   mid-tile in the pattern (index.html, M3 0V6) so all of its 1px width shows; if a browser can't resolve the pattern,
   the blocks fall back to the plain block colour instead of disappearing. */
@media (prefers-color-scheme: dark) {
  .grid .block { fill: url(#hatch) var(--block); }
}
.grid .line { stroke: var(--gridline); stroke-width: 1; fill: none; }
.grid .frame { stroke: var(--frame); stroke-width: 2.5; fill: none; }
.grid text {
  font-family: var(--sans);
  font-size: 22px;
  text-anchor: middle;
  dominant-baseline: central;
}
.grid .given { fill: var(--given); font-weight: 700; }
.grid .pen { fill: var(--pen); font-weight: 600; }

.words {
  min-width: 10rem;
}

.words .group {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.words .group span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
}

.words ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.words li {
  margin: 0.15rem 0;
}

.words s {
  color: var(--muted);
}

/* ------------------------------------------------------------------------------------------------ footer */

.site-footer {
  border-top: 3px double var(--ink);
  padding: 1.25rem 0 2.5rem;
  color: var(--muted);
  font-size: 1rem;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.site-footer li {
  margin: 0;
}

.site-footer a {
  display: inline-block;
  min-height: 44px;
  padding: 0.55rem 0;
}

/* ------------------------------------------------------------------------------------------------ system modes */

@media (forced-colors: active) {
  .stamp,
  .card,
  .ph {
    border: 2px solid CanvasText;
  }

  .grid .block {
    fill: CanvasText;
  }

  .grid .cell {
    fill: Canvas;
  }
}

@media print {
  body {
    background: #FFFFFF;
    color: #000000;
    border-top: 0;
  }

  .skip,
  .site-nav {
    display: none;
  }

  a {
    color: #000000;
  }

  .card,
  table {
    background: #FFFFFF;
  }

  h2,
  h3 {
    break-after: avoid;
  }
}