/* Mosaic Cost Book: additions to the MSE Ops design system (app.css). Same tokens, same rules:
   colour carries meaning, a state is a word in a colour, numbers in Geist Mono, no inline styles. */

/* The wordmark: six letters instead of three, so a little smaller and less stretched to fit the 240 px menu. */
.wordmark { font-size: 25px; transform: scaleX(1.1); letter-spacing: .01em; }
.side-brand img { border-radius: 50%; background: white; }
/* Menu lines stay on one line each, as in MSE. Project items show the code or a short name; the full name is the title. */
.side-sub, .side-foot .co { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a span:not(.count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A project's badge counts things to fix: the bad voice, never brass (brass is decisions waiting). */
.nav .count.bad { background: oklch(from var(--bad) l c h / .85); color: white; }

.muted { color: var(--text-3); font-style: normal; font-size: .92em; }
.num-big { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.row-gap { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.spacer { flex: 1; }
.nav .count.plain { background: oklch(1 0 0 / .14); color: var(--nav-text); }

/* Tags: a hash and a word, on a light well. Suggested tags (from an import) carry a dashed edge until confirmed. */
.taglist { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip.tag { display: inline-flex; align-items: center; gap: 4px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; font-weight: 550;
  padding: 2px 7px; border-radius: var(--r-xs); background: oklch(from var(--blue) l c h / .10); color: var(--blue-ink); border: 1px solid oklch(from var(--blue) l c h / .22); }
.chip.tag.suggested { border-style: dashed; background: transparent; }
.chip.trade { background: oklch(from var(--plum) l c h / .10); color: var(--plum-ink); border-color: oklch(from var(--plum) l c h / .25);
  font-family: "Inter", system-ui, sans-serif; font-size: 11.5px; }
.chip-x { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; display: inline-flex; min-width: 16px; min-height: 16px; align-items: center; justify-content: center; }
.tag-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--card-edge); background: var(--field); min-height: 42px; }
.tag-editor:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px oklch(from var(--blue) l c h / .18); }
.tag-in { border: 0; background: transparent; outline: none; flex: 1; min-width: 120px; padding: 4px 2px; color: var(--text); }

.checkline { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
.checkline input { width: 18px; height: 18px; accent-color: var(--fill-blue); }

/* The detail meter: how much of the money is still a rough figure. */
.stackbar { display: grid; gap: 10px; }
.sb-track { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--work-2); }
.sb-seg { height: 100%; min-width: 2px; }
.sb-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--text-2); }
.sb-legend li { display: inline-flex; gap: 6px; align-items: center; }
.sb-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sb-legend b { font-family: "Geist Mono", ui-monospace, monospace; color: var(--text); font-weight: 600; }
.t-allow { background: var(--coral); } .t-estimate { background: oklch(from var(--text-3) l c h / .55); } .t-confirm { background: oklch(from var(--coral) l c h / .55); }
.t-offer { background: var(--blue); } .t-agreed { background: oklch(from var(--good) l c h / .7); } .t-actual { background: var(--good); } .t-open { background: var(--plum); }

/* Status words, as MSE pills: a word in a meaning colour with a dot, never a filled block.
   The two voices stay apart (MSE rule 2): brass is only "Needs you", sea is only Pythia. A price status is neither. */
.pill.st-estimate { color: var(--text-2); background: oklch(from var(--text-3) l c h / .13); }
.pill.st-confirm { color: var(--coral-ink); background: oklch(from var(--coral) l c h / .12); }
.pill.st-offer { color: var(--blue-ink); background: oklch(from var(--blue) l c h / .14); }
.pill.st-agreed { color: var(--good-ink); background: oklch(from var(--good) l c h / .13); }
.pill.st-actual { color: var(--good-ink); background: oklch(from var(--good) l c h / .20); font-weight: 650; }
.pill.cv-open { color: var(--plum-ink); background: oklch(from var(--plum) l c h / .12); }
.pill.cv-counted { color: var(--good-ink); background: oklch(from var(--good) l c h / .12); }
.pill.cv-na { color: var(--text-3); background: oklch(from var(--text-3) l c h / .12); }
.pill.sg-future { color: var(--text-2); background: oklch(from var(--text-3) l c h / .12); }
.pill.sg-working { color: var(--blue-ink); background: oklch(from var(--blue) l c h / .14); }
.pill.sg-stuck { color: var(--coral-ink); background: oklch(from var(--coral) l c h / .14); }
.pill.sg-critical { color: var(--bad-ink); background: oklch(from var(--bad) l c h / .14); }
.pill.sg-done { color: var(--good-ink); background: oklch(from var(--good) l c h / .14); }

