/* tenzin.com.au/thoughts — generated pages share this stylesheet.
   Palette and type follow site/ and hub/ so all three read as one family.
   Tag accents are the four moment accents from site/site.js plus the hub's
   terracotta, so nothing new was invented for this section.

   NOTE: this file is served with Cache-Control: no-cache via the filename rule
   in site/.htaccess (`^(site|hub|…|thoughts)\.(js|css)$`). If you rename it,
   rename it there too or browsers will pair fresh markup with a stale sheet. */

:root {
  --bg: #100e0c;
  --ink: #e8e0d6;
  --ink-bright: #f2ebe2;
  --ink-dim: #a99c8c;
  --ink-faint: #7a6e63;
  --line: #2a2320;
  --panel: #1a1410;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;

  --tag-mind: #c98b6b;
  --tag-tools: #d4a94a;
  --tag-inquiry: #ef9563;
  --tag-systems: #93a67c;
  --tag-culture: #4bbd68;
  --tag-ethics: #cf7a6a;
  --tag-none: #7a6e63;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iOS Safari inflates text inside any block wider than the viewport. The
     overflow above put every library row into exactly that state, so the
     summary rendered close to title size on a phone and looked like a font-size
     bug rather than a layout one. Fixing the overflow removes the trigger; this
     removes the mechanism. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: #d6d0c6; color: #16130f; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── masthead, shared ─────────────────────────────────────────────────── */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 26px clamp(22px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

.top__home {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .3s ease;
}

.top__home:hover { color: var(--ink); }
.top__here { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }

/* ── index: graph + library ───────────────────────────────────────────── */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(34px, 7vh, 64px) clamp(22px, 5vw, 64px) 96px;
}

h1.page-title {
  margin: 14px 0 0;
  font-size: clamp(38px, 7vw, 74px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--ink-bright);
}

.page-sub {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* The one link out of the graph, to the explainer. Underlined explicitly
   because this stylesheet sets `a { text-decoration: none }` globally for the
   library rows, so an unstyled anchor here is invisible as a link. */
.page-sub__how {
  white-space: nowrap;
  color: var(--ink-bright);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 1px;
  transition: border-color .25s ease;
}

.page-sub__how:hover { border-color: var(--ink-bright); }

.views {
  display: flex;
  gap: 8px;
  margin: clamp(30px, 5vh, 46px) 0 20px;
  padding-bottom: 0;
}

.views__btn {
  padding: 9px 18px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.views__btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.views__btn[aria-selected="true"] { background: var(--panel); border-color: var(--ink-faint); color: var(--ink-bright); }

/* graph */

.graph {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0c0a09;
  overflow: hidden;
}

.graph__canvas { display: block; width: 100%; height: clamp(380px, 58vh, 620px); touch-action: none; cursor: grab; }
.graph__canvas:active { cursor: grabbing; }

.graph__tip {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  max-width: 280px;
  padding: 11px 14px;
  background: #1a1410f2;
  border: 1px solid var(--line);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

.graph__tip[data-on="1"] { opacity: 1; transform: none; }
.graph__tip-title { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink-bright); }
.graph__tip-sum { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-dim); }
.graph__tip-meta { margin-top: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

/* Zoom controls, built by thoughts.js into .graph. Bottom-left rather than
   bottom-right: the tooltip is positioned from the pointer and drifts to the
   right edge, and on a phone the right side is where a thumb rests. */
/* Wraps the canvas alone, so the controls anchor to the canvas rather than to
   `.graph`, which is taller — it carries the legend and the hint underneath,
   and the controls landed on top of them. */
.graph__stage { position: relative; }

.graph__zoom {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.graph__zoombtn {
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  background: #14110ecc;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: color .2s ease, border-color .2s ease;
}

.graph__zoombtn:last-child { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.graph__zoombtn:hover { color: var(--ink-bright); border-color: var(--ink-faint); }
.graph__zoombtn:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: 2px; }

.graph__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 14px clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.legend__item { display: flex; align-items: center; gap: 7px; }
.legend__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tag-none); }
.legend__dot--hollow { background: none; border: 1px solid var(--ink-faint); }

.graph__hint {
  padding: 0 clamp(14px, 2vw, 20px) 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5d554d;
}

/* ── sources (/thoughts/sources) ──────────────────────────────────────────
   In the shared sheet rather than inlined, unlike the explainer: this page is a
   list, its styles sit naturally beside .lib__row, and this file already has a
   no-cache rule by filename. The explainer inlines because it carries a lot of
   bespoke demo CSS and would otherwise need its own entry in that rule. */

.srcs { margin-top: clamp(26px, 5vh, 44px); }

.srcg { margin-bottom: clamp(28px, 5vh, 46px); }

.srcg__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.srcg__n { color: var(--ink-faint); font-size: 9px; }

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

.src {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.src:last-child { border-bottom: 0; }
/* Deep-linked from elsewhere: /thoughts/sources/#seeing-like-a-state */
.src:target { background: var(--panel); box-shadow: 0 0 0 14px var(--panel); border-radius: 2px; }

.src__t { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink-bright); }
.src__t--link { border-bottom: 1px solid #3a332d; padding-bottom: 1px; transition: border-color .25s ease; }
.src__t--link:hover { border-color: var(--ink-bright); }

.src__by { display: block; margin-top: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); }
.src__note { margin: 10px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.66; color: var(--ink-dim); }

.src__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 10px; margin-top: 12px; }

.src__outk {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #5d554d;
}

.src__link {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink);
  transition: border-color .2s ease, color .2s ease;
}

.src__link:hover { border-color: var(--ink-faint); color: var(--ink-bright); }
.src__out--none { font-size: 12.5px; color: #5d554d; }

.src__empty { max-width: 60ch; font-size: 15px; line-height: 1.7; color: var(--ink-dim); }
.src__empty code { font-family: var(--mono); font-size: .88em; color: var(--ink); }

/* library */

.search {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-bottom: 22px;
  padding: 12px 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* 16px avoids the iOS zoom-on-focus */
}

.search:focus { outline: none; border-color: var(--ink-faint); }

.lib { display: grid; gap: 12px; }

.lib__row {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a grid item's min-width defaults to `auto`, which
     is its longest unbreakable word. Defensive rather than load-bearing — the
     two things that actually hold the row inside a phone are the wrapping meta
     strip and `overflow-wrap` below, and mutating either of those fails the
     tests while mutating this one does not. It stays because the default is
     still wrong for a column that must be allowed to shrink. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px 24px;
  padding: 20px clamp(18px, 2.4vw, 26px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s ease, transform .2s ease;
}

.lib__row:hover { transform: translateY(-2px); border-color: var(--ink-faint); }
/* `overflow-wrap: anywhere` on both: a title or a summary can legitimately hold
   a url or a hyphenless compound longer than a phone is wide, and the only
   alternatives are overflowing the page or clipping the words. */
.lib__title { font-size: clamp(19px, 2.6vw, 25px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--ink-bright); overflow-wrap: anywhere; }
.lib__sum { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-dim); max-width: 60ch; overflow-wrap: anywhere; }
.lib__meta { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.lib__seed { color: var(--ink-faint); }
.lib__empty { padding: 30px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── reading view ─────────────────────────────────────────────────────── */

.read { max-width: 660px; margin: 0 auto; padding: clamp(40px, 9vh, 92px) clamp(22px, 6vw, 40px) 110px; }

.read__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }

h1.read__title {
  margin: 20px 0 0;
  font-size: clamp(31px, 5.4vw, 50px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink-bright);
  text-wrap: balance;
}

.read__sum { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-dim); font-style: italic; }

.read__body { margin-top: clamp(34px, 6vh, 52px); font-size: 17.5px; line-height: 1.78; color: var(--ink); }
/* `.read__body p { margin: 0 }` was here and silently won: a class+type selector
   outranks `.read__body > * + *` (class only), so it zeroed the paragraph gap and
   the essay ran together as one block. Zero the margin on the child selector at
   the same specificity instead, and let the later rule add the gap back. */
.read__body > * { margin: 0; }
.read__body > * + * { margin-top: 1.35em; }
.read__body h2 { margin: 2em 0 0; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--ink-bright); }
.read__body h3 { margin: 1.7em 0 0; font-size: 14px; font-weight: 600; color: var(--ink-dim); }
.read__body strong { color: var(--ink-bright); font-weight: 600; }
.read__body em { font-style: italic; }
.read__body ul, .read__body ol { margin: 0; padding-left: 1.3em; }
.read__body li + li { margin-top: .5em; }
.read__body blockquote { margin: 0; padding-left: 20px; border-left: 2px solid var(--line); color: var(--ink-dim); font-style: italic; }
.read__body code { font-family: var(--mono); font-size: .88em; background: var(--panel); padding: 2px 5px; border-radius: 4px; }
.read__body pre { margin: 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.read__body pre code { background: none; padding: 0; }
.read__body a[href^="http"] { color: var(--ink-bright); border-bottom: 1px solid var(--ink-faint); }

/* A wikilink to a written thought is solid; to an unwritten one it is dotted
   and dimmed, so the prose tells you the difference before you click. */
.wl { color: var(--tag-tools); border-bottom: 1px solid #d4a94a55; transition: border-color .2s ease; }
.wl:hover { border-bottom-color: var(--tag-tools); }
.wl--unwritten { color: var(--ink-dim); border-bottom: 1px dotted var(--ink-faint); }

.seed-note {
  margin-top: clamp(30px, 5vh, 44px);
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink-faint);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.backlinks { margin-top: clamp(48px, 8vh, 76px); padding-top: 26px; border-top: 1px solid var(--line); }
.backlinks__list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.backlinks__list a { font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.backlinks__list a:hover { border-color: var(--ink-faint); }

.foot { margin-top: clamp(40px, 6vh, 60px); display: flex; flex-wrap: wrap; gap: 12px 26px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.foot a:hover { color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .lib__row:hover { transform: none; }
}

/* ── references in the graph ──────────────────────────────────────────────
   A source is a square, not a dot: colour is already carrying two meanings
   (fill vs stroke is written vs unwritten, and the fill itself is the tag), so
   shape is the only axis left. Deliberately outside the six-tag palette. */
.legend__dot--ref {
  border-radius: 2px;
  background: #7c8aa8;
}

/* The toggle sits with the hint rather than the legend: the legend describes
   what you are looking at, this changes it. */
.graph__toggle {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8d8177;
  background: #17130f;
  border: 1px solid #2f2823;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.graph__toggle:hover { color: #d8cbbc; border-color: #4a4038; }
.graph__toggle[aria-pressed="false"] { color: #6b6057; }

/* ── phones: touch and type ───────────────────────────────────────────────
   Keyed on the INPUT DEVICE, not the width. A phone in landscape is 667px
   wide — above any sensible width breakpoint — and that exact assumption is
   what broke the Mandelbrot page. `pointer: coarse` is the thing that is
   actually true about a finger.

   Two problems, both measured rather than guessed. Every tap target on these
   pages was under 40px and the back link was 13px tall; and the mono
   micro-type ran to 9px, which is a desktop mannerism — it reads as texture on
   a large screen and as nothing at all at arm's length. Desktop is untouched:
   this only ever raises a floor.

   It lives at the END of the file on purpose. These selectors are the same
   specificity as the base rules they override, so at equal weight the later one
   wins — sitting earlier in the file, the `.tag` floor here was silently losing
   to the `.tag` rule below it and the type stayed at 9px. */

@media (pointer: coarse) {
  /* Hit area comes from padding, never from font-size — growing the type to
     make a target tappable changes the design; growing the box does not. */
  .top { padding-top: 8px; padding-bottom: 8px; }

  .top__home,
  .top__here {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
  }

  /* The negative margin keeps the enlarged box optically aligned with the
     text beside it rather than pushing the masthead apart. */
  .top__home { margin: -12px 0; }

  .views__btn { min-height: 44px; padding: 0 20px; font-size: 12px; }

  .page-sub__how {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -10px 0;
  }

  .eyebrow,
  .graph__hint,
  .graph__legend { font-size: 12px; }

  .lib__seed,
  .lib__stage,
  .lib__empty,
  .tag { font-size: 12px; }

  /* A library row is the primary target on the whole page. It also STACKS:
     side by side, the meta column (stage, progress, visibility, tags, date and
     two buttons) is 452px of nowrap content that cannot shrink, so on a 390px
     phone it took the row 753px off the side of the screen. */
  .lib__row {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 15px;
    padding-bottom: 15px;
    gap: 10px;
  }
  /* And the meta wraps rather than running in one line. `white-space: nowrap`
     still holds INSIDE each pill, which is what it was for — keeping "6 posts,
     then accept" from breaking mid-phrase — but the strip of them may wrap. */
  .lib__meta {
    flex-wrap: wrap;
    white-space: normal;
    gap: 8px 10px;
    align-items: center;
  }
  .lib__meta > * { white-space: nowrap; }

  /* Sources: the title is the link, so it carries the hit area, and the
     "what came out of it" pills are targets in their own right. */
  .src { padding-top: 20px; padding-bottom: 20px; }
  .src__t--link { display: inline-flex; align-items: center; min-height: 44px; }
  .src__by, .src__outk, .src__out--none { font-size: 12px; }
  .src__link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 13px; }
  .srcg__h { font-size: 12px; }
  /* The count beside a kind heading, and the date at the end of a library row.
     The date span carries no class of its own, so it has to be reached through
     its parent — found by measuring, not by reading. */
  .srcg__n { font-size: 12px; }
  .lib__meta > span { font-size: 12px; }

  .foot { gap: 4px 20px; font-size: 12px; }
  .foot a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── the people panel ───────────────────────────────────────────────────────
   Where a click on the public people graph lands. It is an overlay rather than
   a page because a person and a continent are not files — there is nothing to
   navigate to — and the same reason the gated reader is an overlay.
   Three ways out (the button, Escape, the backdrop), because an overlay with
   one is a trap on whichever device does not have it. */
.pg { position: fixed; inset: 0; z-index: 40; }
.pg__back { position: absolute; inset: 0; background: rgba(8, 7, 10, 0.72); }
.pg__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(46rem, 100%);
  background: var(--bg, #17151b);
  border-left: 1px solid #2a2430;
  overflow-y: auto;
  padding: 0 1.4rem 3rem;
}
/* Sticky rather than floated: a float reserves space only at its original
   position, so the control sails over the text as soon as you scroll. */
.pg__bar {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0 0.7rem;
  background: var(--bg, #17151b);
  border-bottom: 1px solid #2a2430;
  margin-bottom: 1.2rem;
}
.pg__title { margin: 0; font-size: 1.35rem; letter-spacing: 0.01em; }
.pg__close {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid #2a2430; border-radius: 8px;
  color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.pg__item + .pg__item { margin-top: 2.2rem; border-top: 1px solid #241f2b; padding-top: 1.6rem; }
.pg__item h3 { margin: 0 0 0.2rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.pg__by { margin: 0 0 0.9rem; font-size: 0.82rem; opacity: 0.6; }
.pg__none { opacity: 0.7; }
@media (max-width: 620px) { .pg__sheet { width: 100%; border-left: none; } }
/* Whose thought a library row is. Only the public page sets it — the gated
   library is one person's by construction and would just repeat their name. */
.lib__by { opacity: 0.75; }