/* =============================================================================
   Legacy class names, bound into the ledger.

   The screens built before the redesign still use these class names. This file
   gives them the ledger's look without touching their markup. As each screen
   moves to the components in app.css, delete the rules it was the last to use;
   when this file is empty, remove it and its <link> from the layouts.
   ========================================================================== */

/* ------------------------------------------------ Page furniture and cards */

/* The small label above a page title only repeated the section the ribbon
   already marks, so it goes. Inside a page it is a printed label. */
.page__head .eyebrow { display: none; }
.eyebrow { margin-bottom: var(--s-1); color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.07em; text-transform: uppercase; }

/* Cards become accounts: a ruled heading and the entries beneath it. */
.card + .card { margin-top: var(--s-7); }
.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--ruling-ink);
}
.card__title { font-size: var(--t-account); font-weight: 700; font-stretch: var(--w-figure); }
.card__head + .card__body { padding-top: var(--s-4); }
.card__foot { margin-top: var(--s-3); color: var(--pencil); font-size: var(--t-label); }

.grid { display: grid; gap: var(--s-6); }
.grid + .card, .grid + .grid, .card + .grid { margin-top: var(--s-7); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); column-gap: var(--s-7); }

/* Stat tones become the auditor's mark before the label. */
.stat--ok .stat__label::before,
.stat--warn .stat__label::before,
.stat--bad .stat__label::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  background: var(--mark-checked);
  -webkit-mask: var(--m-tick) center / contain no-repeat;
  mask: var(--m-tick) center / contain no-repeat;
}
.stat--warn .stat__label::before { background: var(--mark-query); -webkit-mask-image: var(--m-query); mask-image: var(--m-query); }
.stat--bad .stat__label::before  { background: var(--mark-exception); -webkit-mask-image: var(--m-ring); mask-image: var(--m-ring); }

/* -------------------------------------------------------------- Status */

/* Badges become marks. Status tones get their mark; brand-coloured labels
   (stages, roles) become plain entries in ink. */
.badge { --mark: none; --mark-ink: var(--pencil); display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; }
.badge::before { content: none; }
.badge--ok::before, .badge--warn::before, .badge--bad::before, .badge--info::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--mark-ink);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.badge--ok   { --mark: var(--m-tick);  --mark-ink: var(--mark-checked); }
.badge--warn { --mark: var(--m-query); --mark-ink: var(--mark-query); }
.badge--bad  { --mark: var(--m-ring);  --mark-ink: var(--mark-exception); }
.badge--info { --mark: var(--m-arrow); --mark-ink: var(--mark-note); }
.badge--maroon, .badge--gold, .badge--neutral { font-stretch: var(--w-figure); }
a.badge { text-decoration: none; }

/* An exception figure in a column of numbers is circled in red. */
.num .badge--bad { position: relative; padding: 0 7px; color: var(--red); font-weight: 700; }
.num .badge--bad::before { content: none; }
.num .badge--bad::after {
  content: "";
  position: absolute;
  inset: -3px -1px -2px;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  transform: rotate(-5deg);
}

.pill { display: inline-block; padding: 0 var(--s-2); border-radius: var(--cut); background: var(--paper-band); color: var(--ruling-ink); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-head); letter-spacing: 0.06em; text-transform: uppercase; }

/* Codes are folio references. */
.code { font-size: var(--t-label); font-weight: 600; font-stretch: var(--w-figure); letter-spacing: 0.02em; font-variant-numeric: tabular-nums lining-nums; }
a .code, a.code { color: var(--cloth); }

/* ------------------------------------------------------------- Buttons */

.btn--ghost { border-color: var(--rule); background: var(--paper-slip); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ruling-ink); background: var(--paper-band); color: var(--ink); }

.btn--sm { min-height: 30px; padding: 0 var(--s-3); font-size: var(--t-label); }

/* --------------------------------------------------------------- Forms */

.field--inline { display: flex; align-items: center; gap: var(--s-2); }

.fieldset { min-width: 0; margin: 0 0 var(--s-6); padding: 0; border: 0; }
.fieldset__legend {
  width: 100%;
  margin-bottom: var(--s-4);
  padding: 0 0 var(--s-2);
  border-bottom: 2px solid var(--ruling-ink);
  color: var(--ink);
  font-size: var(--t-account);
  font-weight: 700;
  font-stretch: var(--w-figure);
}

