/* HangarSync web skin — only applies when html.hs-web. App mode (hs-app) is untouched. */

/* ---- Theme tokens (web only) ---- */
html.hs-web.hs-theme-dark {
  --bg: #0b1016;
  --card: #141b22;
  --line: #24303a;
  --btn-line: #24303a;
  --text: #f4f7f5;
  --muted: #8ea0ad;
  --fg: #64be49;
  --hs-surface: #0e141c;
  --hs-header-bg: rgba(11, 16, 22, 0.94);
  --hs-nav-bg: rgba(11, 16, 22, 0.96);
  --hs-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  --hs-input-bg: #0b1016;
  --hs-btn-fg: #0b1016;
}

html.hs-web.hs-theme-light {
  --bg: #f4f6f8;
  --card: #ffffff;
  --line: #b7c2cd;
  --btn-line: #7d8b98;
  --text: #15202b;
  --muted: #5b6b78;
  --fg: #64be49;
  --hs-surface: #eef2f5;
  --hs-header-bg: rgba(244, 246, 248, 0.96);
  --hs-nav-bg: rgba(255, 255, 255, 0.97);
  --hs-shadow: 0 8px 28px rgba(21, 32, 43, 0.08);
  --hs-input-bg: #ffffff;
  --hs-btn-fg: #0b1016;
}

/* ---- Anti-FOUC: match canvas + hold paint until site chrome injects ---- */
html.hs-web {
  background: #0b1016;
  color-scheme: dark;
}
html.hs-web.hs-theme-light {
  background: #f4f6f8;
  color-scheme: light;
}
/* Hide body until nav/theme chrome is ready so page switches don't flash naked headers */
html.hs-web:not(.hs-chrome-ready) body {
  visibility: hidden;
}
html.hs-web.hs-chrome-ready body {
  visibility: visible;
}

/* ---- Site top nav (injected) ---- */
html.hs-web .hs-site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 32px;
  min-height: 68px;
  background: var(--hs-nav-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
  width: 100%;
}

html.hs-web .hs-site-nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  flex: 0 0 auto;
  margin-right: 8px;
  line-height: 0;
}

html.hs-web .hs-site-nav-logo-wrap {
  position: relative;
  display: block;
  width: 102px;
  height: 52px;
  flex: 0 0 auto;
  overflow: hidden;
}

html.hs-web .hs-site-nav-logo {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 102px;
  height: 52px;
  background: transparent;
  object-fit: contain;
  object-position: left center;
  image-rendering: auto;
  pointer-events: none;
}

/* Theme swap without src change — keeps layout locked */
html.hs-web.hs-theme-dark .hs-logo-light,
html.hs-web.hs-theme-light .hs-logo-dark {
  opacity: 0;
}

html.hs-web.hs-theme-dark .hs-logo-dark,
html.hs-web.hs-theme-light .hs-logo-light {
  opacity: 1;
}

html.hs-web .hs-site-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

html.hs-web .hs-site-nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

html.hs-web .hs-site-nav-links a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}

html.hs-web .hs-site-nav-links a.is-active {
  color: var(--text);
  font-weight: 700;
  border-bottom: 2px solid var(--fg);
  padding-bottom: 2px;
}

html.hs-web .hs-site-nav-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Drop duplicate Home from page tools (site links already include Home) */
html.hs-web .hs-site-nav-tools > a.tool[href="/"],
html.hs-web .hs-site-nav-tools > a.tool[href="/home"] {
  display: none !important;
}

/* ---- Layout: left-aligned wide canvas (not phone-centered) ---- */
html.hs-web body {
  background: var(--bg);
  color: var(--text);
}

html.hs-web header {
  max-width: 1400px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 20px 32px 10px !important;
  border-bottom: 1px solid var(--line);
  background: transparent;
  box-sizing: border-box;
  width: 100%;
}

html.hs-web main {
  max-width: 1400px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 24px 32px 48px !important;
  box-sizing: border-box;
  width: 100%;
}

html.hs-web .tools {
  gap: 8px;
}

