/* The decision record's own styles, shared by the wizard's output on / and the
   worked example on /example-record. It is the artifact people send to someone
   else, so it is set like a document rather than like a web page: one column,
   a real title block, numbered sections, and tables that stay legible on a
   phone. Colours come from the host page's variables, so it inherits whichever
   theme is in force. */

.doc {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 2.4rem 2.6rem 2.8rem;
  box-shadow: var(--shadow);
  max-width: 46rem;
  margin-inline: auto;
}
@media (max-width: 640px) { .doc { padding: 1.5rem 1.2rem 2rem; border-radius: 12px; } }

/* Title block. The rule under it is what makes a page read as a document. */
.doc h1 {
  font: 700 1.75rem/1.2 var(--serif);
  letter-spacing: -0.01em;
  margin: 0 0 .35rem;
}
.doc h1 + p {
  margin: 0 0 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 2px solid var(--ink);
  color: var(--ink-2);
}
.doc h1 + p strong:first-child { color: var(--ink); }

/* Numbered sections: the numeral is set as a numeral, not read aloud. */
.doc h2 { font: 700 1.2rem/1.3 var(--serif); margin: 2.6rem 0 .7rem; }
.doc h2.numbered { display: flex; align-items: baseline; gap: .7rem; }
.doc h2.numbered .n {
  flex: none;
  width: 1.7rem; height: 1.7rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font: 700 .82rem/1 var(--mono);
  transform: translateY(-.08em);
}
.doc h2:first-of-type { margin-top: 1.8rem; }
.doc h3 {
  font: 600 .78rem/1.3 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 1.9rem 0 .5rem;
}
.doc p { margin: .7rem 0; }
.doc > p:last-child { margin-bottom: 0; }

/* At a glance: the summary a reader wants before deciding to read the rest. */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  background: var(--grid);
  border: 1px solid var(--grid);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.5rem 0 1.8rem;
}
.glance .g { background: var(--surface); padding: .85rem .9rem .9rem; }
.glance .k {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
.glance .v { font: 600 1.02rem/1.25 var(--serif); color: var(--ink); }
.glance .g:first-child .v { color: var(--accent); font-weight: 700; }

/* Lists. A list whose items all lead with a bold phrase is a set of rules —
   the ship/keep/abandon agreement — so it is set as rules, not as prose. */
.doc ul { margin: .7rem 0; padding-left: 1.15rem; }
.doc li { margin: .3rem 0; }
.doc ul.rules {
  list-style: none; padding: 0;
  border-top: 1px solid var(--hairline);
  margin: .9rem 0 1.1rem;
}
.doc ul.rules li {
  margin: 0;
  padding: .65rem .1rem .65rem 1rem;
  border-bottom: 1px solid var(--hairline);
  border-left: 3px solid var(--grid);
}
.doc ul.rules li strong:first-child { color: var(--ink); }

/* Callouts. A gate's fix is the one thing the reader has to act on. */
.doc blockquote {
  margin: 1rem 0;
  padding: .85rem 1rem;
  border-radius: 9px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
}
.doc blockquote.fix { border-left-color: var(--warn); }
.doc blockquote.fix strong { color: var(--warn); }

/* Tables scroll inside their own box rather than pushing the page sideways. */
.doc .tw { overflow-x: auto; margin: 1rem 0 1.3rem; }
.doc table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.doc th, .doc td {
  border-bottom: 1px solid var(--hairline);
  padding: .55rem .7rem;
  text-align: left; vertical-align: top;
}
.doc th {
  font: 600 .74rem/1.3 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-2);
  white-space: nowrap;
}
.doc tbody tr:last-child td { border-bottom: 0; }
.doc td strong { color: var(--warn); }
.doc td:first-child { color: var(--ink); }

.doc code {
  font: .87em var(--mono);
  background: var(--surface-2);
  padding: .12rem .34rem; border-radius: 4px;
}
.doc pre {
  background: var(--surface-2);
  padding: .9rem 1rem; border-radius: 9px;
  overflow-x: auto; font-size: .82rem; line-height: 1.5;
}
.doc pre code { background: none; padding: 0; }
.doc hr { border: 0; border-top: 1px solid var(--hairline); margin: 2rem 0 1.4rem; }
.doc details { margin: 1rem 0 0; }
.doc summary {
  cursor: pointer; color: var(--ink-2);
  font: .8rem var(--mono); letter-spacing: .03em;
}
.doc em { color: var(--ink-2); }

/* Printing it is a first-class use: it is a record. */
@media print {
  .doc { border: 0; box-shadow: none; padding: 0; max-width: none; background: #fff; }
  .doc details { display: none; }
  .doc h2 { break-after: avoid; }
  .doc .tw, .doc ul.rules, .glance { break-inside: avoid; }
}