/* 34.6.0: "hidden" always wins. A button style (display: inline-block)
   was beating it, so hidden buttons still showed (Brian, 27 September). */
[hidden] { display: none !important; }

/* Steck Aviation Maintenance Tracker. Stage 1 */
:root {
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --hairline: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #1c5cab;

  /* status palette (icon + label always accompany color) */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --good-tint: #e7f5e7;
  --warning-tint: #fdf3d9;
  --critical-tint: #fae5e5;
  --neutral-tint: #f0efec;
  --good-text: #006300;
  --warning-text: #6b4a00;
  --critical-text: #8f1f1f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- header ---- */
/* The top line stays on screen while the page scrolls (34.3.1), so the
   Messages count can be seen from anywhere. Only this thin line is pinned;
   the row of links under it scrolls away, so a phone loses very little. */
header {
  background: #10243e;
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 50;
}
header .brand { font-weight: 650; font-size: 16px; letter-spacing: 0.2px; color: #fff; }
header .brand span { color: #9ec5f4; font-weight: 500; }
.subnav { background: #10243e; border-top: 1px solid rgba(255,255,255,.08);
          padding: 0 24px 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.subnav a { color: #cfd8e4; font-size: 14px; padding: 4px 2px; }
.subnav a.active, .subnav a:hover { color: #fff; text-decoration: none; border-bottom: 2px solid #9ec5f4; }
.msgbtn { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto;
          padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 600;
          color: #fff; background: rgba(255,255,255,.12); white-space: nowrap; }
.msgbtn:hover { text-decoration: none; background: rgba(255,255,255,.2); }
.msgbtn.new { background: var(--good); }
.msgbtn.urgent { background: var(--critical); }
.msgbtn .msgn { background: #fff; color: #10243e; border-radius: 999px; min-width: 20px;
                padding: 0 6px; font-size: 12.5px; font-weight: 750; line-height: 20px;
                text-align: center; }
.msgbtn.new .msgn { color: var(--good-text); }
.msgbtn.urgent .msgn { color: var(--critical-text); }
@media print { header, .subnav { position: static; } .msgbtn, .subnav { display: none; } }
/* 37.0.27 (agent recheck N3-03): a printout is the document: no signed-in name, Sign out or top bar. */
@media print { .userbox, .refreshbtn, .netstate { display: none !important; } body:has(.doc) > header, body:has(.printbar) > header { display: none !important; } }

main { max-width: 1100px; margin: 0 auto; padding: 24px 24px 64px; }
h1 { font-size: 22px; font-weight: 650; margin: 8px 0 4px; }
h2 { font-size: 16px; font-weight: 650; margin: 26px 0 10px; }
.sub { color: var(--ink-2); font-size: 14px; margin: 0 0 18px; }

.flash {
  background: #e8f0fb; border: 1px solid #b7d3f6; color: #0d366b;
  padding: 10px 14px; border-radius: 8px; margin: 14px 0; font-size: 14px;
}

/* ---- KPI tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0 22px; }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px;
}
.tile .num { font-size: 28px; font-weight: 650; line-height: 1.1; }
.tile .lbl { font-size: 13px; color: var(--ink-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; }

/* ---- cards & tables ---- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  /* auto, not hidden (34.4.0): anything wider than the screen scrolls inside
     its card instead of being cut off where nobody can reach it. */
  overflow-x: auto; margin-bottom: 20px;
}
.card .card-head {
  padding: 12px 16px; border-bottom: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.card .card-head h2 { margin: 0; font-size: 15px; }
/* 37.0.2 (Brian's demo notes 63, 64, iPhone at 402 px): on a phone the note
   beside a card's title goes under it instead of squeezing the title. */
@media (max-width: 600px) { .card .card-head { flex-wrap: wrap; row-gap: 6px; } }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 10px 16px; border-bottom: 1px solid var(--hairline);
}
td { padding: 11px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr.rowlink:hover { background: #f4f4f1; cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }
.small { font-size: 13px; color: var(--ink-2); }

/* ---- status badges: dot icon + label, never color alone ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; border-radius: 999px;
  padding: 3px 10px 3px 8px; white-space: nowrap;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.badge.ok        { background: var(--good-tint);    color: var(--good-text); }
.badge.ok .dot   { background: var(--good); }
.badge.due_soon  { background: var(--warning-tint); color: var(--warning-text); }
.badge.due_soon .dot { background: var(--warning); border: 1px solid #c98500; }
.badge.overdue   { background: var(--critical-tint); color: var(--critical-text); }
.badge.overdue .dot { background: var(--critical); }
.badge.no_baseline { background: var(--neutral-tint); color: var(--ink-2); }
.badge.no_baseline .dot { background: var(--muted); }

/* ---- buttons & forms ---- */
.btn {
  display: inline-block; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: #184f95; text-decoration: none; }
.btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.btn.secondary:hover { background: #f0efec; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.danger { background: transparent; color: var(--critical-text); border: none; font-weight: 500; font-size: 13px; padding: 4px; }

form.stack { max-width: 660px; }
fieldset {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 16px 18px 18px; margin: 0 0 16px;
}
legend { font-weight: 650; font-size: 14px; padding: 0 6px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 10px 0 4px; }
input:not([type]), input[type="time"], input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #c9c8c1; border-radius: 7px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #86b6ef; border-color: var(--accent); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 3px; font-weight: 400; }
.actions { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- login ---- */
.login-page { background: #10243e; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { background: var(--surface); border-radius: 14px; padding: 30px 28px; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.login-brand { text-align: center; margin-bottom: 18px; }
.login-logo { font-size: 34px; }
.login-title { font-weight: 700; font-size: 18px; letter-spacing: 1px; color: #10243e; margin-top: 4px; }
.login-sub { font-size: 13px; color: var(--muted); }
.login-error { background: var(--critical-tint); color: var(--critical-text); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 8px; }
.login-btn { width: 100%; margin-top: 16px; padding: 11px; font-size: 15px; }

/* ---- header user box ---- */
header .userbox { display: flex; align-items: center; gap: 12px; }
header .username { color: #cfd8e4; font-size: 13px; }
header .signout { color: #9ec5f4; font-size: 13px; }

/* ---- home tiles ---- */
.home-head { margin: 6px 0 14px; }
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.apptile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 14px 14px; text-decoration: none; color: var(--ink); position: relative;
  display: block; transition: box-shadow 0.12s, transform 0.12s;
}
a.apptile:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(16,36,62,0.12); transform: translateY(-1px); }
.apptile-icon { font-size: 30px; margin-bottom: 8px; }
.apptile-title { font-weight: 650; font-size: 15px; }
.apptile-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.apptile.soon { opacity: 0.62; }
.apptile-badge {
  position: absolute; top: 10px; right: 10px; background: var(--neutral-tint);
  color: var(--ink-2); font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px;
}
/* How many are waiting for you. Deliberately louder than the "Coming soon"
   badge above: that one is describing a tile, this one is asking for something.
   It only appears when the number is not zero, so an empty tile stays quiet. */
.apptile-count {
  position: absolute; top: 10px; right: 10px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink, #10243e); color: #fff;
  font-size: 12px; font-weight: 700; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  /* The header was a fixed-height row of nowrap links, so on a phone it simply
     ran off the right and took every page with it: 94px of sideways scroll on
     every screen in the app. It wraps instead. Brand and sign-out on the first
     line, the navigation underneath, wrapping as far as it needs to. Nothing is
     hidden behind a menu button, because the thing somebody needs at the ramp
     should not be two taps away. */
  header { padding: 0 12px; gap: 10px; height: 48px; }
  header .brand { font-size: 14px; white-space: nowrap; }
  header .brand span { display: none; }
  .subnav { padding: 2px 12px 8px; gap: 8px 14px; }
  .subnav a { font-size: 13px; white-space: nowrap; }
  .msgbtn { font-size: 13px; padding: 4px 10px; }
  header .userbox { margin-left: 0; }
  header .username { display: none; }
  main { padding: 16px 14px 48px; }
  .toprow { padding: 8px 14px 0; }
  .tilegrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- master schedule calendar ---- */
.calgrid { table-layout: fixed; min-width: 700px; }
.calgrid th { text-align: center; padding: 8px 4px; }
.calday { vertical-align: top; height: 86px; padding: 4px 5px; border-right: 1px solid var(--hairline); }
.calday:last-child { border-right: none; }
.calday.dim-day { background: #f4f4f1; }
.calday.today { background: #eef4fc; }
.calday.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.daynum { font-size: 12.5px; font-weight: 650; color: var(--ink-2); display: inline-block; margin-bottom: 3px; }
.daynum.dim { color: #c3c2b7; }
.tripbar {
  display: block; color: #fff; font-size: 11px; font-weight: 600;
  border-radius: 5px; padding: 2px 6px; margin: 2px 0; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tripbar:hover { text-decoration: none; filter: brightness(1.1); }

/* ---- squawk cards ---- */
.sqlist { display: flex; flex-direction: column; gap: 10px; }
.sqcard {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none;
}
.sqcard:hover { text-decoration: none; box-shadow: 0 3px 10px rgba(16,36,62,0.10); }
.sqcard.resolved { opacity: 0.65; }
.sqcard-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sqcard-tail { font-weight: 700; font-size: 15px; }
.sqcard-type { color: var(--muted); font-size: 12.5px; }
.sqcard-status { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sqcard-desc { margin-top: 7px; font-size: 14.5px; line-height: 1.45; }
.sqcard-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---- aircraft detail ---- */
.acgrid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .acgrid { grid-template-columns: 1fr; } .grid2, .grid3 { grid-template-columns: 1fr; } }
dl.spec { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
dl.spec dt { color: var(--muted); }
dl.spec dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.inline-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.inline-form > div { flex: 1; min-width: 110px; }
.pagehead { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ================================================================ printed documents
   Every document a customer or an inspector sees shares one letterhead, so one
   is recognisable at a glance and the issuing entity is never ambiguous , 
   Steck Aviation LLC does the work; Steck Aviation Management LLC bills the
   management fee. They are different companies and the paper has to say so. */
:root {
  --steck-navy: #002469;   /* from Ryan's artwork, not approximated */
  --steck-red:  #EB3141;
}

.doc { background: #fff; color: #111; max-width: 8.5in; margin: 0 auto 28px;
       padding: 0.55in 0.6in; border: 1px solid var(--hairline); border-radius: 6px; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start;
            gap: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--steck-navy); }
.doc-head .brand img { width: 230px; height: auto; display: block; }
.doc-head .issuer { font-size: 11.5px; line-height: 1.5; color: #333; margin-top: 8px; }
.doc-head .issuer strong { color: var(--steck-navy); font-size: 12.5px; }
.doc-title { text-align: right; flex: 0 0 auto; }
.doc-title h1 { font-size: 21px; margin: 0; letter-spacing: -0.01em; color: var(--steck-navy);
                text-transform: uppercase; }
.doc-title .num { font-size: 15px; font-weight: 600; margin-top: 2px; }
.doc-title .meta { font-size: 11.5px; color: #555; margin-top: 6px; line-height: 1.5; }

.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.doc-block h3 { font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
                color: #777; margin: 0 0 5px; font-weight: 700; }
.doc-block .body { font-size: 12.5px; line-height: 1.55; }
.doc-block .body strong { font-size: 13px; }

.doc h2.sec { font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
              color: var(--steck-navy); margin: 20px 0 6px; padding-bottom: 4px;
              border-bottom: 1px solid var(--hairline); font-weight: 700; }
.doc table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.doc table th { text-align: left; font-size: 9.5px; letter-spacing: .08em;
                text-transform: uppercase; color: #666; border-bottom: 1px solid #ccc;
                padding: 5px 8px 5px 0; font-weight: 700; }
.doc table td { padding: 6px 8px 6px 0; border-bottom: 1px solid #eee;
                vertical-align: top; }
/* Right-aligned numbers still need a gutter, or the figure runs into whatever
   is in the next column: a line number touching its own description, "Hours"
   touching "Done". The gutter is only removed at the edge of the table. */
.doc table td.num, .doc table th.num { text-align: right; padding-left: 10px;
                padding-right: 12px; font-variant-numeric: tabular-nums; }
.doc table th:last-child, .doc table td:last-child { padding-right: 0; }
.doc table th:first-child, .doc table td:first-child { padding-left: 0; }

/* The signature block. Deliberately unmistakable: this is the part that turns a
   piece of paper into a maintenance record under 14 CFR 43.9. */
.sigblock { margin-top: 18px; border: 1.5px solid var(--steck-navy); border-radius: 5px;
            padding: 12px 14px; }
.sigblock h3 { color: var(--steck-navy); font-size: 11px; letter-spacing: .1em;
               text-transform: uppercase; margin: 0 0 8px; }
.sigline { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-top: 10px; }
.sigline .f { border-bottom: 1px solid #333; min-height: 26px; }
.sigline .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em;
              color: #666; margin-top: 3px; }
.cert-text { font-size: 12.5px; line-height: 1.6; background: #f6f7f9;
             border-left: 3px solid var(--steck-navy); padding: 10px 12px; margin-top: 10px; }
.unsigned { border: 1.5px dashed var(--critical); background: var(--critical-tint);
            border-radius: 5px; padding: 10px 13px; margin-top: 16px;
            font-size: 12.5px; color: #7a1f1f; }
/* A draft that runs onto a second page must say so on the second page too.
   A fixed element repeats on every printed sheet, so the warning cannot be
   separated from the paper it belongs to by a page break. */
.draft-mark { display: none; }
.doc-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--hairline);
            font-size: 10.5px; color: #666; line-height: 1.55; }

.printbar { max-width: 8.5in; margin: 0 auto 12px; display: flex; gap: 10px;
            align-items: center; flex-wrap: wrap; }

@media print {
  body { background: #fff; }
  .topbar, nav, .printbar, .flash, footer, .no-print { display: none !important; }
  .doc { border: 0; border-radius: 0; margin: 0; padding: 0; max-width: none; }
  .doc h2.sec { break-after: avoid; }
  .doc table tr { break-inside: avoid; }
  .sigblock { break-inside: avoid; }
  .draft-mark { display: block; position: fixed; bottom: 0; left: 0; right: 0;
                text-align: center; font-size: 10px; font-weight: 700;
                letter-spacing: .14em; text-transform: uppercase;
                color: var(--critical); padding: 3px 0;
                border-top: 1px dashed var(--critical); background: #fff; }
  @page { margin: 0.5in 0.5in 0.7in; }
}

/* ------------------------------------------------------------- logbook label
   The entry as it goes into the aircraft's book: printed on Avery stock,
   signed by hand, stuck in. Not a letterhead document. A logbook page is a
   scarce permanent surface, so everything here is sized to put the maximum
   record on the minimum paper and nothing on it is decoration. */
.labelsheet { margin: 0 0 18px; }
.lbl { background: #fff; color: #000; border: 1px dashed #999; border-radius: 2px;
       padding: 0.10in 0.12in; box-sizing: border-box; overflow: hidden;
       font-family: "Helvetica Neue", Arial, sans-serif; }
.lbl.overflow { border: 1.5px solid var(--critical); }
.lbl-inner { font-size: 8.2px; line-height: 1.32; }
.lbl-shop { font-size: 7px; font-weight: 700; letter-spacing: .02em;
            text-transform: uppercase; border-bottom: 1px solid #000;
            padding-bottom: 1.5px; margin-bottom: 2.5px; }
.lbl-head { font-size: 8px; margin-bottom: 3px; }
.lbl-body { margin-bottom: 2.5px; white-space: pre-wrap; }
.lbl-cert { margin: 3px 0; font-weight: 600; }
.lbl-sig { display: flex; gap: 7px; margin-top: 5px; align-items: flex-end; }
.lbl-sig .s { flex: 1; }
.lbl-sig .s.narrow { flex: 0 0 58px; }
.lbl-sig .line { border-bottom: 1px solid #000; height: 13px; font-size: 8px;
                 padding: 0 1px; display: flex; align-items: flex-end; }
.lbl-sig .cap { font-size: 5.6px; text-transform: uppercase; letter-spacing: .05em;
                color: #333; padding-top: 1px; }
.lbl-esig { font-size: 5.6px; color: #444; margin-top: 3px; letter-spacing: .02em; }

@media print {
  .labelsheet { margin: 0; }
  .lbl { border: 0; padding: 0.10in 0.12in; break-inside: avoid; }
  @page { margin: 0.25in; }
}


/* ------------------------------------------------- environment and version
   Brian asked that every screen say which version it is and when it was
   published, so a bug report and the thing reported can be made to agree. */
.envbar { background: var(--warning-tint); color: var(--warning-text);
          border-bottom: 1px solid #e0b84a; text-align: center;
          font-size: 12.5px; font-weight: 650; padding: 5px 12px;
          letter-spacing: .02em; }
.sitefoot { max-width: 1100px; margin: 0 auto; padding: 18px 24px 40px;
            display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
            border-top: 1px solid var(--hairline); color: var(--muted);
            font-size: 12px; }
.sitefoot .ver { margin-left: auto; }
.sitefoot .env { text-transform: uppercase; letter-spacing: .08em;
                 font-weight: 700; color: var(--warning-text); }
@media print { .sitefoot, .envbar { display: none; } }


/* ------------------------------------------------------------- home groups
   Twenty tiles in one grid is a wall. The same twenty under four headings is
   a place somebody knows their way around by the second day. */
.tilegroup { margin-bottom: 26px; }
.tilegroup-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
                  margin: 0 0 10px; padding-bottom: 5px;
                  border-bottom: 1px solid var(--hairline); }
.tilegroup-head h2 { margin: 0; font-size: 14px; font-weight: 650;
                     letter-spacing: .02em; }


/* -------------------------------------------------------------- leave a note
   On every screen, for every role. It has to be findable without being in the
   way, so it sits as one quiet strip under the header, opens in place, and
   collapses again. The whole point is that leaving a note costs nothing: the
   moment it feels like an errand, people stop doing it and the feedback stops. */
.toprow { max-width: 1100px; margin: 0 auto; padding: 8px 24px 0; display: flex; flex-wrap: wrap;
          align-items: center; gap: 8px; min-height: 34px; }
.notebar { margin: 0; padding: 0; }
.notebar[open] { flex-basis: 100%; }
.toprow:has(> .notebar[open]) .backlink { display: none; }
.notebar > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; margin: 0; height: 30px; min-width: 30px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--card, #fff);
  color: var(--muted); font-size: 12px; font-weight: 600;
  letter-spacing: .01em; user-select: none; box-sizing: border-box;
}
/* A phone shows the pencil only; a computer has room for the word. */
@media (max-width: 640px) { .notebar > summary { padding: 0; width: 30px; } .notelabel { display: none; } }
.notebar > summary::-webkit-details-marker { display: none; }
.notebar > summary:hover { color: var(--ink); border-color: var(--muted); }
.notebar[open] > summary { color: var(--ink); border-color: var(--muted); }

.notefrm { margin: 8px 0 0; padding: 14px 16px; border-radius: 10px;
           border: 1px solid var(--hairline); background: var(--card, #fff); }
.notefrm textarea { width: 100%; box-sizing: border-box; margin: 0 0 10px; }

.notekinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.notekinds .pill { position: relative; margin: 0; }
.notekinds .pill input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.notekinds .pill span {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--hairline); font-size: 12px; cursor: pointer;
  color: var(--muted); background: transparent;
}
.notekinds .pill input:checked + span {
  border-color: var(--accent, #10243e); color: var(--accent, #10243e);
  font-weight: 650;
}
/* Keyboard users have to be able to see where they are, and the real radio is
   invisible, so the ring goes on the label that replaced it. */
.notekinds .pill input:focus-visible + span { outline: 2px solid var(--accent, #10243e);
                                              outline-offset: 2px; }

.noteacts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#note-mic.listening { border-color: var(--critical); color: var(--critical);
                      font-weight: 650; }

@media print { .notebar, .fuelbubs, .topright { display: none; } }
/* Fuel price bubbles, Home and Fuel, top right beside the note button.
   Stacked, Jet A+ on top. On a phone narrower than the note button and the
   stack side by side, the stack drops to its own short line on the right. */
.notewrap { position: relative; }
.topright { position: absolute; top: 5px; right: max(24px, calc((100% - 1100px) / 2 + 24px));
  display: flex; align-items: center; gap: 8px; }
.fuelbubs { display: flex; flex-direction: column; gap: 3px; }
/* 36.0.0: the duty button, left of the fuel prices. */
.dutybtn { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--accent, #1f5fbf); color: var(--accent, #1f5fbf); background: #fff;
  text-decoration: none; white-space: nowrap; }
.dutybtn.on { background: #1b7f3b; border-color: #1b7f3b; color: #fff; }
.dutybtn.over { background: #c8102e; border-color: #c8102e; color: #fff; }
button.dutybtn { cursor: pointer; font-family: inherit; line-height: inherit; min-height: 0; width: auto; margin: 0; }
.dutybtn span { font-variant-numeric: tabular-nums; }
/* 36.2.0 (note 34): the duty page. */
.dutyclock { font-size: 40px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.dutylog { max-height: 470px; overflow-y: auto; }
.dutylog table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dutylog th, .dutylog td { padding: 8px 10px; border-bottom: 1px solid var(--line, #e3e6ea); text-align: left; vertical-align: top; }
.dutylog th { position: sticky; top: 0; background: var(--card, #fff); font-size: 12px; color: var(--ink-2, #555); }
.dutyedit { display: inline-flex; gap: 6px; align-items: center; }
.dutyedit input { width: 6em; text-transform: uppercase; }
.fb { display: flex; justify-content: space-between; align-items: baseline; gap: 4px;
  padding: 2px 7px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700;
  line-height: 1.25; white-space: nowrap; text-decoration: none; }
a.fb:hover { color: #fff; filter: brightness(1.25); }
.fb .fbl { font-size: 9.5px; letter-spacing: .04em; opacity: .85; }
.fb-jet { background: #111; }
.fb-100ll { background: #c8102e; }
.notewrap:has(> .notebar[open]) .topright { display: none; }
@media (max-width: 640px) { .topright { right: 12px; } }
@media (max-width: 385px) {
  .topright { position: static; width: max-content; margin: 6px 12px 0 auto; }
}


/* ---------------------------------------------------------------- the list */
.note { padding: 13px 16px; border-top: 1px solid var(--hairline); }
.note:first-of-type { border-top: 0; }
.note-body { margin: 6px 0; white-space: pre-wrap; }
.note-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.note.is-new { border-left: 3px solid var(--accent, #10243e); }
.note.is-not_doing, .note.is-done { opacity: .72; }
.notefilters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }

/* ---------------------------------------------------------------- back link
   Named, not an arrow on its own. On a phone the app runs from the home
   screen with no browser chrome, so there is no back button to fall back on
   and this is the only way out of a detail screen that does not start over. */
.backlink {
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0; padding: 4px 6px;
  color: var(--accent);
  font-size: 15px; font-weight: 600;
  text-decoration: none; line-height: 1.2;
}
.backlink span { font-size: 22px; line-height: 1; margin-top: -2px; }
.backlink:hover { text-decoration: underline; }

/* 34.6.0: explanation lines under a screen's title are for the demo, where
   people are learning the screens. The live platform shows the data only. */
.is-live .explain { display: none; }

/* The enquiry link under the sign-in form. Quiet: it is for the one visitor
   in fifty who is not staff, and it must not compete with the password box. */
.login-aside {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #5c6470);
  text-align: center;
}
.login-aside a { color: inherit; }

/* The search box on the home screen. Wide on purpose: it is the fastest path
   to anything in the app and the one control worth making obvious. */
.homesearch {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: 640px; margin: 0 0 22px;
}
.homesearch input[type="search"] {
  flex: 1; min-width: 200px; margin: 0;
}
@media (max-width: 640px) {
  .homesearch { max-width: none; }
}

/* ------------------------------------------------------------- the outbox
   Deliberately loud, and it does not go away by itself. A grey badge in a
   corner reads as "done" at a glance, and the one thing this bar exists to
   prevent is somebody walking away believing a squawk was reported. */
.outboxbar {
  background: #8a4b0f; color: #fff;
  padding: 11px 16px; font-size: 13.5px; line-height: 1.5;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.outboxbar a { color: #fff; text-decoration: underline; }
.outboxbar.is-safety { background: #8f1d1d; }
.outboxbar.is-loud { background: #6f1414; }

.outboxtoast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  background: #1f6b43; color: #fff;
  padding: 11px 16px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  z-index: 60; opacity: 1; transition: opacity .55s ease;
}
.outboxtoast.go { opacity: 0; }

/* Whether this device can reach the platform at all. Quiet when it can. */
.netstate { display: none; font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
            background: #8f1d1d; color: #fff; white-space: nowrap; }
body.is-offline .netstate { display: inline-block; }
/* 37.0.2: words that only matter with no signal (the line alert says to call). */
.offline-only { display: none; }
body.is-offline .offline-only { display: block; }
/* 36.19.0: the same badge says what is waiting, and stays green with "Sent" until tapped */
.netstate.show { display: inline-block; }
.netstate.waiting { background: #8a5a00; }
.netstate.sent { background: #1d6b3a; cursor: pointer; }

/* --------------------------------------------------- show me what I typed
   The eye on a password box. Brian, 17 September: you cannot check what you
   typed, and since v30 a typo costs one of eight tries before the sign-in
   screen makes you wait.

   The wrapper and the button are built by reveal.js, so none of this is on
   screen when JavaScript has not run and the field is an ordinary password
   box. Words rather than an icon: "Show" and "Hide" need nothing explained,
   and an eye with a line through it has never told anybody whether it means
   the password is hidden or that clicking will hide it. */
.pwfield { position: relative; display: block; }
.pwfield input { width: 100%; padding-right: 74px; }
.pwreveal {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  border: 1px solid var(--hairline); background: #fff; color: var(--ink-2);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600;
  line-height: 1.4; cursor: pointer;
}
.pwreveal:hover { background: #f2f1ec; color: var(--ink); }
.pwreveal:focus-visible { outline: 2px solid #2f6fb3; outline-offset: 1px; }

/* 34.2.0: plain words on the sign-in, forgot and set-password screens. */
.login-note { color: var(--text, #1d2733); font-size: 14px; line-height: 1.45; margin: 6px 0 10px; }
.login-note.small { font-size: 12.5px; opacity: .85; }

/* ---- messages, 34.3.0 ---- */
.threadlist { list-style: none; margin: 0; padding: 0; }
.threadrow { border-top: 1px solid var(--hairline); }
.threadrow:first-child { border-top: none; }
.threadrow a { display: block; padding: 11px 16px; color: inherit; }
.threadrow a:hover { background: var(--neutral-tint); text-decoration: none; }
.threadrow.unread { border-left: 4px solid var(--good); }
.threadrow.unread .threadsubj { font-weight: 650; }
.threadrow.urgent { border-left: 4px solid var(--critical); background: var(--critical-tint); }
.threadtop { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.threadlast { color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.unreaddot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
             background: var(--good); margin-right: 4px; vertical-align: middle; }
.newcount { margin-left: 6px; color: var(--good-text); font-weight: 650; }
.urgenttag { display: inline-block; background: var(--critical); color: #fff; font-size: 11px;
             font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-right: 4px;
             letter-spacing: .03em; }
.tag { display: inline-block; background: var(--neutral-tint); color: var(--ink-2);
       font-size: 11.5px; padding: 0 6px; border-radius: 4px; margin-right: 4px; }
.ontoday { display: inline-block; background: var(--good-tint); color: var(--good-text);
           font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 8px; margin-left: 4px; }
.msglist { list-style: none; margin: 0; padding: 8px 16px 12px; }
.msg { margin: 10px 0; padding: 9px 12px; border-radius: 8px; background: var(--neutral-tint);
       max-width: 44em; }
.msg.mine { background: #e8f0fa; margin-left: auto; }
.msg.urgent { background: var(--critical-tint); border-left: 4px solid var(--critical); }
.msghead { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 3px; }
.msgbody { white-space: pre-wrap; overflow-wrap: anywhere; }
.msgfiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msgfiles img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px;
                border: 1px solid var(--hairline); display: block; }
.filelink { display: inline-block; padding: 4px 8px; background: var(--surface);
            border: 1px solid var(--hairline); border-radius: 6px; font-size: 13px; }
.newline { text-align: center; color: var(--good-text); font-size: 12px; font-weight: 650;
           border-top: 2px solid var(--good); margin: 14px 0 4px; }
.newline span { position: relative; top: -10px; background: var(--surface); padding: 0 8px; }
.composer textarea { width: 100%; }
.attachbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.msgopts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.msgopts .check { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; }
.msgopts .check input { width: auto; margin-top: 3px; }
.urgentcheck strong { color: var(--critical-text); }
.picker { margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 2px; background: #e8f0fa; color: var(--accent);
        border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 13.5px; }
.chip button { border: none; background: none; color: inherit; font-size: 16px; cursor: pointer;
               padding: 0 6px; line-height: 1; }
.pickpanel { border: 1px solid var(--hairline); border-radius: 8px; padding: 8px; background: var(--surface); }
.pickfilter { width: 100%; margin-bottom: 6px; }
.pickgroup { border-top: 1px solid var(--hairline); }
.pickgroup:first-of-type { border-top: none; }
.pickgroup summary { padding: 9px 6px; cursor: pointer; display: flex; justify-content: space-between;
                     font-weight: 600; }
.pickgroup.onshift summary { color: var(--good-text); }
.pickgroup .count { background: var(--neutral-tint); color: var(--ink-2); border-radius: 9px;
                    padding: 0 7px; font-size: 12px; font-weight: 600; }
.pickrow { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; font-weight: normal;
           cursor: pointer; }
.pickrow input { width: auto; margin: 0; }
.pickrow.all { font-weight: 600; }
.addpeople summary { cursor: pointer; font-weight: 600; }
.picker [hidden], .pickpanel[hidden], .composer [hidden] { display: none !important; }

/* ---- Messages like a phone's, 34.6.0 (Brian, 27 September) ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chathead h1 { margin-bottom: 2px; }
.sentto { margin-top: 4px; }
.sentto > summary { cursor: pointer; color: var(--ink-2); font-size: 14px; list-style: none; display: inline-block; }
.sentto > summary::-webkit-details-marker { display: none; }
.sentto > summary::after { content: " \25BE"; font-size: 11px; }
.sentto[open] > summary::after { content: " \25B4"; }
.sentto > p { margin: 6px 0; }
.sentto .addpeople { margin-top: 6px; }
.sentto .addpeople > summary { font-size: 14px; color: var(--accent); }
.chat { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 0; max-width: 46em; }
.bubble { align-self: flex-start; max-width: 78%; background: #e9e9eb; color: #111;
          border-radius: 18px; padding: 7px 12px 5px; margin-top: 2px; overflow-wrap: anywhere; }
.bubble.starts { margin-top: 10px; }
.bubble.mine { align-self: flex-end; background: #1f7aec; color: #fff; }
.bubble.mine a { color: #fff; text-decoration: underline; }
.bubble.is-urgent { box-shadow: inset 4px 0 0 var(--critical); background: var(--critical-tint); color: #111; }
.bubble.mine.is-urgent { box-shadow: inset -4px 0 0 var(--critical); background: #1f7aec; color: #fff; }
.bubble.is-pending { background: #b9cfee; color: #29405f; }
.bubble.is-sent { opacity: .9; }
.bubble-name { font-size: 12px; font-weight: 650; color: var(--ink-2); margin: 0 0 2px; }
.bubble-text { white-space: pre-wrap; }
.bubble-meta { font-size: 11px; opacity: .7; margin-top: 2px; text-align: right; }
.bubble .urgenttag { margin: 0 0 3px; }
.bubble .msgfiles img { width: 160px; height: 160px; }
.bubble .filelink { color: var(--accent) !important; text-decoration: none !important; }
.chatpending { display: flex; flex-direction: column; gap: 2px; }
.chat .newline { margin: 16px 0 4px; }
.chatspacer { height: 96px; }
.chatbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface);
           border-top: 1px solid var(--hairline); padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
           box-shadow: 0 -2px 10px rgba(0,0,0,.06); }
.chatbar-in { max-width: 46em; margin: 0 auto; position: relative; }
.chatrow { display: flex; align-items: flex-end; gap: 6px; }
.chatrow textarea { flex: 1; min-width: 0; resize: none; border-radius: 18px; padding: 8px 14px;
                    font-size: 16px; line-height: 1.3; min-height: 38px; max-height: 150px; margin: 0; }
.chatbtn { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 1px solid var(--hairline);
           background: var(--neutral-tint); color: var(--ink-2); font-size: 24px; line-height: 1;
           display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.chatmic.is-listening { background: var(--critical); color: #fff; border-color: var(--critical); }
.chatsend { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: none; background: #1f7aec;
            color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.chatsend.is-sending { opacity: .5; }
.chatplus { position: static; }
.chatplus > summary { list-style: none; }
.chatplus > summary::-webkit-details-marker { display: none; }
.chatplus[open] > summary { background: var(--accent); color: #fff; }
.chatmenu { position: absolute; bottom: calc(100% + 6px); left: 0; width: min(290px, calc(100vw - 24px));
            background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
            box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 6px; }
.chatmenu-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px;
                 font-weight: normal; cursor: pointer; margin: 0; }
.chatmenu-item:hover { background: var(--neutral-tint); }
.chatmenu-item input[type=checkbox] { width: auto; margin: 0; }
.chaticon { width: 20px; text-align: center; }
.chatmenu-note { margin: 4px 10px 6px; }
.chattags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.chattag { display: inline-flex; align-items: center; background: #e8f0fa; color: var(--accent);
           border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 13px; font-weight: 600; }
.chattag.is-urgent { background: var(--critical); color: #fff; }
.chattag button { border: none; background: none; color: inherit; font-size: 16px; cursor: pointer; padding: 0 6px; line-height: 1; }
.chathint { margin: 0 0 6px; }
.chatform [hidden], .chatbar [hidden] { display: none !important; }
@media print { .chatbar, .chatspacer { display: none; } }

/* ---- grouped tappable lists, 34.4.0 ---- */
.listsearch { width: 100%; margin: 0 0 12px; font-size: 16px; }
.rowgroup { margin-bottom: 12px; }
.rowgroup-head { padding: 11px 16px; cursor: pointer; display: flex; justify-content: space-between;
                 font-weight: 650; }
.rowgroup-head .count { background: var(--neutral-tint); color: var(--ink-2); border-radius: 9px;
                        padding: 0 8px; font-size: 12.5px; }
.rowlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.rowlist li { border-top: 1px solid var(--hairline); }
.rowlist li:first-child { border-top: none; }
.rowlist li[hidden], .rowgroup[hidden], [data-none][hidden] { display: none; }
a.rowlink { display: flex; flex-direction: column; gap: 1px; padding: 10px 16px; color: inherit; }
a.rowlink:hover { background: var(--neutral-tint); text-decoration: none; }
.rowmain { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; justify-content: space-between; }
.rowsub { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; padding: 14px 16px; }
.facts dt { color: var(--ink-2); font-size: 14px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 8px; } }
.stackbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stackbtns form { margin: 0; }

/* ---- tables stacked on a phone (stacktables.js), 34.4.0 ---- */
table.stacked, table.stacked tbody, table.stacked tr, table.stacked td { display: block; width: 100%; }
table.stacked thead { display: none; }
table.stacked tr { padding: 10px 16px; border-top: 1px solid var(--hairline); }
table.stacked tr:first-child { border-top: none; }
table.stacked td { border: none; padding: 3px 0; text-align: left; overflow-wrap: anywhere;
                   white-space: normal !important; }
table.stacked td::before { content: attr(data-label); display: block; color: var(--ink-2);
                           font-size: 12px; }
table.stacked td[data-label=""]::before, table.stacked td:not([data-label])::before { content: none; }
table.stacked td.num { text-align: left; }
table.stacked td:first-child { font-size: 15.5px; }

/* ---- fuel, 34.4.0 ---- */
.tankgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 16px; }
.gauge { position: relative; height: 18px; background: var(--neutral-tint); border-radius: 9px; overflow: hidden; }
.gauge-fill { height: 100%; background: var(--accent); }
.gauge-fill.low { background: var(--critical); }
.gauge-min { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .6; }
.tankact { margin-top: 8px; border-top: 1px solid var(--hairline); padding-top: 6px; }
.tankact summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.fuelquote { font-size: 17px; font-weight: 650; min-height: 1.4em; margin: 8px 0; }
.fuelchart { width: 100%; height: auto; display: block; }
.fuelchart .grid { stroke: var(--hairline); stroke-width: 1; }
.fuelchart .axis { fill: var(--ink-2); font-size: 11px; }
.fuelchart .series { fill: none; stroke-width: 2; }
.fuelchart .adv { stroke-width: 1.5; stroke-dasharray: 5 4; }
.fuelchart .s-jet { stroke: #1c5cab; fill: #1c5cab; }
.fuelchart polyline.s-jet, .fuelchart polyline.s-100ll { fill: none; }
.fuelchart .s-100ll { stroke: #d97706; fill: #d97706; }
.key { display: inline-block; width: 12px; height: 3px; vertical-align: middle; }
.key.s-jet { background: #1c5cab; } .key.s-100ll { background: #d97706; }
.photos-coming { background: var(--warning-tint); color: var(--warning-text); padding: 8px 12px;
                 border-radius: 8px; font-size: 14px; }

/* 34.5.0: a short warning inside a card (payroll problems, sump flags). */
.notice { border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.notice.warn { background: #fff4e0; border: 1px solid #f0c77a; color: #6b4300; }
.notice.bad { background: #fde8e8; border: 1px solid #f3a9a9; color: #7a1010; }
.notice.good { background: #e8f6ec; border: 1px solid #a6dcb5; color: #0f4d22; }

/* 34.5.0: a tile that needs attention (a failed sump, overdue equipment). */
.apptile.flag-bad { border-color: #d64545; box-shadow: inset 4px 0 0 #d64545; }
.apptile.flag-bad .apptile-desc { color: #a51c1c; font-weight: 600; }
.apptile.flag-warn { box-shadow: inset 4px 0 0 #e0a100; }
.apptile.flag-warn .apptile-desc { color: #7a5200; }
.apptile-flag {
  position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 999px;
  background: #d64545; color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.statusdot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; vertical-align: middle; margin-right: 4px; }
.statusdot.ok { background: #2e9e57; } .statusdot.soon, .statusdot.never, .statusdot.missing { background: #e0a100; }
.statusdot.overdue, .statusdot.failed { background: #d64545; }
.checkrow { padding: 10px 16px; border-top: 1px solid var(--hairline); }
.checkrow.due { background: #fffaf0; } .checkrow.overdue { background: #fff1f1; }
.checkrow .checkacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.checkrow .checkacts input[type=text] { flex: 1 1 160px; min-width: 0; }

/* 34.5.0: the Today strip on Home. */
.todaystrip { background: var(--surface, #fff); border: 1px solid var(--border, #dde3ea); border-radius: 10px;
  padding: 10px 14px; margin: 10px 0 14px; }
.todaystrip h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; color: var(--ink-2, #445); }
.todaystrip ul { list-style: none; margin: 0; padding: 0; }
.todaystrip li { padding: 5px 0 5px 12px; border-left: 3px solid #9fb3c8; margin: 3px 0; overflow-wrap: anywhere; }
.todaystrip li.ts-bad { border-color: #d64545; font-weight: 600; }
.todaystrip li.ts-warn { border-color: #e0a100; }
.todaystrip a { color: inherit; text-decoration: none; } .todaystrip a:hover { text-decoration: underline; }
.boardday { margin: 0; }
.fbgrade { display: inline-block; padding: 1px 6px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; }
.fbgrade.jet { background: #111; } .fbgrade.g100ll { background: #c8102e; }
/* 34.5.0: date and time pickers never push a card wider than a phone. */
input[type=datetime-local], input[type=time], input[type=date] { max-width: 100%; min-width: 0; box-sizing: border-box; }
.inline-form > div { min-width: 0; }
.stackbtns .btn { white-space: normal; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent, #1a5fb4); font: inherit; text-decoration: underline; cursor: pointer; }
/* A toast on Messages sits above the floating bar, not on it. */
body:has(.chatbar) .outboxtoast { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* "Version X is ready", 34.6.0. Pinned at the top, calm, never in the way. */
.verbar { position: sticky; top: 52px; z-index: 49; display: flex; flex-wrap: wrap; align-items: center;
          justify-content: center; gap: 8px 12px; padding: 8px 14px; background: #10243e; color: #fff;
          font-size: 14px; }
.verbar a { color: #bcd4f5; text-decoration: underline; }
.verbar .btn { background: #fff; color: #10243e; }

/* ---- the ramp, 34.7.0 (Brian, 27 September) ---- */
.ramptabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 0 0 14px; }
.ramptab { min-width: 0; text-align: center; padding: 9px 3px; border-radius: 10px; font-weight: 700;
           font-size: 13px; line-height: 1.25; background: var(--neutral-tint); color: var(--ink); text-decoration: none;
           border: 2px solid transparent; overflow-wrap: anywhere; }
.ramptab.is-on { border-color: var(--accent); }
.ramptab .rtn { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(0,0,0,.12);
                font-size: 12px; }
.ramptab.lvl-warn, .rampjob.lvl-warn { background: #fff1bf; }
.ramptab.lvl-bad, .rampjob.lvl-bad { background: #fbd4d4; }
.ramptab.lvl-late, .rampjob.lvl-late { background: #d03b3b; color: #fff; }
.rampjob.lvl-late a, .rampjob.lvl-late .rowsub, .rampjob.lvl-late .small { color: #fff; }
/* 37.0.2 (Flight 3.12): a button keeps its own colours on a late job. */
.rampjob.lvl-late .btn.secondary { color: var(--ink); }
.rampjob { padding: 10px 16px; }
.rampjob.lvl-done { opacity: .6; }
.rampjob .inline-form { margin-top: 6px; }
.rampjob.lvl-warn, .ramptab.lvl-warn { animation: rampflash 2s ease-in-out infinite; }
.rampjob.lvl-bad, .rampjob.lvl-late, .ramptab.lvl-bad, .ramptab.lvl-late { animation: rampflash 1s ease-in-out infinite; }
@keyframes rampflash { 50% { filter: brightness(1.12) saturate(1.4); } }
@media (prefers-reduced-motion: reduce) { .rampjob, .ramptab { animation: none !important; } }
/* 37.0.2 (Ramp F7, H10, A2): buttons that read on red and fit a gloved thumb. */
.rampjob.lvl-late .btn.secondary { color: var(--ink); }
.rampjob .btn { min-height: 44px; min-width: 88px; font-size: 16px; }
.rampjob .gradewarn { color: #b3261e; font-weight: 700; }
.rampjob.lvl-late .gradewarn { color: #fff; text-decoration: underline; }
.callrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.callrow .btn { min-height: 44px; }
.checkacts .btn.passfail { min-height: 44px; min-width: 96px; font-size: 16px; }
.btn.alertbtn { background: #b3261e; color: #fff; border: none; font-weight: 800; }
.btn.alertbtn.big { font-size: 17px; padding: 12px 18px; width: 100%; }
.alertkinds { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.alertkind { display: flex; gap: 10px; align-items: center; padding: 12px; border: 2px solid var(--hairline);
             border-radius: 10px; font-weight: 650; cursor: pointer; margin: 0; }
.alertkind input { width: auto; margin: 0; }
.alertkind:has(input:checked) { border-color: #b3261e; background: #fbe3e3; }
.linealertbar { background: #b3261e; color: #fff; padding: 10px 16px; font-weight: 700; text-align: center;
                animation: rampflash 1s ease-in-out infinite; }
.linealertbar a { color: #fff; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .linealertbar { animation: none; } }

/* ---- your own top row, 34.7.0 ---- */
.toprow-tiles .tilegroup-head { justify-content: space-between; }
.tileedit-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.tiles-editing [data-toptiles-grid] { touch-action: none; }
.tiles-editing [data-toptiles-grid] .apptile { animation: tilewiggle .35s ease-in-out infinite alternate; }
.tiles-editing .apptile { position: relative; -webkit-user-select: none; user-select: none; }
.apptile { -webkit-touch-callout: none; }
.apptile.is-dragging { opacity: .6; outline: 2px dashed var(--accent); }
@keyframes tilewiggle { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .tiles-editing .apptile { animation: none !important; } }
.tiles-editing [data-toptiles-grid] .apptile { padding-bottom: 44px; }
.tilectl { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: none; font-size: 16px;
           font-weight: 800; cursor: pointer; background: var(--accent); color: #fff; line-height: 1; padding: 0; }
.tilectl.tl { bottom: 6px; left: 6px; } .tilectl.tr { bottom: 6px; right: 6px; }
.tilectl.tx { top: -8px; left: -8px; background: #555; }
.tilectl.tadd { top: -8px; right: -8px; background: var(--good, #1f7a3f); font-size: 20px; }
/* 37.0.13 (Brian, 1 Nov): long-press menu, and moving items within a department. */
.tilemenu { position: absolute; z-index: 60; min-width: 220px; max-width: calc(100vw - 16px); background: var(--surface, #fff);
            border: 1px solid var(--border, #ccd); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px; }
.tilemenu-head { font-size: 12px; color: var(--muted); padding: 4px 10px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tilemenu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
                   padding: 10px; font-size: 15px; color: var(--ink, inherit); cursor: pointer; min-height: 40px; }
.tilemenu button:hover:not([disabled]), .tilemenu button:focus-visible { background: var(--neutral-tint, #eef1f6); }
.tilemenu button[disabled] { color: var(--muted); cursor: default; }
.tilemenu [data-menu-cancel] { color: var(--muted); }
.arrange-bar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: space-between;
               margin: 4px 0 8px; padding: 8px; border-radius: 8px; background: var(--neutral-tint, #eef1f6); }
.arrange-btns { display: flex; gap: 6px; }
.arranging [data-group-grid] { touch-action: none; }
.tiles-arranging .h2-groups { column-count: 1; column-width: auto; }   /* the department being moved gets the full width */
.arranging .apptile { position: relative; -webkit-user-select: none; user-select: none; }
.arranging .h2-items .apptile { padding-right: 70px; }
.arranging .tilegrid .apptile { padding-bottom: 44px; }
.tilectl.tup, .tilectl.tdown { top: 50%; transform: translateY(-50%); width: 28px; height: 28px; font-size: 15px; }
.tilectl.tup { right: 34px; } .tilectl.tdown { right: 2px; }
.h2-phead-r { display: flex; align-items: center; gap: 12px; }
.h2-panel.h2-folded .h2-phead { border-bottom: 0; }
.fleetfold { border: 1px solid var(--border, #ccd); background: var(--neutral-tint, #eef1f6); color: var(--ink, inherit);
             border-radius: 8px; padding: 5px 10px; font-size: 13.5px; cursor: pointer; }
.fleetfold.has-attn { background: #fff4e0; border-color: #e0a640; color: #6b4300; }
.fleetfold strong { font-weight: 800; }
.ts-date { font-weight: 500; text-transform: none; letter-spacing: 0; float: right; }

/* ---- the pilot's Today card, 34.7.0 ---- */
.pcard { display: block; border: 1px solid #cfe0f5; background: #f4f8fd; border-radius: 10px; padding: 10px 12px;
         margin: 4px 0 10px; color: inherit; text-decoration: none; }
.pcard:hover, .todaystrip a.pcard:hover { text-decoration: none; border-color: var(--accent); }
.pc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-when { font-size: 22px; font-weight: 750; color: #10243e; }
.pc-tail { font-weight: 700; font-size: 16px; }
.pc-dest { font-size: 15px; margin: 2px 0 6px; }
.pc-row { font-size: 13.5px; color: var(--ink-2); margin: 3px 0; }
.pc-notes { margin-top: 9px; background: #fff; border: 1px solid #e6d9b8; border-left: 4px solid #c9a227;
            border-radius: 8px; padding: 8px 10px; font-size: 13.5px; }
.pc-notes b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #7a5a00; margin-bottom: 3px; }
.pc-notes div { margin: 2px 0; }
.pc-issue { color: #8f1f1f; }
.pc-from { font-size: 11px; background: #eef4fc; color: var(--accent); border-radius: 6px; padding: 0 5px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-chip { font-size: 12px; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: #e6f4ea; color: #1b5e20; }
.pc-chip.warn { background: #fff4d6; color: #7a5200; }
.pc-chip.bad { background: #fbe3e3; color: #8f1f1f; }
.ownernote { border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 12px; margin: 12px 0; }
.ownernote select, .ownernote input { margin: 4px 0; }
.notelist { list-style: none; margin: 0; padding: 0; }
.notelist li { padding: 10px 16px; border-top: 1px solid var(--hairline); }
.notelist li:first-child { border-top: none; }
.notelist .nk { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.notelist .issue .nk { color: #8f1f1f; }
.stale { color: #7a5200; font-weight: 600; }

/* Notes: Save lands back on the note (#note-N), clear of the pinned top bar,
   and says so on the card, because the "Marked ..." line is up at the top. */
.note-card { scroll-margin-top: 70px; }
.note-card:target { outline: 2px solid var(--good); outline-offset: -2px; }
.note-saved { color: var(--good); font-weight: 600; margin: 0 0 6px; }
/* Every week list: red up, green down, the buyer's point of view. */
.qdir { display: inline-block; width: 1.1em; text-align: center; font-size: 12px; }
.qdir.up { color: var(--critical); }
.qdir.down { color: var(--good); }
.qdir.same { color: #888; }
.quote-weeks .nowrap { white-space: nowrap; }

/* 35.0.0 (Brian, 1 October): the pointing hand on everything that can be
   pressed, so a person can tell by hovering. One rule for the whole app;
   test_v35 checks it stays. Disabled things keep the plain arrow. */
a[href], button, summary, select, label.check, label.pill, [role="button"],
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"],
input[type="file"], input[type="date"], input[type="time"], input[type="datetime-local"],
.btn, .apptile, .linkbtn, [data-href], [onclick] { cursor: pointer; }
button:disabled, .btn[disabled], input:disabled, select:disabled { cursor: not-allowed; }
/* 35.0.0: the pull-out checklist on a pull-out job, and the stack sheet. */
.pullcheck { margin: 6px 0; font-size: 14px; }
.pullcheck ol { margin: 6px 0 4px 18px; padding: 0; }
.pullcheck li { margin: 3px 0; }
.stackcard strong.bad, .stacksheet .bad { color: var(--critical); }
.stacksheet td, .stacksheet th { padding: 8px 10px; }
@media print { .stacksheet { font-size: 14pt; } }
.fuelamount { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.fuelsplit { border: 1px solid var(--hairline, #ddd); border-radius: 10px; padding: 8px 12px; }
.card.bday { border-left: 4px solid var(--good); }
.poline { border-top: 1px solid var(--hairline, #ddd); padding: 8px 0; }
.poline-part select { width: 100%; max-width: 100%; }
/* 35.1.0: replying to one message. */
.bubble-quote { display: block; border-left: 3px solid var(--accent); padding: 2px 8px; margin: 0 0 4px;
                font-size: 13px; opacity: .85; text-decoration: none; color: inherit; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bubble.mine .bubble-quote { border-left-color: rgba(255,255,255,.7); }
.replybtn { font-size: 11px; margin-left: 6px; color: inherit; opacity: .8; }
.replying { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px;
            background: var(--neutral-tint); border-radius: 8px; padding: 4px 10px; margin: 0 0 6px; }
.replying span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msganchor { position: relative; top: -80px; }

/* 36.0.0: the local time beside a Zulu time, smaller. */
.tz2 { font-size: .82em; font-weight: 400; opacity: .7; white-space: nowrap; }
.zswitch { display: inline-flex; border: 1px solid var(--hairline, #ccc); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.zswitch button { border: 0; background: none; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--muted, #666); }
.zswitch button.on { background: var(--accent, #1f5fbf); color: #fff; }

/* 36.0.0: a link that leaves the app says so (on an iPhone it opens Safari). */
a[target="_blank"][href^="http"]::after { content: " \2197"; font-size: .85em; }
.notefiles { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; cursor: pointer; }
.notefiles input[type=file] { font-size: 13px; max-width: 100%; }

/* 36.4.0: a required box left empty (static/required.js). */
.needs-fill { outline: 3px solid #c8102e !important; outline-offset: 1px; border-color: #c8102e !important; }
.required-tag { display: inline-block; margin: 4px 0 0; color: #c8102e; font-weight: 700; font-size: 13px; }

/* ---- 36.5.0: pill tabs (Squawks All/Mine, Staff, Feedback) ---- */
.pilltabs { display:flex; flex-wrap:wrap; gap:6px; }
.pilltab { display:inline-block; border:1px solid var(--hairline, #d8d6cf); border-radius:999px; padding:5px 14px;
  font-size:14px; font-weight:650; color:inherit; text-decoration:none; background:var(--card, #fff); }
.pilltab.on { background:var(--accent, #1f5fbf); border-color:var(--accent, #1f5fbf); color:#fff; }

/* 36.6.0: one rule for every form. Every box with a problem is ringed red,
   with the count at the top of the form and again by Submit. */
.required-tag { display: block; }
.fix-count { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: #fdecee; color: #8a0b1f;
  border: 1px solid #f2b8c0; font-weight: 700; }

/* ---- 36.8.0: purpose of flight, how it works ---- */
.purposebox { margin: 4px 0; }
.paxpurpose { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 4px 0; }
.paxpurpose > span { min-width: 140px; font-weight: 600; }
.howto ol { margin: 0; padding: 12px 16px 12px 36px; }
.howto li { margin: 0 0 10px; line-height: 1.45; }
@media print { .howto li { break-inside: avoid; } }

/* 36.9.2: straight to the fix. The box outlined, what to do above it. */
.fixit-red { outline: 3px solid var(--critical, #c62828); outline-offset: 3px; border-radius: 8px; }
.fixit-green { outline: 3px solid var(--ok, #2e7d32); outline-offset: 3px; border-radius: 8px; }
.fixit-note { margin: 0 0 10px; padding: 10px 14px; border-radius: 8px; font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.fixit-note.is-open { background: #fdecea; border: 1px solid var(--critical, #c62828); color: #5f1313; }
.fixit-note.is-fixed { background: #e8f5e9; border: 1px solid var(--ok, #2e7d32); color: #1b4d1f; }
.fixit-bar { display: flex; gap: 8px; flex-wrap: wrap; }
@media print { .fixit-note { display: none; } .fixit-red, .fixit-green { outline: none; } }

/* 36.9.7 (Brian, 20 October): the question box in the corner. Staff only, and
   only when the AI is switched on. It looks things up; it changes nothing. */
.askai-btn { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45;
             width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
             background: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.25);
             display: flex; align-items: center; justify-content: center; }
.askai-btn svg { width: 26px; height: 26px; }
body.has-askai main { padding-bottom: 84px; }
body.has-chatbar .askai-btn { bottom: calc(76px + env(safe-area-inset-bottom)); }
.askai-panel { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 46;
               width: min(400px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px));
               display: none; flex-direction: column; background: var(--surface); color: var(--ink);
               border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.25); }
body.has-chatbar .askai-panel { bottom: calc(140px + env(safe-area-inset-bottom)); }
.askai-panel.open { display: flex; }
.askai-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
              padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.askai-head strong { font-size: 14.5px; }
.askai-head button { background: none; border: 0; color: var(--ink-2); font-size: 13px; cursor: pointer; padding: 4px; }
.askai-log { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.askai-log .q { margin: 10px 0 4px; font-weight: 600; }
.askai-log .a { margin: 0 0 6px; white-space: pre-wrap; }
.askai-log .a.err { color: var(--critical-text); }
.askai-log .links { margin: 2px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.askai-log .links a { font-size: 12.5px; padding: 2px 8px; border: 1px solid var(--hairline); border-radius: 12px;
                      color: var(--accent); text-decoration: none; }
.askai-log .hint { color: var(--muted); font-size: 13px; }
.askai-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--hairline); }
.askai-form textarea { flex: 1; min-width: 0; resize: none; font-size: 16px; line-height: 1.3; min-height: 40px;
                       max-height: 120px; margin: 0; border-radius: 8px; padding: 8px 10px; }
.askai-form button { flex: none; }
.askai-mic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); cursor: pointer;
             background: var(--neutral-tint); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.askai-mic svg { width: 20px; height: 20px; }
.askai-mic.listening { background: var(--critical); border-color: var(--critical); color: #fff;
                       animation: askai-pulse 1.2s ease-in-out infinite; }
@keyframes askai-pulse { 50% { box-shadow: 0 0 0 6px rgba(208, 59, 59, .25); } }
@media (prefers-reduced-motion: reduce) { .askai-mic.listening { animation: none; } }
.askai-say { padding: 6px 14px 0; font-size: 13px; color: var(--ink-2); }
/* 36.11.0 (Brian, 22 October): "minimize the screen so that I can see what I'm
   looking at ... still listening to my dictation." Small is one line at the
   bottom: the latest answer (tap to open it all) and the typing line. */
.askai-head button[data-speak] { display: inline-flex; vertical-align: middle; }
.askai-head button[data-speak] svg { width: 18px; height: 18px; }
.askai-head button[data-speak] .on { display: none; }
.askai-head button[data-speak][aria-pressed="true"] .on { display: inline; }
.askai-head button[data-speak][aria-pressed="true"] .off { display: none; }
.askai-head button[data-speak][aria-pressed="true"] { color: var(--accent); }
.askai-head button[data-hush] { color: var(--critical-text); font-weight: 600; }
.askai-peek { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--hairline);
              background: none; color: var(--ink); font: inherit; font-size: 13.5px; padding: 8px 14px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.askai-peek[hidden] { display: none; }
.askai-panel.mini { max-height: none; }
.askai-panel.mini .askai-log { display: none; }
.askai-panel.mini .askai-head { padding: 4px 10px; }
.askai-panel.mini .askai-head .askai-level, .askai-panel.mini [data-clear] { display: none; }
.askai-panel.mini .askai-form { padding: 6px 10px; }
.askai-panel.mini .askai-form textarea { min-height: 36px; }
.askai-log .read { background: none; border: 0; color: var(--accent); font-size: 12.5px; padding: 0 0 6px; cursor: pointer; }
body.askai-mini main { padding-bottom: 170px; }
@media (max-width: 600px) {
  .askai-panel { right: 8px; left: 8px; width: auto; max-height: calc(100vh - 110px); }
  .askai-panel.mini { bottom: calc(8px + env(safe-area-inset-bottom)); }
  body.askai-mini .askai-btn { display: none; }
}
@media print { .askai-btn, .askai-panel { display: none !important; } }

/* ---- 36.10.5 (Brian, 21 October) ---- */
/* The department links stay on screen too, however far down a long page goes
   (the logbook history runs to hundreds of entries). On a phone they stay one
   line that slides sideways, so the pinned part stays thin. */
.subnav { position: sticky; top: 52px; z-index: 49; }
html { scroll-padding-top: 110px; }
@media (max-width: 640px) {
  .subnav { top: 48px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .subnav::-webkit-scrollbar { display: none; }
  html { scroll-padding-top: 96px; }
}
@media print { .subnav { position: static; } .totop { display: none !important; } }
/* Back to top: shows once a page has been scrolled a screen or so, bottom
   left so it never covers the question button on the right. */
.totop { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 44;
         width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
         background: #10243e; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
         display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.totop[hidden] { display: none; }
body.has-chatbar .totop { bottom: calc(76px + env(safe-area-inset-bottom)); }
/* Working: a small spinning wheel beside "Updating...". */
.spin { display: inline-block; width: .95em; height: .95em; margin-right: 6px; vertical-align: -2px;
        border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
        animation: steck-spin .8s linear infinite; }
@keyframes steck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
button.is-busy, .btn.is-busy { opacity: .85; cursor: progress; }
.working { display: inline-flex; align-items: center; font-weight: 600; }
/* A passage the currency check relied on, while its line is open. */
mark.hl { background: #fff1a8; color: inherit; padding: 0 2px; border-radius: 2px; box-shadow: 0 0 0 2px #fff1a8; }
.entry-text { white-space: pre-line; padding: 12px 16px; }
.pagestrip { display: flex; gap: 8px; overflow-x: auto; padding: 8px; }
.pagestrip img { height: 340px; width: auto; border: 1px solid var(--hairline, #ddd); }
/* The whole entry: the words beside the pages, the words staying in view. */
.entry-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.entry-split > .card { margin: 0; }
.entry-split .entry-textcard { position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow: auto; }
@media (max-width: 900px) { .entry-split { display: block; } .entry-split .entry-textcard { position: static; max-height: none; margin-bottom: 14px; } }

/* 36.12.0: folded lists on a work order: due items, squawks, recommended. */
.wopick { display: grid; gap: 8px; }
.wopick-box { border: 1px solid var(--hairline); border-radius: 10px; padding: 0 12px; background: var(--surface); }
.wopick-box > summary { padding: 10px 0; font-weight: 600; cursor: pointer; list-style-position: inside; }
.wopick-box[open] > summary { border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.wopick .badge-count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--hairline);
                       font-size: 12px; text-align: center; margin-left: 6px; }
.wopick-group { margin: 6px 0 10px; }
.wopick-ghead { display: flex; justify-content: space-between; align-items: center; margin: 4px 0; }
.wopick-ghead .bad { color: var(--critical-text); } .wopick-ghead .warn { color: var(--warning-text, #8a5a00); }
.wopick-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-weight: 400; }
.wopick-row input { margin-top: 3px; }
.tagpill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--hairline); margin-right: 4px; }
.tagpill.bad { color: var(--critical-text); border-color: var(--critical-text); }

/* 36.12.0: a few form links folded behind one button. */
details.inline-menu { display: inline-block; position: relative; }
details.inline-menu > summary { list-style: none; }
details.inline-menu > summary::-webkit-details-marker { display: none; }
details.inline-menu[open] > .stackbtns { position: absolute; z-index: 20; background: var(--card, #fff); border: 1px solid #ccd;
  border-radius: 8px; padding: 8px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; min-width: 180px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); }

/* 36.12.0 the phone taskbar, five buttons at most. 36.19.0 (Brian): on
   laptops too, as a narrower bar centered at the bottom. */
.taskbar, .taskbar-strip { display: none; }
@media (min-width: 641px) {
  body.has-taskbar .taskbar { left: 50% !important; right: auto !important; transform: translateX(-50%);
    width: min(560px, 100%); border: 1px solid var(--hairline, #ddd); border-bottom: 0; border-radius: 12px 12px 0 0; }
}
@media all {
  body.has-taskbar .taskbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    background: var(--card, #fff); border-top: 1px solid var(--hairline, #ddd);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(0,0,0,.06); }
  .taskbar a, .taskbar button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 1px; padding: 5px 2px; min-height: 48px; border: 0; background: none; color: var(--ink-2, #333);
    font: inherit; font-size: 11px; line-height: 1.1; text-decoration: none; border-radius: 8px; cursor: pointer; }
  .taskbar a span:last-child, .taskbar button span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .taskbar .i { font-size: 19px; line-height: 1; }
  .taskbar a[aria-current="page"] { color: var(--accent, #002469); font-weight: 600; background: rgba(0, 36, 105, .06); }
  .taskbar .taskbar-min { flex: 0 0 26px; min-width: 26px; font-size: 14px; color: var(--muted, #888); }
  body.has-taskbar main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-taskbar .askai-btn { display: none; }
  body.has-taskbar .askai-panel { bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.has-taskbar .totop { bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* Small: a strip with a handle; the question button comes back. */
  body.taskbar-small .taskbar { display: none; }
  body.taskbar-small .taskbar-strip { display: block; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: env(safe-area-inset-bottom); z-index: 44; width: 64px; height: 18px; padding: 0; font-size: 12px; line-height: 18px;
    border: 1px solid var(--hairline, #ddd); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--card, #fff);
    color: var(--muted, #888); }
  body.taskbar-small .taskbar-strip[hidden] { display: none; }
  body.taskbar-small .askai-btn { display: inline-flex; }
  body.taskbar-small .askai-panel { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.taskbar-small main { padding-bottom: 84px; }
  /* Out of the way while typing, and under the question box (Small or full). */
  body.kb-up .taskbar, body.kb-up .taskbar-strip, body.askai-open .taskbar { display: none !important; }
  body.askai-open .askai-panel { bottom: calc(10px + env(safe-area-inset-bottom)); }
}
.taskbar-choose { display: block; margin: 4px 0 10px; }
@media all { html:has(body.has-taskbar:not(.taskbar-small)) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* 36.14.0 the crew plan (Brennon's note 17): gray boxes, never shown to customers. */
.crewplan { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--hairline); }
.crewplan .planitem { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 4px 0; }
.planbox, .pm-item.sg-plan, .sg-item.sg-plan { background: #eceef1; color: #3c4350; border-radius: 6px; padding: 2px 8px; }
.planform { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.planform input, .planform select { width: auto; }
.sg-item.sg-adv, .pm-item.sg-adv { outline: 1px dashed #8a8f99; }

/* 36.14.0 My upcoming flights on Home (Brennon's note 16): 5 days on a
   computer, 3 on a phone, scrolling sideways to 14 days, never before today. */
.upcoming .up-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding: 0 0 8px; }
.upcoming .up-day { flex: 0 0 20%; min-width: 0; scroll-snap-align: start; border-left: 1px solid var(--hairline);
  padding: 6px 6px 8px; box-sizing: border-box; }
.upcoming .up-day:first-child { border-left: none; }
.upcoming .up-head { text-align: center; margin-bottom: 6px; }
.upcoming .up-head b, .upcoming .up-head span { display: block; }
.upcoming .up-head span { font-size: 12px; color: var(--ink-2); }
.upcoming .up-off { background: repeating-linear-gradient(45deg, #f6f5f1, #f6f5f1 6px, #eeece6 6px, #eeece6 12px); }
.upcoming .sg-item { display: block; font-size: 12px; margin: 4px 0; text-decoration: none; color: inherit; }
.upcoming .sg-item b, .upcoming .sg-item span { display: block; overflow-wrap: anywhere; }
@media (max-width: 640px) { .upcoming .up-day { flex-basis: 33.34%; } }
.upcoming .sg-item { padding: 4px 6px; border-radius: 6px; background: #e6effc; border-left: 3px solid var(--accent, #1f5fbf); line-height: 1.3; }
.upcoming .sg-item .sg-crew { color: var(--muted, #555); }
.upcoming .sg-item.sg-pos { background: #f1f1f1; border-left-color: #888; }
.upcoming .sg-item.sg-135 { background: #fde4ef; border-left-color: #d6337a; }
.upcoming .sg-item.sg-req { opacity: .65; border: 1.5px dashed #555; border-left-width: 3px; background: #fff; }
.upcoming .sg-item.sg-plan, .sg-item.sg-plan, .pm-item.sg-plan { background: #eceef1; border-left: 3px solid #9aa0aa; color: #3c4350; }
.upcoming .sg-offlabel { font-size: 11px; color: var(--muted, #666); font-weight: 700; }
/* 36.18.0 (Brian, 26 October): a card that starts closed, opened by its heading or arrow, with a count. */
details.fold > summary { cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2::before { content: "\25B8"; display: inline-block; width: 1.1em; color: var(--muted, #666); transition: transform .15s; }
details.fold[open] > summary h2::before { transform: rotate(90deg); }
details.fold:not([open]) > summary { border-bottom: 0; }
/* 36.18.2: refresh, and the bar when someone else saved what is open */
header .refreshbtn { background: none; border: 1px solid #4b6a92; color: #cfe2fb; border-radius: 6px;
  font-size: 15px; line-height: 1; padding: 4px 8px; cursor: pointer; margin-right: 6px; }
header .refreshbtn:hover { border-color: #9ec5f4; color: #fff; }
.changesbar { position: sticky; top: 0; z-index: 50; background: #fff4cc; color: #3d2f00; border-bottom: 1px solid #e0c060;
  padding: 8px 16px; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.changesbar button { border: 1px solid #b58a00; background: #fff; border-radius: 6px; padding: 3px 10px; cursor: pointer; }
@media (max-width: 640px) { header .refreshbtn { display: none; } }  /* a phone pulls down to refresh */
/* 36.19.0: every boxed section folds (fold.js) */
.card.foldable > .card-head { cursor: pointer; }
.card.foldable > .card-head h2::before, .card.foldable > .card-head h3::before { content: "\25B8"; display: inline-block; width: 1.1em;
  color: var(--muted, #666); transition: transform .15s; transform: rotate(90deg); }
.card.foldable.folded > .card-head h2::before, .card.foldable.folded > .card-head h3::before { transform: none; }
.card.foldable.folded > :not(.card-head) { display: none !important; }
.card.foldable.folded > .card-head { border-bottom: 0; }
.foldcount { font-weight: normal; color: var(--muted, #666); }
li.showall { padding: 8px 16px; list-style: none; }
/* 36.19.0: the clock button for hourly staff, beside where pilots have Start duty */
.clockpill { text-decoration: none; }
.clockpill.on { background: #1b7f3b; border-color: #1b7f3b; color: #fff; }
/* 36.20.0: the page comes back where you were (stay.js); a jump to a line lands below the top bar */
[id] { scroll-margin-top: 96px; }
.staytoast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
  background: #10243e; color: #fff; padding: 10px 40px 10px 14px; border-radius: 10px; max-width: min(560px, 92vw);
  font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: opacity .5s; }
.staytoast > div + div { margin-top: 4px; }
.staytoast button { position: absolute; right: 6px; top: 6px; background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.staytoast.go { opacity: 0; }
.stillopen { color: #8a5a00; }
/* 36.20.0: wording suggestions as you type */
.suggestbox { list-style: none; margin: 2px 0 0; padding: 0; border: 1px solid var(--border, #ccc); border-radius: 8px;
  background: var(--surface, #fff); max-height: 240px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.suggestbox li { padding: 7px 10px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--hairline, #eee); }
.suggestbox li:hover, .suggestbox li:focus { background: #eef3fb; outline: none; }
.clockpill.ask { background: #8a5a00; border-color: #8a5a00; color: #fff; }

/* 36.20.0: compliance report, laid out like a shop's AD compliance report */
.creport { padding: 14px 16px 18px; }
.creport .crhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 2px solid currentColor; padding-bottom: 6px; margin-bottom: 8px; }
.creport .crhead h2 { margin: 0; }
.creport .crtitle { font-weight: 600; }
.creport table.crid { margin-bottom: 8px; }
.creport .crsec { margin: 14px 0 4px; font-size: 15px; border-bottom: 1px solid var(--line, #ccc); }
.creport .crtable td { vertical-align: top; }
.creport .crwarn { font-weight: 600; margin: 6px 0; }
.creport .crfoot { margin: 8px 0 0; }
.creport .crsign { margin: 18px 0 0; }
@media print {
  @page { size: landscape; margin: 0.4in; }
  .creport { box-shadow: none; border: 0; padding: 0; }
  .creport .crtable { font-size: 9pt; }
  .creport .crtable tr { break-inside: avoid; }
}

/* 36.20.1: the fixed logbook entry layout */
.lbhead { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.4fr) minmax(90px, 1fr); gap: 8px; align-items: start; margin-bottom: 4px; }
.lbhead .lbc { text-align: center; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lbhead .lbr { text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 10px; }
.lbhead .lbr > div { flex-basis: 100%; }
.lbhead .lbk { color: var(--text-dim, #667); font-size: 12px; }
.lbsign { text-align: center; font-size: 13px; margin-top: 6px; }
@media (max-width: 520px) { .lbhead { grid-template-columns: 1fr 1fr; } .lbhead .lbc { grid-column: 1 / -1; grid-row: 2; text-align: left; } }

/* ---- 37.0.0 (Brian, 28 October): the menu down the left side ---- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }
.topfind { flex: 1 1 260px; max-width: 520px; }
.topfind input { width: 100%; height: 34px; border: 0; border-radius: 8px; padding: 0 12px;
                 background: #23395b; color: #fff; font: inherit; font-size: 14px; }
.topfind input::placeholder { color: #a9bad0; }
.topfind input:focus { outline: 2px solid #9ec5f4; }
.sidemenu { position: fixed; top: 52px; left: 0; bottom: 0; width: 200px; z-index: 40; overflow-y: auto;
            background: #fff; border-right: 1px solid var(--hairline); padding: 14px 10px;
            display: flex; flex-direction: column; gap: 2px; }
.sidemenu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--ink); font-size: 15px; }
.sidemenu a:hover { background: #f0f3f8; text-decoration: none; }
.sidemenu a.active { background: #e8effa; color: #10243e; font-weight: 650; }
.sidemenu-classic { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); }
.sidemenu-classic button, .subnav-new button { background: none; border: 0; padding: 8px 14px; cursor: pointer;
            font: inherit; font-size: 13px; color: var(--ink-2); text-decoration: underline; }
.subnav-new { margin-left: auto; }
.subnav-new button { color: #cfd8e4; padding: 4px 2px; }
body.has-menu { padding-left: 200px; }
body.has-menu header { margin-left: -200px; }
body.has-menu .sitefoot { margin-left: 0; }
.aclist-find input { width: 100%; max-width: 520px; height: 44px; font: inherit; font-size: 16px;
                     border: 1px solid #c9cfd8; border-radius: 8px; padding: 0 12px; margin: 0 0 14px; }
.aclist-badges .badge { margin: 0 4px 4px 0; }
@media (max-width: 900px) {
  body.has-menu { padding-left: 0; }
  body.has-menu header { margin-left: 0; }
  .sidemenu { position: sticky; top: 52px; bottom: auto; width: auto; flex-direction: row; overflow-x: auto;
              scrollbar-width: none; padding: 6px 12px; gap: 4px; background: #10243e; border: 0; z-index: 49; }
  .sidemenu::-webkit-scrollbar { display: none; }
  .sidemenu a { color: #cfd8e4; white-space: nowrap; padding: 6px 10px; font-size: 14px; }
  .sidemenu a.active { background: rgba(255,255,255,.14); color: #fff; }
  .sidemenu-classic { margin: 0 0 0 auto; padding: 0; border: 0; }
  .sidemenu-classic button { color: #cfd8e4; white-space: nowrap; }
  .topfind { display: none; }
}
@media (max-width: 640px) { .sidemenu { top: 48px; } }
@media print { .sidemenu { display: none; } body.has-menu { padding-left: 0; } body.has-menu header { margin-left: 0; } }
.wofilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.wofilters input[type=search] { flex: 1 1 240px; width: auto; min-height: 40px; margin: 0; }
.wofilters select { flex: 0 1 190px; width: auto; min-height: 40px; margin: 0; min-width: 0; max-width: 100%; }  /* 37.0.26 (R1-15): a long name stays inside the screen */
.wofilters .seg { display: flex; gap: 4px; }
.progbar { height: 8px; background: var(--neutral-tint); border-radius: 999px; overflow: hidden; min-width: 80px; margin: 4px 0; }
.progbar span { display: block; height: 100%; background: var(--good); }
.hubtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--hairline); }
.hubtabs a { padding: 9px 14px; color: var(--ink-2); border-bottom: 3px solid transparent; font-weight: 550; }
.hubtabs a:hover { color: var(--ink); text-decoration: none; }
.hubtabs a.active { color: #10243e; border-bottom-color: #1c5cab; }
.hubtabs .tabn { background: var(--warning-tint); color: var(--warning-text); border-radius: 999px; padding: 0 7px; font-size: 12px; }
@media (max-width: 640px) { .hubtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .hubtabs a { white-space: nowrap; } }
@media print { .hubtab[hidden] { display: block !important; } }
.formgrid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.formgrid > label { flex: 0 1 220px; }
.unitbox { display: flex; align-items: center; gap: 6px; }
.unitbox input { flex: 1; min-width: 0; }
fieldset.taxed { border: 0; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
fieldset.taxed legend { font-weight: 600; margin-bottom: 6px; }
/* 37.0.0: the one-page work order */
.wohead { margin: 4px 0 10px; }
.wohead h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.woprog { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.progbar.big { height: 12px; flex: 0 1 320px; min-width: 160px; }
.wochips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
        background: var(--neutral-tint); color: var(--ink-2); }
.chip.warn { background: var(--warning-tint); color: var(--warning-text); }
.chip.bad { background: var(--critical-tint); color: var(--critical-text); }
.chip.ok { background: var(--good-tint); color: var(--good-text); }
.wotools { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin: 0 0 14px; padding: 10px 0;
           border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.wotools .inline-menu { position: relative; }
.wotools .popform, .wotools .stackbtns { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 280px;
           background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 12px;
           box-shadow: 0 8px 24px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: 8px; }
.partsbadge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; margin-left: 4px; }
.pb-waiting, .pb-ordered, .pb-some { background: var(--warning-tint); color: var(--warning-text); }
.pb-late { background: var(--critical-tint); color: var(--critical-text); }
.pb-here { background: var(--good-tint); color: var(--good-text); }
.woitem .lineacts { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.fixform { padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 8px; margin-bottom: 6px; }
.rrrow { margin-top: 4px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font: inherit; }
.moneybox td { padding: 6px 16px; }
.moneybox tr.total td { border-top: 2px solid var(--ink); }
.finishsteps { list-style: none; margin: 0; padding: 6px 16px 14px; }
.finishsteps li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.finishsteps .tick { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                     background: var(--neutral-tint); font-weight: 700; font-size: 13px; flex: none; }
.finishsteps li.ok .tick { background: var(--good-tint); color: var(--good-text); }
/* 37.0.1: numbered lines that fold, saved in place */
li.woitem { padding: 10px 16px; }
li.woitem.folded > .linebody { display: none; }
.linehead { cursor: pointer; align-items: center; gap: 10px; }
.linehead .lineleft { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.linehead .lineright { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.linenum { display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chev { display: inline-block; width: 0; height: 0; border-left: 5px solid var(--ink-2); border-top: 4px solid transparent;
        border-bottom: 4px solid transparent; transition: transform .15s; transform: rotate(90deg); }
li.woitem.folded > .linehead .chev { transform: rotate(0deg); }
.linemeta { margin: 4px 0 0 calc(2.2em + 18px); }
.sublines { margin: 6px 0 0 24px; border-left: 3px solid var(--warning-tint); }
.sublines > li.woitem { padding: 8px 12px; }
.foldall { display: flex; gap: 6px; padding: 8px 16px 0; }
.reopened { margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--warning-tint); color: var(--warning-text); }
.partsoffer { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--hairline); border-radius: 8px; background: #fbfcfe; }
.savedmark { font-size: 12px; font-weight: 700; color: var(--good-text); background: var(--good-tint); border-radius: 999px; padding: 1px 8px; }
.wotoast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 950;
           background: #10243e; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
           font-size: 14px; max-width: calc(100vw - 32px); }
@media print { li.woitem.folded > .linebody { display: block; } .foldall { display: none; } }
.discgroup .discbox { margin: 0 16px 12px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px; background: #fff; }
.discgroup .discbox:first-of-type { margin-top: 12px; }

/* 37.0.3 (Brian, answer 52): alerts folded to a small red box with the count. */
.alertfold-form { margin: 0 0 12px; }
.alertfold { background: #c8102e; color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.alertfold strong { display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: #fff; color: #c8102e; }
.linealertbar.folded { display: inline-block; padding: 4px 10px; border-radius: 8px; }

/* 37.0.4: the $ in front of every dollar box. */
.moneysign { display: inline-block; margin-right: 4px; font-weight: 600; color: var(--ink-2, #555); }

/* 37.0.6 (Brian, 29 Oct): every microphone button while it is listening
   (static/dictate.js): red and pulsing, with "Listening..." beside it. */
.dictating { background: var(--critical) !important; border-color: var(--critical) !important;
             color: #fff !important; animation: dictate-pulse 1.2s ease-in-out infinite; }
@keyframes dictate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 59, 59, .45); }
                           50% { box-shadow: 0 0 0 7px rgba(208, 59, 59, 0); } }
.dictate-listening { color: var(--critical) !important; font-weight: 650; }
.dictate-listening::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
                             border-radius: 50%; background: var(--critical); vertical-align: middle;
                             animation: dictate-blink 1.2s ease-in-out infinite; }
@keyframes dictate-blink { 50% { opacity: .25; } }
.dictate-status { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .dictating, .dictate-listening::before { animation: none; } }

/* ==== probe-mobile (30 October 2026): the new layout on iPhone, Android, iPad
   and desktop. Each block names the audit finding it answers. ==== */

/* (2) Phones and tablets must not enlarge text on their own, and a box being
   typed in must be 16 px or iOS zooms the page in and leaves it zoomed. Only on
   touch screens: a computer keeps the compact 14 px boxes. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
  select, textarea { font-size: 16px !important; }
}

/* (3) Notch and home bar, with viewport-fit=cover in base.html. Zero on
   anything without a notch. */
header { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
@media (max-width: 640px) { header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } }
body.has-taskbar .taskbar { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
/* The handle of the small bar: big enough to hit, and above the swipe-home strip. */
body.taskbar-small .taskbar-strip { width: 88px; height: 30px; line-height: 30px; font-size: 15px;
  bottom: calc(6px + env(safe-area-inset-bottom)); border-bottom: 1px solid var(--hairline, #ddd); border-radius: 15px;
  box-shadow: 0 1px 6px rgba(0,0,0,.15); }
/* (1) While pinched in, a bar pinned to the bottom floats mid-page on an iPhone. */
body.zoomed .taskbar, body.zoomed .taskbar-strip { display: none !important; }

/* (5) Home tiles: the logbook print style .lbl (dashed box, 8 px type,
   overflow hidden) was landing on the tile captions. */
.tile .lbl { background: none; border: 0; padding: 0; border-radius: 0; overflow: visible;
             font-family: inherit; color: var(--ink-2); flex-wrap: wrap; }

/* (6) Master schedule: the full-width grid starts after the side menu. */
@media (min-width: 1180px) {
  body.has-menu .sgwrap { width: calc(100vw - 248px); margin-left: calc(50% - 50vw + 124px); }
}
/* With the bar at the bottom, the grid stops above it. */
body.has-taskbar:not(.taskbar-small) .sgwrap { max-height: calc(100vh - 290px); }
@supports (height: 100dvh) { body.has-taskbar:not(.taskbar-small) .sgwrap { max-height: calc(100dvh - 290px); } }

/* (7) Bars pinned to the bottom of a page (Merge entry, onboarding) sit above
   the taskbar, not under it. */
body.has-taskbar:not(.taskbar-small):not(.kb-up) .joinbar { bottom: calc(66px + env(safe-area-inset-bottom)) !important; z-index: 45 !important; }

/* (8) The message box starts after the side menu. */
@media (min-width: 901px) and (min-height: 501px) { body.has-menu .chatbar { left: 200px; } }

/* (9) Phones on their side (and any short screen): the menu becomes the row
   along the top and scrolls away with the page; only the thin top line and a
   one-line taskbar stay put. */
@media (max-height: 500px) and (orientation: landscape) {
  body.has-menu { padding-left: 0; }
  body.has-menu header { margin-left: 0; }
  header { height: 42px; }
  .sidemenu { position: static; width: auto; flex-direction: row; overflow-x: auto; scrollbar-width: none;
              padding: 6px 12px; gap: 4px; background: #10243e; border: 0; }
  .sidemenu::-webkit-scrollbar { display: none; }
  .sidemenu a { color: #cfd8e4; white-space: nowrap; padding: 6px 10px; font-size: 14px; }
  .sidemenu a.active { background: rgba(255,255,255,.14); color: #fff; }
  .sidemenu-classic { margin: 0 0 0 auto; padding: 0; border: 0; }
  .sidemenu-classic button { color: #cfd8e4; white-space: nowrap; }
  .topfind { display: none; }
  body.has-taskbar .taskbar { left: 50% !important; right: auto !important; transform: translateX(-50%);
    width: min(560px, 100%); border-radius: 12px 12px 0 0; padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
  .taskbar a, .taskbar button { flex-direction: row; gap: 6px; min-height: 38px; font-size: 13px; }
  .taskbar .i { font-size: 17px; }
  body.has-taskbar main { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.has-taskbar:not(.taskbar-small):not(.kb-up) .joinbar { bottom: calc(46px + env(safe-area-inset-bottom)) !important; }
  .lbe-bar { position: static !important; }
  .sgwrap { max-height: none !important; }
}

/* (10) Tap targets on touch screens: at least about 40 px tall, without
   changing how anything looks on a computer. */
@media (pointer: coarse) {
  .btn, a.btn, button.btn, summary.btn { min-height: 40px; }
  .btn.small, a.btn.small, button.btn.small, summary.btn.small { min-height: 36px; }
  .btn, a.btn { display: inline-flex; align-items: center; justify-content: center; }
  button.linkbtn, summary.linkbtn, .signout { min-height: 36px; padding-top: 6px !important; padding-bottom: 6px !important; }
  button.linkbtn.small { min-width: 36px; }
  .notebar > summary { min-height: 36px; min-width: 36px; display: flex; align-items: center; }
  details > summary { min-height: 36px; }
  .taskbar .taskbar-min { flex-basis: 36px; min-width: 36px; }
  label.pill { min-height: 36px; display: inline-flex; align-items: center; }
  input[type=checkbox], input[type=radio] { min-width: 22px; min-height: 22px; }
  .pwreveal, .refreshbtn { min-height: 36px; min-width: 36px; }
  .subnav a { display: inline-block; padding: 9px 4px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]), select { min-height: 40px; }
}

/* (1) The back-to-top button is not in the way while typing. */
body.kb-up .totop { display: none !important; }
@media print { .doc, .labelsheet { zoom: 1 !important; } }

/* 37.0.7 (Brian, 30 Oct): a small note on phones only; nothing is turned off. */
.phonenote { display: none; margin: 0 0 8px; }
@media (max-width: 600px) { .phonenote { display: block; } }
/* 37.0.7: the back-to-top button is not over the line numbers in lines mode. */
body:has(.lbe-lines-mode) .totop { display: none !important; }

/* 37.0.9: remembered suggestions under a typing box: about five show, then it scrolls. */
.boxmem{position:absolute;z-index:70;background:var(--surface,#fff);border:1px solid var(--hairline,#c9ced6);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.15);max-height:11.5em;overflow-y:auto;font-size:14px}
.boxmem[hidden]{display:none}
.boxmem .bm-row{display:flex;align-items:center;gap:6px;padding:0 4px 0 10px;min-height:2.2em;cursor:pointer;border-bottom:1px solid var(--hairline,#eef0f3)}
.boxmem .bm-row:last-child{border-bottom:0}
.boxmem .bm-row:hover,.boxmem .bm-row.on{background:var(--lbe-edit,#eaf1ff)}
.boxmem .bm-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boxmem .bm-x{flex:none;border:0;background:none;color:var(--muted,#777);font-size:18px;line-height:1;padding:6px 8px;cursor:pointer}

/* 37.0.10 (Brian, 31 Oct): Light, Dark or Match my device. Kept small. */
.sidemenu-look, .subnav-look, .pref-look { margin: 0; }
.sidemenu-look { margin-top: auto; padding: 10px 14px 0; border-top: 1px solid var(--hairline); }
.sidemenu-look + .sidemenu-classic { margin-top: 0; border-top: 0; padding-top: 0; }
.sidemenu-look label, .subnav-look label, .pref-look label { display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); margin: 0; font-weight: 400; }
.sidemenu-look select, .subnav-look select, .pref-look select { width: auto; font-size: 13px; padding: 2px 4px;
  min-height: 0; }
.subnav-look { margin-left: auto; align-self: center; }
.subnav-look label { color: #cfd8e4; }
.subnav-look + .subnav-new { margin-left: 8px; }
@media (max-width: 900px) {
  .sidemenu-look { margin: 0 0 0 auto; padding: 0 6px; border: 0; }
  .sidemenu-look label { color: #cfd8e4; }
  .sidemenu-look label span { display: none; }
  .sidemenu-look + .sidemenu-classic { margin-left: 0; }
}

/* ---- the new Home, 37.0.10 (Brian, 31 Oct) ---- */
.h2 { --h2-red: #d23a3a; --h2-amber: #e19a0c; --h2-green: #1f9d63; --h2-navy: #1d4f9a;
      --h2-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.05); max-width: 1240px; }
.h2-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 2px 0 16px; flex-wrap: wrap; }
.h2-greet h1 { margin: 0; font-size: 27px; letter-spacing: -.02em; }
.h2-greet .sub { margin: 4px 0 0; }
.h2-label, .h2 .h2-phead h2 { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2);
            margin: 0; font-weight: 700; }
.h2-needs .h2-label { margin: 0 0 10px; }
.h2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.h2-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--surface);
           border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px 14px 20px; color: var(--ink);
           box-shadow: var(--h2-shadow); text-decoration: none; }
.h2-stat:hover { text-decoration: none; border-color: var(--accent); }
.h2-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--h2-navy); }
.h2-stat.r::before { background: var(--h2-red); } .h2-stat.a::before { background: var(--h2-amber); }
.h2-num { font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; order: 2; }
.h2-what { font-size: 13px; font-weight: 650; color: var(--ink-2); order: 1; }
.h2-desc { font-size: 12.5px; color: var(--muted); order: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 18px; align-items: start; }
.h2-cols.h2-one { grid-template-columns: 1fr; }
.h2-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--h2-shadow);
            overflow: hidden; min-width: 0; }
.h2-phead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h2-panel .h2-phead { padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.h2-panel .pcard { margin: 10px 16px; }
.h2-fold { margin: 0; }
.h2-empty { margin: 0; padding: 14px 16px; }
.h2-list { list-style: none; margin: 0; padding: 4px 0; }
.h2-list > li { border-bottom: 1px solid var(--hairline); }
.h2-list > li:last-child { border-bottom: 0; }
.h2-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px; }
.h2-row a { color: var(--ink); font-weight: 550; }
.h2-bar { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--h2-navy);
          box-shadow: 0 0 0 4px rgba(29,79,154,.15); }
.h2-row.ts-red .h2-bar, .h2-row.ts-bad .h2-bar, .h2-row.ts-critical .h2-bar { background: var(--h2-red); box-shadow: 0 0 0 4px rgba(210,58,58,.15); }
.h2-row.ts-amber .h2-bar, .h2-row.ts-warn .h2-bar { background: var(--h2-amber); box-shadow: 0 0 0 4px rgba(225,154,12,.18); }
.h2-row.ts-green .h2-bar, .h2-row.ts-good .h2-bar { background: var(--h2-green); box-shadow: 0 0 0 4px rgba(31,157,99,.15); }
.h2-fleet a { display: flex; align-items: center; gap: 12px; padding: 9px 16px; color: var(--ink); text-decoration: none; }
.h2-fleet a:hover { background: var(--neutral-tint); text-decoration: none; }
.h2-tail { font-weight: 800; font-size: 14.5px; letter-spacing: .02em; width: 76px; flex: none; }
.h2-ty { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-2); }
.h2-ty small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-meter { width: 80px; height: 6px; border-radius: 6px; background: var(--neutral-tint); overflow: hidden; flex: none; }
.h2-meter i { display: block; height: 100%; background: var(--h2-navy); }
.h2-meter i.r { background: var(--h2-red); } .h2-meter i.a { background: var(--h2-amber); } .h2-meter i.g { background: var(--h2-green); }
.h2-tag { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; flex: none;
          background: var(--neutral-tint); color: var(--ink-2); min-width: 64px; text-align: center; }
.h2-tag.g { background: var(--good-tint); color: var(--good-text); }
.h2-tag.a { background: var(--warning-tint); color: var(--warning-text); }
.h2-tag.r { background: var(--critical-tint); color: var(--critical-text); }
.h2 .card { border-radius: 16px; }
/* Quick actions: small square buttons, the same tiles as before. */
.h2-quick { margin: 0 0 18px; }
.h2-quick .tilegroup-head { margin-bottom: 10px; }
.h2-quick .tilegrid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.h2-quick .apptile { padding: 14px 8px 12px; text-align: center; border-radius: 14px; box-shadow: var(--h2-shadow); }
.h2-quick .apptile-icon { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 8px;
                          border-radius: 12px; background: var(--neutral-tint); font-size: 21px; }
.h2-quick .apptile-title { display: block; font-size: 12.5px; line-height: 1.25; }
.h2-quick .apptile-count { top: 6px; right: 6px; }
/* Everything: every screen, in a short grouped list. */
.h2-all .h2-phead { margin-bottom: 10px; }
.h2-all .taskbar-choose { margin: 0; }
.h2-groups { column-width: 200px; column-gap: 0; column-rule: 1px solid var(--hairline);
             background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 6px;
             box-shadow: var(--h2-shadow); }
.h2-group { margin: 0; padding: 4px 12px 10px; min-width: 0; break-inside: avoid; }
.h2 .h2-group h2 { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 4px 0 6px; }
.h2-items .apptile { display: flex; align-items: center; gap: 8px; padding: 5px 6px; margin: 0 -6px; border: 0;
                     border-radius: 8px; background: none; font-size: 13.5px; box-shadow: none; transform: none; }
.h2-items a.apptile:hover { background: var(--neutral-tint); box-shadow: none; transform: none; }
.h2-items .apptile-icon { font-size: 15px; margin: 0; width: 20px; text-align: center; flex: none; }
.h2-items .apptile-title { font-weight: 500; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-items .apptile-count { position: static; margin-left: auto; height: 18px; min-width: 18px; font-size: 11px;
                           background: var(--h2-red); }
.h2-items .apptile.flag-warn .apptile-count { background: var(--h2-amber); }
.h2-soon { margin-left: auto; font-size: 10.5px; color: var(--muted); }
.tiles-editing .h2-items .apptile { padding-right: 30px; }
.tiles-editing .h2-items .tilectl.tadd { top: 1px; right: 0; width: 24px; height: 24px; font-size: 16px; }
.tiles-editing .h2-quick [data-toptiles-grid] .apptile { padding-bottom: 44px; }
/* The logo at the top of the side menu. */
.sidemenu-logo { display: block; padding: 2px 10px 14px !important; margin-bottom: 4px; }
.sidemenu-logo:hover { background: none !important; }
.sidemenu-logo img { display: block; max-width: 100%; max-height: 46px; }
@media (max-width: 1100px) { .h2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h2-cols { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .sidemenu-logo { display: none; } }
@media (max-width: 640px) {
  .h2-greet h1 { font-size: 23px; }
  .h2-stats { display: flex; overflow-x: auto; gap: 10px; margin: 0 -14px 16px; padding: 2px 14px 6px; scrollbar-width: none; }
  .h2-stat { min-width: 150px; padding: 12px 12px 12px 16px; }
  .h2-num { font-size: 28px; }
  .h2-quick .tilegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .h2-quick .apptile { padding: 10px 4px; }
  .h2-quick .apptile-icon { width: 34px; height: 34px; font-size: 18px; margin-bottom: 6px; }
  .h2-quick .apptile-title { font-size: 11.5px; }
  .h2-groups { column-width: 150px; }
  .h2-meter { width: 46px; }
  .h2-tail { width: 64px; }
}

/* 37.0.12 (Brian, 31 Oct): drop a file on any Choose file box. */
.drop-zone { position: relative; border-radius: 8px; }
body.drop-dragging .drop-zone { outline: 2px dashed var(--accent); outline-offset: 3px; }
.drop-zone.drop-here { background: var(--neutral-tint); }
.drop-zone.drop-here::after { content: "Drop files here"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(28, 92, 171, .14); color: var(--accent); font-weight: 700; font-size: 14px;
  border-radius: 8px; pointer-events: none; z-index: 2; }
.drop-note { display: block; margin: 4px 0; color: var(--warning-text); font-weight: 600; }
.drop-note:empty { display: none; }

/* 37.0.15 (Brian, 1 Nov): the one Scan button on Home */
.homescan { font-size: 17px; padding: 12px 20px; min-height: 48px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; }
.home-head .homescan { margin-top: 10px; }

/* 37.0.16 (review 1 Nov, L16): the ramp's Done, Set and undo buttons and the
   paid-at-the-truck tick at least 44 px tall on a phone, for gloved hands. */
@media (pointer: coarse), (max-width: 640px) {
  .rampjob .btn.small, .rampjob a.btn.small, .rampjob button.btn.small, .rampjob .linkbtn,
  .rampjob .notneeded > summary, .hangarset .btn.small {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .rampjob .linkbtn { padding: 0 10px !important; }
  #ft-paid-row:not([hidden]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  #ft-paid-row input[type="checkbox"] { width: 26px; height: 26px; }
}

/* 37.0.17 (Brennon's note 68): a flown leg with no weight and balance. */
.card.wbmissing { border-left:4px solid var(--critical); background:var(--critical-tint); color:var(--critical-text); }
.wbafter { color:var(--critical-text); font-weight:600; }

/* 37.0.26 (agent run R3-18): on a phone Light/Dark is under My preferences, not cut off at the end of the menu strip */
@media (max-width: 640px) { .subnav .subnav-look, .sidemenu .sidemenu-look { display: none; } }
.mywork-look { margin: 6px 0 0; }
/* 37.0.27 (N3-06): the strip is not cut off on a phone; Classic view is a computer choice. */
@media (max-width: 640px) { .sidemenu .sidemenu-classic { display: none; } }