/* F. BINSABBAR - Itinerary Editor: LAYOUT ONLY.
 *
 * Every piece of chrome (page nav, back pill, hero, buttons, fields, selects,
 * switches, tags, count pills, modals, popovers, toasts, segmented nav, busy
 * scrim, brand icons) comes from ../guidelines/fb-ui.css through its real class
 * names, so a kit change reflects here for free. Nothing in this file
 * re-declares a kit token and nothing re-skins a kit component. What lives here
 * is the app shell: the page column, the standing action row, the two-pane
 * workspace, the destination rail, the block editor rows and the few
 * page-local widgets the kit genuinely does not ship.
 *
 * Reading tokens: var(--token, fallback). The fallback only applies if the kit
 * failed to load; when the kit is linked the kit value always wins.
 *
 * Specificity notes, because this page composes kit classes rather than copying
 * them:
 *   - fb-ui.css carries a `:root`-prefixed alias block. `:root .mat` is (0,2,0)
 *     and `:root input[type=text]` is (0,2,1). A page rule must match or beat
 *     those. Where this file needs to win a tie it relies on source order (this
 *     stylesheet is linked after the kit), which is deterministic.
 *   - There is NO !important anywhere in this file, and none is needed. The kit
 *     styles bare inputs through `input:where(...)`, which has ZERO specificity
 *     precisely so component classes override it.
 *   - `--hairline` does not exist in the kit. Borders read --control-border.
 */

/* ---------- hidden must beat kit component display ----------
   The user-agent rule `[hidden] { display: none }` is (0,0,1) and loses to any
   class, so a kit component the page toggles by attribute (a .tag, a .count-pill,
   an .itn-view) would stay on screen. One scoped guard at (0,1,1) fixes every
   case. This is the bug that kept the old auth gate painted over the whole app. */
.itn-app [hidden],
.itn-gate [hidden],
.modal [hidden] { display: none; }

/* ============ ACCESS GATE ============ */
.itn-gate:not([hidden]) {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--s-6, 24px);
}
.itn-gate-card { max-width: 420px; text-align: center; }
.itn-gate-brand { margin: 0 0 var(--s-3, 12px); font-size: 12px; }
.itn-gate-actions { justify-content: center; margin-top: var(--s-5, 20px); }

/* ============ APP SHELL ============
   House page flow, not a bespoke fixed shell. The kit's sticky .page-nav and
   the .hero live in normal document flow exactly as they do in stockroom,
   people, visits, daybook, traders and legal-admin, so the back pill collapses
   on scroll and the hero gets out of the way on a phone. The one thing this
   tool keeps from its old fixed shell is INTERNAL pane scrolling, and only
   where two panes are on screen at once (see the 1024px note below).

   `--itn-chrome-h` is the height of the standing action row: one 44px control
   plus the row's own 8px top and bottom padding. It is a page-local name, not a
   kit token. */
.itn-app {
  --itn-chrome-h: calc(var(--control-h, 44px) + var(--s-4, 16px));
}

/* The page column. `.page` is page-owned in this house, not a kit component:
   fb-ui.css ships .page-nav and .page-loader but no .page. Scoped under
   .itn-app so it can never leak. Width matches .page-nav-inner (1100px) so the
   back pill and the hero share one left edge. */
.itn-app .page {
  max-width: 1100px;
  margin: 0 auto;
  padding:
    var(--s-4, 16px)
    max(var(--s-6, 24px), env(safe-area-inset-right))
    var(--s-6, 24px)
    max(var(--s-6, 24px), env(safe-area-inset-left));
}

/* Icon sizing is the kit's own custom-property API. The kit sizes `.btn svg` to
   16px but ships no rule for a brand `.icon` span inside a .btn, so a leading
   icon would fall back to the 22px default and tower over the 13px label.
   Setting --icon-size reaches the size the kit already states for that slot. */
