/* ==========================================================================
   CLIENT GUIDE — article template stylesheet
   travel-obsessed-tx · v2.3.0 · September 2026
   --------------------------------------------------------------------------
   Loaded by partials/client-guide/head.hbs AFTER screen.css and
   totx-advantage.css. It uses only the design system: every value below is a
   var(--…) from screen.css §1, apart from three structural numbers that
   are not layout spacing (a 28px list indent that matches .totx-list, the
   list-marker offset, and a viewport cap on image height). There are no
   hex values, no font sizes of its own and no dark-mode rule. Dark mode
   works through the tokens.

   Why this file exists, instead of zero CSS (CLAUDE.md "If you truly need
   a new component"):

   1. The article body is Ghost content. screen.css §19 styles it through
      .totx-prose, and most of that is used unchanged. What §19 cannot
      handle is the CARD CSS Ghost injects through {{ghost_head}}
      (card_assets: true). It loads AFTER screen.css and, measured in a
      real Ghost 6 render, it gives callout cards an 8px radius, five
      off-palette tints and callout text at 16.15px / 1.5 leading. That is
      below the 17px body floor. The rules in §3 below restore the theme's
      callout, scoped to this template so no existing page changes.
   2. The design system has callouts (.totx-callout--opinion / --critical)
      but no way to reach them from content authored in Ghost's editor,
      because a Koenig callout card cannot carry a class. The mapping is by
      the card's COLOUR, which the editor and the Admin API can both set:
         green / accent   → opinion   (HOT TAKE, What TOTX Recommends)
         yellow / red     → critical  (policy or timing warning)
         grey / white     → note
         anything else    → the theme's default mint callout
   3. Wayfinding (§1). Tried: .totx-meta with a back link (the Online
      Check-In page) — a single parent only; .tadv-lockup — carries the area
      name and a sparkle, and the name is undecided. So it is the eyebrow
      role on an <ol>, with 44px links.
   4. The review line (§5): source + "last reviewed". The lines use the
      existing .totx-meta role. The only new part is a hairline and spacing.

   Class prefix: .cg- (client guide). It stays neutral while the area's name
   is undecided.
   ========================================================================== */

/* --- 1. wayfinding -------------------------------------------------------
   The eyebrow role (.totx-eyebrow sets face, size, weight, tracking, case,
   colour). This rule only lays out the list. The links are 44px tall so
   they are real tap targets. If the row wraps at 320px, the second crumb
   drops to its own line. */
.cg-crumbs{margin:0 0 var(--space-2xs)}
.cg-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-xs)}
.cg-crumbs li{display:flex;align-items:center;gap:var(--space-xs);min-width:0}
/* The separator trails the item before it, so when the row wraps (320px,
   long section names) the slash stays at the end of line one instead of
   opening line two. */
.cg-crumbs li:not(:last-child)::after{content:"/" / "";color:var(--color-text-muted);font-weight:400}
.cg-crumbs a{
  display:inline-flex;align-items:center;min-height:var(--btn-height-compact);
  color:var(--color-accent-deep);text-decoration:none;
}
.cg-crumbs a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* --- 1b. member bar (v2.8.0) ------------------------------------------------
   partials/client-guide/wayfinding.hbs. One compact row above the section
   eyebrow: the greeting (.totx-meta) and the way back to The TOTX Advantage
   (.totx-btn--text, 44px). A neutral hairline under it separates the
   signed-in chrome from the article. Wraps at 320px without overflow. */
.cg-memberbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  column-gap:var(--space-md);max-width:var(--w-measure);
  margin:0 0 var(--space-lg);border-bottom:var(--border-hair) solid var(--color-border);
}
.cg-memberbar .cg-memberbar-hi{margin:0;overflow-wrap:anywhere}
.cg-memberbar .totx-btn--text{text-decoration:none}
.cg-section{margin:0 0 var(--space-2xs)}

/* --- 2. the body: lists, links, images ------------------------------------ */
.cg-body{overflow-wrap:break-word}

/* Unordered lists use the theme's list mark: the 12×4 bright-teal dash from
   .totx-list (screen.css §13), set on Ghost's plain <ul>. Items get the
   paragraph-gap step because they often open with a bold lead-in. */
