/* Janela's own styling, small on purpose and meant to be overridden
   (ADR 016). A host includes it with stylesheet_link_tag "janela"; the engine
   never injects it into a layout it does not own.

   The names follow one rule, janela-{property}-{scale}, and the scale is
   the integer stored on the record. An analyst's number chooses a rule that
   is already written here rather than reaching CSS as a length, so there is
   nothing to inject and nothing to escape. */

:root {
  /* Retheme the whole spacing scale by setting this one value. */
  --janela-space: 0.25rem;
  --janela-line: rgba(128, 128, 128, 0.3);
  --janela-accent: rgb(54, 162, 235);

  /* The categorical palette (ADR 046): a bar, a doughnut slice or a pie
     slice is drawn in the colour for its position, first to eighth, and
     everything after the eighth in the neutral. Never cycled. The first
     follows the accent, so a host's own colour still leads. */
  --janela-series-1: var(--janela-accent);
  --janela-series-2: #eb6834;
  --janela-series-3: #1baf7a;
  --janela-series-4: #eda100;
  --janela-series-5: #e87ba4;
  --janela-series-6: #008300;
  --janela-series-7: #4a3aa7;
  --janela-series-8: #e34948;
  --janela-series-other: #8c8c8c;
}

.janela-frame { display: grid; }

/* A grid item that cannot shrink below its content overflows the column, and
   a chart is exactly that. */
.janela-frame > * { min-width: 0; }

.janela-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.janela-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.janela-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.janela-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.janela-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.janela-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.janela-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.janela-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.janela-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.janela-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.janela-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.janela-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.janela-gap-0 { gap: calc(var(--janela-space) * 0); }
.janela-gap-1 { gap: calc(var(--janela-space) * 1); }
.janela-gap-2 { gap: calc(var(--janela-space) * 2); }
.janela-gap-3 { gap: calc(var(--janela-space) * 3); }
.janela-gap-4 { gap: calc(var(--janela-space) * 4); }
.janela-gap-5 { gap: calc(var(--janela-space) * 5); }
.janela-gap-6 { gap: calc(var(--janela-space) * 6); }
.janela-gap-7 { gap: calc(var(--janela-space) * 7); }
.janela-gap-8 { gap: calc(var(--janela-space) * 8); }

.janela-span-1 { grid-column: span 1; }
.janela-span-2 { grid-column: span 2; }
.janela-span-3 { grid-column: span 3; }
.janela-span-4 { grid-column: span 4; }
.janela-span-5 { grid-column: span 5; }
.janela-span-6 { grid-column: span 6; }
.janela-span-7 { grid-column: span 7; }
.janela-span-8 { grid-column: span 8; }
.janela-span-9 { grid-column: span 9; }
.janela-span-10 { grid-column: span 10; }
.janela-span-11 { grid-column: span 11; }
.janela-span-12 { grid-column: span 12; }

/* A dashboard nobody can read on a phone is not a choice worth offering, so
   the collapse is here rather than in the data (ADR 016). */
@media (max-width: 40rem) {
  .janela-frame { grid-template-columns: minmax(0, 1fr); }
  .janela-frame > * { grid-column: span 1; }
}

/* Enough base styling that a pane is legible on install (#15). Without it a
   table pane runs its label into its number. */
.janela-value { margin: 0; display: flex; flex-direction: column; gap: calc(var(--janela-space) * 1); }
.janela-value-label { font-size: 0.85rem; opacity: 0.7; }
.janela-value-number { font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* How prominent a single value is (ADR 050). Step 2 is what every value is
   without one. The label stays the same small size at every step. */
.janela-prominence-1 .janela-value-number { font-size: 1.25rem; }
.janela-prominence-2 .janela-value-number { font-size: 2rem; }
.janela-prominence-3 .janela-value-number { font-size: 3.5rem; }

/* Words in a stored frame (ADR 039). A heading and paragraphs, spaced by the
   same unit as everything else and otherwise left to the page. */
.janela-content > :first-child { margin-top: 0; }
.janela-content > :last-child { margin-bottom: 0; }
.janela-content-heading { font-size: 1.1rem; margin: 0 0 calc(var(--janela-space) * 2); }

table.janela-pane { width: 100%; border-collapse: collapse; }
table.janela-pane caption { text-align: left; font-weight: 600; margin-bottom: calc(var(--janela-space) * 2); }
table.janela-pane td { padding: calc(var(--janela-space) * 1.5) 0; border-top: 1px solid var(--janela-line); }
table.janela-pane td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
/* A companion column (ADR 051): a header row names the columns, a measure's
   numbers sit right like the primary's, and a dimension's fact is a word and
   sits left. */
table.janela-pane th { text-align: right; font-size: 0.85rem; font-weight: 600; opacity: 0.7; padding-bottom: calc(var(--janela-space) * 1); }
table.janela-pane th:first-child, table.janela-pane th.janela-fact, table.janela-pane td.janela-fact { text-align: left; font-variant-numeric: normal; }
table.janela-pane button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: calc(var(--janela-space) * 0.5) calc(var(--janela-space) * 2);
  border-radius: 999px;
  cursor: pointer;
}
table.janela-pane button:hover { background: var(--janela-line); }
table.janela-pane button[aria-pressed="true"] { background: var(--janela-accent); color: white; }

.janela-chart-title { font-weight: 600; margin-bottom: calc(var(--janela-space) * 2); }
canvas.janela-chart { width: 100% !important; max-height: 20rem; }

/* A pane with a height draws its chart into a box of fixed size (ADR 047), five
   steps of the spacing unit so a theme that moves the unit moves them. Step 4
   is the 20rem the cap allows a chart anyway. The cap stops applying inside a
   box, where the box is the size. */
.janela-chart-box { position: relative; }
.janela-chart-box canvas.janela-chart { max-height: none; }
.janela-h-1 { height: calc(var(--janela-space) * 24); }
.janela-h-2 { height: calc(var(--janela-space) * 40); }
.janela-h-3 { height: calc(var(--janela-space) * 56); }
.janela-h-4 { height: calc(var(--janela-space) * 80); }
.janela-h-5 { height: calc(var(--janela-space) * 112); }

/* A chart pane is a <figure>, and a browser gives a figure 40px of margin
   either side. Harmless in a wide column and most of a narrow one. */
figure.janela-pane { margin: 0; }

/* A doughnut or a pie is inline SVG with a legend beside it (ADR 046). The
   gap between slices is drawn in the page's own colour so no boundary
   depends on hue alone. */
.janela-ring-svg { display: block; width: 100%; max-width: 16rem; max-height: 16rem; margin: 0 auto calc(var(--janela-space) * 3); }
.janela-ring-slice { fill-rule: evenodd; stroke: Canvas; stroke-width: 0.8; }
.janela-ring-slice[data-action] { cursor: pointer; }
.janela-ring-slice.janela-dim { opacity: 0.25; }
table.janela-legend { width: 100%; border-collapse: collapse; }
table.janela-legend td { padding: calc(var(--janela-space) * 1.5) 0; border-top: 1px solid var(--janela-line); }
table.janela-legend td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.janela-legend button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: calc(var(--janela-space) * 0.5) calc(var(--janela-space) * 2);
  border-radius: 999px;
  cursor: pointer;
}
table.janela-legend button:hover { background: var(--janela-line); }
table.janela-legend button[aria-pressed="true"] { background: var(--janela-accent); color: white; }
.janela-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; vertical-align: middle; }

/* A host whose own markup already says what a pane is puts this on any
   ancestor, and the caption, the value's label and the chart's title stop
   being drawn without leaving the accessibility tree. Hidden rather than
   removed on purpose: each is its pane's accessible name (a chart's by
   aria-labelledby since ADR 042), so display: none would land a screen
   reader on a grid of numbers with nothing to say what they measure. The
   rule ships here because that is easy to get wrong and every host would
   otherwise write it (ADR 036, #26). */