.itn-app .btn > .icon { --icon-size: 16px; }
/* Scoped to the collapse toggle only. A looser `.itn-block-h .icon` would also
   catch the row-menu .iconbtn and every .popover-item inside it and shrink
   glyphs the kit already sizes. */
.itn-block-toggle > .icon { --icon-size: 16px; color: var(--text-faint, #5a5a5a); }

/* Page-local eyebrow. The kit only styles `.eyebrow` inside .hero / .notice,
   so a section label in app chrome needs its own page rule. */
.itn-eyebrow {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint, #5a5a5a);
  white-space: nowrap;
}

/* ---------- standing page chrome ----------
   Save, Publish and the live-release tag are page actions on the whole guide,
   so they sit in a .btn-row directly under the hero, which is where the house
   puts a page's actions. They cannot go in .page-nav: the kit contract for that
   bar is a back pill plus optional in-nav tabs, nothing else.

   The row sticks under the nav so a 30-block chapter never puts Save out of
   reach. It carries the canvas colour because the hero scrolls behind it; that
   is a background, not a re-skin, and it reads the kit's own token. */
.itn-chrome {
  position: sticky;
  top: var(--page-nav-h, 64px);
  z-index: 20;
  display: grid;
  gap: var(--s-2, 8px);
  padding: var(--s-2, 8px) 0;
  background: var(--canvas-bg, #f4eedf);
}
.itn-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  flex-wrap: wrap;
  min-height: var(--control-h, 44px);
}
.itn-actions-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
}
/* button.primary / button.secondary are width:100% in the kit so they stack in
   a form. In an inline action row they are content width. (0,2,0) beats the
   kit's (0,1,1), so this holds regardless of source order. */
.itn-actions .primary,
.itn-actions .secondary { width: auto; }

/* ---------- pane switcher (revealed below 1024px) ---------- */
.itn-panebar { display: none; }
.itn-paneseg { flex: none; }

/* ---------- two-pane workspace ----------
   Above 1024px both panes are on screen, and a page-level scroll would strand
   the destination rail off the top the moment a chapter got long. So the
   workspace is bounded to the viewport under the standing chrome and each pane
   owns its own scroll. Below 1024px exactly one pane is visible, there is
   nothing to strand, and the panes go back to plain document flow so the phone
   gets its full height and there is no nested scroller to fight. */
.itn-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: var(--s-3, 12px);
  height: calc(100dvh - var(--page-nav-h, 64px) - var(--itn-chrome-h) - var(--s-6, 24px));
  min-height: 420px;
}
/* Page-local surface. Deliberately NOT glass: a backdrop-filter here would nest
   under every popover and modal inside it, which WebKit renders by hiding the
   child (Common/ui-kit.md hard rule). A flat translucent white gives the same
   card read with no filter at all. */
.itn-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
}
.itn-pane-h {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  min-height: 52px;
  padding: var(--s-2, 8px) var(--s-3, 12px) var(--s-2, 8px) var(--s-4, 16px);
  border-bottom: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
}
.itn-pane-h-end { margin-left: auto; }
.itn-pane-b {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-4, 16px);
}

/* ---------- destination rail ---------- */
.itn-rail .itn-pane-b > .group:first-child { margin-top: 0; }
.itn-cities { display: grid; gap: var(--s-1, 4px); margin-top: var(--s-2, 8px); }
/* .mat is inline-flex and content width in the kit. A rail row is a full-width
   list item, so only the box geometry changes; every colour, border, radius and
   selected state still comes from the kit. Specificity ties `:root .mat` (0,2,0)
   and wins on source order because this sheet is linked after fb-ui.css. */
.itn-rail .itn-city {
  display: flex;
  width: 100%;
  text-align: left;
}
.itn-rail .itn-city-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itn-rail .itn-city .tag { flex: none; margin-left: var(--s-2, 8px); }

