/* Anno XL — deck.css
   VII · Sunset Deck. Loaded alongside rooms.css; everything is namespaced
   .dk- or scoped to body.deck-room so no other room can be touched by it.

   The room's own background protocol is untouched: .room-bg stays full-bleed
   at --screen-h and .room-panel keeps its 16dvh top padding, exactly like
   every other room. The only change is WHAT is in the background — the plate
   now carries the crowd and the furniture cut-outs.                        */

/* The Ken Burns move goes on the STAGE, not the plate, so the photograph and
   the people standing in it drift as one. Same keyframes and timing as every
   other room, so it reads identically. */
body.deck-room .room-bg { overflow: hidden; }
#dk-stage {
  position: absolute; inset: 0;
  animation: kenburns 14s var(--ease-soft) alternate infinite;
}
/* Positioned by the projection in deck.js, not object-fit — the toons have to
   line up with it to the pixel. */
body.deck-room .room-bg .plate {
  position: absolute; top: 0; left: 0;
  width: auto; height: auto; max-width: none;
  animation: none;
}
body.deck-room .room-bg .occ { position: absolute; max-width: none; pointer-events: none; }

.dk-toon { position: absolute; transform: translateX(-50%); transform-origin: bottom center; }
.dk-toon img {
  height: 100%; width: auto; display: block;
  /* Cools the toons into the plate's silver light — they are lit warm and
     head-on, the photograph is not. */
  filter: drop-shadow(0 4px 9px rgba(4, 14, 17, .55)) saturate(.88) brightness(.94) contrast(1.02);
}
.dk-toon::after {
  content: ''; position: absolute; left: 50%; bottom: -3px;
  width: 96%; height: 9px; transform: translateX(-50%);
  background: radial-gradient(50% 50%, rgba(4, 14, 17, .6), transparent 72%);
}
@keyframes dk-idle { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-1.5px); } }
.dk-toon { animation: dk-idle 5.5s ease-in-out infinite; }
.dk-toon.arriving { animation: dk-land .75s var(--ease-dive); }
@keyframes dk-land {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.94); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---- the ask ----------------------------------------------------------- */
.dk-cta {
  display: block; width: 100%; margin: 0 0 10px; padding: 14px;
  background: var(--gold); color: #12262c;
  font: 700 .78rem var(--sans); letter-spacing: .19em; text-transform: uppercase; text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px));
}
.dk-cta[disabled] { opacity: .6; }
/* Once the guest has filed, the ask is answered — the only control left is
   the one sitting on their own row. */
body.deck-filed #dk-open { display: none; }
body.deck-filed .dk-noflight { display: none; }

.dk-noflight {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 14px;
  font: 400 .84rem/1.55 var(--sans);
  color: rgba(231, 217, 189, .66);
}
/* Same figure treatment as the seed-card prizes: gold, Zodiak, Roman. */
.dk-pts {
  flex: none; display: grid; place-items: center;
  min-width: 44px; padding: 8px 9px;
  font: 700 1.3rem/1 var(--serif); color: var(--gold);
  background: rgba(230, 163, 62, .08);
  border: 1px solid rgba(230, 163, 62, .45);
  clip-path: var(--cut-s);
}

/* ---- the strip --------------------------------------------------------- */
.dk-strip {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 6px; padding: 11px 14px;
  background: rgba(7, 24, 28, .34);
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
  backdrop-filter: blur(2px) saturate(1.1);
  border: 1px solid rgba(231, 217, 189, .13); border-bottom: 0;
}
.dk-strip b { font: 700 1.45rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--gold); }
.dk-strip .lbl {
  font: 600 .66rem var(--sans); letter-spacing: .17em; text-transform: uppercase;
  color: rgba(231, 217, 189, .5); margin-left: 5px;
}

