/* Slant60 — the platform's own frontend.
 *
 * The palette and the display face are the ones slant60.com already serves (marketing/index.html):
 * paper #F4F0E6, ink #0E0D0B, Anton. Nothing here invents a second brand. What is added is
 * SEMANTIC colour only — pine for sound, ochre for caution, brick for overdue or failing — because
 * condition and deadlines are the two things this record exists to state, and a reader must be able
 * to see them without reading.
 *
 * The one structural device is the brand's own geometry: Slant60, the A-frame, a 60° pitch. It is
 * the mark, and it is the tick that joins a component to its children. It is not scattered anywhere
 * it would only be decoration.
 */

:root {
  color-scheme: light;

  --paper: #f4f0e6;
  --card: #fbf9f3;
  --ink: #0e0d0b;
  --muted: #6b6558;
  --faint: #928b7c;
  --rule: #ddd6c4;
  --rule-strong: #c4bba4;

  /* Semantic, never decorative. Condition bands 1–5 and obligation status read off these. */
  --pine: #2f5d50;
  --pine-wash: #e7ede9;
  --ochre: #9a6f18;
  --ochre-wash: #f4ecd8;
  --brick: #8c2f2a;
  --brick-wash: #f3e3e0;
  --slate: #3a566b;
  --slate-wash: #e6ecef;

  --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-micro: 11px;
  --t-xs: 12.5px;
  --t-sm: 14px;
  --t-body: 15.5px;
  --t-lg: 20px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 18px; --s5: 28px; --s6: 44px;
  --radius: 3px;
  --lift: 0 1px 0 #fff inset, 0 1px 2px rgba(14, 13, 11, 0.07), 0 6px 14px -10px rgba(14, 13, 11, 0.4);
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--paper); color: var(--ink); }

body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s4); }

/* ── The mark: an A-frame at a 60° pitch ─────────────────────────────────────────────────── */

.mark { display: block; width: 26px; height: 22px; flex: none; }
.mark path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: square; }

/* ── Masthead ────────────────────────────────────────────────────────────────────────────── */

.top { border-bottom: 1px solid var(--rule-strong); background: var(--paper); }
.top-in { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) 0; }
.brand { display: flex; align-items: center; gap: var(--s2); }
.brand b { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: .02em; text-transform: uppercase; }
.top-who { margin-left: auto; text-align: right; font-size: var(--t-xs); color: var(--muted); }
/* An identity can be an email or a role ARN; it is provenance, not headline, so it is held to
   one line and told to get out of the way of the record. */
.top-who .id { display: block; max-width: 34ch; margin-left: auto; font-family: var(--mono);
  font-size: var(--t-micro); color: var(--faint); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; direction: rtl; }

h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 5.2vw, 52px); line-height: 1.02; letter-spacing: .01em;
  margin: 0 0 var(--s2);
}
.sub { margin: 0; max-width: 60ch; color: var(--muted); font-size: var(--t-sm); }

/* The provenance stamp. The record's own rule: real rows exist, they must not DISPLAY before
   launch, so what tier the app is serving is stated on the page rather than assumed. */
.stamp {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--pine); color: var(--pine); background: var(--pine-wash);
  border-radius: 2px; padding: 3px 8px;
  font-family: var(--mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em;
}
.stamp[data-tier="real"] { border-color: var(--brick); color: var(--brick); background: var(--brick-wash); }

/* ── Counts: the record's own size, stated once ──────────────────────────────────────────── */

.tier-line { margin: var(--s3) 0 0; }
/* The counts close the section; the section's own rule is the only line under them. */
.counts { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); padding: var(--s5) 0 0; }
.count b { display: block; font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.count span { display: block; margin-top: 3px; font-size: var(--t-xs); color: var(--muted); }
.count[data-attention="yes"] b { color: var(--brick); }

/* ── Sections ────────────────────────────────────────────────────────────────────────────── */

/* The PAGE's sections only. A bare `section` selector also caught the diagram's group cards, which
   are sections too, and gave each one 44px of padding it never asked for. */
main > section { padding: var(--s6) 0; border-bottom: 1px solid var(--rule); }
main > section:last-of-type { border-bottom: 0; }

.sec-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.sec-head h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: var(--t-lg); letter-spacing: .03em; margin: 0;
}
.sec-head p { margin: 0; color: var(--muted); font-size: var(--t-sm); max-width: 62ch; }
.sec-head .n { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); }

