@charset "utf-8";
/* =========================================================================
   S Provisions — Accounting
   Same signage grammar as the public v2 site: interstate navy, reflective
   sign-face white, signal amber, condensed placard type. Where the marketing
   site is spacious, this is dense — it is a working tool, read on a phone,
   often one-handed, often in a hurry.
   ========================================================================= */

/* ---------- Fonts (local, versioned via the `current` symlink) ---------- */
@font-face {
  font-family: 'Oswald';
  src: url('/assets/fonts/oswald/current/oswald-var.ttf') format('truetype-variations'),
       url('/assets/fonts/oswald/current/oswald-var.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow/current/barlow-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow/current/barlow-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow/current/barlow-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow/current/barlow-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/barlow-condensed/current/barlow-semicondensed-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/barlow-condensed/current/barlow-semicondensed-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('/assets/fonts/barlow-condensed/current/barlow-semicondensed-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --navy-deep: #0A1730;
  --navy:      #12315E;
  --navy-lift: #1B4383;
  --amber:     #F0A22E;
  --amber-lit: #FFB444;
  --amber-sh:  #C4801C;
  --amber-ink: #B67B12;
  --amber-rule:#E0A020;
  --green:     #2E8B62;
  --red:       #C4443C;
  /* Marks a line that settles on its own terms — DAA of the Rockies loads.
     Dark enough to stay legible on the cream and to survive a fax-grade
     print, far enough from navy to be picked out beside it. */
  --teal:      #0A5F5C;
  --teal-lift: #E4F0EF;

  --cream:     #F1EFEA;
  --paper:     #FFFFFF;
  --paper-alt: #FBFAF7;
  --rule:      #EFECE5;
  --rule-mid:  #E7E3DB;
  --rule-firm: #DDD8CE;
  --rule-hard: #C9C3B7;

  --ink:       #0A1730;
  --ink-mid:   #5C6577;
  --ink-soft:  #8A93A6;

  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --body:    'Barlow', system-ui, -apple-system, sans-serif;
  --label:   'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --mono:    ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gap:  12px;

  /* Nothing interactive is smaller than this. Phone use is the default here,
     not an afterthought, and 44px is the smallest reliable thumb target. */
  --tap: 44px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--amber); }
input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--amber); color: var(--navy-deep);
  padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* ---------- Type utilities ---------- */
