/* Release-alert pages (RFC 0002). Bootstrap does the layout; this is the skin. */
:root {
  --yellow:#f4c430; --yellow-hover:#ffda6b; --dark:#3d3d3d; --gray:#4a4a4a;
  --amber:#b45309; --amber-bg:#fff4dc; --green:#1e7b3a; --green-bg:#e8f7ec;
}
body { font-family:Inter,sans-serif; color:var(--gray); background:#fafaf7; }
.wrap { max-width:640px; margin:0 auto; }
.brand { font-weight:800; font-size:1.4rem; color:var(--dark); text-decoration:none; }
.brand span { color:var(--yellow); }
h1 { font-weight:800; color:var(--dark); font-size:clamp(1.7rem,4.5vw,2.6rem); line-height:1.15; }
h2 { font-weight:800; color:var(--dark); font-size:1.25rem; }
.meta { font-size:.88rem; color:#777; }
.card-soft { background:#fff; border:1px solid #eee; border-radius:16px; }
.btn-brand { background:var(--yellow); color:var(--dark); font-weight:700; border:0; }
.btn-brand:hover { background:var(--yellow-hover); color:var(--dark); }

.verdict { border-radius:14px; padding:1rem 1.1rem; display:flex; gap:.8rem; align-items:flex-start; }
.verdict.closed  { background:var(--amber-bg); border:1px solid #f5d38a; }
.verdict.open    { background:var(--green-bg); border:1px solid #bfe5c8; }
.verdict.unknown { background:#f1f1f1;         border:1px solid #ddd; }
.verdict .big  { font-weight:800; font-size:1.2rem; color:var(--dark); line-height:1.2; }
.verdict .icon { font-size:1.5rem; line-height:1; }

.airline-row { display:flex; justify-content:space-between; gap:.6rem; padding:.55rem 0;
               border-top:1px solid #f0f0f0; font-size:.93rem; }
.airline-row:first-child { border-top:0; }
.airline-row .name { font-weight:600; color:var(--dark); }
.tag { font-size:.76rem; font-weight:700; padding:.15em .6em; border-radius:999px; white-space:nowrap; }
.tag.closed { background:var(--amber-bg); color:var(--amber); }
.tag.open   { background:var(--green-bg); color:var(--green); }

.reassure { font-size:.82rem; color:#777; }
.reassure b { color:var(--dark); font-weight:600; }

.win { display:block; background:#fff; border:1px solid #eee; border-radius:12px;
       padding:.7rem .85rem; text-decoration:none; color:inherit; transition:box-shadow .15s; }
.win:hover { box-shadow:0 4px 14px rgba(0,0,0,.07); color:inherit; }
.win .name { font-weight:600; color:var(--dark); font-size:.95rem;
              flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.win .meta { flex:0 0 auto; padding-left:.5rem; }
.win .upto { font-weight:800; color:var(--dark); font-size:1.05rem; }

.step { display:flex; gap:.7rem; font-size:.93rem; }
.step .n { flex:0 0 1.6rem; height:1.6rem; border-radius:50%; background:var(--yellow);
           color:var(--dark); font-weight:800; font-size:.85rem;
           display:flex; align-items:center; justify-content:center; }

/* honeypot: off-screen, not display:none, so bots still fill it */
.hp { position:absolute; left:-9999px; height:0; overflow:hidden; }

/* Board: a summary and a change feed, not a list of every route */
.panel { background:#fff; border:1px solid #eee; border-radius:14px; padding:1rem 1.1rem; height:100%; }
.panel-title { font-weight:700; color:var(--dark); font-size:.95rem; margin:0 0 .6rem; }
.feed { list-style:none; padding:0; margin:0; font-size:.93rem; }
.feed li { padding:.35rem 0; border-top:1px solid #f2f2f2; }
.feed li:first-child { border-top:0; }
details > summary { cursor:pointer; }
details > summary::marker { color:var(--yellow); }

/* Airport autocomplete */
.ac-wrap { position:relative; }
.ac-list { position:absolute; z-index:20; left:0; right:0; top:100%; margin:.25rem 0 0;
           padding:.25rem; list-style:none; background:#fff; border:1px solid #e3e3e3;
           border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.10); max-height:17rem;
           overflow:auto; }
.ac-item { padding:.45rem .6rem; border-radius:8px; cursor:pointer;
           display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.ac-item:hover, .ac-item.is-active { background:#fdf4d4; }
.ac-label { font-weight:600; color:var(--dark); }
.ac-detail { font-size:.78rem; color:#888; text-align:right; flex:0 0 auto;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:55%; }

/* Month strip: when does this route actually fly */
.strip { display:flex; flex-wrap:wrap; gap:.3rem; }
.mon { flex:1 1 3.7rem; min-width:3.7rem; text-align:center; padding:.35rem .15rem;
       border:1px solid #eee; border-radius:8px; background:#f7f7f5; color:#999;
       text-decoration:none; line-height:1.1; }
.mon:hover { border-color:#ccc; color:#666; }
.mon.is-open { background:var(--yellow); border-color:var(--yellow); color:var(--dark); }
.mon.is-open:hover { background:var(--yellow-hover); color:var(--dark); }
.mon.is-current { outline:2px solid var(--dark); outline-offset:1px; }
.mon-m { display:block; font-weight:700; font-size:.8rem; }
.mon-y { display:block; font-size:.68rem; opacity:.75; }
.mon-p { display:block; font-size:.68rem; font-weight:600; margin-top:.1rem; }
.mon-p-none { visibility:hidden; }

/* Swap departure and destination */
.swap-col { display:flex; flex-direction:column; align-items:center; }
/* Exactly the height of .form-control-lg, so its centre line matches the fields. */
.swap { width:3rem; height:3rem; border-radius:50%; border:1px solid #e3e3e3;
        background:#fff; color:var(--gray); font-size:1.1rem; line-height:1;
        cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.swap:hover { background:var(--yellow); border-color:var(--yellow); color:var(--dark); }
.swap:active { transform:rotate(180deg); }
.swap:focus-visible { outline:2px solid var(--dark); outline-offset:2px; }

/* Content pages. Same 640px column as the landing page; .prose only adjusts
   what long-form text needs, so the landing hero keeps its own sizes. */
.prose h1 { font-size:clamp(1.5rem,3.5vw,2rem); }
.prose h2 { font-size:1.15rem; }
.prose p, .prose li { line-height:1.6; }
.prose ul, .prose ol { padding-left:1.2rem; }
.prose li { margin-bottom:.35rem; }

/* One question and its answer. Bootstrap's border is heavier than the rest of
   the site, so the rule is here rather than a utility class. */
.qa { padding:.6rem 0; border-bottom:1px solid #ececec; }
.qa summary { list-style-position:outside; }

a { color:var(--dark); }
a:hover { color:#000; }
.text-reset:hover { color:var(--dark) !important; }

/* Phones: the fields stack, so the swap sits between them and the suggestion
   list gets the full width of the card instead of a 40% column. */
@media (max-width: 575.98px) {
  /* Get the form onto the first screen: the pitch is one line, not three. */
  h1 { font-size:1.55rem; }
  header.container { padding-top:.5rem !important; padding-bottom:.75rem !important; }
  .lead { font-size:1rem; }
  .swap-col { margin:-.35rem 0 .1rem; }
  .swap { transform:rotate(90deg); }
  .swap:active { transform:rotate(270deg); }
  .ac-item { flex-direction:column; align-items:flex-start; gap:0; }
  .ac-detail { max-width:100%; text-align:left; }
  .mon { flex:1 1 4rem; }
}