/* Quantity workings: the parts that make a zone's quantity, shown as a sum. */
.working { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: var(--text-3); }
.working b { color: var(--text); font-weight: 600; }

/* Drawers can be wide for the line editor and comparisons. */
.drawer-panel.wide { width: min(1080px, 100%); }
.drawer-body { padding: 0 24px 20px; display: grid; gap: 14px; overflow: auto; }
.drawer-foot { padding: 14px 24px; border-top: 1px solid var(--rule); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Link hand-over box: a link shown once, to copy. */
.once { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px dashed oklch(from var(--brass) l c h / .5); background: oklch(from var(--brass) l c h / .06); }
.once input { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }

/* Totals block under every view. */
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; max-width: 520px; margin-left: auto; font-size: var(--fs-sm); }
.totals dt { color: var(--text-2); }
.totals dd { margin: 0; text-align: right; font-family: "Geist Mono", ui-monospace, monospace; }
.totals .strong { color: var(--text); font-weight: 650; }
.totals .rule-line { border-top: 1px solid var(--rule); padding-top: 6px; }

@media print { .stackbar, .totals { break-inside: avoid; } }


/* ---------- Tables (shared by every screen) ---------- */
/* A text column that may wrap (ui.js table(): first text column, or wrap:true). MSE: row titles wrap, never cut. */
td.wrapok { white-space: normal; overflow-wrap: anywhere; min-width: 12ch; }
/* Each cell's content is one node, so the phone label/value grid never scatters it. */
td > .cv { min-width: 0; }
td > .cv:has(> .pill:only-child), td > .pill { justify-self: start; }
/* Footer (totals) rows become labelled blocks too, on phones and wherever the table falls back to blocks. */
@media screen and (max-width: 640px) {
  table.rowblocks > tfoot, table.rowblocks > tfoot > tr { display: block; width: 100%; }
  table.rowblocks > tfoot > tr { padding: var(--sp-2) 0; border-top: 2px solid var(--rule); }
  table.rowblocks > tfoot > tr > td { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline;
    padding: 3px 2px; border: 0; white-space: normal; text-align: left; width: 100%; min-width: 0; position: static; }
  table.rowblocks > tfoot > tr > td::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  table.rowblocks > tfoot > tr > td:empty, table.rowblocks > tfoot > tr > td.nolabel:empty { display: none; }
  table.rowblocks > tbody > tr > td > .cv:has(> .pill:only-child) { justify-self: start; }
}
@media screen {
  table.rowblocks.fit-blocks > tfoot, table.rowblocks.fit-blocks > tfoot > tr { display: block; width: 100%; }
  table.rowblocks.fit-blocks > tfoot > tr { padding: var(--sp-2) 0; border-top: 2px solid var(--rule); }
  table.rowblocks.fit-blocks > tfoot > tr > td { display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline;
    padding: 3px 2px; border: 0; white-space: normal; text-align: left; width: 100%; min-width: 0; position: static; }
  table.rowblocks.fit-blocks > tfoot > tr > td::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  table.rowblocks.fit-blocks > tfoot > tr > td:empty { display: none; }
}

