/* ==========================================================
   TRAVEL — trips read out of his own confirmations.
   ==========================================================

   ONE THING ON THIS PAGE IS ALLOWED TO SHOUT and it is the confirmation
   number, because it is the only thing here that gets read out loud — at a
   desk, on a phone, in a queue, usually while somebody waits. It is large,
   it is monospace so a 0 and an O are different characters, and the whole
   of it selects on a tap.

   The other thing with any colour is the check-this block, and it is amber
   rather than red for the reason the kitchen's read-back is: a field Lucid
   is unsure of is very often correct. It is a question, not a fault.

   A time with no zone is NOT decorated at all beyond the words. Making it
   look like an error would suggest something went wrong, and nothing did —
   the email simply did not say which clock it meant. */
/* TRAVEL IS THE ONE CARD LIST ROW 2146 LEFT IN A SINGLE COLUMN, and that is
   a decision rather than an oversight.
   ------------------------------------------------------------------------
   Every other stack of cards in Lucid became a grid on 14 September. A trip
   did not, because a .tv-trip is not a card — it is a disclosure that opens
   into the trip's whole itinerary, day by day, in date order, which is the
   shape item 263 settled on and the reason Travel reads as a timeline rather
   than a pile of confirmations. Three of those side by side at 420px would
   be three timelines in three narrow columns, and the ones ahead of you open
   by DEFAULT — so the grid would spend most of its life holding one open
   trip and two slivers. A sequence that unfolds is a sequence.
   If he wants them in a grid anyway, the change is one selector: add #tvBody
   beside #rhBody on the card-list rule at the foot of this file. */
.tv-trip{ border:1px solid var(--glass-border); border-radius:var(--radius-card); background:var(--glass-bg);
  margin-bottom:var(--space-3); overflow:hidden; }
.tv-trip.is-off{ opacity:.6; }
.tv-trip-head{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); cursor:pointer; }
.tv-trip-head:hover{ background:rgba(120,120,140,.05); }
.tv-trip-name{ font-size:var(--type-lead); font-weight:650; color:var(--text); }
.tv-trip-when{ font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-hair); }
.tv-chevron{ flex:none; color:var(--text-faint); font-size:var(--type-lead); }
.tv-flag{ flex:none; font-size:var(--type-label); font-weight:600; color:var(--amber, #C08A2E);
  border:1px solid var(--amber, #C08A2E); border-radius:var(--radius-pill); padding:var(--space-hair) var(--space-3); }
.tv-trip-body{ padding:0 var(--space-4) var(--space-4); }
.tv-trip-acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.tv-trip-acts .btn{ font-size:var(--type-body); padding:var(--space-2) var(--space-3); }
.tv-claim{ font-size:var(--type-body); color:var(--text-dim); border:1px solid var(--glass-border);
  border-radius:var(--radius-card); padding:var(--space-3); margin-bottom:var(--space-3); display:flex; gap:var(--space-3);
  align-items:center; flex-wrap:wrap; }
.tv-claim .btn{ font-size:var(--type-body); padding:var(--space-1) var(--space-3); }

.tv-seg{ border-top:1px solid var(--glass-border); padding:var(--space-3) 0 var(--space-2); }
.tv-seg:first-child{ border-top:none; }
.tv-seg-main{ flex:1; min-width:200px; }
.tv-seg-kind{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text-faint); }
.tv-seg-head{ font-size:var(--type-lead); font-weight:600; color:var(--text); margin-top:var(--space-hair); }
.tv-seg-when{ font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-1); }
/* Not a warning colour and not an icon. "I do not know which clock" is a
   statement of fact about the email, and dressing it as a fault would say
   something untrue about it. */
.tv-unzoned{ color:var(--text-faint); }
.tv-seg-where{ font-size:var(--type-body); color:var(--text-faint); margin-top:var(--space-1); }
.tv-seg-acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
.tv-seg-acts .btn{ font-size:var(--type-body); padding:var(--space-1) var(--space-3); }

/* THE NUMBER HE WILL BE ASKED FOR. */
.tv-conf{ flex:none; text-align:right; cursor:pointer; border:1px solid var(--glass-border);
  border-radius:var(--radius-card); padding:var(--space-2) var(--space-3); background:rgba(120,120,140,.07); }
.tv-conf:hover{ border-color:var(--glass-border-hi); }
.tv-conf-label{ display:block; font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text-faint); }
.tv-conf-value{ display:block; font-family:var(--font-mono);
  font-size:var(--type-title); font-weight:600; letter-spacing:.06em; color:var(--text);
  user-select:all; margin-top:var(--space-hair); }
