/*
 * shell_v2.css — icon rail + header context chips for the embedded widget.
 * HANDOFF_widget_v2 Phase A. Loaded from widget_base.html only when
 * WidgetConfig.enable_rail is on, so a v1 tenant does not download it.
 *
 * Everything here is scoped under .widget-has-rail (the body class) or a
 * .widget-rail / .widget-chip class that only shell v2 emits. Nothing in this
 * file can reach a flag-off render.
 *
 * Tokens come from widget.css (--widget-primary and friends), which loads
 * first; this file adds no new custom properties.
 *
 * MOBILE FIRST. The default rules below are the narrow layout: the rail is a
 * fixed bottom tab bar. A 56px left column would eat 14% of a 390px viewport
 * for pure chrome, and a left rail puts navigation as far from a thumb as the
 * screen allows. The vertical rail is a >=480px enhancement.
 *
 * 480px, not 768px (BC:10230310395). Phase A shipped the vertical rail behind
 * a 768px query, but the launcher's panel -- the embed shape every TG4B deck
 * demos, see embed.js .panel -- is 560px wide, and the media query runs
 * against the IFRAME's width, not the host page's. So the one layout partners
 * actually see could never reach 768px and never showed the rail at all. The
 * breakpoint has to sit under 560px to fire there, and above the 430px of the
 * widest phone in portrait so a real phone still gets the thumb-reachable
 * bottom bar. Below 640px the launcher goes full-screen and takes the device
 * width with it, which is the same rule from the other direction.
 */

/* ── Rail: bottom tab bar (mobile default) ─────────────────────────────── */

.widget-rail {
  /* Fixed to the iframe viewport, not the document: the itinerary is long and
     navigation must not scroll away. Body padding below reserves its space. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 2px;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--widget-surface);
  border-top: 1px solid var(--widget-border);
}

.widget-has-rail {
  /* Room for the bar plus the iOS home indicator. */
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.widget-rail-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* Rule 8: 44px minimum tap target, in both dimensions. */
  min-height: 44px;
  padding: 4px 2px;
  border: none;
  border-radius: var(--widget-radius-sm);
  background: transparent;
  color: var(--widget-text-muted);
  font-family: var(--widget-font);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}

.widget-rail-item:hover {
  text-decoration: none;
}

.widget-rail-label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-rail-item--active {
  color: var(--widget-primary);
  background: color-mix(in srgb, var(--widget-primary) 12%, transparent);
}

/* Phases C and D wire these up. Until then they are visibly inert rather than
   links to pages that do not exist. :disabled already blocks the tap, and the
   title attribute is a supplement, never the only signal — a touch device
   never sees a tooltip. */
.widget-rail-item--soon {
  opacity: 0.45;
  cursor: default;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.widget-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.widget-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 12px;
  border: 1px solid var(--widget-border);
  border-radius: 22px;
  background: var(--widget-bg);
  color: var(--widget-text);
  font-size: 14px;
  font-weight: 600;
  cursor: text;
}

.widget-chip:focus-within {
  border-color: var(--widget-primary);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--widget-primary) 20%, transparent);
}

.widget-chip i {
  color: var(--widget-primary);
  font-size: 13px;
  flex-shrink: 0;
}

.widget-chip--locked {
  background: color-mix(in srgb, var(--widget-primary) 12%, transparent);
  border-color: transparent;
  color: var(--widget-primary);
  cursor: default;
}

.widget-chip-lock {
  font-size: 10px;
  opacity: 0.7;
}

.widget-chip-input {
  width: 3.5ch;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--widget-font);
  font-size: 14px;
  font-weight: 700;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.widget-chip-input::-webkit-outer-spin-button,
.widget-chip-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.widget-chip-input--budget {
  width: 9ch;
}

.widget-chip-unit {
  font-weight: 500;
  color: var(--widget-text-muted);
  font-size: 13px;
}

/* Label text kept for screen readers where the icon carries the meaning. */
.widget-chip-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 480px+: the rail becomes the left column ──────────────────────────── */

