/* ============================================================================
   Aware360 Device Testing Hub - shared styles
   1) Live-verification wizard UI (verify + watched check-in), shared by every
      device page. Moved verbatim from the garmin-inreach-mini2-v3.html inline
      block so all devices render the same states.
   2) Hub navigation: the left device menu (docked sidebar on wide screens,
      slide-in drawer behind a hamburger below), plus the landing-page cards.
   Brand: Aware360 navy #082d43 / orange #ff6b35 (see Aware360 Colour Guide).
   ========================================================================== */

/* ---- 0) Brand font, self-hosted ---------------------------------------
   Roboto variable (latin subset, weights 100-900 in one 43 KB file), served
   same-origin so device pages don't flash fallback text or need Google's CDN
   in the field. Non-latin glyphs (e.g. the little up/down arrows in the kbd
   hints) fall back to the system font, exactly as before. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/roboto-var.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;
}

/* ---- 0b) Page-to-page navigation ---------------------------------------
   Cross-document view transitions: same-origin navigations crossfade instead
   of flashing, and the left menu (view-transition-name) reads as stationary
   while only the page content swaps. Browsers without support (or users with
   reduced motion) simply get an ordinary navigation. */
@view-transition { navigation: auto; }
.hn-side { view-transition-name: hub-nav; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---- 1) Live verification UI ---------------------------------------- */
.vstatus, .ci-status { margin-top: 14px; }
.vstatus [hidden], .ci-status [hidden], .wiz-nav [hidden] { display: none !important; }
.vbusy { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; }
.vcard { display: flex; gap: 12px; align-items: flex-start; background: #f0faf4; border: 1.5px solid #bfe6cd; border-radius: 12px; padding: 14px 15px; }
.vcard .vtick { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #2e9e5b; display: flex; align-items: center; justify-content: center; }
.vcard .vtick svg { width: 15px; height: 15px; stroke: #fff; }
.vcard p { margin: 0; font-size: 15px; line-height: 1.5; }
.vcard b { color: var(--navy); }
.verr { color: #c22f2f; font-size: 14px; margin: 10px 0 0; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(8,45,67,.15); border-top-color: var(--orange); animation: v3spin .8s linear infinite; flex: 0 0 auto; }
@keyframes v3spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.ci-wait { display: flex; gap: 12px; align-items: flex-start; background: var(--card, #f4f7fa); border: 1.5px solid var(--line, #dbe4ec); border-radius: 12px; padding: 14px 15px; }
.ci-wait p { margin: 0; font-size: 15px; line-height: 1.5; }
.ci-wait .sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.ci-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.btn-line { font: inherit; font-weight: 700; font-size: 14.5px; color: var(--navy); background: #fff; border: 1.5px solid var(--line, #dbe4ec); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.btn-line:hover { border-color: var(--navy); }
.linklike { font: inherit; font-size: 13.5px; color: var(--muted); background: none; border: none; text-decoration: underline; cursor: pointer; padding: 4px 2px; }
.vstatus .note { margin-top: 12px; }
.wiz-outcome [hidden] { display: none !important; }

/* Watch-status strip: a slim mirror of the watch state pinned above the wizard
   nav - on phones the real panel sits below the fold (instructions come first),
   and nobody should have to know to scroll to learn we're already watching.
   Hidden automatically while the real panel is on screen; tap = scroll to it. */
.wiz-watchbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-top: 1px solid var(--line, #dbe4ec);
  background: #f4f8fb; color: var(--navy); font-size: 14px; cursor: pointer;
}
.wiz-watchbar[hidden] { display: none !important; }
.wiz-watchbar .wb-text { font-weight: 700; min-width: 0; }
.wiz-watchbar .wb-elapsed { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.wiz-watchbar .spin { width: 15px; height: 15px; border-width: 2px; }
.wiz-watchbar.is-ok { background: #e7f6ec; color: #135e13; }

/* Arrival flourish: the confirmation card (and its strip twin) pop twice so a
   glance-back can't miss them; the chime/vibration land at the same moment. */
@keyframes wiz-arrive {
  0% { transform: scale(.97); box-shadow: 0 0 0 0 rgba(18, 163, 90, .40); }
  60% { transform: scale(1.006); box-shadow: 0 0 0 14px rgba(18, 163, 90, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(18, 163, 90, 0); }
}
.vcard[data-ci-ok]:not([hidden]), .wiz-watchbar.is-ok { animation: wiz-arrive .6s ease-out 2; }
@media (prefers-reduced-motion: reduce) {
  .vcard[data-ci-ok]:not([hidden]), .wiz-watchbar.is-ok { animation: none; }
}

/* The mid-watch "report to support" nudge: a real button, not a whisper - it
   appears exactly when a user is stuck, so it must read as an action. */
.fb[data-report-watch] > [data-report-open] {
  display: inline-block; font-size: 14.5px; font-weight: 700; color: #8a5a00;
  background: #fff8ec; border: 1.5px solid #e8b25c; border-radius: 999px;
  padding: 10px 18px; text-decoration: none; cursor: pointer;
}
.fb[data-report-watch] > [data-report-open]:hover { background: #ffefd2; border-color: #d99a2b; }
.fb[data-report-watch] > [data-report-open]:focus-visible { outline: 2.5px solid var(--orange, #ff6b35); outline-offset: 2px; }

/* Quick-feedback box on the outcome screen (friction signal for the admin page) */
.fb { margin-top: 16px; text-align: center; }
.fb-form { max-width: 430px; margin: 10px auto 0; text-align: left; }
.fb-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  padding: 10px 12px; border: 1.5px solid var(--line, #dbe4ec); border-radius: 12px;
  resize: vertical; min-height: 74px;
}
.fb-form textarea:focus { outline: none; border-color: var(--orange, #ff6b35); box-shadow: 0 0 0 3px rgba(255,107,53,.18); }
.fb-form input[type="email"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  padding: 10px 12px; border: 1.5px solid var(--line, #dbe4ec); border-radius: 12px;
  margin-bottom: 8px;
}
.fb-form input[type="email"]:focus { outline: none; border-color: var(--orange, #ff6b35); box-shadow: 0 0 0 3px rgba(255,107,53,.18); }
.fb-form input[type="email"].invalid { border-color: #e23b3b; box-shadow: 0 0 0 3px rgba(226,59,59,.15); }
.fb-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.fb-actions .verr { margin: 0; }
.fb-done { color: #2e9e5b; font-weight: 700; font-size: 14px; }

/* ---- 2) Hub navigation ------------------------------------------------ */
/* hub.js sets .hn-has on <html> when it injects the menu; nothing below
   applies to pages that don't load the hub. Layering: topbar is z-50 and the
   wizard modal z-100, so the menu sits between them (an open wizard covers it). */

.hn-side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
  width: 236px; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 20px 0 16px;
  background: linear-gradient(170deg, #082d43 0%, #0d3a57 70%, #12496d 100%);
  color: #fff;
  overflow-y: auto;
  transform: translateX(-103%);
  transition: transform .22s ease;
  box-shadow: 0 0 40px rgba(6, 18, 28, .35);
}
.hn-brand { display: flex; flex-direction: column; gap: 10px; padding: 2px 20px 18px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.12); }
.hn-brand img { height: 24px; width: auto; align-self: flex-start; }
.hn-brand span {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #ff8d6a;
}
.hn-label {
  margin: 18px 20px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.hn-list { list-style: none; margin: 0; padding: 0; }
.hn-item {
  display: block; padding: 11px 17px;
  border-left: 3px solid transparent;
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: 15px; font-weight: 700; line-height: 1.25;
}
.hn-item .hn-kind { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.5); }
.hn-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.hn-item.is-active { border-left-color: #ff6b35; background: rgba(255,255,255,.09); color: #fff; }
.hn-item.is-active .hn-kind { color: rgba(255,255,255,.65); }
.hn-home { margin-top: 4px; }
.hn-foot { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.55); }
.hn-foot a { color: #ff8d6a; text-decoration: none; font-weight: 700; }
.hn-foot a:hover { text-decoration: underline; }
.hn-foot .hn-admin { display: block; margin-top: 10px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.5); }
.hn-foot .hn-admin:hover { color: #ff8d6a; }

/* Live-checks status line (fed from /api/health by hub.js) */
.hn-status { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; }
.hn-status .hn-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); }
.hn-status.is-ok .hn-dot { background: #35c46f; box-shadow: 0 0 6px rgba(53,196,111,.7); }
.hn-status.is-down .hn-dot { background: #e05252; box-shadow: 0 0 6px rgba(224,82,82,.7); }

/* Collapse control - only shown while the sidebar is docked */
.hn-collapse {
  position: absolute; top: 16px; right: 12px;
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px; cursor: pointer;
}
.hn-collapse svg { width: 16px; height: 16px; }
.hn-collapse:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Backdrop for the drawer (narrow screens only) */
.hn-scrim { position: fixed; inset: 0; z-index: 89; background: rgba(6,18,28,.55); display: none; }

/* Hamburger, injected as the first item in the topbar */
.hn-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  background: #fff; color: var(--navy, #082d43);
  border: 1.5px solid var(--line, #e4eaf0); border-radius: 10px; cursor: pointer;
  padding: 0;
}
.hn-burger svg { width: 20px; height: 20px; }
.hn-burger:hover { border-color: var(--orange, #ff6b35); }
.hn-has .topbar .wrap { justify-content: flex-start; gap: 12px; }
.hn-has .topbar .badge { margin-left: auto; }

/* Drawer open state (hub.js toggles .hn-open on <html>) */
.hn-open .hn-side { transform: none; }
.hn-open .hn-scrim { display: block; }
.hn-open body { overflow: hidden; }

/* Docked sidebar on wide screens: visible by default, content shifts right.
   .hn-collapsed (persisted choice, applied pre-paint by hub-boot.js) puts the
   wide layout back into burger mode; the burger then toggles the dock. */
@media (min-width: 1280px) {
  .hn-has:not(.hn-collapsed) body { padding-left: 236px; }
  .hn-has:not(.hn-collapsed) .hn-side { transform: none; box-shadow: none; }
  .hn-has:not(.hn-collapsed) .hn-side .hn-collapse { display: inline-flex; }
  .hn-has:not(.hn-collapsed) .hn-burger { display: none; }
  .hn-has:not(.hn-collapsed) .hn-scrim { display: none !important; }
  .hn-has.hn-collapsed .hn-scrim { display: none !important; }
  /* Collapsed on a wide screen: the topbar content is centered with the page,
     so pin the reopen button to the viewport's top-left corner where people
     look for it (above the sticky topbar, below the sidebar and modals). */
  .hn-has.hn-collapsed .hn-burger {
    position: fixed; top: 11px; left: 14px; z-index: 60;
    box-shadow: 0 4px 14px rgba(8, 45, 67, .16);
  }
}
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
  .hn-has body { transition: padding-left .22s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .hn-side { transition: none; }
}
@media print {
  .hn-side, .hn-burger, .hn-scrim { display: none !important; }
  .hn-has body { padding-left: 0; }
}

/* ---- Landing page (index.html) ---------------------------------------- */
.hn-hero {
  background: linear-gradient(160deg, #082d43 0%, #0d3a57 60%, #12496d 100%);
  color: #fff; padding: 46px 0 50px;
}
.hn-hero .eyebrow2 {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #ff8d6a; margin-bottom: 12px;
}
.hn-hero h1 { color: #fff; font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; }
.hn-hero p { color: #c9d6e0; max-width: 56ch; font-size: 17px; line-height: 1.6; margin: 0; }

.hn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 22px; }
.hn-card {
  display: flex; flex-direction: column;
  background: var(--card, #fff); border: 1px solid var(--line, #e4eaf0);
  border-radius: 16px; padding: 20px 20px 22px;
}
.hn-card-pic { height: 190px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hn-card-pic img { max-height: 100%; max-width: 82%; width: auto; filter: drop-shadow(0 14px 18px rgba(8,45,67,.18)); }
.hn-card h3 { font-size: 19px; font-weight: 800; color: var(--navy, #082d43); margin: 0 0 4px; }
.hn-card .hn-card-kind { font-size: 13px; color: var(--muted, #5b6b78); margin: 0 0 14px; }
.hn-card-cta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.hn-card-cta .btn-primary, .hn-card-cta .btn-ghost { font-size: 14.5px; padding: 11px 18px; }