/* A drawing sheet: the scene is the drawing, the chrome is its border, legend and title block.
   Scene colours live in gfx.js (INK) and must match these. */
:root {
  --ink: #0f2b4a;        /* the sheet */
  --ink-deep: #0b223c;   /* panels laid over it */
  --ink-raise: #143559;  /* hover */
  --rule: #3a6894;       /* drawn lines */
  --rule-faint: #23476d; /* inner rules */
  --paper: #e6f0fa;      /* lettering */
  --pencil: #8fb0cf;     /* secondary lettering */
  --chalk: #fff1c9;      /* the one highlight: selection, cursor */
  --add: #9fe3c5;
  --del: #ff9a85;
  --sans: 'IBM Plex Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --side: 360px;         /* stats drawer */
  --m: 12px;             /* sheet margin */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--ink); color: var(--paper);
  font: 13px/1.45 var(--sans); font-variant-numeric: tabular-nums;
  scrollbar-color: var(--rule) transparent;
  -webkit-font-smoothing: antialiased;
}
button, select, input { font: inherit; color: inherit; border-radius: 0; }
:focus-visible { outline: 1px solid var(--chalk); outline-offset: 2px; }
.dim { color: var(--pencil); }
kbd {
  font: 11px/1 var(--mono); color: var(--pencil);
  border: 1px solid var(--rule); padding: 2px 4px; margin-left: 6px;
}

/* Parts that belong to one view only */
body:not([data-view="commits"]) .for-commits, body:not([data-view="prs"]) .for-prs { display: none; }

#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }

/* ---------------------------------------------------------------- the sheet border */
.sheet {
  position: fixed; inset: var(--m) var(--m) var(--m); pointer-events: none;
  border: 1px solid var(--rule);
  /* drafting ticks along the top and left edges */
  background:
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 96px) top / 100% 6px no-repeat,
    repeating-linear-gradient(180deg, var(--rule) 0 1px, transparent 1px 96px) left / 6px 100% no-repeat;
}

/* ---------------------------------------------------------------- legend (top left) */
.controls {
  position: fixed; top: var(--m); left: var(--m);
  background: var(--ink-deep); border: 1px solid var(--rule); border-top: 0; border-left: 0;
}
.group { display: flex; align-items: stretch; border-top: 1px solid var(--rule-faint); }
.group:first-child { border-top: 0; }
.group .label { display: flex; align-items: center; padding: 0 12px; color: var(--pencil); }
.group button {
  background: none; border: 0; border-left: 1px solid var(--rule-faint);
  padding: 7px 12px; cursor: pointer; color: var(--pencil);
}
.group button:hover:not(:disabled) { background: var(--ink-raise); color: var(--paper); }
.group button:disabled { cursor: not-allowed; opacity: 0.45; }
.group button kbd { margin-left: 6px; }
.group button.on { color: var(--chalk); box-shadow: inset 0 -2px 0 var(--chalk); }

.check { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; color: var(--pencil); flex: 1; }
.check:hover { background: var(--ink-raise); color: var(--paper); }
.check input { position: absolute; width: 0; height: 0; opacity: 0; }
.check span::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px;
  border: 1px solid var(--rule);
}
.check input:checked + span { color: var(--paper); }
.check input:checked + span::before { background: var(--chalk); border-color: var(--chalk); box-shadow: inset 0 0 0 2px var(--ink-deep); }
.check input:focus-visible + span { outline: 1px solid var(--chalk); outline-offset: 3px; }

/* The colour key of the PR view */
.key {
  display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 420px; padding: 8px 12px 9px;
  border-top: 1px solid var(--rule-faint); font-size: 12px;
}
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key i { width: 9px; height: 9px; }
.key .ramp b { display: inline-block; width: 64px; height: 8px; }
.key .dim { flex-basis: 100%; }

/* ---------------------------------------------------------------- stats toggle (top right) */
.stats-toggle {
  position: fixed; top: var(--m); right: var(--m);
  background: var(--ink-deep); border: 1px solid var(--rule); border-top: 0; border-right: 0;
  padding: 7px 12px; cursor: pointer; color: var(--paper);
}
.stats-toggle:hover { background: var(--ink-raise); }
.stats-toggle[aria-expanded="true"] { visibility: hidden; }

