/* The design system. Every screen uses these classes and writes no styles of its own.
   Same palette as the public site: white paper, one bold blue, one bold yellow. Blue is the
   colour that means something (the action, the active thing); yellow marks what is new or
   needs an eye. `--navy` keeps its name because every screen refers to it; it is the blue now. */

:root {
  --blue: #1e5eff; --blue-hover: #1749d1; --blue-deep: #0f2f8a; --blue-bg: #e9effb;
  --yellow: #ffd60a; --yellow-deep: #c99a00; --yellow-bg: #fff6c2;
  --navy: var(--blue); --ink: #0b1220; --muted: #4a5568; --line: #e4e9f1;
  --bg: #f5f7fb; --card: #ffffff;
  --ok: #1c7c3e; --warn: #8a6a00; --bad: #b42318;
  --ok-bg: #e9f5ec; --warn-bg: var(--yellow-bg); --bad-bg: #fdf2f0;
  --radius: 8px; --gap: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --nav-w: 220px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* The Projects list is 6,600px tall and the Account screen is 800px, so the scrollbar appeared
   and vanished as you moved between them and the whole page jumped sideways by its width.
   Holding the gutter open on every screen costs nothing and stops the jump. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
body { font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--navy); }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 16px; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
     color: var(--muted); margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
       background: var(--bg); padding: 1px 5px; border-radius: 4px; user-select: all; }

/* ---------- layout: sidebar on desktop, bottom tabs on a phone ---------- */
#nav { position: fixed; left: 0; top: 0; bottom: 0; width: var(--nav-w); background: var(--blue-deep);
       color: #fff; display: flex; flex-direction: column; padding: 16px 0; z-index: 10; }
#nav[hidden] { display: none; }   /* the attribute must beat the flex above, or the sign-in page wears an empty sidebar */
#nav .brand { padding: 6px 18px 18px; }
#nav .brand .logo { height: 24px; width: auto; display: block; }
#nav a { display: block; color: rgba(255,255,255,.8); text-decoration: none; padding: 9px 18px;
         font-size: 14px; }
#nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
#nav a.active { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 3px 0 0 var(--yellow); }
#nav .foot { margin-top: auto; padding: 12px 18px; font-size: 12px; color: rgba(255,255,255,.7);
             border-top: 1px solid rgba(255,255,255,.15); }
#nav .foot a { padding: 6px 0; font-size: 12px; }
#main { margin-left: var(--nav-w); padding: 24px 28px 40px; max-width: 1240px; }
#main.full { margin-left: 0; max-width: none; padding: 0; }

@media (max-width: 899px) {
  #nav { top: auto; width: 100%; height: 56px; flex-direction: row; padding: 0;
         border-top: 1px solid rgba(255,255,255,.2); }
  #nav .brand, #nav .foot { display: none; }
  #nav a { flex: 1; text-align: center; padding: 10px 4px; font-size: 12px; line-height: 1.2; }
  #nav a.more { display: block; }
  #main { margin-left: 0; padding: 16px 14px 80px; }
}

/* ---------- surfaces ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 16px; margin-bottom: 16px; }
.card.tight { padding: 12px 14px; }
.row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.row.end { align-items: flex-end; }
.between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 899px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- controls ---------- */
.btn { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--navy);
       background: var(--navy); color: #fff; font: inherit; font-size: 13px; cursor: pointer;
       transition: background .12s; white-space: nowrap; }
.btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-ghost { background: #fff; color: var(--blue); border-color: var(--line); }
.btn-ghost:hover { background: var(--blue-bg); border-color: var(--blue); }
.btn-danger { background: #fff; color: var(--bad); border-color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn-big { height: 44px; padding: 0 16px; font-size: 14px; }   /* thumbs, on a phone */

.field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.field label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.field textarea { height: auto; padding: 8px 9px; min-height: 64px; resize: vertical; }
.field select[multiple] { height: auto; padding: 4px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.hint { font-size: 12px; color: var(--muted); }
/* A pick panel: head, filter, scrolling checklist. Three of them side by side line up because
   every one has the same three parts at the same heights. */
.pick { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
        background: #fff; overflow: hidden; }
.pick-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px;
             background: var(--bg); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600;
             letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pick-head .tag { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 11px; }
.checklist-filter { height: 30px; margin: 8px 8px 0; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px;
                    font: inherit; font-size: 12px; background: #fff; color: var(--ink); }
.checklist-filter:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.checklist { height: 196px; overflow-y: auto; padding: 6px 8px 8px; font-size: 13px; }
.checklist label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px;
                   cursor: pointer; white-space: nowrap; font-size: 13px; color: var(--ink); }
.checklist label:hover { background: var(--blue-bg); }
.checklist label:has(input:checked) { background: var(--blue-bg); font-weight: 500; }
.checklist input { margin: 0; accent-color: var(--blue); }
.contract-summary { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
/* A spreadsheet: gridlines on every cell, a shaded header row, a row number down the side. */
.sheet { border-collapse: collapse; font-size: 13px; min-width: 520px; background: #fff; }
.sheet th, .sheet td { border: 1px solid #c9d3e0; padding: 8px 12px; text-align: left; vertical-align: top; }
.sheet th { background: var(--blue-bg); color: var(--ink); font-weight: 600; font-size: 12px; white-space: nowrap; }
.sheet td { min-width: 90px; max-width: 320px; }
.sheet .sheet-n { width: 34px; min-width: 34px; text-align: center; color: var(--muted); background: var(--bg); font-size: 12px; }
.sheet td.muted { color: var(--muted); font-style: italic; }

/* The contract sheet, editable: chips toggle one value, inputs sit flush in their cells. */
.sheet.lines td { vertical-align: middle; }
.sheet.lines select, .sheet.lines input { height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px;
                                          font: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.sheet.lines select:focus, .sheet.lines input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.sheet.lines .line-state { min-width: 150px; }
.sheet.lines .line-num { width: 84px; }
.sheet.lines .line-actions { white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 160px; }
.chip { height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted);
        font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.chips-all { padding-left: 2px; }
.sheet.is-dirty { box-shadow: 0 0 0 2px var(--yellow); }

/* ---------- the customers page: a grid of tiles, then one card per customer, in bands ---------- */
.customer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 16px; }
.customer-tile { display: block; color: inherit; text-decoration: none; padding: 14px 16px; margin: 0;
                 transition: border-color .12s, box-shadow .12s, transform .12s; }
.customer-tile:hover { border-color: var(--blue); box-shadow: 0 6px 20px rgba(15,23,42,.08); transform: translateY(-1px); }
.customer-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.customer-tile.is-suspended { opacity: .7; }
/* A tag is `white-space: nowrap` everywhere else, which is right in a table cell and wrong here:
   a customer holding every mineral and every kind produces a line far wider than the 300px card,
   and it ran out over the card's edge and across whatever sat beside it. Inside a contract tile a
   tag wraps its own text and is capped at the tile's width instead. */
.tile-contract { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 12px; }
.tile-contract .tag { white-space: normal; max-width: 100%; overflow-wrap: anywhere; line-height: 1.5; }
.tile-contract .tag b { font-weight: 600; margin-right: 3px; }
.tile-open { margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--blue); }
.customer { padding: 0; overflow: hidden; margin-bottom: 20px; }
.customer.is-suspended { opacity: .8; }
.customer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
                 padding: 14px 18px; background: var(--bg); border-bottom: 1px solid var(--line); }
.customer-id { display: flex; align-items: center; gap: 12px; }
/* `flex: none` is what keeps it square. As an ordinary flex item beside a long company name it
   shrinks to fit the text, and a 36px badge was being squeezed to 12px — a tall thin pill with a
   letter in it, which is what the initial looked like on every customer card. */
.customer-initial { flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--blue);
                    color: #fff; display: inline-flex; align-items: center; justify-content: center;
                    font-weight: 700; font-size: 15px; line-height: 1; }
.customer-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.customer-band { padding: 14px 18px 16px; }
.customer-band + .customer-band { border-top: 1px solid var(--line); }
.customer-band > h2 { margin-bottom: 10px; }
.contract-form { display: flex; flex-direction: column; gap: 12px; }
.contract-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 860px; align-items: stretch; }
@media (max-width: 899px) { .contract-lists { grid-template-columns: 1fr; } }

/* ---------- tables, and cards under 900px ---------- */
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
            color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line);
            position: sticky; top: 0; background: var(--card); }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--bg); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
              margin-bottom: 8px; padding: 8px 12px; }
  .table td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; }
  .table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; flex: 0 0 38%; }
  .table td.num { text-align: left; }
  .table td.lead { font-weight: 600; }
  .table td.lead::before { display: none; }
}

/* ---------- tags, stats, states ---------- */
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
       background: var(--bg); color: var(--muted); white-space: nowrap; }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-bad { background: var(--bad-bg); color: var(--bad); }
.tag-navy { background: var(--blue-bg); color: var(--blue); }
.tag-new { background: var(--yellow); color: var(--ink); font-weight: 600; }
.stat { display: inline-block; margin-right: 28px; margin-bottom: 8px; }
.stat b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--blue); }
.stat span { font-size: 12px; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.loading { color: var(--muted); padding: 8px 0; }

/* ---------- banner and dialog ---------- */
#banner { position: fixed; top: 12px; right: 12px; left: 12px; z-index: 30; max-width: 720px;
          margin: 0 auto; padding: 10px 14px; border-radius: var(--radius); font-size: 13px;
          border: 1px solid; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.banner-bad { background: var(--bad-bg); color: var(--bad); border-color: #f0c2bb; }
.banner-ok { background: var(--yellow-bg); color: var(--ink); border-color: var(--yellow); }
@media (min-width: 900px) { #banner { left: calc(var(--nav-w) + 12px); } }

dialog { border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 520px;
         width: calc(100% - 32px); box-shadow: 0 12px 40px rgba(0,0,0,.18); }
dialog::backdrop { background: rgba(20,24,40,.35); }
dialog .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.dialog-error { color: var(--bad); font-size: 13px; margin: 10px 0 0; }
.confirm-text { white-space: pre-line; }

/* ---------- the sign-in page ---------- */
.signin { max-width: 380px; margin: 12vh auto 0; }
.signin .brand { text-align: center; margin-bottom: 20px; }
.signin .brand .logo-lg { height: 44px; width: auto; display: inline-block; }

/* ---------- the pipeline board ---------- */
.board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.col { flex: 0 0 200px; background: var(--bg); border-radius: var(--radius); padding: 8px; min-height: 140px; }
.col h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
          color: var(--muted); display: flex; justify-content: space-between; }
.col.over { outline: 2px dashed var(--navy); }
.bcard { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
         margin-bottom: 8px; font-size: 12px; cursor: grab; }
.bcard .co { display: block; font-weight: 600; margin-bottom: 2px; }
.bcard.dragging { opacity: .5; }

/* ---------- the lead page ---------- */
.actions-row .btn { margin: 0 6px 6px 0; }
.activity { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.activity:last-child { border-bottom: 0; }
.readonly-strip { background: var(--yellow-bg); color: var(--ink); border: 1px solid var(--yellow);
                  border-radius: var(--radius); padding: 8px 12px; font-size: 13px; margin-bottom: 16px; }