/* ── The itinerary card (.variant) — shared by the enquiry record's Itineraries
   section and the Itineraries list page. Moved here verbatim from the record page
   on 07-27 evening (Ihor: the list had re-drawn a lookalike tile — one component,
   one stylesheet, the pages cannot drift). Markup comes from itinerary-card.js
   (MalkaiItineraryCard.html). The class family keeps its historical `.variant`
   name — an mk- rename is a separate pass. */

.variant {
  background:var(--mk-surface); border:var(--mk-border); border-radius:var(--mk-radius-md);
  box-shadow:var(--mk-shadow-card);
  padding:14px 18px 16px; margin-bottom:var(--mk-card-gap);
}
.variant:last-child { margin-bottom:0; }
/* No "current" ring: with no versioning there is nothing to be current OF — a gold
   outline read as a selection you could switch (07-11, Ihor). The status badge is
   the differentiator; the hover ring below is the CLICKABLE affordance, uniformly. */
/* 07-11: the card itself opens the itinerary — the name is a stretched link, the
   action buttons sit above it. Same row-click idiom as the inbox queue. */
.variant { position:relative; }
.variant .vname a { color:inherit; text-decoration:none; }
.variant .vname a::after { content:""; position:absolute; inset:0; }
.variant .vname a:hover { color:var(--mk-accent); }
.variant:hover { border-color:var(--mk-accent); }
.variant .vname a:focus-visible { outline:2px solid var(--mk-camel-mid); outline-offset:2px; }
.variant .vlink-wrap, .variant .vmenu, .variant .vline .mk-badge { position:relative; z-index:1; }
.variant .vline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Copy guest link now leads the card where the redundant route mark used to sit.
   It is the exact shared icon-button used by the trailing kebab; only its accessible
   name and glyph differ, and the existing tooltip makes the action explicit. */
