/* ==========================================================================
   instrument.css — "The Instrument" design kit (machined-panel system)
   --------------------------------------------------------------------------
   ADDITIVE ONLY. This file defines shared tokens and opt-in component
   recipes under new .in-* class names. It never restyles existing page
   selectors and is safe to load on every page (linked right after
   style.css, before page CSS). Interior structural selectors use :where()
   so any page-level class can adjust a recipe at (0,1,0) specificity.
   ========================================================================== */

:root {
   /* surfaces */
   --in-panel:   #E9E8E3;   /* page background — aluminum panel */
   --in-panel2:  #DFDDD7;   /* recessed housings, inactive chips */
   --in-well:    #F8F7F4;   /* inset reading/content surfaces */
   --in-well-edge: #D6D4CD;
   --in-hairline:  #C9C7C0;
   /* ink ramp */
   --in-ink:  #232320;
   --in-ink2: #45443E;
   --in-ink3: #67665F;
   --in-ink4: #94938B;   /* decorative / >=18px only — 2.9:1 on well */
   --in-ink5: #B5B4AC;
   /* black module */
   --in-black:  #232320;
   --in-black2: #2E2E2A;
   --in-black-edge: #1B1B18;
   --in-blackface: #2A2A26; /* code/display wells on dark */
   /* accent */
   --in-orange:  #E55A12;
   --in-orangeD: #C24A0B;
   --in-orange-tint: #F3E2D2;
   --in-orange-edge: #E5C4A4;
   /* signal lamps (fills) + text tiers + tints */
   --in-gr: #2E9E6B; --in-gr-text: #256E4C; --in-gr-tint: #E0EAE2;
   --in-am: #D9A013; --in-am-text: #7D5A0B; --in-am-tint: #F2E8CE;
   --in-re: #C4442E; --in-re-text: #9E3D2B; --in-re-tint: #F0E0DA;
   /* shadows */
   --in-lift: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -16px rgba(35,35,32,.35);
   --in-inset: inset 0 2px 4px rgba(35,35,32,.09);
   /* type */
   --in-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --in-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Fragment Mono has no bold: never synthesize a smeared faux-bold anywhere. */
html { font-synthesis-weight: none; }

/* --------------------------------------------------------------------------
   Wells + modules
   -------------------------------------------------------------------------- */
.in-well {
   background: var(--in-well);
   border: 1px solid var(--in-well-edge);
   border-radius: 9px;
   box-shadow: var(--in-inset);
}
.in-module {
   background: var(--in-panel);
   border: 1px solid var(--in-hairline);
   border-radius: 14px;
   box-shadow: var(--in-lift);
}
.in-blackmodule {
   background: linear-gradient(180deg, var(--in-black2), var(--in-black));
   border: 1px solid var(--in-black-edge);
   border-radius: 16px;
   color: #F0EEE4;
   box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px -22px rgba(35,35,32,.7);
}

/* --------------------------------------------------------------------------
   Buttons — power (primary) + machined (secondary)
   -------------------------------------------------------------------------- */
.in-btn-power {
   display: inline-flex; align-items: center; justify-content: center; gap: 9px;
   font-family: var(--in-sans); font-weight: 600; font-size: 15.5px;
   padding: 12px 22px; border-radius: 9px; border: 0; cursor: pointer;
   background: linear-gradient(180deg, #F06A24, var(--in-orange));
   color: #FFFFFF;
   box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 5px -1px rgba(194,74,11,.6);
   transition: transform .1s ease, background .15s ease;
}
.in-btn-power:hover { background: linear-gradient(180deg, #E8611C, var(--in-orangeD)); color: #FFFFFF; }
.in-btn-power:active { transform: translateY(1px); }
.in-btn-secondary {
   display: inline-flex; align-items: center; justify-content: center; gap: 9px;
   font-family: var(--in-sans); font-weight: 600; font-size: 15.5px;
   padding: 12px 22px; border-radius: 9px; cursor: pointer;
   background: linear-gradient(180deg, #F2F1EE, #E2E0DA);
   color: var(--in-ink);
   border: 1px solid #C2C0B9;
   box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
   transition: transform .1s ease, background .15s ease;
}
.in-btn-secondary:hover { background: linear-gradient(180deg, #EDECE8, #DAD8D1); color: var(--in-ink); }
.in-btn-secondary:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Switch — segmented toggle housing; the active segment is a raised knob
   -------------------------------------------------------------------------- */
.in-switch {
   display: inline-flex; align-items: center; gap: 2px; padding: 4px;
   background: var(--in-panel2);
   border: 1px solid var(--in-hairline);
   border-radius: 999px;
   box-shadow: inset 0 1px 3px rgba(35,35,32,.1);
}
.in-switch :where(.in-switch-opt) {
   font-family: var(--in-sans); font-weight: 600; font-size: 14px;
   padding: 8px 16px; border-radius: 999px; border: 0; background: transparent;
   color: var(--in-ink3); cursor: pointer;
}
.in-switch :where(.in-switch-opt.is-on, .in-switch-opt[aria-pressed="true"], .in-switch-opt[aria-current]) {
   background: linear-gradient(180deg, #FFFFFF, #F2F1EE);
   color: var(--in-ink);
   box-shadow: 0 1px 3px rgba(35,35,32,.2), 0 1px 0 rgba(255,255,255,.9) inset;
}

/* --------------------------------------------------------------------------
   Gauge — meter with tick ruler, tinted fill zone and orange needle
   markup: .in-gauge > .in-gauge-fill (width:N%) > .in-gauge-needle
   -------------------------------------------------------------------------- */
.in-gauge {
   position: relative; height: 22px; border-radius: 6px;
   background-color: var(--in-well);
   border: 1px solid var(--in-well-edge);
   box-shadow: var(--in-inset);
   background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #D9D7D0 calc(10% - 1px) 10%);
   overflow: visible;
}
.in-gauge :where(.in-gauge-fill) {
   position: absolute; top: 2px; bottom: 2px; left: 2px;
   border-radius: 4px;
   background: rgba(46,158,107,.16);
}
.in-gauge :where(.in-gauge-fill.is-mid)  { background: rgba(217,160,19,.16); }
.in-gauge :where(.in-gauge-fill.is-low)  { background: rgba(196,68,46,.14); }
.in-gauge :where(.in-gauge-needle) {
   position: absolute; top: -3px; bottom: -3px; right: -1px; width: 3px;
   border-radius: 2px; background: var(--in-orange);
   box-shadow: 0 0 5px rgba(229,90,18,.5);
}

/* --------------------------------------------------------------------------
   Lamps — signal indicator dots with a machined glow
   -------------------------------------------------------------------------- */
.in-lamp {
   display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none;
   background: radial-gradient(circle at 35% 30%, #DDDBD4, #C2C0B9 70%);
   box-shadow: inset 0 1px 1px rgba(35,35,32,.15);
}
.in-lamp.is-gr { background: radial-gradient(circle at 35% 30%, #63C79A, var(--in-gr) 70%); box-shadow: 0 0 6px rgba(46,158,107,.5); }
.in-lamp.is-am { background: radial-gradient(circle at 35% 30%, #EDC55C, var(--in-am) 70%); box-shadow: 0 0 6px rgba(217,160,19,.5); }
.in-lamp.is-re { background: radial-gradient(circle at 35% 30%, #E07B62, var(--in-re) 70%); box-shadow: 0 0 6px rgba(196,68,46,.5); }
.in-lamp.is-or { background: radial-gradient(circle at 35% 30%, #FF9A5C, var(--in-orange) 70%); box-shadow: 0 0 6px rgba(229,90,18,.55); }

/* --------------------------------------------------------------------------
   Engraved label — silk-screened panel text
   -------------------------------------------------------------------------- */
.in-engraved {
   font-family: var(--in-mono);
   font-weight: 400;
   font-size: 11px;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--in-ink3);
}

/* Grille — decorative machined vent strip (sparing use) */
.in-grille {
   height: 18px; border-radius: 3px;
   background: repeating-linear-gradient(90deg, var(--in-hairline) 0 2px, transparent 2px 7px);
   opacity: .7;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.in-btn-power:focus-visible,
.in-btn-secondary:focus-visible,
.in-switch :where(.in-switch-opt):focus-visible {
   outline: 2px solid var(--in-orange);
   outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
   .in-btn-power, .in-btn-secondary { transition: none; }
}

/* Native form controls pick up the accent (settings checkboxes, radios). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--in-orange); }