/* ── Panels ──────────────────────────────────────────────────────────────────────────────── */

.two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 9fr); gap: var(--s4); align-items: start; }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--lift); }
.panel-head { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.panel-head h3 { margin: 0; font-size: var(--t-sm); font-weight: 650; }
.panel-head .n { margin-left: auto; font-family: var(--mono); font-size: var(--t-micro); color: var(--faint); }
.panel-body { padding: var(--s3) var(--s4) var(--s4); }
.panel-body.flush { padding: 0; }

/* ── The component tree, joined by the 60° pitch ─────────────────────────────────────────── */

.tree { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.tree li { margin: 0; }
.node {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 9px var(--s4) 9px calc(var(--s4) + var(--depth, 0) * 20px);
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  font: inherit; font-size: var(--t-sm); color: inherit; text-align: left; cursor: pointer;
  position: relative;
}
.node:hover { background: #f6f2e8; }
.node[aria-current="true"] { background: var(--pine-wash); box-shadow: inset 3px 0 0 var(--pine); }
/* The pitch: a child hangs off its parent on a 60° line, the roof angle the brand is named for. */
.node[data-depth]:not([data-depth="0"])::before {
  content: ""; position: absolute; left: calc(var(--s4) + (var(--depth) - 1) * 20px + 5px);
  top: 0; bottom: 50%; width: 11px;
  border-left: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  transform: skewX(-30deg); transform-origin: bottom left;
}
.node-name { min-width: 0; }
.node-name b { display: block; font-weight: 600; }
.node-name span { display: block; font-size: var(--t-micro); color: var(--faint); font-family: var(--mono); }
.node-chips { margin-left: auto; display: flex; gap: 5px; flex: none; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 1px 6px;
  font-size: var(--t-micro); color: var(--muted); background: #fff; white-space: nowrap;
}
.chip[data-tone="ok"] { border-color: var(--pine); color: var(--pine); background: var(--pine-wash); }
.chip[data-tone="warn"] { border-color: var(--ochre); color: var(--ochre); background: var(--ochre-wash); }
.chip[data-tone="bad"] { border-color: var(--brick); color: var(--brick); background: var(--brick-wash); }
.chip[data-tone="info"] { border-color: var(--slate); color: var(--slate); background: var(--slate-wash); }
.chip .mono { font-family: var(--mono); }

/* ── Facts ───────────────────────────────────────────────────────────────────────────────── */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.facts div { min-width: 0; }
.facts dt { font-size: var(--t-micro); color: var(--faint); text-transform: none; }
.facts dd { margin: 2px 0 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

/* ── Timeline: who did the work, when, and whether it recurs ─────────────────────────────── */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.timeline > li:first-child { border-top: 0; }
.when { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.when small { display: block; color: var(--faint); font-size: var(--t-micro); }
.ev b { font-weight: 600; }
.ev-meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 5px; }
.cite {
  margin-top: 6px; padding-left: var(--s3); border-left: 2px solid var(--rule-strong);
  font-size: var(--t-xs); color: var(--muted);
}
.cite em { font-style: normal; color: var(--ink); }

.empty { padding: var(--s4); color: var(--muted); font-size: var(--t-sm); }
.empty b { display: block; color: var(--ink); margin-bottom: 3px; }

/* ── Rows (obligations, meetings, reserve) ───────────────────────────────────────────────── */

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: baseline; gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.rows li:last-child { border-bottom: 0; }
.rows .grow { flex: 1; min-width: 0; }
.rows .grow small { display: block; color: var(--faint); font-size: var(--t-micro); }
.rows .num { font-family: var(--mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--muted); }

.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--s4); align-items: start; }

/* ── The diagram ─────────────────────────────────────────────────────────────────────────── */

/* The groups flow like the columns of a printed index rather than a grid: opening a table
   makes its group taller, and a grid would hold every other group's row open beside it. */
.groups { columns: 4 240px; column-gap: var(--s4); }
.group { break-inside: avoid; margin-bottom: var(--s4); }
.group { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--lift); overflow: hidden; }
.group { display: inline-block; width: 100%; vertical-align: top; }
.group > header { padding: var(--s3) var(--s4) var(--s2); border-bottom: 1px solid var(--rule); }
.group h3 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: var(--t-sm); letter-spacing: .05em; }
.group p { margin: 4px 0 0; font-size: var(--t-micro); color: var(--muted); line-height: 1.45; }
.tables { list-style: none; margin: 0; padding: 0; }
.tbl { border-bottom: 1px solid var(--rule); }
.tbl:last-child { border-bottom: 0; }
.tbl > button {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: 7px var(--s4); background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-xs); color: inherit; text-align: left;
}
.tbl > button:hover { background: #f6f2e8; }
.tbl[data-on="yes"] > button { background: var(--pine-wash); color: var(--pine); font-weight: 600; }
.tbl[data-linked="yes"] > button { background: var(--slate-wash); }
.tbl .cols { margin-left: auto; color: var(--faint); font-size: var(--t-micro); }
.tbl-detail { padding: var(--s2) var(--s4) var(--s3); border-top: 1px dashed var(--rule); background: #fdfcf8; }
.tbl-detail h4 { margin: 0 0 4px; font-size: var(--t-micro); color: var(--faint); font-weight: 600; }
.tbl-detail ul { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tbl-detail li { font-family: var(--mono); font-size: var(--t-micro); color: var(--muted); background: #fff; border: 1px solid var(--rule); border-radius: 2px; padding: 1px 5px; }
.tbl-detail li[data-fk="yes"] { border-color: var(--slate); color: var(--slate); }

.legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); font-size: var(--t-xs); color: var(--muted); }

/* The decisions the model was built on, served by the record itself (overview.decisions). */
.decisions { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); }
.decisions li { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.decisions b { display: block; font-size: var(--t-sm); }
.decisions span { display: block; margin-top: 3px; font-size: var(--t-xs); color: var(--muted); }
.decisions code { font-family: var(--mono); font-size: var(--t-micro); color: var(--slate); }

/* ── Foot ────────────────────────────────────────────────────────────────────────────────── */

.foot { padding: var(--s5) 0 var(--s6); color: var(--faint); font-size: var(--t-xs); }
.foot code { font-family: var(--mono); }

/* ── The guide ───────────────────────────────────────────────────────────────────────────── */

/* On a narrow screen, a sheet over the page's corner. On a wide one, a dock beside the record that the
   page makes room for, so the record stays readable, and what the guide rings stays in view, while it
   talks about it. */
.guide-open {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 20;
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--paper); background: var(--ink);
  border: 0; border-radius: var(--radius); padding: 10px 16px; cursor: pointer; box-shadow: var(--lift);
}
.guide {
  position: fixed; right: var(--s4); bottom: calc(var(--s4) + 48px); z-index: 20;
  width: min(400px, calc(100vw - 2 * var(--s4))); max-height: min(70vh, 640px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: 0 12px 32px -12px rgba(14, 13, 11, 0.45);
}
.guide[hidden] { display: none; }
.guide-head { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.guide-head h2 { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: var(--t-sm); letter-spacing: .05em; }
.guide-close { margin-left: auto; font: inherit; font-size: var(--t-xs); color: var(--muted); background: none; border: 0; cursor: pointer; }
.guide-log { list-style: none; margin: 0; padding: var(--s3) var(--s4); overflow-y: auto; flex: 1; min-height: 80px; }
.guide-msg { margin: 0 0 var(--s3); font-size: var(--t-sm); white-space: pre-wrap; }
.guide-you { color: var(--muted); padding-left: var(--s3); border-left: 2px solid var(--rule-strong); }
.guide-note { color: var(--muted); font-size: var(--t-xs); }
.guide-error { color: var(--brick); font-size: var(--t-xs); }
/* A citation: a link to the source, set like the chips the record uses. */
.guide-cite {
  display: inline-block; margin: 0 1px; padding: 0 5px; border: 1px solid var(--slate); border-radius: 2px;
  font-family: var(--mono); font-size: var(--t-micro); color: var(--slate); background: var(--slate-wash);
  text-decoration: none; white-space: nowrap;
}
.guide-cite:hover, .guide-cite:focus-visible { background: #fff; }
.guide-caption { margin: 0; padding: var(--s2) var(--s4); font-size: var(--t-xs); color: var(--pine); background: var(--pine-wash); border-top: 1px solid var(--rule); }
.guide-ask { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); }
.guide-ask label { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--faint); }
.guide-ask textarea { font: inherit; font-size: var(--t-sm); resize: vertical; min-height: 40px; padding: 6px 8px;
  border: 1px solid var(--rule-strong); border-radius: 2px; background: #fff; color: var(--ink); }
.guide-ask button { align-self: end; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--paper); background: var(--pine);
  border: 0; border-radius: 2px; padding: 8px 14px; cursor: pointer; }
.guide-ask button:disabled { opacity: .6; cursor: progress; }

/* Luna's ring (moonrock's app, .luna-ring), in Slant60's pine: a 2px line and a soft halo that
   breathes out and back. Put on and taken off by guide.js. */
.guide-ring { position: relative; border-radius: 2px;
  box-shadow: 0 0 0 2px var(--pine), 0 0 0 7px rgba(47, 93, 80, 0.16);
  animation: guide-ring-pulse 1.3s ease-in-out infinite; }
@keyframes guide-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--pine), 0 0 0 7px rgba(47, 93, 80, 0.16); }
  50%      { box-shadow: 0 0 0 2px var(--pine), 0 0 0 11px transparent; }
}
/* With reduced motion the guide focuses instead of ringing; the focus is what shows. */
[data-guide]:focus { outline: 2px solid var(--pine); outline-offset: 2px; }

