/* ==========================================================================
   Scigrow House Style — v1.0
   Derived from the Scigrow / Property Wallet Tariff Configuration Report.

   Rules (non-negotiable):
     1. One font only: Roboto.
     2. One palette only: the tokens in :root below.
     3. Every document carries the Scigrow logo (header + footer).
     4. The company is written "Scigrow" — never "SciGrow", never "SCIGROW"
        in prose. The all-caps wordmark exists only inside the logo artwork.

   Usage:
     <link rel="stylesheet" href="scigrow.css">
     <link rel="stylesheet" href="assets/logos.css">   <- inlined logo art
   For self-contained artifacts, paste both files into a <style> block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font — Roboto, and nothing else.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --sg-orange:        #EF4B38;  /* logo star, primary brand accent          */
  --sg-orange-alert:  #E8452B;  /* alert / callout bar fill                 */
  --sg-navy:          #123047;  /* page header band, headings               */
  --sg-navy-ink:      #1D2733;  /* strongest text on light surfaces         */
  --sg-slate:         #4F6378;  /* section title bars, secondary bands      */

  /* Surfaces */
  --sg-page:          #F5F5F5;  /* page / canvas background                 */
  --sg-surface:       #FFFFFF;  /* cards, table body rows                   */
  --sg-surface-alt:   #EDF2F7;  /* zebra rows, table header fill            */
  --sg-surface-tint:  #E3E8F0;  /* period / subsection header bar           */

  /* Lines */
  --sg-border:        #DEE4E9;
  --sg-border-strong: #CCD6E0;

  /* Text */
  --sg-text:          #505050;  /* body copy                                */
  --sg-text-strong:   #1D2733;
  --sg-text-muted:    #64748B;
  --sg-text-faint:    #8A98A5;
  --sg-on-dark:       #FFFFFF;
  --sg-on-dark-muted: #B9C2C8;

  /* Status */
  --sg-ok:            #2E7D32;
  --sg-warn:          #BF5700;
  --sg-error:         #C0392B;
  --sg-info:          #123047;
  --sg-accent-gold:   #F5B83D;  /* energy bolt / highlight glyph            */

  /* Categorical (time-of-use style scales — use in this order) */
  --sg-cat-1:         #D95E5E;  /* peak / high                              */
  --sg-cat-2:         #EDAB59;  /* standard / medium                        */
  --sg-cat-3:         #A3CF7D;  /* off-peak / low                           */
  --sg-cat-4:         #4F6378;
  --sg-cat-5:         #7FB3D5;
  --sg-cat-6:         #B39DDB;

  /* Type scale */
  --sg-font:          'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --sg-fs-micro:      9px;
  --sg-fs-xs:         10px;
  --sg-fs-sm:         11px;
  --sg-fs-base:       12px;
  --sg-fs-md:         14px;
  --sg-fs-lg:         16px;
  --sg-fs-xl:         20px;
  --sg-fs-title:      30px;

  /* Rhythm */
  --sg-gap-xs:        4px;
  --sg-gap-sm:        8px;
  --sg-gap:           12px;
  --sg-gap-lg:        20px;
  --sg-gap-xl:        32px;
  --sg-radius:        4px;
  --sg-radius-lg:     6px;
  --sg-shadow:        0 1px 2px rgba(18, 48, 71, .08);

  /* Page furniture */
  --sg-header-h:      72px;
  --sg-footer-h:      44px;
  --sg-margin:        28px;
}

/* The palette is fixed. Documents do not have a dark mode — a Scigrow
   document looks the same on screen, in print, and in PDF. */

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sg-font);
  font-size: var(--sg-fs-base);
  line-height: 1.45;
  color: var(--sg-text);
  background: var(--sg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sg-font);
  color: var(--sg-navy);
  font-weight: 700;
  margin: 0 0 var(--sg-gap-sm);
  line-height: 1.25;
}
h1 { font-size: var(--sg-fs-title); }
h2 { font-size: var(--sg-fs-xl); }
h3 { font-size: var(--sg-fs-lg); }
h4 { font-size: var(--sg-fs-md); }
h5, h6 { font-size: var(--sg-fs-base); text-transform: none; }

p  { margin: 0 0 var(--sg-gap); }
a  { color: var(--sg-navy); text-decoration: none; border-bottom: 1px solid var(--sg-border-strong); }
a:hover { color: var(--sg-orange); border-bottom-color: var(--sg-orange); }

