/* ==========================================================================
   BDSP design system — themeable via CSS custom properties (see Appearance).
   Principles: large readable type, strong contrast, few visible controls,
   secondary actions behind menus, generous targets for touch and older eyes.
   ========================================================================== */
:root {
  --font: "IBM Plex Sans", Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size: 16px;
  --radius: 6px;
  --navy: #1b3a5c; --navy-700: #122a44; --navy-100: #e3eaf2;
  --accent: #e3a725; --accent-100: #f9edcf;
  --ink: #1d2126; --ink-2: #4a5058; --ink-3: #74787d;
  --line: #e1e4e8; --line-2: #c9ced4;
  --bg: #f1f2f4; --card: #ffffff;
  --sidebar-bg: #12161a; --sidebar-ink: #e6e8eb; --sidebar-muted: #9aa0a6; --sidebar-active: rgba(227,167,37,.22);
  /* derived */
  --radius-sm: calc(var(--radius) * .6);
  --ok: #2e9e6a; --ok-100: #dff4ea; --warn: #d9a300; --warn-100: #fff6d6; --bad: #d64545; --bad-100: #fde3e3; --info-100: #e7eef7;
  --shadow: 0 1px 2px rgba(16, 33, 43, .06), 0 4px 16px rgba(16, 33, 43, .05);
  --sidebar-w: 248px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-mode="dark"] { --navy:#e3a725; --navy-700:#f0bd4a; --navy-100:#3a2f12; --accent:#e3a725; --accent-100:#3a2f12; --ink:#eef0f2; --ink-2:#c4c8cc; --ink-3:#8d9196; --line:#24282d; --line-2:#343a41; --bg:#0b0d10; --card:#15181c; --sidebar-bg:#000000; --sidebar-ink:#e6e8eb; --sidebar-muted:#8d9196; --sidebar-active:rgba(227,167,37,.2); --info-100:#1f2a36; --ok-100:#173125; --warn-100:#3a2f0e; --bad-100:#3d1c1c; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); color-scheme: dark; }
:root[data-mode="dark"] .badge-lead { background:#2a313a; color:#c3c9d1; } :root[data-mode="dark"] .badge-review, :root[data-mode="dark"] .badge-shortlisted { background:#2e2640; color:#c7b6ee; } :root[data-mode="dark"] .badge-won { color:#7fd4a8; } :root[data-mode="dark"] .badge-lost { color:#f09a9a; } :root[data-mode="dark"] .badge-submitted { color:#e6c85a; } :root[data-mode="dark"] .badge-construction { color:#e0bf63; } :root[data-mode="dark"] .badge-both { background:#173125; color:#7fd4a8; } :root[data-mode="dark"] .badge-other, :root[data-mode="dark"] .badge-no_bid { background:#2a313a; color:#c3c9d1; }
:root[data-mode="dark"] .btn-primary, :root[data-mode="dark"] .btn-accent { color:#14181d; }
:root[data-mode="dark"] .gantt-wrap, :root[data-mode="dark"] .doc { background:#fff; }
:root[data-mode="dark"] .brand img { background: transparent; }
.brand img { background: #fff; }
:root[data-mode="dark"] input[type=color] { background: var(--card); }
html[data-text="large"] { --font-size: 18px; }
html[data-text="xlarge"] { --font-size: 20px; }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; min-height: 100vh; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .35em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; } h4 { font-size: .9rem; color: var(--ink-2); }
p { margin: 0 0 .8em; }
small, .muted { color: var(--ink-3); }
.muted { font-size: .88rem; }
code, .mono { font-family: var(--mono); font-size: .88em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--navy) 45%, transparent); outline-offset: 2px; }
svg.i { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }

/* ---- layout --------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid color-mix(in srgb, var(--sidebar-ink) 12%, transparent); }
.brand { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.1rem .9rem; border-bottom: 1px solid color-mix(in srgb, var(--sidebar-ink) 12%, transparent); color: var(--sidebar-ink); }
.brand:hover { text-decoration: none; }
.brand img { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; }
.brand .name { font-weight: 700; font-size: .98rem; line-height: 1.15; }
.brand .tag { font-size: .72rem; color: var(--sidebar-muted); }
.nav { padding: .7rem .6rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav .label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-muted); padding: .9rem .6rem .3rem; }
.nav a { display: flex; align-items: center; gap: .65rem; padding: .58rem .7rem; border-radius: 8px; color: var(--sidebar-ink); font-size: .95rem; }
.nav a svg { width: 19px; height: 19px; opacity: .85; flex: none; }
.nav a:hover { background: color-mix(in srgb, var(--sidebar-ink) 8%, transparent); text-decoration: none; }
.nav a.active { background: var(--sidebar-active); color: var(--sidebar-ink); font-weight: 650; }
.nav a.active svg { opacity: 1; }
.sidebar .user { margin-top: auto; padding: .7rem .8rem; border-top: 1px solid color-mix(in srgb, var(--sidebar-ink) 12%, transparent); font-size: .9rem; color: var(--sidebar-ink); display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sidebar .user > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .user .menu-items { bottom: calc(100% + 4px); top: auto; }
.sidebar .user summary.btn { background: transparent; color: var(--sidebar-ink); border-color: color-mix(in srgb, var(--sidebar-ink) 30%, transparent); }
.menu-items .group { display: flex; gap: .3rem; padding: .3rem .7rem .4rem; }
.menu-items .group button { width: auto; border: 1px solid var(--line-2); justify-content: center; padding: .3rem .6rem; }
.menu-items .group button.on { border-color: var(--accent); font-weight: 650; }
.menu-label { display: block; padding: .3rem .7rem 0; font-size: .78rem; color: var(--ink-3); }
.menu-prefs select { width: calc(100% - 1.4rem); margin: .3rem .7rem .4rem; font-size: .88rem; }
.main { flex: 1; min-width: 0; padding: 1.6rem 2rem 3rem; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.page-head .crumbs { font-size: .84rem; color: var(--ink-3); margin-bottom: .2rem; }
.page-head .crumbs a { color: var(--ink-3); }
.page-head h1 { margin-bottom: .1rem; }
.page-head .sub { color: var(--ink-3); font-size: .92rem; }
.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 800px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: relative; }
  .nav { flex-direction: row; flex-wrap: wrap; } .nav .label { display: none; }
  .main { padding: 1rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } .span-2 { grid-column: auto; }
}

/* ---- cards ---------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-body { padding: 1.1rem 1.25rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.card + .card { margin-top: 1.1rem; } .grid > .card + .card { margin-top: 0; } /* grids space with gap */
.stat { padding: 1rem 1.2rem; }
.stat .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.stat .v { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin-top: .15rem; }
.stat .d { font-size: .84rem; color: var(--ink-3); }
.empty { padding: 2rem; text-align: center; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink-2); margin-bottom: .2rem; }

/* ---- buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: .92rem; font-weight: 550; cursor: pointer; line-height: 1.2; white-space: nowrap; min-height: 2.4rem; }
.btn:hover { background: color-mix(in srgb, var(--ink) 4%, var(--card)); text-decoration: none; border-color: color-mix(in srgb, var(--ink) 30%, var(--line-2)); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(.92); }
.btn-danger { color: var(--bad); border-color: #f1c3c3; }
.btn-danger:hover { background: var(--bad-100); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: rgba(0,0,0,.05); border-color: transparent; }
.btn-sm { padding: .36rem .65rem; font-size: .85rem; min-height: 2rem; }
.btn-xs { padding: .22rem .5rem; font-size: .78rem; min-height: 1.7rem; border-radius: 6px; }
.btn-icon { padding: .3rem .45rem; min-width: 2rem; justify-content: center; }
.btn[disabled] { opacity: .5; cursor: default; }

/* ---- dropdown menus (hide secondary actions) ------------------------------ */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary::after { content: ""; position: fixed; inset: 0; z-index: 39; }
.menu-items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 200px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(16,33,43,.14); padding: .35rem; }
.menu-items.left { right: auto; left: 0; }
/* An open menu floats (static/js/menus.js): above tables' scroll boxes, the side panel and sticky bars. */
.menu-items.floating { position: fixed !important; right: auto !important; bottom: auto !important; z-index: 60; overflow-y: auto; }
.menu[open] > summary::after { z-index: 59; }
.menu-items a, .menu-items button { display: flex; width: 100%; align-items: center; gap: .55rem; text-align: left; padding: .5rem .7rem; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--ink); border-radius: 6px; cursor: pointer; }
.menu-items a:hover, .menu-items button:hover { background: var(--bg); text-decoration: none; }
.menu-items .danger { color: var(--bad); }
.menu-items hr { margin: .3rem 0; }
.menu-items form { margin: 0; }
.menu-items svg { width: 1em; height: 1em; opacity: .7; }

