/* ============================================================================
   PALARID DECK — one-screen futuristic dashboard
   ----------------------------------------------------------------------------
   GOAL: no scrolling to understand the product. The whole hub fits one viewport
   on laptop AND phone, and deeper content is reached by sliding between panels
   rather than scrolling down a long page.

   DESIGN POSITION
   "Futuristic" here means precision, not decoration. The reference points are
   instrument panels and flight displays: dark field, fine hairlines, a single
   luminous accent, monospaced numerals, generous negative space, motion that
   is fast and purposeful. Every effect below earns its place by making
   something easier to read or easier to reach.

   What we deliberately do NOT do, because it reads as costume rather than
   craft: neon everywhere, glow on every border, rainbow gradients, animated
   backgrounds behind text, or glass panels stacked until nothing is legible.
   Palarid's users are choosing a privacy tool. Restraint signals competence.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. FIELD */
.ph-hub.deck,
.ph-hero.deck {
  /* dvh, not vh — the mobile URL bar changes vh mid-scroll and clips content */
  min-height: calc(100dvh - var(--topbar-h, 56px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(12px, 2vh, 28px);
}

/* A single, very quiet field gradient. One light source, top-right, so the
   panels read as physical objects catching it. */
.deck-field::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 84% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(700px 420px at -6% 104%, color-mix(in srgb, var(--info) 9%, transparent), transparent 60%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .deck-field::before { background: none; }
}

/* ------------------------------------------------------------- 2. PANELS */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  min-height: 0;             /* lets children shrink instead of overflowing */
}

.deck-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px;
  border-radius: 16px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-1) 92%, transparent),
      color-mix(in srgb, var(--surface-1) 99%, transparent));
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .deck-panel { background: var(--surface-1); }
}

/* The one signature detail: a hairline of light along the top edge, brighter
   where the light source is. Reads as machined, costs one pseudo-element. */
.deck-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
  opacity: .5;
}
.deck-panel:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.deck-panel:focus-within { border-color: var(--accent); }

/* Numbers are the point of a dashboard, so they get tabular figures and
   deliberate tracking. This is what makes it read as an instrument. */
.deck-metric {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
  color: var(--text);
}
.deck-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Scrollable region INSIDE a panel, so the page itself never scrolls. */
.deck-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.deck-scroll::-webkit-scrollbar { width: 6px; }
.deck-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 3px;
}

/* --------------------------------------------------- 3. SLIDE NAVIGATION
   Horizontal panels instead of a long vertical page. Uses native CSS scroll
   snap — no library, no JS, works with a trackpad swipe, a touch swipe, the
   arrow keys and a screen reader's normal reading order. */
.deck-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.deck-rail::-webkit-scrollbar { display: none; }
.deck-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .deck-rail { scroll-behavior: auto; }
}

/* Slide position indicator. Buttons, so they are operable by keyboard. */
.deck-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.deck-dot {
  width: 30px; height: 4px; padding: 0;
  border: 0; border-radius: 2px; cursor: pointer;
  background: var(--border-strong);
  transition: background .18s ease, width .18s ease;
}
.deck-dot[aria-current="true"] { background: var(--accent); width: 46px; }
.deck-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------ 4. CONTROLS */
.deck-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 22px;
  border: 0; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--accent-fg); background: var(--accent);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .14s cubic-bezier(.2,0,0,1), box-shadow .18s ease;
}
.deck-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 34%, transparent); }
.deck-cta:active { transform: translateY(0); }

/* A single sweep of light across the primary action on hover. One effect,
   on one element, on the one thing we want people to press. */
.deck-cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%);
  transform: translateX(-120%);
}
.deck-cta:hover::after { transform: translateX(120%); transition: transform .62s cubic-bezier(.2,0,0,1); }
@media (prefers-reduced-motion: reduce) {
  .deck-cta, .deck-cta:hover { transform: none; transition: none; }
  .deck-cta::after { display: none; }
}

/* Status pip — the "system is alive" cue, used once, next to live values. */
.deck-pip {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pos); margin-right: 7px; vertical-align: middle;
}
.deck-pip.is-idle { background: var(--text-3); }
.deck-pip.is-warn { background: var(--warn); }

/* ------------------------------------------------------- 5. ONE SCREEN
   Same structure on laptop and phone — three columns become one rail of
   full-width slides. Nothing is lost, and neither device scrolls the page. */
@media (max-width: 1024px) {
  .deck-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .deck-grid {
    grid-template-columns: 1fr;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .deck-grid::-webkit-scrollbar { display: none; }
  .deck-grid > .deck-panel {
    flex: 0 0 86%;            /* a sliver of the next panel hints at the swipe */
    scroll-snap-align: center;
  }
  .ph-hub.deck, .ph-hero.deck {
    min-height: calc(100dvh - var(--topbar-h, 56px) - 64px);
    justify-content: flex-start;
  }
  .deck-metric { font-size: clamp(26px, 9vw, 36px); }
}

/* Short laptop screens: tighten rather than overflow. */
@media (max-height: 720px) {
  .deck-panel { padding: 14px; }
  .deck-metric { font-size: clamp(24px, 3.4vw, 32px); }
  .ph-hub.deck { justify-content: flex-start; }
}