/* ═══════════════════════════════════════════════════════════════════════════
   THEME — CHICAGO (steel and flag)

   The Chicago School: Sullivan, Burnham, Root. A steel frame that is not
   hidden but expressed — the building tells you where its structure is. Wide
   horizontal bays (the Chicago window: a fixed centre light with a narrow
   operable sash either side), heavy base, lighter above, ornament reserved for
   the places a hand actually touches.

   Translated to an ERP: the grid is drawn, not implied. Rules are structural
   members and they are heavy where they carry. The palette is the black steel
   frame, cool grey cladding and green-grey plate glass of the Loop, with the
   red of the city flag's stars reserved for the places a hand acts. A serif
   with authority on anything that names a thing, a grotesk for the working
   text, a monospace for anything that is a number a person will read aloud
   down a telephone.

   The warm limestone-and-terracotta reading of the same skin is kept as a
   variant in theme-terracotta.css — it overrides tokens only.

   Owns: colour, type, rule weight, density, ornament.
   Never touches: layout mechanics. Those are base.css.

   Spec: ../GRAMMAR.md
   ═══════════════════════════════════════════════════════════════════════════ */

@layer theme {

  /* ── the faces ────────────────────────────────────────────────────────
     Self-hosted. A hotel in Copán on a bad connection should not be waiting
     on a font CDN to find out which rooms are dirty. */

  @font-face {
    font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/fraunces-latin-400_700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/fraunces-latin-ext-400_700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/archivo-latin-400_700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/archivo-latin-ext-400_700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/plexmono-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/plexmono-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
  }

  /* ── tokens ───────────────────────────────────────────────────────────── */
  :root {
    /* Steel, glass and the city flag. The frame is black and expressed, the
       cladding is a cool pale grey rather than a warm stone, and the accent is
       the red of the flag's stars — used only where a hand acts. There is no
       brown anywhere in this palette; the warm one is a variant, in
       theme-terracotta.css. */
    --stone:     #eceef0;   /* the field                     */
    --stone-2:   #f8f9fa;   /* the raised surface            */
    --stone-3:   #dfe3e7;   /* the sunken surface            */
    --iron:      #14181b;   /* the frame, and the text       */
    --iron-2:    #414a52;
    --iron-3:    #6d7780;

    --terracotta:   #c8102e;   /* the accent — a flag star        */
    --terracotta-2: #a20d25;
    --bronze:       #8a6a2f;   /* the elevator grille             */
    --verdigris:    #2f7fa6;   /* the flag's bar, and plate glass */

    --ok:   #2e6b4f;
    --busy: #2f7fa6;
    --warn: #9a6b12;
    --bad:  #c8102e;
    --off:  #6d7780;

    /* Structure. The frame is expressed, so rules have three weights and each
       one means something: the girder, the beam, the mullion. */
    --girder: 3px;
    --beam:   2px;
    --mullion: 1px;
    --rule:   #c3cad1;
    --rule-2: #d8dde2;

    --shadow: 0 1px 0 rgba(20,24,27,.06);

    --sans:  'Archivo', system-ui, -apple-system, sans-serif;
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --mono:  'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    color-scheme: light;
  }

  /* Night at the front desk. The frame stays legible; the stone goes dark and
     the terracotta warms rather than glares. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-scheme="light"]) {
      --stone:   #15181b;
      --stone-2: #1e2226;
      --stone-3: #101315;
      --iron:    #e4e8ec;
      --iron-2:  #a8b2bb;
      --iron-3:  #7d8791;
      --rule:    #2f363d;
      --rule-2:  #22282d;
      --terracotta:   #f04159;
      --terracotta-2: #ff6b7d;
      --shadow: 0 1px 0 rgba(0,0,0,.4);
      color-scheme: dark;
    }
  }
  :root[data-scheme="dark"] {
    --stone:   #15181b;
    --stone-2: #1e2226;
    --stone-3: #101315;
    --iron:    #e4e8ec;
    --iron-2:  #a8b2bb;
    --iron-3:  #7d8791;
    --rule:    #2f363d;
    --rule-2:  #22282d;
    --terracotta:   #f04159;
    --terracotta-2: #ff6b7d;
    --shadow: 0 1px 0 rgba(0,0,0,.4);
    color-scheme: dark;
  }

  /* ── density ───────────────────────────────────────────────────────────
     The Chicago School is not airy — it is a working building, and the courses
     are close. This skin tightens the rhythm and the row, keeps the gutter
     generous enough to read as deliberate, and stays square: a steel frame has
     no radius. Every value here is from the contract in base.css, and not one
     rule of geometry is restated. */
  :root {
    --pad: 1.875rem;
    --chrome-pad: 1.25rem;
    --pad-block: 1.125rem;
    --section-gap: 2.25rem;
    --field-gap: 1.25rem;
    --row-h: 3rem;
    --cell-pad-block: .9375rem;
    --card-pad: 1.375rem;
    --radius: 0;
    --measure: 64ch;
  }

  body {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--iron);
    background: var(--stone);
    -webkit-font-smoothing: antialiased;
  }

  /* ── the header: the cornice ───────────────────────────────────────────
     Heavy bottom rule. In Chicago the building's top is where the ornament
     goes, and this is the top of the building. */
  [data-chrome] {
    background: var(--stone-2);
    border-block-end: var(--girder) solid var(--iron);
  }
  [data-chrome] h1 {
    font-family: var(--serif);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
  }
  [data-chrome] h1 small {
    display: block;
    font-family: var(--sans);
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--iron-3);
  }
  [data-chrome][data-collapsed="true"] h1 small { display: none; }

  /* ── the rail: the base course ─────────────────────────────────────────
     Heavier than the field it sits against, the way a limestone base carries
     the brick above it. */
  [data-pane="rail"] {
    background: var(--stone-3);
    border-inline-end: var(--beam) solid var(--iron);
  }
  [data-pane="rail"] h2,
  [data-pane] > header h2 {
    font-family: var(--sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--iron-3);
  }
  [data-pane="rail"] [data-list] [data-row] {
    grid-template-columns: minmax(0, 1fr) auto;
    font-weight: 700;
    letter-spacing: -.005em;
    border-block-end: var(--mullion) solid var(--rule-2);
  }
  [data-pane="rail"] [data-list] [data-row][aria-current="page"] {
    color: var(--terracotta);
    box-shadow: inset 3px 0 0 var(--terracotta);
  }
  [data-pane="rail"] [data-list] [data-row][aria-disabled="true"] { font-weight: 400; }
  [data-pane="rail"] [data-list] [data-row] small {
    font-family: var(--mono);
    font-size: .6875rem;
    color: var(--iron-3);
  }

  /* ── the master: the window bay ────────────────────────────────────────── */
  [data-pane="master"] {
    background: var(--stone-2);
    border-inline-end: var(--beam) solid var(--iron);
  }
  [data-pane] > header {
    background: inherit;
    border-block-end: var(--beam) solid var(--iron);
  }
  [data-pane] > header h2 { font-size: .625rem; }

  [data-list] [data-row] {
    border-block-end: var(--mullion) solid var(--rule-2);
  }
  [data-list] [data-row]:hover { background: var(--stone-3); }
  [data-list] [data-row][aria-current="true"] {
    background: var(--stone-3);
    box-shadow: inset 3px 0 0 var(--terracotta);
  }
  [data-list] [data-row] > span { color: var(--iron-2); font-size: .875rem; }

  /* The identifying value: the number on the door. Mono, because that is what
     a number you read aloud should look like. */
  [data-key] {
    font-family: var(--mono);
    font-weight: 600;
    font-size: .9375rem;
    min-inline-size: 3ch;
  }

  /* ── the detail: the working floor ─────────────────────────────────────── */
  [data-pane="detail"] { background: var(--stone); }
  [data-pane="detail"] h2 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.015em;
  }
  [data-pane="detail"] > header { border-block-end: var(--girder) solid var(--iron); }
  h3 {
    font-family: var(--sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--iron-3);
    padding-block-end: var(--gap-s);
    border-block-end: var(--mullion) solid var(--rule);
    margin-block-end: var(--gap-m);
  }

  /* ── the inspector: the mullion strip ──────────────────────────────────── */
  [data-pane="inspector"] {
    background: var(--stone-3);
    border-inline-start: var(--beam) solid var(--iron);
  }

  /* ── surfaces ──────────────────────────────────────────────────────────
     Elevation here is a rule, not a shadow. A steel frame does not float. */
  [data-tone="raised"] {
    background: var(--stone-2);
    border: var(--mullion) solid var(--rule);
    border-block-start: var(--beam) solid var(--iron);
    box-shadow: var(--shadow);
  }
  [data-tone="sunken"] {
    background: var(--stone-3);
    border: var(--mullion) solid var(--rule);
  }

  /* ── the table ─────────────────────────────────────────────────────────── */
  [data-grid] th {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--iron-3);
    border-block-end: var(--beam) solid var(--iron);
    white-space: nowrap;
  }
  [data-grid] td { border-block-end: var(--mullion) solid var(--rule-2); font-size: .875rem; }
  [data-grid] [data-num] { font-family: var(--mono); }
  [data-grid] tbody tr:hover { background: var(--stone-2); }
  [data-grid] th[aria-sort="ascending"]::after  { content: ' ▲'; color: var(--terracotta); }
  [data-grid] th[aria-sort="descending"]::after { content: ' ▼'; color: var(--terracotta); }

  /* ── fields ────────────────────────────────────────────────────────────── */
  [data-fields] dt {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iron-3);
  }
  [data-fields] dd { font-size: .875rem; }
  [data-fields] dd:has([data-key]), [data-fields] dd.num { font-family: var(--mono); }

  label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iron-3);
  }
  input, select, textarea {
    background: var(--stone-2);
    color: var(--iron);
    border: var(--mullion) solid var(--iron-3);
    border-radius: 0;               /* the frame is square. it is a frame. */
    padding: .5rem .625rem;
    font-size: .875rem;
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: var(--beam) solid var(--terracotta);
    outline-offset: -1px;
    border-color: var(--terracotta);
  }

  /* ── buttons: the door hardware ────────────────────────────────────────
     Where a hand touches, bronze and terracotta. Everywhere else, the frame. */
  button {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .5rem .875rem;
    border: var(--beam) solid var(--iron);
    background: var(--stone-2);
    color: var(--iron);
  }
  button:hover { background: var(--stone-3); }
  button[data-role="primary"] {
    background: var(--terracotta);
    border-color: var(--terracotta-2);
    color: #fff;
  }
  button[data-role="primary"]:hover { background: var(--terracotta-2); }
  button[data-role="danger"] { color: var(--bad); border-color: var(--bad); background: transparent; }
  button[data-role="quiet"] {
    border-color: transparent;
    background: transparent;
    color: var(--iron-2);
    letter-spacing: .04em;
  }
  button[data-role="quiet"]:hover { color: var(--terracotta); background: transparent; }

  /* ── status ────────────────────────────────────────────────────────────
     A flag, not a pill. Square, with the colour carried on a heavy left edge
     the way a painted steel member carries its coat. */
  [data-state] {
    font-family: var(--sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .1875rem .4375rem;
    background: transparent;
    border-inline-start: var(--girder) solid currentColor;
  }
  [data-state="ok"]   { color: var(--ok); }
  [data-state="busy"] { color: var(--busy); }
  [data-state="warn"] { color: var(--warn); }
  [data-state="bad"]  { color: var(--bad); }
  [data-state="off"]  { color: var(--off); }

  /* ── emphasis ──────────────────────────────────────────────────────────── */
  /* Sized to the narrowest bay it appears in. A headline number that overflows
     its card is worse than a smaller one that fits — the digits that fall off
     the end are the ones that matter. */
  [data-metric] {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.03em;
    margin-block: .25rem .375rem;
  }
  [data-note] { font-size: .75rem; color: var(--iron-3); }
  [data-empty] { color: var(--iron-3); font-size: .875rem; }
  [data-empty] strong { font-family: var(--serif); font-size: 1.125rem; color: var(--iron-2); font-weight: 400; }

  /* ── the gate ──────────────────────────────────────────────────────────
     The entrance arch. Sullivan put the ornament where you walk in, and this
     is the only place in the application that gets any. */
  [data-gate] { background: var(--stone); }
  [data-gate] > * {
    background: var(--stone-2);
    border: var(--beam) solid var(--iron);
    border-block-start: var(--girder) solid var(--terracotta);
    padding: 2rem;
  }
  [data-gate] h1 {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
  }
  [data-gate] p { color: var(--iron-2); font-size: .875rem; }
  [data-gate] [data-note] { border-block-start: var(--mullion) solid var(--rule); padding-block-start: var(--gap-m); }

  /* The seal: a Chicago window in miniature — a wide centre light between two
     narrow sashes. It is the mark of the whole system. */
  [data-seal] {
    inline-size: 3rem;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2px;
    background: var(--iron);
    padding: 3px;
  }
  [data-seal] i { background: var(--terracotta); }
  [data-seal] i:nth-child(2) { background: var(--stone-2); }

  /* ── the skin switcher ───────────────────────────────────────────────── */
  [data-skins] { display: flex; gap: 0; }
  [data-skins] button {
    border-inline-end-width: 0;
    font-size: .625rem;
    padding: .375rem .625rem;
  }
  [data-skins] button:last-child { border-inline-end-width: var(--beam); }
  [data-skins] button[aria-pressed="true"] { background: var(--iron); color: var(--stone); }
}