.tv-conf-field{ font-family:var(--font-mono); letter-spacing:.05em; }

/* CHECK THIS — the quoted line is the affordance, so it is the part with the
   type weight. He is agreeing or disagreeing with words out of his own mail,
   which takes a second; auditing a form field does not. */
.tv-check{ border:1px solid var(--amber, #C08A2E); border-radius:var(--radius-card);
  padding:var(--space-3); margin-top:var(--space-3); }
.tv-check-head{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--amber, #C08A2E); margin-bottom:var(--space-2); }
.tv-check-row{ padding:var(--space-1) 0; }
.tv-check-what{ font-size:var(--type-body); color:var(--text-dim); }
.tv-check-what b{ color:var(--text); font-weight:600; }
.tv-check-quote{ font-size:var(--type-body); color:var(--text); margin-top:var(--space-hair); padding-left:var(--space-3);
  border-left:2px solid var(--glass-border-hi); line-height:1.5; }
.tv-check-foot{ font-size:var(--type-body); color:var(--text-faint); margin-top:var(--space-2); line-height:1.5; }
.tv-check-acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
.tv-check-acts .btn{ font-size:var(--type-body); padding:var(--space-2) var(--space-3); }

/* CHANGED — TripIt's own trick: a booking already on the page, with a fact
   about it that is now different. Blue rather than amber on purpose: "check
   this" is Lucid unsure of its own reading; this is Lucid SURE, and telling
   him something moved. Different question, different colour. */
.tv-changed{ border:1px solid var(--blue, #3D6BFF); border-radius:var(--radius-card);
  padding:var(--space-3); margin-top:var(--space-3); background:color-mix(in srgb, var(--blue, #3D6BFF) 6%, transparent); }
.tv-changed-head{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--blue, #3D6BFF); margin-bottom:var(--space-2); }
.tv-changed-row{ font-size:var(--type-body); color:var(--text-dim); padding:var(--space-1) 0; }
.tv-changed-row b{ color:var(--text); font-weight:600; }
.tv-changed-was{ text-decoration:line-through; opacity:.7; }
.tv-changed-now{ color:var(--text); font-weight:600; }
.tv-changed-acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
.tv-changed-acts .btn{ font-size:var(--type-body); padding:var(--space-2) var(--space-3); }

/* THE DAY, AND THE TIME BETWEEN TWO THINGS.

   A trip is one timeline, so the days are the only structure on it and they
   are drawn as a rule with a date sitting on it rather than as another card:
   a box inside a box would make a day look like a thing you can open, and it
   is not. Day counting sits on the right, dimmed, because "Day 3 of 6" is
   orientation rather than information.

   A GAP IS INDENTED AND SMALL, on purpose. It belongs between two bookings
   rather than beside them, and it is a remark rather than a warning — a
   tight connection gets the amber that "check this" gets, and a comfortable
   one is never drawn at all. Nothing on this page is red: none of these is
   a fault. */
.tv-day{ display:flex; align-items:baseline; gap:var(--space-3); margin:var(--space-4) 0 var(--space-hair);
  padding-top:var(--space-3); border-top:1px solid var(--glass-border); }
.tv-day:first-child{ border-top:none; padding-top:var(--space-hair); margin-top:var(--space-1); }
.tv-day-date{ font-size:var(--type-body); font-weight:700; letter-spacing:.04em; color:var(--text); }
.tv-day-n{ font-size:var(--type-label); color:var(--text-faint); }
.tv-gap{ font-size:var(--type-body); color:var(--text-dim); line-height:1.5;
  margin:var(--space-hair) 0 var(--space-hair) var(--space-3); padding-left:var(--space-3); border-left:2px solid var(--glass-border); }
.tv-gap.is-tight{ color:var(--amber, #C08A2E); border-left-color:var(--amber, #C08A2E); }
.tv-gap.is-unknown{ color:var(--text-faint); }

/* WHERE TO BE NEXT. The one card on this screen that is read at a glance
   rather than studied, so it is the one place a time is allowed to be big.
   It carries the accent edge and nothing else does. */
.tv-next{ border:1px solid var(--glass-border); border-left:3px solid var(--accent);
  border-radius:var(--radius-card); background:var(--glass-bg); padding:var(--space-4); margin-bottom:var(--space-4); }
.tv-next-lead{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text-faint); }
.tv-next-what{ font-size:var(--type-lead); font-weight:650; color:var(--text); margin-top:var(--space-1); }
.tv-next-when{ font-size:var(--type-lead); color:var(--text-dim); margin-top:var(--space-1); }
.tv-next-in{ color:var(--accent); font-weight:600; margin-left:var(--space-2); }
.tv-next-where{ font-size:var(--type-body); color:var(--text-faint); margin-top:var(--space-1); }
.tv-next .tv-conf{ display:inline-block; margin-top:var(--space-3); text-align:left; }
.tv-next-caveat{ font-size:var(--type-body); color:var(--text-faint); margin-top:var(--space-2); line-height:1.5; }

/* THE SAVED COPY. Stated rather than styled as an error, because nothing has
   gone wrong with the trip — only with the connection — and the copy is the
   feature, not the failure. */
.tv-saved{ border:1px solid var(--glass-border); border-radius:var(--radius-card);
  background:var(--glass-bg); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3);
  font-size:var(--type-body); line-height:1.55; color:var(--text-dim); }
.tv-saved b{ color:var(--text); }
.tv-saved .btn{ font-size:var(--type-body); padding:var(--space-1) var(--space-3); margin-left:var(--space-2); }
/* Every control inside a saved copy, gone. See the note above the class in
   app.js: a button that cannot reach a server is not a button. */
.tv-offline-copy .tv-seg-acts,
.tv-offline-copy .tv-trip-acts,
.tv-offline-copy .tv-check-acts,
.tv-offline-copy .tv-changed-acts,
.tv-offline-copy .tv-claim,
/* On a saved copy the map is not drawn and the people are not fetched, so the
   block that would have held them is taken off rather than left as a frame
   around nothing. */
.tv-offline-copy .tv-who,
.tv-offline-copy .tv-claim-chip{ display:none; }
/* AND THE TWO IN THE HEADER HAVE TO LOOK DISABLED. There is no general
   .btn:disabled rule in this stylesheet — a button that carries the attribute
   and none of the appearance is exactly the thing this project forbids, so
   these two say it. Scoped by id rather than added to .btn, because every
   other disabled button in the app already has its own answer and changing
   the shared class would restyle all of them. */
#tvScanBtn:disabled, #tvNewBtn:disabled{ opacity:.4; cursor:default; }
#tvScanBtn:disabled:hover, #tvNewBtn:disabled:hover{ transform:none; }

/* BOOKING. Quiet, at the bottom, below the trips — it is a thing to read
   once and then a single button. The folded explanation borrows the same
   shape the body page's how-to uses, for the same reason: nine paragraphs
   nobody has asked for should not be between him and anything. */
.tv-booking{ border:1px solid var(--glass-border); border-radius:var(--radius-card);
  background:var(--glass-bg); padding:var(--space-4); margin-top:var(--space-5);
  max-width:var(--prose-measure); }
.tv-booking-head{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text-faint); margin-bottom:var(--space-2); cursor:pointer; }
.tv-booking-p{ font-size:var(--type-body); line-height:1.6; color:var(--text-dim); margin:0 0 var(--space-3); }
.tv-booking-p b{ color:var(--text); font-weight:600; }
.tv-booking-url{ font-family:var(--font-mono); font-size:var(--type-body); color:var(--text); }
.tv-booking-why{ margin-top:var(--space-3); border-top:1px solid var(--glass-border); padding-top:var(--space-3); }
.tv-booking-why > summary{ cursor:pointer; font-size:var(--type-body); font-weight:600;
  color:var(--text-dim); list-style:none; display:flex; align-items:center; gap:var(--space-2); }
.tv-booking-why > summary::-webkit-details-marker{ display:none; }
.tv-booking-why > summary::before{ content:'\25B8'; font-size:var(--type-label); color:var(--text-faint);
  transition:transform var(--dur-fast) var(--ease-out); display:inline-block; }
.tv-booking-why[open] > summary::before{ transform:rotate(90deg); }
.tv-booking-why > summary:hover{ color:var(--text); }
.tv-booking-why .tv-booking-p{ margin-top:var(--space-3); }
/* A block rather than a flex row: what a link WILL fill in and what it will
   not are two remarks about that one link, and under flex-wrap they each took
   a line of their own and stopped reading as belonging to it. */
.tv-link{ display:block; padding:var(--space-2) 0; line-height:1.6; }
.tv-link a{ font-size:var(--type-body); font-weight:600; color:var(--accent); text-decoration:none; }
.tv-link a:hover{ text-decoration:underline; }
.tv-link-note{ font-size:var(--type-body); color:var(--text-dim); margin-left:var(--space-2); }

/* ==========================================================
   WHO IS THERE, THE MAP, AND THE DAY YOU LAND
   ==========================================================

   THE PAGE GOT SMALLER, SO NOTHING IN HERE IS ALLOWED TO BE LOUD. The travel
   screen came down from seventeen controls and four hundred words to a handful
   and a couple of hundred, and the two new surfaces are drawn under that rule:
   the map has no controls at all, and a person is one tap rather than two
   buttons.

   A BOOKING'S ROW IS THE CONTROL NOW, so it gets the hover and the focus ring
   a button would get and keeps the shape it always had. The confirmation number
   stops being pressable and stops looking pressable in the same rule — a thing
   that looks like a button and is not is the exact fault this project refuses.

   THE MAP TAKES LUCID'S OWN COLOURS. It is drawn from the same shape file as
   the asset map in docs/, and that map is navy and orange because it belongs to
   another project. Land is a wash of the page's own text colour, the water is
   the card it sits in, and the only accented thing is the place he is going.

   THE DAY CARD IS THE ONE PLACE A TIME MAY BE BIG, which was already true of
   the where-to-be-next card it replaces — same container, same accent edge,
   more of it, because on the day itself the whole screen is one question. */

/* --- a booking's row is the tap ----------------------------------------- */
.tv-seg-row{ display:flex; gap:var(--space-4); align-items:flex-start; flex-wrap:wrap;
  border-radius:var(--radius-control); padding:var(--space-1) var(--space-2);
  margin:calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
  transition:background var(--dur-fast) var(--ease-out); cursor:pointer; }
.tv-seg-row:hover{ background:var(--wash-soft); }
.tv-seg-row:focus-visible{ outline:var(--ring-width) solid var(--accent); outline-offset:var(--ring-gap); }
.tv-seg.is-open > .tv-seg-row{ background:var(--wash-soft); }
/* No longer a button, and no longer dressed as one. */
.tv-seg .tv-conf{ cursor:default; }
.tv-seg .tv-conf:hover{ border-color:var(--glass-border); }

/* --- the claim, down from a banner to three words ---------------------- */
.tv-claim-chip{ display:inline-block; font-size:var(--type-label); font-weight:600;
  color:var(--text-faint); border:1px solid var(--glass-border); border-radius:var(--radius-pill);
  padding:0 var(--space-2); margin-left:var(--space-2); cursor:pointer; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.tv-claim-chip:hover{ color:var(--text); border-color:var(--glass-border-hi); }
.tv-claim-chip:focus-visible{ outline:var(--ring-width) solid var(--accent); outline-offset:var(--ring-gap); }
/* The trip's own actions, folded. Quiet because it is used once a trip. */
.btn.tv-quiet-act{ color:var(--text-faint); }
.btn.tv-quiet-act:hover{ color:var(--text); }

/* --- who is there ----------------------------------------------------- */
.tv-who{ padding-top:var(--space-2); }
.tv-who-lead{ font-size:var(--type-lead); font-weight:600; color:var(--text);
  margin:0 0 var(--space-3); }
.tv-who-lead.is-quiet{ font-size:var(--type-body); font-weight:400; color:var(--text-dim); line-height:1.55; }
.tv-prow{ display:flex; gap:var(--space-3); align-items:flex-start;
  padding:var(--space-2); margin:0 calc(-1 * var(--space-2));
  border-top:1px solid var(--glass-border); border-radius:var(--radius-control);
  cursor:pointer; transition:background var(--dur-fast) var(--ease-out); }
.tv-prow:hover{ background:var(--wash-soft); }
.tv-prow:focus-visible{ outline:var(--ring-width) solid var(--accent); outline-offset:var(--ring-gap); }
.tv-p-av{ flex:none; width:var(--space-8); height:var(--space-8); border-radius:var(--radius-round);
  display:grid; place-items:center; font-size:var(--type-label); font-weight:700;
  background:var(--wash-soft); color:var(--text-dim); }
.tv-p-av .ci-glyph{ width:52%; height:52%; display:block; flex:none; }
.tv-p-main{ flex:1; min-width:0; }
.tv-p-name{ display:block; font-size:var(--type-body); font-weight:650; color:var(--text); }
.tv-p-tag{ font-size:var(--type-label); font-weight:600; border-radius:var(--radius-pill);
  padding:0 var(--space-2); border:1px solid var(--glass-border); color:var(--text-faint);
  white-space:nowrap; }
/* Four kinds of reason, four weights of attention, and only the first two are
   coloured at all. A long silence is not a fault and proximity is not news. */
.tv-p-tag.is-owe{ color:var(--orange); border-color:var(--orange); }
.tv-p-tag.is-open{ color:var(--violet); border-color:var(--violet); }
.tv-p-line{ display:block; font-size:var(--type-body); color:var(--text-dim);
  margin-top:var(--space-hair); line-height:1.5; }
/* HIS OWN SENTENCE, QUOTED. Same shape as the check-this quote, for the same
   reason: everything indented like this on this screen is somebody's words
   rather than Lucid's. */
.tv-p-quote{ display:block; font-size:var(--type-body); color:var(--text);
  margin-top:var(--space-1); padding-left:var(--space-3);
  border-left:2px solid var(--glass-border); line-height:1.5; }
.tv-who-foot{ font-size:var(--type-body); color:var(--text-faint);
  margin:var(--space-2) 0 0; line-height:1.5; }
.tv-who-foot b{ color:var(--text-dim); font-weight:600; }
.tv-who-free{ font-size:var(--type-body); color:var(--teal);
  margin:var(--space-3) 0 0; font-weight:600; }

/* --- the map ---------------------------------------------------------- */
.tv-map{ margin:0 0 var(--space-3); border:1px solid var(--glass-border);
  border-radius:var(--radius-control); background:rgba(0,0,0,.14); overflow:hidden; }
/* A FIXED HEIGHT, AND IT IS NOT A STYLE CHOICE. The outline is 1015 units wide
   and 594 tall, so at a desktop width "height:auto" made a map seven hundred
   pixels deep that pushed every person on the trip below the fold — the exact
   fault the whole page was just cut down to fix. The svg keeps its shape and
   centres inside the box; the room either side of it is the price of the
   people staying on screen. */
.lm-svg{ display:block; width:100%; height:270px; touch-action:none; cursor:grab; }
@media (max-width: 560px){ .lm-svg{ height:190px; } }
.lm-svg.is-dragging{ cursor:grabbing; }
/* The two things that move. `transform-box: view-box` makes a CSS px here mean
   a viewBox unit, and `transform-origin: 0 0` puts the origin at the map's
   corner rather than each element's own middle — without both, a CSS transform
   on an svg group is not the same movement as the attribute it replaced. */
.lm-land, .lm-pin{ transform-box:view-box; transform-origin:0 0; will-change:transform; }
.lm-land .lm-state{ fill:color-mix(in srgb, var(--text) 9%, transparent);
  stroke:color-mix(in srgb, var(--text) 22%, transparent); stroke-width:.7;
  vector-effect:non-scaling-stroke; }
/* Somewhere else on the trip: drawn, named, and quieter than the place he is
   actually going to. */
.lm-pin .lm-dot{ fill:var(--text-faint); }
.lm-pin.is-stop .lm-dot{ fill:var(--text-dim); }
.lm-pin.is-stop .lm-label{ fill:var(--text-dim); }
.lm-pin.is-here .lm-dot{ fill:var(--accent);
  stroke:color-mix(in srgb, var(--accent) 40%, transparent); stroke-width:5;
  vector-effect:non-scaling-stroke; }
/* NO FONT SIZE IN HERE, ON PURPOSE. A label on this map is measured in viewBox
   units — the svg is a thousand units wide and scales to whatever the card is —
   so a token off the type ramp would mean nothing and a pixel value would be a
   lie. The size is an attribute on the <text> element in lucid-map.js, beside
   its x and y, which is where the map's other geometry lives. */
.lm-label{ fill:var(--text); font-weight:var(--weight-strong);
  font-family:inherit; paint-order:stroke;
  stroke:var(--bg-base, #050710); stroke-width:4; stroke-linejoin:round; }
/* THE SENTENCE INSTEAD OF THE MAP. This is the rule item 211 is about: a map
   that could not load its shapes has to look like a statement, not like a map
   with nothing on it, so the failed box has no aspect ratio and no frame of
   its own — it is a line of text where a picture was going to be. */
.lm-nope{ font-size:var(--type-body); color:var(--text-faint); line-height:1.55;
  margin:0; padding:var(--space-3); }
.tv-map.lm-failed{ background:none; border-style:dashed; }

/* --- the day you land ------------------------------------------------- */
.tv-daycard{ padding:var(--space-4); }
.tv-dc-nav{ display:flex; align-items:center; gap:var(--space-3);
  padding-bottom:var(--space-3); border-bottom:1px solid var(--glass-border);
  margin-bottom:var(--space-4); }
.tv-dc-nav .btn{ flex:none; font-size:var(--type-lead); line-height:1;
  padding:var(--space-1) var(--space-3); }
.tv-dc-nav .btn:disabled{ opacity:.35; cursor:default; }
.tv-dc-nav .btn:disabled:hover{ transform:none; }
.tv-dc-when{ flex:1; min-width:0; }
.tv-dc-when b{ display:block; font-size:var(--type-title); font-weight:600; color:var(--text); }
.tv-dc-when .page-sub{ font-size:var(--type-body); margin:0; }
.tv-dc-lead{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--accent); }
.tv-dc-what{ font-size:var(--type-page); font-weight:650; color:var(--text);
  line-height:1.15; margin-top:var(--space-1); }
.tv-dc-route{ display:block; font-size:var(--type-title); font-weight:600; color:var(--text-dim);
  margin-top:var(--space-hair); }
.tv-dc-when-line{ font-size:var(--type-lead); color:var(--text); margin-top:var(--space-2); }
/* READABLE ACROSS A DESK. The number is the only thing on this card somebody
   else has to read, usually upside down, so it is the largest static size the
   scale has. */
.tv-next .tv-conf.tv-dc-conf{ display:block; margin-top:var(--space-4); text-align:left;
  cursor:pointer; padding:var(--space-3) var(--space-4); }
.tv-dc-conf:focus-visible{ outline:var(--ring-width) solid var(--accent); outline-offset:var(--ring-gap); }
.tv-dc-conf .tv-conf-value{ font-size:var(--type-display); letter-spacing:.08em; }
@media (max-width: 560px){
  .tv-dc-what{ font-size:var(--type-title); }
  .tv-dc-route{ font-size:var(--type-lead); }
  .tv-dc-conf .tv-conf-value{ font-size:var(--type-figure); }
  .tv-prow{ gap:var(--space-2); }
}

/* --- the booking essay, folded ---------------------------------------- */
.tv-booking-fold{ font-size:var(--type-body); font-weight:600; color:var(--text-faint);
  margin-top:var(--space-5); padding:var(--space-3) 0;
  border-top:1px solid var(--glass-border); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out); }
.tv-booking-fold:hover{ color:var(--text-dim); }
.tv-booking-fold:focus-visible{ outline:var(--ring-width) solid var(--accent); outline-offset:var(--ring-gap); }
.tv-booking .tv-booking-head:focus-visible{ outline:var(--ring-width) solid var(--accent); outline-offset:var(--ring-gap); }