/* ---- the board --------------------------------------------------------- */
.dk-board {
  /* Deliberately see-through: the deck is the room's ground and the board is
     hung in front of it, not pasted over it. Barely any blur — just enough to
     stop the timber grain buzzing under the small type. */
  background: linear-gradient(180deg, rgba(6, 20, 24, .44), rgba(5, 16, 19, .52));
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
  backdrop-filter: blur(2px) saturate(1.1);
  border: 1px solid rgba(231, 217, 189, .14);
  box-shadow: inset 0 1px 0 rgba(231, 217, 189, .07), 0 18px 46px rgba(3, 10, 12, .5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
}
.dk-board-head {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 12px 14px 11px;
  border-bottom: 1px solid rgba(231, 217, 189, .18);
  background: linear-gradient(180deg, rgba(230, 163, 62, .10), rgba(230, 163, 62, .03));
}
.dk-board-head h3 { font: 700 1.02rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--bone); }
.dk-board-head .th { display: block; font: 400 .82rem var(--thai); letter-spacing: .04em; color: var(--gold); margin-top: 4px; }
.dk-board-head .dest { text-align: right; font: 600 .64rem var(--sans); letter-spacing: .15em; text-transform: uppercase; color: rgba(231, 217, 189, .52); }
.dk-board-head .dest b { display: block; font: 700 1.15rem var(--sans); letter-spacing: .1em; color: var(--lagoon-2); margin-bottom: 2px; }
.dk-loading { padding: 20px 14px; font: italic .9rem var(--sans); color: rgba(231, 217, 189, .5); }

