/* Tenderiser interface styles.

   One light palette, applied to a fixed left rail and a scrolling work area.
   Deliberately not GOV.UK Frontend: that ships GDS Transport, which is
   licensed for government services only, and the Design System asks
   non-government services not to adopt the GOV.UK brand. Public Sans and IBM
   Plex Mono are both OFL, self-hosted below, and carry no such restriction. */

/* Fonts ------------------------------------------------------------------ */
/* Public Sans is a variable font: one file covers 100-900, so the weight
   ramp the interface uses costs a single request per subset. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens ----------------------------------------------------------------- */
:root {
  --ink: #14181c;
  --ink-soft: #2f3a45;
  --ink-nav: #3c4854;
  --muted: #5d6773;
  --muted-2: #8a949e;
  --faint: #b3bcc5;

  --line: #dde2e8;
  --line-soft: #eceff3;
  --line-faint: #f4f6f8;

  --paper: #ffffff;
  --canvas: #f7f8fa;
  --raised: #fafbfd;
  --hover: #f1f3f6;

  --brand: #1a56db;
  --brand-dark: #14459f;
  --brand-soft: #eef3fe;
  --brand-soft-2: #e6ecfb;
  --brand-line: #c3d3f8;
  --brand-row: #f6f9ff;

  --green: #0a6c46;
  --green-soft: #e6f4ec;
  --red: #b3392c;
  --red-soft: #fceceb;
  --red-line: #f0cdc9;
  --amber: #8a5a00;
  --amber-soft: #fdf3e2;
  --slate: #48525f;
  --slate-soft: #eef1f5;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(20, 24, 28, .04);
  --shadow-pop: 0 8px 24px rgba(20, 24, 28, .12);
  --rail: 232px;

  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }

input, select, button, textarea { font-family: inherit; }

/* One focus treatment everywhere: a blue ring wide enough to see at a glance,
   only for keyboard users so the interface stays quiet under a mouse. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-radius: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, .28);
}

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

.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

/* Shell ------------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  height: 100vh;
}

.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.brand {
  padding: 16px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
}
.brand:hover { text-decoration: none; color: inherit; }
.brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 7px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand > span { min-width: 0; }
.brand-name { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.brand-sub { display: block; font-size: 10.5px; color: var(--muted-2); letter-spacing: .02em; }
.authpage .brandline .brand-name { display: inline; }

.sidenav {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidenav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink-nav);
}
.sidenav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.sidenav a.is-active {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 600;
}
.sidenav .count { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }

/* The saved searches themselves, hanging off the Saved searches entry. Indented
   and a size down so the four sections stay what the eye lands on first. */
.subnav {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--line-soft);
  margin-left: 14px;
}
.subnav a {
  display: block;
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subnav a .dot { color: var(--brand); vertical-align: middle; margin-left: 2px; }

.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-foot .who {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main { overflow-y: auto; background: var(--canvas); }

.pagehead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 248, 250, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 16px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.pagehead h1 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 2px; }
.pagehead p { margin: 0; font-size: 12.5px; color: var(--muted); }
.pagehead .backlink { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.pagehead-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.content { padding: 20px 24px 40px; }
.content-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
}
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Cards ------------------------------------------------------------------ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-body { padding: 16px; }
.card-body > :first-child { margin-top: 0; }
.card-body > :last-child { margin-bottom: 0; }
.card-note {
  margin: 0;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--muted-2);
  border-top: 1px solid var(--line-soft);
}
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--raised);
  border-radius: 0 0 var(--radius) var(--radius);
}
.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.btn-primary {
  padding: 0 15px;
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-danger { color: var(--red); border-color: var(--red-line); }
.btn-danger:hover { background: var(--red-soft); color: var(--red); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 5px; }
.linkbutton {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0;
  background: none;
  border: 0;
  color: var(--brand);
  cursor: pointer;
}
.linkbutton:hover { text-decoration: underline; }

/* Forms ------------------------------------------------------------------ */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
label .hint { font-weight: 400; color: var(--muted-2); font-size: 11px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
input::placeholder { color: var(--muted-2); }
input[type=number], input.mono { font-family: var(--mono); font-size: 13px; }
input[type=date] { font-size: 13px; }

select {
  appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-2) 50%),
    linear-gradient(135deg, var(--muted-2) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select[multiple] {
  appearance: none;
  background-image: none;
  height: auto;
  min-height: 84px;
  padding: 4px;
  font-size: 13px;
  cursor: default;
}
select[multiple] option {
  padding: 3px 6px;
  border-radius: 4px;
}
select[multiple] option:checked {
  background: var(--brand-soft) linear-gradient(0deg, var(--brand-soft), var(--brand-soft));
  color: var(--brand-dark);
  font-weight: 600;
}

.checkline {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  cursor: pointer;
}
.checkline input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  cursor: pointer;
}
.field-help { margin: 6px 0 0; font-size: 12px; color: var(--muted-2); }

/* Alerts ----------------------------------------------------------------- */
.alert {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--green);
  background: var(--green-soft);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 500;
  margin: 0 0 14px;
}
.alert-error { border-left-color: var(--red); background: var(--red-soft); color: var(--red); }
.flashes { list-style: none; margin: 0 0 16px; padding: 0; }
.flashes:empty { display: none; }

