@import url("../brand/tokens.css");
@font-face {
  font-family: "Martian Mono";
  src: url("../brand/assets/MartianMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../brand/assets/MartianMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
/* Delivery-only brand and layout overrides; geometry/content come from docs/design/. */
:root {
  --font: var(--gid-font);
  color-scheme: dark;
  scrollbar-color: var(--gid-control-border) var(--gid-background);
}
html, body { background: var(--gid-background); color: var(--gid-text); }
body { padding: 0 24px; overflow-y: hidden; }
::selection { background: var(--gid-primary); color: var(--gid-on-primary); }
header h1, .label { color: var(--gid-primary); fill: var(--gid-primary); }
header h1 { font-weight: 700; text-wrap: balance; }
.label { font-size: 18px; font-weight: 700; }
.callout { font-size: 16px; }
.small { font-size: 14px; }
svg rect { rx: 0; }
header .date { font-style: normal; }
aside.sidebar, .detail, .detail img, .detail video, .status { border-radius: 0; }
.detail img, .detail video { aspect-ratio: 16 / 9; object-fit: contain; }
.detail { background: var(--gid-surface); }
.detail h3 { color: var(--gid-primary); }
.detail.open-note { background: var(--gid-surface-alt); }
.status { font-weight: 700; letter-spacing: 0; }
.st-decided, .st-direction, .st-experiment { background: var(--gid-surface); color: var(--gid-primary); border-color: var(--gid-control-border); }
.st-direction { color: var(--gid-accent); border-color: var(--gid-accent); }
.st-experiment { border-color: var(--gid-primary); }
.key { fill: var(--gid-surface); }
.kt { font-family: var(--gid-font); font-weight: 400; }
a { color: var(--gid-link); text-underline-offset: 0.3em; }
.sheet { height: auto; min-height: 940px; }
.sheet > * { min-width: 0; }
main { min-height: 620px; justify-content: flex-start; overflow-x: auto; }
main svg { height: auto; max-height: none; min-width: 780px; }
a:focus-visible, main:focus-visible { outline: 3px solid var(--gid-focus); outline-offset: 3px; }
@media (max-width: 1000px) {
  .sheet { min-height: 0; grid-template-rows: auto auto auto auto; }
  main { min-height: 0; }
  main svg { width: 100%; min-width: 780px; }
}
@media (max-width: 640px) {
  body { padding: 0 16px; }
  .sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; grid-template-areas: "head" "main" "side" "detail" "foot"; }
  header h1 { font-size: 24px; }
  main { display: block; overflow-x: auto; }
  main svg { display: block; width: 900px; min-width: 900px; }
}