/* ==========================================================================
   TOTX ADVANTAGE — the only The TOTX Advantage stylesheet
   travel-obsessed-library-test · v6 home, September 2026
   --------------------------------------------------------------------------
   Loads AFTER assets/css/screen.css and depends on its token layer. It owns
   no colour, no font size, no radius and no spacing value of its own: every
   value below is a var(--…) from screen.css §1. There is no dark-mode rule in
   this file; if one is ever needed, the component is wrong.

   This file exists for exactly the cases TOTX-DESIGN-SYSTEM.md §9 allows:
   behaviour or structure the theme has no component for. Each block says
   which existing components were tried and why they did not fit.

   Not in this file, on purpose: page layout, sections, headings, leads,
   buttons, callouts, cards, forms, FAQ accordions, numbered rows, tables,
   related-answer rows — all screen.css components used as-is.

   Nothing here descends from assets/css/library.css or from the rejected
   The TOTX Advantage layer (the TOTX ADVANTAGE banners inside library.css).
   ========================================================================== */

/* --- 0. progressive enhancement ---------------------------------------
   assets/js/the old hub script (removed) puts .tadv-js on <html> as its first act. Anything that is
   useless without JavaScript — the search fields, the calculator — is
   .tadv-js-only and simply does not render without it. */
html:not(.tadv-js) .tadv-js-only{display:none}

/* --- 1. the hero ------------------------------------------------------------
   One full-bleed photograph with the headline strips over it, the lockup,
   and two static sparkles. Ink underneath so it never flashes white.
   4/3 on a phone so the strips have room; a capped band on desktop.
   Tried: .fig / .totx-figure (a figure in the column, no overlay);
   .totx-cta--media (a scrimmed CTA band — this is a photograph with type
   set on white, not white type on a dark scrim). */
.tadv-hero{position:relative;background:var(--color-text);line-height:0;isolation:isolate}
.tadv-hero img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 45%;display:block}
@media(min-width:761px){ .tadv-hero img{aspect-ratio:auto;height:clamp(420px,40vw,540px)} }
.tadv-hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--space-lg);line-height:normal;z-index:2}
@media(min-width:761px){
  .tadv-hero-copy{left:max(var(--gutter),calc((100% - var(--w-page)) / 2 + var(--gutter)));bottom:var(--space-2xl)}
}

/* THE HEADLINE STRIP — the theme's own component (screen.css §22, Bluey),
   whose values are reproduced here because that definition is scoped to
   .page-bluey and screen.css is not to be edited in this build. Same face,
   weight, tracking, white backing, lift shadow, staggered second line, and
   the same phone rule: --size-strip-tight and no stagger below 400px. */
.tadv-strips{margin:0 0 var(--space-sm);font-size:0;text-wrap:initial}
.tadv-strip{
  position:relative;z-index:3;display:table;
  background:var(--color-surface);
  font-family:var(--font-display);font-weight:800;font-size:var(--size-h1);
  line-height:1.1;letter-spacing:-.022em;color:var(--color-text);
  padding:var(--space-xs) var(--space-md) var(--space-sm);
  margin-bottom:var(--space-xs);
  border-radius:var(--radius);box-shadow:var(--shadow-lift);
  white-space:nowrap;
}
.tadv-strip:last-child{margin-bottom:0}
.tadv-strip.is-2{margin-left:var(--space-xl)}
@media(max-width:760px){ .tadv-strip.is-2{margin-left:var(--space-sm)} }
@media(max-width:400px){
  .tadv-strip.is-2{margin-left:0}
  .tadv-strip{font-size:var(--size-strip-tight);padding:var(--space-2xs) var(--space-sm) var(--space-xs)}
}

/* THE LOCKUP — "✦ The TOTX Advantage | Disney Cruise". A micro label on a white
   backing, pink glyph, deep-teal words, muted divider. On the hub it sits
   on the photograph; on an answer page (.tadv-lockup--line) it stands in
   for the eyebrow, so it takes a hairline instead of a shadow.
   Tried: .totx-eyebrow (no backing — invisible on a photograph);
   .totx-mast (the site masthead, not a page label). */
.tadv-lockup{
  display:inline-flex;align-items:center;gap:var(--space-xs);margin:0;
  background:var(--color-surface);padding:var(--space-xs) var(--space-sm);
  font-family:var(--font-body);font-size:var(--size-micro);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
  color:var(--color-accent-deep);box-shadow:var(--shadow-lift);
}
.tadv-lockup i{font-style:normal;color:var(--color-accent-pink)}
.tadv-lockup span{color:var(--color-text-muted);font-weight:400}
.tadv-lockup--line{box-shadow:none;border:var(--border-hair) solid var(--color-border);margin:0 0 var(--space-sm)}