html.hs-web .tool,
html.hs-web a.tool,
html.hs-web button.tool {
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--btn-line);
  border-color: var(--btn-line);
  color: var(--muted);
  background: transparent;
}

html.hs-web .tool:hover,
html.hs-web a.tool:hover,
html.hs-web button.tool:hover {
  border-color: var(--fg);
  color: var(--text);
}


/* Light theme: stronger grey outline so chrome buttons don’t wash out */
html.hs-web.hs-theme-light .tool,
html.hs-web.hs-theme-light a.tool,
html.hs-web.hs-theme-light button.tool,
html.hs-web.hs-theme-light .hs-site-nav-tools .tool,
html.hs-web.hs-theme-light .hs-site-nav-tools a.tool,
html.hs-web.hs-theme-light .hs-site-nav-tools button.tool,
html.hs-web.hs-theme-light .viewbar button.view,
html.hs-web.hs-theme-light .top-actions button.act,
html.hs-web.hs-theme-light .door .actions button.act,
html.hs-web.hs-theme-light #login button#signIn,
html.hs-web.hs-theme-light #login .install,
html.hs-web.hs-theme-light a.tile,
html.hs-web.hs-theme-light a.service,
html.hs-web.hs-theme-light .card,
html.hs-web.hs-theme-light .day .card,
html.hs-web.hs-theme-light .door {
  border-color: var(--btn-line) !important;
}

html.hs-web.hs-theme-light .hs-site-nav-tools .tool:hover,
html.hs-web.hs-theme-light .hs-site-nav-tools a.tool:hover,
html.hs-web.hs-theme-light .hs-site-nav-tools button.tool:hover,
html.hs-web.hs-theme-light .tool:hover,
html.hs-web.hs-theme-light a.tool:hover,
html.hs-web.hs-theme-light button.tool:hover {
  border-color: var(--fg) !important;
}

/* Site-nav chrome: lock look against page-level button/a rules (Admin, Brand, …) */
html.hs-web .hs-site-nav-tools .tool,
html.hs-web .hs-site-nav-tools a.tool,
html.hs-web .hs-site-nav-tools button.tool {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  border-radius: 10px !important;
  border: 1px solid var(--btn-line) !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}
html.hs-web .hs-site-nav-tools .tool:hover,
html.hs-web .hs-site-nav-tools a.tool:hover,
html.hs-web .hs-site-nav-tools button.tool:hover {
  border-color: var(--fg) !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--fg) 10%, transparent) !important;
}
html.hs-web .hs-site-nav-tools .hs-theme-toggle {
  font-weight: 750 !important;
  letter-spacing: 0.02em !important;
  color: var(--text) !important;
  border-color: var(--fg) !important;
}

/* Theme toggle */
html.hs-web .hs-theme-toggle {
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text);
  border-color: var(--fg);
}

html.hs-web .hs-theme-toggle-fixed {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  background: var(--card);
  box-shadow: var(--hs-shadow);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid var(--fg);
  color: var(--text);
}

html.hs-app .hs-theme-toggle,
html.hs-app #hs-theme-toggle,
html.hs-app .hs-site-nav {
  display: none !important;
}

/* ---- Home dashboard tiles ---- */
html.hs-web a.tile {
  border: 1px solid var(--btn-line);
  min-height: 132px;
  border-radius: 14px;
  padding: 20px;
  box-shadow: none;
}

html.hs-web a.tile:hover {
  border-color: color-mix(in srgb, var(--fg) 55%, var(--line));
  box-shadow: var(--hs-shadow);
}

html.hs-web a.tile .icon {
  border-radius: 12px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 0;
}

html.hs-web a.tile .icon .tile-svg {
  display: block;
  width: 20px;
  height: 20px;
}

html.hs-web a.tile .label {
  font-size: 20px;
}

html.hs-web .grid {
  gap: 18px;
  margin-top: 8px;
}

