/* The project layer on top of ds.css (Modernist).
 *
 * ds.css carries every colour, space and component class; nothing here may hard-code a
 * hex or a pixel the tokens already hold. This file adds only the patterns the design
 * system has no class for: the flush-left figure row, the expanding data rows, and the
 * two pages (`/dev`, `/audit`) that predate the design.
 */

/* — page frame — */
.page { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.page-title { font-size: 30px; margin-bottom: var(--space-1); }
.page-lede { margin-bottom: var(--space-6); font-size: 14px; max-width: 64ch; }
h2 { font-size: 18px; margin: var(--space-8) 0 var(--space-3); }
.section-rule {
  padding-bottom: var(--space-6); margin-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-divider);
}

/* — the figure row: equal cells, flush left, a 2px rule down the left of each — */
.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}
.figure { padding-left: var(--space-4); border-left: 2px solid var(--color-divider); }
.figure-label,
.col-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.6; margin-bottom: var(--space-1);
}
.figure-value {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px;
}
.figure-value.accent { color: var(--color-accent-700); }

/* — expanding data rows (the prototypes' onToggle, done with <details> and no script) — */
.rows { --cols: 1fr; }
.rows-head,
.row-head {
  display: grid; grid-template-columns: var(--cols); gap: var(--space-2);
  align-items: center;
}
.rows-head {
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6;
}
.row { border-bottom: 1px solid var(--color-divider); }
.row-head { padding: var(--space-3) var(--space-2); cursor: pointer; list-style: none; }
.row-head::-webkit-details-marker { display: none; }
.row-head:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.row-head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.row-title { font-weight: 600; }
.row-detail {
  padding: var(--space-4) var(--space-6); background: var(--color-surface);
  display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: 13px;
}
.chev { opacity: 0.6; transition: transform 0.2s ease; }
.row[open] .chev { transform: rotate(180deg); }
.scroll-x { overflow-x: auto; }

/* — small text roles — */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: color-mix(in srgb, var(--color-text) 55%, transparent); padding: var(--space-3) 0; }
.note { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.ok { color: var(--color-neutral-900); }
.bad, .accent-text { color: var(--color-accent-700); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Priority bands and lateness reuse the design's tags rather than inventing colours. */
.tag.CRITICAL, .tag.overdue { border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.tag.HIGH { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag.MEDIUM, .tag.LOW { background: var(--color-neutral-100); color: var(--color-neutral-800); }

/* — the retained-value bar under an executor's task — */
.bar { flex: 1; height: 8px; background: var(--color-neutral-300); position: relative; }
.bar > span { position: absolute; inset: 0; background: var(--color-neutral-800); }
.bar > span.late { background: var(--color-accent); }

/* — plain tables (/owner, /audit, /dev, /problem): the design's .table rules — */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
tr.chain > td { background: var(--color-accent-100); }
.chain li { margin-bottom: var(--space-1); }
code {
  background: var(--color-surface); padding: 1px 4px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* /dev: raw prompts and JSON. Long lines wrap and tall blocks scroll, so a 20 000-character
   digest cannot push the rest of the page off screen. */
pre {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  padding: var(--space-3); font-size: 12px; line-height: 1.45;
  max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

/* — the sign-in split screen — */
.signin { min-height: 100vh; display: flex; flex-wrap: wrap; }
.signin-poster {
  flex: 1 1 380px; min-width: 280px; background: var(--color-accent); color: var(--color-bg);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-8); gap: var(--space-8);
}
.signin-poster h1 { font-size: min(11vw, 56px); color: var(--color-bg); margin-bottom: var(--space-4); }
.signin-poster p { max-width: 36ch; font-size: 15px; opacity: 0.9; margin: 0; }
.signin-kicker {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px;
}
.signin-foot { font-size: 12px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.08em; }
.signin-form {
  flex: 1 1 380px; min-width: 280px; display: flex; align-items: center;
  justify-content: center; padding: var(--space-8);
}
.signin-form > form { width: 100%; max-width: 340px; }
.form-error { color: var(--color-accent-700); font-size: 13px; margin-bottom: var(--space-3); }