.banner-warning {
  margin: 0;
  padding: 8px 24px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--red);
  color: #fff;
}

/* Filters ---------------------------------------------------------------- */
.filters { margin-bottom: 16px; }
.filters > summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters:not([open]) > summary { border-bottom: 0; }
.filters .chevron {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 10px;
}
.filters > summary:hover .chevron { background: var(--hover); }
.filters[open] .chevron::before { content: "\25B2"; }
.filters:not([open]) .chevron::before { content: "\25BC"; }
.pill-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
}
.filter-grid .span-2 { grid-column: span 2; }
.filter-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.filter-actions .inline-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
}
.filter-actions select { width: auto; height: 30px; font-size: 13px; padding: 0 24px 0 8px; }

/* Toolbar above the table ------------------------------------------------ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 34px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.toolbar strong { color: var(--ink); font-weight: 600; }
.toolbar .sep { color: #c8cfd6; }

/* Saving the current view. A sibling of the filter form, not a child of it: the
   filters are a GET form and this is a POST, and forms do not nest. */
.save-search { display: flex; align-items: center; gap: 8px; }
.save-search input[type="text"] { width: 190px; padding: 5px 8px; font-size: 12.5px; }
.supplier-search input[type="text"] { width: 220px; }
.save-search .checkline { font-size: 12.5px; color: var(--muted); margin: 0; }

/* Table ------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border-radius: var(--radius) var(--radius) 0 0; }
.card > .table-wrap:last-child { border-radius: var(--radius); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }

/* The notice list is a fixed grid so the columns line up down the page and the
   long free-text ones truncate instead of pushing the rest off the edge. */
