/* Flightify — a quiet concrete working surface; the only loud thing is the
   fare board (departure-board black with amber numbers), because comparing
   the same flight across accounts is what this tool is for. */
:root {
  --concrete: #eceeea;
  --surface: #fbfcfa;
  --ink: #16213a;
  --muted: #5e6878;
  --line: #d6dad3;
  --board: #111418;
  --board-line: #262b33;
  --board-label: #8b94a3;
  --flap: #ffb020;
  --go: #0f7a55;
  --go-soft: #e2f2ea;
  --stop: #b83227;
  --stop-soft: #f8e5e2;
  --link: #1f4fd1;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--concrete); color: var(--ink); font: 16px/1.5 var(--body); }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--flap); outline-offset: 2px;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* top bar */
.bar { background: var(--ink); color: #fff; }
.bar-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 28px; min-height: 58px; }
.brand { font: 700 1.55rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none; }
.brand span { color: var(--flap); }
.nav { display: flex; gap: 4px; }
.nav a { color: #c9d0dc; text-decoration: none; font-weight: 700; padding: 6px 10px; border-radius: 6px; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a.on { color: var(--ink); background: #fff; }
.pulse { margin-left: auto; font-size: .82rem; color: #c9d0dc; display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--go); display: inline-block; flex: none; }
.dot.bad { background: var(--flap); }

main { max-width: 1120px; margin: 0 auto; padding: 28px 20px 64px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; margin: 0; }
h1 { font-size: 2.3rem; line-height: 1.05; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
.lede { color: var(--muted); max-width: 680px; margin: 6px 0 0; }
.section { margin-top: 36px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-head p { margin: 0; color: var(--muted); font-size: .9rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }

/* flashes */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 700; }
.flash.ok { background: var(--go-soft); color: var(--go); }
.flash.error { background: var(--stop-soft); color: var(--stop); }
.notice { background: #fff1d6; color: #6b4600; border-radius: 8px; padding: 10px 14px; margin: 18px 0 0; }
.notice a { color: inherit; font-weight: 700; }
.errors { background: var(--stop-soft); color: var(--stop); border-radius: 8px; padding: 10px 14px 10px 32px; margin: 0 0 16px; }

/* trip stubs: route block | perforation | price block */
.stubs { display: grid; gap: 12px; }
.stub { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center;
        background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; }
.stub:hover { border-color: var(--ink); }
.stub.paused { opacity: .6; }
.stub-route { padding: 16px 20px; border-right: 2px dashed var(--line); }
.codes { font: 700 2.1rem/1 var(--display); letter-spacing: .04em; }
.codes .arrow { color: var(--muted); font-weight: 600; margin: 0 .2em; }
.stub-meta { color: var(--muted); font-size: .88rem; margin-top: 6px; }
.stub-price { padding: 16px 20px; }
.stub-price .big { font: 600 1.6rem/1.1 var(--mono); }
.stub-price .unit { font: 400 .8rem var(--body); color: var(--muted); margin-left: 3px; }
.stub-price .sub { color: var(--muted); font-size: .85rem; }
.stub-state { padding: 16px 20px; text-align: right; font-size: .85rem; }
.tag { display: inline-block; border-radius: 99px; padding: 2px 10px; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.tag.go { background: var(--go-soft); color: var(--go); }
.tag.warn { background: #fff1d6; color: #8a5a00; }
.tag.stop { background: var(--stop-soft); color: var(--stop); }
.tag.plain { background: #e3e6e0; color: var(--muted); }
.empty { border: 2px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; color: var(--muted); }

/* forms */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .wide { grid-column: span 2; }
.field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 4px; }
.field .hint { color: var(--muted); font-size: .8rem; margin-top: 3px; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=password], select {
  width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #b9bfb6; border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit;
}
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; padding: 0; }
.fieldsets { display: grid; gap: 22px; }
.check, .field label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px;
       border-radius: 8px; border: 2px solid var(--ink); background: var(--ink); color: #fff;
       font: 700 .95rem var(--body); cursor: pointer; text-decoration: none; }
.btn:hover { background: #24345a; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: #e3e6e0; }
.btn.danger { background: transparent; color: var(--stop); border-color: var(--stop); }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: .85rem; }
form.inline { display: inline; }

/* trip header */
.trip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.trip-head .codes { font-size: 3.2rem; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.fact .label { color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fact .value { font: 600 1.45rem/1.2 var(--mono); margin-top: 4px; }
.fact .note { color: var(--muted); font-size: .84rem; }

/* THE FARE BOARD */
.board { background: var(--board); color: #e9edf3; border-radius: 12px; padding: 18px 18px 8px; overflow-x: auto; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.board-title { font: 700 1.3rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--flap); }
.board-sub { color: var(--board-label); font-size: .82rem; }
.board table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; }
.board th { color: var(--board-label); font: 700 .72rem var(--body); text-transform: uppercase; letter-spacing: .1em;
            text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--board-line); white-space: nowrap; }
.board td { padding: 10px 10px; vertical-align: top; border-bottom: 1px solid var(--board-line); font-family: var(--mono);
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.board tr:last-child td { border-bottom: 0; }
.board th.acct, .board td.acct { text-align: right; }
.board .flight { color: #fff; font-weight: 600; }
.board .dim { color: var(--board-label); }
.board td.acct { color: var(--flap); }
.board td.acct.low { background: var(--flap); color: var(--board); font-weight: 700; }
.board td.acct.missing { color: #4a515c; }
.board .gap { color: var(--board-label); font-size: .82rem; }
.board .gap.hot { color: var(--flap); }
.board .pin { position: sticky; left: 0; background: var(--board); z-index: 1; }
.board .airline { color: var(--board-label); font: 400 .74rem/1.3 var(--body); max-width: 200px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.board .onboard { display: flex; gap: 10px; align-items: center; margin-top: 5px;
                  font: 500 .72rem var(--mono); }
.board .onboard span { display: inline-flex; align-items: center; gap: 3px; cursor: help; }
/* Each row has the same icon slots: bright = offered, faded = not offered. */
.board .onboard .on { color: #eef1f6; }
.board .onboard .part { color: #eef1f6; opacity: .55; }
.board .onboard .off { color: #8b94a3; opacity: .28; }
.board .onboard .pending { color: var(--board-label); font: 400 .72rem var(--body); cursor: default; }
.board .warn { color: var(--flap); }
.ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
       stroke-linecap: round; stroke-linejoin: round; }
.board-key { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin: 0 0 10px;
             color: #c3cad6; font-size: .8rem; }
.board-key span { display: inline-flex; align-items: center; gap: 5px; }
.board-key .warn { color: var(--flap); }
.board-key .key-note, .board-key.key-note { color: var(--board-label); }
.board .col-status { display: block; font: 400 .7rem var(--body); letter-spacing: 0; text-transform: none; color: #e7a09a; }

/* sign-in and access (public server) */
.signin { display: grid; place-items: center; min-height: 60vh; }
.signin-card { max-width: 440px; width: 100%; text-align: center; padding: 28px 24px; }
.signin-card h1 { margin-bottom: 10px; }
.signin-widget { margin: 20px 0 12px; min-height: 48px; }
.me { display: flex; align-items: center; gap: 8px; color: #dfe4ec; font-size: .86rem; margin-left: 14px; }
.me img { border-radius: 50%; }
.me-role { color: var(--flap); font-size: .76rem; margin-left: 2px; }
.me .linkish { color: #dfe4ec; margin-left: 4px; }
.nav-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--flap);
             color: var(--ink); font-size: .72rem; font-weight: 700; text-align: center; }
.person { display: flex; gap: 12px; align-items: center; }
.person img, .person-initial { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.person-initial { display: grid; place-items: center; background: #e3e6e0; font-weight: 700; }
.person-name { font-weight: 700; }

/* fare classes guide */
.guide ul { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; }
.guide li { line-height: 1.5; }
.guide-table .letters { font: 600 1rem var(--mono); white-space: nowrap; }
.seen-trip { margin-bottom: 14px; }
.seen-trip h3 { margin: 0 0 8px; font-size: 1rem; }
.seen-airline { font-weight: 700; width: 30%; }
.seen-letters { line-height: 2.1; }
.cls-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border-radius: 99px;
            background: #e3e6e0; font: 500 .86rem var(--mono); white-space: nowrap; }
.cls-chip b { font-size: 1rem; }
.cls-arrow { color: var(--muted); margin: 0 6px; }
.board-key .key-link { color: var(--flap); }

/* what to buy */
.buy { display: grid; gap: 12px; margin-bottom: 14px; }
.buy-line { display: flex; gap: 14px; align-items: center; }
.buy-count { font: 600 1.9rem/1 var(--mono); min-width: 2ch; text-align: right; color: var(--ink); }
.buy-text { flex: 1; min-width: 0; }
.buy-open { white-space: nowrap; }
.plan-compare { margin: 12px 0 0; color: var(--ink); }
.nowrap { white-space: nowrap; }
.form-grid .span-all { grid-column: 1 / -1; }
.field-label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.account-picks { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.account-picks .check { align-items: center; gap: 8px; }

/* booking plan (groups over 9) */
table.plain.plan tfoot td { border-top: 2px solid var(--line); border-bottom: 0; }
table.plain.plan .tag { margin-top: 4px; }
.m-only { display: none; }
/* Recheck: a link-looking button next to "Open", its result on the row below. */
.linkish { background: none; border: 0; padding: 0; margin-left: 12px; font: inherit; color: var(--link);
           text-decoration: underline; cursor: pointer; }
.linkish:disabled { color: var(--muted); text-decoration: none; cursor: default; }
table.plain.plan tr:has(+ .recheck-row) td { border-bottom: 0; }
table.plain.plan .recheck-row td { padding-top: 0; font-size: .86rem; }
table.plain.plan .recheck-row .tag { margin: 0 6px 0 0; }
/* Phones: each booking stacks as "# | who, account | per person, total, link". */
@media (max-width: 600px) {
  table.plain.plan thead { display: none; }
  table.plain.plan, table.plain.plan tbody, table.plain.plan tfoot { display: block; }
  table.plain.plan tr { display: grid; grid-template-columns: 22px 1fr auto; column-gap: 10px;
                        grid-template-areas: "num who pp" "num acct total" "num acct open";
                        padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.plain.plan tfoot tr { grid-template-areas: "num who total"; border-bottom: 0; border-top: 2px solid var(--line); }
  table.plain.plan tr.recheck-row { grid-template-areas: "num note"; grid-template-columns: 22px 1fr; padding-top: 0; }
  table.plain.plan tr:has(+ .recheck-row) { border-bottom: 0; }
  table.plain.plan .c-note { grid-area: note; }
  table.plain.plan td, table.plain.plan tfoot td { padding: 0; border: 0; }
  table.plain.plan .c-num { grid-area: num; } table.plain.plan .c-who { grid-area: who; }
  table.plain.plan .c-acct { grid-area: acct; } table.plain.plan .c-pp { grid-area: pp; }
  table.plain.plan .c-total { grid-area: total; } table.plain.plan .c-open { grid-area: open; }
  table.plain.plan tbody .c-total { color: var(--muted); font-size: .86rem; }
  .m-only { display: inline; }
}
.plan-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fff1d6; color: #8a5a00; }

/* shared tooltip (data-tip) */
#tip { position: fixed; z-index: 100; max-width: min(320px, calc(100vw - 16px)); padding: 9px 11px;
       background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
       box-shadow: 0 10px 28px rgba(0, 0, 0, .28); font: 400 .83rem/1.45 var(--body);
       text-transform: none; letter-spacing: 0; pointer-events: none; }
.tip-label { border-bottom: 1px dotted currentColor; cursor: help; }
[data-tip] { cursor: help; }
.board .seats-low { color: var(--flap); font-weight: 600; }

/* tables */
table.plain { width: 100%; border-collapse: collapse; }
table.plain th { text-align: left; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; padding: 8px; border-bottom: 1px solid var(--line); }
table.plain td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plain tr:last-child td { border-bottom: 0; }
table.plain .r { text-align: right; }
.table-wrap { overflow-x: auto; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.chart-box { position: relative; height: 300px; }
pre.msg { white-space: pre-wrap; font: .82rem/1.45 var(--mono); background: #f0f2ee; border-radius: 8px; padding: 10px; margin: 6px 0 0; }
details > summary { cursor: pointer; font-weight: 700; }

/* accounts */
.acct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.acct-row:last-child { border-bottom: 0; }
.acct-name { font: 700 1.25rem/1.1 var(--display); }

@media (max-width: 900px) {
  .board .opt { display: none; }
}
@media (max-width: 860px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .stub { grid-template-columns: minmax(0, 1fr) auto; }
  .stub-route { grid-column: 1 / -1; border-right: 0; border-bottom: 2px dashed var(--line); }
}
@media (max-width: 560px) {
  .bar-inner { flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; }
  .pulse { margin-left: 0; width: 100%; }
  main { padding: 20px 16px 48px; }
  h1 { font-size: 1.9rem; }
  .trip-head .codes, .codes { font-size: 1.8rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact .value { font-size: 1.15rem; }
  .stub-state { text-align: left; }
  .board .opt-sm { display: none; }
  .board table { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }