/* 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 ---- */
header {
  background: #10243e;
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
}
header .brand { font-weight: 650; font-size: 16px; letter-spacing: 0.2px; color: #fff; }
header .brand span { color: #9ec5f4; font-weight: 500; }
header nav { display: flex; gap: 18px; }
header nav a { color: #cfd8e4; font-size: 14px; padding: 4px 2px; }
header nav a.active, header nav a:hover { color: #fff; text-decoration: none; border-bottom: 2px solid #9ec5f4; }

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;
  overflow: hidden; 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; }
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[type="text"], input[type="number"], input[type="date"], input[type="email"], 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; }

/* ---- 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 { margin-left: auto; 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: 8px 14px; gap: 10px 14px; height: auto; flex-wrap: wrap; }
  header .brand { font-size: 14px; white-space: nowrap; }
  header .brand span { display: none; }
  header nav { order: 3; width: 100%; flex-wrap: wrap; gap: 8px 14px; }
  header nav a { font-size: 13px; white-space: nowrap; }
  header .userbox { margin-left: auto; }
  header .username { display: none; }
  main { padding: 16px 14px 48px; }
  .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; }
.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. */
.notebar { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.notebar > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 7px; margin: 10px 0 0; padding: 6px 12px; 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;
}
.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: 10px 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; 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 { display: none; } }

/* ---------------------------------------------------------------- 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-block;
  margin: 0 0 14px;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--rule, #d9d5cd);
  border-radius: 999px;
  background: #fff;
  color: var(--muted, #5c6470);
  font-size: 13px;
  text-decoration: none;
  line-height: 1.3;
}
.backlink:hover { color: var(--ink, #10243e); border-color: var(--muted, #5c6470); }

@media (max-width: 640px) {
  /* Bigger target for a thumb, and it is the most-pressed control on a
     detail screen once somebody is working from the ramp. */
  .backlink { padding: 8px 14px 8px 11px; font-size: 14px; }
}

/* 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; }