/* Shared by the project write-up pages. Same look as the main page (Tahoe: wallpaper, one glass sheet).
   The colour tokens, rim, wallpaper and glass rules are copied from index.html; the page layout is new. */

/* ---------- colours and glass (from the tahoe-design skill, the parts this page uses) ---------- */
:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  --text-1: rgba(0, 0, 0, .85);
  --text-2: rgba(0, 0, 0, .66);
  --sep: rgba(60, 60, 67, .16);
  --hover: rgba(0, 0, 0, .045);
  --accent: #007aff;
  --accent-text: #005fc7;              /* accent 78% + black */

  --wp-base: #9fb4d0;
  --wp-sky-1: #7f9cc3;
  --wp-sky-2: #b4c2d6;
  --wp-sky-3: #eed8b4;
  --wp-sky-4: #d9dbe2;
  --wp-fold: #3577de;
  --wp-fold-hi: #8fb9ea;
  --wp-lip-1: #e3f1f7;
  --wp-lip-2: #8fc3ec;
  --wp-body-1: #2d6fe0;
  --wp-body-2: #1a4fc6;
  --wp-body-3: #3b7fe2;
  --wp-core: #0f3db4;
  --wp-glow: #6aa6ec;
  --wp-haze: #d3deec;
  --wp-crest: #ffffff;
  --wp-streak: #b6def5;

  /* the glass: same blur and saturation as the To Do sheet */
  --sheet-bg: rgba(240, 243, 249, .80);     /* light: a quiet frost, so the wave's colours only tint it */
  --sheet-wait: rgba(238, 242, 250, .92);   /* before the baked glass is ready, or with no script */
  --sheet-solid: rgba(246, 246, 248, .97);  /* reduced transparency */
  --sheet-shadow: 0 0 0 .5px rgba(12, 36, 92, .16);   /* a hairline, not a lift */
  --rim-a: rgba(255, 255, 255, .90);
  --rim-b: rgba(255, 255, 255, .28);

  --pill-bg: rgba(240, 244, 251, .62);
  --pill-shadow: 0 6px 20px rgba(12, 36, 92, .14), 0 1px 3px rgba(12, 36, 92, .08);
  --pill-solid: rgb(246, 246, 248);

  /* project image space: a plain neutral fill until the screenshots go in (Samuel: images, not glass) */
  --thumb: #e2e5eb;
  --thumb-edge: rgba(12, 36, 92, .16);

  --s-name: 28px;
  --s-body: 17px;
  --s-small: 15px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-1: rgba(255, 255, 255, .92);
    --text-2: rgba(255, 255, 255, .64);
    --sep: rgba(255, 255, 255, .12);
    --hover: rgba(255, 255, 255, .06);
    --accent: #0a84ff;
    --accent-text: #47a3ff;            /* accent 75% + white */

    --wp-base: #0a0f22;
    --wp-sky-1: #070b1a;
    --wp-sky-2: #10162e;
    --wp-sky-3: #24203c;
    --wp-sky-4: #161b34;
    --wp-fold: #1a3c92;
    --wp-fold-hi: #2f4f9c;
    --wp-lip-1: #5d79b8;
    --wp-lip-2: #23448f;
    --wp-body-1: #12307f;
    --wp-body-2: #0a1d5a;
    --wp-body-3: #163a8c;
    --wp-core: #050f3a;
    --wp-glow: #22479a;
    --wp-haze: #26294a;
    --wp-crest: #b9ccff;
    --wp-streak: #4a6fc0;

    --sheet-bg: rgba(22, 24, 34, .46);
    --sheet-wait: rgba(26, 28, 38, .92);
    --sheet-solid: rgba(40, 40, 44, .97);
    --sheet-shadow: 0 0 0 .5px rgba(0, 0, 0, .50);
    --rim-a: rgba(255, 255, 255, .34);
    --rim-b: rgba(255, 255, 255, .08);

    --pill-bg: rgba(30, 32, 44, .62);
    --pill-shadow: 0 6px 20px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .25);
    --pill-solid: rgb(40, 40, 44);

    --thumb: #252834;
    --thumb-edge: rgba(255, 255, 255, .12);
  }
}

@media (min-width: 720px) {
  :root { --s-body: 16px; --s-small: 14px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--s-body);
  line-height: 1.5;
  color: var(--text-1);
  background: var(--wp-base);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
/* links: text colour with a system-blue underline. Blue text over blue glass can't reach 4.5:1 at the wave's
   darkest spot (measured 2.5:1 light, 4.4:1 dark); the text colours reach 7:1+ there. */
a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}
@media (hover: hover) { a:hover { text-decoration-thickness: 2.5px; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
section[id] { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* shared Liquid Glass rim: bright top-left and bottom-right, dim sides */
.rim { position: relative; }
.rim::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--rim-a) 0%, var(--rim-b) 28%, rgba(255,255,255,0) 50%, var(--rim-b) 72%, var(--rim-a) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}


/* ---------- wallpaper: fixed behind the whole page ---------- */
.wallpaper { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--wp-base); }
/* Phone: the wave is sized rather than fitted, always wide enough to cover the screen, pinned top left so the
   plain sky sits behind the intro, and big enough that the crest passes below and to the right of the intro text
   (the text sits straight on the wallpaper there, so it must never cross the crest or the blue body). */
