/* Padoflow site styles. Hand-written: no framework, no web fonts (system fonts only, decided 2026-10-09).
   Page text is serif. Anything that shows the product (diagrams, screens, logs) is set in the system
   sans and mono, so it reads as software rather than as part of the page around it.
   Line and dot rules for the diagrams live at the top of flow.js. */

:root {
  --paper: #f4f1ea;
  --paper-2: #ebe7dd;
  --surface: #ffffff;
  --surface-2: #faf8f3;
  --ink: #1f2a2e;
  --soft: #5d6663;
  --faint: #868d89;
  --rule: #d8d2c4;
  --rule-2: #ece7dd;
  --link: #1d5a63;
  --teal: #157f7a;  --teal-bg: #e3f0ef;  --teal-line: #add2d0;
  --ochre: #a85d1c; --ochre-bg: #f6ece4; --ochre-line: #e5c9b0;
  --navy: #3d5a99;  --navy-bg: #e8ebf3;  --navy-line: #bbc5db;
  --grey: #8f9892;
  --red: #b42318;   --red-bg: #f8e1de;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
}
.page { max-width: 680px; margin: 0 auto; padding: 32px 16px; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* header */
.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 64px; }
.wordmark { font-weight: 700; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 16px; }
.top nav a { color: var(--soft); text-decoration: none; }
.top nav a:hover { color: var(--ink); text-decoration: underline; }
.top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }

/* text */
h1 { margin: 0 0 20px; font-size: 34px; line-height: 1.2; font-weight: 400; }
.intro { margin: 0 0 48px; color: var(--soft); font-size: 19px; }
h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
section { padding: 28px 0; border-top: 1px solid var(--rule); }
section p { margin: 0; }
section p + p { margin-top: 14px; }
.note { color: var(--soft); font-size: 16px; }
b { font-weight: 700; }

/* figures */
figure { margin: 0 0 48px; }
figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--soft); }
figcaption b { margin-right: 8px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink); }
section .span { grid-column: 1 / -1; margin: 18px 0 0; }
.runlog { margin: 8px 0 40px; }

/* diagrams: nodes are HTML on a grid, lines are drawn by flow.js */
.diagram-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.diagram-head figcaption { margin: 0; max-width: 46em; }
.flowbtn {
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--grey);
  border-radius: 5px;
  background: transparent;
  color: var(--soft);
  font: 500 13px/1.3 var(--sans);
  cursor: pointer;
}
.flowbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 16px;
  align-items: center;
  font-family: var(--sans);
}
.board > .node, .board > .stage { grid-column: var(--dc); grid-row: var(--dr); }
.stage { align-self: end; padding-bottom: 2px; font-size: 12px; color: var(--faint); }
.node {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 9px 12px 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.node b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.node i { display: block; margin-top: 3px; font-size: 12.5px; font-style: normal; line-height: 1.35; color: var(--soft); }
.node.person { border-color: var(--ink); }
.node.ask { border-radius: 16px; }
.node.quiet { padding-left: 6px; background: transparent; border-color: transparent; }
.node.quiet b { color: var(--soft); }
.node.agent.teal { background: var(--teal-bg); border-color: var(--teal-line); }
.node.agent.ochre { background: var(--ochre-bg); border-color: var(--ochre-line); }
.node.agent.navy { background: var(--navy-bg); border-color: var(--navy-line); }
.node.agent.plain { background: var(--paper-2); border-color: #cdc5b4; }
.node.conn { background: var(--navy-bg); border-color: var(--navy-line); }
.node.record { background: var(--surface-2); }

svg.edges { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
svg.edges path { fill: none; stroke-width: 1.3; }
svg.edges path.teal { stroke: var(--teal); }
svg.edges path.ochre { stroke: var(--ochre); }
svg.edges path.navy { stroke: var(--navy); }
svg.edges path.grey { stroke: var(--grey); }
svg.edges circle { opacity: 0.9; }
svg.edges circle.teal, svg.edges .ah.teal { fill: var(--teal); }
svg.edges circle.ochre, svg.edges .ah.ochre { fill: var(--ochre); }
svg.edges circle.navy, svg.edges .ah.navy { fill: var(--navy); }
svg.edges circle.grey, svg.edges .ah.grey { fill: var(--grey); }
svg.edges path.ah { stroke: none; }
svg.edges text {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--soft);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 0; font-family: var(--sans); font-size: 12.5px; color: var(--soft); }
.legend span::before { content: ""; display: inline-block; width: 22px; margin-right: 7px; border-top: 1.5px solid var(--c); vertical-align: middle; }

/* product screens */
.screen {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.screen-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--soft);
}
.screen-bar b { font-size: 13px; font-weight: 600; color: var(--ink); }

.queue { list-style: none; margin: 0; padding: 0; }
.queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 11px 16px; border-top: 1px solid var(--rule-2); }
.queue li:first-child { border-top: 0; }
.queue .subj { font-weight: 600; }
.queue .state { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.queue .meta { grid-column: 1 / -1; font-size: 13px; color: var(--soft); }
.state.ready { color: var(--teal); }
.state.you { color: var(--ochre); }
.state.done, .state.none { color: var(--faint); }

.doc-body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; }
.sheet { padding: 14px 18px 16px; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sheet th { padding: 0 10px 6px 0; border-bottom: 1px solid var(--ink); text-align: left; font-size: 12px; font-weight: 600; color: var(--soft); }
.sheet td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.sheet td:first-child { width: 31%; font-weight: 600; }
.sheet sup { margin-left: 2px; font-size: 10px; color: var(--soft); }
.risk { color: var(--red); font-weight: 600; }
.finished { color: var(--navy); font-weight: 600; }
.sheet-note { margin: 10px 0 0; font-size: 12.5px; color: var(--soft); }
.sources { padding: 14px 16px; background: var(--surface-2); border-left: 1px solid var(--rule); font-size: 13px; }
.sources .src-h { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--soft); }
.sources ol { margin: 0; padding-left: 18px; }
.sources li + li { margin-top: 6px; }