.dk-row {
  position: relative;
  display: block; width: 100%; text-align: left;
  padding: 13px 14px 12px;
  border-top: 1px solid rgba(231, 217, 189, .09);
  transition: background .25s;
}
.dk-row:first-child { border-top: 0; }
.dk-row:hover { background: rgba(231, 217, 189, .035); }
.dk-row.is-you { background: rgba(230, 163, 62, .10); box-shadow: inset 3px 0 0 var(--gold); }
.dk-edit {
  position: absolute; top: 11px; right: 12px; padding: 5px 11px;
  font: 700 .6rem var(--sans); letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(230, 163, 62, .55);
  clip-path: var(--cut-s);
}
.dk-row.is-you:hover .dk-edit { background: var(--gold); color: #12262c; }

/* The flaps. A real Solari board is a cabinet full of them; the seam across
   the middle is the one detail that makes it read as mechanical. */
.dk-flaps { display: flex; gap: 2px; margin-bottom: 9px; }
.dk-flap {
  position: relative; width: 19px; height: 26px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #12262c 0 50%, #0b1c21 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(231, 217, 189, .09);
  font: 700 .84rem var(--sans); color: var(--bone); overflow: hidden;
}
.dk-flap::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0, 0, 0, .72); box-shadow: 0 1px 0 rgba(231, 217, 189, .06);
}
.dk-flap.spin { color: rgba(231, 217, 189, .82); }
.dk-flap.settle { animation: flap-settle .16s var(--ease-dive); }
@keyframes flap-settle {
  0% { transform: perspective(90px) rotateX(-58deg); filter: brightness(.55); }
  100% { transform: none; filter: none; }
}
.dk-flap.blank { background: linear-gradient(180deg, #0d1e23 0 50%, #08171b 50% 100%); }

.dk-line2 { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
/* The names lead at one size however many there are. Eight of them wrap over
   several lines and that is fine — a tall row is a truer signal that half the
   party is on this flight than a row that shrinks to hide it. */
.dk-who { font: 700 1.34rem/1.08 var(--serif); letter-spacing: -.012em; color: var(--bone); }
.dk-who .amp { font-style: italic; font-weight: 400; color: var(--gold); padding: 0 1px; }
.dk-row.pending .dk-who { color: rgba(231, 217, 189, .42); font-weight: 400; font-style: italic; }
.dk-flight {
  display: block; margin-top: 3px;
  font: 500 .71rem var(--sans); letter-spacing: .13em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: rgba(231, 217, 189, .46);
}
.dk-when { text-align: right; white-space: nowrap; }
.dk-when .d { display: block; font: 600 .67rem var(--sans); letter-spacing: .15em; text-transform: uppercase; color: rgba(231, 217, 189, .55); }
.dk-when .t { display: block; margin-top: 1px; font: 700 1.32rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--gold); }
.dk-row.pending .dk-when .t { color: rgba(231, 217, 189, .3); font-size: .95rem; font-weight: 600; }

/* A retime belongs ON the time: the new one takes the big slot, the old sits
   struck through beneath it. A guest who memorised 14:35 needs to SEE it
   change, not just find a different number there one day. */
.dk-upd {
  display: inline-block; margin-right: 7px; padding: 2px 5px;
  font: 700 .56rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  font-style: normal; color: #12262c; background: var(--chili);
  clip-path: var(--cut-s); vertical-align: 1px;
}
.dk-was {
  display: block; margin-top: 3px;
  font: 500 .72rem var(--sans); font-variant-numeric: tabular-nums;
  color: rgba(212, 85, 58, .82);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.dk-punct {
  display: block; margin-top: 5px;
  max-width: 128px; margin-left: auto;
  font: 400 .66rem/1.32 var(--sans);
  color: rgba(231, 217, 189, .42);
  text-transform: none;
  /* .dk-when is nowrap so the time never breaks — this note must opt back out
     or it runs off the edge instead of wrapping. */
  white-space: normal; overflow-wrap: anywhere;
}

.dk-faces { display: flex; flex-wrap: wrap; margin-top: 8px; }
/* keepsakes/avatars — the same pre-cropped centred faces the roll and the menu
   button wear, on the same center/cover idiom. */
.dk-faces span {
  width: 26px; height: 26px; margin-right: -7px;
  border-radius: 50%; border: 1px solid rgba(231, 217, 189, .35);
  background: #143d47 center/cover no-repeat;
}
.dk-faces.crowd span { width: 32px; height: 32px; margin-right: -9px; border-color: rgba(231, 217, 189, .45); }

.dk-divide {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 11px;
  border-top: 1px solid rgba(231, 217, 189, .16);
  background: rgba(0, 0, 0, .16);
  font: 600 .63rem var(--sans); letter-spacing: .19em; text-transform: uppercase;
  color: rgba(231, 217, 189, .45);
}
.dk-divide::after { content: ''; flex: 1; height: 1px; background: rgba(231, 217, 189, .14); }

/* ── A JOURNEY THAT DOES NOT GET HERE YET ─────────────────────────────────
   Filed, but the last hop is not booked. Most people buy the long haul into
   Bangkok first and work the domestic leg out weeks later, so this is the
   ordinary state of the board in August — not an error, and not a row to
   apologise for.

   It reads as unfinished rather than as broken: the flaps go quiet, the left
   edge is dashed instead of solid, and the arrival column says what is
   missing rather than a time it does not have. Nothing is dimmed to the point
   of being hard to read — these are exactly the people somebody scanning the
   board wants to find, because they are the ones still deciding and might yet
   end up on the same hop. */
.dk-row.partial { box-shadow: inset 3px 0 0 rgba(231, 217, 189, .22); }
.dk-row.partial .dk-flap { opacity: .62; }
.dk-row.partial .dk-when .t { color: rgba(231, 217, 189, .55); }

.dk-togo {
  display: block; margin-bottom: 3px;
  font: 600 .58rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); opacity: .78;
}
/* Your own unfinished row keeps the gold edge — it is still your row, and it
   is still the thing you tap to finish it. */
.dk-row.is-you.partial { box-shadow: inset 3px 0 0 var(--gold); }

/* ---- the sheet --------------------------------------------------------- */
.dk-sheet-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(4, 12, 15, .74);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.dk-sheet-scrim.open { opacity: 1; pointer-events: auto; }
.dk-sheet {
  position: fixed; z-index: 160; left: 0; right: 0; bottom: 0;
  max-width: 640px; margin: 0 auto;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #0f2b32, #0a1f25);
  border-top: 2px solid var(--gold);
  transform: translateY(102%); transition: transform .42s var(--ease-dive);
  max-height: 88dvh; overflow-y: auto;
}
.dk-sheet.open { transform: none; }
.dk-sheet h4 { font: 700 1.7rem/1 var(--serif); color: var(--bone); }
.dk-sheet .sub { margin: 9px 0 20px; font: 400 .87rem/1.5 var(--sans); color: rgba(231, 217, 189, .62); }
.dk-field { margin-bottom: 15px; }
.dk-field label {
  display: block; margin-bottom: 6px;
  font: 600 .63rem var(--sans); letter-spacing: .17em; text-transform: uppercase;
  color: rgba(231, 217, 189, .55);
}
/* ⚠ THE HEIGHT IS STATED, NOT INHERITED. iOS sizes an <input type=date> from
   the text it is currently rendering, and with appearance:none and no value
   there is no text — so the empty date field collapsed to its own padding and
   came out a third the height of the flight field above it. The 7px corner cut
   then ate most of what was left, which is why its ends looked tapered.

   Neither `line-height: normal` nor a control's idea of its own height is the
   same on two engines, so both are pinned here: the content line is exactly
   22px and the box is exactly 46px, so an empty date field, a filled one and a
   text field are the same box everywhere. 46 also clears the 44px tap target. */
.dk-field input {
  display: block; width: 100%; min-height: 46px; padding: 11px 12px;
  background: rgba(0, 0, 0, .32); border: 1px solid rgba(231, 217, 189, .22);
  color: var(--bone); font: 600 1rem/22px var(--sans); letter-spacing: .06em;
  clip-path: var(--cut-s);
}
.dk-field input::placeholder { color: rgba(231, 217, 189, .26); letter-spacing: .04em; font-weight: 400; }
.dk-field input:focus { outline: none; border-color: var(--gold); background: rgba(0, 0, 0, .45); }

/* What the timetable knows. Fills in as soon as the number resolves. */
.dk-found {
  margin: 4px 0 16px; padding: 13px 14px;
  background: rgba(230, 163, 62, .07);
  border: 1px solid rgba(230, 163, 62, .3);
  clip-path: var(--cut-s);
}
.dk-found-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; }
/* The carrier's two letters on its own colour — no trademark fetched off a
   third party, and it still reads as "that airline". */
.dk-mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: #34505a; color: #fff;
  font: 700 .82rem var(--sans); letter-spacing: .04em;
  clip-path: var(--cut-s);
}
.dk-found-head b { display: block; font: 700 .96rem var(--sans); color: var(--bone); }
.dk-found-head > div > span { display: block; font: 400 .76rem var(--sans); color: rgba(231, 217, 189, .62); margin-top: 2px; }
.dk-found-time { font: 700 1.32rem var(--sans); font-variant-numeric: tabular-nums; color: var(--gold); }
.dk-found-meta {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(231, 217, 189, .14);
  font: 500 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(231, 217, 189, .5);
}
.dk-found-stat { margin-top: 6px; font: 400 .82rem/1.45 var(--sans); color: rgba(127, 204, 219, .78); }
.dk-notfound { margin: 4px 0 14px; font: 400 .82rem/1.45 var(--sans); color: var(--chili); }