/* ---------- Sheet heads (M4) ---------- */
.page-head .tags { margin-left: auto; align-items: flex-start; }
.page-head .refbox { order: 2; }
.page-head .actions { order: 1; }
.sheet .page-head { padding-bottom: var(--sp-2); }
@media (max-width: 640px) {
  .page-head .tags { margin-left: 0; width: 100%; }
  .page-head .refbox { justify-items: start; grid-auto-flow: column; align-items: center; }
  /* m7: a card's actions sit under its title on a phone, so the subtitle keeps its width. */
  .card > header { flex-wrap: wrap; }
  .card > header > .actions { width: 100%; justify-content: flex-start; }
}

/* ---------- Top bar (M4): long crumbs never squeeze the current page or the person's name ---------- */
.bar .crumbs { flex: 1 1 auto; min-width: 0; }
.bar .crumbs > a, .bar .crumbs > span:not(.sep) { flex: 0 1 auto; min-width: 2ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .crumbs > b { flex: 0 0 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .crumbs > .sep { flex: 0 0 auto; }
.who-btn .nm { white-space: nowrap; }
.bar .meta { flex: 0 0 auto; }

/* ---------- Big numbers in Inter, as MSE stat tiles do; tables keep Geist Mono (m1) ---------- */
.num-big { font-family: "Inter", system-ui, sans-serif; font-weight: 650; letter-spacing: -.01em; }

/* ---------- Touch targets on phones and touch screens ---------- */
@media (max-width: 640px), (pointer: coarse) {
  .checkline, .side-brand, details > summary { min-height: var(--tap); }
  .checkline input { width: 22px; height: 22px; }
  .chip-x { min-width: 28px; min-height: 28px; }
}

/* ---------- The Mosaic signature: a thin strip of tiles in Mosaic's blues and one orange tile ----------
   Replaces MSE's plain gradient line on top of sheets and drawers. Hard colour stops, no image. */
:root { --tile-1: #0a2f6b; --tile-2: #1f4fa3; --tile-3: #2389c9; --tile-4: #3d63b8; --tile-5: #0d3d8a; --tile-or: #f1912a;
  --mosaic-strip: linear-gradient(90deg,
    var(--tile-2) 0 6%, transparent 6% 6.6%, var(--tile-3) 6.6% 11%, transparent 11% 11.6%, var(--tile-1) 11.6% 19%, transparent 19% 19.6%,
    var(--tile-4) 19.6% 24%, transparent 24% 24.6%, var(--tile-or) 24.6% 27.4%, transparent 27.4% 28%, var(--tile-5) 28% 36%, transparent 36% 36.6%,
    var(--tile-3) 36.6% 41%, transparent 41% 41.6%, var(--tile-2) 41.6% 50%, transparent 50% 50.6%, var(--tile-1) 50.6% 55%, transparent 55% 55.6%,
    var(--tile-4) 55.6% 63%, transparent 63% 63.6%, var(--tile-3) 63.6% 69%, transparent 69% 69.6%, var(--tile-5) 69.6% 76%, transparent 76% 76.6%,
    var(--tile-2) 76.6% 83%, transparent 83% 83.6%, var(--tile-1) 83.6% 88%, transparent 88% 88.6%, var(--tile-3) 88.6% 95%, transparent 95% 95.6%,
    var(--tile-4) 95.6% 100%); }
:root[data-theme="dark"] { --tile-1: #2f5fb3; --tile-2: #4a7fd6; --tile-3: #45a8e6; --tile-4: #5d82d6; --tile-5: #3466c4; }
.sheet { position: relative; }
.sheet::before { content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 4px; border-radius: 0 0 3px 3px;
  background: var(--mosaic-strip); opacity: .9; pointer-events: none; }
.drawer-panel::before { background: var(--mosaic-strip); height: 4px; opacity: .9; }
@media print { .sheet::before { display: none; } }

/* "One number everywhere": a count that says where it comes from. */
[data-from] { cursor: help; text-decoration: underline dotted oklch(from var(--text-3) l c h / .5); text-underline-offset: 3px; }

/* Phones: the search fits its box (m11). */
@media (max-width: 480px) { .gsearch input::placeholder { font-size: 13px; } }