/* ============================================================================
   tobinchang.com — Operator's Manual
   A field-manual aesthetic: warm paper, ink, one signal colour.
   No build step. No framework. Edit this file directly.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Paper & ink */
  --paper:        #faf5ea;
  --paper-raised: #fffdf8;
  --paper-sunk:   #f2ead9;
  --ink:          #17150f;
  --ink-soft:     #4a4437;
  --ink-faint:    #8b8271;
  --rule:         #ded3bd;

  /* Signal */
  --signal:       #d94f1e;   /* orange — actions, numbers, warnings */
  --signal-wash:  #fbe9e0;
  --deep:         #1d4b46;   /* teal — structure, quiet emphasis */
  --deep-wash:    #e3ece9;

  /* Type */
  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 36rem;
  --station-col: 5.5rem;

  --radius: 3px;
  --shadow-card: 0 1px 2px rgba(23, 21, 15, .06),
                 0 8px 24px -12px rgba(23, 21, 15, .18);
}

/* The dark palette is written out twice on purpose.
   - The first copy runs when your computer is set to dark mode, unless the
     reader has pressed the toggle and asked for light.
   - The second copy runs when the reader presses the toggle and asks for dark.
   CSS can't share one block between a media query and an attribute, so the
   values are repeated. If you change a colour, change it in both places. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #14130f;
    --paper-raised: #1d1b16;
    --paper-sunk:   #0e0d0a;
    --ink:          #f4efe2;
    --ink-soft:     #c2baa8;
    --ink-faint:    #8b8271;
    --rule:         #35312a;

    --signal:       #ff7043;
    --signal-wash:  #2c1a12;
    --deep:         #7fb5ac;
    --deep-wash:    #14211f;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4),
                   0 8px 24px -12px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  --paper:        #14130f;
  --paper-raised: #1d1b16;
  --paper-sunk:   #0e0d0a;
  --ink:          #f4efe2;
  --ink-soft:     #c2baa8;
  --ink-faint:    #8b8271;
  --rule:         #35312a;

  --signal:       #ff7043;
  --signal-wash:  #2c1a12;
  --deep:         #7fb5ac;
  --deep-wash:    #14211f;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4),
                 0 8px 24px -12px rgba(0, 0, 0, .7);
}

/* --- 2. Reset & base ----------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, .55vw + .95rem, 1.1875rem);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain. Fixed so it reads as the surface, not the content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .22; }
}

:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .22; }

img { max-width: 100%; height: auto; }

::selection { background: var(--signal); color: var(--paper); }

/* --- 3. Layout ----------------------------------------------------------- */

.wrap {
  position: relative;
  z-index: 1;
  max-width: calc(var(--measure) + var(--station-col) + 9rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  font-family: var(--mono);
  font-size: .8rem;
  z-index: 99;
}
.skip:focus { left: var(--gutter); top: 1rem; }

/* --- Theme toggle -------------------------------------------------------- */

/* Two matching pills pinned to the top: home on the left, theme on the right.
   Both stay put while you scroll, because the manual is long and you shouldn't
   have to scroll to the bottom to get out of it. */
.theme,
.home {
  position: fixed;
  top: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--paper-raised);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: .45rem .8rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: color .15s, border-color .15s;
}

.theme { right: 1rem; }
.home  { left: 1rem; }

.theme:hover,
.theme:focus-visible,
.home:hover,
.home:focus-visible {
  color: var(--signal);
  border-color: var(--signal);
}

/* The domain name is the useful part; drop it on small screens rather than
   letting two pills crowd the top of a phone. */
.home__full { display: none; }

@media (min-width: 30rem) {
  .home__full { display: inline; }
}

.theme__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
}

/* Swap the label depending on which theme is active. Both labels live in the
   markup; CSS shows exactly one, so it still reads correctly with no JS. */
.theme__on  { display: none; }
:root[data-theme="dark"] .theme__on  { display: inline; }
:root[data-theme="dark"] .theme__off { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme__on  { display: inline; }
  :root:not([data-theme="light"]) .theme__off { display: none; }
}

@media print { .theme, .home { display: none; } }

/* --- 4. Masthead --------------------------------------------------------- */

.masthead {
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}

.masthead__eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.masthead__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.masthead h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  line-height: .92;
  letter-spacing: -.035em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.masthead h1 em {
  font-style: normal;
  color: var(--signal);
}

.masthead__standfirst {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 32rem;
  margin: 0 0 2rem;
}

.masthead__meta {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-faint);
  letter-spacing: .04em;
  margin: 0;
}

/* --- 5. Contents --------------------------------------------------------- */

.contents {
  padding-block: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.contents h2 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
  font-weight: 400;
}

.contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  column-gap: 2.5rem;
}

.contents li { border-bottom: 1px dotted var(--rule); }

.contents a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .55rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: .98rem;
  transition: color .15s;
}

.contents a:hover,
.contents a:focus-visible { color: var(--signal); }

.contents a span {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--signal);
  font-weight: 600;
}

/* --- 6. Stations --------------------------------------------------------- */

.station {
  padding-block: clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 1.5rem;
}

.station__head { margin-bottom: 2rem; }

.station__num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 4.5rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--signal);
  margin-bottom: .5rem;
  user-select: none;
}

.station h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

.station h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  margin: 2.5rem 0 .75rem;
}

.station > p,
.station > ol,
.station > ul,
.station > .note,
.station__body > p {
  max-width: var(--measure);
}