@media (min-width: 480px) {
  /*
   * Grid areas, so the tenant logo (.widget-brand-header) and the powered-by
   * mark (.widget-powered-by) move into the rail column WITHOUT being
   * duplicated in the DOM. Both still render from their one place in
   * widget_base.html, and show_powered_by keeps working unchanged.
   *
   * The ribbon row collapses to 0 when the preview ribbon is absent, which it
   * is for every production embed.
   */
  .widget-has-rail {
    display: grid;
    grid-template-columns: 76px 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "ribbon ribbon"
      "brand  notice"
      "rail   main"
      "power  main";
    /* The SHELL is the viewport and the itinerary scrolls inside it, rather
       than the whole document scrolling. That is what keeps the entire left
       column on screen: brand at the top, rail beneath it, powered-by pinned
       at the bottom, all by construction rather than by three separate sticky
       rules. It also means the rail cannot outgrow the space it has.

       A wrapper element around the three would have been the other way to do
       it, but brand, rail and powered-by are not adjacent in widget_base.html
       and reordering them would change the flag-OFF render, which the golden
       snapshot pins. */
    height: 100vh;
    overflow: hidden;
    padding-bottom: 0;
  }

  .widget-has-rail .widget-preview-ribbon {
    grid-area: ribbon;
  }

  .widget-has-rail .widget-brand-header {
    grid-area: brand;
    justify-content: center;
    padding: 10px 6px;
    border-right: 1px solid var(--widget-border);
  }

  /* The rail column is narrower than the strip these were sized for, so the
     logo and the wordmark fallback both shrink to fit rather than clip. */
  .widget-has-rail .widget-brand-logo {
    height: 22px;
    max-width: 100%;
  }

  .widget-has-rail .widget-brand-name {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    /* break-word, not anywhere: `anywhere` splits mid-word even when a space
       is available, so "Visit Amsterdam" rendered as "Visit Amsterda / m" in
       the 76px column. This only became visible once the rail started firing
       at the launcher's real width (BC:10230310395). */
    overflow-wrap: break-word;
  }

  .widget-has-rail .widget-ai-notice {
    grid-area: notice;
  }

  .widget-has-rail .widget-main {
    grid-area: main;
    /* The one thing that scrolls. min-height:0 because a grid item's default
       min-height is auto, which refuses to shrink below its content and would
       push the shell past the viewport instead of scrolling. */
    overflow-y: auto;
    min-height: 0;
    min-width: 0;
  }

  .widget-has-rail .widget-powered-by {
    grid-area: power;
    border-top: none;
    border-right: 1px solid var(--widget-border);
    padding: 10px 6px;
  }

  /* Stacked, because "Powered by" plus an 80px wordmark does not fit a 76px
     column on one line. */
  .widget-has-rail .widget-powered-by-line {
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
    line-height: 1.2;
  }

  .widget-has-rail .widget-powered-by-logo {
    height: 12px;
    max-width: 100%;
  }

  .widget-has-rail .widget-rail {
    grid-area: rail;
    /* position:static is load-bearing and must not be dropped. The mobile
       default is position:fixed (a bottom tab bar), and a fixed element is out
       of flow, so it ignores grid-area entirely: the rail rendered as a
       vertical stack floating over the form instead of as the left column.
       That is exactly what happened when an earlier edit here replaced a
       sticky rule and took the position declaration with it.

       Static is enough now because the shell is viewport-height and
       .widget-main is the only scroller, so the rail cannot scroll away and
       does not need to travel. overflow-y guards a tenant with every feature
       enabled from producing a rail taller than its column. */
    position: static;
    align-self: stretch;
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 10px 8px;
    border-top: none;
    border-right: 1px solid var(--widget-border);
    background: transparent;
  }

  .widget-has-rail .widget-rail-item {
    flex: 0 0 auto;
    min-height: 56px;
    gap: 5px;
    font-size: 17px;
  }
}