/* Karar Masası (docs/superpowers/specs/2026-10-22-karar-masasi-kararlar.md; tuval "Karar Masası", sayfa "Onaylananlar"): the
   flight row's language, Uçuş first (`.q-int[data-desk]`, lib/rowView.ts isDeskRow). Sizes are the live rows' own
   (rows.css, stages.css); what is said here is only what the decisions change:
     1  the plane between the two ends ("Bangkok ✈ İstanbul")
     3  nothing found yet: a dashed tile, a "+" on its corner (bring what you found), "Kendin ara ↗"; while the AI or the
        source looks the ring turns and the hours and the price load where they will stand
     6  Seçtin: a violet 1.5 px frame, the corner's mark half full */

/* the mark's inside is laid out by the mark itself (a "+" may stand beside it) */
.q-rmi { display: contents; }

/* ---- 1 · the plane between the ends ---- */
.q-nm .q-rpl { display: inline-flex; vertical-align: -2px; margin: 0 1px; color: var(--q-ink); font-style: normal; }
.q-nm .q-rpl .q-mi { width: 15px; height: 15px; }
/* (the plane turned to fly along the route; a train, a bus, a boat stand as they are) */
.q-nm .q-rpl.fly .q-mi, .dr-t .q-rpl.fly .q-mi { transform: rotate(45deg); }
.q-int[data-desk][data-stage="options"] .q-nm .q-rpl { color: #8e8aa6; }

/* ---- 3 · nothing found yet: Aranacak, Aranıyor ---- */
.q-int[data-desk] .q-rmark.ic:has(> .q-sadd) { background: #fff; box-shadow: inset 0 0 0 2px #dcd7e8; }
.q-int[data-desk] .q-rmark.ic:has(> .q-sadd) .q-mi { color: #8e8aa6; }
.q-sadd {
  position: absolute; right: -8px; top: -8px; bottom: auto; z-index: 2; width: 22px; height: 22px; padding: 0; border-radius: 99px;
  border: 1.5px dashed #9c90ee; background: #fff; color: var(--q-acc-d); font: 800 13px/1 inherit; display: grid; place-items: center;
  box-shadow: none; cursor: pointer;
}
.q-sadd:hover { background: var(--q-acc-s); border-style: solid; }
.q-sadd:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 1px; }
/* the ring that turns while something looks (the tile's icon gives way to it) */
.q-rmark.busy .q-rmi { visibility: hidden; }
.q-rmark.busy::after {
  content: ""; position: absolute; inset: 13px; border-radius: 99px; border: 2.6px solid #8e8aa6; border-right-color: transparent;
  animation: q-turn 900ms linear infinite;
}
@keyframes q-turn { to { transform: rotate(360deg); } }
/* the hours and the price load where they will stand */
.q-rsk {
  display: block; height: 12px; border-radius: 5px; margin-top: 4px;
  background: linear-gradient(90deg, #ebe8f2 0%, #f6f4fa 50%, #ebe8f2 100%) 0 0 / 160px 100%; animation: q-shim 1.4s linear infinite;
}
.q-rsk.w64 { width: 120px; }
.q-rfig .q-rsk.w52 { width: 52px; height: 16px; margin: 0 0 0 auto; }
@keyframes q-shim { 0% { background-position: -160px 0; } 100% { background-position: 160px 0; } }
@media (prefers-reduced-motion: reduce) { .q-rmark.busy::after, .q-rsk { animation: none; } }
body.still .q-rmark.busy::after, body.still .q-rsk { animation: none; }

/* the empty flight's two searches, side by side: "Kendin ara ↗" (the site filled with the route and the day, a quiet
   outlined button) and "AI ara" (the chat looks and fills the deck; lilac, "AI arıyor…" while it does) */
.q-two { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
/* (the slot's column, 118px for one button, takes the two) */
.q-rrow:has(> .q-rslot .q-two) { grid-template-columns: 38px minmax(0, 1fr) auto auto 28px; }
.q-rrow.card:has(> .q-rslot .q-two) { grid-template-columns: 84px minmax(0, 1fr) auto auto 28px; }
.q-rrow.gap:has(> .q-rslot .q-two) { grid-template-columns: 36px minmax(0, 1fr) auto 28px; }
.q-pick.q-self { background: #fff; color: var(--q-acc-d); box-shadow: inset 0 0 0 1px #dcd6fb; gap: 5px; text-decoration: none; }
.q-pick.q-self:hover { background: var(--q-acc-s); }
.q-pick.q-self .q-ext { font-size: 12px; }
.q-pick.q-ai2 { background: var(--q-acc-s); color: var(--q-acc-d); border: 0; gap: 5px; cursor: pointer; }
.q-pick.q-ai2:hover { background: #e4defd; }
.q-pick.q-ai2:disabled { cursor: default; opacity: .75; }
.q-pick.q-ai2 svg { color: var(--q-acc); }
@media (max-width: 700px) {
  .q-rrow:has(> .q-rslot .q-two) { grid-template-columns: 38px minmax(0, 1fr) auto 24px; }
  .q-rrow.card:has(> .q-rslot .q-two) { grid-template-columns: 64px minmax(0, 1fr) auto 24px; }
  .q-rrow.gap:has(> .q-rslot .q-two) { grid-template-columns: 36px minmax(0, 1fr) 24px; }
  .q-two { flex-wrap: wrap; }
  .q-rrow.gap > .q-rslot .q-two { justify-content: flex-start; }
}

/* ---- 6 · Seçtin: decided, not bought ---- */
.q-int[data-desk][data-stage="planned"][data-st="sel"] .q-rcard {
  box-shadow: 0 2px 6px rgba(28, 26, 51, .05), 0 16px 34px -16px rgba(91, 69, 224, .45), inset 0 0 0 1.5px var(--q-acc);
}
/* the deck stays under it while there are other options: two thin lilac sheets, and on its edge "↩ 6 seçenek daha"
   (the drawer, the chosen one marked); bought, the deck goes */
.q-int[data-desk] .q-row.rest { padding-bottom: 18px; }
.q-int[data-desk] .q-row.rest .q-rcard {
  box-shadow: inset 0 0 0 1.5px var(--q-acc), 0 1px 2px rgba(28, 26, 51, .06), 0 6px 0 -3px #fff, 0 6px 0 -1.5px #d9d2f8,
    0 12px 0 -6px #fff, 0 12px 0 -4.5px #e7e2fa, 0 22px 28px -18px rgba(91, 69, 224, .4);
}
/* a stay chosen among several (0.40.5): the same sheets under its card */
.q-row.rest[data-face="card"] { padding-bottom: 18px; }
.q-row.rest[data-face="card"] .q-rcard {
  box-shadow: inset 0 0 0 1px rgba(28, 26, 51, .08), 0 1px 2px rgba(28, 26, 51, .06), 0 6px 0 -3px #fff, 0 6px 0 -1.5px #d9d2f8,
    0 12px 0 -6px #fff, 0 12px 0 -4.5px #e7e2fa, 0 22px 28px -18px rgba(91, 69, 224, .3);
}
.q-more {
  position: absolute; left: 84px; bottom: -15px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 30px;
  padding: 0 14px; border: 0; border-radius: 99px; background: #fff; color: var(--q-acc-d); font: inherit; font-size: 12.5px;
  font-weight: 800; cursor: pointer; box-shadow: 0 0 0 4px rgba(91, 69, 224, .14), inset 0 0 0 1.5px var(--q-acc);
}
.q-more:hover { background: var(--q-acc-s); }
.q-more:focus-visible { outline: 3px solid var(--q-acc); outline-offset: 2px; }
@media (max-width: 700px) { .q-more { left: 12px; } }

/* ---- 4 · the deck: a white card, three cards fanned on the mark's place, two thin lilac sheets under it ---- */
.q-int[data-desk]:has(.q-rsec) { padding-bottom: 10px; }
.q-int[data-desk]:has(.q-rsec) .q-rcard {
  background: #fff; outline: 0;
  box-shadow: inset 0 0 0 1.5px #c9bffa, 0 1px 2px rgba(28, 26, 51, .06), 0 6px 0 -3px #fff, 0 6px 0 -1.5px #d9d2f8, 0 12px 0 -6px #fff,
    0 12px 0 -4.5px #e7e2fa, 0 22px 28px -18px rgba(91, 69, 224, .35);
}
.q-int[data-desk]:has(.q-rsec) .q-rstage { color: var(--q-acc-d); }
.q-int[data-desk]:has(.q-rsec) .q-rhd .q-nm, .q-int[data-desk]:has(.q-rsec) .q-nm .q-rpl { color: var(--q-ink); }
.q-rmark.q-fan { background: none; box-shadow: none; overflow: visible; }
.q-rmark.q-fan > span {
  position: absolute; left: 9px; top: 5px; width: 26px; height: 34px; border-radius: 7px; background: #fff; display: grid; place-items: start center; padding-top: 4px; box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(28, 26, 51, .16), inset 0 0 0 1px rgba(28, 26, 51, .1); transform: rotate(var(--turn, 0deg)); transform-origin: 50% 120%;
}
.q-rmark.q-fan .q-logo, .q-rmark.q-fan .z-lgi { width: 18px; height: 18px; border-radius: 5px; font-size: 8px; }
.q-rmark.q-fan .z-lgi img { width: 18px; height: 18px; }
/* "Seç 7": the count in a white box on the button */
.q-int[data-desk] .q-rsec { padding: 0 5px 0 14px; gap: 8px; }
.q-int[data-desk] .q-rsec .q-rmini {
  position: static; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 7px;
  background: #fff; color: var(--q-acc-d); font-size: 13px; font-weight: 800; box-shadow: none;
}

/* ---- 5 · the drawer: the plane in its title, the source to its page, what the traveller brought in gold ---- */
.dr-t .q-rpl { display: inline-flex; vertical-align: -3px; margin: 0 2px; color: var(--q-ink); font-style: normal; }
.dr-t .q-rpl .q-mi { width: 22px; height: 22px; }
.dr-slt a:has(.q-ext) { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.dr-slt a .q-ext { font-size: 12px; font-weight: 800; color: var(--q-acc-d); }
.dr-slt a:has(.q-ext):hover b { text-decoration: underline; }
.dr-op.own { box-shadow: inset 0 0 0 2px #e2b65a, 0 10px 26px -20px rgba(166, 116, 18, .55); background: linear-gradient(180deg, #fffaf0, #fff 120px); }
.dr-op.own.cur { box-shadow: inset 0 0 0 2px var(--q-acc), 0 0 0 3px #f3dca8; }
.dr-own { color: #8a5a12; font-weight: 700; }
.dr-own b { display: inline-block; padding: 1px 7px; border-radius: 99px; background: #fbe9c4; color: #7a4d0c; font-size: 11px; font-weight: 800; }

/* ---- 6 · under the opened ticket: only links, one line ("Skyscanner'dan · Değiştir 7 · ✓ Aldım") ---- */
.q-int[data-desk] .q-racts { gap: 14px; }
.q-int[data-desk] .q-racts .q-rsrc { font-size: 12.5px; font-weight: 700; color: var(--q-mut); }
.q-lnk, .q-int[data-desk] .q-racts .q-lnk {
  height: auto; min-height: 0; padding: 4px 2px; border: 0; background: none; box-shadow: none; border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 750; color: var(--q-acc-d); cursor: pointer;
}
.q-lnk b { font-weight: 800; color: color-mix(in srgb, var(--q-acc) 70%, #fff); margin-left: 2px; }
.q-lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.q-lnk:focus-visible { outline: 3px solid #cfc7ff; outline-offset: 1px; }
.q-int[data-desk] .q-racts .q-got.q-lnk { color: var(--q-ink); }

/* ---- 7 · bought: the button goes; a green stub with its upright stamp, half over the tear ---- */
:root { --q-stamp-bg: rgba(238, 248, 242, .94); }
.q-stamp text { font-family: inherit; }
.q-rstub.q-rkoc { align-items: flex-end; gap: 2px; padding: 8px 46px 8px 34px; }
.q-rstub.q-rkoc .q-stamp { position: absolute; left: -34px; top: 50%; margin-top: -31px; z-index: 1; filter: drop-shadow(0 1px 1px rgba(28, 26, 51, .08)); }
.q-rstub.q-rkoc .q-lnk { color: var(--q-ok); font-size: 12.5px; font-weight: 800; padding: 2px 0; }
.q-rstub.q-rkoc small { font-size: 11px; color: #2f6b48; font-weight: 600; }
/* the figure's column gives the stamp room to stand over the tear */
.q-int[data-desk] .q-rrow:has(.q-rkoc) > .q-rfig { min-width: 36px; }
/* opened: the stamp beside the ticket, big */
.z-step.z-dstamp { gap: 6px; }
.z-step.z-dstamp .q-stamp { display: block; }
.z-step.z-dstamp small { color: #2f6b48; }
/* pressed on as it is bought (the seal's motion, after the frame's crossfade) */
.z-int.z-go .q-stamp { animation: mv-stamp 420ms cubic-bezier(.2, .9, .3, 1.3) backwards; }
@media (prefers-reduced-motion: reduce) { .z-int.z-go .q-stamp { animation: none; } }
body.still .z-int.z-go .q-stamp { animation: none; }

@media (max-width: 700px) {
  .q-rstub.q-rkoc { padding: 6px 12px 6px 44px; flex-direction: row; align-items: center; gap: 8px; }
  .q-rstub.q-rkoc .q-stamp { left: -6px; width: 46px; height: 46px; margin-top: -23px; }
}
.z-drop .q-lnk.z-dpick { color: var(--q-ok); flex: none; }
/* opened, the big stamp stands beside the ticket: the stub keeps only its link */
.q-row.open .q-rstub.q-rkoc { align-items: center; padding-left: 16px; }
.q-row.open .q-rstub.q-rkoc .q-stamp { display: none; }

/* ---- 10 · the rail joins (Uçuş): the line is the journey itself. Each row draws its own stretch under its dot, in its
   step's ink: bought green (4 px) and locked to the next bought one, chosen violet with open ends, a deck dashed lilac,
   still to find dotted grey. Marked bought, the stretch flows out from the dot and locks on. ---- */
.q-ints.q-tl:has(> .q-int[data-desk])::before { display: none; }
.q-ints.q-tl .q-int[data-desk] .q-tld::after {
  content: ""; position: absolute; z-index: 0; right: -2px; width: 4px; top: 44px; bottom: -4px; border-radius: 9px; transform-origin: 50% 0;
}
.q-ints.q-tl .q-int[data-desk][data-stage="options"] .q-tld::after { right: -1.5px; width: 0; border-radius: 0; border-left: 3px dotted #c9c5d6; }
.q-ints.q-tl .q-int[data-desk][data-stage="options"]:has(.q-rsec) .q-tld::after { bottom: 6px; border-left: 3px dashed #b9aef5; }
.q-ints.q-tl .q-int[data-desk][data-stage="planned"] .q-tld::after { background: var(--q-acc); }
.q-ints.q-tl .q-int[data-desk]:is([data-stage="bought"], [data-stage="ticket"]) .q-tld::after { top: 31px; background: var(--q-ok); }
/* two bought legs one after the other: one green line from dot to dot */
.q-ints.q-tl .q-int[data-desk]:is([data-stage="bought"], [data-stage="ticket"]):has(+ .q-int[data-desk]:is([data-stage="bought"], [data-stage="ticket"])) .q-tld::after {
  bottom: -14px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.q-ints.q-tl .q-int[data-desk]:is([data-stage="bought"], [data-stage="ticket"]) + .q-int[data-desk]:is([data-stage="bought"], [data-stage="ticket"]) .q-row::before {
  content: ""; position: absolute; z-index: 0; left: calc(var(--tlx) - 2px); top: -14px; height: 45px; width: 4px; background: var(--q-ok);
}
/* the dots by step */
.q-ints.q-tl .q-int[data-desk]:is([data-stage="bought"], [data-stage="ticket"]) .q-tld::before {
  width: 14px; height: 14px; right: -7px; top: 23px; border: 0; background: var(--q-ok); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #bfe3c9;
}
.q-ints.q-tl .q-int[data-desk][data-stage="planned"] .q-tld::before {
  width: 14px; height: 14px; right: -7px; top: 23px; border: 0; background: conic-gradient(#fff 0 50%, var(--q-acc) 50% 100%);
  box-shadow: inset 0 0 0 2.5px var(--q-acc), 0 0 0 3px #fff;
}
.q-ints.q-tl .q-int[data-desk][data-stage="options"] .q-tld::before { width: 14px; height: 14px; right: -7px; top: 23px; border: 2.5px dotted #b4afc9; background: #fff; }
.q-ints.q-tl .q-int[data-desk][data-stage="options"]:has(.q-rsec) .q-tld::before { border: 2.5px dashed #9c90ee; }
/* marked bought: the stretch flows out of the dot and locks on */
.q-ints.q-tl .z-int.z-go[data-desk] .q-tld::after, .q-ints.q-tl .z-int.z-go[data-desk] .q-row::before { animation: q-flow 700ms cubic-bezier(.3, .7, .2, 1) 280ms both; }
@keyframes q-flow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .q-ints.q-tl .z-int.z-go[data-desk] .q-tld::after, .q-ints.q-tl .z-int.z-go[data-desk] .q-row::before { animation: none; } }
body.still .q-ints.q-tl .z-int.z-go[data-desk] .q-tld::after, body.still .q-ints.q-tl .z-int.z-go[data-desk] .q-row::before { animation: none; }
/* the phone: the date sits over the card, the dot alone says the step (no line under the cards) */
@media (max-width: 700px) {
  .q-ints.q-tl .q-int[data-desk] .q-tld::after, .q-ints.q-tl .q-int[data-desk] .q-row::before { display: none; }
  .q-ints.q-tl .q-int[data-desk] .q-tld::before { right: auto; left: 0; top: 2px; width: 12px; height: 12px; }
}

/* ---- 11 · getirme anları: a row takes what is dropped on it; read, it says where it stands ---- */
.q-row.drop > .q-rcard { box-shadow: inset 0 0 0 2px var(--q-acc), 0 0 0 4px var(--q-acc-s), 0 18px 40px -18px rgba(91, 69, 224, .45); }
.q-rdrop {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 12px 12px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px dashed color-mix(in srgb, var(--q-acc) 55%, #fff); background: var(--q-acc-s); color: var(--q-acc-d); pointer-events: none;
}
.q-rdrop b { font-size: 13.5px; font-weight: 800; }
.q-rdrop small { font-size: var(--q-fs-small); font-weight: 600; color: var(--q-mut); }
.q-brought { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 12px 12px; padding: 10px 12px 10px 14px; border-radius: 12px; background: #f6f4ff; box-shadow: inset 0 0 0 1px #e4defc; }
.q-brought .q-bri { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; background: #fff; color: var(--q-acc-d); box-shadow: inset 0 0 0 1px #dcd6fb; flex: none; }
.q-brought .q-brt { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.q-brought .q-brt b { font-size: 13.5px; font-weight: 800; color: var(--q-ink); }
.q-brought .q-brt small { font-size: var(--q-fs-small); font-weight: 650; color: var(--q-mut); }
.q-brought .q-brx { border: 0; background: none; color: var(--q-mut); padding: 4px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.q-brought .q-brx:hover { background: #fff; }
.q-brought .q-look { min-height: 26px; }
/* the drawer takes it too: its "+ Seninkini ekle" lights up */
.dr.over .dr-new { border-style: solid; border-color: var(--q-acc); background: var(--q-acc-s); box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-acc) 16%, transparent); }
/* Gelenler: what was read and couldn't be placed, at the Plan's top */
.q-gel { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: #fff8ec; box-shadow: inset 0 0 0 1px #f0dcb4; }
.q-gelh { display: flex; align-items: baseline; gap: 10px; }
.q-gelh b { font-size: 15px; font-weight: 800; color: var(--q-ink); }
.q-gelh small { font-size: var(--q-fs-small); font-weight: 650; color: #8a5a12; }
.q-gel .msg-route { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #f0e2c4; }

/* a row whose ⋯ menu is open stands above the rows and the city lines after it (its menu never under the next one) */
.q-int:has([role="menu"]) { position: relative; z-index: 5; }
/* Uçuş closed: the airlines' logos in the pictures' place */
.q-th.q-thl { display: grid; place-items: center; background: #fff; }
/* an Etkinlik idea said in words, no tour found for it yet: its searches on one quiet line */
.z-kidea { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-weight: 750; color: var(--q-mut); }
.z-kidea a, .z-kidea button { color: var(--q-acc-d); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.z-kidea a:hover, .z-kidea button:hover { text-decoration: underline; }