/* ============================================================
   HABILLAGE.CSS — Dashboard styling (sahome.fr cockpit, 2026-10-09)
   Validated by Steph on 2026-10-09 (Claude_Work/Sahome/PLAN_HABILLAGE.md); loaded last.
   Drawn around the blocks with ::before (bezel, behind) and ::after (edge shadow, above):
   the content and the layout of the screens do not move.

   Display unit bezel (A350, iniBuilds reference), from the outside in:
     outer frame ─ groove (2px, dark) ─ inner plate ─ glass (the screen, flush, no margin)
   On the top rim the groove steps up at 45° (left: low, right: high), leaving a taller
   inner plate on the right for the brightness buttons.

     y=0  ┌──────────────────────────────────────────────────────┐ outer frame
     y=10 │            ╱‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ groove ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾│
     y=24 │‾‾‾‾‾‾‾‾‾‾‾╯  inner plate   [▼☀]    [☀▲]      [▼◐]   │
     y=40 │  ┌──────────────── glass (screen) ─────────────────┐ │
   ============================================================ */

:root {
  /* Same blue-grey family as the page background (Steph, 2026-10-09: the first grey was too light) */
  --hab-outer-hi: #7f8796;
  --hab-outer:    #6f7785;
  --hab-outer-lo: #626977;
  --hab-inner:    #7a8290;   /* inner plate, a touch lighter (also in bezel-jog.svg) */
  --hab-groove:   #23272d;   /* also in bezel-jog.svg */
  --hab-side:     18px;      /* bezel width, sides and bottom: outer 9 + groove 2 + inner 7 */
  --hab-top:      40px;      /* top rim: outer 10 + groove 2 + inner 28 (right of the step) */
  --hab-step-x:   250px;     /* position of the 45° step of the groove, from the left */
  --hab-strip-x:  40px;      /* FMS panel beyond the strip, left and right (room for the fasteners) */
  --hab-strip-y:  10px;      /* FMS panel beyond the strip, top and bottom */
  --hab-gap:      8px;       /* visible space between two panels, vertical and horizontal alike */
}