small, .sg-small { font-size: var(--sg-fs-sm); }
.sg-micro  { font-size: var(--sg-fs-micro); }
.sg-muted  { color: var(--sg-text-muted); }
.sg-faint  { color: var(--sg-text-faint); }
.sg-strong { color: var(--sg-text-strong); font-weight: 500; }
.sg-num    { font-variant-numeric: tabular-nums; text-align: right; }

code, pre, kbd, samp {
  /* Roboto Mono is the only permitted deviation, and only for code. */
  font-family: 'Roboto Mono', 'Roboto', monospace;
  font-size: .92em;
}
pre {
  background: var(--sg-surface-alt);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  padding: var(--sg-gap);
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   4. Page frame — header band, content, footer
   -------------------------------------------------------------------------- */
.sg-page {
  background: var(--sg-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-gap-lg);
  height: var(--sg-header-h);
  padding: 0 var(--sg-margin);
  background: var(--sg-navy);
  color: var(--sg-on-dark);
}
.sg-header__brand   { display: flex; align-items: center; gap: var(--sg-gap); }
.sg-header__centre  { flex: 1; display: flex; justify-content: center; }
.sg-header__meta    { text-align: right; }
.sg-header__title   { font-size: var(--sg-fs-lg); font-weight: 700; color: var(--sg-on-dark); }
.sg-header__sub     { font-size: var(--sg-fs-xs); color: var(--sg-on-dark-muted); }

.sg-body {
  flex: 1;
  padding: var(--sg-gap-lg) var(--sg-margin);
}

.sg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-gap-lg);
  height: var(--sg-footer-h);
  padding: 0 var(--sg-margin);
  font-size: var(--sg-fs-xs);
  color: var(--sg-text-muted);
  border-top: 1px solid var(--sg-border);
  background: var(--sg-page);
}
.sg-footer__brand { display: flex; align-items: center; gap: var(--sg-gap-sm); }
.sg-footer__note  { flex: 1; text-align: center; }

/* Cover page */
.sg-cover        { text-align: center; padding: 12vh var(--sg-margin) 0; }
.sg-cover__title { font-size: var(--sg-fs-title); color: var(--sg-navy); margin-bottom: var(--sg-gap-xl); }
.sg-cover__marks { display: flex; align-items: center; justify-content: center; gap: var(--sg-gap-xl); margin-bottom: var(--sg-gap-xl); }
.sg-cover__meta  { color: var(--sg-text-muted); font-size: var(--sg-fs-md); }

/* --------------------------------------------------------------------------
   5. Logo
   Logo art lives in assets/logos.css as data URIs (.sg-logo--light /
   .sg-logo--dark). Light = white wordmark for the navy header. Dark = navy
   wordmark for light surfaces. The star is always Scigrow orange.
   -------------------------------------------------------------------------- */
.sg-logo {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  height: 26px;
  width: 106px;      /* logo art is 360x88 ≈ 4.09:1 */
}
.sg-logo--sm { height: 16px; width: 65px; }
.sg-logo--lg { height: 40px; width: 164px; }

/* Partner mark, when a document is co-branded */
.sg-partner { display: inline-block; height: 32px; width: auto; }

/* --------------------------------------------------------------------------
   6. Bands & section headers
   -------------------------------------------------------------------------- */
.sg-band {                       /* full-width navy context strip */
  background: var(--sg-navy);
  color: var(--sg-on-dark);
  font-weight: 500;
  font-size: var(--sg-fs-md);
  padding: var(--sg-gap-sm) var(--sg-gap);
  border-radius: var(--sg-radius);
  margin-bottom: var(--sg-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-gap);
}
.sg-band__glyph { color: var(--sg-accent-gold); font-size: var(--sg-fs-lg); }

.sg-section {                    /* card wrapper for a titled block */
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow);
  overflow: hidden;
  margin-bottom: var(--sg-gap-lg);
}
.sg-section__title {             /* slate title bar */
  background: var(--sg-slate);
  color: var(--sg-on-dark);
  font-weight: 500;
  font-size: var(--sg-fs-base);
  padding: var(--sg-gap-sm) var(--sg-gap);
}
.sg-section__title--tint {       /* lighter variant, e.g. period headers */
  background: var(--sg-surface-tint);
  color: var(--sg-navy-ink);
}
.sg-section__body { padding: var(--sg-gap); }
.sg-section__body--flush { padding: 0; }

/* --------------------------------------------------------------------------
   7. Tables — the workhorse
   -------------------------------------------------------------------------- */