@media (prefers-reduced-motion: reduce) {
  .dk-flap.settle, .dk-toon, .dk-toon.arriving, #dk-stage { animation: none; }
  .dk-toon { transform: translateX(-50%); }
  .dk-sheet { transition: none; }
}

/* ── a journey, not a flight ─────────────────────────────────────────────
   The sheet now collects a list of legs. Everything here exists to keep that
   list readable on a phone: each leg is a bordered card so two half-filled
   ones cannot be mistaken for one, and the connection between them is drawn
   rather than described. */

.dk-dirs { display: grid; grid-auto-flow: column; gap: 6px; margin: 14px 0 0; }
.dk-dirs button {
  padding: 10px 8px; background: none; cursor: pointer;
  border: 1px solid rgba(231, 217, 189, .2);
  clip-path: var(--cut-s);
  font: 600 .7rem var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(231, 217, 189, .55);
}
.dk-dirs button[aria-selected="true"] {
  background: rgba(231, 217, 189, .1); border-color: var(--gold); color: var(--bone);
}

.dk-leg {
  position: relative;
  border: 1px solid rgba(231, 217, 189, .14);
  clip-path: var(--cut-s);
  padding: 13px 13px 4px;
  margin-bottom: 10px;
}
/* The join between one leg and the next, so the list reads as a route and not
   as two unrelated forms stacked up. */