.cg-body ul{list-style:none;padding-left:0}
.cg-body ul > li{position:relative;padding-left:28px;margin-bottom:var(--space-sm)}
.cg-body ul > li::before{
  content:"";position:absolute;left:0;top:calc(0.85em - 1px);
  width:12px;height:var(--border-rail);background:var(--color-accent);
}
/* Ordered lists are the steps of a tutorial. The numeral uses the display
   face in deep teal, as in the check-in page's numbered rows. */
.cg-body ol{padding-left:28px}
.cg-body ol > li{margin-bottom:var(--space-sm);padding-left:var(--space-2xs)}
.cg-body ol > li::marker{font-family:var(--font-display);font-weight:800;color:var(--color-accent-deep)}
.cg-body li > ul,.cg-body li > ol{margin:var(--space-xs) 0 0}

/* Images. Screenshots are often white on white, so they get a hairline.
   A tall phone screenshot must never be taller than the screen (§8), so the
   height is capped and the image keeps its proportions. It sits left-aligned
   in the column and is not stretched past its natural size. */
.cg-body .kg-image-card{margin:var(--space-lg) 0}
.cg-body .kg-image-card img,
.cg-body figure > img{
  width:auto;max-width:100%;height:auto;max-height:80vh;
  border:var(--border-hair) solid var(--color-border);
  background:var(--color-surface-mute);
}
/* Wide and full-width cards break out assuming a CENTRED column. This
   column is left-aligned (rule 14), so a breakout would run off the left
   edge on desktop. On an article they stay in the column. */
.cg-body .kg-width-wide,.cg-body .kg-width-full{
  margin-left:0;margin-right:0;width:100%;max-width:100%;
}
.cg-body .kg-gallery-card{margin:var(--space-lg) 0}
.cg-body figcaption{max-width:var(--w-measure)}

/* --- 3. callouts (Koenig callout card → the theme's callout) ------------
   Specificity is (0,3,0) on purpose. Ghost's card CSS uses
   `.kg-callout-card div.kg-callout-text` (0,2,1), which is later in the
   cascade and would win at a lower specificity. */
.cg-body .kg-callout-card{
  display:flex;gap:var(--space-sm);align-items:flex-start;
  background:var(--color-surface-alt);color:var(--color-text);
  border-radius:var(--radius);box-shadow:none;
  border-left:var(--border-rail) solid var(--color-accent-deep);
  padding:var(--space-md) var(--space-lg);margin:var(--space-lg) 0;
}
.cg-body .kg-callout-card .kg-callout-text{
  flex:1 1 auto;min-width:0;font-size:var(--size-body);line-height:inherit;color:var(--color-text);
}
.cg-body .kg-callout-card .kg-callout-emoji{padding:0;font-size:var(--size-body);line-height:inherit}
.cg-body .kg-callout-card a{color:var(--color-link)}
/* opinion: HOT TAKE / What TOTX Recommends */
.cg-body .kg-callout-card.kg-callout-card-green,
.cg-body .kg-callout-card.kg-callout-card-accent{
  background:var(--color-surface-alt);border-left-color:var(--color-accent);
}
/* critical: a policy or timing warning. Red is used only for warnings (§2),
   and never on its own: the run-in label says what the block is. */
.cg-body .kg-callout-card.kg-callout-card-yellow,
.cg-body .kg-callout-card.kg-callout-card-red{
  background:var(--color-surface-mute);border-left-color:var(--color-critical);
}
/* note: neutral supporting information */
.cg-body .kg-callout-card.kg-callout-card-grey,
.cg-body .kg-callout-card.kg-callout-card-white{
  background:var(--color-surface-mute);border-left-color:var(--color-border);
}
/* The run-in label is the first bold phrase ("HOT TAKE:", "Policy watch:").
   It is coloured to match the rail and left in the author's own casing, not
   transformed, because it is her copy. */
.cg-body .kg-callout-card .kg-callout-text > :is(strong,b):first-child{color:var(--color-accent-deep);font-weight:700}
.cg-body .kg-callout-card.kg-callout-card-yellow .kg-callout-text > :is(strong,b):first-child,
.cg-body .kg-callout-card.kg-callout-card-red .kg-callout-text > :is(strong,b):first-child{color:var(--color-critical)}
.cg-body .kg-callout-card.kg-callout-card-grey .kg-callout-text > :is(strong,b):first-child,
.cg-body .kg-callout-card.kg-callout-card-white .kg-callout-text > :is(strong,b):first-child{color:var(--color-text)}

/* --- 4. body spacing --------------------------------------------------------
   The answer is the first paragraph. The rule under the H1 already gives it
   24px, so nothing is added here. */