@media (min-width: 900px) {
  html.hs-web .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  html.hs-web .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Cards / service links ---- */
html.hs-web .card,
html.hs-web .door,
html.hs-web a.service,
html.hs-web .top-actions,
html.hs-web section {
  border-radius: 14px;
  border: 1px solid var(--btn-line);
  border-color: var(--btn-line);
  background: var(--card);
  box-shadow: none;
}

html.hs-web a.service:hover {
  border-color: color-mix(in srgb, var(--fg) 55%, var(--line));
  box-shadow: var(--hs-shadow);
}

/* Hangar / Services: multi-column service rows on desktop */
@media (min-width: 800px) {
  html.hs-web .stack {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }

  html.hs-web a.service {
    min-height: 88px;
  }
}

/* ---- Access Security: door grid, no scroll ---- */
html.hs-web body:has(#list .door) main,
html.hs-web main:has(#list.list) {
  max-width: 1400px !important;
}

html.hs-web .door .drag {
  width: 24px !important;
  height: 32px !important;
  margin: 0 !important;
  color: var(--muted);
  font-size: 14px;
  border-radius: 8px;
}

html.hs-web .door .drag:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}

html.hs-web .door.drag-src {
  visibility: hidden !important;
  pointer-events: none !important;
}
html.hs-web .door-slot {
  border-radius: 12px !important;
  border: 1.5px dashed rgba(100,190,73,.45);
  background: rgba(100,190,73,.06);
  min-height: 100px;
}
html.hs-web .door-ghost {
  position: fixed !important;
  z-index: 80 !important;
  pointer-events: none !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) !important;
  transform: scale(1.06);
  opacity: .98;
  border-radius: 12px !important;
}
html.hs-web .door-ghost.settling {
  transition: left .28s cubic-bezier(.22,.61,.36,1), top .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease, box-shadow .2s ease;
  transform: scale(1);
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}

html.hs-web .layout-bar {
  bottom: 28px;
  border-radius: 14px;
  border-color: var(--line);
  background: var(--card);
}


html.hs-web .top-actions {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px !important;
  margin-bottom: 16px !important;
  width: 100%;
  max-width: none;
}

html.hs-web .top-actions button.act {
  flex: 1 1 0;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

html.hs-web .list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  flex-direction: unset !important;
}

html.hs-web .door {
  padding: 12px !important;
  gap: 10px !important;
  border-radius: 12px !important;
  min-width: 0;
}

html.hs-web .door .top {
  gap: 10px !important;
}

html.hs-web .door .icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

html.hs-web .door .label {
  font-size: 14px !important;
  line-height: 1.25;
}

html.hs-web .door .hint {
  font-size: 10px !important;
  margin-top: 2px !important;
}

html.hs-web .door .actions {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: 8px !important;
}

html.hs-web .door .actions button.act {
  flex: 1 1 0;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
}

html.hs-web .lead {
  max-width: 52rem;
}

html.hs-web .status {
  margin-top: 12px !important;
}

/* ---- Forms / inputs ---- */
html.hs-web input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html.hs-web textarea,
html.hs-web select {
  background: var(--hs-input-bg);
  color: var(--text);
  border-color: var(--line);
}

/* ---- Login: compact centered card (web) ---- */
html.hs-web body:has(#login) {
  background:
    radial-gradient(900px 420px at 50% 18%, color-mix(in srgb, var(--fg) 16%, transparent), transparent 70%),
    radial-gradient(700px 360px at 80% 90%, color-mix(in srgb, var(--fg) 8%, transparent), transparent 65%),
    var(--bg);
  color: var(--text);
  display: grid !important;
  place-items: center !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100dvh;
  padding: 72px 20px 40px;
  box-sizing: border-box;
}

html.hs-web #login {
  width: min(320px, calc(100% - 32px));
  margin: 0 auto !important;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: var(--hs-shadow), 0 18px 50px color-mix(in srgb, #000 18%, transparent);
  position: relative;
}

html.hs-web #login::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--fg), transparent);
}

html.hs-web #login h1 {
  color: var(--text);
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  margin: 2px 0 4px !important;
  text-align: center;
}