.dk-leg + .dk-leg::before {
  content: ''; position: absolute; left: 22px; top: -8px;
  width: 1px; height: 8px; background: rgba(231, 217, 189, .3);
}
.dk-leg-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 11px;
}
.dk-leg-head .n {
  font: 700 .6rem var(--sans); letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold);
}
.dk-drop {
  background: none; border: 0; cursor: pointer; padding: 2px 0;
  font: 400 .74rem var(--sans); color: rgba(231, 217, 189, .45);
  text-decoration: underline; text-underline-offset: 3px;
}
.dk-leg .dk-found { margin-bottom: 12px; }

.dk-addleg {
  display: block; width: 100%; padding: 11px; margin-bottom: 16px;
  background: none; cursor: pointer;
  border: 1px dashed rgba(231, 217, 189, .26);
  clip-path: var(--cut-s);
  font: 600 .72rem var(--sans); letter-spacing: .1em;
  color: rgba(231, 217, 189, .62);
}
.dk-drop-all {
  display: block; width: 100%; margin-top: 10px; padding: 10px;
  background: none; border: 0; cursor: pointer;
  font: 400 .78rem var(--sans); color: rgba(231, 217, 189, .4);
  text-decoration: underline; text-underline-offset: 3px;
}
/* Armed. The first tap does nothing but change this into something that
   clearly will — the underline goes, it takes a border and the room's one
   warning colour, and it stops looking like the quiet footnote it was. */
.dk-drop-all.armed {
  color: var(--chili); text-decoration: none;
  border: 1px solid rgba(212, 85, 58, .55);
  clip-path: var(--cut-s);
  font-weight: 600; letter-spacing: .02em;
}

/* An arrival that lands the following morning. Small, superscript, and next to
   the time it modifies — a red-eye is the one case where the time alone is a
   lie. */
.dk-nextday {
  font: 700 .62rem var(--sans); font-style: normal;
  vertical-align: super; margin-left: 2px; color: var(--lagoon-2);
}

/* The way home is the same board, turned down: it matters less, later. */
.dk-board.back { margin-top: 18px; opacity: .88; }
.dk-board.back .dk-board-head h3 { letter-spacing: .2em; }

.dk-toast {
  position: fixed; left: 16px; right: 16px; bottom: 22px; z-index: 200;
  padding: 13px 15px; margin: 0;
  background: rgba(11, 38, 46, .96); border: 1px solid rgba(231, 217, 189, .22);
  clip-path: var(--cut-s);
  font: 400 .86rem/1.4 var(--sans); color: var(--bone);
  transition: opacity .5s;
}
.dk-toast.go { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dk-toast { transition: none; }
}


/* ═══ THE BOARD, WITH CONNECTIONS ═════════════════════════════════════════
   Ported from public/deck-mock.html.

   ⚠ RENAMED ON THE WAY IN. The mock called these .dk-dirs / .dk-leg / .dk-legs,
   and this stylesheet already uses those three names for the BOOKING FORM —
   its direction tabs and its repeating leg cards. Two different components
   under one class name is how a stylesheet starts lying. So the board's are:

     .dk-switch    arrivals / the way home     (form keeps .dk-dirs)
     .dk-feeds     the list under an open row  (form keeps .dk-legs)
     .dk-feed      one feeder flight           (form keeps .dk-leg)

   The form has LEGS — the flights one person takes. The board has FEEDERS —
   the flights that converge on one shared hop. Different things, and now
   different words.                                                        */