.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sg-fs-sm);
}
.sg-table th {
  background: var(--sg-surface-alt);
  color: var(--sg-navy-ink);
  font-weight: 700;
  text-align: left;
  padding: var(--sg-gap-sm) var(--sg-gap);
  border-bottom: 1px solid var(--sg-border-strong);
  white-space: nowrap;
}
.sg-table td {
  padding: 5px var(--sg-gap);
  border-bottom: 1px solid var(--sg-border);
  vertical-align: top;
}
.sg-table tbody tr:nth-child(odd)  { background: var(--sg-page); }
.sg-table tbody tr:nth-child(even) { background: var(--sg-surface); }
.sg-table tbody tr:last-child td   { border-bottom: 0; }
.sg-table th.sg-num, .sg-table td.sg-num { text-align: right; font-variant-numeric: tabular-nums; }
.sg-table__group {               /* divider between column groups */
  border-left: 1px solid var(--sg-border-strong);
}

/* Wide tables must scroll inside their own box, never the page. */
.sg-scroll-x { overflow-x: auto; }

/* --------------------------------------------------------------------------
   8. Status
   -------------------------------------------------------------------------- */
.sg-ok    { color: var(--sg-ok);    font-weight: 500; }
.sg-warn  { color: var(--sg-warn);  font-weight: 500; }
.sg-error { color: var(--sg-error); font-weight: 500; }
.sg-info  { color: var(--sg-info);  font-weight: 500; }

