/* Structural rules for markup added after the classic sheet was frozen.
   Loaded for EVERY skin; paint-neutral so classic keeps its look. */
.ens-tile-media, .ens-tile-meta { display: block; }
.ens-tile-meta { display: grid; gap: .25rem; padding-top: .3rem; }
.ens-note-grid { display: grid; gap: 1.2rem; padding: 0 0 1rem; }
.ens-note-grid .note { max-width: none; }

/* ---- travel-mark cards fold in the feed: the description, tags, link and
   map open on tap and close again. Height is animated with a grid track so
   no fixed max-height guess is needed. ---- */
.mark-collapsible .mark-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.7,.2,1); }
.mark-collapsible .mark-more-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .25s ease; }
.mark-collapsible.is-open .mark-more { grid-template-rows: 1fr; }
.mark-collapsible.is-open .mark-more-inner { opacity: 1; transition-delay: .12s; }
.mark-collapsible .text { cursor: pointer; }
.mark-collapsible .mark-title a, .mark-collapsible .mark-buttons a, .mark-collapsible .mark-buttons button, .mark-collapsible .who a,
.mark-collapsible .colls a, .mark-collapsible .tags a, .mark-collapsible .link a { cursor: pointer; }
.mark-collapsible .mark-hint { display: block; text-align: center; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin: .3rem 0 .2rem; }
.mark-collapsible.is-open .mark-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .mark-collapsible .mark-more, .mark-collapsible .mark-more-inner { transition: none; } }

/* ---- tablets running as a home-screen app: env(safe-area-inset-top) reads
   0 on iPad even when the status bar is drawn over the page, so the search
   bar slid under it. Reserve the status bar explicitly at tablet widths. ---- */
@media (display-mode: standalone) and (min-width: 52.01rem) {
  .is-app .searchbar { padding-top: calc(.55rem + max(env(safe-area-inset-top, 0px), 24px)); }
  .is-app .iconrail { top: calc(var(--searchbar-h, 52px) + max(env(safe-area-inset-top, 0px), 24px)); }
}

/* Cards carry their own `display: grid` (classic) — the browser's UA rule for
   [hidden] has lower priority than ANY author rule regardless of specificity,
   so setting the hidden property alone does nothing here. Force it. */
.note[hidden] { display: none !important; }

/* ---- the follow event as a card: who → followed → whom. Classic tokens for
   the paint; modern repaints it as glass. ---- */