/* ── the direction toggle ─────────────────────────────────────────────────
   Sits inside the board's own frame, under the head, so it reads as part of
   the fixture rather than as page furniture floating above it. */
.dk-switch {
  display: grid; grid-auto-flow: column;
  border-bottom: 1px solid rgba(231, 217, 189, .16);
  background: rgba(0, 0, 0, .18);
}
.dk-switch button {
  padding: 11px 8px; background: none; border: 0; cursor: pointer;
  font: 700 .64rem var(--sans); letter-spacing: .19em; text-transform: uppercase;
  color: rgba(231, 217, 189, .42);
  transition: color .2s, box-shadow .2s;
}
.dk-switch button + button { border-left: 1px solid rgba(231, 217, 189, .12); }
.dk-switch button[aria-pressed="true"] {
  color: var(--bone); background: rgba(230, 163, 62, .09);
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* ── the row, now that it opens ──────────────────────────────────────── */
.dk-rowwrap { border-top: 1px solid rgba(231, 217, 189, .09); }
.dk-rowwrap:first-child { border-top: 0; }
.dk-rowwrap .dk-row { border-top: 0; }
.dk-rowwrap.has-feeds .dk-row { cursor: pointer; }

/* The affordance. Quiet until the row is open, then gold — the same
   promotion the mantel and the strip use. */
.dk-more {
  display: inline-block; margin-top: 8px;
  font: 600 .58rem var(--sans); letter-spacing: .17em; text-transform: uppercase;
  color: rgba(231, 217, 189, .34);
}
.dk-more::before { content: '▾ '; }
.dk-rowwrap.open .dk-more { color: var(--gold); }
.dk-rowwrap.open .dk-more::before { content: '▴ '; }

/* +1, on the arrival time. A red-eye out of Sydney lands the next morning and
   the time alone is a lie without it. */
.dk-when .t sup {
  font: 700 .58rem var(--sans); vertical-align: super;
  color: var(--lagoon-2); margin-left: 1px;
}

/* ── the feeders ──────────────────────────────────────────────────────────
   Everything below hangs INSIDE the board's own transparency — no second
   panel, no second background. It is the same fixture, read closer. */
.dk-feeds {
  display: none;
  padding: 2px 14px 14px;
  background: rgba(0, 0, 0, .17);
  box-shadow: inset 0 1px 0 rgba(231, 217, 189, .09);
}
.dk-rowwrap.open .dk-feeds { display: block; }
.dk-feeds-h {
  margin: 12px 0 9px;
  font: 600 .59rem var(--sans); letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold);
}
.dk-feeds-h i {
  font-style: normal; margin-left: 5px; padding: 1px 4px;
  font-size: .92em; letter-spacing: .12em;
  color: rgba(231, 217, 189, .5);
  border: 1px solid rgba(231, 217, 189, .2);
}
.dk-feed {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 11px;
  align-items: start; padding: 8px 0;
  border-top: 1px dashed rgba(231, 217, 189, .12);
}
.dk-feed:first-of-type { border-top: 0; }
.dk-feed .lands {
  text-align: right;
  font: 700 .92rem/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--bone);
}
.dk-feed .lands em {
  display: block; margin-top: 2px; font-style: normal;
  font: 500 .6rem var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(231, 217, 189, .42);
}
.dk-feed .what { font: 400 .84rem/1.35 var(--sans); color: rgba(231, 217, 189, .7); }
.dk-feed .what i {
  font-style: normal; font-weight: 600; letter-spacing: .08em;
  font-variant-numeric: tabular-nums; color: var(--lagoon-2);
}
/* Between flight numbers, the same gold ampersand the names use — it has to
   read as "these two flights", not as part of either code. */