.sg-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--sg-fs-xs);
  font-weight: 500;
  line-height: 1.6;
}
.sg-pill--ok    { background: #E6F1E7; color: var(--sg-ok); }
.sg-pill--warn  { background: #FBEDE0; color: var(--sg-warn); }
.sg-pill--error { background: #FBE7E3; color: var(--sg-error); }
.sg-pill--info  { background: var(--sg-surface-tint); color: var(--sg-navy); }

/* Callout / alert block — orange bar, quiet body */
.sg-callout {
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  overflow: hidden;
  margin-bottom: var(--sg-gap-lg);
  background: var(--sg-surface);
}
.sg-callout__title {
  background: var(--sg-orange-alert);
  color: var(--sg-on-dark);
  font-weight: 700;
  font-size: var(--sg-fs-sm);
  padding: var(--sg-gap-sm) var(--sg-gap);
}
.sg-callout__body { padding: var(--sg-gap-sm) var(--sg-gap); }
.sg-callout__body > * + * { margin-top: var(--sg-gap-xs); }
.sg-callout--info  .sg-callout__title { background: var(--sg-navy); }
.sg-callout--ok    .sg-callout__title { background: var(--sg-ok); }
.sg-callout--warn  .sg-callout__title { background: var(--sg-warn); }

/* --------------------------------------------------------------------------
   9. Contents / index list with leader dots
   -------------------------------------------------------------------------- */
.sg-toc { list-style: none; margin: 0; padding: 0; column-gap: var(--sg-gap-xl); }
.sg-toc--2col { column-count: 2; }
.sg-toc li {
  display: flex;
  align-items: baseline;
  gap: var(--sg-gap-sm);
  font-size: var(--sg-fs-sm);
  padding: 3px 0;
  break-inside: avoid;
}
.sg-toc__label { color: var(--sg-navy); }
.sg-toc__dots  { flex: 1; border-bottom: 1px dotted var(--sg-border-strong); transform: translateY(-3px); }
.sg-toc__page  { color: var(--sg-text-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   10. Metric tiles & legends
   -------------------------------------------------------------------------- */
.sg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sg-gap); margin-bottom: var(--sg-gap-lg); }
.sg-tile {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  padding: var(--sg-gap);
}
.sg-tile__label { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sg-tile__value { font-size: var(--sg-fs-xl); font-weight: 700; color: var(--sg-navy); font-variant-numeric: tabular-nums; }
.sg-tile__note  { font-size: var(--sg-fs-xs); color: var(--sg-text-faint); }

.sg-legend { display: flex; flex-wrap: wrap; gap: var(--sg-gap-lg); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); align-items: center; }
.sg-legend__item { display: flex; align-items: center; gap: var(--sg-gap-xs); }
.sg-legend__swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* Categorical swatch helpers (charts, heat grids, TOU matrices) */
.sg-c1 { background: var(--sg-cat-1); }
.sg-c2 { background: var(--sg-cat-2); }
.sg-c3 { background: var(--sg-cat-3); }
.sg-c4 { background: var(--sg-cat-4); }
.sg-c5 { background: var(--sg-cat-5); }
.sg-c6 { background: var(--sg-cat-6); }

/* --------------------------------------------------------------------------
   10b. Long-form document mode (.sg-doc)
   Two document shapes exist in the house style:
     - the paginated report: one .sg-page per printed page (A4 landscape);
     - the long-form document: content flows and the header band and footer
       repeat on every printed page. Use .sg-doc for reference docs, specs
       and API documentation. A4 portrait.

   The running header/footer are a <thead>/<tfoot> pair on a full-width table
   (.sg-runner). Browsers repeat those groups on every printed page and, unlike
   position:fixed, they reserve real space — so flowing content can never run
   underneath the band. Markup:

     <table class="sg-runner">
       <thead><tr><td><header class="sg-header">…</header></td></tr></thead>
       <tfoot><tr><td><footer class="sg-footer">…</footer></td></tr></tfoot>
       <tbody><tr><td><main class="sg-body">…</main></td></tr></tbody>
     </table>
   -------------------------------------------------------------------------- */
.sg-runner { width: 100%; border-collapse: collapse; }
.sg-runner > thead > tr > td,
.sg-runner > tfoot > tr > td,
.sg-runner > tbody > tr > td { padding: 0; border: 0; }

.sg-doc .sg-body {
  padding: var(--sg-gap-lg) var(--sg-margin) var(--sg-gap-xl);
  max-width: 1000px;
  margin: 0 auto;
}
.sg-doc .sg-footer { border-top: 1px solid var(--sg-border); }
.sg-doc .sg-section__title--tint { border-top: 1px solid var(--sg-border); }
.sg-doc h2 { margin-top: var(--sg-gap-xl); }

/* Prose inside a document reads at 14px, not table size. */
.sg-doc .sg-section__body { font-size: var(--sg-fs-md); line-height: 1.55; }
.sg-doc .sg-section__body p,
.sg-doc .sg-section__body li { max-width: 88ch; }
.sg-doc .sg-section__body ul,
.sg-doc .sg-section__body ol { margin: 0 0 var(--sg-gap); padding-left: 1.25em; }
.sg-doc .sg-section__body li { margin-bottom: var(--sg-gap-xs); }
.sg-doc code { background: var(--sg-surface-alt); padding: 1px 4px; border-radius: 3px; color: var(--sg-navy-ink); }
.sg-doc pre code { background: none; padding: 0; }

@media print {
  .sg-doc .sg-page { min-height: 0; break-after: auto; page-break-after: auto; }
  .sg-doc .sg-body { padding: var(--sg-gap) 12mm var(--sg-gap-lg); max-width: none; }
  .sg-doc .sg-header { height: 18mm; }
  .sg-doc .sg-footer { height: 12mm; }
  .sg-doc .sg-header__title { font-size: var(--sg-fs-base); }
  .sg-doc .sg-section { break-inside: auto; }
  .sg-doc .sg-section__title,
  .sg-doc .sg-section__title--tint { break-after: avoid; page-break-after: avoid; }
  .sg-doc pre, .sg-doc .sg-callout { break-inside: avoid; }
  .sg-doc h1, .sg-doc h4 { break-after: avoid; page-break-after: avoid; }
}

/* --------------------------------------------------------------------------
   11. Print / PDF
   Reports are A4 landscape by default; portrait via .sg-portrait on <html>.
   -------------------------------------------------------------------------- */
@page {
  size: A4 landscape;
  margin: 0;
}
/* Long-form documents (.sg-doc): margins reserve room for the running
   header band and footer — keep in step with the .sg-doc print block above. */
@page portrait { size: A4 portrait; margin: 0; }
.sg-page--portrait { page: portrait; }

@media print {
  body { background: var(--sg-page); }
  /* One .sg-page = one printed page. */
  .sg-page { min-height: 100vh; break-after: page; page-break-after: always; }
  .sg-page:last-child { break-after: auto; page-break-after: auto; }
  .sg-section, .sg-callout, .sg-tile, .sg-toc li { break-inside: avoid; }
  .sg-table thead { display: table-header-group; }
  a { border-bottom: 0; }
  /* Keep the brand colours in print output. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --------------------------------------------------------------------------
   12. Responsive (screen documents)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --sg-margin: 14px; --sg-header-h: auto; }
  .sg-header { flex-direction: column; align-items: flex-start; padding: var(--sg-gap) var(--sg-margin); }
  .sg-header__meta { text-align: left; }
  .sg-toc--2col { column-count: 1; }
  .sg-footer { height: auto; flex-direction: column; gap: var(--sg-gap-xs); padding: var(--sg-gap) var(--sg-margin); }
  .sg-footer__note { text-align: left; }
}