/*
 * The signed-in shell. Nothing here renders on a marketing page.
 */

/* Account menu (signed-in app chrome). Inline dropdown on desktop; hamburger sheet on mobile. */
.account { position: relative; display: inline-flex; }
.account__trigger {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line1); border-radius: var(--r-btn);
  color: var(--text-2); font-family: var(--font-mono); font-size: 13px; cursor: pointer;
  transition: border-color var(--motion), color var(--motion);
}
.account__trigger:hover { color: var(--text); border-color: var(--line1); }
.account__label { display: none; }
.account__caret { width: 14px; height: 14px; display: none; }
.account__trigger[aria-expanded="true"] .account__caret { transform: rotate(180deg); }
.account__burger { width: 22px; height: 22px; }
@media (min-width: 860px) {
  .account__label, .account__caret { display: inline-flex; }
  .account__burger { display: none; }
}

.account__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 232px; z-index: 60;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line1); border-radius: var(--r-card);
}
.account__menu[hidden] { display: none; }
.account__email {
  padding: 8px 10px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-4);
  border-bottom: 1px solid var(--line1); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis;
}
.account__menu form { margin: 0; }
.account__item {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: var(--r-chip);
  background: transparent; color: var(--text-2); font-family: inherit; font-size: 14px; cursor: pointer;
}
.account__item:hover { background: var(--bg); color: var(--text); }

body.nav-locked { overflow: hidden; }
/* Mobile: the menu drops to a full-width sheet under the bar. */
@media (max-width: 859px) {
  .account { position: static; }
  .account__menu {
    left: 0; right: 0; top: 100%; min-width: 0; border-radius: 0;
    border-left: 0; border-right: 0; border-top: 1px solid var(--line1);
  }
}

/* ------------------------------------------------------------- App shell --- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }

.app-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line1);
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-sidebar__mark { padding: 20px; border-bottom: 1px solid var(--line1); }
/* The hamburger only exists in the mobile top bar. */
.app-sidebar__burger { display: none; }

/* The `hidden` attribute in the markup is for the mobile sheet, which starts closed. At this
   width there is no sheet -- the column is the navigation -- so the attribute is overridden
   rather than the markup being made width-aware. */
.app-sidebar__body,
.app-sidebar__body[hidden] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.app-nav { display: flex; flex-direction: column; padding: 16px 0; }

.app-nav__item {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4);
  /* 20px less the 2px bar, so the label does not shift when the bar appears. */
  padding: 13px 20px 13px 18px;
  border-left: 2px solid transparent;
  transition: color var(--motion), border-color var(--motion);
}
.app-nav__item:hover { color: var(--text); }
.app-nav__item.is-active { color: var(--text); border-left-color: var(--accent); }

/* Pinned to the bottom of the column by the body's space-between. */
.app-switcher { padding: 20px; border-top: 1px solid var(--line1); }
.app-switcher__account { margin: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.app-switcher__email {
  margin: 2px 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-4);
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-switcher__links { display: flex; flex-direction: column; }
.app-switcher form { margin: 0; }
.app-switcher__item {
  /* Flex rather than block, so min-height can hold the 44px target without the label
     drifting to the top of it. */
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  text-align: left;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: color var(--motion);
}
.app-switcher__item:hover { color: var(--text); }

.app-main { min-width: 0; padding-block: 40px; }
/* Inside the native shells there is no sidebar, so the column supplies its own gutters. */
.app-main--bare { padding-inline: var(--gutter); }

/* Under 900px the sidebar becomes a top bar and the nav collapses into a sheet. */
@media (max-width: 899px) {
  .app { display: block; }

  .app-sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line1);
  }

  .app-sidebar__mark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0;
    padding: 14px var(--gutter);
  }

  .app-sidebar__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px minimum hit target. */
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .app-sidebar__burger svg { width: 22px; height: 22px; }

  .app-sidebar__body { display: block; border-top: 1px solid var(--line1); }
  .app-sidebar__body[hidden] { display: none; }

  .app-nav__item { padding-inline: var(--gutter); }
  .app-switcher { padding-inline: var(--gutter); }

  .app-main { padding-block: 28px; }
}

/* ----------------------------------------------------------- Auth shell --- */
.auth-shell {
  max-width: 400px;
  /* Not centred in the viewport: an optically centred card sits slightly high, and this keeps the
     card from moving when an inline error appears under a field. */
  margin: clamp(40px, 12vh, 96px) auto;
  padding-inline: var(--gutter);
}
.auth-shell__mark { text-align: center; margin-bottom: 28px; }

/* --------------------------------------------------------- Saved flights -- */
/* saved_flights/index, drawn from the approved comps. The list beside the Pro panel on a wide
   screen, the panel above it on a narrow one: one wrapping row, the panel last in the source so a
   screen reader meets the flights first. */