/* SPARKLES — the theme's component (.totx-sparkle, three sizes, never
   animated). Only their positions on this hero are set here. Pink first,
   mint second, mint only because the ground is a photograph. */
.tadv-sp-1{top:12%;right:8%}
.tadv-sp-2{top:34%;left:6%}

/* --- 2. the icon placeholder --------------------------------------------
   A single-stroke glyph in deep teal on a mint square, one size. Stands in
   for A'Dell's future branded artwork; when that exists it replaces the SVG
   inside the same square, so nothing else moves. On a mint ground the
   square goes white so the glyph still sits in a field of its own.
   Tried: .totx-sparkle (a decorative mark with three sizes and colour rules
   of its own — an icon is navigation, not a flourish); .totx-step-num (the
   one round thing; these are not step numbers). */
.tadv-icon{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:var(--color-surface-alt);color:var(--color-accent-deep);
}
.tadv-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.totx-card--tint .tadv-icon,.totx-section--tint .tadv-icon{background:var(--color-surface)}

/* --- 3. the lane caption ----------------------------------------------
   A quick-answer row or a search result carries its group as a small
   caption above the question. The row itself is the canonical .relcard,
   which sets the display face on the whole row and has no caption line.
   This is the eyebrow role at micro size, the same treatment as
   .totx-callout-label, scoped so it can sit inside a row.
   Tried: .totx-eyebrow (a block with a 12px bottom margin, sized for
   headlines); .totx-caption (muted, not a label). */
.tadv-lane{
  display:block;font-family:var(--font-body);
  font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5;color:var(--color-accent-deep);
  margin:0 0 var(--space-2xs);
}
.tadv-quick{max-width:var(--w-measure);gap:var(--space-xs)}
.relcard > span:first-child{flex:1 1 auto;min-width:0}

/* --- 4. the search results list -----------------------------------------
   A hairline-divided list of tap-target links: question in the display
   face, group caption above it, arrow at the end, 52px minimum. Also the
   two related-answer rows on an answer page.
   Tried: .relcard (boxed and mint — right for three quick answers, wrong
   for a list of results); .guide (needs a 96px thumbnail column);
   .totx-steps (numbered; these are not a sequence); .jgrid > a / .xlinks a
   (legacy-bridge and page-scoped, off-limits for new work). */
.tadv-list{list-style:none;margin:0;padding:0;max-width:var(--w-measure)}
.tadv-list li{border-top:var(--border-hair) solid var(--color-border)}
.tadv-list li:last-child{border-bottom:var(--border-hair) solid var(--color-border)}
.tadv-list a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  min-height:var(--btn-height);padding:var(--space-sm) 0;
  color:var(--color-text);text-decoration:none;
}
.tadv-list a > span:first-child{flex:1 1 auto;min-width:0}
.tadv-list a:hover .tadv-q{color:var(--color-accent-deep)}
.tadv-list a.tadv-list-static{cursor:default}
.tadv-list a.tadv-list-static:hover .tadv-q{color:var(--color-text)}
.tadv-q{
  display:block;flex:1 1 auto;min-width:0;
  font-family:var(--font-display);font-weight:700;font-size:var(--size-h4);line-height:1.3;
  text-wrap:balance;
}
.tadv-arrow{color:var(--color-accent-deep);font-weight:800;flex:0 0 auto}
.tadv-results{margin-top:var(--space-xs);max-width:var(--w-measure)}
.tadv-results[hidden]{display:none}
.tadv-noresult{margin:0;font-size:var(--size-body);line-height:1.7;color:var(--color-text)}
/* iOS gives type="search" its own rounded chrome; the theme's field is square */
.tadv-search .totx-input{-webkit-appearance:none;appearance:none}
.tadv-search .totx-input::-webkit-search-decoration{-webkit-appearance:none}
.tadv-search{max-width:var(--w-measure)}

/* --- 6. the editorial browse grid ----------------------------------------
   Four navigation blocks, 2×2 at every width, no boxes: the
   icon and a display-face title, the whole block a link. Reads
   like the homepage value grid (.rgrid), not like tiles.
   Tried: .totx-card in .totx-grid--2 (boxed — dashboard); .totx-steps
   (numbered rows — the previous, text-heavy lane list); .guide (needs a
   photograph). */
.tadv-browse{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg) var(--space-lg);max-width:var(--w-measure)}
@media(min-width:761px){ .tadv-browse{gap:var(--space-xl)} }
.tadv-block{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);text-decoration:none;color:var(--color-text);min-height:var(--btn-height)}
.tadv-block:hover .tadv-block-title{color:var(--color-accent-deep)}
.tadv-block-title{font-family:var(--font-display);font-weight:700;font-size:var(--size-h3);line-height:1.3;text-wrap:balance}