/* --- 5. the review line: source + last reviewed ---------------------------
   Authored as an HTML card at the end of the body:
     <aside class="cg-review">
       <p class="totx-meta">Last reviewed <time datetime="2026-09-27">September 27, 2026</time></p>
       <p class="totx-meta">Source: <a href="…">Disney's current alcohol policy</a></p>
     </aside>
   The lines take the documented meta role (.totx-meta: Small, muted). This is
   metadata, not something a client acts on. The container only adds the
   hairline and spacing. The link keeps the link colour. */
.cg-body .cg-review{
  margin:var(--space-xl) 0 0;padding-top:var(--space-md);
  border-top:var(--border-hair) solid var(--color-border);
}
.cg-body .cg-review p{margin:0 0 var(--space-2xs)}
.cg-body .cg-review p:last-child{margin-bottom:0}

/* --- 6. related ------------------------------------------------------------
   The rows are .tadv-list from totx-advantage.css, unchanged. This rule only
   separates the module from the article above it. */
.cg-related{margin-top:var(--space-2xl);max-width:var(--w-measure)}
.cg-related h2{margin:0 0 var(--space-md)}

/* --- 7. access screen (signed out / no access) -----------------------------
   partials/client-guide/access.hbs. Everything visible is an existing
   component: eyebrow, H1, rule, lead, body copy, .totx-btn (+ --secondary),
   and --block, which centres a standalone button on a phone and caps it at
   340px. This block only stacks the two steps at the reading measure and
   separates them with the neutral hairline. One step is primary and one is
   secondary, so the second is quieter by its button, not by smaller type.
   Tried: .totx-grid--2 (the retired gate). Two columns on desktop gave both
   actions equal weight, and the primary action lost its place first. */
/* the section is the page container (.totx-inner); its contents keep the
   reading measure and stay left-aligned (rule 14) */
.cg-access > *{max-width:var(--w-measure)}
.cg-access .totx-lead{margin-bottom:var(--space-xl)}
.cg-access-step{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md)}
.cg-access-step > p{margin:0}
.cg-access-step--alt{
  margin-top:var(--space-xl);padding-top:var(--space-xl);
  border-top:var(--border-hair) solid var(--color-border);
}
/* --block centres the button on a phone; the column must let it stretch */
@media(max-width:760px){ .cg-access-step{align-items:stretch} }
.cg-access-email{overflow-wrap:anywhere;font-weight:600}
.cg-access-noscript{margin:0}
/* v2.10.0: the plain no-access fallback, and the post-purchase notice */
.cg-access-plain{margin-top:var(--space-lg)}
.cg-access-unlocked{max-width:var(--w-measure)}
.cg-access-unlocked[hidden]{display:none}

/* --- 8. signed-in home (custom-client-guide-home.hbs) -----------------------
   Built from existing parts: H1 + rule, .totx-meta, .totx-input,
   .tadv-list result rows, .tadv-browse icon blocks, .tadv-topq numbered rows,
   .totx-faq-item for extra reservations, .totx-btn. The new pieces are the
   vertical rhythm of the page and the reservation card.
   Tried for the card: .totx-card--tint (its `p` rule forces the Small role
   on the text, and the dates and "Next" line are things a client acts on,
   so they must be body type); .tadv-calc (a calculator, with form spacing).
   The card is the same mint module with a teal top rail as .tadv-calc, but
   laid out for text only. */
html:not(.cg-js) .cg-js-only{display:none}
.cg-home > *{max-width:var(--w-measure)}
.cg-home > * + *{margin-top:var(--space-xl)}
@media(min-width:761px){ .cg-home > * + *{margin-top:var(--space-2xl)} }
.cg-home > .cg-hello + *{margin-top:var(--space-lg)}
.cg-home h2{margin:0 0 var(--space-md)}
/* --- 9. v2.15.0 (preview) home: hero, greeting, trip cards, past trips ----
   Built from the theme's parts: the strip-on-photograph language
   (.tadv-strip), the mint module with a teal top rail, the eyebrow role,
   .totx-btn--secondary/--compact, and the FAQ disclosure chevron. New
   here: the layout of the collapsed trip card and the timeline rows.
   Markers are square (the theme's one round thing is .totx-step-num). */