.saved-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.saved-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.saved-pro { flex: 1 1 260px; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
/* BELOW 1200px THE PANEL GOES ON TOP, AS A BANNER. The list and the panel stop fitting side by
   side around there (the sidebar takes 240px), and a wrapped flex row would drop the panel under the
   last flight, where nobody reads it. A banner (the comps' phone frame) is the heading, a line, the
   price and the button: the full case is one tap away on pricing. */
@media (max-width: 1199px) {
  .saved-layout { flex-direction: column; align-items: stretch; }
  .saved-pro { order: -1; max-width: none; }
  .saved-pro__features,
  .saved-pro__refund { display: none; }
}
@media (max-width: 699px) {
  .saved-pro__yearly { display: none; }
}
.saved-pro__eyebrow { margin: 0; color: var(--accent-text); }
.saved-pro__title { margin: 0; font-size: 22px; line-height: 1.2; }
.saved-pro__body { margin: 0; color: var(--text-2); }
.saved-pro__features { margin: 4px 0; }
.saved-pro__price { margin: 4px 0 0; display: flex; align-items: baseline; gap: 8px; }
.saved-pro__amount { font-family: var(--font-mono); font-size: 28px; font-weight: 500; }
.saved-pro__cadence { color: var(--text-3); }
.saved-pro__refund { margin: 0; }

.saved-group { display: flex; flex-direction: column; }
.saved-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.saved-group__title { margin: 0; font-size: 19px; }
.saved-group__kind { margin-left: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-4); }
.saved-group__link { font-size: 14px; }

/* THE COLUMNS, as ONE grid that the heading row and every flight row share through subgrid. Each
   row sizing its own grid put the headings over nothing in particular. The dates take what is left
   and wrap; price, label and actions take what they need, and the actions wrap rather than push the
   row wider than its box (the Portuguese "Avisar-me se baixar" once scrolled the page sideways). */
.saved-table { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, auto) auto; }
.saved-list-head,
.saved-list,
.saved-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
.saved-list-head,
.saved-row {
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
}
.saved-list-head {
  border: 1px solid var(--line1);
  border-bottom: 0;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}
.saved-list-head__num { text-align: right; }
.saved-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line1); background: var(--surface); }
.saved-row { border-top: 1px solid var(--line1); }
.saved-row:first-child { border-top: 0; }
.saved-row__dates,
.saved-row__price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.saved-row__price { align-items: flex-end; text-align: right; }
.saved-row__when { font-family: var(--font-mono); }
.saved-row__meta,
.saved-row__delta { font-family: var(--font-mono); font-size: 12px; color: var(--text-4); }
.saved-row__delta,
.saved-row__now { white-space: nowrap; }
.saved-row__delta--down { color: var(--accent-text); }
.saved-row__now { font-family: var(--font-mono); font-size: 17px; font-weight: 500; color: var(--accent-text); }
.saved-row__none { font-size: 14px; color: var(--text-3); }
.saved-row__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.saved-row__actions form { display: inline-flex; margin: 0; }
.saved-row__check { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 14px; white-space: nowrap; }
.saved-row__watch,
.saved-row__watching {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.saved-row__watch:hover { border-color: var(--accent); }
.saved-row__watching { border-color: transparent; background: var(--accent-08); color: var(--accent-text); font-weight: 600; }
.saved-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--text-4);
  cursor: pointer;
}
.saved-row__remove:hover { color: var(--text); }
.saved-row__remove svg { width: 16px; height: 16px; }

/* A PHONE GETS A CARD PER FLIGHT, from the same markup: the heading row goes, and each row stacks
   dates, price, label, then a full-width row of 44px buttons. */
@media (max-width: 699px) {
  .saved-table { display: block; }
  .saved-list-head { display: none; }
  .saved-list { border: 0; background: none; display: flex; flex-direction: column; gap: 12px; }
  .saved-row {
    grid-template-columns: 1fr;
    border: 1px solid var(--line1);
    background: var(--surface);
    padding: 16px;
  }
  .saved-row:first-child { border-top: 1px solid var(--line1); }
  .saved-row__price { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 10px; }
  .saved-row__now { font-size: 26px; }
  .saved-row__verdict:empty { display: none; }
  .saved-row__actions { justify-content: stretch; border-top: 1px solid var(--line1); padding-top: 12px; }
  .saved-row__check,
  .saved-row__watch,
  .saved-row__watching { flex: 1 1 0; justify-content: center; min-height: 44px; border: 1px solid var(--line2); border-radius: var(--r-btn); }
  .saved-row__actions form:has(.saved-row__watch) { flex: 2 1 0; }
  .saved-row__actions form .saved-row__watch { width: 100%; }
  .saved-row__remove { border: 1px solid var(--line2); border-radius: var(--r-btn); }
  .saved-row__check { border-radius: var(--r-btn); }
}

.saved-departed { border-top: 1px solid var(--line1); padding-top: 8px; color: var(--text-3); }
.saved-departed__summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.saved-departed__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.saved-departed__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.saved-departed__list form { margin: 0; }
.saved-departed__remove { min-height: 44px; border: 0; background: none; color: var(--text-4); font: inherit; font-size: 13px; cursor: pointer; }
.saved-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 560px; }