.janela-own-headings table.janela-pane caption,
.janela-own-headings .janela-value-label,
.janela-own-headings .janela-chart-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Janela's own pages (ADR 013). Scoped to a class the engine's layout sets,
   so including this stylesheet changes nothing about a host's own pages. */
.janela-page {
  max-width: 70rem;
  margin: 0 auto;
  padding: calc(var(--janela-space) * 6);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.janela-heading { margin: 0 0 calc(var(--janela-space) * 2); font-size: 1.5rem; }
.janela-crumb { margin: 0 0 calc(var(--janela-space) * 6); font-size: 0.875rem; opacity: 0.7; }
.janela-exit { margin: 0 0 calc(var(--janela-space) * 6); font-size: 0.875rem; opacity: 0.7; }
.janela-card {
  display: flex;
  flex-direction: column;
  gap: var(--janela-space);
  padding: calc(var(--janela-space) * 4);
  border: 1px solid var(--janela-line);
  border-radius: calc(var(--janela-space) * 2);
  color: inherit;
  text-decoration: none;
}
.janela-card:hover { border-color: var(--janela-accent); }
.janela-card-name { font-weight: 600; }
.janela-card-meta { font-size: 0.875rem; opacity: 0.7; }
.janela-subheading { margin: calc(var(--janela-space) * 8) 0 calc(var(--janela-space) * 2); font-size: 1.125rem; }
.janela-muted, .janela-hint { font-size: 0.875rem; opacity: 0.7; }
.janela-flash {
  margin: 0 0 calc(var(--janela-space) * 4);
  padding: calc(var(--janela-space) * 3);
  border-radius: calc(var(--janela-space) * 2);
  background: var(--janela-line);
}

/* The analyst's editing surface. Plain HTML controls, because these pages run
   no JavaScript (ADR 018): every form submits and every button is a button. */
.janela-form { display: flex; flex-direction: column; gap: calc(var(--janela-space) * 4); max-width: 30rem; }
.janela-field { display: flex; flex-direction: column; gap: var(--janela-space); }
.janela-field label { font-size: 0.875rem; font-weight: 600; }
.janela-field input, .janela-field select {
  font: inherit;
  padding: calc(var(--janela-space) * 2);
  border: 1px solid var(--janela-line);
  border-radius: calc(var(--janela-space) * 1.5);
  background: transparent;
  color: inherit;
}
/* One further series per row on the pane form (ADR 062): its measure first,
   then what is left unsaid about it, each a plain control. */
.janela-series { border: 1px solid var(--janela-line); border-radius: calc(var(--janela-space) * 1.5); padding: calc(var(--janela-space) * 3); }
.janela-series legend { font-size: 0.875rem; font-weight: 600; padding: 0 calc(var(--janela-space) * 1); }
.janela-series-slot { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--janela-space) * 2); padding-top: calc(var(--janela-space) * 3); }
.janela-series-slot label { font-weight: 400; }
.janela-series-slot input[type="text"] { flex: 1 1 10rem; }
.janela-actions { display: flex; flex-wrap: wrap; gap: calc(var(--janela-space) * 3); align-items: center; }
.janela-actions form { display: inline; }
.janela-button {
  font: inherit;
  padding: calc(var(--janela-space) * 2) calc(var(--janela-space) * 4);
  border: 1px solid var(--janela-line);
  border-radius: calc(var(--janela-space) * 1.5);
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.janela-button:hover { border-color: var(--janela-accent); }
.janela-button[disabled] { opacity: 0.4; cursor: default; }
.janela-danger { color: #b3261e; }
.janela-errors { margin: 0; padding-left: calc(var(--janela-space) * 5); color: #b3261e; }
.janela-list { list-style: none; margin: 0; padding: 0; }
.janela-list-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--janela-space) * 3);
  align-items: center;
  padding: calc(var(--janela-space) * 3) 0;
  border-top: 1px solid var(--janela-line);
}
.janela-list-name { flex: 1 1 12rem; font-weight: 600; }

.janela-empty { margin: 0; opacity: 0.7; }
.janela-error { margin: 0; }