html.hs-web #login .sub {
  color: var(--muted);
  text-align: center;
  margin: 0 0 16px !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

html.hs-web #login p,
html.hs-web #login label {
  color: var(--muted);
}

html.hs-web #login label:not(.check) {
  margin: 10px 0 5px !important;
  font-size: 11px !important;
}

html.hs-web #login input:not([type="checkbox"]) {
  background: var(--hs-input-bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px !important;
  font-size: 14px;
}

html.hs-web #login input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 22%, transparent);
}

html.hs-web #login .pw-wrap input {
  padding-right: 78px !important;
}

html.hs-web #login .pw-toggle {
  background: var(--fg) !important;
  color: #0b1016 !important;
  border: 0 !important;
  min-width: 64px;
  padding: 7px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 0 color-mix(in srgb, #000 20%, transparent);
}

html.hs-web.hs-theme-light #login .pw-toggle {
  outline: 1px solid color-mix(in srgb, #0b1016 18%, transparent);
}

html.hs-web #login button#signIn {
  background: #64be49;
  color: #0b1016;
  margin-top: 14px !important;
  padding: 11px 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em;
}

html.hs-web #login button#signIn:hover {
  filter: brightness(1.06);
}

/* Install CTA: shown on phone browsers; desktop media query below hides it on PC */
html.hs-web #login .install {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  font-weight: 650;
}

html.hs-web #login .check {
  color: var(--text);
  margin-top: 12px !important;
  font-size: 13px !important;
}

html.hs-web #login .err {
  min-height: 16px;
  margin-top: 8px !important;
  text-align: center;
  font-size: 12px;
}

html.hs-web #login .steps {
  color: var(--muted);
}

html.hs-web #login .steps b {
  color: var(--text);
}

/* Theme control on login: small quiet chip, top-right — not a full-width CTA */
html.hs-web body:has(#login) .hs-theme-toggle-fixed {
  top: 12px;
  right: 12px;
  left: auto;
  width: auto !important;
  max-width: max-content;
  margin: 0 !important;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
  opacity: 0.85;
}
html.hs-web body:has(#login) .hs-theme-toggle-fixed:hover,
html.hs-web body:has(#login) .hs-theme-toggle-fixed:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--muted) 70%, transparent);
  opacity: 1;
  outline: none;
}
@media (max-width: 720px) {
  html.hs-web body:has(#login) .hs-theme-toggle-fixed {
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 550;
  }
}

/* Hardcoded dark leftovers on light web */
html.hs-web.hs-theme-light .trackline,
html.hs-web.hs-theme-light a.trackline {
  color: var(--text);
}

html.hs-web.hs-theme-light a.trackline {
  border-bottom-color: rgba(21, 32, 43, 0.28);
}

html.hs-web.hs-theme-light .mic {
  color: var(--text);
}

html.hs-web.hs-theme-light .dept-trigger {
  background: var(--hs-input-bg);
  color: var(--text);
}

html.hs-web.hs-theme-light .addtrip,
html.hs-web.hs-theme-light .mic.on {
  color: #0b1016;
}

html.hs-web.hs-theme-light .row,
html.hs-web.hs-theme-light .user {
  border-bottom-color: var(--line);
}

html.hs-web.hs-theme-light .swatch {
  border-color: var(--line);
}

/* App mode: same shell as tunnel (root-mounted phone app). No desktop zoom hacks. */
html.hs-app {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.hs-app .day,
html.hs-app #board > .day {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
html.hs-app .day .card,
html.hs-app .day .card-slot {
  width: 100% !important;
  max-width: none !important;
}
html.hs-app .shot {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 800 / 369;
  object-fit: cover !important;
  object-position: center;
  background: #0b1016;
}
html.hs-app .day,
html.hs-app #board > .day {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
html.hs-app .day .card,
html.hs-app .day .card-slot {
  width: 100% !important;
  max-width: none !important;
}
html.hs-app .shot {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 800 / 369;
  object-fit: cover !important;
  object-position: center;
  background: #0b1016;
}

/* Hide phone-install CTA on desktop web (PC) */
@media (hover: hover) and (pointer: fine) {
  html.hs-web #install,
  html.hs-web #steps {
    display: none !important;
  }
}

/* Narrow screens: keep nav usable */
@media (max-width: 720px) {
  html.hs-web .hs-site-nav {
    padding: 8px 16px;
    gap: 10px;
    min-height: 60px;
  }

  html.hs-web .hs-site-nav-logo-wrap {
    width: 86px;
    height: 44px;
  }

  html.hs-web .hs-site-nav-logo {
    width: 86px;
    height: 44px;
  }

  html.hs-web header,
  html.hs-web main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html.hs-web .list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }

  html.hs-web body:has(#login) {
    padding: 64px 16px 24px;
  }

  html.hs-web #login {
    width: min(300px, calc(100% - 24px));
  }
}