/* ---------- workspace pane ---------- */
.itn-work-h { align-items: flex-start; }
.itn-work-id { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.itn-work-title {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itn-work-h .tag { flex: none; margin-top: var(--s-1, 4px); }
.itn-segrow {
  flex: none;
  padding: var(--s-3, 12px) var(--s-4, 16px) 0;
}

.itn-empty:not([hidden]) {
  display: grid;
  justify-items: center;
  gap: var(--s-4, 16px);
  text-align: center;
  padding: var(--s-8, 40px) var(--s-4, 16px);
}
.itn-empty-mark { --icon-size: 40px; color: var(--text-faint, #5a5a5a); }
.itn-empty p { margin: 0; max-width: 42ch; color: var(--text-muted, #3a3a3a); }

.itn-view:not([hidden]) { display: grid; gap: var(--s-5, 20px); }

.itn-rowbar {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  flex-wrap: wrap;
}
.itn-rowbar-end { margin-left: auto; }
.itn-rowbar-acts {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  flex-wrap: wrap;
}

.itn-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint, #5a5a5a);
}
.itn-inline { display: grid; gap: var(--s-2, 8px); }

/* Fieldsets carry a user-agent border, margin, padding and an intrinsic
   min-width that breaks grid children. Reset the box; the <legend> keeps the
   kit's parameter-title typography through the kit's own .field-label rule. */
.itn-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: var(--s-3, 12px);
}
.itn-fieldset > legend { padding: 0; }

/* Four seasons stacked one per row wastes half a screen. Same kit control,
   laid out as a wrapping row. */
.itn-seasons .check-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 var(--s-6, 24px);
}

/* ---------- the two-colour binding ----------
   The pill itself, both halves and the focus-within ring are all the kit's
   .color-hex-pill. Nothing here restates them; the typeable right half is the
   variant the kit already ships (`.color-hex-pill > input.hex`). */
.itn-contrast { display: grid; gap: var(--s-1, 4px); justify-items: start; }

/* ---------- cover plate ---------- */
.itn-plate-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--s-4, 16px);
  align-items: start;
}
.itn-plate {
  aspect-ratio: 1024 / 1365;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
}
.itn-plate img:not([hidden]) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.itn-plate-empty:not([hidden]) {
  display: grid;
  justify-items: center;
  gap: var(--s-2, 8px);
  padding: var(--s-3, 12px);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint, #5a5a5a);
}
.itn-plate-empty .icon { --icon-size: 28px; }
.itn-plate-controls { display: grid; gap: var(--s-4, 16px); }
.itn-pigments { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); }

/* ---------- label + inline action row ---------- */
.itn-labelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  flex-wrap: wrap;
}