/* ---------------------------------------------------------------- title block (bottom right) */
.titleblock {
  position: fixed; right: var(--m); bottom: var(--m); width: 300px;
  background: var(--ink-deep); border: 1px solid var(--rule); border-bottom: 0; border-right: 0;
}
body.stats-open .titleblock { right: calc(var(--side) + var(--m)); }
.titleblock h1 {
  margin: 0; padding: 10px 14px 0;
  font: 600 30px/1.05 var(--sans); letter-spacing: -0.01em; color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.titleblock .sub { margin: 2px 0 0; padding: 0 14px 10px; color: var(--pencil); font-style: italic; }
.titleblock dl { margin: 0; display: grid; grid-template-columns: 1fr 1.2fr 1fr; }
.titleblock dl > div { padding: 6px 14px 7px; border-top: 1px solid var(--rule-faint); min-width: 0; }
.titleblock dl > div:nth-child(n+3) { border-left: 1px solid var(--rule-faint); }
.titleblock .wide { grid-column: 1 / -1; }
.titleblock dt { color: var(--pencil); font-size: 11px; }
.titleblock dd { margin: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- stats drawer */
.stats {
  position: fixed; top: var(--m); right: var(--m); bottom: var(--m); width: var(--side);
  overflow-y: auto; background: var(--ink-deep); border-left: 1px solid var(--rule); scrollbar-width: thin;
  display: none;
}
body.stats-open .stats { display: block; }
.pane-head {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 7px 8px 7px 14px; background: var(--ink-deep); border-bottom: 1px solid var(--rule);
  color: var(--pencil);
}
.close { background: none; border: 0; padding: 0 6px; font-size: 18px; line-height: 1; color: var(--pencil); cursor: pointer; }
.close:hover { color: var(--paper); }
.stats h2 {
  font: 600 14px/1 var(--sans); color: var(--paper);
  margin: 0; padding: 18px 14px 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.stats h2 .dim { font-weight: 400; font-size: 12px; }
.stats section { padding: 0 14px 4px; }
.stats section:first-of-type { padding-top: 14px; }

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-faint); border: 1px solid var(--rule-faint); }
.kpi { background: var(--ink-deep); padding: 7px 10px; min-width: 0; }
.kpi b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.kpi span { display: block; color: var(--pencil); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.wide { grid-column: span 2; }
.kpi.wide b { font-size: 15px; }
.kpi .add { color: var(--add); }
.kpi .del { color: var(--del); }

.bars { display: flex; flex-direction: column; gap: 5px; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; }
.bar .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.bar .swatch { width: 8px; height: 8px; flex: none; }
.bar .val { color: var(--pencil); }
.bar .fill { grid-column: span 2; height: 2px; background: var(--rule-faint); }
.bar .fill { position: relative; }
.bar .fill i { display: block; height: 100%; }
.bar .fill i + i { position: absolute; left: 0; top: 0; }
/* a long path shortens its directory part, never the file name */
.bars.files .name { gap: 0; }
.bars.files .dir { color: var(--pencil); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bars.files .file { flex: none; }
.stats .aside { color: var(--pencil); margin: 8px 0 0; }
#pr-weekly { width: 100%; height: auto; }

.matrix { overflow-x: auto; }
.matrix table { border-collapse: collapse; width: 100%; }
.matrix th { font-weight: 400; color: var(--pencil); font-size: 11px; padding: 0 4px 5px; text-align: center; white-space: nowrap; }
.matrix th:first-child { text-align: left; padding-left: 0; }
.matrix td { text-align: center; padding: 4px; border: 1px solid var(--rule-faint); background: rgba(255, 241, 201, var(--a, 0)); color: var(--ink); font-weight: 500; }
.matrix td.lo { color: var(--paper); }
.matrix td.name { text-align: left; background: none; color: var(--paper); font-weight: 400; border-left: 0; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
#punchcard { width: 100%; height: auto; }

/* ---------------------------------------------------------------- tooltip & card */
.tooltip {
  position: fixed; pointer-events: none; max-width: 380px; z-index: 10;
  background: var(--ink-deep); border: 1px solid var(--rule); padding: 7px 10px;
}
.tooltip .subject { color: var(--paper); font-weight: 500; margin-bottom: 3px; }
.add { color: var(--add); }
.del { color: var(--del); }

.card {
  position: fixed; left: var(--m); bottom: var(--m);
  width: min(500px, calc(100vw - 300px - 4 * var(--m))); max-height: 50vh; overflow-y: auto;
  background: var(--ink-deep); border: 1px solid var(--rule); border-left: 0; border-bottom: 0; scrollbar-width: thin;
}
.card .card-head {
  position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 7px 8px 7px 14px; background: var(--ink-deep); border-bottom: 1px solid var(--rule-faint); color: var(--pencil);
}
.card #commit-body { padding: 10px 14px 14px; }
.card .sha { font-family: var(--mono); font-size: 12px; color: var(--chalk); }
.card h3 { font: 600 17px/1.3 var(--sans); margin: 6px 0 6px; }
.card pre {
  white-space: pre-wrap; color: var(--pencil); font: 12px/1.5 var(--mono); margin: 10px 0;
  padding-left: 10px; border-left: 1px solid var(--rule); max-height: 140px; overflow-y: auto;
}
.card table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.card td { padding: 2px 0; border-top: 1px solid var(--rule-faint); }
.card td.path { font: 12px/1.4 var(--mono); word-break: break-all; padding-right: 8px; color: var(--pencil); }
.card td.n { text-align: right; white-space: nowrap; padding-left: 6px; }
.card tr:hover td.path { color: var(--paper); }
.card tr.ignored td { opacity: 0.45; }
.card p { margin: 8px 0 0; }
.card a { color: var(--chalk); }

@media (max-width: 760px) {
  :root { --side: calc(100vw - 2 * var(--m)); --m: 8px; }
  .titleblock { width: auto; left: var(--m); top: auto; }
  .titleblock h1 { font-size: 22px; padding-top: 8px; }
  .titleblock .sub { display: none; }
  .titleblock dl { grid-template-columns: repeat(3, auto); }
  .titleblock dl > div { padding: 4px 10px 5px; }
  body.stats-open .titleblock { visibility: hidden; }
  .card { width: auto; right: var(--m); border-right: 0; bottom: var(--m); max-height: 45vh; z-index: 2; }
}