.variant .vline { align-items:flex-start; }
.vline .vbody { flex:1; min-width:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.variant .vtag { font-family:var(--mk-font-app-caps); font-size:13px; letter-spacing:.08em; color:var(--mk-text-muted); }
/* 07-27 (his call): the title takes a step up, and the PR-13 chevron leaves the
   title — the whole card is the control and the hover ring already says so. */
.variant .vname { font-weight:600; font-size:var(--mk-text-lg); }
.variant .v-enquiry-ref { color:var(--mk-text-muted); font-size:var(--mk-text-sm);
                          font-weight:350; white-space:nowrap; }
.variant .vline .mk-badge { margin-left:auto; }
/* 07-27 round 3 (his call — the card spends height where width stands empty): ONE
   facts line under the title — bold short dates leading («12 Jan — 21 Jan», the month
   on BOTH sides and the em dash as the joiner), the nights, then the composing agent
   and the state's short note, each behind the header's own vertical rule. */
/* Copy remains the card's default supporting act. It now wears the unmodified shared
   icon-button face, identical to the trailing kebab, and keeps its explanatory tooltip. */
.vlink-wrap { position:relative; display:inline-flex; z-index:1; }
/* The tip (round 5, his cut): no shadow, no border — a soft brand-gold plate with
   rounded corners and its own pointer, dark text kept legible. */
.vlink-tip { --tip-bg:color-mix(in srgb, var(--mk-camel-light) 28%, var(--mk-surface));
             position:absolute; bottom:calc(100% + 9px); left:50%;
             transform:translateX(-50%); z-index:60; white-space:nowrap;
             background:var(--tip-bg); border-radius:var(--mk-radius-md);
             padding:6px 11px; font-size:var(--mk-text-sm); line-height:18px;
             color:var(--mk-text-muted); pointer-events:none;
             opacity:0; visibility:hidden;
             transition:opacity .15s ease, visibility 0s linear .15s; }
.vlink-tip::after { content:""; position:absolute; top:100%; left:50%;
                    transform:translateX(-50%); border:5px solid transparent;
                    border-top-color:var(--tip-bg); }
/* Hover only, with a short settle before it speaks — a click leaves focus on the
   button, and :focus-within kept the tip pinned after the press. :focus-visible
   still names the glyph for the keyboard. */
.vlink-wrap:hover .vlink-tip, .vlink-wrap:has(:focus-visible) .vlink-tip {
  opacity:1; visibility:visible;
  transition:opacity .15s ease .1s, visibility 0s linear .1s; }
/* Round 5: every card carries the ⋮ menu right of its status (the builder's hotel-card
   kebab) — the state's rarer acts live there; Discard draft moved in off the head. */
.vline .vmenu { position:relative; z-index:1; }
.vmenu .mk-menu { min-width:220px; }
.variant .vfacts { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                   margin-top:8px; font-size:var(--mk-text-sm); color:var(--mk-text-muted); }
.variant .vfacts strong { font-weight:600; }
.vfacts .vnote-inline { color:var(--mk-text-muted); }
.vfacts .vwho { display:inline-flex; align-items:center; gap:8px; }
/* the composer's small anchor — self-contained here; the record page's 32px .ava
   stays the assignee's own (PR-6: guests and composers must not share its size) */
.ava-sm { width:28px; height:28px; border-radius:50%; flex:none; align-self:center;
          display:inline-flex; align-items:center; justify-content:center;
          background:var(--mk-surface-sunken); border:1px solid var(--mk-hairline-strong);
          font-family:var(--mk-font-app-caps); font-size:var(--mk-text-sm); }
/* The route is the card's PICTURE — the template card's horizontal timeline (accepted
   25 Jul), same grammar and class names as the builder's start gallery (.tcard-hspine):
   dots answering on one hairline, serif property names, the nights moon-figure beside. */
.tcard-hspine { display:flex; align-items:flex-start; margin-top:10px; }
.tcard-hstop { position:relative; flex:0 0 auto; display:grid;
               grid-template-columns:max-content max-content; column-gap:8px; row-gap:4px;
               align-items:baseline; justify-items:start; padding-right:28px; }
.tcard-hstop:last-child { padding-right:0; }
.tcard-hstop:not(:last-child)::before { content:""; position:absolute; top:7px; left:14px;
  right:0; height:1px; background:var(--mk-hairline-strong); }
.start-tcard-dot { grid-column:1 / -1; position:relative; z-index:1; flex:none;
                   width:14px; height:14px; border-radius:50%;
                   border:1.5px solid var(--mk-accent); background:var(--mk-surface); }
/* Property names wear the brand serif like every property name in the builder
   (his 07-21 call). Round 4 (his ask): the whole timeline steps UP — 17px names,
   14px dots, the nights fact and its moon a size larger each. */
.start-route-name { font-family:var(--mk-font-brand-serif); font-weight:600;
                    font-size:var(--mk-text-ml); line-height:1.2; color:var(--mk-text-muted); white-space:nowrap; }
.start-tcard-leg-fact { display:inline-flex; align-items:baseline; gap:4px;
                        color:var(--mk-text-muted); font-size:var(--mk-text-sm); }
.start-tcard-leg-fact svg { align-self:center; }
.start-tcard-leg-icon { width:15px; height:15px; flex:none; fill:none; stroke:currentColor;
                        stroke-width:var(--mk-icon-stroke); stroke-linecap:butt;
                        stroke-linejoin:miter; }
/* One stay is not a journey: with no line to draw, the lone stop lies down as a
   fact row — dot, name, nights inline (the template card's own rule). */
.tcard-hstop.single { display:flex; flex-direction:row; align-items:center; gap:8px;
                      padding-right:0; }
/* 07-27 round 3: the money stands OPPOSITE the timeline (his call — the width was
   there), in the builder's price grammar: quiet currency code, the bold tabular
   number. One row carries the journey's shape and its cost. */
.variant .vspine-row { display:flex; align-items:center; gap:24px; margin-top:12px; }
.vspine-row .tcard-hspine { flex:1 1 auto; min-width:0; margin-top:0; }
.vspine-row .vprice { margin-left:auto; font-family:var(--mk-font-app); font-weight:650;
                      font-size:20px; line-height:24px; font-variant-numeric:lining-nums tabular-nums;
                      white-space:nowrap; }
/* the pair's rule (07-31): the currency measures itself against its own figure */
.vspine-row .vprice .cur { margin-right:5px; font-size:max(13px, calc(1em - 2px)); font-weight:350;
                           color:var(--mk-text-muted); }

@media (max-width:767px) {
  /* a wrapped status stops floating mid-air — under the title, left, where
     the reading line already is */
  .variant .vline .mk-badge { margin-left:0; }
  /* The head as a phone card's head (his 10-29 review: the status hung indented under
     the title, where nothing else lined up). The status leads at the top-left edge, the
     card's two icon acts — copy the guest link, ⋮ — hold the top-right corner, and the
     title takes the full width beneath, the enquiry reference under it. */
  .variant .vline { display:grid; grid-template-columns:minmax(0,1fr) auto auto;
                    align-items:center; gap:4px 2px; }
  .vline .vbody { display:contents; }
  .variant .vline .mk-badge { grid-row:1; grid-column:1; justify-self:start; }
  .variant .vlink-wrap { grid-row:1; grid-column:2; }
  .variant .vline .vmenu { grid-row:1; grid-column:3; }
  .variant .vname { grid-row:2; grid-column:1 / -1; margin-top:2px; }
  .variant .v-enquiry-ref { grid-row:3; grid-column:1 / -1; }
  /* the facts line stacks; its rules leave with the columns they divided */
  .variant .vfacts { flex-direction:column; align-items:flex-start; gap:4px; }
  .variant .vfacts .mk-rule-y { display:none; }
  /* narrow: the nights leave the name's line and drop beneath it, so the stop
     narrows to the name and three stops still fit (the template card's own drop) */
  .tcard-hstop:not(.single) { grid-template-columns:max-content; row-gap:3px; }

  /* The route stands up (Ihor's 11-02 review: «не поместится горизонтально маршрут,
     если там будет больше 4 точек… лучше таймлайн вертикально, справа»). Under the head
     the card splits: the dates and the price down the left, the route down the right —
     one stop a line, the hairline running between the dots. A six-stop journey makes
     the card taller, never wider than the screen. */
  .variant { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; }
  .variant > .vline { grid-column:1 / -1; }
  .variant .vfacts, .variant .vspine-row { display:contents; }
  .variant .vdates { grid-column:1; grid-row:2; align-self:start; margin-top:8px; }
  /* the nights take their own line under the range instead of breaking mid-phrase; the
     line drops the joining comma (the desktop's text node stays exactly as it was) */
  .variant .vdates .vnights { display:block; font-size:0; }
  .variant .vdates .vnights::after { content:attr(data-short) / ""; font-size:var(--mk-text-sm); }
  /* no assignee on the phone card (Ihor, 11-02, twice): who composed it is not what the
     card is read for, and the line took the room the route needs */
  .variant .vfacts .vwho { display:none; }
  .variant .tcard-hspine { grid-column:2; grid-row:2 / span 3; flex-direction:column;
                           align-items:flex-start; margin-top:8px; }
  .variant .vprice { grid-column:1; grid-row:4; align-self:end; justify-self:start;
                     margin:12px 0 0; }
  /* a note is a sentence: it takes the card's full width under the pair */
  .variant .vfacts .vnote-inline { grid-column:1 / -1; grid-row:5; margin-top:10px; }
  .variant .tcard-hstop:not(.single) { grid-template-columns:14px max-content max-content;
                                       column-gap:8px; align-items:center; padding:0 0 14px; }
  .variant .tcard-hstop:last-child { padding-bottom:0; }
  /* the stops and their nights a step up again (11-02: «Барка, Хаджар… чуть побольше») */
  .variant .start-route-name { font-size:21px; }
  .variant .start-tcard-leg-fact { font-size:var(--mk-text-md); }
  .variant .start-tcard-leg-icon { width:17px; height:17px; }
  .variant .tcard-hstop .start-tcard-dot { grid-column:1; }
  .variant .tcard-hstop:not(:last-child)::before { top:7px; bottom:-7px; left:6px; right:auto;
                                                    width:1px; height:auto; }
}