.dk-feed .what .amp { font-style: italic; color: var(--gold); padding: 0 1px; }
.dk-feed .what b {
  display: block; margin-top: 2px;
  font: 700 .88rem var(--serif); letter-spacing: -.005em; color: var(--bone);
}
.dk-feed .gap {
  text-align: right; white-space: nowrap;
  font: 600 .62rem var(--sans); letter-spacing: .08em;
  color: rgba(231, 217, 189, .42);
}
/* A three-night stopover is a PLAN and a fifty-minute connection is a RISK.
   Same arithmetic, opposite meanings — so gold for the one people will want
   to compare diaries about, and the board's existing retime red for the one
   that might not hold. */
.dk-feed .gap.stay { color: var(--gold); }
.dk-feed .gap.tight { color: var(--chili); }
.dk-feed.already .what { color: rgba(231, 217, 189, .38); font-style: italic; }

.dk-empty {
  padding: 22px 14px; text-align: center;
  font: 400 .88rem var(--sans); color: rgba(231, 217, 189, .45);
}

/* ═══ YOUR ROW IS THE CONTROL ════════════════════════════════════════════
   Anchored at the top until this guest has filed, wearing the only gold on
   the board so there is no question which row is theirs or that it is meant
   to be pressed. It replaced a separate button above the board — two places
   for one thing, and the row that was actually missing a flight did nothing. */
.dk-invite { border-top: 0; }
.dk-invite .dk-row {
  cursor: pointer;
  background: linear-gradient(150deg, rgba(230, 163, 62, .16), rgba(230, 163, 62, .06));
  box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px rgba(230, 163, 62, .3);
}
.dk-invite .dk-row:hover { background: rgba(230, 163, 62, .2); }
.dk-invite .dk-who { color: var(--gold); }
.dk-invite .dk-flight { color: rgba(231, 217, 189, .8); }
/* The flaps on this row read as a label rather than a destination. */
.dk-invite .dk-flap { border-color: rgba(230, 163, 62, .35); }
.dk-add {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-left: auto;
  font: 300 1.7rem/1 var(--sans); color: #0c2126;
  background: var(--gold); clip-path: var(--cut-s);
}
@media (prefers-reduced-motion: no-preference) {
  .dk-invite .dk-add { animation: dk-add-pulse 2.8s ease-in-out infinite; }
  @keyframes dk-add-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
}

/* The points offer, as an aside beside the thing it is offering. Hidden by
   paintBoard() the moment a flight is filed — it has nothing left to say. */
.dk-noflight[hidden] { display: none; }

/* ═══ the form ═══════════════════════════════════════════════════════════ */

/* A bare <input type=date> on Android is a plain box with no sign it opens a
   picker, and this room's field styling flattens the native indicator, so the
   mark is the affordance. It is a real button sitting beside the input, NOT
   the input stretched over it — see the picker-indicator note below. */
.dk-datewrap { position: relative; display: block; }
/* appearance:none so the date box is the SAME BOX as the flight box. Left to
   itself an <input type=date> carries an intrinsic width from its own
   spinners and picker button, which is what made this field come out wider
   than the one above it. */
.dk-datewrap input {
  width: 100%; -webkit-appearance: none; appearance: none;
  padding-right: 40px;                 /* room for the mark, inside the box */
}
/* The date's value lives in a shadow box with its own height, and the engines
   disagree on which box that is — which is why this field never quite matched
   the flight field above it. Both are named, in SEPARATE rules: an unknown
   pseudo-element in a selector list takes the whole rule down with it, so
   these cannot be comma-joined.

   THE TWO NUMBERS DIFFER ON PURPOSE. Chromium clamps a field's inner editor
   to the font's own line box whatever it is asked for, so 22 there only means
   "no taller than you need" and both fields settle on the same clamped
   number. iOS takes the height literally, so it has to be handed the number a
   text field of this font naturally comes out at — hand it 22 and the date
   box ends up 2px shorter than the flight box instead of collapsing. */