/* Page background a little lighter, so that bezels and page sit on one range of values */
html, body {
  background: linear-gradient(180deg, #858d9b 0%, #5d6679 50%, #4a5365 100%);
}

/* ── Room for the bezels between the blocks (not on the phone, see H7 below) ── */
@media (min-width: 641px) {
  main { gap: 3.4rem; }

  /* Dual screen (Steph, 2026-10-09): the same visible space between the FMS panel and the
     bezels, and between the two bezels; the outer edges of the two bezels fall exactly on
     those of the FMS panel. The strip is narrowed by the difference between its panel margin
     and the bezel width, and the screen on the right gets the room back (980 → 1024px max). */
  main.cockpit-dual {
    padding-inline: calc(var(--hab-side) + 1rem);   /* the bezels keep 1rem from the window edge */
    row-gap: calc(var(--hab-strip-y) + var(--hab-gap) + var(--hab-top));
    column-gap: calc(2 * var(--hab-side) + var(--hab-gap));
    grid-template-columns: var(--pfd-width) minmax(0, 1024px);
  }

  main.cockpit-dual .fms-strip {
    width: auto;
    margin-inline: calc(var(--hab-strip-x) - var(--hab-side));
  }

  /* Single column on a desktop: the waypoint sidebar right of the PFD stays clear of its bezel */
  .pfd-wpt-bar {
    margin-left: calc(var(--hab-side) + var(--hab-gap));
  }
}

/* ── The blocks: isolated, so that the drawings (z-index −1) stay above the page.
   The screens on the right and the FMS strip paint their own background: it moves into the
   drawing (the "glass" layer), otherwise the bezel would cover it. ── */
.pfd-container,
.fpln-screen,
.perf-screen,
.fms-strip {
  position: relative;
  isolation: isolate;
}

.fpln-screen,
.perf-screen,
.fms-strip {
  background: transparent;
}

.pfd-container { --hab-glass: #000; }
.fpln-screen, .perf-screen { --hab-glass: var(--surface); }   /* their original background */
.fms-strip { --hab-glass: #000; }

/* ── H2 / H3 — Display unit bezel: PFD and the screen on the right ── */
.pfd-container::before,
.fpln-screen::before,
.perf-screen::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--hab-top));
  right: calc(-1 * var(--hab-side));
  bottom: calc(-1 * var(--hab-side));
  left: calc(-1 * var(--hab-side));
  z-index: -1;
  border-radius: 6px;
  background:
    /* glass: the screen background, flush with the inner plate */
    linear-gradient(var(--hab-glass), var(--hab-glass)) no-repeat
      var(--hab-side) var(--hab-top) / calc(100% - 2 * var(--hab-side)) calc(100% - var(--hab-top) - var(--hab-side)),
    /* brightness and contrast buttons on the inner plate (decorative) */
    url('../gfx/btn-dim.svg') no-repeat 56% 14px,
    url('../gfx/btn-bright.svg') no-repeat 76% 14px,
    url('../gfx/btn-contrast.svg') no-repeat right 28px top 14px,
    /* the 45° step of the groove */
    url('../gfx/bezel-jog.svg') no-repeat var(--hab-step-x) 10px,
    /* groove: top left (low), top right (high), left, right, bottom */
    linear-gradient(var(--hab-groove), var(--hab-groove)) no-repeat 9px 24px / calc(var(--hab-step-x) - 9px) 2px,
    linear-gradient(var(--hab-groove), var(--hab-groove)) no-repeat calc(var(--hab-step-x) + 16px) 10px / calc(100% - var(--hab-step-x) - 25px) 2px,
    linear-gradient(var(--hab-groove), var(--hab-groove)) no-repeat 9px 24px / 2px calc(100% - 33px),
    linear-gradient(var(--hab-groove), var(--hab-groove)) no-repeat right 9px top 10px / 2px calc(100% - 19px),
    linear-gradient(var(--hab-groove), var(--hab-groove)) no-repeat 9px calc(100% - 9px) / calc(100% - 18px) 2px,
    /* inner plate: the main part, and the taller part right of the step */
    linear-gradient(var(--hab-inner), var(--hab-inner)) no-repeat 11px 26px / calc(100% - 22px) calc(100% - 37px),
    linear-gradient(var(--hab-inner), var(--hab-inner)) no-repeat calc(var(--hab-step-x) + 14px) 12px / calc(100% - var(--hab-step-x) - 25px) 14px,
    /* outer frame */
    linear-gradient(180deg, var(--hab-outer-hi) 0%, var(--hab-outer) 25%, var(--hab-outer-lo) 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .35),
    inset -1px -1px 0 rgba(0, 0, 0, .3),
    3px 5px 12px rgba(0, 0, 0, .4);
  pointer-events: none;
}

/* The inner plate overlaps the glass: a thin shadow of its edge on the screen, above the content */
.pfd-container::after,
.fpln-screen::after,
.perf-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 100;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .7),
    inset 1px 2px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}

/* ── H4 / H5 — FMS strip: a plain panel held by one Dzus fastener on each side ── */
.fms-strip::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--hab-strip-y)) calc(-1 * var(--hab-strip-x));
  z-index: -1;
  border-radius: 6px;
  background:
    url('../gfx/dzus-a.svg') no-repeat left 7px center,
    url('../gfx/dzus-b.svg') no-repeat right 7px center,
    linear-gradient(var(--hab-glass), var(--hab-glass)) no-repeat var(--hab-strip-x) var(--hab-strip-y) /
      calc(100% - 2 * var(--hab-strip-x)) calc(100% - 2 * var(--hab-strip-y)),
    linear-gradient(180deg, var(--hab-outer-hi) 0%, var(--hab-outer) 25%, var(--hab-outer-lo) 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .35),
    inset -1px -1px 0 rgba(0, 0, 0, .3),
    3px 5px 12px rgba(0, 0, 0, .4);
  pointer-events: none;
}

/* ── H7 — Smartphone: no styling, the PFD needs every pixel of the width ── */
@media (max-width: 640px) {
  html, body { background: linear-gradient(180deg, #78808e 0%, #505a6e 50%, #3e4758 100%); }
  .pfd-container::before, .pfd-container::after,
  .fpln-screen::before, .fpln-screen::after,
  .perf-screen::before, .perf-screen::after,
  .fms-strip::before {
    display: none;
  }
  .fpln-screen, .perf-screen { background: var(--surface); }
  .fms-strip { background: black; }
}