.cg-hero{position:relative;background:var(--color-text);line-height:0;isolation:isolate}
.cg-hero-img{display:block;width:100%;height:190px;object-fit:cover;object-position:center 45%}
@media(min-width:761px){ .cg-hero-img{height:280px} }
.cg-hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--space-md);line-height:normal;z-index:2}
@media(min-width:761px){ .cg-hero-copy{left:max(var(--gutter),calc((100% - var(--w-page)) / 2 + var(--gutter)));bottom:var(--space-xl)} }
.cg-hero-title{margin:0;font-size:0}
.cg-hero .tadv-strip{font-size:var(--size-h3);padding:var(--space-2xs) var(--space-sm) var(--space-xs)}
@media(min-width:761px){ .cg-hero .tadv-strip{font-size:var(--size-h2);padding:var(--space-xs) var(--space-md) var(--space-sm)} }
.cg-hero-sub{
  display:inline-block;margin:var(--space-xs) 0 0;background:var(--color-surface);color:var(--color-text);
  font-size:var(--size-small);line-height:1.45;padding:var(--space-2xs) var(--space-sm);box-shadow:var(--shadow-lift);
}
/* sparkles: positions only; size and fill come from .totx-sparkle. Kept to
   the right of the photograph, clear of the strips and the line below. */
.cg-hero .totx-sparkle{position:absolute;z-index:2;line-height:0}
.cg-hero-sp-1{top:14%;right:9%}
.cg-hero-sp-2{top:52%;right:24%}
.cg-hero-sp-3{top:26%;right:34%}
@media(min-width:761px){ .cg-hero-sp-1{top:16%;right:12%} .cg-hero-sp-2{top:58%;right:22%} .cg-hero-sp-3{top:30%;right:32%} }
.cg-main{padding-top:var(--space-lg)}

/* NEXT KEY DATE: one tappable line above My Reservations. The date is the
   point, so it is display type; the trip it belongs to is named under it. */
.cg-keydate{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);margin:0 0 var(--space-lg);padding:var(--space-sm) var(--space-md);
  background:var(--color-surface);
  border:var(--border-hair) solid var(--color-border);border-left:var(--border-rail) solid var(--color-accent-pink);
}
.cg-keydate[hidden]{display:none}
.cg-keydate-link{display:flex;flex-direction:column;gap:2px;align-self:stretch;color:var(--color-text);text-decoration:none}
.cg-keydate-link:hover{text-decoration:none}
.cg-keydate-link:hover .cg-keydate-label{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.cg-keydate-link:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.cg-keydate-pay[hidden],.cg-tl-pay[hidden]{display:none}
.cg-tl-pay{align-self:flex-start;margin-top:var(--space-xs)}
.cg-keydate-k{margin:0}
.cg-keydate-main{font-family:var(--font-display);font-weight:700;font-size:var(--size-h4);line-height:1.3}
.cg-keydate-date{color:var(--color-accent-deep)}
.cg-keydate-when{font-size:var(--size-small);line-height:1.5;color:var(--color-text-muted)}
.cg-hello-title{margin:0;font-size:var(--size-h2)}
.cg-hello .totx-meta{margin:var(--space-2xs) 0 0}

/* trip cards: one per upcoming reservation, collapsed */
.cg-res-body{display:grid;gap:var(--space-sm)}
.cg-trip{background:var(--color-surface-alt);border-top:var(--border-rail) solid var(--color-accent)}
.cg-trip > summary,.cg-past-trip > summary{
  list-style:none;cursor:pointer;display:flex;gap:var(--space-md);align-items:flex-start;justify-content:space-between;
}
.cg-trip > summary{padding:var(--space-md)}
.cg-trip > summary::-webkit-details-marker,.cg-past-trip > summary::-webkit-details-marker{display:none}
.cg-trip > summary:focus-visible,.cg-past-trip > summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px}
.cg-trip-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.cg-trip-title{font-family:var(--font-display);font-weight:700;font-size:var(--size-h4);line-height:1.25;color:var(--color-text);text-wrap:balance}
.cg-trip-when{color:var(--color-text)}
.cg-trip-ref{font-size:var(--size-small);line-height:1.5;color:var(--color-text-muted)}
.cg-trip-next{margin-top:var(--space-xs);font-size:var(--size-small);line-height:1.5}
.cg-trip-next-k{font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-deep)}
.cg-trip-tag{align-self:flex-start;font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-critical);border:var(--border-hair) solid var(--color-critical);padding:0 var(--space-2xs);margin-bottom:var(--space-2xs)}
.cg-trip-tag[hidden]{display:none}
.cg-trip-toggle{flex:0 0 12px;width:12px;height:12px;margin-top:8px;
  border-right:2px solid var(--color-accent);border-bottom:2px solid var(--color-accent);transform:rotate(45deg);transition:transform var(--t-base)}