.dk-datewrap input::-webkit-datetime-edit {          /* Chromium, Safari 15+ */
  height: 22px; line-height: 22px; padding: 0;
}
.dk-datewrap input::-webkit-date-and-time-value {    /* iOS Safari */
  text-align: left; height: 24px; line-height: 24px; margin: 0;
}
/* The native indicator is hidden rather than stretched over the field:
   overlaying the shadow-DOM one worked in one browser and resized the field
   in another. */
.dk-datewrap input::-webkit-calendar-picker-indicator { display: none; }
/* ⚠ INERT. This was a button covering the right end of the field, which is
   exactly where a thumb goes for it — so on iOS the tap hit the button, and
   showPicker() from there did not open anything. Nothing to hit means the
   tap reaches the input, and iOS opens its own picker. */
.dk-cal {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 38px;
  display: grid; place-items: center;
  pointer-events: none;
}
.dk-cal svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--gold); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Empty reads as a question rather than an answer. */
.dk-datewrap input:not(:valid) { color: rgba(231, 217, 189, .45); }

/* Something is happening. The lookup can take a second against a live API,
   and an empty gap under a flight number reads as "nothing found". */
/* ⚠ An author `display` BEATS the UA's `[hidden] { display: none }`, whatever
   the specificity — so a flex box with a hidden attribute is still visible.
   That is why the spinner sat there before anything had been typed. Every
   element in this file that sets display AND toggles hidden needs its own
   guard; .dk-noflight already had one, which is why only this one showed. */
.dk-looking[hidden] { display: none; }
.dk-looking {
  display: flex; align-items: center; gap: 9px;
  margin: 4px 0 12px;
  font: 400 .82rem var(--sans); color: rgba(231, 217, 189, .6);
}
.dk-spin {
  width: 14px; height: 14px; flex: none;
  border: 2px solid rgba(231, 217, 189, .25);
  border-top-color: var(--gold); border-radius: 50%;
  animation: dk-spin 0.75s linear infinite;
}
@keyframes dk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dk-spin { animation-duration: 2.4s; }
}

/* Dimmed until the journey actually reaches Phuket — the rule made visible
   before it is enforced, rather than arriving as a refusal after submitting. */
.dk-cta.waiting {
  background: none; color: rgba(230, 163, 62, .7);
  border: 1px dashed rgba(230, 163, 62, .45);
}

/* ═══ the points offer, as one bar ═══════════════════════════════════════
   Three lines of prose at the head of the room for a five-point reward made
   the top of the board look busy. One line, read at a glance, and gone the
   moment it has been earned. */
.dk-noflight {
  display: inline-flex; align-items: stretch; gap: 0;
  margin: 0 0 14px; padding: 0;
  border: 1px solid rgba(230, 163, 62, .4);
  clip-path: var(--cut-s);
  overflow: hidden;
}
.dk-noflight .dk-pts {
  display: grid; place-items: center;
  min-width: 0; padding: 7px 11px;
  background: rgba(230, 163, 62, .16);
  font: 700 .84rem/1 var(--serif); color: var(--gold);
  border: 0; clip-path: none;
}
.dk-noflight .dk-pts-why {
  display: grid; place-items: center; padding: 7px 12px;
  font: 500 .72rem var(--sans); letter-spacing: .06em;
  color: rgba(231, 217, 189, .68);
}

/* Same trap as .dk-looking, found by auditing rather than by noticing: an
   author `display` beats the UA's `[hidden] { display: none }`. Without these
   the "add another flight" button stays up past the leg limit, and "remove my
   flight home" shows on every journey including the ones going out. */
.dk-addleg[hidden] { display: none; }
.dk-drop-all[hidden] { display: none; }