.wallpaper svg, .wallpaper__raster {
  position: absolute;
  top: 0;
  left: 0;
  width: max(100vw, 160vh, 90vw + 900px);
  height: auto;
  aspect-ratio: 1440 / 900;
  display: block;
}
.wp-s1 { stop-color: var(--wp-sky-1); }
.wp-s2 { stop-color: var(--wp-sky-2); }
.wp-s3 { stop-color: var(--wp-sky-3); }
.wp-s4 { stop-color: var(--wp-sky-4); }
.wp-b0 { stop-color: var(--wp-lip-1); }
.wp-b1 { stop-color: var(--wp-lip-2); }
.wp-b2 { stop-color: var(--wp-body-1); }
.wp-b3 { stop-color: var(--wp-body-2); }
.wp-b4 { stop-color: var(--wp-body-3); }
.wp-fold { fill: var(--wp-fold); }
.wp-fold-hi { fill: var(--wp-fold-hi); }
.wp-core { fill: var(--wp-core); }
.wp-glow { fill: var(--wp-glow); }
.wp-haze { fill: var(--wp-haze); }
.wp-crest { stroke: var(--wp-crest); fill: none; }
.wp-streak { stroke: var(--wp-streak); fill: none; }
.wp-lip { stroke: var(--wp-lip-1); fill: none; }
/* the SVG is drawn once into a canvas (.wallpaper__raster) and then hidden, so its big blurs never re-render */
.wallpaper.is-raster svg { display: none; }


/* ---------- glass surfaces ---------- */
/* Each surface is a viewport-sized layer fixed under it and clipped to it, so it lines up with the fixed
   wallpaper while the page scrolls. Its backdrop is baked once by the script (blur 34, saturate 165%, like the
   To Do sheet): no live backdrop-filter on anything this big. */
.glass { position: absolute; inset: 0; z-index: -1; border-radius: 24px; box-shadow: var(--sheet-shadow); }
.glass__clip { position: absolute; inset: 0; border-radius: inherit; clip-path: inset(0 round 24px); }
.glass__layer { position: fixed; inset: 0; background: var(--sheet-wait); }
.glass__layer.is-baked { background: linear-gradient(var(--sheet-bg), var(--sheet-bg)), var(--baked) 0 0 / 100% 100% no-repeat; }

/* ---------- the page: one column, one glass sheet ---------- */
.page {
  display: grid;
  grid-template-columns: min(680px, 100% - 24px);
  justify-content: center;
  padding: 16px 0 32px;
  isolation: isolate;
}
.sheet { grid-row: 1; grid-column: 1; padding: 6px 16px 36px; min-width: 0; }
.sheet-bg { grid-row: 1; grid-column: 1; position: relative; inset: auto; }
@media (max-width: 380px) { .sheet { padding-left: 16px; padding-right: 16px; } }
@media (min-width: 720px) {
  .page { padding: 40px 0 96px; }
  .sheet { padding: 10px 40px 52px; }
}

/* the way back: small, in the sheet's top corner, with a 44px hit area */
.back { display: inline-block; position: relative; margin-top: 8px; font-size: var(--s-small); font-weight: 500; text-decoration: none; }
.back span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.back::before { content: ""; position: absolute; inset: -12px -10px; }
@media (hover: hover) { .back:hover span { text-decoration-thickness: 2.5px; } }

h1 { margin: 22px 0 0; font-size: var(--s-name); font-weight: 600; line-height: 1.15; letter-spacing: -.012em; }
.meta { margin-top: 4px; color: var(--text-2); font-size: var(--s-small); }
@media (min-width: 720px) { h1 { margin-top: 30px; font-size: 34px; letter-spacing: -.02em; } .meta { font-size: 15px; } }

figure { margin: 22px 0 0; }
figcaption { margin-top: 10px; color: var(--text-2); font-size: var(--s-small); line-height: 1.45; }
.legend { display: inline; }

.lead { margin-top: 14px; max-width: 33em; }
.writeup { margin-top: 26px; max-width: 33em; }
.writeup p + p { margin-top: 14px; }
@media (min-width: 720px) { .writeup { margin-top: 32px; } }

/* ---------- still 1: the plan tree, typeset (/do) ---------- */
.tree {
  padding: 14px 10px;
  border-radius: 16px;
  background: var(--thumb);
  box-shadow: inset 0 0 0 .5px var(--thumb-edge);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.34;
  overflow-x: auto;
}
.tree .tn, .tree .tc { white-space: pre; }
.tr { display: flex; justify-content: space-between; gap: 10px; }
.tr .ts { color: var(--text-2); white-space: nowrap; }
.tc { color: var(--text-2); }
.tr.top { margin-top: 10px; font-weight: 600; }
.tr.top:first-child { margin-top: 0; }