.act-follow .follow-card {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem;
  padding: 1rem 1.2rem .9rem; position: relative; background: var(--card, #f4f4f2); box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.06);
}
.act-follow .follow-who { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-decoration: none; color: inherit; min-width: 0; }
.act-follow .follow-who:first-of-type { justify-self: start; }
.act-follow .follow-who:last-of-type { justify-self: end; }
.act-follow .follow-who .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.act-follow .follow-who span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.act-follow .follow-verb { display: flex; align-items: center; gap: .6rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: inherit; opacity: .65; white-space: nowrap; }
.act-follow .follow-line { display: block; width: 2.2rem; height: 1px; background: currentColor; opacity: .45; }
.act-follow .follow-when { position: absolute; top: .6rem; right: .9rem; font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .65; }
@media (max-width: 52rem) { .act-follow .follow-line { width: 1.2rem; } .act-follow .follow-who .avatar { width: 52px; height: 52px; } }
.act-follow { display: block; margin: 0 0 1.2rem; }
.act-follow .follow-card { border-radius: 4px; }
.act-follow .follow-who { position: relative; z-index: 1; }
/* the time sits under the verb, not in the corner where it meets the avatar */
.act-follow .follow-card { grid-template-rows: auto auto; row-gap: .15rem; }
.act-follow .follow-who { grid-row: 1 / span 2; }
.act-follow .follow-verb { grid-column: 2; grid-row: 1; align-self: end; }
.act-follow .follow-when { position: static; grid-column: 2; grid-row: 2; justify-self: center; align-self: start; }
.ens-grid-sub { margin: -.2rem 0 0; padding: 0 1.2rem; font-size: .88rem; font-style: italic; opacity: .7; }


/* ---- stat chips: a value over a caption, in the welcome table's voice ---- */
/* One width for every chip, everywhere. Sized to the longest label in use
   ("FROM NOTES", the widest at 85px) with headroom, so a longer caption
   lengthens the text rather than breaking the row's rhythm. */
.statchips { --chip-w: 5.9rem; display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.statchip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .35rem .4rem; border-radius: 12px; width: var(--chip-w); flex: 0 0 var(--chip-w); box-sizing: border-box; }
.statchip b { font-size: 1rem; font-weight: 400; line-height: 1; }
.statchip span { font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
/* on a narrow card the row scrolls rather than wrapping into a ragged block,
   the way the profile rail's nav does on mobile */
@media (max-width: 52rem) {
  .people .statchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .people .statchips::-webkit-scrollbar { display: none; }
  .people .statchip { flex: 0 0 var(--chip-w); }
}
.person { align-items: flex-start; }
.person-body { display: block; min-width: 0; flex: 1; }
.nf-drop[open] { position: relative; z-index: 40; }
.nf-drop-menu { z-index: 41 !important; }
.ens-tile-d { display: block; font-size: .88rem; line-height: 1.4; margin-top: .3rem; opacity: .75; }

/* Chips sit inside an <a>, so they inherit link colour and underline in
   classic. Neutralise that here (the classic sheet is frozen) and keep the
   row on one line — classic's narrower tile was wrapping it into a block. */
.ens-tile .statchips, .people .statchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ens-tile .statchips::-webkit-scrollbar, .people .statchips::-webkit-scrollbar { display: none; }
.ens-tile .statchip, .people .statchip { flex: 0 0 var(--chip-w); color: inherit; }
.statchip b, .statchip span { color: inherit; text-decoration: none; }
/* the tile is a link, so its title/description/chips inherit link colour.
   Anchor the text to the page's own ink tokens instead. */
.ens-tile { color: inherit; }
.ens-tile-t, .ens-tile-d, .ens-tile .statchip { color: inherit; }
.ens-tile-d, .ens-tile .statchip span { opacity: .68; }
.ens-tile .statchip { background: rgba(0,0,0,.05); }
.ens-tile-d { color: inherit; text-decoration: none; }
/* Three fixed-width chips need a tile wide enough to hold them, or the row
   scrolls and the last one reads as clipped. 3 x 5.9rem + gaps + padding. */
.ens-grid { grid-template-columns: repeat(auto-fill, minmax(20.5rem, 1fr)); }
/* 20.5rem is wide enough for three fixed-width chips on a roomy screen, but on
   a phone it exceeds the column once the rail is subtracted and pushes the
   page sideways. Below the breakpoint the grid drops to a single track and the
   chip row scrolls within the card, as it does on the follower cards. */
@media (max-width: 52rem) { .ens-grid { grid-template-columns: minmax(0, 1fr); } }

/* A people row must behave like a note card in a feed: it takes the feed's
   width and no more. The chips are fixed-width and cannot shrink, so without
   min-width:0 on every flex ancestor they push the <li> past the viewport and
   the whole page scrolls sideways. min-width:0 lets the chip row's own
   overflow-x do the scrolling instead. */
.people li { max-width: 100%; box-sizing: border-box; }
.people .person { flex: 1 1 auto; min-width: 0; }
.people .person-body { min-width: 0; }
.people .statchips { min-width: 0; }
/* The chip row scrolls on a narrow card. It follows the same pattern the
   profile rail's nav already uses on mobile: hidden scrollbar, snap points,
   and a partially-visible next item as the affordance — no fade overlay. */
.people .statchips, .ens-tile .statchips {
  overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-behavior: smooth;
}
.people .statchip, .ens-tile .statchip { scroll-snap-align: start; }
.people .statchips::-webkit-scrollbar, .ens-tile .statchips::-webkit-scrollbar { display: none; }

/* The follower row is two columns, both centred against each other: an
   identity lock-up (avatar over handle, as in the welcome table) and the
   chip row beside it. Previously the handle sat above the chips and read as
   floating, because it was in the same column as them. */
.people .person { display: flex; align-items: center; gap: 1rem; }
.people .person-id { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 0 0 auto; text-align: center; }
.people .person-id .avatar { width: 48px; height: 48px; }
.people .person-name { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; max-width: 6.5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .person-body { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.people .statchips { margin-top: 0; }
/* Each skin supplies its own ink. Classic's page ink is inherited from body;
   modern restates its own in style.modern.css. Nothing here hard-codes a
   colour, so neither skin can leak into the other. */

/* the feed heading's second line: a quiet reassurance under the strip title */
.strip .strip-sub { display: block; margin-top: .3rem; font-style: italic; font-weight: 400;
  font-size: .82rem; letter-spacing: .01em; text-transform: none; opacity: .62; }

/* ---- Resurfacing: an editorial interruption in the feed. The card inside
   is the ordinary note or mark card; only the eyebrow marks it as chosen
   rather than merely recent. Structural here; each skin paints its own. ---- */
/* The resurfaced record stands in its own frame above the feed, so it reads
   as editorial furniture rather than as one of the member's own posts. The
   eyebrow sits inside the frame, above the card it explains. */
.resurface { display: block; margin: 0 0 1.6rem; padding: 1rem 1rem 1.1rem; border-radius: 16px; }
.resurface-body > .note { margin: 0; }
.resurface-eyebrow { margin: 0 0 .55rem; font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; text-align: center; opacity: .72; }
/* the fact reads as a sentence someone might say; the label stays a label */
.resurface-eyebrow .fact { display: block; margin-top: .3rem; font-size: .82rem; font-weight: 400;
  font-style: italic; letter-spacing: .01em; text-transform: none; opacity: .86; }
.resurface-eyebrow a { color: inherit; text-decoration: none; }
.resurface-eyebrow a:hover { text-decoration: underline; }

/* v2.68 semantic-yield receipt: the resurfacing frame and eyebrow, with a
   short list of truthful counts in place of a card. No scores, no badges. */
.receipt-body { text-align: center; }
.receipt-title { margin: .1rem 0 .7rem; font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.receipt-counts { list-style: none; margin: 0 auto .8rem; padding: 0; display: inline-flex; flex-direction: column; gap: .3rem; text-align: left; font-size: .95rem; }
.receipt-counts li::before { content: "\2022"; margin-right: .55rem; opacity: .45; }
.receipt-names { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.5; }
.receipt-names a { color: inherit; }
.receipt-note { margin: 0 0 .5rem; }
.receipt-promise { margin: .2rem 0 .9rem; font-style: italic; opacity: .85; }
.receipt-foot { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.receipt-foot .fine { margin: 0; opacity: .6; }

/* ---- Provenance colophon: structure only, so classic gets a sane stacked
   composition and modern paints it as a watermark. ---- */
/* Every line sits on one rhythm. The gap is owned by the column, not by the
   individual lines — per-element margins were what produced a two-tier
   spacing (tight within a label/value pair, loose between pairs). */
.colophon { display: flex; flex-direction: column; align-items: center; gap: .55rem;
  text-align: center; margin: 3rem auto 4rem; max-width: 16rem;
  text-transform: uppercase; letter-spacing: .16em; }
/* Every line of the colophon is the same ink: one size, one weight, one
   tracking, one opacity. Labels and values are distinguished by position and
   by what they say, never by weight or colour — the whole block is a single
   watermark, and the device in the middle is struck at that same value. */
.colo-head,
.colo-k,
.colo-v { display: block; font-size: .5rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; opacity: 1; margin: 0; }
.colo-rule { display: block; width: 2.6rem; height: 1px; background: currentColor; margin: 0; opacity: 1; }



.colo-mark { display: block; margin: 0; width: 26px; height: auto; }
.colo-lead { display: block; font-size: .5rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; opacity: 1; margin: 0; }

/* =====================================================================
   Itinerary — structure for both skins. Paint lives in the skin sheets.
   ===================================================================== */
.itin-when { text-align: center; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin: -.4rem 0 .5rem; opacity: .85; }
.itin-ctx { text-align: center; font-style: italic; margin: 0 0 1.4rem; line-height: 1.5; }
.itin-conflict { font-size: .85rem; font-style: italic; padding: .6rem .9rem; border-left: 2px solid currentColor; margin: 0 0 1.2rem; opacity: .85; }
.itin-group { margin: 0 0 1.6rem; }
.itin-day { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .8rem; cursor: default; list-style: none; }
.itin-day b { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.itin-day span:not(.rule) { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.itin-day .rule { flex: 1; height: 1px; background: currentColor; opacity: .18; }
.itin-day-loose b { opacity: .55; }
.itin-day-hint { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; font-style: normal; opacity: 0; transition: opacity .18s; }
.itin-day-edit > summary:hover .itin-day-hint, .itin-head-edit > summary:hover .itin-day-hint { opacity: .6; }
.itin-day-edit > summary, .itin-head-edit > summary, .itin-add-day > summary, .itin-create > summary { list-style: none; cursor: pointer; }
.itin-day-edit > summary::-webkit-details-marker, .itin-head-edit > summary::-webkit-details-marker { display: none; }
.itin-head-edit > summary { position: relative; }
.itin-head-edit .itin-day-hint { position: absolute; right: 0; top: .4rem; }

/* the timeline: the check-in grammar, but the spine only over the authored prefix */
.itin-tl { list-style: none; margin: 0; padding: 0 0 0 1.4rem; position: relative; }
.itin-tl .stop { position: relative; margin: 0 0 .85rem; }
.itin-tl .stop::before { content: ""; position: absolute; left: -1.4rem; top: 1rem; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; }
.itin-tl .stop.is-mark::before { opacity: .9; }
.itin-tl .stop:not(.is-seq)::before { opacity: .18; }
.itin-tl .stop.is-seq + .stop.is-seq::after,
.itin-tl .stop.is-seq:first-child::after { content: ""; position: absolute; left: calc(-1.4rem + 3.5px); top: -1rem; height: 2rem; width: 1px; background: currentColor; opacity: .2; }
.itin-tl .stop.is-seq:first-child::after { display: none; }
.stop-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .35rem; min-height: 1.2rem; }
.stop-when { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-left: auto; }
.stop-withheld { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.stop-from { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-top: .25rem; }
.stop-loose { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem .95rem; border-radius: 16px; }
.stop-loose .stop-body { flex: 1; min-width: 0; }
.stop-loose .stop-label { font-size: 1.02rem; font-style: italic; }
.stop-loose.is-unres .stop-label { text-decoration: underline dotted; text-underline-offset: .22em; }
.stop-open { display: flex; align-items: baseline; gap: .8rem; padding: .35rem .2rem; }
.stop-open .stop-label { flex: 1; font-size: 1.02rem; font-style: italic; opacity: .6; }
.is-withheld > .stop-loose, .is-withheld > .stop-open, .is-withheld > .note { opacity: .55; }
.stop-handle { position: absolute; left: -2.6rem; top: .55rem; cursor: grab; opacity: 0; font-size: 1rem; user-select: none; padding: .2rem .4rem; touch-action: none; }
.stop:hover .stop-handle { opacity: .5; }
.stop.is-dragging { opacity: .45; }
.stop.drop-before { box-shadow: 0 -2px 0 0 currentColor; }
.itin-tl.drop-into { outline: 1px dashed currentColor; outline-offset: 6px; border-radius: 16px; }

/* the ··· menu and its sheet */
.stop-menu { position: relative; margin-left: .4rem; }
.stop-menu > summary { list-style: none; cursor: pointer; font-size: 1rem; letter-spacing: .1em; opacity: .55; padding: 0 .3rem; }
.stop-menu > summary::-webkit-details-marker { display: none; }
.stop-menu[open] > summary { opacity: 1; }
.stop-loose .stop-menu, .stop-open .stop-menu { align-self: flex-start; }
.stop-sheet { margin: .5rem 0 0; padding: .9rem 1rem; border-radius: 16px; }
.stop-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; }
.stop-links form { margin: 0; }
.stop-del { opacity: .7; }


.stop-add { margin-top: .4rem; }
.stop-add::before { display: none; }
.stop-add-form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.itin-add-day, .itin-create { margin: .4rem 0 1.4rem; }
.itin-add-day .day-form, .itin-create .day-form { margin-top: .8rem; }
.itin-actions { display: flex; gap: 1.4rem; align-items: center; margin-top: 2rem; padding-top: 1.2rem; }
.itin-actions form { margin: 0; }
@media (max-width: 52rem) {
  .stop-handle { opacity: .45; left: -2.2rem; }
  .stop-form, .day-form, .itin-form { grid-template-columns: 1fr; }
  .stop-add-form { flex-wrap: wrap; }
}
/* Inside an itinerary the mark card's feed rail (avatar + marked-on date) is
   noise: the relevant time is the stop's own, shown in its head. The card
   itself, with Directions and Check in, is untouched. */
.itin-tl .stop.is-mark .note > .stackdate, .itin-tl .stop.is-mark .note > .byline,
.itin-tl .stop.is-mark .note > .note-rail, .itin-tl .stop.is-mark .act-meta { display: none !important; }
/* the note is a two-column grid (rail + card); with the rail hidden, grid
   auto-placement dropped the card into the empty 58px rail column. Block it. */
.itin-tl .stop.is-mark .note { display: block; margin-left: 0; max-width: none; }
.itin-tl .stop.is-mark .note > .card { width: auto; }

/* The whole itinerary column is the canonical mark page's width, so a mark
   card here is exactly the size it is on its own page. */
/* grid-single is 42rem and left-aligned; the itinerary wraps its cards in a
   day container and a timeline indent, so the column is that much wider and
   the card inside lands at exactly the width it has on its own page. */
/* wide enough for two full-width tiles side by side (2 x 41.5rem + the gap +
   the feed padding); below that they stack */
.itin-page { max-width: 88.5rem; margin-left: 0; margin-right: 0; }

/* Each day is one flat container -- the visit-log / resurfacing tint -- and its
   stops sit bare inside it: no tint-within-tint. The unplaced cluster gets the
   same container so it is a peer, not a footnote. */
.itin-group { padding: 1.1rem 1.25rem 1rem; border-radius: 16px; }
.itin-group .itin-day { margin-bottom: 1rem; }
.stop-loose { background: none !important; padding: .35rem .2rem; border-radius: 0; }
.stop-open { padding: .35rem .2rem; }
.itin-tl { padding-left: 1.5rem; }
.itin-tl .stop::before { left: -1.5rem; }
.itin-tl .stop.is-seq + .stop.is-seq::after { left: calc(-1.5rem + 3.5px); }
.stop-handle { left: -2.7rem; }
/* The ··· sheet spans the whole stop when open rather than popping beside the
   dots: the details element is a flex item, so on open it takes the full row
   and drops below the rest. Its links are sized as the small-caps actions they
   are, not inherited from the page. */
.stop-head, .stop-loose, .stop-open { flex-wrap: wrap; }
.stop-menu { margin-left: auto; }
.stop-menu[open] { flex: 1 1 100%; order: 10; }
.stop-menu > summary { display: block; text-align: right; }
.stop-links button, .stop-links .link { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; padding: .2rem 0; }
.stop-loose .stop-menu > summary, .stop-open .stop-menu > summary { margin-top: -.1rem; }
/* mobile: the handle and the node were sharing the gutter. Widen the day
   container's left edge so both have their own column. */
@media (max-width: 52rem) {
  .itin-group { padding-left: 2.9rem; }
  .itin-tl { padding-left: 1.3rem; }
  .itin-tl .stop::before { left: -1.3rem; }
  .itin-tl .stop.is-seq + .stop.is-seq::after { left: calc(-1.3rem + 3.5px); }
  .stop-handle { left: -3.1rem; top: .45rem; opacity: .4; padding: .2rem .25rem; }
}

/* An unresolved or experiential stop is a card: same footprint and register
   as a mark card, carrying what is known so far. The eyebrow mirrors the mark
   card's own; the label sits where the mark's name sits. */
.stop-card { display: block; text-align: center; padding: 1.1rem 1.3rem 1.2rem; }
.stop-eb { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-bottom: .5rem; }
.stop-card .stop-label { display: block; font-size: 1.45rem; line-height: 1.2; font-style: normal; }
.stop-card.is-unres .stop-label { text-decoration: underline dotted; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.stop-card .stop-from, .stop-card .stop-note { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-top: .6rem; }
.stop-loose { display: none; }
@media (max-width: 52rem) { .stop-card { padding: 1rem 1rem 1.1rem; } .stop-card .stop-label { font-size: 1.25rem; } }

/* ---- add-stop: one post-box button, opening a card of fields ---- */
.stop-add-disc > summary { list-style: none; cursor: pointer; }
.stop-add-disc > summary::-webkit-details-marker { display: none; }
.stop-add-open { margin: .2rem 0 0; padding: .55rem 1rem; min-height: 0; }
.stop-add-open .plus { width: 2.1rem; height: 2.1rem; }
.stop-add-open span { font-size: .95rem; }
.stop-add-disc[open] > summary { display: none; }

/* =====================================================================
   Itinerary listing: each itinerary is the article page's own rendering,
   cut off and faded. The cards inside are the real cards -- nothing here
   restyles them; this only clips the body and dissolves its bottom edge.
   ===================================================================== */
.itp-list { display: grid; gap: 1.6rem; }
.itp { display: block; text-decoration: none; color: inherit; position: relative; }
.itp:hover { text-decoration: none; }
.itp-head { display: block; text-align: center; margin: 0 0 1rem; }
.itp-title { display: block; font-size: 1.5rem; line-height: 1.15; }
.itp-title i { font-size: .6rem; font-style: italic; letter-spacing: .12em; opacity: .6; margin-left: .5rem; vertical-align: middle; }
.itp-when-top { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-top: .35rem; }
.itp-ctx { display: block; font-style: italic; font-size: .92rem; line-height: 1.45; margin-top: .45rem; opacity: .85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.itp-body { display: block; position: relative; }
/* the preview is not interactive: cards keep their look but not their handles */
.itp-body .stop-handle, .itp-body .stop-menu, .itp-body .itin-day-hint { display: none !important; }
.itp-body .itin-group { margin-bottom: 1rem; }
/* the cut: a hard height, then the content itself dissolves through a mask so
   whatever the day container and cards are showing stays intact beneath */
.itp-body.has-more { max-height: 30rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%); }
.itp-more { display: block; text-align: center; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; margin: .2rem 0 .4rem; }
.itp-empty { display: block; font-style: italic; opacity: .55; padding: .6rem 0 1rem; }
@media (max-width: 52rem) { .itp-title { font-size: 1.3rem; } .itp-body.has-more { max-height: 26rem; } }

/* ---- intention cards: spacing, type and padding refined so the eyebrow,
   the label and the note read as three deliberate lines rather than one
   line squeezed between two small ones. ---- */
.itin-tl .stop .card.stop-card, .card.stop-card { padding: 1.35rem 1.6rem 1.45rem !important; }
.stop-eb { margin-bottom: .65rem; letter-spacing: .2em; }
.stop-card .stop-label { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.005em; }
.stop-card .stop-from, .stop-card .stop-note { margin-top: .85rem; letter-spacing: .14em; font-size: .6rem; }
.stop-card.is-unres .stop-label { text-underline-offset: .26em; }
@media (max-width: 52rem) {
  .card.stop-card { padding: 1.15rem 1.15rem 1.25rem !important; }
  .stop-card .stop-label { font-size: 1.28rem; }
  .itp { padding: 1.1rem 1.1rem 1rem; }
  .itp-title { font-size: 1.3rem; }
}
/* the preview's whole body is one link, laid over it; the head and the count
   are links of their own so keyboard users have a real target */
.itp { position: relative; }
.itp-head { color: inherit; text-decoration: none; }
.itp-over { position: absolute; inset: 0; z-index: 2; }
.itp-more { position: relative; z-index: 3; text-decoration: none; color: inherit; }
.itp-body { position: relative; z-index: 1; }
/* the listing's create button is the same post-box as "Post a new Note";
   only its summary chrome is suppressed so it can open the form beneath */
.itin-create > summary.post-box { list-style: none; cursor: pointer; }
.itin-create > summary.post-box::-webkit-details-marker { display: none; }
.itin-create[open] > summary.post-box { margin-bottom: 1rem; }

/* ---- itinerary forms: the mark post card's own components, nothing new.
   nf-box, nf-top, nf-stack and nf-field are inherited untouched; these rules
   only place the switch and size the primary button. ---- */
.itin-create > summary.post-box, .itin-add-day > summary.post-box { list-style: none; cursor: pointer; }
.itin-create > summary.post-box::-webkit-details-marker, .itin-add-day > summary.post-box::-webkit-details-marker { display: none; }
.itin-create[open] > summary.post-box, .itin-add-day[open] > summary.post-box { margin-bottom: 1rem; }
.itin-new, .day-form, .stop-form, .stop-add-form { margin: 0; }
.itin-new .nf-box { position: relative; }
.itin-new .nf-top { position: absolute; top: .9rem; right: 1rem; display: flex; align-items: center; gap: .6rem; margin: 0; }
.itin-new .nf-top + .nf-stack { margin-top: 2rem; }
.itin-timing { margin: .6rem 0 .2rem; }
.itin-timing > summary { list-style: none; }
.itin-timing > summary::-webkit-details-marker { display: none; }
.itin-when-btn { display: inline-flex; align-items: center; cursor: pointer; }
.itin-timing[open] > .itin-when-btn { margin-bottom: .8rem; }
.itin-timing[open] > .itin-when-btn::after { content: "\00a0\00a0\2212"; }
.itin-timing:not([open]) > .itin-when-btn::after { content: "\00a0\00a0+"; }
/* the primary action, at primary size, full width, below the stack */
.itin-new .nf-post, .day-form .nf-post, .stop-form .nf-post, .stop-add-form .nf-post { display: block; width: 100%; margin-top: .9rem;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; padding: .95rem 1.4rem; }
.stop-add-form .nf-box, .day-form .nf-box { padding: 1rem; }
.stop-form .nf-stack { margin: 0; }
.stop-sheet .nf-post { margin-top: .6rem; }
/* the itinerary's title field is its "name" field: same primary-field size
   the mark form gives input[name="name"] */
.nf-stack input.nf-field[name="title"] { text-transform: none; letter-spacing: .01em; font-size: var(--nf-body-size); line-height: 1.45; }
.nf-stack input.nf-field[name="title"]::placeholder { text-transform: uppercase; letter-spacing: .12em; }
/* in-day cards fill their column; nf-compact would otherwise fit them to content */
.stop-add-form, .day-form, .stop-form, .itin-new { display: block; width: 100%; }
.stop-add-form .nf-box, .day-form .nf-box, .itin-new .nf-box { width: 100%; max-width: none; box-sizing: border-box; }
.stop-add-form .nf-stack, .day-form .nf-stack, .stop-form .nf-stack, .itin-new .nf-stack { width: 100%; }

/* ---- welcome counters: the stat cells live in .wcells. On desktop it is
   display: contents, so the grid places the cells exactly as before; on a
   phone it is a horizontal scroller, so extra cells scroll rather than wrap
   and nothing existing changes size. ---- */
.wcells { display: contents; }
@media (max-width: 52rem) {
  .wcells { display: flex; grid-column: 1 / -1; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; gap: .35rem; }
  .wcells::-webkit-scrollbar { display: none; }
  /* each chip is exactly the width a four-across cell had */
  .wcells > .wcell { flex: 0 0 calc((100% - 3 * .35rem) / 4); scroll-snap-align: start; }
}

/* ---- the itinerary shell: one container for title, overview and days. The
   article page is this card fully expanded; the listing is it truncated. ---- */
.itin-shell { border-radius: 16px; padding: .4rem 1.25rem 1.1rem; margin: 0 0 1.4rem; }
.itin-shell .itin-head { padding: 1.2rem .5rem .4rem; }
.itin-shell .itin-head .ens-title { margin-bottom: .35rem; }
.itin-priv { font-size: .6rem; font-style: italic; letter-spacing: .12em; opacity: .6; margin-left: .5rem; vertical-align: middle; }
.itin-shell .itin-when { margin: 0 0 .5rem; }
.itin-shell .itin-ctx { margin: 0 0 .6rem; }
.itin-shell .itin-group { padding-left: 0; padding-right: 0; background: none !important; }
.itin-head-edit > summary { position: relative; display: block; }
.itin-head-edit .itin-day-hint { position: absolute; right: .6rem; top: 1rem; }
/* the listing preview head is a link but reads as the title */
.itp-head.itin-head { display: block; text-decoration: none; color: inherit; }
.itp-head .itin-when, .itp-head .itin-ctx { display: block; }
/* the listing keeps the feed's normal width, so Start an itinerary follows
   the same rule as Post a new Note; only the article page is column-limited */
.itin-list .post-box { margin-bottom: 1.4rem; }

/* ---- itinerary article: the map and the nearby suggestions sit in a side
   column on desktop, to the right of the shell; below it on a phone. ---- */
.itin-side { display: block; margin: 0 0 1.4rem; }
/* the side column is absolutely placed beside the shell, so the page must
   reserve room for it or it runs past the viewport (it did, in classic at
   1500px). The column is limited to the shell's width plus the side. */
/* square, and overriding mark-map's own fixed iframe height so the tile fills
   the square. The colour filters from mark-map are deliberately inherited. */
.itin-map { position: relative; margin: 0 0 1.4rem; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; max-width: none; }
.itin-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border: 0; display: block; }
.itin-map svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.itin-map .pin { fill: currentColor; stroke: #fff; stroke-width: .6; }
.itin-map .pin-n { font-size: 2.6px; font-weight: 700; fill: #fff; font-family: inherit; }
.itin-map figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .45rem .8rem; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.itin-sugg { display: block; }
.itin-sugg .strip { margin-bottom: .8rem; }
.itin-sugg-group { margin: 0 0 1.2rem; }
.itin-sugg-list { display: grid; gap: .3rem; }
.sugg { display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; align-items: baseline; padding: .5rem .2rem; }
.sugg-name { grid-column: 1; font-size: .98rem; text-decoration: none; color: inherit; }
.sugg-sub { grid-column: 1; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.sugg form { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; }
.sugg form .link { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
.itin-sugg-more > summary { list-style: none; cursor: pointer; display: block; text-align: center; margin: .5rem 0 .2rem; }
.itin-sugg-more > summary::-webkit-details-marker { display: none; }
.itin-sugg-more[open] > summary { display: none; }
/* listing previews in feed columns: the shell fills its column */
.grid .itin-note, .feed-col .itin-note { width: 100%; box-sizing: border-box; }
/* the shell keeps the card at standard width whatever the page allows; the
   extra page width exists only to hold the side column beside it */
.itin-shell, .itin-page > .itin-actions { max-width: 41.5rem; }


/* ---- itinerary spacing: one rhythm. The shell's head sits on the feed's
   standard top padding, and the side column starts on the same line as the
   shell so the two columns share a baseline. ---- */
.itin-page > .itin-shell:first-child, .itin-page > .itin-shell { margin-top: 0; }
.itin-shell { padding: 1.4rem 1.25rem 1.2rem; }
.itin-shell .itin-head { padding: 0 .5rem .2rem; }
.itin-shell .itin-head .who { margin: 0 0 .5rem; }
.itin-shell .itin-head .ens-title { margin: 0 0 .4rem; padding-top: 0; }

.itin-side { padding-top: 0; }
.itin-side > .itin-map:first-child { margin-top: 0; }
.itin-sugg { margin-top: 0; }
.itp .itin-head { padding-top: 1.1rem; }
@media (max-width: 52rem) {
  .itin-shell { padding: 1.1rem .9rem 1rem; }
  .itin-side { margin-top: 1.4rem; }
}


/* ---- standard top spacing: the itinerary page's content begins at the same
   distance below the masthead as every other page's does, and both columns
   start on that line. ---- */

/* Itinerary previews in a feed need the same gap beneath them as any other
   card. In the profile activity feed .act-note supplies it; in the home feed
   the preview is a direct grid child, so it carries its own. */
/* An itinerary preview is a large tinted container, not a plain card, so it
   needs more air beneath it than a note does before the next card’s avatar
   rail begins. The activity feed’s .act-note wrapper gets the same. */
.act-note:has(> .itp) { padding-bottom: 1.5rem; }
/* .itp IS the shell: one element carries both classes. In the activity feed
   the .act-note wrapper supplies the separation, so the preview adds none. */
.act-note > .itin-note > .itp.itin-shell { margin-bottom: 0; }

/* the suggestions disclosure is not the feed pager: its own class, so the
   global .more-link handler never sees it */
.sugg-more-btn { display: block; text-align: center; cursor: pointer; list-style: none; margin: .6rem 0 .2rem; }
.sugg-more-btn::-webkit-details-marker { display: none; }
.itin-sugg-more[open] > .sugg-more-btn { display: none; }

/* the inline map is a still: interacting with it would drift the pins out of
   register, so pointer events go to the figure, not the tiles */
.itin-map iframe { pointer-events: none; }
.itin-map figcaption a { color: inherit; text-decoration: none; pointer-events: auto; }
.itin-map figcaption a:hover { text-decoration: underline; }


/* ---- the article page is two tiles: the itinerary and its side column. They
   are the same width, stack on narrow viewports and spread when there is room,
   exactly as feed columns do. ---- */
.itin-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.6rem; }
.itin-main, .itin-side { flex: 1 1 41.5rem; min-width: 0; max-width: 41.5rem; }
.itin-main > .itin-shell { max-width: none; margin-bottom: 0; }
.itin-main > .itin-actions { max-width: none; }
.itin-side { margin: 0; padding-top: 0; }
.itin-side > :first-child { margin-top: 0; }

/* Other pages open with a .strip heading, which sets their first content 65px
   below the masthead. These pages open with a card instead, so they carry the
   same gap themselves. */

/* ---- itinerary byline: the same row every first-class object carries ---- */
.itin-note > .byline { margin: 0; }
/* The Edit affordance lives in the byline rail, exactly where a note or a mark
   puts it, and drives the edit form through a label -- a <details> summary
   cannot be reached from outside the card. */
.itin-head-edit { display: none; margin-top: 1rem; }
.itin-edit-toggle:checked ~ .itin-head-edit { display: block; }
.itin-note > .byline .card-edit { cursor: pointer; }
.itin-edit-form { margin-top: .4rem; }

/* the timing line takes the mark card's locality typography */
.itin-when, .itp .itin-when { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---- the move control: up / grip / down, in the card's left indent ---- */
.stop-move { position: absolute; top: .35rem; display: flex; flex-direction: column;
  align-items: center; gap: .1rem; opacity: 0; transition: opacity .18s; }
.stop:hover .stop-move, .stop-move:focus-within { opacity: .75; }
.stop-arrow { background: none; border: 0; padding: .1rem .3rem; cursor: pointer; font-size: .8rem; line-height: 1; color: inherit; }
.stop-arrow:hover { opacity: 1; }
.stop-handle { position: static; opacity: 1; font-size: 1.05rem; padding: .1rem .3rem; }
.stop:hover .stop-handle { opacity: 1; }
@media (max-width: 52rem) {
  .stop-move { opacity: .55; }
  .stop-arrow { padding: .18rem .3rem; }
}


/* ---- an itinerary is a .note: a byline rail, then the card. Same grid, same
   gap, same rail width as every other first-class object. ---- */
.itin-note > .itin-shell, .itin-note > .itp { margin: 0; min-width: 0; }
.itin-main > .itin-note { max-width: none; }
/* an itinerary in a feed is a .note: it takes the same spacing every other
   card takes, and adds nothing of its own */
.act-note > .itin-note { margin-bottom: 0; }

/* ---- an itinerary is a .note: byline rail, then the card. Same grid, same
   3.4rem rail, same gap as every other first-class object. ---- */
.itin-note > .itin-shell, .itin-note > .itp { margin: 0; min-width: 0; }
.itin-main > .itin-note { max-width: none; }
.itin-note > .byline .card-edit { cursor: pointer; }
/* Edit lives in the rail and drives the form from outside the card, which a
   <details> summary cannot do -- hence the label and hidden checkbox. */
.itin-head-edit { display: none; margin-top: 1rem; }
.itin-edit-toggle:checked ~ .itin-head-edit { display: block; }
/* an itinerary in a feed is a .note: it takes the same spacing every other
   card takes, and adds nothing of its own */
.act-note > .itin-note { margin-bottom: 0; }
.grid .itin-note, .feed-col .itin-note { width: 100%; box-sizing: border-box; }

.itin-edit-toggle { display: none !important; }

/* ---- 1. the move control sits under the timeline dot, centred in the gutter
   between the container edge and the card edge ---- */
.stop-move { left: calc(-1.5rem + 4px); transform: translateX(-50%); top: 2rem; }
.stop-handle { font-size: 1rem; }

/* ---- 2. the time of day sits beside its dot, left aligned, on the dot's own
   line -- not centred and not pushed to the right edge ---- */
/* the time sits on the dot's own line: the dot is 8px tall at top 1rem, so the
   head is nudged to put the text's centre on the dot's centre */
.stop-head { justify-content: flex-start; margin: .2rem 0 .3rem; min-height: .8rem; align-items: center; }
.stop-when { margin-left: 0; }
.stop-head .stop-menu { margin-left: auto; }
.stop-loose .stop-when, .stop-open .stop-when { margin-left: 0; }

/* ---- 3. real space above the first card. The 65px other pages show comes
   from the page layout, not from padding, so a tall card can still read as
   flush against the masthead -- and does in Safari. This is actual padding,
   so it holds in every engine. ---- */
.itin-page, .itin-list { padding-top: 1.5rem; }
.itin-side { padding-top: 0; }
@media (max-width: 52rem) { .itin-page, .itin-list { padding-top: 1rem; } }

/* The dot aligns with the time text beside it. Nudging the head instead would
   not work: its top margin collapses through .stop and carries the dot with
   it, so the offset never changes. */
.itin-tl .stop::before { top: .55rem; }
.itin-tl .stop.is-seq + .stop.is-seq::after { top: -1.45rem; height: 2rem; }

/* ---- the time of day sits beside its node ----------------------------------
   It was right-aligned above the card, reading as a caption of nothing. It now
   begins immediately right of the dot and is left-aligned, ragged right, so the
   dot and its label are one unit. Applies wherever a stop renders -- the
   article page and every feed, since both use the same renderer. */
.stop-head { justify-content: flex-start; gap: .5rem; min-height: 1.1rem; margin-bottom: .3rem; }
.stop-when { margin-left: 0; text-align: left; }
.stop-head .stop-menu { margin-left: auto; }
/* the node aligns with the middle of that line rather than the card below it */
.itin-tl .stop::before { top: .32rem; }
.itin-tl .stop.is-seq + .stop.is-seq::after { top: -1.1rem; height: 1.5rem; }

/* ---- the move control sits under the node -----------------------------------
   Centred in the gutter between the container's left edge and the card's, and
   directly beneath the dot, so the control reads as belonging to that stop. */
.stop-move { left: calc(-1.5rem + 4px); transform: translateX(-50%); top: 1.1rem; }
@media (max-width: 52rem) { .stop-move { left: calc(-1.3rem + 4px); top: 1rem; } }

/* ---- clear of the fixed search bar -----------------------------------------
   .searchbar is fixed at 65px tall and content scrolls beneath it. Pages that
   open with a .strip heading get away with a small gap; a card butting the bar
   does not, so these pages take a real one. */
.itin-page, .itin-list { padding-top: 3rem; }

/* ---- time of day: Title Case, italic, on the node's own centre line ---- */
.stop-when { font-style: italic; text-transform: none; letter-spacing: .02em; font-size: .78rem; line-height: 1; }
/* A fixed head height, so the row is the same with or without the ··· menu --
   the feeds render no controls, and a min-height let their row collapse and
   the node drift 3px out of line. */
.stop-head { align-items: center; height: 1.3rem; min-height: 0; }
/* dot centre == head centre: top = height/2 - dotRadius */
.itin-tl .stop::before { top: .41rem; }
.itin-tl .stop.is-seq + .stop.is-seq::after { top: -.95rem; height: 1.55rem; }

/* ---- the move lockup sits on the card's centre line ---- */
/* centred on the CARD, not the whole stop: the stop also contains the head row
   above the card, so half that row is added back */
.stop-move { top: calc(50% + .9rem); transform: translate(-50%, -50%); }

/* ---- editing the itinerary replaces what it edits ---- */
.itin-edit-toggle:checked ~ .itin-head-read { display: none; }

/* ---- Show more: the skin's primary action, as in the comment form ---- */
.sugg-more-btn { display: block; width: 100%; box-sizing: border-box; text-align: center;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; padding: .95rem 1.4rem; margin: .8rem 0 .2rem; }

/* The itinerary colophon reuses the note colophon wholesale. It sits in the
   side column beneath the map and the suggestions on wide screens, and at the
   end of the content on a phone -- which the side column already does. It is
   not centred against a card the way the note's is, so it keeps flow. */
.itin-colophon { position: static !important; width: auto !important; margin: 2.4rem auto 1rem !important;
  top: auto !important; right: auto !important; left: auto !important; max-width: 16rem; }

/* ---- the feed preview's title area matches the article's -------------------
   The preview head is an <a>, which picked up link alignment and stacked the
   old .itp-head margins on top of the shared .itin-head padding -- so the
   title sat left and 38px lower than on the article page. One rule for both. */
.itp .itin-head, .itp-head.itin-head { text-align: center; padding: 0 .5rem .2rem; margin: 0; }
.itp .itin-head .ens-title, .itin-shell .itin-head .ens-title { text-align: center; }
.itp.itin-shell { padding-top: 1.4rem; }

/* ---- the timing line: sentence case, italic ---- */
.itin-when, .itp .itin-when {
  font-style: italic; text-transform: none; font-weight: 400; letter-spacing: .01em; font-size: .92rem;
}

/* ---- looking up marks while writing a stop --------------------------------
   One field: matches from the member's own catalogue appear beneath it, and a
   small gallery of marks already kept in this region sits under that. Both are
   ways of choosing; neither is required. */
.mark-picks { display: grid; gap: 1px; margin: .5rem 0 0; border-radius: 12px; overflow: hidden; }
.mark-pick, .mark-chip { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit;
  padding: .6rem .8rem; }
.mark-pick-name, .mark-chip-name { display: block; font-size: .95rem; }
.mark-pick-where, .mark-chip-where { display: block; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .15rem; }
/* a flex item will not shrink below its content unless told to */
.mark-chosen { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 0; padding: .55rem .8rem;
  border-radius: 12px; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
.mark-picks, .mark-gallery { width: 100%; min-width: 0; box-sizing: border-box; }
.mark-chosen [data-unpick] { flex: 0 0 auto; white-space: nowrap; font-size: .58rem; letter-spacing: .14em;
  align-self: center; line-height: 1; padding: 0; margin: 0; border: 0; background: none; }
.mark-chosen-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-chosen-name { flex: 1; font-size: .95rem; }
.mark-chosen-name::before { content: "\2713\00a0\00a0"; }
.mark-gallery { margin: .8rem 0 0; }
.mark-gallery-h { display: block; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .45rem; }
.mark-gallery-row { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
.mark-gallery-row::-webkit-scrollbar { display: none; }
.mark-chip { width: auto; flex: 0 0 auto; max-width: 11rem; border-radius: 12px; padding: .5rem .75rem; }
.mark-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- the stop's own sheet sits above the card it edits -------------------- */
.stop { position: relative; }
.stop-menu { position: relative; z-index: 5; }
.stop-menu[open] { z-index: 40; }
.stop-sheet { position: relative; z-index: 41; }

/* ---- one add card, two tabs: a new stop, or a new day -------------------- */
.itin-seg { display: flex; gap: .3rem; margin: 0 0 .7rem; }
.itin-seg .seg-btn { flex: 1 1 0; cursor: pointer; }
.itin-seg-panel { display: none; }
.itin-seg-panel.is-on { display: block; }
/* a display rule beats the hidden attribute, so the empty picker rows were
   showing on load; restore what hidden is supposed to mean */
.mark-chosen[hidden], .mark-picks[hidden], .itin-seg-panel[hidden] { display: none !important; }

/* ---- the stop's number, read together with the map's pin ---- */
.stop-no { font-style: normal; font-variant-numeric: tabular-nums; margin-right: .45rem; }

/* ---- the map crops its own controls ---------------------------------------
   The embed draws zoom buttons at the top-left that do nothing here, since the
   map is deliberately not interactive. The iframe and the pin overlay are
   inset together inside a cropping frame, so the controls fall outside the
   visible area and the pins stay in register with the tiles. */
.itin-map { overflow: hidden; }
.itin-map-inner { position: absolute; display: block; top: -2.9rem; left: -2.9rem; right: -0.4rem; bottom: -0.4rem; }
.itin-map-inner iframe, .itin-map-inner svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- search results, grouped by kind ---------------------------------------
   Each group's cards sit in the same flat container the itinerary days, the
   check-in timeline and the resurfacing frame use. */
.search-group { margin: 0 0 1.8rem; }
.search-cards { padding: 1.1rem 1.25rem 1rem; border-radius: 16px; display: grid; gap: 1.4rem; }
.search-cards .ens-tile { margin: 0; }
.search-group .more { margin-top: .9rem; }
.note-sugg { margin-top: 1.6rem; }
@media (max-width: 52rem) { .search-cards { padding: .9rem .8rem .8rem; } }
/* the tiler sets display:flex on a grid inline; the container's own padding
   and tint stay, so the columns live inside the grouping frame */
.search-cards.grid { box-sizing: border-box; }
.search-cards > .feed-col { min-width: 0; }

/* Below the breakpoint the side column is simply the end of the page, in the
   order it is written: Similar notes, then the colophon. */
.note-side { display: block; }
/* stacked below the card on a phone it needs the gap; leading the side column
   it should start level with the card */
.note-side > .note-sugg { margin-top: 1.6rem; }
@media (min-width: 78rem) { .note-side > .note-sugg:first-child { margin-top: 0; } }

/* ---- the ensemble article reuses the itinerary shell ---- */
.ens-shell .ens-title { margin: 0 0 .4rem; }
.ens-shell .ens-desc { margin: 0 0 .5rem; }
.ens-shell .ens-meta { margin: .3rem 0 0; }
.ens-shell .ens-primary, .ens-shell .ens-alts, .ens-shell .ens-parts { margin-left: 0; margin-right: 0; }
.ens-feed .itin-note { margin: 0; }

/* ---- article side columns ------------------------------------------------
   The check-in timeline, the Similar notes panel and the ensemble's contents
   all sit in the second column of their page. Each fills that column; none of
   them is a narrow strip pinned to the right. ---- */

/* ---- ensemble: the composition and what it is made of, side by side ---- */
.ens-parts { margin: 0; padding: 1.1rem 1.25rem 1rem; border-radius: 16px; }
.ens-parts-h { display: block; text-align: center; font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1rem; }
.ens-main, .ens-side { flex: 1 1 41.5rem; min-width: 0; max-width: 41.5rem; }
.ens-side { margin: 0; }
@media (max-width: 78rem) { .ens-side { margin-top: 1.6rem; } }

/* pins are links now: the overlay itself stays out of the way, each pin does not */
.itin-map svg { pointer-events: none; }
.itin-map svg a { pointer-events: auto; cursor: pointer; }
/* a stop jumped to from the map should not hide under the fixed search bar */
.stop { scroll-margin-top: 5.5rem; }
/* "Three More" reads as a line of prose rather than a label */
.itp-more { font-style: italic; text-transform: none; letter-spacing: .01em;
  font-size: .82rem; font-weight: 600; }

/* ---- the flat container, with a little definition at the top --------------
   One gradient, used by every container that carries the tint: the resurfacing
   frame, itinerary shells and days, ensemble parts, similar notes, search
   groups and the check-in log. The bottom keeps the value it had; only the top
   darkens, and only slightly. */
.resurface, .itin-shell, .itin-sugg, .search-cards, .ens-parts, .visit-log {
  background-image: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,0) 42%);
}
/* the check-in log takes the same corner as every other container */
.visit-log { border-radius: 16px; }

/* ---- a comment's own edit card -------------------------------------------
   Edit sits at the far right of the meta line, on the same baseline as the
   handle and the timestamp. Opening it replaces the comment text with the
   note form's card; Delete and Cancel sit in its foot, as everywhere else. */
.comment-meta { display: flex; align-items: baseline; gap: .4rem; }
/* .card-edit centres itself with auto margins on both sides; here it belongs
   hard against the right edge of the meta line. */
.comment-meta .comment-edit { margin-left: auto; margin-right: 0; cursor: pointer; }
.cmt-toggle { display: none !important; }
.cmt-edit { display: none; margin: .4rem 0 0; }
.cmt-toggle:checked ~ .cmt-edit { display: block; }
.cmt-toggle:checked ~ .comment-text, .comment-body:has(.cmt-toggle:checked) > .comment-text { display: none; }
.cmt-edit .nf-post { display: block; width: 100%; margin-top: .7rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding: .75rem 1.2rem; }

/* .card-edit is opacity:0 until `.note:hover` reveals it. A comment is not
   inside a .note, so its Edit control was present but permanently invisible.
   Reveal it on the comment itself, and keep it legible on touch, where there
   is no hover to reveal anything. */
.comment-list li .comment-edit { opacity: 0; }
.comment-list li:hover .comment-edit,
.comment-list li:focus-within .comment-edit,
.comment-edit:focus-visible { opacity: 1; }
@media (hover: none) { .comment-list li .comment-edit { opacity: 1; } }

/* ---- welcome: the conversation, and what it becomes -----------------------
   The same container the itineraries, the check-in timeline and the
   resurfacing frame use, holding two phones. The shadow is the desktop shot's
   own treatment, scaled to the smaller frame. */
/* the section also carries .itin-shell, whose margin rule comes later and
   would left-align it; the compound selector keeps it centred */
.splash-pair.itin-shell { max-width: 54rem; margin: 3.4rem auto 0; padding: 2rem 1.6rem 1.8rem; border-radius: 16px; }
.splash-pair-lead { text-align: center; font-style: italic; font-size: 1.05rem; margin: 0 0 1.8rem; }
.phones { display: flex; gap: 2.2rem; justify-content: center; align-items: flex-start; }
.phone-wrap { position: relative; flex: 1 1 0; max-width: 15rem; margin: 0; }
.phone-body { position: relative; display: block; }
.phone-shadow { position: absolute; left: 0; right: 0; bottom: -18px; height: 50px; overflow: hidden; z-index: -1; }
.phone-shadow::before, .phone-shadow::after {
  content: ""; position: absolute; bottom: 28px; width: 52%; height: 34px;
  box-shadow: 0 14px 12px rgba(0,0,0,.5); }
.phone-shadow::before { left: 4%; transform: rotate(-5deg); transform-origin: 0 100%; }
.phone-shadow::after { right: 4%; transform: rotate(5deg); transform-origin: 100% 100%; }
.phone { position: relative; display: block; z-index: 1; border-radius: 1.9rem; overflow: hidden; padding: .42rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.18); }
.phone img { display: block; width: 100%; height: auto; border-radius: 1.55rem; }
.phone-notch { position: absolute; z-index: 2; top: .42rem; left: 50%; transform: translateX(-50%);
  width: 34%; height: 1.05rem; border-radius: 0 0 .7rem .7rem; }
.phone-wrap figcaption { position: relative; z-index: 2; text-align: center; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; margin-top: 1.1rem; }
@media (max-width: 52rem) {
  .splash-pair.itin-shell { margin-top: 2.4rem; padding: 1.4rem 1rem 1.2rem; }
  .phones { gap: 1rem; }
  .phone-wrap figcaption { font-size: .54rem; letter-spacing: .1em; }
}
/* the second shot sits in the same container, under its own line */
.splash-pair-lead-2 { margin: 2.6rem 0 1.6rem; }
.splash-shot-2 { margin: 0 auto; max-width: 46rem; }
.splash-shot-2 .shot-shadow { bottom: -22px; height: 60px; }
.splash-shot-2 .shot-shadow::before, .splash-shot-2 .shot-shadow::after { bottom: 34px; height: 40px; box-shadow: 0 16px 14px rgba(0,0,0,.5); }
@media (max-width: 52rem) { .splash-pair-lead-2 { margin: 1.8rem 0 1.1rem; } }

/* the mark and ensemble colophons sit in the same flow as the itinerary's:
   in the side column where there is one, at the end of the content otherwise */
.mark-colophon, .ens-colophon { position: static !important; width: auto !important;
  top: auto !important; right: auto !important; left: auto !important;
  margin: 2.4rem auto 1rem !important; max-width: 16rem; }

/* ---- the mark page's second column ----------------------------------------
   The check-in timeline and the colophon share it, the colophon beneath the
   timeline. The colophon is last in the document, so a phone simply ends with
   it; the grid lifts it into the column when there is room. Same protocol the
   note page uses -- a real column, never an absolutely-placed box. */
/* 92rem, not 78: below this the rail leaves column 1 too narrow to hold the
   card at its standard width, and the card matters more than the column. */
/* Column one is a single cell, so its flow is its own: the timeline's height
   can no longer push the comments down the page, which is what left a 437px
   hole beneath the card. The side column holds the timeline and, beneath it,
   the colophon -- the same shape the note page uses. */
@media (min-width: 109rem) {
  .mark-page {
    display: grid; grid-template-columns: minmax(0, 42rem) minmax(20rem, 30rem);
    column-gap: 2rem; justify-content: start; align-items: start;
  }
  .mark-page > * { grid-column: 1; min-width: 0; }
  .mark-page > .strip { grid-column: 1 / -1; }
  .mark-page > .mark-side { grid-column: 2; grid-row: 2; align-self: start; }
}
.mark-side { display: block; }
.mark-side > .visit-log { margin: 0; }
.mark-side > .mark-colophon { margin: 1.6rem auto 0 !important; }

/* ---- authorization consent + connected AI ---------------------------------
   Both reuse the note-form card and the catalogue-row pattern; these are the
   few rules those patterns do not already supply. */
.auth-page .nf { max-width: 34rem; margin: 0 auto; }
.auth-lead { font-size: 1.12rem; line-height: 1.45; text-align: center; margin: .2rem 0 1rem; }
.auth-says { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; }
.auth-says li { font-size: .92rem; line-height: 1.4; padding-left: 1.1rem; position: relative; }
.auth-says li::before { content: "\00b7"; position: absolute; left: .3rem; }
.auth-fine { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }

.conn-list { margin-top: 1.4rem; }
.conn-list > .lbl { display: block; margin: 0 0 .4rem; }
.conn-row { padding: .6rem .2rem; }
.conn-row + .conn-row { border-top: 1px solid var(--nf-rule, rgba(128,128,128,.18)); }
.conn-row .sugg-name i { font-style: italic; opacity: .55; font-size: .8em; }
.conn-new { margin-top: 1.1rem; }

/* ---- welcome-caption: the welcome page's own caption voice -----------------
   Forked from the phone figcaption so the welcome story can speak in sentence
   case at a readable size without touching any other caption in the system.
   Selectors outrank `.phone-wrap figcaption`, which still styles nothing else. */
.welcome-caption, .phone-wrap .welcome-caption {
  text-align: center; font-size: .8rem; letter-spacing: .02em; text-transform: none;
  line-height: 1.45; font-style: normal;
}
.phone-wrap .welcome-caption { margin-top: 1.1rem; }
.welcome-caption-close { display: block; max-width: 34rem; margin: .3rem auto 0; }
@media (max-width: 52rem) {
  .welcome-caption, .phone-wrap .welcome-caption { font-size: .72rem; letter-spacing: .01em; }
}

/* ---- privacy / terms / support ------------------------------------------- */
.policy { max-width: 40rem; margin: 0 auto; text-align: left; }
.policy-h { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 1.6rem 0 .4rem; }
.policy-p { font-size: .95rem; line-height: 1.55; margin: 0 0 .8rem; }
.policy-date { font-size: .72rem; opacity: .7; margin: 0 0 1.2rem; }
/* the welcome page's small-print links to the policy pages */
.welcome-foot { text-align: center; margin: 2.4rem auto 2rem; }
body[data-skin] footer.welcome-foot a { color: inherit; text-decoration: none; }
body[data-skin] footer.welcome-foot a:hover { text-decoration: underline; }
/* Shown on every page while the admin's view of private content is on. It is
   a direct child of <main>, whose children are otherwise styled as content
   blocks (background, padding, margin), so the selector is one step more
   specific than those rules in either skin. */
body[data-skin] main > p.admin-view-note { margin: .6rem auto 1rem; max-width: 46rem; padding: .5rem 1rem;
  border-radius: 999px; font-size: .85rem; line-height: 1.4; text-align: center; color: inherit;
  background-color: rgba(214, 150, 40, .16); border: 1px solid rgba(214, 150, 40, .45); }
body[data-skin] main > p.admin-view-note a { color: inherit; text-decoration: underline; }

/* Settings: Install and Admin share one cell. Phones and the two-column
   layout: last in column 2's flow. Three columns: column 3, Admin under
   Install, in its own cell so it isn't pushed below column 1's tall form. */
.settings-stack-side { display: flex; flex-direction: column; gap: 1.4rem; }
.settings-stack-side > .settings-table { margin-bottom: 0; }
@media (min-width: 108rem) {
  .settings-stack-side { grid-column: 3; grid-row: 1; }
}

/* Notes under a Stop: the ensemble-component rows, indented and joined to
   their Stop so they read as its children, never as further Stops. */
body[data-skin] .stop-notes { margin: .5rem 0 0 1.4rem; }
body[data-skin] .stop-notes .stop-note { display: flex; align-items: center; }
body[data-skin] .stop-notes .ens-comp-link { min-width: 0; }
body[data-skin] .stop-notes .ens-comp-label { overflow-wrap: anywhere; }
body[data-skin] .stop-note-detach { margin: 0 1rem 0 .4rem; flex: none; }
body[data-skin] .stop-note-attach { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .2rem 0 .6rem; }
body[data-skin] .stop-note-attach select { flex: 1 1 12rem; min-width: 0; }
/* Detach is a quiet owner action: the row label's small caps, muted. */
body[data-skin] .stop-note-detach .link { font-size: .6rem; letter-spacing: .14em; }
body[data-skin="modern"] .stop-note-detach .link { color: var(--m-ink-3); }
body:not([data-skin="modern"]) .stop-note-detach .link { color: var(--ink-soft); }
body[data-skin] .stop-notes .ens-comp-state { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 52rem) {
  body[data-skin] .stop-notes { margin-left: .6rem; }
  body[data-skin] .stop-note-detach { margin: 0 .7rem 0 .2rem; }
}
/* The modern skin pads both the row and its link (and outranks the rules
   above by coming later), so stop-note rows take one level more specificity:
   padding lives on the link alone, and phones get a tighter inset. */
body[data-skin] ul.stop-notes { margin: .5rem 0 0 1.4rem; }
body[data-skin] ul.stop-notes > li.stop-note { padding: 0; }
@media (max-width: 52rem) {
  body[data-skin] ul.stop-notes { margin-left: .5rem; }
  body[data-skin] ul.stop-notes .ens-comp-link { padding: .65rem .8rem; gap: .75rem; }
  body[data-skin] ul.stop-notes .stop-note-detach { margin: 0 .8rem 0 .2rem; }
}
/* Phones: Detach drops to its own line under the row, so the note's name
   keeps the width of the row; the thumbnail steps down slightly. */
@media (max-width: 52rem) {
  body[data-skin] ul.stop-notes > li.stop-note { flex-wrap: wrap; }
  body[data-skin] ul.stop-notes .ens-comp-link { flex: 1 1 100%; }
  body[data-skin] ul.stop-notes .ens-comp-link img, body[data-skin] ul.stop-notes .ens-comp-blank { width: 2.5rem; height: 2.5rem; }
  body[data-skin] ul.stop-notes .stop-note-detach { flex: 1 1 100%; text-align: right; margin: -.5rem .8rem .55rem; }
}

/* =====================================================================
   Increment 4: Recommended. Layout and structure for every skin; the
   modern sheet adds the proposed material. A proposal is the same object
   in a thinner material, bylined "Proposed for", never a new component.
   ===================================================================== */
/* Placement. With proposals, the page becomes a grid of three areas that
   keeps the plan first and the member's own catalogue next:
     one column   plan, map + nearby, proposals
     two columns  plan | map + nearby, then proposals under them
     three        plan | map + nearby | proposals
   Without proposals nothing here applies and the page is unchanged. */
.itin-page:has(.itin-cols.has-recs) { max-width: 104rem; container-type: inline-size; }
.itin-cols.has-recs { display: grid; grid-template-columns: minmax(0, 41.5rem); grid-template-areas: "main" "side" "recs"; gap: 1.6rem; align-items: start; }
.itin-cols.has-recs > .itin-main { grid-area: main; max-width: none; }
.itin-cols.has-recs > .itin-side { grid-area: side; max-width: none; }
.itin-cols.has-recs > .itin-recs { grid-area: recs; min-width: 0; }
/* Two columns as soon as the plan can keep its width with a narrower map
   and proposals beside it; the side column shrinks, the plan never does. */
@container (min-width: 66rem) {
  .itin-cols.has-recs { grid-template-columns: 41.5rem minmax(22rem, 41.5rem); grid-template-areas: "main side" "main recs"; grid-template-rows: auto 1fr; }
}
/* Three columns once the page can hold the plan at full width beside two
   equal tiles: the map column narrows, the plan never does. */
@container (min-width: 88rem) {
  .itin-cols.has-recs { grid-template-columns: 41.5rem minmax(0, 1fr) minmax(22rem, 1fr); grid-template-areas: "main side recs"; grid-template-rows: auto; }
}
.itin-recs { display: flex; flex-direction: column; gap: 1rem; }
.rec-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: 0 .3rem; }
.rec-head .rec-h { margin: 0; }
.rec-count { font-style: italic; font-size: .8rem; opacity: .7; }

/* One proposed plan: kind, title, why, shape; stops on explore; acts. */
.rec-plan { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.3rem 1.1rem; border-radius: 22px; }
.rec-kind { margin: 0; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.rec-kind b { font-weight: 600; }
.rec-title { margin: 0; font-size: 1.35rem; line-height: 1.15; font-weight: 400; }
.rec-title a { color: inherit; text-decoration: none; }
.rec-why { margin: 0; font-size: .92rem; line-height: 1.45; }
.rec-meta { margin: 0; font-size: .75rem; font-style: italic; opacity: .75; }
.rec-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .2rem; }
.rec-acts .rec-sp { flex: 1; }
.rec-acts form, .rec-stop-row form, .rec-kid form, .stop-kid-acts form, .prop-acts form, .prop-reacts form { margin: 0; display: inline; }
.react-btn { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: inherit; color: inherit; opacity: .8; white-space: nowrap; line-height: 1.2; }
.react-btn:hover { opacity: 1; text-decoration: underline; }
.rec-note { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.rec-plan.is-reacted { opacity: .62; }
.rec-explore > summary { list-style: none; cursor: pointer; display: inline-flex; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; padding: .45rem 1rem; border-radius: 999px; }
.rec-explore > summary::-webkit-details-marker { display: none; }
.rec-explore .is-open, .rec-explore[open] .is-closed { display: none; }
.rec-explore[open] .is-open { display: inline; }

/* Compact stops: a tile each, on the proposal's own spine, hollow dot for a
   proposed place and a filled one for a place already theirs. Days are
   labels on the spine between tiles. */
.rec-stops { list-style: none; margin: .8rem 0 .2rem; padding: 0 0 0 1.25rem; position: relative; display: flex; flex-direction: column; gap: .5rem; }
.rec-stops::before { content: ""; position: absolute; left: .3rem; top: .7rem; bottom: .7rem; width: 1px; background: currentColor; opacity: .15; }
.rec-day { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin: .35rem 0 -.1rem; }
.rec-stop { position: relative; display: flex; flex-direction: column; gap: .12rem; padding: .7rem .85rem; border-radius: 14px; }
.rec-stop::before { content: ""; position: absolute; left: -1.23rem; top: 1rem; width: .42rem; height: .42rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rec-dot, #6a58d6); }
.rec-stop.is-kept::before { background: var(--rec-dot, #6a58d6); }
.rec-stop-row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.rec-stop-name { font-size: 1rem; line-height: 1.2; }
.rec-stop-name a { color: inherit; text-decoration: none; }
.rec-stop-loc { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; opacity: .65; }
.rec-stop-why { font-size: .8rem; font-style: italic; opacity: .8; }
.rec-tag { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; white-space: nowrap; }
.rec-stop .rec-stop-keep, .rec-kid .rec-kid-keep { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
/* things at a stop hang inside its tile, on a short branch */
.rec-kids { list-style: none; margin: .45rem 0 0 .45rem; padding: .1rem 0 0 .75rem; border-left: 1px solid rgba(127,127,127,.3); display: flex; flex-direction: column; gap: .3rem; }
.rec-kid { position: relative; font-size: .82rem; display: flex; flex-wrap: wrap; gap: 0 .5rem; align-items: baseline; }
.rec-kid::before { content: ""; position: absolute; left: -.75rem; top: .75rem; width: .5rem; height: 1px; background: rgba(127,127,127,.3); }
.rec-kid-st { flex: 1 1 100%; font-size: .52rem; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
.rec-kid a { color: inherit; }
.rec-kid.is-unres span:last-child { font-style: italic; opacity: .8; }

/* Rows under a stop in the full timeline: proposed, kept, still to identify. */
body[data-skin] ul.stop-notes > li.stop-note.is-proposed, body[data-skin] ul.stop-notes > li.stop-note.is-unresolved { flex-wrap: wrap; }
.stop-note .ens-comp-why { font-size: .8rem; font-style: italic; opacity: .75; }
.stop-note .ens-comp-state i { font-style: normal; }
.stop-kid-acts { display: inline-flex; gap: .9rem; align-items: center; margin: 0 1rem 0 .4rem; flex: none; }
.ens-comp-blank.is-hatched { background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(127,127,127,.25) 5px 6px) !important; }
@media (max-width: 52rem) {
  body[data-skin] ul.stop-notes .stop-kid-acts { flex: 1 1 100%; justify-content: flex-end; margin: -.4rem .8rem .55rem; }
  .stop-note .ens-comp-why { display: none; }
}

/* A proposed card: title set straight, Keep and the reactions, one line. */
.mark-title-straight { font-weight: 400; }
.prop-acts { display: flex; gap: .8rem; align-items: center; }
.prop-reacts { display: flex; gap: 1.1rem; justify-content: center; margin: .6rem 0 0; }
.prop-line { font-size: .78rem; font-style: italic; opacity: .7; margin: .7rem 0 0; text-align: center; }
.prop-why { font-style: italic; }
.itin-prop-acts { justify-content: center; margin: .8rem 0 .2rem; }
.itin-prop-acts .rec-sp { flex: 0 0 .6rem; }

/* Map: a proposal being explored previews its places as rings. */
.itin-map .rec-pins { display: none; }
.itin-map .rec-pins.on { display: inline; }
.itin-map .pin-ring { fill: none; stroke: #6a58d6; stroke-width: .55; }
.itin-map .pin-rn { font-size: 2.1px; font-weight: 700; fill: #6a58d6; font-family: inherit; }
.itin-map .map-legend { display: none; margin-left: 1rem; gap: .35rem; align-items: center; }
.itin-map.is-previewing .map-legend { display: inline-flex; }
.map-legend .lg-dot, .map-legend .lg-ring { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-left: .5rem; }
.map-legend .lg-dot { background: #6a58d6; }
.map-legend .lg-ring { box-shadow: inset 0 0 0 1.5px #6a58d6; }

/* Review after deleting a kept plan or composition. */
.review-box { padding: 1.6rem 1.8rem; max-width: 41.5rem; }
.review-title { font-size: 1.4rem; font-weight: 400; margin: 0 0 .3rem; }
.review-sub, .review-note { font-size: .9rem; opacity: .75; margin: 0 0 1rem; }
.review-note { font-size: .75rem; font-style: italic; margin: .9rem 0 0; }
.review-list { list-style: none; margin: 0; padding: 0; }
.review-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: .8rem .2rem; border-bottom: 1px solid rgba(127,127,127,.2); }
.review-row label { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: center; cursor: pointer; }
.review-row input { grid-row: span 2; width: 1.1rem; height: 1.1rem; }
.review-name { font-size: 1rem; }
.review-kind, .review-rel { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.review-rel { text-align: right; max-width: 16rem; }
.review-acts { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; margin-top: 1rem; }
@media (max-width: 52rem) { .review-row { grid-template-columns: 1fr; } .review-rel { text-align: left; } }

/* Classic: the proposed state is a dashed edge on the same paper. */
body:not([data-skin="modern"]) .rec-plan, body:not([data-skin="modern"]) .rec-stop { border: 1px dashed rgba(0,0,0,.25); background: rgba(255,255,255,.5); }
body:not([data-skin="modern"]) .rec-plan.is-kept, body:not([data-skin="modern"]) .rec-stop.is-kept { border-style: solid; }
body:not([data-skin="modern"]) .is-proposed > .card { border-style: dashed; }
/* the quiet text buttons above reuse .link, which carries a paragraph margin */
.rec-stop-keep, .rec-kid-keep { margin: 0; line-height: 1.2; }
.rec-stop-row form { line-height: 1; }
.prop-acts { flex-wrap: wrap; justify-content: center; }
.is-proposed .noteit.prop-acts { text-align: center; }
.review-acts .nf-post { width: auto; flex: none; margin: 0; padding: .8rem 1.6rem; }
.review-acts .nf-link-btn { white-space: nowrap; }


/* ---- Welcome (v2.56): the first thing in All -------------------------------
   Built from existing components (card, sbox-title/sbox-sub, wtable/wcell,
   btn3d, link caps, fine); this only arranges them. One step shows at a time:
   the radios are real (keyboard: arrow keys), just visually hidden. */
.welcome-card { padding: 1.6rem 1.8rem 1.4rem; }
.welcome-card .wl-eyebrow { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.welcome-card .wl-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.welcome-card .wl-tab { display: inline-block; margin: 0 .3rem 1.2rem 0; padding: .55rem .9rem; border-radius: 999px; cursor: pointer;
  font-family: var(--slab); font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; opacity: .6; }
#wl-s1:focus-visible ~ .wl-tabs label[for="wl-s1"], #wl-s2:focus-visible ~ .wl-tabs label[for="wl-s2"], #wl-s3:focus-visible ~ .wl-tabs label[for="wl-s3"] { outline: 2px solid currentColor; outline-offset: 2px; }
.welcome-card .wl-panel { display: none; }
#wl-s1:checked ~ .wl-p1, #wl-s2:checked ~ .wl-p2, #wl-s3:checked ~ .wl-p3 { display: block; }
#wl-s1:checked ~ .wl-tabs label[for="wl-s1"], #wl-s2:checked ~ .wl-tabs label[for="wl-s2"], #wl-s3:checked ~ .wl-tabs label[for="wl-s3"] { opacity: 1; }
.welcome-card .wl-kinds { grid-template-columns: repeat(3, 1fr); margin: .4rem 0 1rem; }
.welcome-card .wl-kind { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.4rem .8rem; }
.welcome-card .wl-kind svg { width: 2.6rem; height: 2.85rem; }
.welcome-card .wl-kind-name { font-size: 1.5rem; font-weight: 300; line-height: 1.1; margin-top: .3rem; }
.welcome-card .wl-kind-for { font-size: .95rem; opacity: .75; }
.welcome-card .wl-say { margin-top: .5rem; font-style: italic; font-size: .9rem; opacity: .8; }
.welcome-card .wl-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; }
.welcome-card .wl-next { cursor: pointer; }
.welcome-card .wl-ais { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.welcome-card .wl-ai summary, .welcome-card label.wl-ai { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.5rem 1rem; border-radius: 18px; text-align: center; }
.welcome-card .wl-ai summary::-webkit-details-marker { display: none; }
.welcome-card .wl-ai-name { font-size: 1.25rem; font-weight: 400; line-height: 1; }
.welcome-card .wl-ai-logo { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; margin-bottom: .15rem; }
.welcome-card .wl-ai-logo img, .welcome-card .wl-ai-logo svg { width: 2.5rem; height: 2.5rem; display: block; object-fit: contain; }
/* Official marks, used as provided: the OpenAI blossom sits in a generous canvas, so it is
   scaled to fill the slot; Meta's file is the full lockup (symbol and wordmark), so its slot is wider. */
.welcome-card .wl-ai[data-ai="chatgpt"] .wl-ai-logo img { transform: scale(1.45); }
.welcome-card .wl-ai[data-ai="muse"] .wl-ai-logo { width: auto; }
.welcome-card .wl-ai[data-ai="muse"] .wl-ai-logo img { width: 5.6rem; height: 2.5rem; }
.welcome-card .wl-ai-mono svg text { font-family: var(--slab); }
.welcome-card .wl-ais { align-items: stretch; }
.welcome-card label.wl-ai { height: 100%; box-sizing: border-box; justify-content: flex-start; }
.welcome-card .wl-ai .caps { flex: 1 0 auto; }
.welcome-card .wl-ai-state { margin-top: auto; padding-top: .3rem; }
.welcome-card .wl-ai-state { font-family: var(--slab); font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin-top: .3rem; }
.welcome-card .wl-how { margin: .9rem .4rem .4rem; padding-left: 1.2rem; line-height: 1.6; font-size: .95rem; }
.welcome-card .wl-how li { margin-bottom: .35rem; }
.welcome-card .wl-url { font-size: .82rem; overflow-wrap: anywhere; }
.welcome-card .wl-prompts { display: flex; flex-direction: column; gap: .6rem; }
.welcome-card .wl-direct { margin: .9rem 0 0; text-align: center; }
.welcome-card .wl-direct a { color: inherit; }
.welcome-compact .sbox-sub { margin-bottom: 1rem; }
.welcome-card .wl-prompt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 16px; }
.welcome-card .wl-q { margin: 0; font-style: italic; font-size: 1.05rem; line-height: 1.4; }
.welcome-card .wl-prompt .fine { margin: .3rem 0 0; }
.welcome-card .wl-quick-label { margin: 1.3rem 0 .5rem; }
.welcome-card .wl-quick .wl-prompt { padding: .7rem .4rem; border-radius: 0; background: none; }
.welcome-card .wl-quick .wl-q { font-size: .98rem; }
.welcome-card .wl-copy { flex: none; cursor: pointer; }
@media (max-width: 52rem) {
  .welcome-card { padding: 1.2rem 1rem 1rem; }
  .welcome-card .wl-eyebrow { flex-direction: column; gap: .4rem; }
  .welcome-card .wl-tab { padding: .5rem .6rem; letter-spacing: .1em; }
  .welcome-card .wl-kinds, .welcome-card .wl-ais { grid-template-columns: 1fr; }
  .welcome-card .wl-prompt { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
/* classic skin: quiet surfaces from its own palette */
body:not([data-skin="modern"]) .welcome-card .wl-ai summary, body:not([data-skin="modern"]) .welcome-card label.wl-ai, body:not([data-skin="modern"]) .welcome-card .wl-prompt:not(.wl-quick .wl-prompt) { background: rgba(0,0,0,.04); }
body:not([data-skin="modern"]) .welcome-card .wl-quick .wl-prompt { border-top: 1px solid rgba(0,0,0,.08); }
body:not([data-skin="modern"]) .welcome-card .wl-ai-state.is-on { color: #3d7a52; }
/* The card is a column in the modern skin and a padded block in classic, and
   wcell carries the welcome table's capitals: settle all three for Welcome. */
body[data-skin] article.welcome-card { display: block; padding: 1.7rem 1.9rem 1.4rem; }
body[data-skin] article.welcome-card .wl-tab { display: inline-block; width: auto; }
body[data-skin] .welcome-card .wl-kind, body[data-skin] .welcome-card .wl-kind * { text-transform: none; letter-spacing: normal; }
body[data-skin] .welcome-card .wl-kind-name { font-size: 1.55rem; font-weight: 300; }
body[data-skin] .welcome-card .wl-kind-for { font-style: italic; font-size: 1rem; font-weight: 400; }
body[data-skin] .welcome-card .wl-say { font-size: .95rem; font-weight: 400; }
@media (max-width: 52rem) { body[data-skin] article.welcome-card { padding: 1.2rem 1rem 1rem; } }
/* Tabs: full names on wide screens, one short word each on phones (one row). */
.welcome-card .wl-short { display: none; }
@media (max-width: 52rem) { .welcome-card .wl-long { display: none; } .welcome-card .wl-short { display: inline; }
  body[data-skin] article.welcome-card .wl-tab { margin-right: .15rem; } }
/* Welcome, step 1 refinements: centred tab strip, one icon weight, the
   Warrant row below the three cells, and a primary Next. */
body[data-skin] article.welcome-card .wl-tabs-anchor { display: none; }
body[data-skin] article.welcome-card { text-align: center; }
body[data-skin] article.welcome-card .wl-panel, body[data-skin] article.welcome-card .wl-eyebrow { text-align: left; }
body[data-skin] article.welcome-card .wl-tab { margin: 0 .15rem 1.2rem; }
.welcome-card .wl-warrant svg, .welcome-card .wl-kind svg { display: block; }
.welcome-card .wl-warrant { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: .2rem auto 0; padding: .8rem 1.4rem; max-width: 52ch; }
.welcome-card .wl-warrant svg { width: 2.4rem; height: 2.6rem; flex: none; }
.welcome-card .wl-warrant-name { font-size: 1.15rem; font-weight: 400; }
.welcome-card .wl-warrant-for { font-style: italic; font-size: .95rem; opacity: .8; }
.welcome-card .wl-next-primary { display: inline-block; cursor: pointer; }
@media (max-width: 52rem) { .welcome-card .wl-warrant { flex-wrap: wrap; text-align: center; } }

/* Welcome tabs live in the vis-tabs track (All / Public / Private). The track
   styles anchors, so its label equivalents are restated here. */
.welcome-card .wl-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto 1.2rem; max-width: 40rem; }
.welcome-card .wl-tabs .wl-tab, body[data-skin] article.welcome-card .wl-tab { display: flex; align-items: center; justify-content: center; margin: 0; opacity: 1; text-align: center; }
@media (max-width: 52rem) { .welcome-card .wl-tabs { max-width: none; } }
.welcome-card .wl-num { margin-right: .4em; }

/* ---- v2.58 UI fixes --------------------------------------------------------- */
/* Profile: the Follow button sits clear of the profile card above it. */
body[data-skin] .prail-follow { margin: 1rem 0 1.2rem; }
/* Home and profile, desktop: the sticky left rail scrolls without a visible bar. */
@media (min-width: 52.01rem) {
  body[data-skin] .cols > .rail { scrollbar-width: none; }
  body[data-skin] .cols > .rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
/* Recommended itineraries: always open; Keep this plan centred on its own row. */
.rec-explore.is-open { display: block; }
.rec-plan .rec-keep-row { display: flex; justify-content: center; margin: 1rem 0 .2rem; }
.rec-plan .rec-keep-row .keep-form { margin: 0; }
/* Welcome: an arced headline over the tabs; three separate tiles. */
.welcome-card .wl-headline { display: flex; justify-content: center; margin: .2rem 0 0; }
.welcome-card .wl-headline svg { max-width: min(100%, 28rem); height: auto; }
.welcome-card .wl-since { text-align: center; margin: .2rem 0 1rem; }
.welcome-card .wl-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin: .4rem 0 1rem; }
body:not([data-skin="modern"]) .welcome-card .wl-kind { background: rgba(0,0,0,.04); border-radius: 14px; }
@media (max-width: 52rem) { .welcome-card .wl-kinds { grid-template-columns: 1fr; } }
/* the arc's SVG reserves room for a second line it doesn't use here */
.welcome-card .wl-headline { margin-bottom: -1.1rem; } /* the capitalised arc's ends sit lower */
.welcome-card .wl-kind, .welcome-card .wl-kind .wl-say { text-align: center; }
.welcome-card .wl-tab, .welcome-card .wl-num { white-space: nowrap; }
@media (max-width: 52rem) { .welcome-card .wl-num { display: none; } }
/* Recommended plans: the primary action (Show more token) centred, its quiet
   reactions or note centred beneath. */
.rec-plan .rec-keep-row { display: flex; justify-content: center; margin: 1.1rem 0 .3rem; }
.rec-plan .rec-keep-row .keep-form { margin: 0; }
.rec-plan .rec-foot { display: flex; justify-content: center; align-items: center; gap: .7rem; margin: .5rem 0 0; }
.rec-plan .rec-foot form { margin: 0; display: inline; }
.rec-plan .rec-dot { opacity: .5; }
/* Travel mark cards: the photo now sits under the arched title; give it room above. */
.travelmark .mark-title + .mark-photo, .travelmark .mark-title ~ .mark-photo { margin: .6rem 0 1rem; }
/* Keep this plan / Open the itinerary: the travel mark button token (btn-note,
   as Directions and Check in), at a comparable width. */
.rec-plan .rec-keep-row .btn-note { display: inline-flex; justify-content: center; width: min(100%, 22rem); }
.rec-plan .rec-keep-row .keep-form { width: min(100%, 22rem); }
/* Admin activation report */
.act-table-wrap { overflow-x: auto; }
.act-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.act-table th, .act-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid rgba(127,127,127,.2); white-space: nowrap; }
.act-table th { font-weight: 600; opacity: .8; }

/* ---- v2.64 ------------------------------------------------------------------ */
/* Sign-in and create-account: a narrower card on wide screens */
.settings .auth-card { max-width: 26rem; margin-left: auto; margin-right: auto; }
/* Welcome tiles: the icon sits in a circular well with an inset shadow from the top */
.welcome-card .wl-ico { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: rgba(0,0,0,.05); box-shadow: inset 0 6px 10px -4px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.35); margin-bottom: .2rem; }
.welcome-card .wl-ico.wl-ico-sm { width: 3.2rem; height: 3.2rem; margin: 0; }
.welcome-card .wl-ico svg { width: 2.4rem; height: 2.6rem; display: block; }
.welcome-card .wl-ico-sm svg { width: 1.9rem; height: 2.1rem; }
.welcome-card .wl-warrant svg { width: auto; }
/* Create account: the arced welcome above the fields */
.auth-card .auth-arc { display: flex; justify-content: center; margin: .2rem 0 .5rem; }
.auth-card .auth-arc svg { width: 100%; max-width: 19rem; height: auto; }

/* ---- v2.65 activation ---------------------------------------------------- */
.auth-card .auth-terms { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; line-height: 1.4; margin: .2rem 0 .8rem; text-align: left; }
.auth-card .auth-terms input { margin-top: .2rem; flex: none; }
.welcome-card .wl-acts, .empty-first-act .wl-acts { display: inline-flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.wl-copied-hint { display: block; font-size: .85rem; font-style: italic; opacity: .8; margin-top: .3rem; }
.wl-copied-hint[hidden] { display: none; }
.welcome-card .wl-starter.is-lead .wl-q { font-size: 1.08em; }
.welcome-card .wl-starter.is-picked { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 12px; }
.welcome-card .wl-kind-for { font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; opacity: .7; }
.empty-first-act { text-align: center; max-width: 34rem; margin: 2rem auto; padding: 1.4rem 1.2rem; border-radius: 16px; background: rgba(0,0,0,.035); }
.empty-first-act .es-title { font-size: 1.35rem; margin: 0 0 1rem; }
.empty-first-act .es-act { margin: 1rem 0; }
.empty-first-act .es-starter { margin-top: 1rem; }
.empty-first-act .wl-q { font-style: italic; margin: .3rem 0 .5rem; }
/* the terms box: a real checkbox beside its sentence (the skin's full-width inputs must not apply) */
body[data-skin] .auth-card .auth-terms { display: flex; flex-direction: row; align-items: flex-start; gap: .6rem; text-transform: none; letter-spacing: normal; }
body[data-skin] .auth-card .auth-terms input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; width: 1.1rem; height: 1.1rem; min-width: 1.1rem; margin: .2rem 0 0; padding: 0; border: 0; background: none; box-shadow: none; flex: none; accent-color: currentColor; }
body[data-skin] .auth-card .auth-terms span { flex: 1; font-size: .92rem; line-height: 1.45; }
/* starter actions with their copied hint underneath */
.wl-acts-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.empty-first-act .wl-acts-wrap { align-items: center; }
.wl-acts-wrap .wl-copied-hint { text-align: right; max-width: 14rem; }
body[data-skin] .auth-card .auth-terms, body[data-skin] .auth-card .auth-terms span, body[data-skin] .auth-card .auth-terms a {
  text-transform: none !important; letter-spacing: normal !important; font-variant: normal !important; font-weight: 400; font-size: .95rem; }
body[data-skin] .auth-card .auth-terms a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- v2.65.2: token alignment ------------------------------------------- */
/* Welcome tiles: the term is the rail's nav label token, linked; smaller icons in the same wells */
.welcome-card .wl-term { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; margin: .1rem 0 .5rem; }
.welcome-card .wl-term:hover { text-decoration: underline; text-underline-offset: 3px; }
.welcome-card .wl-warrant .wl-term { margin: 0; }
.welcome-card .wl-ico svg { width: 1.9rem; height: 2.05rem; }
.welcome-card .wl-ico-sm svg { width: 1.45rem; height: 1.6rem; }
/* Account and sign-in forms: one label treatment */
.auth-card .slabel { display: block; text-align: left; margin: .2rem 0 .9rem; }
.auth-card .slabel input { margin-top: .4rem; }
body[data-skin] .auth-card .auth-terms, body[data-skin] .auth-card .auth-terms span, body[data-skin] .auth-card .auth-terms a { font-size: .78rem; line-height: 1.45; }
body[data-skin] .auth-card .auth-terms input[type="checkbox"] { width: .95rem; height: .95rem; min-width: .95rem; margin-top: .15rem; }
/* Get started: prompt cell | rule | actions stacked and centred, status beneath */
.welcome-card .wl-starter { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 0; }
.welcome-card .wl-starter > div:first-child { display: flex; flex-direction: column; justify-content: center; padding-right: 1.1rem; }
.welcome-card .wl-starter .wl-acts-wrap { border-left: 1px solid rgba(127,127,127,.28); padding-left: 1.1rem; min-width: 11rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .35rem; }
.welcome-card .wl-starter .wl-acts { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.welcome-card .wl-starter .wl-copied-hint { text-align: center; max-width: 11rem; font-size: .78rem; }
/* Empty first acts: watermark title, the button at its full size, actions stacked and centred */
.empty-first-act { max-width: 40rem; padding: 1.6rem 1.4rem 1.8rem; }
.empty-first-act .es-title.empty-line { margin: .2rem auto 1.2rem; }
.empty-first-act .es-act .btn3d { display: inline-block; min-width: 16rem; padding: 1.05rem 1.6rem; }
.empty-first-act .es-starter { margin-top: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.empty-first-act .es-starter .wl-acts-wrap { align-items: center; margin-top: .3rem; }
.empty-first-act .wl-acts { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.empty-first-act .wl-acts-wrap .wl-copied-hint { text-align: center; }
.empty-first-act .fine, .empty-first-act .wl-q { max-width: 30rem; }
@media (max-width: 52rem) { .welcome-card .wl-starter { grid-template-columns: 1fr; } .welcome-card .wl-starter .wl-acts-wrap { border-left: 0; border-top: 1px solid rgba(127,127,127,.28); padding: .7rem 0 0; margin-top: .7rem; } }
/* buttons among the starter actions take the same caps-link token as the links beside them */
.wl-acts button.link.caps, .wl-acts button.wl-pick { font-family: var(--slab); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
/* Welcome terms: the rail's nav label token, and nothing else wins over it */
body[data-skin] .welcome-card .wl-kind .wl-term, body[data-skin] .welcome-card .wl-warrant .wl-term {
  text-transform: uppercase; font-style: normal; font-family: var(--slab); font-size: .6rem; font-weight: 700; letter-spacing: .16em; }
.welcome-card .wl-warrant .wl-ico { flex: none; }

/* ---- v2.65.5 Connect your AI ------------------------------------------------ */
.welcome-card .wl-ais { grid-template-columns: repeat(3, 1fr); }
/* steps: the signed-out rail's numbered circles (ol.steps), left-aligned under each tile */
.welcome-card ol.steps.wl-how { margin: 1rem .2rem .4rem; text-align: left; }
.welcome-card ol.steps.wl-how li { align-items: flex-start; font-size: .95rem; line-height: 1.5; }
.welcome-card ol.steps.wl-how li > span { flex: none; margin-top: .1rem; }
.welcome-card ol.steps.wl-how li > div { flex: 1; min-width: 0; }
.welcome-card .wl-note { text-align: left; margin: .4rem .2rem 0; }
.welcome-card .wl-soon { display: block; text-align: left; margin: 1rem .2rem 0; }
/* the address on one line, scrolling within its box; Copy beside it in the caps-link token */
.welcome-card .wl-addr { display: flex; align-items: center; gap: .7rem; margin-top: .35rem; max-width: 100%; }
.welcome-card .wl-addr .wl-url { display: block; overflow-x: auto; white-space: nowrap; font-size: .8rem; padding: .25rem .5rem; border-radius: 6px; min-width: 0; }
.welcome-card .wl-addr button { flex: none; font-family: var(--slab); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
/* connected: an eyebrow above the name */
.welcome-card .wl-ai-eb { display: block; margin-bottom: .45rem; }
@media (max-width: 52rem) { .welcome-card .wl-ais { grid-template-columns: 1fr; } }
/* the rail's .steps styles every span in a step; only the number is a circle here */
.welcome-card ol.steps.wl-how li > div span { width: auto; height: auto; border-radius: 0; background: none; color: inherit; display: inline; font-size: inherit; font-weight: inherit; place-items: initial; }
.welcome-card ol.steps.wl-how li > div .wl-addr { display: flex; align-items: center; gap: .7rem; margin-top: .35rem; }
.welcome-card .wl-ais { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.welcome-card ol.steps.wl-how li > div .wl-addr { flex-wrap: wrap; gap: .4rem; }
.welcome-card ol.steps.wl-how li > div .wl-addr .wl-url { flex: 1 1 100%; white-space: nowrap; overflow-x: auto; }
@media (max-width: 52rem) { .welcome-card .wl-ais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .welcome-card .wl-ais { grid-template-columns: minmax(0, 1fr); } }
body[data-skin] .welcome-card ol.steps.wl-how .wl-addr .wl-url { font-size: .7rem; letter-spacing: -.01em; padding: .3rem .45rem; }
body[data-skin] .welcome-card ol.steps.wl-how .wl-addr .wl-url { white-space: normal; overflow-wrap: normal; word-break: keep-all; overflow-x: visible; font-size: .78rem; }

/* ---- v2.65.6: one instruction container beneath the tiles, pointing at the open one ---- */
.welcome-card .wl-ais-wrap { position: relative; }
.welcome-card .wl-ai { cursor: pointer; }
.welcome-card .wl-ai-panel { display: none; position: relative; margin: 1.1rem 0 .2rem; padding: 1.4rem 1.2rem 1.2rem; border-radius: 16px; background: rgba(0,0,0,.035); }
.welcome-card .wl-ai-panel::before { content: ""; position: absolute; top: -11px; left: calc((var(--wl-col) + .5) * 100% / 4); transform: translateX(-50%); border: 11px solid transparent; border-top: 0; border-bottom-color: rgba(0,0,0,.035); }
.welcome-card #wl-ai-chatgpt-0:checked ~ .wl-ai-panel[data-for="chatgpt"] { display: block; }
.welcome-card .wl-ai-toggle[id^="wl-ai-chatgpt-"]:checked ~ .wl-ai-panel[data-for="chatgpt"],
.welcome-card .wl-ai-toggle[id^="wl-ai-other-"]:checked ~ .wl-ai-panel[data-for="other"],
.welcome-card .wl-ai-toggle[id^="wl-ai-muse-"]:checked ~ .wl-ai-panel[data-for="muse"],
.welcome-card .wl-ai-toggle[id^="wl-ai-claude-"]:checked ~ .wl-ai-panel[data-for="claude"] { display: block; }
.welcome-card .wl-ai-panel-in { max-width: 34rem; margin: 0 auto; text-align: center; }
.welcome-card .wl-ai-panel-in ol.steps.wl-how { display: inline-block; text-align: left; margin: 0 auto .4rem; }
.welcome-card .wl-ai-panel-in .wl-note, .welcome-card .wl-ai-panel-in .wl-soon { text-align: center; margin: .6rem 0 0; }
.welcome-card .wl-ai-panel-in .wl-soon { margin: 0 0 .8rem; }
.welcome-card .wl-ai-panel-in .steps li > div { max-width: 28rem; }
@media (max-width: 52rem) { .welcome-card .wl-ai-panel::before { left: calc((var(--wl-col2) + .5) * 50%); } }
@media (max-width: 30rem) { .welcome-card .wl-ai-panel::before { left: 50%; } }
body[data-skin] .welcome-card input.wl-ai-toggle { display: none !important; }
.welcome-card label.wl-ai { margin: 0; font-weight: inherit; text-transform: none; letter-spacing: normal; }
.welcome-card .wl-ai-toggle:checked + .wl-ai-toggle, .welcome-card .wl-ai-toggle { position: absolute; }
.welcome-card .wl-ai-panel::before { top: -14px; border-width: 14px; border-top-width: 0; }
/* the open tile: lifted like an active profile chip (brighter fill, light edge, faint halo) */
.welcome-card .wl-ai-toggle[id^="wl-ai-chatgpt-"]:checked ~ .wl-ais label[data-ai="chatgpt"],
.welcome-card .wl-ai-toggle[id^="wl-ai-other-"]:checked ~ .wl-ais label[data-ai="other"],
.welcome-card .wl-ai-toggle[id^="wl-ai-claude-"]:checked ~ .wl-ais label[data-ai="claude"] { background: rgba(0,0,0,.09); box-shadow: 0 0 0 4px rgba(127,127,127,.18); }
/* Orientation: the outcome headings at the step headline's size */
body[data-skin] .welcome-card .wl-kind .wl-kind-name, body[data-skin] .welcome-card .wl-warrant .wl-warrant-name { font-size: 21.25px; font-size: 1.25rem; line-height: 1.3; }

/* ---- v2.66 Admin: the rail key is a desktop affordance; phones reach Admin from Settings ---- */
@media (max-width: 52rem) { body:not([data-skin="modern"]) .iconrail .iconrail-admin { display: none; } } /* classic: no room on its bar; modern scrolls */
/* the Admin key: exactly the gear's size and proportions */
.iconrail a.iconrail-admin svg { width: 17px !important; height: 17px !important; max-width: none; flex: none; }
/* Admin recent accounts: the name under the handle, quiet, so the three columns fit */
#recent .act-table td.acct-who { white-space: normal; }
#recent .act-table .acct-name { display: block; font-size: .8rem; opacity: .65; text-transform: none; letter-spacing: normal; margin-top: .1rem; }
#recent .act-table th, #recent .act-table td { padding-left: .5rem; padding-right: .5rem; }
/* v2.66.7 Admin: columns may shrink to the screen, so wide tables scroll inside their container */
.admin-grid > .settings-col, .admin-grid .settings-table, .admin-grid .wcell { min-width: 0; max-width: 100%; }
.admin-grid #recent .act-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-grid #recent .act-table { min-width: 24rem; }
/* v2.66.9 Activation dashboard and member activity: cells shrink to the screen; tables scroll inside */
.admin-wide .wtable, .admin-wide .wcell { min-width: 0; max-width: 100%; }
.admin-wide .act-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-wide .act-table { min-width: 34rem; }
/* member activity: the profile's activity lines, one column, left-aligned */
.admin-wide .admin-activity { display: block; text-align: left; }
.admin-wide .admin-activity .act-line { margin: 0 0 .5rem; border-radius: 12px; }
.admin-wide .admin-activity .act-date { flex: 0 0 11.5rem; }
/* the description is the profile token's plain text, not the panel's caps label */
.admin-wide .admin-activity .act-line > span:last-child { text-transform: none; letter-spacing: normal; font-size: .98rem; font-weight: 400; }
@media (max-width: 52rem) { .admin-wide .admin-activity .act-line { flex-direction: column; gap: .15rem; } .admin-wide .admin-activity .act-date { width: auto; } }
@media (max-width: 52rem) { .admin-wide .admin-activity .act-date { flex: none; width: auto; } }

/* v2.68 admin: the activation model's segment headings and limitations */
.act-table .act-seg-head th { padding-top: 1rem; text-align: left; font-style: italic; }
.act-limits { margin: .4rem 0 0; padding-left: 1.2rem; text-align: left; line-height: 1.55; }
.act-limits li { margin: 0 0 .35rem; }

/* Shared itineraries (v2.70): members, invitations, Removed, keep a place */
.itin-share { margin: .5rem 0 0; font-size: .82rem; opacity: .85; }
.itin-shared-h { margin: 2rem 0 .75rem; }
.collab-box { max-width: 41.5rem; padding: 1.4rem 1.6rem; }
.collab-h { margin: 1.4rem 0 .5rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.collab-list { list-style: none; margin: 0; padding: 0; }
.collab-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(127,127,127,.18); }
.collab-acts { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.collab-acts form, .collab-row form { margin: 0; }
.collab-link { margin: 0 0 1rem; }
.collab-link input { width: 100%; }
.collab-link-field { font-size: .9rem; text-transform: none; letter-spacing: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.collab-link-acts { display: flex; gap: .6rem; margin-top: .6rem; }
.collab-link-acts .btn3d { flex: 1 1 0; }
.collab-disclose { margin: .8rem 0; padding: .7rem .9rem; border-radius: 10px; background: rgba(127,127,127,.08); font-size: .86rem; }
.collab-disclose.is-asked { outline: 2px solid rgba(200,120,40,.55); }
.stop-keep { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin: .35rem 0 0; }
.collab-confirm { display: flex !important; align-items: center; gap: .55rem; margin: .4rem 0 0; font-size: .86rem; cursor: pointer; }
.collab-confirm input { width: auto !important; margin: 0; flex: none; }

/* Invitation (v2.70): the plan's own card, offered */
.invite-page { display: flex; justify-content: center; padding-top: 2rem; }
.invite-card { max-width: 34rem; width: 100%; margin: 0; display: block; }
.invite-hero { padding-top: 1.6rem; }
.invite-avatar { display: inline-block; margin: 0 auto .55rem; }
.invite-avatar .avatar { width: 3.6rem; height: 3.6rem; font-size: 1.5rem; margin: 0 auto; }
.invite-hero .who a { color: inherit; text-decoration: none; font-weight: 600; }
.invite-hero .ens-title { margin-top: .15rem; }
.invite-acts { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .2rem 1.5rem 1.4rem; }
.invite-acts form { margin: 0; width: 100%; display: flex; justify-content: center; }
.invite-go { display: inline-block; min-width: 16rem; text-align: center; padding: .85rem 1.6rem; text-decoration: none; }
.invite-join { text-decoration: none; }
.invite-err { margin: 0 1.5rem .8rem; }
.invite-preview { padding: 0 .25rem; opacity: .92; }
.invite-preview.has-more { max-height: 24rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.invite-preview .itin-group { margin-bottom: 1rem; }
.invite-stop { padding-bottom: .85rem; }
.invite-stop .stop-from { display: block; font-size: .8rem; opacity: .7; margin-top: .15rem; }
.invite-page .itp-more { margin: .2rem 0 1rem; }
.invite-empty { text-align: center; font-style: italic; opacity: .6; margin: 0 1.5rem 1.4rem; }
.invite-facts { display: flex; flex-direction: column; gap: .5rem; margin: .6rem auto 0; padding: 1rem 1.25rem 1.2rem; max-width: 28rem; font-size: .9rem; line-height: 1.45; text-align: center; border-top: 1px solid rgba(127,127,127,.18); }
.invite-facts li { padding: 0; }
.invite-facts li::before { content: none; }
.collab-lead { margin: 0 0 .8rem; }
.itin-mine { text-align: center; font-style: italic; padding: .4rem .5rem .2rem; }

/* Share on the plan page (v2.71) */
.itin-share-row { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: .4rem 0 .2rem; }
.itin-share-row .itin-share { margin: 0; }
.itin-share-menu { margin: 0; width: 100%; max-width: 30rem; }
/* The summary is the glass button token (.btn3d); undo the stop-menu's
   quiet-summary defaults so the token reads as it does elsewhere. */
.itin-share-menu > summary.itin-share-btn { display: inline-block; text-align: center; opacity: 1; min-width: 12rem; padding: .95rem 1.4rem; font-size: .72rem; letter-spacing: .2em; list-style: none; }
.itin-share-menu > summary.itin-share-btn::-webkit-details-marker { display: none; }
.itin-share-menu[open] > summary.itin-share-btn { opacity: 1; }
body[data-skin="modern"] .itin-share-menu > summary.itin-share-btn { color: var(--m-ink); }
.itin-share-sheet { display: grid; gap: .6rem; text-align: left; }
.share-opt { display: block; padding: .8rem .95rem; border-radius: 14px; text-decoration: none; color: inherit; background: rgba(127,127,127,.08); border: 0; width: 100%; font: inherit; cursor: pointer; }
.share-opt:hover { background: rgba(127,127,127,.14); text-decoration: none; }
.share-opt-h { display: block; font-weight: 600; font-size: .98rem; }
.share-opt-d { display: block; font-size: .84rem; line-height: 1.4; opacity: .78; margin: .15rem 0 .3rem; }
.share-opt-go { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.share-opt-btn { text-align: left; }
.itin-head .share-opt, .itin-head .share-opt:hover, .itin-head .share-opt-h, .itin-head .share-opt-d { color: inherit; }
.itin-head .share-opt-go { color: inherit; opacity: .85; }
body[data-skin="modern"] .itin-head .share-opt { color: var(--m-ink); }
body[data-skin="modern"] .itin-head .share-opt-d { color: var(--m-ink-2); opacity: 1; }
body[data-skin="modern"] .itin-head .share-opt-go { color: var(--m-accent); opacity: 1; }
body[data-skin="modern"] .itin-share-sheet { background: var(--m-glass); box-shadow: inset 0 1px 0 var(--m-line); padding: .9rem 1rem; }