/* Aircraft card drag (web) */
html.hs-web .day .card {
  cursor: grab;
}
html.hs-web .day.reordering .card-ghost,
html.hs-web .day .card.drag-src {
  cursor: grabbing;
}


/* Aircraft card photos — match aspect + radius (web) */
html.hs-web .shot {
  width: 100%;
  aspect-ratio: 1400 / 646;
  height: auto;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
}


/* Hide page headers that only duplicate HangarSync brand (web) */
html.hs-web header.hs-web-brand-dup,
html.hs-web header[hidden].hs-web-brand-dup {
  display: none !important;
}


/* Page trail — current section highlighted */
html.hs-web .hs-page-trail .on {
  color: var(--fg);
  font-weight: 750;
}
html.hs-web .hs-page-trail span:not(.dot):not(.on) {
  color: var(--muted);
  opacity: 0.85;
}

/* Uniform page header height (web) */
html.hs-web header {
  min-height: 76px;
  padding: 18px 32px 14px !important;
  align-items: flex-start;
  box-sizing: border-box;
}
html.hs-web header h1,
html.hs-web h1 {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}
html.hs-web header .sub,
html.hs-web .sub {
  margin-top: 5px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  min-height: 16px;
}

/* Aircraft board — scale to the monitor (web) */
/* Lock the aircraft page to the viewport so cards fit with no page scroll */
html.hs-web body.hs-board-page,
html.hs-web body:has(#board) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Day view: allow the board to size to cards (no empty stretch under Add Trip) */
html.hs-web body.hs-board-page:has(.day),
html.hs-web body:has(#board > .day) {
  height: auto;
  max-height: none;
  overflow: auto;
}

html.hs-web body.hs-board-page .hs-site-nav,
html.hs-web body.hs-board-page header,
html.hs-web body.hs-board-page .viewbar,
html.hs-web body:has(#board) .hs-site-nav,
html.hs-web body:has(#board) header,
html.hs-web body:has(#board) .viewbar {
  flex: 0 0 auto;
  max-width: none !important;
  width: 100% !important;
}

html.hs-web body.hs-board-page main,
html.hs-web body:has(#board) main {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 8px 24px 16px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.hs-web body.hs-board-page:has(.day) main,
html.hs-web body:has(#board > .day) main {
  flex: 0 0 auto;
  overflow: visible;
}

html.hs-web .viewbar {
  margin: 0;
  padding: 6px 24px 8px !important;
  box-sizing: border-box;
  width: 100% !important;
}

html.hs-web #board {
  flex: 1 1 auto;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}


/* Aircraft / Week / Month — same button + curled green underline as site nav (web) */
html.hs-web .viewbar {
  gap: 4px !important;
  align-items: center;
}
html.hs-web .viewbar button.view {
  background: transparent !important;
  color: var(--muted) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  white-space: nowrap;
}
html.hs-web .viewbar button.view:hover {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--fg) 12%, transparent) !important;
}
html.hs-web .viewbar button.view.on {
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  padding-bottom: 2px !important;
  /* inset shadow follows the 8px radius so the green line curls at the ends */
  box-shadow: inset 0 -2px 0 0 var(--fg) !important;
}

/* ---- Day cards: 3-up only on wide desktop web (fine pointer). Phones stay 1-col via app shell. ---- */
html.hs-web #board > .day {
  flex: 0 0 auto;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  align-items: start;
  height: auto;
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  html.hs-web #board > .day {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

html.hs-web .day .card,
html.hs-web .day .card-slot {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 14px !important;
}

html.hs-web .day .card > .shot {
  width: 100%;
  flex: 0 1 auto;
  max-height: 28%;
  aspect-ratio: auto !important;
  height: auto;
  object-fit: cover;
  object-position: center;
  margin-bottom: 8px !important;
  border-radius: 12px;
}

html.hs-web .day .card > .card-top {
  flex: 0 0 auto;
}

html.hs-web .day .card .type {
  font-size: 24px !important;
  margin-top: 4px !important;
}

html.hs-web .day .card > .times {
  flex: 0 0 auto;
  margin-top: 10px !important;
  font-size: 18px !important;
}

html.hs-web .day .card > .trackline,
html.hs-web .day .card > a.trackline,
html.hs-web .day .card > .track {
  flex: 0 0 auto;
  margin-top: 8px !important;
}

/* Always reserve one line for the ADS-B track link so in-flight cards
   do not grow/shift when the link appears (web only). */
html.hs-web .day .card > .track {
  min-height: 1.45em;
  line-height: 1.35;
  font-size: 13px;
}
html.hs-web .day .card > .track a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

/* Dark theme: dashboard chrome, aircraft cards, and doors share one 1px outline. */
html.hs-web.hs-theme-dark .tool:not(.hs-theme-toggle),
html.hs-web.hs-theme-dark a.tool:not(.hs-theme-toggle),
html.hs-web.hs-theme-dark button.tool:not(.hs-theme-toggle),
html.hs-web.hs-theme-dark a.tile,
html.hs-web.hs-theme-dark a.service,
html.hs-web.hs-theme-dark .card,
html.hs-web.hs-theme-dark .day .card,
html.hs-web.hs-theme-dark .door {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--btn-line) !important;
}