.mk-pass { color: var(--accent-text); }
.mk-run { color: var(--text-1); }
.mk-todo, .mk-skip { color: var(--text-2); }
.tr.top .ts { font-weight: 400; }
@media (min-width: 720px) { .tree { padding: 22px 26px; font-size: 14px; } .tr { gap: 24px; } }

/* ---------- still 2: the brief, typeset as a document (Events Radar) ---------- */
.doc {
  padding: 20px 16px 18px;
  border-radius: 16px;
  background: var(--thumb);
  box-shadow: inset 0 0 0 1px var(--thumb-edge);
  font-size: var(--s-small);
  line-height: 1.5;
}
.doc h2 { margin: 0; font-size: var(--s-body); font-weight: 600; line-height: 1.3; }
.doc h3 { margin: 20px 0 0; padding-bottom: 5px; border-bottom: 1px solid var(--sep); font-size: var(--s-small); font-weight: 600; line-height: 1.3; }
.doc p { margin: 8px 0 0; }
.doc ul { margin-top: 10px; }
.doc li + li { margin-top: 12px; }
.doc li { padding-left: 14px; position: relative; }
.doc li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); }
.doc li > span.d { display: block; color: var(--text-2); }
.doc li b { font-weight: 500; }
.doc .lnk { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--accent); }
.doc .new { font-weight: 600; color: var(--accent-text); }
.doc .note { margin-top: 18px; color: var(--text-2); }
.doc .note + .note { margin-top: 8px; }
.doc .dim { color: var(--text-2); }
@media (min-width: 720px) { .doc { padding: 28px 34px 26px; } }

/* ---------- laptop and up: the main page's skeleton ---------- */
/* Identity column straight on the wallpaper at the left (sticky), one wide glass sheet at the right with the still
   at the sheet's full width, then the write-up at a readable line length. Same column widths as index.html. */
.wide-only { display: none; }
@media (min-width: 1024px) {
  :root { --top: 40px; --pad: 24px; --gap: 24px; --id-w: 264px; --strip-x: 32px; --s-body: 16px; --s-small: 14px; }
  .wide-only { display: revert; }
  .page {
    grid-template-columns: var(--id-w) minmax(0, 1fr);
    justify-content: stretch;
    align-items: start;
    column-gap: var(--gap);
    max-width: 1480px;
    margin: 0 auto;
    padding: var(--top) var(--pad) var(--pad);
  }
  .sheet { display: contents; }
  .intro { grid-row: 1; grid-column: 1; position: sticky; top: var(--top); }
  .back { margin-top: 0; font-size: var(--s-small); }
  h1 { margin-top: 22px; font-size: clamp(34px, 2.9vw, 44px); line-height: 1.05; letter-spacing: -.8px; }
  .meta-when { display: none; }
  .meta { margin-top: 10px; font-size: 14px; }
  .intro .lead { margin-top: 16px; max-width: none; line-height: 1.45; }
  .facts { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sep); font-size: 14px; line-height: 1.45; }
  .facts li + li { margin-top: 8px; }
  .body { grid-row: 1; grid-column: 2; min-width: 0; padding: var(--strip-x) var(--strip-x) 44px; }
  .sheet-bg { grid-row: 1; grid-column: 2; align-self: stretch; }
  figure { margin-top: 0; }
  .writeup { margin-top: 32px; max-width: 34em; }
  .tree { padding: 24px 28px; }
  .tr { gap: 32px; }
  /* the brief at full sheet width: summary across the top, Top picks left, Maybe and the footer note right */
  .doc { padding: 28px 32px 26px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; align-content: start; }
  .doc h2, .doc > p:first-of-type { grid-column: 1 / -1; }
  .doc > p:first-of-type { max-width: 44em; }
  .doc ul:first-of-type { grid-column: 1; grid-row: 4 / span 2; }
  .doc h3:first-of-type { grid-column: 1; grid-row: 3; }
  .doc h3:last-of-type { grid-column: 2; grid-row: 3; }
  .doc ul:last-of-type { grid-column: 2; grid-row: 4; align-self: start; }
  .doc .note { grid-column: 2; grid-row: 5; align-self: start; }
}
@media (min-width: 1280px) {
  :root { --pad: 40px; --gap: 32px; --id-w: 300px; --strip-x: 36px; }
}
@media (min-width: 1440px) {
  :root { --gap: 40px; --id-w: 320px; --strip-x: 40px; }
}
@media (min-width: 1600px) {
  :root { --pad: 48px; --gap: 48px; --id-w: 340px; }
}

/* ---------- accessibility fallbacks ---------- */
@media (prefers-reduced-transparency: reduce) {
  .glass__layer, .glass__layer.is-baked { background: var(--sheet-solid); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}