.u-label {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.u-num { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.u-mono { font-family: var(--mono); font-size: .82em; }
.u-muted { color: var(--ink-mid); }
.u-soft { color: var(--ink-soft); }
.u-green { color: var(--green); }
.u-red { color: var(--red); }
.u-warn { color: var(--amber-ink); }
.u-right { text-align: right; }
.u-nowrap { white-space: nowrap; }

/* =========================================================================
   Header
   ========================================================================= */
.top {
  background: var(--navy-deep);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.top__bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
}
.brand:hover { color: #fff; }
.shield {
  width: 32px; height: 36px; flex: none;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  display: flex; align-items: center; justify-content: center;
}
.shield span {
  font-family: var(--display);
  font-weight: 700; font-size: 20px;
  color: var(--navy-deep);
  line-height: 1; padding-bottom: 5px;
}
.brand__name {
  font-family: var(--display);
  font-weight: 600; font-size: 16px;
  letter-spacing: .055em; color: #fff;
  line-height: 1.05; white-space: nowrap;
}
.brand__sub {
  font-family: var(--label);
  font-weight: 600; font-size: 10px;
  letter-spacing: .19em; color: var(--amber);
  line-height: 1.4;
}
.top__meta { display: flex; align-items: center; gap: 10px; flex: none; }
.top__period { text-align: right; line-height: 1.2; }
.top__period .u-label { font-size: 9.5px; color: rgba(255,255,255,.5); }
.top__period strong { font-size: 13px; font-weight: 600; color: #fff; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--amber); color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  flex: none;
}
.avatar:hover { color: var(--navy-deep); background: var(--amber-lit); }

/* Primary nav — scrolls sideways on a phone rather than collapsing into a
   menu, so every destination stays one tap away. */
.nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 6px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar { display: none; }
.nav__item {
  flex: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 12px 13px 9px;
  cursor: pointer;
  font-family: var(--label);
  font-weight: 600; font-size: 13.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
  min-height: var(--tap);
}
.nav__item:hover { color: #fff; }
.nav__item[aria-current="page"] { color: #fff; border-bottom-color: var(--amber); }
.nav__badge {
  background: var(--amber); color: var(--navy-deep);
  border-radius: 9px; min-width: 18px; padding: 1px 5px;
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: 0;
}

/* The one item that leaves the site — accounting's link to the dashboard,
   and the board's link back. Set apart at the far end and in amber, so it is
   never mistaken for one more section of the site it sits on. */
.nav__item--out { margin-left: auto; color: var(--amber); }
.nav__item--out:hover { color: var(--amber-lit); }

/* Sub-nav — the sections inside a grouped area, drawn under the primary bar
   and only on pages within that area. Light rather than navy, so it reads as
   part of the page rather than a second header, and it scrolls sideways for
   the same reason the primary nav does: no destination hides behind a menu. */
.subnav-bar {
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule-firm);
}
.subnav {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  max-width: var(--wrap);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav__item {
  flex: none;
  border-bottom: 3px solid transparent;
  padding: 10px 12px 7px;
  font-family: var(--label);
  font-weight: 600; font-size: 12.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
  min-height: var(--tap);
}
.subnav__item:hover { color: var(--ink); }
.subnav__item[aria-current="page"] {
  color: var(--navy); border-bottom-color: var(--navy);
}
.subnav__badge {
  background: var(--navy); color: #fff;
  border-radius: 9px; min-width: 18px; padding: 1px 5px;
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: 0; text-align: center;
}

/* =========================================================================
   Layout
   ========================================================================= */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px 14px 96px;
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.page-head h1 {
  font-family: var(--display);
  font-weight: 700; font-size: 30px;
  text-transform: uppercase; line-height: 1;
  letter-spacing: -.005em;
}
.page-head .u-label { font-size: 11px; letter-spacing: .2em; }
.page-lede {
  font-size: 15px; color: var(--ink-mid);
  margin: 0 0 14px; max-width: 640px; line-height: 1.55;
}

/* A lede with its escape hatch beside it. The action sits right of the text on
   a wide screen and drops under it on a phone, rather than squeezing the lede
   into a column two words wide. */
.lede-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.lede-row .page-lede { flex: 1 1 420px; }
.lede-row > .btn { flex: none; }

.card {
  background: var(--paper);
  padding: 18px;
}
.card--flush { padding: 0; }
.card h2, .card h3 {
  font-family: var(--display);
  font-weight: 600; font-size: 16px;
  letter-spacing: .075em; text-transform: uppercase;
}
.card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}

.grid { display: grid; gap: var(--gap); }
.grid--kpi  { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--half { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--form { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.grid--rate { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stack { display: grid; gap: var(--gap); }
.stack--tight { gap: 8px; }

/* Two KPIs per row on a phone reads better than one giant tile per screen. */
@media (max-width: 560px) {
  .grid--kpi { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* =========================================================================
   KPI tiles
   ========================================================================= */
.kpi {
  background: var(--paper);
  padding: 16px;
  border-top: 4px solid var(--navy-deep);
}
.kpi--navy { background: var(--navy); border-top-color: var(--amber); }
.kpi--navy .kpi__label { color: rgba(255,255,255,.62); }
.kpi--navy .kpi__value { color: #fff; }
.kpi--navy .kpi__note  { color: rgba(255,255,255,.68); }
.kpi--red   { border-top-color: var(--red); }
.kpi--red   .kpi__value { color: var(--red); }
.kpi--green { border-top-color: var(--green); }
.kpi--green .kpi__value { color: var(--green); }
.kpi__label { font-family: var(--label); font-size: 11px; font-weight: 600;
              letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.kpi__value { font-family: var(--display); font-weight: 600; font-size: 30px;
              line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi__note  { font-size: 13px; color: var(--ink-mid); margin-top: 2px; line-height: 1.35; }

@media (max-width: 560px) {
  .kpi { padding: 13px; }
  .kpi__value { font-size: 24px; }
  .kpi__label { font-size: 10px; letter-spacing: .14em; }
  .kpi__note  { font-size: 12px; }
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap);
  padding: 12px 20px;
  border: 0; cursor: pointer;
  font-family: var(--label);
  font-weight: 600; font-size: 14px;
  letter-spacing: .11em; text-transform: uppercase;
  background: none; color: var(--navy);
  text-align: center;
}
.btn--amber {
  background: var(--amber); color: var(--navy-deep); font-weight: 700;
  box-shadow: 0 3px 0 var(--amber-sh);
}
.btn--amber:hover { background: var(--amber-lit); color: var(--navy-deep); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-lift); color: #fff; }
.btn--dark { background: var(--navy-deep); color: #fff; }
.btn--green { background: var(--green); color: #fff; font-weight: 700; }
.btn--green:hover { background: #257050; color: #fff; }
.btn--ghost { border: 1.5px solid var(--rule-hard); color: var(--navy); }
.btn--ghost:hover { border-color: var(--amber); color: var(--navy); }
.btn--ghost-green { border: 1.5px solid var(--green); color: var(--green); }
.btn--ghost-red { border: 1.5px solid #E4C9C6; color: var(--red); }
.btn--ghost-red:hover { border-color: var(--red); background: #FDF4F3; color: var(--red); }
.btn--quiet { color: var(--ink-mid); padding: 8px 4px; min-height: 0; }
.btn--quiet:hover { color: var(--amber); }
.btn--sm { min-height: 38px; padding: 8px 13px; font-size: 12.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* A <summary> dressed as a button or a feed row is that thing — the
   disclosure triangle would give the game away. */
summary.btn, summary.feed__row { list-style: none; }
summary.btn::-webkit-details-marker,
summary.feed__row::-webkit-details-marker { display: none; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* On a phone the primary action goes full width — it is what she came for. */
@media (max-width: 560px) {
  .btn-row--stack { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .btn-row--stack .btn { width: 100%; }
  .page-head .btn { width: 100%; }
}

/* Filter / mode pills */
.pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pill {
  background: var(--paper); color: var(--navy);
  border: 1.5px solid var(--rule-firm);
  padding: 9px 15px; cursor: pointer;
  font-family: var(--label); font-weight: 600; font-size: 13px;
  letter-spacing: .11em; text-transform: uppercase;
  min-height: 40px;
}
.pill[aria-pressed="true"], .pill.is-on {
  background: var(--navy-deep); color: #fff; border-color: var(--navy-deep);
}

/* How many a filter holds, on the filter itself. Which list is worth opening
   is the question being asked while looking at these, and answering it costs
   one number. A zero stays on the page rather than being hidden: the set of
   filters has to sit still, or their positions cannot be learned. */
.pill { display: inline-flex; align-items: center; gap: 7px; }
.pill__badge {
  background: var(--rule-mid); color: var(--navy-deep);
  border-radius: 9px; min-width: 19px; padding: 1px 6px;
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: 0; text-align: center;
}
.pill.is-on .pill__badge { background: var(--amber); color: var(--navy-deep); }
.pill__badge.is-zero { opacity: .45; }

/* =========================================================================
   Forms
   ========================================================================= */
.field { display: block; }
.field > span {
  display: block;
  font-family: var(--label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
}
.field input, .field select, .field textarea, .input {
  width: 100%;
  margin-top: 4px;
  padding: 11px 12px;
  border: 1.5px solid var(--rule-firm);
  background: var(--paper);
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  min-height: var(--tap);
}
.field textarea { line-height: 1.5; resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--amber); outline: none;
}
.field--money input { font-family: var(--display); font-weight: 500; font-size: 18px; }
.field__hint { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

/* =========================================================================
   Invoice rows / list
   ========================================================================= */
.rowcard {
  display: flex; width: 100%; text-align: left;
  background: var(--paper); border: 0;
  border-left: 4px solid var(--navy);
  padding: 14px 16px; margin-bottom: 8px;
  cursor: pointer; gap: 14px; align-items: center; flex-wrap: wrap;
}
.rowcard:hover { background: var(--paper-alt); }
.rowcard__main { flex: 1 1 250px; min-width: 0; }
.rowcard__top { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.rowcard__num {
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .03em;
}
.rowcard__agency { font-size: 15px; font-weight: 600; margin-top: 3px; }
.rowcard__sub { font-size: 13.5px; color: var(--ink-mid); margin-top: 1px; }
.rowcard__amt { flex: none; text-align: right; min-width: 120px; }
.rowcard__total {
  font-family: var(--display); font-weight: 600; font-size: 21px;
  font-variant-numeric: tabular-nums;
}
.rowcard__bal { font-size: 13px; margin-top: 1px; font-weight: 600; }

@media (max-width: 560px) {
  .rowcard { padding: 13px 14px; gap: 8px; }
  .rowcard__amt { min-width: 0; text-align: left; width: 100%;
                  display: flex; justify-content: space-between; align-items: baseline;
                  border-top: 1px solid var(--rule); padding-top: 8px; }
  .rowcard__total { font-size: 19px; }
}

.tag {
  font-family: var(--label); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; color: #fff; background: var(--navy);
}

/* =========================================================================
   Dashboard pieces
   ========================================================================= */
.aging__row {
  padding: 12px 0; border-bottom: 1px solid var(--rule-mid);
  display: flex; align-items: center; gap: 12px;
}
.aging__label {
  width: 74px; flex: none;
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mid);
}
.aging__track { flex: 1; height: 11px; background: var(--rule); min-width: 30px; }
.aging__bar { height: 11px; }
.aging__amt {
  width: 92px; flex: none; text-align: right;
  font-family: var(--display); font-weight: 500; font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.attn {
  width: 100%; text-align: left; background: var(--paper-alt);
  border: 0; border-left: 4px solid var(--navy);
  padding: 13px 14px; margin-top: 9px; cursor: pointer;
  display: flex; gap: 12px; align-items: center;
}
.attn:hover { background: #F3F0E9; }
.attn__body { flex: 1; min-width: 0; }
.attn__tag {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
}
.attn__title { font-size: 15px; font-weight: 600; margin-top: 2px; }
.attn__sub { font-size: 13px; color: var(--ink-mid); margin-top: 1px; }
.attn__amt { font-family: var(--display); font-weight: 500; font-size: 17px; flex: none; }

.feed__row {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.feed__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.feed__text { flex: 1 1 200px; min-width: 0; font-size: 14.5px; }
.feed__when {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); flex: none;
}
/* Rows sitting directly inside a .card--flush, which has no padding of its own. */
.feed--inset { padding-left: 18px; padding-right: 18px; }
.feed--inset:last-child { padding-bottom: 6px; }
.feed--inset:last-child .feed__row:last-child { border-bottom: 0; }

/* =========================================================================
   Import — steps and dropzone
   ========================================================================= */
.steps { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 16px; }
.step {
  flex: 1 1 140px;
  background: var(--paper); color: var(--ink-soft);
  padding: 11px 14px;
  display: flex; gap: 9px; align-items: center;
  border-right: 1px solid var(--cream);
}
.step.is-done { background: var(--navy); color: #fff; }
.step.is-now  { background: var(--navy-deep); color: #fff; }
.step__num { font-family: var(--display); font-weight: 600; font-size: 15px; opacity: .75; }
.step__label {
  font-family: var(--label); font-weight: 600; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
}

.drop {
  display: block; width: 100%;
  background: var(--paper);
  border: 2px dashed var(--rule-hard);
  padding: 44px 20px; text-align: center; cursor: pointer;
}
.drop.is-over { background: #E8EEF8; border-color: var(--amber); }

/* Files picked but not yet sent. The dashes close up and the zone goes from
   inviting a drop to reporting what it is holding — so the Read button beside
   it has a visible cause, rather than being a button that turns on for reasons
   the page never showed. */
.drop.is-held {
  border-style: solid;
  border-color: var(--green);
  background: #F3F8F5;
}
.drop__mark {
  width: 54px; height: 60px; margin: 0 auto 16px;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  display: flex; align-items: center; justify-content: center;
}
.drop__mark span { font-size: 25px; color: var(--amber); padding-bottom: 8px; }
.drop__title {
  font-family: var(--display); font-weight: 600; font-size: 21px;
  text-transform: uppercase; letter-spacing: .03em;
  /* Holds a file name once something is picked, and those arrive long and
     unbroken — "Invoice for Load ID RR97968A.pdf" must wrap, not push the
     dropzone wider than the screen. */
  overflow-wrap: anywhere;
}
.drop__note {
  font-size: 15px; color: var(--ink-mid); margin: 7px auto 0;
  line-height: 1.5; max-width: 480px;
}
@media (max-width: 560px) {
  .drop { padding: 32px 16px; }
  .drop__title { font-size: 18px; }
}

.maprow {
  background: var(--paper-alt); padding: 12px 13px;
  display: flex; gap: 12px; align-items: center;
}
.maprow__body { flex: 1; min-width: 0; }
.maprow__src {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.maprow__conf {
  font-family: var(--label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  flex: none; text-align: right; width: 50px;
}

.trip {
  padding: 12px 16px; border-top: 1px solid var(--rule);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.trip.is-flagged { background: #FFFBF2; }
.trip.is-out { background: var(--paper-alt); }

/* The three kinds of file a central batch holds, told apart down the left edge
   so a month of thirty-odd rows can be scanned for "did the statement land"
   without reading any of them. The same left spline the rowcards use.

   Colour is reinforcement, never the only carrier: every row also names its
   kind in words beside the file name, and the flag background still shows
   through underneath — a file can be both a supplier summary and a problem. */
.trip--kind { border-left: 4px solid var(--rule-hard); }
.trip--kind.is-order    { border-left-color: var(--green); }
.trip--kind.is-bank     { border-left-color: var(--navy-lift); }
.trip--kind.is-supplier { border-left-color: var(--amber); }

.trip--kind.is-order    .trip__type { color: var(--green); }
.trip--kind.is-bank     .trip__type { color: var(--navy-lift); }
.trip--kind.is-supplier .trip__type { color: var(--amber-ink); }
.trip--kind.is-unknown  .trip__type { color: var(--ink-soft); }

/* The counts above a central batch: what is in it, the key to the colours, and
   the filter, in one row. Three separate rows of the same three words would be
   three chances to read them as three different things. */
.metrics { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.metric {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  min-width: 138px; padding: 7px 12px 8px;
  background: var(--paper);
  border: 1.5px solid var(--rule-firm); border-left-width: 4px;
}
.metric:hover { border-color: var(--rule-hard); }
.metric.is-on {
  background: var(--navy-deep); border-color: var(--navy-deep); color: #fff;
}
.metric.is-on .metric__label,
.metric.is-on .metric__money { color: #C7CEDA; }

/* After .is-on, so the kind stays readable down the left edge when selected —
   it is the same spline as the rows the card filters to. */
.metric.is-order    { border-left-color: var(--green); }
.metric.is-bank     { border-left-color: var(--navy-lift); }
.metric.is-supplier { border-left-color: var(--amber); }
.metric.is-unknown  { border-left-color: var(--rule-hard); }

.metric__label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--label); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.metric__badge {
  margin-left: auto;
  background: var(--amber); color: var(--navy-deep);
  border-radius: 9px; min-width: 18px; padding: 1px 5px;
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: 0; text-align: center;
}
.metric__count { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.metric__money { display: block; font-size: 12.5px; color: var(--ink-mid); }

/* A file name, anywhere it is printed, is a way back to the file. Underlined
   on a dotted rule rather than a solid one: it is a reference, not a step in
   whatever the sentence around it is describing. */
.filelink { color: inherit; text-decoration: underline; text-decoration-style: dotted;
            text-underline-offset: 2px; text-decoration-thickness: 1px; }
.filelink:hover, .filelink:focus-visible {
  color: var(--navy-lift); text-decoration-style: solid;
}

/* Which reconciliation period a line settled in. Neither side of a month's
   reconciliation respects the month, so a load can settle in the one before or
   the one after; the badge says which, and the period is printed beside it in
   words because a tooltip is no use on a phone. */
.per {
  display: inline-block; vertical-align: baseline;
  font-family: var(--label); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 6px; color: #fff; background: var(--ink-soft);
}
.per--current  { background: var(--green); }
.per--previous { background: var(--navy-lift); }
.per--future   { background: var(--amber-ink); }

/* Tooltip. Deliberately CSS only: this app carries no Bootstrap, and a hint
   that needs JavaScript to appear is a hint that is missing when it does not
   run. Whatever a tooltip says, the badge or link beside it already says the
   short version — nothing here is reachable only by hovering.

   `pre-line` is what makes a list of file names read as a list: newlines in
   the attribute are kept, and the runs of spaces that indenting the PHP would
   otherwise introduce are collapsed. */
[data-tip] { position: relative; cursor: help; }
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 7px); z-index: 40;
  width: max-content; max-width: min(380px, 78vw);
  background: var(--navy-deep); color: #fff;
  font-family: var(--body); font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.55;
  padding: 8px 11px; box-shadow: 0 4px 16px rgba(10,23,48,.28);
  white-space: pre-line; pointer-events: none;
}

/* Near the right edge the box would run off the page, so those flip to hang
   from the right instead. Applied by the caller when it knows it is close. */
[data-tip].tip--left:hover::after,
[data-tip].tip--left:focus-visible::after { left: auto; right: 0; }

/* The key: the same colours wherever a kind is named. */
.keydot {
  display: inline-block; width: 9px; height: 9px;
  margin-right: 6px; border-radius: 2px;
  background: var(--rule-hard);
}
.keydot.is-order    { background: var(--green); }
.keydot.is-bank     { background: var(--navy-lift); }
.keydot.is-supplier { background: var(--amber); }
.trip__main { flex: 1 1 210px; min-width: 0; }
.trip__top { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.trip__rider { font-size: 15px; font-weight: 600; }
.trip__type {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.trip__route { font-size: 13.5px; color: var(--ink-mid); margin-top: 1px; }
.trip__side {
  flex: none; text-align: right; min-width: 160px;
  display: flex; gap: 16px; justify-content: flex-end; align-items: center;
}
.trip__meta { font-size: 13px; color: var(--ink-mid); text-align: right; }
.trip__amt {
  font-family: var(--display); font-weight: 500; font-size: 17px;
  width: 78px; font-variant-numeric: tabular-nums;
}
.trip__amt.is-out { color: #B0AAA0; }
.trip__flag { margin-top: 7px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scroller { max-height: 460px; overflow: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 560px) {
  .trip__side { min-width: 0; width: 100%; justify-content: space-between;
                border-top: 1px solid var(--rule); padding-top: 8px; }
  .trip__amt { width: auto; }
  .scroller { max-height: none; }
}

/* =========================================================================
   Invoice document
   ========================================================================= */
.doc { background: var(--paper); box-shadow: 0 2px 14px rgba(10,23,48,.09); }
.doc__head {
  background: var(--navy-deep); padding: 22px;
  display: flex; justify-content: space-between; gap: 16px;
  align-items: flex-start; flex-wrap: wrap;
}
.doc__brand { display: flex; gap: 11px; align-items: center; }
.doc__title {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  color: #fff; letter-spacing: .04em;
}
.doc__num { font-family: var(--mono); font-size: 13px; color: var(--amber); }
.doc__body { padding: 20px 22px; }
.doc__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--navy-deep);
}
.doc__line {
  display: flex; gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.doc__line-main { flex: 1 1 150px; min-width: 0; }
.doc__line-desc { font-size: 14.5px; font-weight: 600; }
.doc__line-detail { font-size: 13px; color: var(--ink-soft); }

/* A DAA of the Rockies load. It bills and settles unlike the lines around
   it, so it is coloured to be found at a glance rather than read for. The
   rule down the left is what carries the marking on a mono printer, where
   the teal comes out as grey. */
.doc__line--daa {
  border-left: 3px solid var(--teal);
  padding-left: 10px;
  background: var(--teal-lift);
}
.doc__line--daa .doc__line-desc {
  color: var(--teal); font-weight: 700; letter-spacing: .01em;
}
.doc__line-amt {
  font-family: var(--display); font-weight: 500; font-size: 16px;
  flex: none; width: 92px; text-align: right; font-variant-numeric: tabular-nums;
}
.doc__totals { display: flex; justify-content: flex-end; margin-top: 16px; }
.doc__totals-inner { width: 100%; max-width: 270px; }
.doc__total-row {
  display: flex; justify-content: space-between; padding: 6px 0; font-size: 14.5px;
}
.doc__balance {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0 0; border-top: 2px solid var(--navy-deep); margin-top: 6px;
}
.doc__balance span:first-child {
  font-family: var(--label); font-size: 12px; letter-spacing: .16em;
  font-weight: 700; text-transform: uppercase;
}
.doc__balance span:last-child { font-family: var(--display); font-weight: 600; font-size: 25px; }
/* =========================================================================
   Tables — used where rows really are a grid of the same few fields, which on
   this site means read-back panels: what a file was parsed into, which runs
   happened. Everything a person acts on is a rowcard, not a row.
   ========================================================================= */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  font-family: var(--label); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
  text-align: left; font-weight: 700;
  padding: 6px 10px; border-bottom: 1px solid var(--rule-firm);
  white-space: nowrap;
}
.tbl td {
  padding: 7px 10px; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
/* Gutters at the edges only: a right-aligned figure must not end up touching
   the column beside it, which is what padding on one side alone produces. */
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child,  .tbl td:last-child  { padding-right: 0; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .u-right, .tbl th.u-right { text-align: right; }

/* A raw file shown as the grid it is. Denser than a report table and never
   wrapped: a cell that wraps stops the eye running down a column, which is the
   only thing anybody does on a screen like this. The columns the reader took
   its fields from are tinted, so "read as amount: Line Amount" can be checked
   against the actual column rather than taken on trust. */
/* Full width, for a file with forty columns in it. Only the content widens —
   the header and nav keep the measure, so the page does not appear to change
   shape, only to make more room where the room is needed. */
.wrap--wide { max-width: none; }

.filemeta { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
/* The lede is measured for prose elsewhere; here it is a status line and has
   to fill the row, or the button lands wherever the text happens to stop
   rather than at the right edge. */
.filemeta .page-lede { flex: 1 1 auto; min-width: 0; max-width: none; }

.iconbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: var(--paper); color: var(--navy);
  border: 1.5px solid var(--rule-firm); cursor: pointer;
}
.iconbtn:hover { color: var(--navy-lift); border-color: var(--rule-hard); }
.iconbtn[aria-pressed="true"] {
  background: var(--navy-deep); color: #fff; border-color: var(--navy-deep);
}

/* The grid scrolls inside its own box rather than the page. A forty-column
   file otherwise puts its horizontal scrollbar at the foot of five hundred
   rows, so moving sideways means scrolling to the bottom of the page first and
   back up again. Bounded here, both bars stay where the eye already is. */
.grid-scroll {
  overflow: auto;
  max-height: calc(100vh - 330px);
  min-height: 300px;
  overscroll-behavior: contain;
}

.tbl--grid { font-size: 11.5px; }
.tbl--grid th, .tbl--grid td {
  white-space: nowrap; padding: 4px 11px 4px 0; vertical-align: top;
}
.tbl--grid th:first-child, .tbl--grid td:first-child { padding-left: 18px; }
.tbl--grid th:last-child,  .tbl--grid td:last-child  { padding-right: 18px; }
.tbl--grid td { font-variant-numeric: tabular-nums; }
.tbl--grid tbody tr:nth-child(even) { background: var(--paper-alt); }

/* Headings stay put as the rows go by, and the row number stays put as the
   columns do — thirty columns in, "which row am I on" is the question. Both
   need an opaque background of their own, or what is scrolling underneath
   shows through them. */
.tbl--grid thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--paper); border-bottom: 0;
  box-shadow: inset 0 -1.5px 0 var(--rule-firm);
}
.tbl--grid tbody td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--paper);
}
.tbl--grid tbody tr:nth-child(even) td:first-child { background: var(--paper-alt); }
.tbl--grid thead th:first-child { z-index: 4; }

.tbl--grid .is-read { background: rgba(240,162,46,.13); }
.tbl--grid th.is-read {
  white-space: normal; min-width: 108px;
  box-shadow: inset 0 -2.5px 0 var(--amber);
}

/* Comment and payee: two columns under the totals on an invoice that carries
   them, stacking on a phone. Set at document weight rather than in the grey
   footer — on a third-party invoice these are the first things read. */
.doc__blocks {
  display: flex; flex-wrap: wrap; gap: 18px 26px;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.doc__block { flex: 1 1 210px; min-width: 0; }
.doc__block-lead { font-size: 14px; font-weight: 600; margin-top: 3px; }
.doc__block-line { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

.doc__remit {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}

/* =========================================================================
   Panels — payment, email, expandable rows
   ========================================================================= */
.panel { background: var(--paper); padding: 18px; border-left: 4px solid var(--navy); }
.panel--green { border-left-color: var(--green); }
.panel--amber { border-left-color: var(--amber); }
.panel--red   { border-left-color: var(--red); }

.paylist__row { border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 12px; }
.paylist__head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.paylist__main { flex: 1 1 160px; min-width: 0; }
.paylist__amt { font-family: var(--display); font-weight: 600; font-size: 19px; }
.paylist__method {
  font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--green);
}
.paylist__src {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px;
}
.paylist__edit { background: var(--paper-alt); padding: 14px; margin-top: 11px; }
.paylist__foot {
  border-top: 2px solid var(--navy-deep); margin-top: 12px; padding: 12px 0;
  display: flex; justify-content: space-between; align-items: baseline;
}

/* =========================================================================
   Reconcile
   ========================================================================= */
.dep { background: var(--paper); padding: 15px 16px; border-left: 4px solid var(--navy); }
.dep__head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.dep__main { flex: 1 1 240px; min-width: 0; }
.dep__tag {
  font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.dep__memo { font-family: var(--mono); font-size: 13px; margin-top: 4px; color: var(--ink); word-break: break-word; }
.dep__note { font-size: 14px; color: var(--ink-mid); margin-top: 4px; line-height: 1.45; }
.dep__side { flex: none; text-align: right; }
.dep__amt { font-family: var(--display); font-weight: 600; font-size: 23px; font-variant-numeric: tabular-nums; }
.dep__choices { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }

@media (max-width: 560px) {
  .dep__side { text-align: left; width: 100%; display: flex;
               justify-content: space-between; align-items: baseline; }
}

.manrow { background: var(--paper); border-left: 4px solid var(--navy); }
.manrow__toggle {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 14px 16px; cursor: pointer;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  min-height: var(--tap);
}
.manrow__toggle:hover { background: var(--paper-alt); }
.manrow__main { flex: 1 1 220px; min-width: 0; }
.manrow__side { flex: none; text-align: right; min-width: 110px; }
.manrow__bal { font-family: var(--display); font-weight: 600; font-size: 20px; }
.manrow__cta {
  font-family: var(--label); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy);
}
.manrow__body { padding: 0 16px 16px; border-top: 1px solid var(--rule); padding-top: 14px; }

@media (max-width: 560px) {
  .manrow__side { text-align: left; min-width: 0; width: 100%;
                  display: flex; justify-content: space-between; align-items: baseline; }
}

/* =========================================================================
   Agencies
   ========================================================================= */
.agency { background: var(--paper); padding: 18px; border-top: 4px solid var(--navy); }
.agency__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.agency__name {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.15;
}
.agency__contact { font-size: 14px; color: var(--ink-mid); margin-top: 3px; word-break: break-word; }
.agency__terms {
  background: var(--cream); flex: none;
  font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; padding: 4px 9px;
}
.agency__stats {
  display: flex; gap: 16px; margin-top: 14px; padding: 12px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); flex-wrap: wrap;
}
.rate { background: var(--paper-alt); padding: 10px 12px; }
.rate input {
  width: 100%; margin-top: 3px; padding: 7px;
  border: 1.5px solid transparent; background: none;
  font-family: var(--display); font-weight: 500; font-size: 17px;
  min-height: 38px;
}
.rate input:focus { border-color: var(--amber); background: var(--paper); outline: none; }

/* =========================================================================
   Flash messages
   ========================================================================= */
.flash-wrap {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 20px; z-index: 90;
  width: calc(100vw - 28px); max-width: 520px;
  display: grid; gap: 8px;
}
.flash {
  background: var(--navy-deep); color: #fff;
  padding: 13px 18px; border-left: 4px solid var(--amber);
  box-shadow: 0 12px 34px rgba(10,23,48,.34);
  font-size: 14.5px; font-weight: 500; line-height: 1.4;
  animation: flash-in .18s ease-out;
}
.flash--ok  { border-left-color: var(--green); }
.flash--err { border-left-color: var(--red); }
@keyframes flash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Empty states
   ========================================================================= */
.empty { background: var(--paper); padding: 34px 20px; text-align: center; }
.empty__title {
  font-family: var(--display); font-weight: 600; font-size: 19px; text-transform: uppercase;
}
.empty__note { font-size: 14.5px; color: var(--ink-mid); margin-top: 5px; }

/* =========================================================================
   Login
   ========================================================================= */
.login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--navy-deep);
}
.login__card { background: var(--paper); width: 100%; max-width: 380px; padding: 28px 26px; }
.login__brand { display: flex; gap: 11px; align-items: center; margin-bottom: 20px; }
.login__brand .brand__name { color: var(--ink); }
.login__brand .shield { background: var(--navy-deep); }
.login__brand .shield span { color: #fff; }
.login h1 {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  text-transform: uppercase; margin-bottom: 4px;
}
.login__err {
  background: #FDF4F3; border-left: 4px solid var(--red);
  padding: 11px 13px; font-size: 14px; margin-bottom: 14px; color: #8A2F29;
}

/* ---------- Print: the invoice document alone ---------- */
@media print {
  .top, .nav, .subnav-bar, .flash-wrap, .btn, .pills, .panel, .no-print { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; max-width: none; }
  .doc { box-shadow: none; }
  /* Browsers drop backgrounds when printing, which would take the DAA
     marking with them — the whole point of it is that it survives onto
     paper, so it is asked for explicitly. */
  .doc__line--daa { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   Customers & billing schedules
   The schedule reads as a sentence — "bill them weekly on Monday at 7 am" —
   because that is how it gets described out loud. It also means the parts
   that do not apply to a cadence can simply leave the sentence, rather than
   sitting there greyed out inviting the question of what they would do.
   ========================================================================= */
.cust {
  background: var(--paper);
  border: 1px solid var(--rule-mid);
  border-left: 3px solid var(--navy);
  padding: 18px;
  margin-top: 12px;
}

.cust__head {
  display: flex; gap: 16px; align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.cust__id { flex: 1 1 240px; min-width: 0; }
.cust__name {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: .02em; margin: 0; line-height: 1.25;
}
.cust__sub { font-size: 13.5px; color: var(--ink-mid); margin-top: 3px; }

.cust__stats { display: flex; gap: 10px; flex: none; }
.cust__stat {
  min-width: 104px;
  padding: 8px 12px;
  background: var(--paper-alt);
  border: 1px solid var(--rule-mid);
}
/* Money actually waiting is the one number worth colouring. */
.cust__stat.is-live { border-color: var(--amber-rule); background: #FFFBF3; }
.cust__stat .u-label { font-size: 9.5px; }
.cust__stat-v {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  line-height: 1.15; margin-top: 2px;
}
.cust__stat-v--sm { font-size: 16px; padding-top: 3px; }
.cust__stat-n { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }

/* ------------------------------------------------------------- sentence */
.sched {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 7px 8px;
  font-size: 16px; line-height: 2.1;
}
.sched__word { color: var(--ink-mid); }
.sched__pick {
  padding: 7px 10px;
  border: 1.5px solid var(--rule-firm);
  background: var(--paper);
  /* 16px stops iOS Safari zooming the viewport when one is tapped. */
  font-size: 16px; font-weight: 600; font-family: inherit;
  color: var(--ink);
  min-height: 40px;
  max-width: 100%;
}
.sched__pick:focus { border-color: var(--amber); outline: none; }
.sched__pick--num { width: 74px; text-align: center; }
/* Set by app.js when a control does not apply to the chosen cadence. */
.sched [hidden], .cust [hidden] { display: none !important; }

.sched__note {
  font-size: 13.5px; color: var(--ink-mid);
  margin: 10px 0 0; padding-left: 11px;
  border-left: 2px solid var(--amber-rule);
}

/* ---------------------------------------------------------------- rest */
.cust__more { margin-top: 14px; }
.cust__more > summary {
  cursor: pointer;
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
  padding: 6px 0;
}
.cust__more > summary:hover { color: var(--navy); }

.cust__actions { margin-top: 14px; }
/* Billing early is a separate decision from editing the customer, so it is a
   separate form — and kept out of the row of routine buttons. */
.cust__billnow {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 560px) {
  .cust { padding: 14px; }
  .cust__stats { width: 100%; }
  .cust__stat { flex: 1 1 0; min-width: 0; }
  .sched { line-height: 1.9; }
}

/* --------------------------------------------------- customer detail form
   The generic .grid--form auto-fits on a minimum width, which on a desktop
   monitor turns eleven fields into one eight-column row: a name box too
   narrow to show a name, beside a ZIP box wide enough for a street. These
   fields are given explicit widths instead, and the block is capped — a form
   is read down, not across, and stretching it to a 1240px wrap helps nobody. */
.cust__fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px 14px;
  max-width: 940px;
  margin-top: 12px;
}
.cust__fields > * { grid-column: span 12; }

@media (min-width: 700px) {
  .cust__fields > .f-2  { grid-column: span 2; }
  .cust__fields > .f-3  { grid-column: span 3; }
  .cust__fields > .f-4  { grid-column: span 4; }
  .cust__fields > .f-5  { grid-column: span 5; }
  .cust__fields > .f-6  { grid-column: span 6; }
}

/* Aliases are short company names, not prose — the box should not run the
   full width of a desktop just because it is a textarea. */
.cust__aliases { max-width: 940px; margin-top: 12px; }
.cust__aliases + .field__hint { max-width: 940px; }