details[open] > summary .cg-trip-toggle{transform:rotate(-135deg)}
.cg-trip-body{padding:0 var(--space-md) var(--space-md);border-top:var(--border-hair) solid var(--color-border)}
.cg-trip-h{margin:var(--space-lg) 0 var(--space-xs)}

/* the "What's next" timeline */
.cg-timeline{list-style:none;margin:0 0 0 5px;padding:0;border-left:2px solid var(--color-border)}
.cg-tl{position:relative;display:grid;grid-template-columns:4.2em minmax(0,1fr);gap:var(--space-sm);padding:var(--space-xs) 0 var(--space-xs) var(--space-md)}
.cg-tl::before{content:"";position:absolute;left:-7px;top:calc(var(--space-xs) + .45em);width:12px;height:12px;
  background:var(--color-surface-alt);border:2px solid var(--color-accent)}
.cg-tl.is-next::before{background:var(--color-accent-deep);border-color:var(--color-accent-deep)}
.cg-tl-date{font-weight:600;white-space:nowrap}
.cg-tl-text{display:flex;flex-direction:column;min-width:0}
.cg-tl-when{font-size:var(--size-small);line-height:1.5;color:var(--color-text-muted)}
.cg-tl.is-next .cg-tl-label{font-weight:700}
.cg-tl.is-undated .cg-tl-date{font-weight:400;font-size:var(--size-small);color:var(--color-text-muted);white-space:normal}

/* actions (unwired in the preview) */
.cg-actions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs)}
@media(min-width:761px){ .cg-actions{grid-template-columns:repeat(4,minmax(0,1fr))} }
.cg-actions .totx-btn{width:100%;background:var(--color-surface)}
.cg-actions-note{margin-top:var(--space-xs)}

/* reservation facts: label/value rows; two columns from tablet up */
.cg-res-facts{margin:0;display:grid;gap:var(--space-xs) var(--space-lg)}
@media(min-width:761px){ .cg-res-facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cg-res-facts > div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:var(--space-sm);align-items:baseline;
  padding-top:var(--space-xs);border-top:var(--border-hair) solid var(--color-border)}
@media(max-width:760px){ .cg-res-facts > div{grid-template-columns:minmax(0,1fr);gap:0} }
.cg-res-facts dt{font-size:var(--size-small);line-height:1.55;color:var(--color-text-muted)}
.cg-res-facts dd{margin:0;overflow-wrap:anywhere}
.cg-trip-body .cg-res-ref{margin:var(--space-md) 0 0}
.cg-res-ref a{display:inline-block;padding-block:var(--space-sm);margin-block:calc(var(--space-sm) * -1)}
.cg-res-sample{margin-top:var(--space-sm)}

/* answers for a date: a short list of article links */
.cg-reads{list-style:none;margin:var(--space-xs) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2xs)}
.cg-reads[hidden]{display:none}
.cg-read{display:inline-flex;align-items:center;min-height:var(--btn-height-compact);gap:var(--space-2xs);
  font-size:var(--size-small);font-weight:600;line-height:1.35;color:var(--color-accent-deep);text-decoration:none}
.cg-read:hover span:first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.cg-keydate .cg-reads{margin-top:0;align-self:stretch;border-top:var(--border-hair) solid var(--color-border);padding-top:var(--space-2xs)}

/* add to calendar */
.cg-cal{margin-top:var(--space-sm)}
.cg-cal[hidden]{display:none}

/* trip phase: sail week and on board */
.cg-trip-phase{align-self:flex-start;font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-on-deep);background:var(--color-accent-deep);padding:0 var(--space-2xs);margin-bottom:var(--space-2xs)}
.cg-trip-phase[hidden]{display:none}
.cg-phase{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-surface);border-left:var(--border-rail) solid var(--color-accent-pink)}
.cg-phase[hidden]{display:none}
.cg-phase p{margin:0}
.cg-phase .cg-phase-k{margin-bottom:var(--space-2xs)}

/* welcome home: the theme's callout, under the greeting */
.cg-welcome{margin:var(--space-md) 0 0}
.cg-welcome[hidden]{display:none}