/* Filters sit in one ruled strip above the folio. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
  margin: var(--s-3) 0;
  padding: var(--s-3);
  border: 1px solid var(--rule-feint);
  border-radius: var(--cut);
  background: var(--paper-band);
}
.filters .field { min-width: 140px; margin: 0; }
.filters .field--grow { flex: 1; min-width: 200px; }

/* ------------------------------------------------------------ Messages */

/* The empty state: no icon, no display title; a quiet entry. */
.empty__icon { display: none; }
.empty__title { color: var(--ruling-ink); font-weight: 700; font-stretch: var(--w-figure); }
.empty__text { max-width: 60ch; margin: var(--s-1) 0 var(--s-3); color: var(--pencil); }

/* ------------------------------------------------------- Pipeline board */

/* Stage columns ruled on the page; each engagement a voucher slip. */
.board { display: grid; grid-auto-columns: 248px; grid-auto-flow: column; align-items: start; gap: var(--s-4); padding-bottom: var(--s-3); overflow-x: auto; }
.board__col { display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
.board__head { padding: 0 0 var(--s-2); border-bottom: 2px solid var(--ruling-ink); }
.board__title { font-size: var(--t-label); font-weight: 700; font-stretch: var(--w-figure); }
.board__meta { color: var(--pencil); font-size: var(--t-caption); }
.board__count { float: right; color: var(--ruling-ink); font-size: var(--t-label); font-weight: 700; font-stretch: var(--w-figure); }
.board__list { display: grid; gap: var(--s-2); padding: var(--s-2) 2px 2px; overflow-y: auto; }

.jobcard {
  display: block;
  padding: var(--s-3);
  border: 1px solid var(--rule-feint);
  border-radius: var(--cut);
  background:
    radial-gradient(circle at 5px 0, var(--paper) 2px, transparent 2.5px) 0 0 / 10px 5px repeat-x,
    var(--paper-slip);
  color: var(--ink);
  text-decoration: none;
}
.jobcard:hover { border-color: var(--rule); color: var(--ink); text-decoration: none; }
.jobcard__code { color: var(--cloth); font-size: var(--t-caption); font-weight: 600; font-stretch: var(--w-figure); }
.jobcard__title { margin: var(--s-1) 0; font-size: var(--t-label); font-weight: 700; line-height: 1.25; }
.jobcard__client { color: var(--pencil); font-size: var(--t-label); }
.jobcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--t-label); }

/* --------------------------------------------------------------- Meters */

.meter-row { display: flex; align-items: center; gap: var(--s-3); }
.meter-row .meter { flex: 1; }
.meter-row__value { min-width: 48px; font-size: var(--t-label); font-weight: 700; font-stretch: var(--w-figure); text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------------------- Sign-in */

.otp { font-family: var(--face-mono); font-size: var(--t-title); letter-spacing: 0.2em; text-align: center; }
.secretbox { padding: var(--s-3); border: 1px dashed var(--rule); border-radius: var(--cut); background: var(--paper-slip); font-family: var(--face-mono); font-size: var(--t-label); text-align: center; word-break: break-all; }

/* ---------------------------------------------------------- Pagination */

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--s-1); padding: var(--s-4) 0; }
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control);
  min-height: var(--control);
  padding: 0 var(--s-2);
  border-radius: var(--cut);
  color: var(--ink);
  font-weight: 600;
  font-stretch: var(--w-figure);
  text-decoration: none;
}
.pagination__link:hover { background: var(--paper-band); color: var(--ink); }
.pagination__link.is-current { background: var(--cloth); color: var(--on-cloth); }

/* ------------------------------------------------------------ Utilities */

.xsmall { font-size: var(--t-caption); }
.mt-2 { margin-top: var(--s-4); }
.mt-3 { margin-top: var(--s-5); }
.mb-2 { margin-bottom: var(--s-4); }
.mb-3 { margin-bottom: var(--s-5); }

/* ----------------------------------------------------------- Responsive */

@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .filters, .pagination { display: none !important; }
}