/* ---- disclosure (hidden add-forms) ----------------------------------------- */
details.reveal > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal[open] > summary .btn { background: var(--navy-100); border-color: var(--navy-100); }
details.reveal > .reveal-body { margin-top: .8rem; }
.add-bar { padding: .7rem 1.25rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, var(--card)); border-radius: 0 0 var(--radius) var(--radius); }

/* ---- badges --------------------------------------------------------------- */
.badge { display: inline-block; padding: .16rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .01em; background: var(--info-100); color: var(--navy); white-space: nowrap; }
.badge-lead { background: #eef0f3; color: #4d5b68; }
.badge-drafting { background: var(--info-100); color: var(--navy); }
.badge-review, .badge-shortlisted { background: #ece6f7; color: #5c3f9e; }
.badge-submitted { background: var(--warn-100); color: #8a6900; }
.badge-won { background: var(--ok-100); color: #1f7a50; }
.badge-lost { background: var(--bad-100); color: #a52f2f; }
.badge-no_bid { background: #f1f1f1; color: #777; }
.badge-design { background: var(--navy-100); color: var(--navy); }
.badge-construction { background: var(--accent-100); color: #9a4f0a; }
.badge-both { background: #e6f1ec; color: #1f6b4a; }
.badge-other { background: #eef0f3; color: #4d5b68; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: .35rem; }

/* ---- tables --------------------------------------------------------------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; padding: .6rem .9rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, var(--card)); }
.tbl td { padding: .62rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--bg) 50%, var(--card)); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .row-actions { text-align: right; white-space: nowrap; width: 1%; }
.tbl tfoot td { font-weight: 650; background: color-mix(in srgb, var(--bg) 60%, var(--card)); }
.tbl a.strong { font-weight: 600; }
.tbl input, .tbl select { width: 100%; }
.card > .table-wrap { border-radius: var(--radius); overflow: hidden; }
.table-wrap { overflow-x: auto; }
.card > .tbl { border-radius: var(--radius); }

/* ---- forms ---------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem 1.2rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 800px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink-2); margin-bottom: .32rem; }
.field .help { font-size: .8rem; color: var(--ink-3); margin-top: .28rem; }
.field .err { font-size: .8rem; color: var(--bad); margin-top: .25rem; }
.field.check { display: flex; align-items: center; gap: .5rem; } .field.check label { margin: 0; }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=date], input[type=password], input[type=tel], input[type=search], select, textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit; font-size: .95rem; color: var(--ink); background: var(--card); transition: border-color .12s, box-shadow .12s; min-height: 2.5rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
input[type=color] { width: 60px; height: 40px; padding: 2px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--navy); }
input[type=file] { font-size: .88rem; }
ul.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .35rem .8rem; }
ul.checks li label { display: flex; align-items: center; gap: .5rem; font-weight: 450; font-size: .92rem; color: var(--ink); }
.form-actions { display: flex; gap: .6rem; margin-top: 1.2rem; align-items: center; }
.inline-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin: 0; min-width: 150px; flex: 1; }
.inline-form .field.narrow { flex: 0 0 120px; min-width: 0; }
.errorlist { color: var(--bad); font-size: .82rem; margin: .2rem 0 0; padding-left: 1rem; }
.nonfield { background: var(--bad-100); color: #8d2a2a; padding: .6rem .9rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; }
.filters { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.filters input:not([type=checkbox]):not([type=radio]), .filters select { width: auto; min-width: 160px; }
.filters input[type=search] { min-width: 260px; }

/* ---- messages / alerts ---------------------------------------------------- */
.messages { position: fixed; right: 1.2rem; top: 1.2rem; z-index: 50; display: flex; flex-direction: column; gap: .5rem; max-width: 400px; }
.msg { padding: .75rem 1rem; border-radius: 8px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .92rem; border-left: 4px solid var(--navy); animation: fade 7s forwards; }
.msg.success { border-left-color: var(--ok); } .msg.error { border-left-color: var(--bad); } .msg.warning { border-left-color: var(--warn); }
@keyframes fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.callout { padding: .85rem 1rem; border-radius: var(--radius-sm); background: var(--info-100); border: 1px solid color-mix(in srgb, var(--navy) 18%, transparent); font-size: .9rem; }
.callout.warn { background: var(--warn-100); border-color: #efdc9a; }

/* ---- tabs ----------------------------------------------------------------- */
.tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; flex-wrap: wrap; }
.tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .95rem; color: var(--ink-2); font-weight: 550; font-size: .93rem; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a svg { width: 17px; height: 17px; opacity: .75; }
.tabs a:hover { text-decoration: none; color: var(--navy); }
.tabs a.active { color: var(--navy); border-bottom-color: var(--accent); }
.tabs a .count { font-size: .74rem; background: var(--line); border-radius: 999px; padding: .08rem .45rem; color: var(--ink-2); }

/* ---- pipeline / board ----------------------------------------------------- */
.pipeline { display: grid; grid-template-columns: repeat(8, 1fr); gap: .5rem; }
.pipeline a { display: block; padding: .7rem .8rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); text-align: center; }
.pipeline a:hover { text-decoration: none; border-color: var(--line-2); }
.pipeline .n { font-size: 1.4rem; font-weight: 700; }
.pipeline .l { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 1100px) { .pipeline { grid-template-columns: repeat(4, 1fr); } }
.board { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.col { flex: 0 0 260px; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); border-radius: var(--radius); padding: .6rem; }
.col h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding: .3rem .4rem .5rem; display: flex; justify-content: space-between; }
.col h3 .count { color: var(--ink-3); font-weight: 500; }
.col .sum { font-size: .78rem; color: var(--ink-3); padding: 0 .4rem .5rem; }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; margin-bottom: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kcard .t { font-weight: 600; font-size: .92rem; display: block; margin-bottom: .15rem; }
.kcard .m { font-size: .8rem; color: var(--ink-3); display: flex; justify-content: space-between; gap: .4rem; }
.kcard select { margin-top: .5rem; font-size: .8rem; padding: .3rem .4rem; min-height: 0; }

/* ---- sections (proposal content editor) ----------------------------------- */
.section-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; box-shadow: var(--shadow); }
.section-card .sc-head { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.section-card .sc-head h3 { margin: 0; flex: 1; }
.section-card .sc-head .n { font-family: var(--mono); color: var(--ink-3); font-size: .8rem; width: 26px; }
.section-card .sc-body { padding: .9rem 1rem 1rem; font-size: .95rem; color: var(--ink-2); white-space: pre-wrap; line-height: 1.6; }
.section-card .sc-body:empty::before { content: "No content yet — choose Edit from the menu to write this section."; color: var(--ink-3); font-style: italic; }
.section-card.editing { border-color: var(--navy); }
.placeholders { display: flex; flex-wrap: wrap; gap: .3rem; }
.placeholders code { background: var(--navy-100); color: var(--navy); border-radius: 5px; padding: .12rem .45rem; cursor: pointer; }

/* ---- gantt ---------------------------------------------------------------- */
.gantt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.gantt { display: block; font-family: var(--font); }
.gantt.fit { width: 100%; height: auto; }
.gantt .month { fill: #f3f6f9; stroke: #e2e8ee; }
.gantt .month-label { font-size: 11px; font-weight: 600; fill: #44535f; }
.gantt .week { stroke: #e2e8ee; stroke-width: 1; }
.gantt .week-label { font-size: 9px; fill: #74838f; }
.gantt .zebra { fill: #fafbfc; }
.gantt .rowline { stroke: #e2e8ee; }
.gantt .label { font-size: 12px; fill: #16212b; }
.gantt .label.ms { font-weight: 600; }
.gantt .sub { font-size: 9.5px; fill: #74838f; }
.gantt .bar { rx: 4; opacity: .9; }
.gantt .bar-progress { rx: 4; opacity: .55; fill: #000; }
.gantt .bar-label { font-size: 10px; fill: #fff; font-weight: 600; }
.gantt rect.ms { stroke: #fff; stroke-width: 1.5; }
.gantt .today { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gantt .today-label { font-size: 9px; fill: var(--accent); font-weight: 700; }
.gantt .dep { fill: none; stroke: #74838f; stroke-width: 1.2; marker-end: url(#arrow); }
.gantt .labelbg { fill: #fff; }
.legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); }

/* ---- project gallery ------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; }
/* The whole card opens the sheet through its title link; tag chips stay their own links above it. */
.pcard a.pcard-go { color: inherit; } .pcard a.pcard-go::after { content: ""; position: absolute; inset: 0; }
.pcard:hover { border-color: var(--line-2); } .pcard:hover a.pcard-go { text-decoration: underline; }
.pcard .chips { position: relative; z-index: 1; margin-top: .45rem; }
.pcard .img { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 60%, #fff) 100%); display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.pcard .img img { width: 100%; height: 100%; object-fit: cover; }
.pcard .img svg { width: 48px; height: 48px; opacity: .6; }
.pcard .b { padding: .85rem 1rem; }
.pcard .t { font-weight: 650; display: block; margin-bottom: .15rem; }
.pcard .m { font-size: .82rem; color: var(--ink-3); }
.imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.imgcard { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.imgcard img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.imgcard .c { padding: .5rem; display: flex; gap: .3rem; align-items: center; }
.imgcard .c input { font-size: .82rem; padding: .3rem .45rem; min-height: 0; }
.hero { aspect-ratio: 21 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy); }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.facts > div { background: color-mix(in srgb, var(--bg) 60%, var(--card)); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; }
.facts .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.facts .v { font-weight: 600; font-size: .95rem; }

/* ---- bar charts (metrics) ------------------------------------------------- */
.bars { display: flex; flex-direction: column; gap: .5rem; }
.bars .row { display: grid; grid-template-columns: 180px 1fr 80px; align-items: center; gap: .6rem; font-size: .9rem; }
.bars .track { height: 14px; background: color-mix(in srgb, var(--ink) 8%, var(--bg)); border-radius: 4px; overflow: hidden; display: flex; }
.bars .won { background: var(--ok); height: 100%; } .bars .lost { background: #e4b4b4; height: 100%; }
.bars .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cols { display: flex; align-items: flex-end; gap: .4rem; height: 140px; padding-top: 1rem; }
.cols .c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: .72rem; color: var(--ink-3); }
.cols .c b { width: 100%; background: var(--navy); border-radius: 4px 4px 0 0; min-height: 3px; }

/* ---- document preview ----------------------------------------------------- */
.doc { background: #fff; max-width: 860px; margin: 0 auto; padding: 3rem 3.4rem; box-shadow: var(--shadow); border: 1px solid var(--line); border-radius: var(--radius); color: #1a1a1a; font-size: 15.5px; }
.doc .cover { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; border-bottom: 3px solid var(--doc-primary, var(--navy)); padding-bottom: 1.2rem; margin-bottom: 1.6rem; }
.doc .cover img { max-height: 70px; max-width: 220px; object-fit: contain; }
.doc .cover .co { font-size: .82rem; color: #555; text-align: right; white-space: pre-line; }
.doc .cover .co b { color: var(--doc-primary, var(--navy)); font-size: 1rem; }
.doc .title-block { margin: 1.6rem 0 2rem; }
.doc .title-block .kicker { color: var(--doc-accent, var(--accent)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }
.doc .title-block h1 { font-size: 2rem; margin: .3rem 0 .4rem; color: var(--doc-primary, var(--navy)); }
.doc .meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 2rem; font-size: .9rem; margin-top: 1rem; }
.doc .meta .k { color: #666; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.doc h2 { color: var(--doc-primary, var(--navy)); font-size: 1.15rem; margin: 1.8rem 0 .6rem; padding-bottom: .25rem; border-bottom: 1px solid #e5e5e5; }
.doc h2 .n { color: #999; font-weight: 500; margin-right: .5rem; }
.doc .body { white-space: pre-wrap; line-height: 1.65; }
.doc table.tbl { font-size: .9rem; }
.doc .footer { margin-top: 3rem; padding-top: .8rem; border-top: 1px solid #e5e5e5; font-size: .75rem; color: #777; display: flex; justify-content: space-between; }
.doc ul.svc { columns: 2; padding-left: 1.2rem; margin: 0; }
.print-bar { max-width: 860px; margin: 0 auto 1rem; display: flex; justify-content: space-between; align-items: center; }
@media print {
  body { background: #fff; }
  .sidebar, .messages, .print-bar, .no-print, .tabs { display: none !important; }
  .main { padding: 0; }
  .doc { box-shadow: none; border: 0; max-width: none; padding: 0; border-radius: 0; }
  .gantt-wrap { border: 0; overflow: visible; }
  .doc h2 { break-after: avoid; }
  .card { box-shadow: none; }
}

/* ---- htmx niceties -------------------------------------------------------- */
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }
.htmx-request.btn { opacity: .6; }
.htmx-swapping { opacity: 0; transition: opacity .15s; }
.htmx-added { animation: pop .25s; }
@keyframes pop { from { background: var(--accent-100); } to { background: transparent; } }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.row-flex { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.right { text-align: right; }
.mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; } .mt-sm { margin-top: .5rem; }
.kv { display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); gap: .4rem .8rem; font-size: .92rem; }
.kv .k { color: var(--ink-3); }
.kv > span { min-width: 0; overflow-wrap: anywhere; }
.card-body > .tbl td, .card-body > .tbl th { padding: .4rem .5rem; }
.card-body > .tbl .num { white-space: normal; }
.card-body { min-width: 0; }
.progress { height: 7px; background: color-mix(in srgb, var(--ink) 8%, var(--bg)); border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ok); }
.due-warn { color: #8a6900; font-weight: 600; } .due-bad { color: var(--bad); font-weight: 600; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 70%, #fff) 100%); padding: 1rem; }
.login { width: 400px; max-width: 100%; }
.login .brand { color: var(--ink); border: 0; padding: 0 0 1rem; justify-content: center; }
.login .brand .tag { color: var(--ink-3); }

/* ---- fee build-up & variances --------------------------------------------- */
.item-card { margin-bottom: .9rem; }
.item-card.editing { border-color: var(--navy); }
.suggest { background: var(--accent-100); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius-sm); padding: .75rem .95rem; font-size: .9rem; }
.suggest .tbl { background: var(--card); border-radius: 6px; }
.var-ok { color: var(--ok); font-weight: 600; } .var-warn { color: #8a6900; font-weight: 600; } .var-bad { color: var(--bad); font-weight: 600; }

/* ---- appearance page ----------------------------------------------------- */
.swatches { display: flex; gap: .3rem; }
.swatches i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); display: inline-block; }
.theme-card { border: 2px solid var(--line); border-radius: var(--radius); padding: 1rem; background: var(--card); }
.theme-card.active { border-color: var(--accent); }
.mini { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); display: flex; height: 120px; font-size: 10px; }
.mini .ms { width: 34%; padding: .5rem; }
.mini .mm { flex: 1; padding: .5rem; display: grid; gap: .3rem; grid-template-columns: 1fr 1fr; align-content: start; }
.mini .mc { border-radius: 4px; height: 26px; }

/* ---- sidebar collapse / resize ------------------------------------------- */
.sidebar { position: sticky; z-index: 30; }  /* its own layer above the page, so its account menu is never painted under the content */
.sb-toggle { position: absolute; right: -14px; top: 18px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; box-shadow: var(--shadow); padding: 0; }
.sb-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.sb-resize { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 4; }
html[data-sidebar="collapsed"] { --sidebar-w: 68px !important; }
html[data-sidebar="collapsed"] .sidebar .brand span, html[data-sidebar="collapsed"] .nav a span, html[data-sidebar="collapsed"] .nav .label, html[data-sidebar="collapsed"] .sidebar .user > span:not(.user-who) { display: none; }
html[data-sidebar="collapsed"] .nav a { justify-content: center; padding: .6rem; }
html[data-sidebar="collapsed"] .nav a svg { width: 22px; height: 22px; }
html[data-sidebar="collapsed"] .brand { justify-content: center; padding: .9rem .5rem; }
html[data-sidebar="collapsed"] .sb-toggle svg { transform: rotate(180deg); }
html[data-sidebar="collapsed"] .sidebar .user { justify-content: center; }
html[data-sidebar="collapsed"] .sb-resize { display: none; }
@media (max-width: 800px) { .sb-toggle, .sb-resize { display: none; } }
.nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- chips, avatars, comments, previews, calc charts ---------------------- */
.chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 550; background: color-mix(in srgb, var(--chip, var(--navy)) 16%, var(--card)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--chip, var(--navy)) 40%, transparent); text-decoration: none; }
.chip:hover { text-decoration: none; background: color-mix(in srgb, var(--chip, var(--navy)) 28%, var(--card)); }
.chip-sm { font-size: .72rem; padding: .1rem .45rem; }
.chip small { color: var(--ink-3); }
.chip-learn { border-style: dashed; }
.avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.avatar-txt { background: var(--av, var(--navy)); color: var(--av-ink, #fff); font-weight: 700; letter-spacing: .02em; }
.avatar-ring { box-shadow: 0 0 0 2px var(--ring-gap, var(--card)), 0 0 0 4px var(--av); }
:root[data-mode="dark"] .avatar-ring { box-shadow: 0 0 0 2px var(--ring-gap, var(--card)), 0 0 0 4px color-mix(in srgb, var(--av) 65%, white); }
.sidebar { --ring-gap: var(--sidebar-bg); }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--sw); vertical-align: -1px; box-shadow: 0 0 0 1px var(--line-2); }
:root[data-mode="dark"] .avatar-txt:not([style*="--av"]) { color: #14181d; }
.comment { border-top: 1px solid var(--line); padding-top: .6rem; }
.comment.reply { margin-left: 2.2rem; border-top: 0; padding-top: .3rem; font-size: .92rem; }
.comment-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.comment-body { margin: .3rem 0 .3rem 2.3rem; white-space: pre-wrap; }
.thread textarea { min-height: 2.6rem; flex: 1; }
.count-pill { font-size: .72rem; background: var(--line); border-radius: 999px; padding: .08rem .45rem; color: var(--ink-2); font-weight: 500; }
.reactions { display: inline-flex; gap: .25rem; }
.sheet-preview { display: flex; gap: .8rem; }
.sheet-preview img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; flex: none; }
.thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; display: inline-block; background: var(--line); }
.thumb-empty { background: linear-gradient(135deg, var(--navy), color-mix(in srgb, var(--navy) 50%, var(--card))); }
.tbl.sheets tr.attached { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.tbl.sheets input[type=checkbox] { width: 20px; height: 20px; }
.doc-outline { padding-left: 1.3rem; line-height: 1.9; margin: 0; }
.calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .calc-grid { grid-template-columns: repeat(2, 1fr); } }
.check { padding: .35rem .6rem; border-radius: 6px; font-weight: 550; }
.check.ok { background: var(--ok-100); color: var(--ok); } .check.bad { background: var(--bad-100); color: var(--bad); }
.chart-wrap { border-top: 1px solid var(--line); background: #fff; }
.calc-chart { width: 100%; height: auto; max-width: 760px; display: block; margin: 0 auto; }
.calc-chart .cg { stroke: #e6e9ee; } .calc-chart .cl { font-size: 11px; fill: #44535f; } .calc-chart .ct { font-size: 13px; font-weight: 600; fill: #16212b; } .calc-chart .cf { fill: none; stroke: #cdd6de; }
.stars { display: flex; gap: .6rem; } .stars label { display: flex; gap: .2rem; align-items: center; cursor: pointer; }
.sheet-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.5rem; }
.person-card .b { width: 100%; }

/* ---- configuration panel & view modes ------------------------------------ */
.cfg-btn { position: fixed; right: 1.1rem; bottom: 1.1rem; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; z-index: 45; display: flex; align-items: center; justify-content: center; }
.cfg-btn svg { width: 22px; height: 22px; } .cfg-btn:hover { color: var(--accent); border-color: var(--accent); }
.cfg-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
dialog.cfg { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); color: var(--ink); padding: 1.4rem 1.6rem; width: min(980px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
dialog.cfg::backdrop { background: rgba(0,0,0,.55); }
.cfg-close { position: absolute; right: .8rem; top: .8rem; margin: 0; }
.cfg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1rem; }
@media (max-width: 900px) { .cfg-grid { grid-template-columns: 1fr; } }
.cfg-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.cfg-row .group { display: flex; gap: .3rem; }
.switch { position: relative; width: 42px; height: 24px; display: inline-block; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; background: var(--line-2); border-radius: 999px; transition: .15s; }
.switch i::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + i { background: var(--accent); } .switch input:checked + i::before { transform: translateX(18px); }
.cfg-caps { list-style: none; margin: 0; padding: 0; font-size: .88rem; display: grid; gap: .2rem; }
.cfg-caps li { display: flex; gap: .5rem; color: var(--ink-3); } .cfg-caps li.on { color: var(--ink); } .cfg-caps li.on span { color: var(--ok); }
.cfg-links { display: grid; gap: .35rem; } .cfg-links a { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cfg-links a:hover { text-decoration: none; border-color: var(--accent); }
html[data-editmode="off"] .menu, html[data-editmode="off"] .add-bar, html[data-editmode="off"] details.reveal, html[data-editmode="off"] .form-actions, html[data-editmode="off"] .actions form, html[data-editmode="off"] .row-actions, html[data-editmode="off"] .tbl .row-actions, html[data-editmode="off"] .btn-danger, html[data-editmode="off"] .sb-toggle { display: none !important; }
html[data-editmode="off"] .cfg-btn, html[data-editmode="off"] dialog.cfg .menu { display: flex !important; }
html[data-costs="hide"] .cost-col { display: none !important; }
html[data-density="compact"] { --font-size: 14px; } html[data-density="compact"] .tbl td { padding: .4rem .6rem; } html[data-density="compact"] .card-body { padding: .75rem .9rem; } html[data-density="compact"] .main { padding: 1rem 1.2rem 2rem; }
html[data-ids="show"] [data-id]::after { content: " #" attr(data-id); font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }

/* ---- dashboard widgets ---------------------------------------------------- */
.widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.widget.cols-2 { grid-column: span 2; } .widget.cols-3 { grid-column: span 3; }
.widget .stat { padding: .4rem .2rem; }
@media (max-width: 1100px) { .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .widget.cols-3 { grid-column: span 2; } }
@media (max-width: 800px) { .widgets { grid-template-columns: minmax(0, 1fr); } .widget.cols-2, .widget.cols-3 { grid-column: span 1; } }
.widget { position: relative; min-width: 0; overflow-x: auto; }
.widget > .card-head { padding-right: 5.2rem; }
.w-tools { position: absolute; top: .5rem; right: .5rem; display: flex; gap: 1px; z-index: 2; opacity: .6; transition: opacity .15s; }
.widget:hover .w-tools, .w-tools:focus-within, .w-tools:has(details[open]) { opacity: 1; }
.w-tools:has(details[open]) { z-index: 61; }  /* the open menu above the next card's tools */
@media (hover: none) { .w-tools { opacity: .85; } }
html[data-editmode="off"] .w-tools .menu, html[data-editmode="off"] .star-form { display: inline-block !important; }  /* your own dashboard and stars, not editing */
.w-handle { cursor: grab; letter-spacing: -2px; }
.widget.dragging { opacity: .45; outline: 2px dashed var(--accent); }
.widget-flash { animation: widget-flash 1.6s ease-out; }
@keyframes widget-flash { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .widget-flash { animation: none; } }
.widget-removed { border-style: dashed; background: transparent; }
.widget-removed .card-body { gap: .6rem; }
.widget-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 9rem; border: 2px dashed var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; text-align: center; padding: 1rem; }
.widget-add:hover, .widget-add:focus-visible { border-color: var(--accent); color: var(--ink); }
.widget-add small { max-width: 26ch; }
.gallery-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .4rem; max-height: 60vh; overflow: auto; }
.gallery-list li { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.gallery-list li > :last-child { flex: none; }
.btn.star.on { color: #c58a00; }
.wx-now { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.wx-temp { font-size: 2rem; font-weight: 700; }
.wx-stale { color: #8a6900; }
:root[data-mode="dark"] .wx-stale { color: #e0b84a; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: .32rem; font-weight: 600; font-size: .86rem; color: var(--ink-2); }
fieldset.field label { font-weight: 400; color: var(--ink); display: flex; gap: .45rem; align-items: flex-start; margin: .2rem 0; }

.unreach-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--warn-100); color: #8a6900; }
.unreach-icon svg { width: 32px; height: 32px; } .unreach-icon.auth { background: var(--bad-100); color: var(--bad); } .unreach-icon.missing, .unreach-icon.other { background: var(--info-100); color: var(--navy); }

/* ---- live calculators -------------------------------------------------- */
input.slider { width: 100%; margin-top: .35rem; accent-color: var(--accent); min-height: 0; padding: 0; border: 0; background: transparent; }
.link-dot { color: var(--accent); font-weight: 700; cursor: help; }

.pencil { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ink-3); border: 1px dashed var(--line-2); margin-left: .4rem; vertical-align: middle; }
.pencil svg { width: 13px; height: 13px; } .pencil:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
html[data-editmode="off"] .pencil { display: none; }
.beta-tag { display: inline-block; font-size: .58rem; font-weight: 700; letter-spacing: .06em; padding: .05rem .35rem; border-radius: 4px; border: 1px solid currentColor; opacity: .7; vertical-align: middle; margin-left: .25rem; line-height: 1.3; }
h1 .beta-tag { font-size: .7rem; }
.notif-badge { background: var(--accent); color: #000; border-radius: 999px; font-size: .68rem; font-weight: 700; padding: .05rem .4rem; margin-left: .3rem; }

/* ==========================================================================
   Site reports (inspection module) — built on the same tokens; phone-first.
   ========================================================================== */
.sr-sticky { position: sticky; top: 0; z-index: 15; background: var(--bg); padding: .4rem 0 .6rem; margin: -.6rem 0 1rem; }
.chipbar { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
.chipbar::-webkit-scrollbar { display: none; }
.chipbar .chip { flex: none; white-space: nowrap; }
.sr-head { display: flex; gap: .5rem; align-items: flex-start; }
.sr-head .sr-title { flex: 1; min-width: 0; }
.sr-head h1 { font-size: 1.15rem; margin: 0; }
.sr-head .muted { font-size: .82rem; }
.chip.err { --chip: var(--bad); }
.stat.attn { border-color: var(--accent); }
a.stat, a.pcard-link { color: inherit; display: block; } a.stat:hover, a.pcard-link:hover { text-decoration: none; border-color: var(--line-2); }
.rlist > a { display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); color: inherit; }
.rlist > a:last-child { border-bottom: 0; }
.rlist > a:hover { background: color-mix(in srgb, var(--bg) 50%, var(--card)); text-decoration: none; }
.rlist .rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rlist .rnum { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlist .rmeta { font-size: .84rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcode { width: 42px; height: 42px; border-radius: 8px; background: var(--navy-100); color: var(--navy); font-weight: 700; font-size: .72rem; display: inline-grid; place-items: center; flex: none; letter-spacing: .02em; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.choice-grid label { cursor: pointer; } .choice-grid input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-grid input + span { display: flex; gap: .6rem; align-items: center; padding: .6rem .7rem; border: 2px solid var(--line); border-radius: 8px; background: var(--card); }
.choice-grid input:checked + span { border-color: var(--accent); background: var(--accent-100); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; background: color-mix(in srgb, var(--ink) 8%, var(--bg)); padding: .25rem; border-radius: 8px; }
.seg label { cursor: pointer; } .seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg span { display: block; text-align: center; padding: .5rem .3rem; border-radius: 6px; font-weight: 550; font-size: .92rem; color: var(--ink-2); min-height: 2.4rem; }
.seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg .ok input:checked + span { background: var(--ok); color: #fff; } .seg .bad input:checked + span { background: var(--bad); color: #fff; }
.chip-check { cursor: pointer; } .chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check input:checked + .chip { background: var(--navy); color: #fff; border-color: var(--navy); }
:root[data-mode="dark"] .chip-check input:checked + .chip { color: #14181d; }
.check-row { display: flex; align-items: center; gap: .6rem; min-height: 2.5rem; padding: .4rem .7rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 60%, var(--card)); cursor: pointer; font-weight: 500 !important; }
.unit-wrap { position: relative; } .unit-wrap .unit { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: .85rem; pointer-events: none; }
.unit-wrap input { padding-right: 3.2rem; }
input.is-err, textarea.is-err, select.is-err { border-color: var(--bad) !important; } input.is-flag { border-color: var(--warn) !important; }
.ro { white-space: pre-line; background: color-mix(in srgb, var(--bg) 60%, var(--card)); border-radius: var(--radius-sm); padding: .5rem .7rem; font-size: .95rem; min-height: 2.3rem; }
.ro.fail { color: var(--bad); font-weight: 600; }
.trow { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; padding: .7rem 2.6rem .7rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--bg) 60%, var(--card)); margin-bottom: .5rem; }
.trow .wide { grid-column: 1 / -1; }
.trow label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: .2rem; font-weight: 600; }
.trow .rm { position: absolute; right: .35rem; top: .35rem; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo figcaption { padding: .4rem .5rem; font-size: .82rem; } .photo figcaption input { font-size: .82rem; padding: .3rem .45rem; min-height: 0; }
.upload-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.8rem; padding: .7rem; border: 2px dashed var(--line-2); border-radius: 8px; cursor: pointer; color: var(--ink-2); font-weight: 550; font-size: .92rem; }
.upload-drop:hover { border-color: var(--accent); background: var(--accent-100); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); font-size: .9rem; }
.timeline li { position: relative; margin-bottom: .8rem; }
.timeline li::before { content: ""; position: absolute; left: -1.42rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.timeline li.ok::before { background: var(--ok); } .timeline li.warn::before { background: var(--warn); } .timeline li.info::before { background: var(--navy); }
.wx .field input { min-height: 2.4rem; }

/* phones: hamburger menu + bottom bar */
.sb-menu { display: none; }
.bottom-bar { display: none; }
@media (max-width: 800px) {
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 .4rem; }
  .brand { flex: 1; border: 0; padding: .55rem .5rem; } .brand img { width: 34px; height: 34px; }
  .sb-menu { display: inline-flex; background: transparent; color: var(--sidebar-ink); border-color: color-mix(in srgb, var(--sidebar-ink) 30%, transparent); }
  .sidebar .user { order: 3; margin: 0; padding: .3rem .4rem; border: 0; } .sidebar .user > span:not(.user-who) { display: none; }
  .nav { display: none; order: 4; width: 100%; flex-direction: column; flex-wrap: nowrap; max-height: 70vh; border-top: 1px solid color-mix(in srgb, var(--sidebar-ink) 12%, transparent); }
  .nav .label { display: block; }
  html[data-mobilenav] .nav { display: flex; }
  .bottom-bar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .bottom-bar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem 0 .4rem; font-size: .7rem; color: var(--ink-2); position: relative; }
  .bottom-bar a:hover { text-decoration: none; } .bottom-bar svg { width: 22px; height: 22px; }
  .bottom-bar .plus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #14181d; font-size: 1.5rem; line-height: 1; box-shadow: var(--shadow); }
  .bottom-bar .notif-badge { position: absolute; top: .2rem; right: 22%; }
  .main:has(+ .bottom-bar), body:has(.bottom-bar) .main { padding-bottom: 5.5rem; }
  .sr-sticky { top: 0; }
  .page-head .actions { width: 100%; }
}
@media (max-width: 800px) {
  .grid.stats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .stats .stat { padding: .7rem .6rem; } .stats .stat .v { font-size: 1.3rem; } .stats .stat .k { font-size: .66rem; }
  .filters input:not([type=checkbox]):not([type=radio]), .filters select { width: 100%; min-width: 0; }
}

/* ---- schedule tab: category sub-tabs, draggable bars, inline fee lines ---- */
.tabs.sub { margin-bottom: .9rem; } .tabs.sub a { padding: .45rem .7rem; font-size: .88rem; } .tabs.sub .dot { width: 9px; height: 9px; }
.gantt.draggable .bar, .gantt.draggable .ms { cursor: grab; } .gantt.draggable .bar.dragging, .gantt.draggable .ms.dragging { opacity: .7; cursor: grabbing; }
.gantt .grip { fill: transparent; cursor: ew-resize; } .gantt.draggable .row-link:hover .grip { fill: rgba(0,0,0,.12); } .gantt .grip:hover { fill: rgba(0,0,0,.25); }
.gantt.draggable .bar, .gantt.draggable .ms, .gantt.draggable .grip { touch-action: none; } /* a finger on a bar drags it; elsewhere it scrolls */
.gantt.draggable .bar-progress, .gantt.draggable .bar-label { pointer-events: none; }
.gantt .drag-tip { font-size: 10px; font-weight: 700; fill: #16212b; pointer-events: none; }
details.more-fields { flex-basis: 100%; }
details.more-fields > summary { cursor: pointer; font-size: .85rem; width: max-content; }
details.more-fields > .inline-form { margin-top: .5rem; }
.lines-slot:empty { display: none; } .lines-slot .item-card { margin: 0 0 .6rem .6rem; border-left: 3px solid var(--accent); }
tr.lines-row > td:empty, tr.lines-row:has(.lines-slot:empty) { display: none; }

/* ---- calendar ------------------------------------------------------------ */
.cal { display: flex; flex-direction: column; }
.cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head div { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.cal-day { min-height: 96px; padding: .35rem .4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cal-day:last-child { border-right: 0; } .cal-week:last-child .cal-day { border-bottom: 0; }
.cal-day.out { background: color-mix(in srgb, var(--bg) 60%, var(--card)); } .cal-day.out .n { color: var(--ink-3); }
.cal-day .n { font-size: .82rem; font-weight: 600; } .cal-day.today .n { color: var(--accent); }
.cal-ev { display: block; font-size: .74rem; padding: .1rem .4rem; border-radius: 4px; background: color-mix(in srgb, var(--chip, var(--navy)) 16%, var(--card)); border-left: 3px solid var(--chip, var(--navy)); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { text-decoration: none; background: color-mix(in srgb, var(--chip, var(--navy)) 28%, var(--card)); }
.cal-ev.due { --chip: var(--bad); } .cal-ev.milestone { font-weight: 600; }
@media (max-width: 800px) { .cal-day { min-height: 56px; } .cal-ev { font-size: .66rem; padding: .05rem .25rem; } }

mark.missing { background: var(--bad-100); color: var(--bad); font-weight: 700; padding: 0 .3rem; border-radius: 4px; }
.messages:empty { display: none; }
.sel-add .adder { display: none; } .sel-add.adding .adder { display: flex; }

/* ---- click-to-edit fields -------------------------------------------------- */
.ifields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.2rem; }
.ifield.full { grid-column: 1 / -1; }
.ifield .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; margin-bottom: .15rem; }
.ifield .v { padding: .35rem .5rem; margin: 0 -.5rem; border-radius: var(--radius-sm); min-height: 2rem; white-space: pre-wrap; }
.ifield .v.editable { cursor: text; border: 1px dashed transparent; }
.ifield .v.editable:hover { background: color-mix(in srgb, var(--accent) 10%, var(--card)); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.ifield.editing { background: color-mix(in srgb, var(--accent) 8%, var(--card)); padding: .4rem .5rem; margin: 0 -.5rem; border-radius: var(--radius-sm); }
@media (max-width: 800px) { .ifields { grid-template-columns: 1fr; } }
.cal-day .n { text-decoration: none; color: inherit; } .cal-day .n:hover { color: var(--accent); }
/* shift rosters */
.cal-ev.roster { font-size: .7rem; font-variant-numeric: tabular-nums; }
.roster .card-head h3 { display: flex; align-items: center; gap: .5rem; }
.roster-swatch { width: .75rem; height: .75rem; border-radius: 3px; background: var(--chip); flex: none; }
.roster-grid th.today { color: var(--accent); }
.roster-grid td.roster-cell { padding: .3rem .4rem; min-width: 6.5rem; }
.roster-grid td.roster-cell select { width: 100%; padding: .25rem .3rem; font-size: .84rem; }
.roster-cell.day { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.roster-cell.afternoon { background: color-mix(in srgb, var(--ok) 13%, var(--card)); }
.roster-cell.night { background: color-mix(in srgb, var(--navy) 16%, var(--card)); }
/* project health badges (pm) */
.badge.u-on_track { background: var(--ok-100); color: var(--ok); } .badge.u-at_risk { background: var(--warn-100); color: #8a6900; } .badge.u-off_track { background: var(--bad-100); color: var(--bad); }
@media print { .print-only { display: block !important; } .report-row { break-inside: avoid; } }
.update + .update { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; } .update p { margin: .35rem 0; }
.badge.h-done { background: var(--ok-100); color: var(--ok); } .badge.h-overdue { background: var(--bad-100); color: var(--bad); }
.badge.h-behind, .badge.h-due_soon { background: var(--warn-100); color: #8a6900; } .badge.h-on_track { background: var(--info-100); color: var(--navy); }
.badge.h-upcoming, .badge.h-not_started, .badge.h-unscheduled { background: color-mix(in srgb, var(--ink) 7%, var(--card)); color: var(--ink-2); }
.roster-cell.unsaved { box-shadow: inset 0 0 0 2px var(--bad); }
.cal-ev.event-own { border-left-style: double; border-left-width: 5px; }

/* Staff codes (DRh): the full name shows on hover */
abbr.staff { text-decoration: none; font-weight: 600; letter-spacing: .01em; cursor: help; border-bottom: 1px dotted var(--line); }
abbr.staff-office { border-bottom: 2px solid var(--av); }  /* the office colour, as on avatars */
:root[data-mode="dark"] abbr.staff-office { border-bottom-color: color-mix(in srgb, var(--av) 65%, white); }

/* Type-ahead inputs (templates/includes/typeahead.html) */
.ta { position: relative; }
.ta-input { width: 100%; }
.ta-list:empty { display: none; }
.ta-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 45; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(16,33,43,.14); padding: .3rem; max-height: 320px; overflow-y: auto; }
.ta-list .ta-opt, .ta-list .ta-new { display: flex; width: 100%; align-items: baseline; gap: .5rem; text-align: left; padding: .5rem .65rem; border: 0; background: none; font: inherit; color: var(--ink); border-radius: 6px; cursor: pointer; }
.ta-list .ta-opt small { margin-left: auto; }
.ta-list .ta-opt:hover, .ta-list .ta-opt.active, .ta-list .ta-new:hover, .ta-list .ta-new.active { background: var(--bg); }
.ta-list .ta-new { color: var(--navy); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: .2rem; }
.ta-list .ta-empty { padding: .5rem .65rem; }
.ta-confirm { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 46; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(16,33,43,.14); padding: .5rem; }
.ta-confirm .ta-opt { display: flex; width: 100%; align-items: baseline; gap: .5rem; text-align: left; padding: .45rem .6rem; border: 0; background: none; font: inherit; color: var(--ink); border-radius: 6px; cursor: pointer; }
.ta-confirm .ta-opt:hover { background: var(--bg); }
.ta-confirm .ta-opt small { margin-left: auto; }
.ta-confirm p { margin: .1rem .3rem .4rem; font-size: .9rem; }
.ta.ta-unpicked .ta-input { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-100); }
.ta.ta-unpicked::after { content: "Pick one from the list, or add it as new."; display: block; font-size: .8rem; color: var(--ink-2); margin-top: .25rem; }

/* Versions & reviews (reviews/) */
.badge.rv-approved { background: var(--ok-100); color: #1f7a50; }
.badge.rv-in_review { background: #ece6f7; color: #5c3f9e; }
.badge.rv-draft { background: #eef0f3; color: #4d5b68; }
.badge.rv-returned { background: var(--warn-100); color: #8a6900; }
.badge.rv-replaced, .badge.rv-discarded { background: transparent; color: var(--ink-3); border: 1px solid var(--line-2); }
.rv-media { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.rv-media figure { margin: 0; width: 120px; }
.rv-media img { width: 120px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.rv-media figcaption { font-size: .78rem; color: var(--ink-3); overflow-wrap: anywhere; }
.rv-sep { color: var(--ink-3); }
.rv-diff td { vertical-align: top; }
.rv-diff .rv-before { color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); }
.rv-inline del { background: var(--bad-100); color: var(--ink); text-decoration-color: var(--bad); }
.rv-inline ins { background: var(--ok-100); color: var(--ink); text-decoration: none; }
.rv-log { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .9rem; }
.rv-log li { border-left: 3px solid var(--line-2); padding-left: .6rem; }
.rv-decide { border-top: 1px solid var(--line); padding-top: .75rem; }
.widget .form-grid { grid-template-columns: minmax(0, 1fr); }

/* ---- sortable lists and saved defaults (core/lists.py) ------------------------------------- */
.th-sort { all: unset; cursor: pointer; display: inline-flex; gap: .3rem; align-items: center; font: inherit; color: inherit; }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.th-arrow { font-size: .7em; color: var(--ink-3); } .th-sort.on .th-arrow { color: var(--ink); }
.sort-select { width: auto; }
.list-default { display: inline-flex; gap: .3rem; align-items: center; font-size: .85rem; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.seg-opt { position: relative; display: inline-flex; align-items: center; padding: .3rem .65rem; cursor: pointer; font-size: .86rem; margin: 0; }
.filters .seg-opt input, .seg-opt input { position: absolute; inset: 0; opacity: 0; width: 1px; height: 1px; min-width: 0; pointer-events: none; }
.seg-opt:has(input:checked) { background: var(--navy-100); font-weight: 600; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-editmode="off"] .list-default button { display: inline-flex !important; }

/* ---- connectivity (static/js/connectivity.js) ------------------------------------------------ */
.user-who { position: relative; display: inline-flex; flex: none; }
.net-dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--sidebar-bg); }
html[data-net="offline"] .net-dot { background: var(--bad); }
html[data-net="unreachable"] .net-dot { background: var(--warn); }
.net-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; margin-inline: auto; width: fit-content; max-width: 36rem; z-index: 90; padding: .6rem 1rem; border-radius: 1.2rem; font-size: .9rem; font-weight: 600; box-shadow: var(--shadow); text-align: center; }
.net-banner.idle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; box-shadow: none; }  /* out of sight, still a live region */
@media (max-width: 800px) { .net-banner { bottom: calc(4.2rem + env(safe-area-inset-bottom)); } }
.net-banner.offline { background: var(--bad-100); color: var(--ink); border: 1px solid var(--bad); }
.net-banner.unreachable { background: var(--warn-100); color: var(--ink); border: 1px solid var(--warn); }
.net-banner.ok { background: var(--ok-100); color: var(--ink); border: 1px solid var(--ok); }
.sidebar .user > .user-who { overflow: visible; }
.sidebar .user > span:not(.user-who) { flex: 1; }

/* ---- change log and undo (core/changelog.py) ------------------------------------------------- */
.undo-toast { position: fixed; left: 1rem; bottom: 1rem; z-index: 95; display: none; align-items: center; gap: .6rem; max-width: min(34rem, calc(100vw - 2rem)); padding: .5rem .6rem .5rem 1rem; border-radius: 1rem; background: var(--navy); color: #fff; box-shadow: var(--shadow); font-size: .9rem; }
.undo-toast.on { display: flex; }
.undo-toast > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-toast form { margin: 0; }
.undo-toast .btn { background: #fff; color: var(--navy); border-color: transparent; }
.undo-toast .btn-ghost { background: transparent; color: #fff; }
:root[data-mode="dark"] .undo-toast { color: #14181d; } :root[data-mode="dark"] .undo-toast .btn-ghost { color: #14181d; }
:root[data-mode="dark"] .undo-toast .btn:not(.btn-ghost) { color: #14181d; background: #fff; }
@media (max-width: 800px) { .undo-toast { bottom: calc(4.2rem + env(safe-area-inset-bottom)); } }
.change-batch.undone { opacity: .6; }
a.seg-opt { text-decoration: none; color: inherit; } a.seg-opt.on { background: var(--navy-100); font-weight: 600; }

/* ---- the fee sheet (proposals/feesheet.py): quiet, spreadsheet-like ----------------------------- */
.fee-sheet-card .card-head { align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sheet-tools { gap: .6rem; flex-wrap: wrap; }
.sheet-tools label { margin: 0; font-size: .85rem; }
.sheet { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sheet th { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); text-align: left; padding: .5rem .45rem; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; }
.sheet td { padding: .1rem .2rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
.sheet .num { text-align: right; }
.sheet tbody tr:hover { background: color-mix(in srgb, var(--accent-100) 35%, transparent); }
.sheet .c-code { width: 2.4rem; text-align: center; font-size: .8rem; }
.sheet .c-memo { min-width: 18rem; }
.sheet .c-cat { width: 11rem; min-width: 9.5rem; }
.sheet .c-h, .sheet .c-person { width: 5.6rem; min-width: 5.6rem; }
.sheet .c-fee, .sheet .c-exp { width: 7.5rem; padding-right: .6rem; white-space: nowrap; }
.sheet .c-act { width: 2.2rem; }
.sheet input.cell, .sheet select.cell { height: auto; }
.sheet .cell { width: 100%; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 4px; padding: .38rem .4rem; font: inherit; color: inherit; box-shadow: none; }
.sheet .cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .cell:hover { border-color: var(--line); }
.sheet .cell:focus { border-color: var(--accent); background: var(--card); outline: none; box-shadow: 0 0 0 2px var(--accent-100); }
.sheet select.cell { appearance: none; -webkit-appearance: none; cursor: pointer; padding-left: 1.1rem; background: radial-gradient(circle at .5rem 50%, var(--chip, #9aa5b1) .22rem, transparent .26rem); font-size: .86rem; color: var(--ink-2); }
.sheet .c-person { border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sheet th.c-person { text-align: right; }
.person-head { display: flex; justify-content: flex-end; align-items: center; gap: .1rem; text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--ink); }
.sheet input.sheet-rate, .sheet-tools input.sheet-rate { width: 4.6rem; min-width: 0; height: auto; text-align: right; font-size: .8rem; font-weight: 500; padding: .12rem .3rem; border: 1px solid transparent; background: transparent; border-radius: 4px; color: var(--ink-2); box-shadow: none; }
.sheet input.sheet-rate:hover, .sheet input.sheet-rate:focus, .sheet-tools input.sheet-rate:hover, .sheet-tools input.sheet-rate:focus { border-color: var(--line-2); background: var(--card); }
.sheet tfoot td { border-top: 1px solid var(--line-2); border-bottom: 0; padding: .55rem .45rem; font-variant-numeric: tabular-nums; }
.sheet .sheet-new td { border-bottom: 0; }
.sheet .sheet-new .memo::placeholder { color: var(--ink-3); }
.sheet .has-error .err { display: block; font-size: .78rem; padding: 0 .4rem .2rem; }
.sheet .sheet-detail > td { background: var(--bg); padding: .6rem; }
.sheet-empty { border-bottom: 1px solid var(--line); }
.sheet-note { margin: .5rem 1rem .8rem; font-size: .82rem; }
.sheet-add-person { width: auto !important; min-width: 0 !important; font-size: .86rem; }
html[data-editmode="off"] .sheet-new, html[data-editmode="off"] .sheet-tools, html[data-editmode="off"] .person-head button, html[data-editmode="off"] .sheet .c-act { display: none !important; }
html[data-editmode="off"] .sheet .cell, html[data-editmode="off"] .sheet .sheet-rate { pointer-events: none; }  /* view mode: the sheet reads, it doesn't edit */
.fee-sheet-card > .table-wrap { overflow-x: auto; }
.sheet .multi { display: inline-block; padding: .38rem .45rem; color: var(--ink-2); cursor: help; }

/* ---- services ticked on a project sheet, edited in place (proposals/widgets.py) ------------------- */
.service-checks li { display: flex; align-items: center; gap: .3rem; }
.service-checks label { flex: 1; min-width: 0; }
.svc-tools { display: inline-flex; align-items: center; gap: 1px; }
.svc-retired { color: var(--ink-3); font-size: .78rem; }
.svc-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .82rem; color: var(--ink-2); }
.svc-rename { display: none; }
.service-option.editing .svc-name, .service-option.editing .svc-tools > button { display: none; }
.service-option.editing .svc-rename { display: inline-block; width: 14rem; padding: .2rem .4rem; }
.service-add input { width: 100%; max-width: 18rem; padding: .3rem .5rem; border: 1px dashed var(--line-2); background: transparent; }
.service-checks .err { font-size: .78rem; }

/* ---- edit tools that show on hover, for a clean list: service rows (Services page, project sheets) -- */
.svc-tools, .hover-tools { opacity: 0; transition: opacity .12s; }
.service-option:hover .svc-tools, .service-option:focus-within .svc-tools, .service-option.editing .svc-tools,
.hover-row:hover .hover-tools, .hover-row:focus-within .hover-tools, .hover-tools:has(details[open]) { opacity: 1; }
@media (hover: none) { .svc-tools, .hover-tools { opacity: 1; } }  /* touch: nothing to hover, always shown */
.hover-tools { display: inline-flex; align-items: center; gap: 1px; }
tr.retired > td:not(.row-actions) { opacity: .55; }
.rename-impact { font-size: .86rem; color: var(--ink-2); border-left: 3px solid var(--line); padding: .3rem .7rem; margin: .2rem 0 .4rem; }
.rename-impact p { margin: .2rem 0; }
.rename-impact ul { margin: .1rem 0 .4rem; padding-left: 1.1rem; }
.name-changes { list-style: none; margin: 0; padding: .4rem 1rem .8rem; font-size: .86rem; }
.name-changes li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.name-changes li:last-child { border-bottom: 0; }
.name-history { margin-top: .4rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.name-history .name-changes { padding: .2rem .7rem .5rem; }
.name-history-head { display: flex; align-items: center; justify-content: space-between; padding: .3rem .4rem 0 .7rem; font-size: .82rem; }
.name-history p { margin: .2rem .7rem .5rem; font-size: .86rem; }

/* ---- country / region pickers (core/places.py) ---- */
.place-select { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.place-select select { flex: 1 1 12rem; min-width: 0; }
.place-number { font-family: var(--mono, ui-monospace, monospace); font-weight: 650; padding: .3rem .6rem; border-radius: 6px; background: var(--paper-2, rgba(0,0,0,.04)); white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl.places .place-country td { background: color-mix(in srgb, var(--ink) 3%, transparent); font-weight: 600; }
.tbl.places .place-sub td:first-child { padding-left: 1.6rem; }
.staff-mix input { padding: .2rem .4rem; }

/* ---- schedule planned from the fee hours (scheduling/autoplan.py) ---- */
.plan-bar .card-body { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; padding: .6rem 1rem; }
.plan-start { display: flex; align-items: center; gap: .4rem; margin: 0; }
.plan-start label { font-size: .8rem; color: var(--ink-3); }
.plan-start input { width: auto; }
.plan-mix { font-size: .8rem; flex: 1 1 18rem; }
.people-cell { min-width: 9rem; }
.people-cell .person-chip { display: inline-block; margin: 0 .2rem .2rem 0; }
.people-cell .chip { cursor: pointer; list-style: none; }
.people-cell .chip::-webkit-details-marker { display: none; }
.swap-list { max-height: 18rem; overflow-y: auto; min-width: 14rem; }
.menu-note { padding: .3rem .7rem; font-size: .75rem; }
.spinner { display: inline-block; width: .9em; height: .9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tv-spin .8s linear infinite; vertical-align: -.1em; margin-right: .4rem; }
@keyframes tv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---- phones (David, 2026-10-31: the schedule and others weren't usable on a phone) ---- */
.mini-tl { display: none; }
.gantt-toggle > summary { display: none; }
@media (max-width: 800px) {
  /* one row of tabs that scrolls sideways, not five rows of them */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: .55rem .7rem; }
  .tabs.sub .spacer { display: none; }
  .page-head .actions { flex-wrap: wrap; gap: .4rem; }
  .card-head, .card-body { padding-left: .9rem; padding-right: .9rem; }

  /* a table of records becomes a list of cards: name first, the rest labelled underneath */
  /* child combinators only: a table opened inside a card (a row's lines) keeps its own layout */
  .tbl.cards-sm > thead { display: none; }
  .tbl.cards-sm, .tbl.cards-sm > tbody { display: block; }
  .tbl.cards-sm > tbody > tr:not(.lines-row) { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
  .tbl.cards-sm > tbody > tr:not(.lines-row) > td { display: block; border: 0; padding: 0; text-align: left; }
  .tbl.cards-sm > tbody > tr:not(.lines-row) > td.hide-sm { display: none; }
  .tbl.cards-sm > tbody > tr > td[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; margin-right: .2rem; }
  .tbl.cards-sm > tbody > tr.lines-row, .tbl.cards-sm > tbody > tr.lines-row > td { display: block; }

  /* schedule: each row a card with its own strip of the timeline; the full chart one tap away */
  .tbl.sched-table > tbody > tr.sched-row > td:first-child { display: none; }
  .tbl.sched-table > tbody > tr.sched-row > td:nth-child(2) { flex: 1 1 0; min-width: 55%; order: -2; }
  .tbl.sched-table > tbody > tr.sched-row > td.row-actions { order: -1; margin-left: auto; white-space: nowrap; width: auto; flex: none; display: flex; gap: .3rem; }
  .tbl.sched-table > tbody > tr.sched-row > td:nth-child(3) ~ td:not(.row-actions):not(.people-cell) { font-size: .9rem; }
  .sched-table .people-cell { flex: 1 1 100%; min-width: 0; }
  .mini-tl { display: block; position: relative; height: 6px; margin-top: .45rem; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .mini-tl i { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 4px; }
  .mini-tl i.ms { width: 8px !important; height: 8px; top: -1px; border-radius: 1px; transform: rotate(45deg); }
  .gantt-toggle > summary { display: inline-flex; margin-bottom: .6rem; }
  .gantt-toggle .gantt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .plan-bar .card-body { padding: .6rem .9rem; }

  /* fee sheet: the memo stays put while the hours scroll under it */
  .fee-sheet-card .sheet .c-memo { position: sticky; left: 0; z-index: 1; background: var(--card); min-width: 11rem; max-width: 55vw; }
  .fee-sheet-card .sheet .c-code { display: none; }
  .fee-sheet-card .sheet .c-cat { min-width: 8rem; }

  /* lists: drop the columns a phone has no room for */
  .tbl .hide-sm, .tbl th.hide-sm { display: none; }
  .filters, .list-filters { gap: .4rem; }
}
@media (max-width: 800px) {
  .tbl.proposal-table > tbody > tr.prow > td.p-title { flex: 1 1 0; min-width: 60%; order: -2; }
  .tbl.proposal-table > tbody > tr.prow > td.p-no { order: -1; font-size: .78rem; color: var(--ink-3); }
}

/* view mode (edit mode off): planned people stay readable, the plan's controls go */
.edit-off-only { display: none; }
html[data-editmode="off"] .edit-off-only { display: inline; }
html[data-editmode="off"] .plan-bar form { display: none !important; }
html[data-editmode="off"] .people-cell .person-chip { display: inline-block !important; }
html[data-editmode="off"] .person-chip > summary { pointer-events: none; }
html[data-editmode="off"] .person-chip > .menu-items { display: none !important; }

/* ---- rates across offices (proposals/rates.py) ---- */
.rate-grid td small, .xo-grid td small { display: block; }
.rate-cell { margin: 0; display: inline-block; }
.rate-cell input { width: 5.5rem; text-align: right; padding: .25rem .4rem; }
.rate-cell input::placeholder { color: var(--ink-3); }
.rate-grid .team-row td { border-top: 2px solid var(--line); }
.xo-bad, .xo-bad-key { background: color-mix(in srgb, var(--bad) 14%, transparent); }
.xo-warn, .xo-warn-key { background: color-mix(in srgb, var(--warn) 18%, transparent); }
.xo-bad-key, .xo-warn-key { padding: 0 .3rem; border-radius: 3px; }
.xo-card .xo-row { display: flex; flex-wrap: wrap; gap: .2rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.xo-card .xo-row:last-child { border-bottom: 0; }
.xo-slot:empty { display: none; }
.chip.chip-away { border-style: dashed; }

/* Planned sections in the side panel: visible, not clickable. */
.nav .nav-soon { display: flex; align-items: center; gap: .65rem; padding: .58rem .7rem; color: var(--sidebar-ink); font-size: .95rem; opacity: .45; cursor: default; }
.nav .nav-soon svg { width: 19px; height: 19px; flex: none; }
.nav .nav-soon > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-sidebar="collapsed"] .nav .nav-soon { display: none; }

/* Back button (static/js/back.js): sits at the top-left of the page heading. */
.back-btn { display: inline-flex; align-items: center; gap: .25rem; margin: 0 0 .35rem -.35rem; padding: .2rem .5rem .2rem .3rem; border: 0; border-radius: 6px; background: none; color: var(--ink-3); font: inherit; font-size: .85rem; cursor: pointer; }
.back-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.back-btn svg { width: 16px; height: 16px; }
.page-head > div:first-child > .back-btn { display: flex; width: max-content; }
.back-btn[hidden] { display: none !important; }
.members-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .4rem .6rem; }

/* New proposal: number typed over the preview, the fee's starting point, quick start dates */
.place-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.place-row .place-select { flex: 1 1 22rem; min-width: 0; }
.place-row [hidden] { display: none; }
.place-row .seq-input { flex: 0 0 6rem; width: 6rem; font-family: var(--mono, ui-monospace, monospace); }
.fee-start .lbl { font-size: .86rem; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; }
.fee-start-boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: .6rem; }
@media (max-width: 800px) { .fee-start-boxes { grid-template-columns: minmax(0, 1fr); } }
.fs-box { border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); padding: .6rem; background: var(--card); }
.field .chip-check { display: inline-flex; margin: 0; font-weight: 400; }
.fs-box .chip, .date-quick .chip { font-size: .82rem; padding: .3rem .7rem; cursor: pointer; }
.stepper { display: flex; align-items: center; gap: .3rem; }
.stepper input { width: 4.2rem; text-align: center; }
.stepper .btn { min-width: 2.4rem; justify-content: center; font-size: 1.1rem; }
.date-quick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.date-quick input { flex: 0 1 11rem; }
button.chip { font: inherit; }

/* People & rates (proposals/library.html): one quiet line per person; rates masked until asked for. */
.people-filters { padding: .8rem 1rem 0; margin-bottom: .6rem; }
.people-filters input[type=search] { flex: 1 1 260px; }
.people-list { list-style: none; margin: 0; padding: 0; }
.person-row { display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; padding: .55rem 1rem; border-top: 1px solid var(--line); }
.person-row.inactive { opacity: .5; }
.person-row .pr-who { flex: 1 1 220px; min-width: 0; }
.person-row .pr-meta { flex: 1 1 220px; color: var(--ink-3); font-size: .88rem; }
.person-row .pr-rate { margin-left: auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.person-row .pr-rate button { border: 0; background: none; font: inherit; color: var(--ink-3); cursor: pointer; padding: .2rem .4rem; border-radius: 6px; letter-spacing: .12em; }
.person-row .pr-rate button:hover { background: var(--bg); color: var(--ink); }
.person-row .pr-val { display: none; letter-spacing: 0; }
.person-row.revealed .pr-val, .show-rates .person-row .pr-val { display: inline; color: var(--ink); }
.person-row.revealed .pr-mask, .show-rates .person-row .pr-mask { display: none; }
.person-row .fx { margin-left: .3rem; }
.person-row .row-actions { display: flex; gap: .3rem; }
.person-row.editing { display: block; }
.people-empty { padding: 1rem; }
@media (max-width: 640px) {
  .person-row { padding: .6rem .8rem; }
  .person-row .pr-meta { flex-basis: 100%; order: 3; }
  .person-row .pr-rate { margin-left: 0; white-space: normal; text-align: left; min-width: 0; }  /* rate, ≈ amount, cost and badge wrap at phone width */
}