@media (min-width: 1100px) {
  body:has(#guide:not([hidden])) { padding-right: 420px; }
  body:has(#guide:not([hidden])) .guide-open { display: none; }
  .guide { top: 0; right: 0; bottom: 0; width: 420px; max-height: none; border-radius: 0; border-width: 0 0 0 1px;
    box-shadow: -10px 0 24px -18px rgba(14, 13, 11, 0.45); }
}

@media (max-width: 860px) {
  .two { grid-template-columns: minmax(0, 1fr); }
  .tree { max-height: 340px; }
  .counts { gap: var(--s4) var(--s5); }
  .count b { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── joining and inviting ─────────────────────────────────────────────────────────────────── */
.welcome, .invite { margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--rule, #d8d2c4); border-radius: 10px; max-width: 34rem; }
.welcome h2, .invite h2 { margin: 0 0 .35rem; font-size: 1.1rem; }
.welcome p, .invite p { margin: 0 0 .75rem; }
.welcome .code, .invite input, .invite select { font: inherit; padding: .5rem .65rem; border: 1px solid var(--rule, #c9c2b3); border-radius: 6px; margin: 0 .5rem .5rem 0; }
.welcome .code { letter-spacing: .12em; text-transform: uppercase; min-width: 14rem; }
.welcome button, .invite button { font: inherit; padding: .5rem .9rem; border-radius: 6px; border: 0; background: var(--ink, #1f2a2e); color: #fff; cursor: pointer; }
.welcome .code-error, .invite .invite-error { color: var(--alarm, #a33b2b); margin-top: .5rem; }
.invite .invite-code { font-size: 1.25rem; letter-spacing: .12em; }