/* ---------- map frame: a summary that expands ---------- */
.itn-details {
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
}
.itn-summary {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  min-height: var(--control-h, 44px);
  padding: var(--s-2, 8px) var(--s-4, 16px);
  cursor: pointer;
  list-style: none;
}
.itn-summary::-webkit-details-marker { display: none; }
.itn-summary > .icon { --icon-size: 18px; color: var(--text-muted, #3a3a3a); }
.itn-summary-t { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.itn-summary-x { margin-left: auto; transition: transform 0.18s ease; }
.itn-details[open] .itn-summary-x { transform: rotate(180deg); }
.itn-details-b {
  display: grid;
  gap: var(--s-3, 12px);
  padding: var(--s-4, 16px);
  border-top: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
}

/* ---------- irreversible actions ---------- */
.itn-danger {
  display: grid;
  gap: var(--s-2, 8px);
  padding-top: var(--s-5, 20px);
  border-top: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
}

/* ---------- chapter blocks ---------- */
.itn-blocks { display: grid; gap: var(--s-3, 12px); }
.itn-block {
  display: grid;
  gap: var(--s-3, 12px);
  padding: var(--s-3, 12px) var(--s-4, 16px) var(--s-4, 16px);
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
}
/* Collapsed, the block is one line: kind plus a preview. The row menu stays put
   and the padding tightens so a long chapter can be surveyed at a glance. */
.itn-block.is-collapsed { padding-bottom: var(--s-2, 8px); }
.itn-block-h {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
}
.itn-block-h .popover-host { margin-left: auto; }
/* The collapse toggle is a real button so it is in the tab order and carries
   aria-expanded / aria-controls. It takes no chrome of its own: the kind tag it
   contains is the kit's .tag, and the shared :focus-visible ring still applies
   because nothing here touches outline. */
.itn-block-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  min-height: var(--control-h, 44px);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-card, 16px);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.itn-block-caret { transition: transform 0.18s ease; }
.itn-block.is-collapsed .itn-block-caret { transform: rotate(-90deg); }
.itn-block-toggle .tag { flex: none; }
.itn-block-peek { display: none; }
.itn-block.is-collapsed .itn-block-peek {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-faint, #5a5a5a);
}
.itn-block-b { display: grid; gap: var(--s-3, 12px); }
.itn-block-sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3, 12px); }
.itn-block-photo {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

/* ---------- block sticker editor ---------- */
.itn-luggage-identity {
  min-height: 152px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: var(--s-4, 16px);
  overflow: hidden;
  padding: var(--s-4, 16px);
  background: var(--canvas-bg, #f4eedf);
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
}
.itn-luggage-identity > .icon { --icon-size: 24px; color: var(--text-faint, #5a5a5a); }
.itn-luggage-identity-copy { min-width: 0; }
.itn-luggage-identity-copy h3 { margin: 4px 0 0; font-size: 28px; font-weight: 400; }
.itn-luggage-identity .itn-sticker-art {
  position: relative;
  justify-self: end;
  width: 132px;
}

.itn-sticker-editor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  padding-top: var(--s-3, 12px);
  border-top: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
}
.itn-sticker-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
}
.itn-sticker-summary > .icon { --icon-size: 20px; color: var(--text-faint, #5a5a5a); }
.itn-sticker-summary p { margin: 2px 0 0; font-size: 12px; color: var(--text-faint, #5a5a5a); }
.itn-sticker-summary .itn-sticker-art { position: relative; flex: none; width: 58px; }

.itn-sticker-picker { display: grid; gap: var(--s-4, 16px); }
.itn-sticker-tabs { width: 100%; }
.itn-sticker-picker-heading,
.itn-sticker-angle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3, 12px);
}
.itn-sticker-picker-heading p { margin: 0; }
.itn-sticker-assets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2, 8px);
  max-height: 300px;
  overflow: auto;
}
.itn-sticker-choice {
  min-width: 0;
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-2, 8px);
  padding: var(--s-2, 8px);
  font-size: 11px;
  text-align: center;
}
.itn-sticker-choice .itn-sticker-art { position: relative; width: 88px; }
.itn-sticker-choice.selected,
.itn-sticker-position.selected { border-color: var(--accent, #f74827); }

.itn-sticker-positions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2, 8px);
}
.itn-sticker-position {
  min-height: var(--control-h, 44px);
  padding: var(--s-2, 8px);
  font: inherit;
  font-size: 12px;
  color: var(--text, #0e0e0e);
  background: var(--control-bg, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-control, 22px);
  cursor: pointer;
}
.itn-sticker-position:nth-child(4) { grid-column: 1; }
.itn-sticker-position:nth-child(5) { grid-column: 3; }
.itn-sticker-picker input[type="range"] { width: 100%; accent-color: var(--accent, #f74827); }

.itn-sticker-preview-host { min-width: 0; }
.itn-sticker-stage {
  --sticker-w: 94px;
  position: relative;
  min-height: 220px;
  overflow: visible;
  isolation: isolate;
  z-index: 10;
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
  background-color: var(--canvas-bg, #f4eedf);
}
.itn-sticker-stage-copy {
  position: relative;
  z-index: 1;
  max-width: 390px;
  padding: 72px var(--s-6, 24px);
}
.itn-sticker-stage-copy p { margin: var(--s-2, 8px) 0 0; line-height: 1.6; }
.itn-sticker-art {
  display: block;
  width: var(--sticker-w);
  aspect-ratio: 1;
  pointer-events: none;
}
.itn-sticker-art.is-luggage { --sticker-w: 148px; }
.itn-sticker-art img,
.itn-sticker-mask {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.itn-sticker-mask {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.itn-sticker-stage > .itn-sticker-art { position: absolute; z-index: 100; }
.itn-sticker-stage.is-top-left > .itn-sticker-art { top: 14px; left: 15px; }
.itn-sticker-stage.is-top-center > .itn-sticker-art { top: 14px; left: 50%; margin-left: calc(var(--sticker-w) * -0.5); }
.itn-sticker-stage.is-top-right > .itn-sticker-art { top: 14px; right: 15px; }
.itn-sticker-stage.is-middle-left > .itn-sticker-art { top: 50%; left: 15px; margin-top: calc(var(--sticker-w) * -0.5); }
.itn-sticker-stage.is-middle-right > .itn-sticker-art { top: 50%; right: 15px; margin-top: calc(var(--sticker-w) * -0.5); }
.itn-sticker-stage.is-bottom-left > .itn-sticker-art { bottom: 14px; left: 15px; }
.itn-sticker-stage.is-bottom-center > .itn-sticker-art { bottom: 14px; left: 50%; margin-left: calc(var(--sticker-w) * -0.5); }
.itn-sticker-stage.is-bottom-right > .itn-sticker-art { right: 15px; bottom: 14px; }

/* ---------- the per-image filter, approximated ----------
   The iOS app is the real renderer. This is a cheap two-layer indication so the
   choice reads at a glance in the editor: greyscale for mono, and for duotone a
   screen/multiply sandwich in this destination's own two colours, which JS
   hands in as the page-local --itn-duo-a (stamp) and --itn-duo-b (cover). */
.itn-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-card, 16px);
}
.itn-photo[data-filter="mono"] .itn-block-photo { filter: grayscale(1); }
.itn-photo[data-filter="duotone"] { background: var(--itn-duo-a, #0e0e0e); }
.itn-photo[data-filter="duotone"] .itn-block-photo {
  filter: grayscale(1);
  mix-blend-mode: screen;
}
.itn-photo[data-filter="duotone"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--itn-duo-b, #b19b7d);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* A row menu opened near the bottom of a scrolling pane would be clipped by the
   pane's own overflow. JS measures and flips it above the trigger. */
.itn-pop-up > .popover { top: auto; bottom: calc(100% + 8px); }

/* ---------- release view ---------- */
.itn-rel-change { display: grid; gap: var(--s-2, 8px); }
.itn-rel-change p { margin: 0; }
.itn-rel-list { display: grid; gap: var(--s-2, 8px); }
.itn-rel-row {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  flex-wrap: wrap;
  padding: var(--s-3, 12px) var(--s-4, 16px);
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
}
.itn-rel-row-t { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.itn-rel-row-id {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.itn-rel-row-meta { font-size: 11px; color: var(--text-faint, #5a5a5a); }

.itn-season-art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4, 16px);
  margin-top: var(--s-4, 16px);
}
.itn-season-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--s-3, 12px);
  padding: var(--s-4, 16px);
  background: var(--control-bg, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
}
.itn-season-card > p { margin: 0; }
.itn-season-preview {
  position: relative;
  overflow: hidden;
  width: min(100%, 220px);
  aspect-ratio: 1024 / 1365;
  background: var(--canvas-bg, #f4eedf);
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
}
.itn-season-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.itn-season-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-2, 8px);
  color: var(--text-faint, #5a5a5a);
  font-size: 12px;
}
.itn-season-empty > .icon { --icon-size: 24px; }
.itn-season-pigments .itn-pigment { min-width: 0; }

/* ---------- the writer panel, inside the kit modal ---------- */
.itn-writer { display: grid; gap: var(--s-4, 16px); }
/* Kit .note, laid out as an icon plus a line. Only the box changes. */
.itn-writer-ctx {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2, 8px);
  margin: 0;
}
.itn-writer-ctx > .icon { --icon-size: 16px; flex: none; }
.itn-writer-out { display: grid; gap: var(--s-2, 8px); }
.itn-writer-out[aria-busy="true"] { opacity: 0.72; }

/* ---------- page-local widget: a multi-line choice button ----------
   The kit has no component for picking one of several drafted paragraphs:
   .popover-item and .mat are single-line pills and a.tile is a link card with a
   corner arrow. This is a genuinely new control, not a re-skin, so it reads its
   surface, border and radius straight from the kit's control tokens and keeps
   the shared :focus-visible ring. */
.itn-opt {
  display: block;
  width: 100%;
  min-height: var(--control-h, 44px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  text-align: left;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #0e0e0e);
  background: var(--control-bg, rgba(255, 255, 255, 0.55));
  border: 1px solid var(--control-border, rgba(0, 0, 0, 0.10));
  border-radius: var(--radius-card, 16px);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.itn-opt:hover {
  background: var(--control-bg-hover, rgba(255, 255, 255, 0.85));
  border-color: var(--accent, #f74827);
}

/* ============ RESPONSIVE ============
   Verified shapes at 320, 375, 768, 1024 and 1440px with no horizontal
   overflow at any width. */

/* Below 1024px the rail and the workspace stop fitting side by side. Instead of
   hiding one and stranding it, a segmented control promotes exactly one pane to
   the full width. Same pattern the Website Editor uses. With one pane on screen
   there is nothing to strand, so the height bound and the nested scrollers come
   off and the page itself scrolls, which is what every other tool in the house
   does and what a phone wants. */
@media (max-width: 1023px) {
  .itn-panebar { display: block; }
  .itn-wrap {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .itn-pane { display: none; overflow: visible; }
  .itn-app[data-pane="rail"] .itn-pane[data-pane-role="rail"] { display: flex; }
  .itn-app[data-pane="work"] .itn-pane[data-pane-role="work"] { display: flex; }
  .itn-pane-b { overflow: visible; }
}

@media (max-width: 860px) {
  .itn-block-sub { grid-template-columns: minmax(0, 1fr); }
}

/* Below 640px the kit gives .page-nav a safe-area top inset, so the nav is
   taller than --page-nav-h by exactly that amount. Match it, or the standing
   action row parks underneath the nav on a notched phone. Same expression the
   kit uses, so the two can never drift. */
@media (max-width: 640px) {
  .itn-chrome {
    top: calc(var(--page-nav-h, 56px) + max(var(--s-2, 8px), env(safe-area-inset-top)));
  }
  .itn-sticker-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itn-sticker-editor-row { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
  .itn-plate-row { grid-template-columns: minmax(0, 1fr); }
  .itn-plate { max-width: 220px; }
  .itn-season-art { grid-template-columns: minmax(0, 1fr); }
}

/* At 320px the kit's .grid-2 track floor is 280px, so the pane content box has
   to stay at or above that or the grid overflows its container. The page column
   padding drops to 8px a side and the pane padding with it: 320 less 16 of page
   padding, less 2 of pane border, less 16 of pane padding leaves 286px of
   content at the narrowest supported width. Do not widen these paddings without
   re-checking that number. */
@media (max-width: 400px) {
  .itn-app .page {
    padding:
      var(--s-3, 12px)
      max(var(--s-2, 8px), env(safe-area-inset-right))
      var(--s-4, 16px)
      max(var(--s-2, 8px), env(safe-area-inset-left));
  }
  .itn-pane-b { padding: var(--s-2, 8px); }
  .itn-pane-h { padding: var(--s-2, 8px); }
  .itn-segrow { padding: var(--s-2, 8px) var(--s-2, 8px) 0; }
  .itn-block { padding: var(--s-2, 8px); }
}