.notices-table { table-layout: fixed; min-width: 1096px; }
.notices-table .c-watch { width: 36px; }
.notices-table .c-buyer { width: 200px; }
.notices-table .c-stage { width: 108px; }
.notices-table .c-value { width: 92px; }
.notices-table .c-date { width: 100px; }
.notices-table .c-region { width: 118px; }
.notices-table .c-source { width: 138px; }
.notices-table td { overflow: hidden; }
col.is-sorted { background: var(--raised); }
thead th {
  text-align: left;
  padding: 0 12px;
  height: 38px;
  background: var(--hover);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
thead th a { color: inherit; }
thead th a:hover { color: var(--ink); text-decoration: none; }
thead th.is-sorted { background: var(--brand-soft-2); color: var(--brand-dark); }
thead th.right { text-align: right; }
tbody td {
  padding: 0 12px;
  height: 40px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
tbody tr:hover { background: var(--canvas); }
tbody tr:last-child td { border-bottom: 0; }
td.right { text-align: right; }
td.value { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.value.empty { color: var(--faint); }
td.date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
td.date.empty { color: var(--faint); }
td.date.closed { color: var(--red); }
td.text { color: var(--muted); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
td.title-cell { max-width: 420px; }
.title-line { display: flex; align-items: center; gap: 7px; }
.title-line a {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpv-line { font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; background: currentColor; }
.src-fts { color: var(--brand); }
.src-cf { color: var(--green); }

.chip {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.chip-dupe, .chip-alert { background: var(--red-soft); color: var(--red); }

.rowlist .item strong { display: block; margin-bottom: 5px; font-weight: 600; }
.lot-desc { margin-top: 8px; max-height: 150px; overflow: auto; font-size: 12px; }

.raw-panel > summary { cursor: pointer; list-style: none; }
.raw-panel > summary::-webkit-details-marker { display: none; }
.raw-panel[open] > summary { border-bottom: 1px solid var(--line-soft); }
/* Trim the head padding so the 26px copy button leaves this summary the
   same height as every other .card-head on the page. */
.raw-panel > summary { padding-top: 8px; padding-bottom: 8px; min-height: 44px; }
.copy-btn { flex: none; }
.copy-glyph { font-size: 14px; line-height: 1; }
pre.raw {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: pre;
}

.stage {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 0 4px 4px 0;
  border-left: 3px solid currentColor;
  color: var(--muted);
  background: var(--slate-soft);
}
.stage-planning { color: var(--amber); background: var(--amber-soft); }
.stage-tender { color: var(--green); background: var(--green-soft); }
.stage-tender.is-closed { color: var(--red); background: var(--red-soft); }
.stage-award { color: var(--brand-dark); background: var(--brand-soft); border-left-color: var(--brand); }
.stage-implementation { color: var(--slate); background: var(--slate-soft); }

/* Pipeline status control ------------------------------------------------ */
.statuspill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.statuspill:hover { background: var(--hover); }
.statuspill:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26, 86, 219, .28); }
.statuspill select {
  width: auto;
  height: 24px;
  padding: 0 16px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: inherit;
  border: 0;
  background-color: transparent;
  background-position: right 5px center, right 0 center;
  border-radius: 0;
}
.statuspill select:focus-visible { outline: none; box-shadow: none; }
.statuspill.wide, .statuspill.wide select { width: 100%; }
.statuspill.wide { height: 36px; padding: 0 10px; }
.statuspill.wide select { height: 34px; font-size: 13.5px; }

.status-new { color: var(--muted); }
.status-reviewing { color: var(--brand); }
.status-bidding, .status-submitted, .status-won { color: var(--green); }
.status-lost, .status-no_bid { color: var(--muted-2); }

/* Pagination ------------------------------------------------------------- */
.pager { display: flex; gap: 6px; align-items: center; }
.pager a, .pager .current, .pager .disabled {
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.pager a:hover { background: var(--hover); text-decoration: none; }
.pager .current { min-width: 28px; padding: 0 8px; font-weight: 700; color: #fff; background: var(--brand); border-color: var(--brand); }
.pager .disabled { color: var(--muted-2); cursor: not-allowed; font-weight: 400; }

/* Empty state ------------------------------------------------------------ */
.empty-state { padding: 64px 24px; text-align: center; }
.empty-state .glyph {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border-radius: var(--radius);
  background: var(--hover);
  border: 1px solid var(--line);
}
.empty-state h2 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.empty-state p { margin: 0 auto 20px; font-size: 13px; color: var(--muted); max-width: 420px; }

/* Detail ----------------------------------------------------------------- */
.meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
}
.source { display: inline-flex; align-items: center; gap: 6px; }
.meta-line .buyer { color: var(--ink); font-weight: 600; }
.meta-line .sep { color: #c8cfd6; }

.notice-desc {
  padding: 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  white-space: pre-wrap;
  text-wrap: pretty;
}

.kv { margin: 0; padding: 4px 16px 12px; }
.kv-row {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 13px;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row dt { color: var(--muted); font-weight: 600; }
.kv-row dd { margin: 0; color: var(--ink); word-break: break-word; }
.kv-row dd.mono { font-family: var(--mono); font-size: 12.5px; }

.rowlist { display: flex; flex-direction: column; gap: 10px; }
.rowlist .item {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--raised);
}
.rowlist .item a { font-size: 13px; font-weight: 500; display: block; margin-bottom: 5px; }
.rowlist .item .meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }

.history { display: flex; flex-direction: column; }
.history .row { display: flex; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.history .when { color: var(--muted-2); font-variant-numeric: tabular-nums; flex: none; }
.history .what { color: var(--muted); }

.factlist { font-size: 13px; }
.factlist .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}
.factlist .row + .row { border-top: 1px solid var(--line-faint); margin-top: 6px; padding-top: 10px; }
.factlist .key { color: var(--muted); font-weight: 600; }
.factlist .val { font-variant-numeric: tabular-nums; }
.factlist .val.ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--green); }

.rowactions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.rowactions form { display: contents; }

/* Watchlist --------------------------------------------------------------- */

/* An outline star until it is on, then a filled one. The glyph is the same
   character either way, so the row does not reflow when it is clicked. */
.watch-cell { padding-right: 0; }
.watchstar {
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--line);
  -webkit-text-stroke: 0.6px var(--muted-2);
}
.watchstar:hover { color: var(--amber-soft); -webkit-text-stroke-color: var(--amber); }
.watchstar.is-on { color: var(--amber); -webkit-text-stroke-color: var(--amber); }

.watchbtn.is-on { color: var(--amber); border-color: var(--amber); }
.watchbtn .watchstar { padding: 0; cursor: inherit; font-size: 14px; }

/* Mine / Everyone. A pair of links rather than a control: each is a real URL,
   so the scope is bookmarkable and the browser back button means what it says. */
.scope-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--hover);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.scope-toggle a {
  padding: 4px 11px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.scope-toggle a:hover { color: var(--ink); text-decoration: none; }
.scope-toggle a.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

/* Sign-in and authenticator pages ---------------------------------------- */
.authpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px;
  background: var(--canvas);
}
.authpage .brandline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  color: inherit;
}
.authpage .brandline:hover { text-decoration: none; color: inherit; }
.authpage .brandline .brand-mark { width: 30px; height: 30px; font-size: 15px; }
.authpage .brandline .brand-name { font-size: 17px; }
.authcard {
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.authcard h1 { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.authcard .lede { margin: 0 0 20px; font-size: 13px; color: var(--muted); }
.authcard .btn-primary, .authcard .btn { height: 38px; }
.authcard .btn-block { width: 100%; }
.authcard .footnote { margin: 14px 0 0; font-size: 12px; color: var(--muted-2); }
.button-row { display: flex; gap: 8px; }
.button-row .btn-primary { flex: 1; }

input.code {
  height: 44px;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: .22em;
}
input.code-sm { font-family: var(--mono); letter-spacing: .12em; }

.totp { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
/* The QR keeps a white card whatever surrounds it: segno draws the modules in
   black, and a scanner needs that contrast. */
.qr {
  flex: none;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  line-height: 0;
}
.qr svg { display: block; width: 116px; height: 116px; }
.secret code {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  background: var(--canvas);
  word-break: break-all;
}

/* Narrow screens --------------------------------------------------------- */
@media (max-width: 1100px) {
  .content-split { grid-template-columns: minmax(0, 1fr); }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Reports ---------------------------------------------------------------- */

/* A failed run's error is often a rate-limit message carrying the full request
   URL: two hundred characters with no break in them. Left to size itself, that
   one cell stretches the outcome column until the date column wraps to three
   lines. Fixed layout for the same reason `.notices-table` has it. */
.runs-table { table-layout: fixed; min-width: 760px; }
.runs-table .c-when { width: 152px; }
.runs-table .c-feed { width: 150px; }
.runs-table .c-job { width: 92px; }
.runs-table .c-pages { width: 76px; }
.runs-table .c-releases { width: 116px; }
.runs-table .runerror { overflow-wrap: anywhere; }

@media (max-width: 780px) {
  .shell { grid-template-columns: minmax(0, 1fr); height: auto; }
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .sidenav { flex-direction: row; flex-wrap: wrap; }
  .subnav { flex-basis: 100%; margin-left: 0; }
  .sidebar-foot { margin-top: 0; }
  .main { overflow: visible; }
  .pagehead { position: static; flex-direction: column; align-items: stretch; }
  .content { padding: 16px; }
  .filter-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-grid .span-2 { grid-column: auto; }
  thead th { position: static; }
}

/* Suppliers -----------------------------------------------------------------
   The index is its own table rather than the notices one, so it gets its own
   column widths. Everything else on both supplier screens is existing
   vocabulary: .card, .kv, .rowlist, .toolbar, .content-split, .empty-state. */
.suppliers-table { table-layout: fixed; min-width: 720px; }
.suppliers-table .c-num { width: 92px; }
.suppliers-table .c-value { width: 170px; }
.suppliers-table .c-date { width: 116px; }
.suppliers-table td { overflow: hidden; }

.buyers-table { table-layout: fixed; min-width: 760px; }
.buyers-table .c-account { width: 130px; }
.buyers-table .c-num { width: 104px; }
.buyers-table .c-date { width: 116px; }
.buyers-table td { overflow: hidden; }

/* The team's account status on a buyer: a customer reads as settled (green),
   a target as work in progress (amber). */
.account-customer { background: var(--green-soft); color: var(--green); }
.account-target { background: var(--amber-soft); color: var(--amber); }
.account-form { display: flex; align-items: center; gap: 8px; }