html.hs-web .day .card > .addtrip {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
  padding: 10px 12px !important;
  order: 99; /* keep as visual bottom of card */
}

/* When ETA is showing, keep card-top room; flap digits can shrink a bit on web */
html.hs-web .day .card .eta-box {
  flex-shrink: 0;
}
html.hs-web .day .card .flap-digit {
  width: 32px;
  height: 46px;
  font-size: 26px;
}
html.hs-web .day .card .flap-colon {
  font-size: 28px;
  line-height: 46px;
}

/* ---- Week / Month calendars: fill remaining main area ---- */
html.hs-web #board > .cal-zoom-shell {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

html.hs-web #board > .cal-zoom-shell > .cal-zoom-pad {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
  transform-origin: 0 0;
}

html.hs-web #board > .cal-zoom-shell > .cal-zoom-pad > .month {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
}

html.hs-web #board .month-nav,
html.hs-web #board .month-dows {
  flex: 0 0 auto;
  width: 100%;
}

/* Week view: hug stacked bars (content height) */
html.hs-web #board > .cal-zoom-shell:has(.month.is-week) {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
html.hs-web #board > .cal-zoom-shell:has(.month.is-week) > .cal-zoom-pad,
html.hs-web #board > .cal-zoom-shell:has(.month.is-week) > .cal-zoom-pad > .month.is-week {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}
html.hs-web #board .month.is-week .month-week {
  flex: 0 0 auto !important;
  /* Floor only — JS sets exact min-height:!important from lane count */
  min-height: 196px;
  height: auto !important;
}
html.hs-web #board .month.is-week .month-week .daycell {
  min-height: 196px;
  height: auto !important;
}