/* updates (v2.16.0 pilot): a targeted card with a pink rail */
.cg-updates[hidden]{display:none}
.cg-updates-list{display:grid;gap:var(--space-sm)}
.cg-update{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);padding:var(--space-md);
  background:var(--color-surface);border:var(--border-hair) solid var(--color-border);border-top:var(--border-rail) solid var(--color-accent-pink)}
.cg-update > *{margin:0}
.cg-update-title{font-size:var(--size-h4);line-height:1.3}
.cg-update-copy{white-space:pre-line}
.cg-update-img{display:block;width:100%;height:auto;max-height:240px;object-fit:cover}
.cg-update-img[hidden]{display:none}
.cg-update .cg-trip-tag{margin-bottom:0}

/* email preferences (v2.19.0 pilot) */
.cg-prefs[hidden],.cg-prefs-link[hidden],.cg-prefs-note[hidden]{display:none}
.cg-prefs-set{border:0;margin:0 0 var(--space-sm);padding:0;display:grid;gap:var(--space-xs)}
.cg-pref{display:flex;gap:var(--space-sm);align-items:flex-start;padding:var(--space-sm) var(--space-md);cursor:pointer;
  border:var(--border-hair) solid var(--color-border);background:var(--color-surface)}
.cg-pref:has(input:checked){border-color:var(--color-accent);background:var(--color-surface-alt)}
.cg-pref input{margin-top:.3em;accent-color:var(--color-accent-deep);width:18px;height:18px;flex:0 0 auto}
.cg-pref--fixed{cursor:default}
.cg-pref--fixed input{opacity:1}
.cg-pref > span{display:flex;flex-direction:column}
.cg-pref-hint{font-size:var(--size-small);line-height:1.5;color:var(--color-text-muted)}
.cg-prefs-note{margin:0 0 var(--space-sm)}
.cg-prefs-status{margin:var(--space-xs) 0 0;min-height:1.5em;font-weight:600;color:var(--color-accent-deep)}
.cg-hello .cg-prefs-link{margin:var(--space-2xs) 0 0}

/* past trips: one collapsed row; each trip opens to its basic facts */
.cg-past .totx-faq-item > summary{font-size:var(--size-h4)}
.cg-past-count{color:var(--color-text-muted);font-weight:400}
.cg-past-trip{border-top:var(--border-hair) solid var(--color-border)}
.cg-past-trip > summary{padding:var(--space-sm) 0}
.cg-past-title{font-weight:600}
.cg-past-trip .cg-res-facts{margin:0 0 var(--space-md)}

/* example questions under the search field */
.cg-examples{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-top:var(--space-sm)}
.cg-examples-k{margin:0}
.cg-example{
  font-family:var(--font-body);font-size:var(--size-small);line-height:1.3;text-align:left;
  min-height:var(--btn-height-compact);padding:var(--space-2xs) var(--space-sm);cursor:pointer;
  background:var(--color-surface-alt);color:var(--color-accent-deep);border:var(--border-hair) solid var(--color-border);border-radius:var(--radius);
}
.cg-example:hover{border-color:var(--color-accent)}
.cg-example:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}

/* search: the question is the heading, the field is the page's main control.
   .totx-form caps forms at the narrow measure; this one spans the column. */
.cg-search{max-width:none;gap:0}
.cg-search-title{margin:0 0 var(--space-sm)}
.cg-search-title label{display:block;cursor:text}
.cg-search-input{-webkit-appearance:none;appearance:none;width:100%;min-height:var(--btn-height)}
.cg-search-input::-webkit-search-decoration{-webkit-appearance:none}
/* the browser's own clear (x) paints in its own blue, which is off-palette */
.cg-search-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.cg-results{margin-top:var(--space-md)}
.cg-results[hidden]{display:none}
.cg-results .cg-results-head{margin:0 0 var(--space-xs)}
.cg-noresult{margin:0}

/* quick paths and common answers reuse the TOTX Advantage blocks as-is */
.cg-common .tadv-topq{margin-bottom:0}

/* ask A'Dell */
.cg-home-ask{
  padding-top:var(--space-xl);border-top:var(--border-hair) solid var(--color-border);
}
.cg-home-ask p{margin:0 0 var(--space-md)}
.cg-home-ask .cg-home-signout{margin:var(--space-lg) 0 0}
.cg-home-signout a{display:inline-block;padding-block:var(--space-sm);margin-block:calc(var(--space-sm) * -1)}