.station p { margin: 0 0 1.15rem; }

.lede {
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Wide screens: hang the station number in the left gutter. */
@media (min-width: 60rem) {
  .station {
    display: grid;
    grid-template-columns: var(--station-col) minmax(0, 1fr);
    column-gap: 3rem;
  }
  .station__head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    margin-bottom: 2rem;
  }
  .station__num { margin: 0; }
  .station > *:not(.station__head) { grid-column: 2; }

  /* Prose stays in the narrow measure column; figures break out across the
     station-number gutter so their cards get room to breathe. */
  .station > .flow,
  .station > .choice { grid-column: 1 / -1; }
}

/* --- 7. Steps ------------------------------------------------------------ */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 1.5rem;
  padding: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1.5rem;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  border-radius: 50%;
}

.steps strong { font-weight: 600; }

/* --- 8. Code & commands -------------------------------------------------- */

code {
  font-family: var(--mono);
  font-size: .84em;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .1em .35em;
  word-break: break-word;
}

.cmd {
  position: relative;
  background: var(--ink);
  color: #f4efe2;
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1rem 2.4rem;
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

.cmd::before {
  content: "$";
  position: absolute;
  left: 1.1rem;
  color: var(--signal);
  font-weight: 600;
}

.cmd--plain { padding-left: 1.1rem; }
.cmd--plain::before { content: none; }

.cmd .c { color: #8b8271; }   /* comment */

kbd {
  font-family: var(--mono);
  font-size: .78em;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  padding: .15em .45em;
  white-space: nowrap;
}

/* --- 9. Prompt cards ----------------------------------------------------- */

.prompts {
  display: grid;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.prompt {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.25rem 1.1rem;
}

.prompt__label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .55rem;
}

.prompt__text {
  margin: 0;
  font-family: var(--mono);
  font-size: .87rem;
  line-height: 1.65;
  color: var(--ink);
}

.prompt__copy {
  position: absolute;
  top: .7rem;
  right: .7rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .3rem .55rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.prompt__copy:hover,
.prompt__copy:focus-visible {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}

.prompt__copy[data-copied="true"] {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prompt__copy[data-copied="true"] { color: #14130f; }
}

:root[data-theme="dark"] .prompt__copy[data-copied="true"] { color: #14130f; }

/* --- 10. Notes ----------------------------------------------------------- */

.note {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--deep-wash);
  padding: 1rem 1.15rem;
  margin: 0 0 1.5rem;
  font-size: .96rem;
  line-height: 1.6;
}

.note p { margin: 0; }
.note p + p { margin-top: .7rem; }

.note__tag {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--deep);
  font-weight: 600;
  margin-bottom: .4rem;
}

.note--warn { background: var(--signal-wash); }
.note--warn .note__tag { color: var(--signal); }

/* --- 11. Pipeline diagram ------------------------------------------------ */

/* auto-fit (not a viewport media query) so the cards respond to the width of
   the column they actually sit in, which is much narrower than the viewport. */
.flow {
  display: grid;
  gap: 1.5rem .75rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

@media (min-width: 34rem) {
  .flow { gap: 1.5rem; }
}

.flow li {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

/* Connector arrows between stages on wide screens. */
@media (min-width: 34rem) {
  .flow li + li::before {
    content: "→";
    position: absolute;
    left: -1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--signal);
    font-size: 1rem;
  }
}

.flow b {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: .4rem;
}

.flow span {
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- 12. Choice cards (Claude Code vs Codex) ----------------------------- */

.choice {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.choice li {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-card);
}

.choice h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 .2rem;
}

.choice .who {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .9rem;
}

.choice .cmd { margin-bottom: .75rem; font-size: .78rem; }
.choice p:last-child { margin-bottom: 0; font-size: .92rem; }

/* --- 13. Glossary -------------------------------------------------------- */

.glossary {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.glossary > div {
  display: grid;
  gap: .2rem 1.5rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 40rem) {
  .glossary > div { grid-template-columns: 9rem 1fr; }
}

.glossary dt {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--signal);
}

.glossary dd { margin: 0; font-size: .96rem; color: var(--ink-soft); }

/* --- 14. Lists ----------------------------------------------------------- */

.station ul:not(.prompts):not(.flow):not(.choice) {
  padding-left: 1.1rem;
  margin: 0 0 1.25rem;
}

.station ul:not(.prompts):not(.flow):not(.choice) li {
  margin-bottom: .55rem;
  padding-left: .3rem;
}

.station ul:not(.prompts):not(.flow):not(.choice) li::marker { color: var(--signal); }

/* --- 15. Links ----------------------------------------------------------- */

.station a,
.colophon a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-underline-offset: .18em;
  text-decoration-thickness: 1.5px;
}

.station a:hover,
.colophon a:hover { color: var(--signal); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* --- 16. Colophon -------------------------------------------------------- */

.colophon {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.8;
  color: var(--ink-faint);
}

.colophon strong { color: var(--ink-soft); font-weight: 400; }

/* --- 17. Copy feedback (screen-reader live region) ----------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 18. Print ----------------------------------------------------------- */

@media print {
  body::before, .prompt__copy, .contents { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .station { break-inside: avoid; border-color: #ccc; }
  .cmd { background: #f4f4f4; color: #000; border: 1px solid #ccc; }
  .station__num { -webkit-text-stroke: 1px #000; }
}