/* swap.css — the swap screen. */
/* ── Swap ────────────────────────────────────────────────────────────────
   The verdict is the whole point of the screen, so it is the only thing that
   carries colour: green means the company saves money by agreeing, red means
   it costs them. Everything else stays neutral so the eye lands there first. */
.swpicks{display:grid;gap:8px;margin:4px 0 6px}
.swpick{display:grid;grid-template-columns:1fr auto auto;gap:4px 14px;align-items:center;
 text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;
 padding:11px 14px;cursor:pointer;color:var(--txt);font-family:inherit;transition:.15s}
.swpick:hover{border-color:var(--faint)}
.swpick.on{border-color:var(--acc);background:var(--raise)}
.swpick .rt{font-weight:700;font-size:14px;letter-spacing:.2px}
/* Tech stops sit under the route rather than on it — see displayRoute. */
.via{display:block;font-weight:600;font-size:11px;color:var(--faint);letter-spacing:.3px;margin-top:2px}
.swpick .wh{color:var(--dim);font-size:12px;white-space:nowrap}
.swpick .hr{font-family:var(--mono);font-weight:700;font-size:14px;white-space:nowrap}
.swpick .hr small{color:var(--faint);font-weight:600;margin-left:2px}
.swmode{display:flex;gap:8px;margin:14px 0 2px}
.swmode button{flex:1;background:transparent;border:1px solid var(--line);border-radius:12px;
 padding:9px;font-size:13px;font-weight:700;color:var(--dim);cursor:pointer;font-family:inherit;transition:.15s}
.swmode button.on{border-color:var(--acc);color:var(--acc);background:var(--raise)}
/* These notes are the best content in the app — they say things about your
   own pay you could not work out from the chart. They were set at 12px in
   the faintest ink across 106 characters a line, which is roughly the worst
   way to present a paragraph anybody is meant to read. Same words, set to be
   read: 68ch measure, the secondary ink rather than the metadata ink. */
.swnote{color:var(--dim);font-size:13px;line-height:1.62;margin:11px 2px 2px;
  max-width:68ch;text-wrap:pretty}
.swnote b,.swnote strong{color:var(--txt);font-weight:650}
.swlist{display:grid;gap:11px}
.swrow{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:12px;padding:13px 15px}
.swrow.good{border-left-color:var(--air)}
.swrow.bad{border-left-color:var(--bad)}
/* Cost-neutral is an approval, not a shrug — the company's bar is "saves money
   OR spends no more". A grey edge made it read as the weaker half of a group it
   is a full member of, so it takes the same green, dimmed to keep a saving
   first among equals. */
.swrow.ok{border-left-color:color-mix(in srgb,var(--air) 45%,var(--line))}
.swhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.swwho b{display:block;font-size:15px}
.swwho span{color:var(--faint);font-size:11px;font-family:var(--mono)}
.swpill{font-size:11px;font-weight:700;padding:4px 9px;border-radius:8px;white-space:nowrap;
 background:var(--raise);color:var(--dim);border:1px solid var(--line)}
.swpill.good{background:color-mix(in srgb,var(--air) 16%,transparent);color:var(--air);border-color:transparent}
.swpill.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad);border-color:transparent}
.swpill.ok{background:color-mix(in srgb,var(--air) 9%,transparent);color:var(--air);border-color:transparent}
.swav{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;margin:9px 0 0;font-size:12px}
.swav b{font-size:13px}
.swav.reserve b{color:var(--trn)}
.swav.hday b{color:var(--flt)}
.swav.leave b{color:var(--dh)}
.swav.free b{color:var(--air)}
h2.swno{color:var(--bad)}
h2.swno .n{color:var(--bad)}
.swav span{color:var(--faint)}
.swav .room{font-family:var(--mono);color:var(--air);font-weight:700}
.swav .room.over{color:var(--dim)}
.swtrade{margin-top:8px;font-size:12px;color:var(--dim);background:var(--raise);
 border-radius:8px;padding:8px 11px}
.swioe{margin-top:8px;font-size:12px;color:var(--trn);background:color-mix(in srgb,var(--trn) 10%,transparent);
 border-radius:8px;padding:8px 11px;line-height:1.55}
.swioe span{color:var(--dim);display:block;margin-top:2px}
.swtrade b{color:var(--txt)}
/* nowrap so the range never breaks mid-way and orphans "5 Sep" onto its own line */
.swtrade span{color:var(--faint);margin-left:6px;white-space:nowrap}
.swtrade .via{display:inline;margin:0 0 0 6px}
.swmoney{display:flex;gap:8px;margin:11px 0 3px}
.swmoney .mm{flex:1;background:var(--raise);border-radius:8px;padding:8px 10px;min-width:0}
.swmoney .k{color:var(--faint);font-size:10px;text-transform:uppercase;letter-spacing:.6px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swmoney .v{font-family:var(--mono);font-weight:700;font-size:15px;margin-top:2px}
.swmoney .v.good{color:var(--air)}
.swmoney .v.bad{color:var(--bad)}
.swacts{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:10px;align-items:center}
/* flex:0 0 auto — without it the three actions shrink below their own text and
   "Ask on WhatsApp" is clipped on a phone instead of wrapping to a second line. */
.swacts .lnk{flex:0 0 auto;white-space:nowrap;background:none;border:0;padding:0;
 font-family:inherit;font-size:12px;font-weight:700;color:var(--dim);cursor:pointer;text-decoration:none}
.swacts .lnk:hover{color:var(--acc)}
/* swwa, not wa — .wa is already the 19px circular icon on the crew chips, and
   reusing it collapsed this text link to a green dot. */
.swacts .lnk.swwa{color:#25D366}
.swpitch{width:100%;margin-top:12px;background:var(--raise);border:1px solid var(--line);
 border-radius:12px;padding:11px 13px;color:var(--txt);font-family:inherit;font-size:13px;
 line-height:1.6;resize:vertical}
.swwho .orank{font-style:normal;color:var(--trn);font-family:var(--sans);font-size:11px}
.swh3{margin:22px 0 0;font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--faint)}
.swcomp{margin:12px 0}
.swcomp>b{font-size:13px}
.swcomp.none{display:flex;gap:8px;align-items:baseline}
.swcomp.none span{color:var(--faint);font-size:12px}
.swcomp .swtab{margin:5px 0 0}
.swwhy p{color:var(--dim);font-size:13px;line-height:1.65;margin:12px 0}
.swwhy p.warn{color:var(--trn)}
.swwhy p.cav{color:var(--faint);font-size:11px;line-height:1.6}
.swwhy .cav b{color:var(--dim)}
.swtab{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0}
.swtab th{color:var(--faint);font-size:10px;text-transform:uppercase;letter-spacing:.6px;
 text-align:right;padding:0 0 6px;font-weight:700}
.swtab th:first-child{text-align:left}
.swtab td{padding:7px 0;text-align:right;font-family:var(--mono);border-top:1px solid var(--line2)}
.swtab td:first-child{text-align:left;font-family:var(--sans);color:var(--dim)}
.swtab .tot td{border-top:1px solid var(--line);font-weight:700}
.swtab td.good{color:var(--air)}
.swtab td.bad{color:var(--bad)}