/* --- 7. Have ready — icon items -----------------------------------------
   Four items, icon beside a few words, 2×2 from 480px. Same icon square as
   the browse grid so the page has one icon treatment.
   Tried: .totx-list (a text list with the 12×4 teal dash — the icons are
   the point here). */
.tadv-ready{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-md) var(--space-xl);max-width:var(--w-measure)}
@media(min-width:480px){ .tadv-ready{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* v2.2.0 — body type, not Small. These are things a client reads and acts
   on before they check in; the Small role is for captions and metadata.
   Line-height inherits so mobile gets the documented 1.75. */
.tadv-ready li{display:flex;align-items:center;gap:var(--space-md);color:var(--color-text)}

/* --- 8. the calculator ---------------------------------------------------
   The theme's card and form. The result is one line: the date in the
   display face at H2 size, then one small sentence. Not a stat band, not a
   grid.
   Tried: .totx-stats (four cells read as a dashboard); .totx-statement
   (larger than the page's own H1 inside a card). */
.tadv-calc{max-width:var(--w-measure)}
/* v2.2.0 — a checkbox is the one control that cannot itself be 44px wide
   without looking wrong. The documented minimum is met by the row: the label
   is a full-height flex target, so the whole line is tappable, and the box
   itself steps up to 24px. */
.tadv-field--inline{flex-direction:row;align-items:center;gap:var(--space-sm);min-height:var(--btn-height-compact)}
.tadv-field--inline input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:var(--color-accent);flex:0 0 auto}
.tadv-field--inline label{display:flex;align-items:center;min-height:var(--btn-height-compact);cursor:pointer}
.tadv-result{margin:var(--space-xs) 0 0;padding-top:var(--space-md);border-top:var(--border-hair) solid var(--color-border)}
.tadv-result b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--size-h2);line-height:1.15;letter-spacing:-.018em;color:var(--color-text);text-wrap:balance}
.tadv-result span{display:block;margin-top:var(--space-2xs);font-size:var(--size-small);line-height:1.55;color:var(--color-text)}

/* --- 8b. the large numbered question row ---------------------------------
   Top Questions in the older Library's treatment: a small deep-teal numeral
   in the display face, the question at H3 size, an arrow, hairline rows,
   64px tall so it reads as a list of big things you can tap, not a menu.
   The same numeral (.tadv-n) leads each collapsed detail question on an
   answer page, so the hub and the answer share one cue.
   Tried: .relcard (boxed mint rows — on a mint ground they vanish);
   .totx-steps (numbered, but a small bold title over a paragraph);
   .tadv-list (the results list — no numeral, tighter). */
.tadv-topq{list-style:none;margin:0 0 var(--space-lg);padding:0;max-width:var(--w-measure)}
.tadv-topq li{border-top:var(--border-hair) solid var(--color-border)}
.tadv-topq li:last-child{border-bottom:var(--border-hair) solid var(--color-border)}
.tadv-topq a{
  display:flex;align-items:center;gap:var(--space-md);
  min-height:var(--space-3xl);padding:var(--space-sm) 0;
  color:var(--color-text);text-decoration:none;
}
.tadv-topq a:hover .tadv-q{color:var(--color-accent-deep)}
.tadv-topq a.tadv-list-static{cursor:default}
.tadv-topq a.tadv-list-static:hover .tadv-q{color:var(--color-text)}
.tadv-topq .tadv-q{font-size:var(--size-h3)}
.tadv-n{
  flex:0 0 28px;font-family:var(--font-display);font-weight:800;
  font-size:var(--size-eyebrow);line-height:1;color:var(--color-accent-deep);
}
.totx-faq-item > summary .tadv-n{flex:0 0 28px;padding-top:6px}
/* section labels on the mint ground are eyebrows, not headings */
.tadv-label{margin:0 0 var(--space-xs)}
.tadv-search .totx-field{gap:var(--space-xs)}
/* the calculator as a mint module: the tint card plus the teal top rail */
.tadv-calc{border-top:var(--border-rail) solid var(--color-accent)}
.tadv-calc .totx-input,.tadv-calc .totx-select{background:var(--color-surface)}
/* the browse grid follows the search on the mint ground */
.totx-section--tint .tadv-browse{margin-top:var(--space-xl)}

/* --- 9. the foot -----------------------------------------------------------
   One caption line of metadata, then the Text A'Dell line. */
.tadv-foot{margin-top:var(--space-lg)}
/* a plain section that follows the mint ground keeps its top padding — the
   theme drops it between two plain sections, which is right there and wrong
   here, where the tint is the separation and the next heading needs air */