/* Month view (web): full month in viewport, equal week rows, smaller bars */
html.hs-web #board > .cal-zoom-shell:has(.month:not(.is-week)) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
html.hs-web #board > .cal-zoom-shell:has(.month:not(.is-week)) > .cal-zoom-pad {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
html.hs-web #board .month:not(.is-week) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
html.hs-web #board .month:not(.is-week) .month-title,
html.hs-web #board .month:not(.is-week) .month-nav,
html.hs-web #board .month:not(.is-week) .month-dows {
  flex: 0 0 auto !important;
}
html.hs-web #board .month:not(.is-week) .month-dows span {
  padding: 6px 2px !important;
  font-size: 12px !important;
}
html.hs-web #board .month:not(.is-week) .month-week {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 0 !important; /* equal flex share for every week */
  max-height: none !important;
  align-items: stretch;
  overflow: hidden !important;
}
html.hs-web #board .month:not(.is-week) .month-week .daycell {
  min-height: 0 !important;
  height: 100% !important;
  padding: 22px 2px 2px !important;
  font-size: 12px !important;
}
html.hs-web #board .month:not(.is-week) .daycell .num {
  height: 22px !important;
  font-size: 11px !important;
  padding: 0 6px !important;
}
html.hs-web #board .month:not(.is-week) .month-bars {
  top: 24px !important;
  bottom: 2px !important;
  overflow: hidden !important;
}
html.hs-web #board .month:not(.is-week) .mflight,
html.hs-web #board .month:not(.is-week) .mflight.mflight-flex {
  /* height/top come from JS calc(%) — do not override with height:auto */
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 3px !important;
  padding: 1px 3px !important;
  overflow: hidden;
}
/* Week view (single row) — keep content-height bars */
html.hs-web #board .month.is-week .month-week {
  flex: 0 0 auto !important;
  min-height: 196px;
  height: auto !important;
}
html.hs-web #board .month.is-week .month-week .daycell {
  min-height: 196px;
  height: auto !important;
}
html.hs-web #board .month.is-week .mflight {
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 4px !important;
  overflow: hidden;
}
html.hs-web #board .month-week {
  width: 100% !important;
  align-items: stretch;
}
html.hs-web #board .month-week .daycell {
  height: 100% !important;
}

html.hs-web #board .month-title {
  font-size: 22px !important;
}

@media (max-width: 900px) {
  html.hs-web body.hs-board-page,
  html.hs-web body:has(#board) {
    height: auto;
    max-height: none;
    overflow: auto;
    display: block;
  }
  html.hs-web body.hs-board-page main,
  html.hs-web body:has(#board) main {
    display: block;
    overflow: visible;
    min-height: 0 !important;
  }
  html.hs-web #board > .day {
    grid-template-columns: 1fr !important;
    height: auto;
  }
  html.hs-web .day .card,
  html.hs-web .day .card-slot {
    height: auto !important;
    max-height: none !important;
  }
  html.hs-web .day .card > .shot {
    max-height: 200px;
  }
  html.hs-web #board > .cal-zoom-shell {
    height: auto !important;
  }
  html.hs-web #board .month:not(.is-week) .month-week {
    min-height: 0 !important;
  }
  html.hs-web #board .month.is-week .month-week {
    min-height: 140px;
  }
}


/* ETA-to airport on day cards */
html.hs-web .eta-to {
  margin-top: 8px !important;
  gap: 8px !important;
}
html.hs-web .eta-to input {
  background: var(--hs-input-bg) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
}


/* Week trip bars keep fixed height; month uses .mflight-flex above */
html.hs-web #board .month.is-week .mflight {
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 4px !important;
  overflow: hidden;
}
html.hs-web #board .month-bars {
  top: 36px !important;
  bottom: 6px !important;
}


/* Web: no pinch-to-zoom chrome on calendars */
html.hs-web .cal-zoom-hint,
.cal-zoom-hint {
  display: none !important;
}

html.hs-web .callsign-row {
  margin-top: 8px !important;
  gap: 8px !important;
}
html.hs-web .callsign-row input {
  background: var(--hs-input-bg) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  flex: 0 1 50% !important;
  width: 50% !important;
  max-width: 9.5em !important;
  min-width: 5.5em !important;
}