.exceptions { list-style: none; margin: 0; padding: 0; }
.exceptions > li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-top: 1px solid var(--rule-2); }
.exceptions > li:first-child { border-top: 0; }
.exceptions .rank { font-family: var(--mono); font-size: 12.5px; line-height: 20px; color: var(--faint); }
.exceptions .t { font-weight: 600; }
.exceptions .kind { font-size: 12px; line-height: 20px; color: var(--faint); white-space: nowrap; }
.exceptions .why { grid-column: 2 / -1; font-size: 13px; color: var(--soft); }
.exceptions .urgent .rank, .exceptions .urgent .t { color: var(--red); }
.periods {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 104px repeat(7, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--soft);
}
.periods .d { text-align: center; color: var(--faint); }
.periods .c { height: 14px; border-radius: 2px; }
.c.open, .periods-key .k-open::before { background: var(--navy-bg); box-shadow: inset 0 0 0 1px var(--navy-line); }
.c.team, .periods-key .k-team::before { background: repeating-linear-gradient(135deg, var(--navy-line) 0 2px, var(--navy-bg) 2px 5px); }
.c.shut, .periods-key .k-shut::before { background: #4a5355; }
.c.late, .periods-key .k-late::before { background: var(--red-bg); box-shadow: inset 0 0 0 1px var(--red); }
.periods-key { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: var(--soft); }
.periods-key span::before { content: ""; display: inline-block; width: 12px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }

/* run log */
.log { list-style: none; margin: 0; padding: 12px 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--mono); font-size: 13px; line-height: 1.55; }
.log li { display: grid; grid-template-columns: 5ch 5ch minmax(0, 1fr); gap: 0 14px; padding: 3px 16px; }
.log time { color: var(--faint); }
.log .who { font-weight: 600; }
.who.inbox { color: var(--teal); }
.who.docs { color: var(--ochre); }
.who.close { color: var(--navy); }
.log .quiet .msg { color: var(--faint); }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--soft);
  font-size: 14px;
}
footer a { color: var(--soft); }
footer a + a { margin-left: 16px; }

@media (min-width: 720px) {
  .page { padding-top: 48px; }
  h1 { font-size: 42px; }
  section { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px 24px; }
  h2 { margin: 3px 0 0; }
  .wide { width: min(940px, calc(100vw - 48px)); margin-left: calc((100% - min(940px, calc(100vw - 48px))) / 2); }
  .board.lineage { column-gap: 64px; row-gap: 28px; }
  .board.pipeline { grid-template-columns: 250px 210px; column-gap: 96px; row-gap: 26px; }
  .board.arch { grid-template-columns: 112px repeat(4, minmax(0, 1fr)); column-gap: 60px; row-gap: 14px; }
}

@media (max-width: 719px) {
  .board { grid-template-columns: repeat(var(--mcols), minmax(0, 1fr)); column-gap: 10px; row-gap: 30px; }
  .board > .node { grid-column: var(--mc); grid-row: var(--mr); }
  .board > .stage, .board > .wide-only { display: none; }
  .board.pipeline { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 56px; row-gap: 26px; }
  .board.arch { column-gap: 8px; row-gap: 34px; }
  .board.arch > .node.conn { align-self: stretch; }
  .node { padding: 8px 9px; }
  .node b { font-size: 13px; }
  .node i { font-size: 12px; }
  .doc-body { grid-template-columns: minmax(0, 1fr); }
  .sources { border-left: 0; border-top: 1px solid var(--rule); }
}