/* Shared design system for LTC Operations and LTC Workspace — calm, legible,
   production-friendly. Both apps load this file at /style.css (single source of
   truth); Workspace layers /workspace/workspace.css on top and never edits this
   file. Colours come from the LTC brand sheet via the CSS variables below. */
:root {
  --bg: #101418; --panel: #1a2027; --panel2: #222a33; --line: #2e3844; --line-soft: rgba(46,56,68,.55);
  /* Accents derive from the LTC brand sheet (owner 2026-07-23): Blue #3777bc,
     Yellow #faa73f, Red #f15355 lead; the dark theme lightens the blue only
     as far as legibility on dark panels demands. */
  --text: #e8edf2; --dim: #93a1b0; --accent: #649cd8; --accent2: #faa73f;
  --ok: #62c48e; --warn: #faa73f; --bad: #f15355; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  /* shared height for top-bar controls (view-as select, $ toggle) */
  --control-h: 36px;
  /* LTC brand palette (from the design spec / icon) — used for charts. */
  --ltc-orange: #faa73f; --ltc-blue: #3777bc; --ltc-red: #f15355;
  --ltc-gray: #b5cede; --ltc-steel: #5787aa; --ltc-navy: #32627e;
  --ltc-green: #22cc44; --ltc-teal: #2bb3a3; --ltc-purple: #8a6cf0;
}
/* Light appearance (per-user preference; dark is the default). Brand blue is
   used exactly; yellow/red darken just enough to stay readable on white. */
:root[data-theme="light"] {
  --bg: #f3f5f8; --panel: #ffffff; --panel2: #eef1f5; --line: #d7dde5; --line-soft: rgba(199,207,217,.7);
  --text: #1a222c; --dim: #5c6b7a; --accent: #3777bc; --accent2: #a96e12;
  --ok: #2e9e63; --warn: #a96e12; --bad: #d8433c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, "SF Pro Text", Helvetica, Arial, sans-serif; }
#topbar[hidden] { display: none; }
#topbar { display: flex; align-items: center; gap: 18px; padding: 10px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-size: 15px; display: flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none; }
.line-del:hover { border-color: var(--bad); color: var(--bad); }
.ph-clear:hover { border-color: var(--bad); color: var(--bad); }
h2 .addbtn { float: right; }
.brand .logo { width: 22px; height: 22px; }
.login-logo { width: 64px; height: 64px; vertical-align: -14px; margin-right: 10px; }
.pilot-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent2); color: #222; border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
/* pill-shaped module buttons in the top navigation */
#nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#topbar nav a { color: var(--dim); text-decoration: none; font-size: 13px;
  padding: 4px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel2); white-space: nowrap; }
#topbar nav a:hover { color: var(--text); border-color: var(--accent); }
#topbar nav a.active { background: var(--accent); border-color: var(--accent);
  color: #0d1218; font-weight: 600; }
#topbar nav a.mod-dev { opacity: .4; cursor: not-allowed; }
#topbar nav a.mod-dev:hover { color: var(--dim); border-color: var(--line); }
.spacer { flex: 1; }
.brand strong { white-space: nowrap; }
/* Account name button → sign-out popup */
.user-wrap { position: relative; }
/* The whole chip is the account button (change password / sign out) — outlined
   so it reads as pressable, and sharing --control-h with every other top-bar
   control. While previewing another account it turns amber to match the
   impersonation banner, so the blue never implies "this is really you". */
#whoami.whoami-btn { color: var(--text); background: transparent;
  border: 1px solid var(--accent); border-radius: 8px; padding: 0 12px; cursor: pointer;
  white-space: nowrap; height: var(--control-h); box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 2px; }
#whoami.whoami-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
#whoami.whoami-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); }
body.impersonating #whoami.whoami-btn { border-color: var(--accent2); }
#whoami .role { font-size: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; }
.user-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px;
  min-width: 140px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.user-menu[hidden] { display: none; }
.user-menu .menu-item { display: block; width: 100%; text-align: left; background: transparent;
  border: none; border-radius: 6px; padding: 8px 12px; color: var(--text); cursor: pointer; }
.user-menu .menu-item:hover { background: var(--panel2); }
/* Fluid width (owner 2026-07-21): pages use the whole window when it's wide. */
main { max-width: none; margin: 0 auto; padding: 14px 24px 80px; }

/* One page-title style everywhere: same size, same weight, same rhythm
   under the nav bar (Projects, People, Clients, Schedule, Time Clock,
   Activity Log, Settings, and project detail). */
.page-head h1, .sched-head h1, .proj-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }

button { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit; }
button:hover { border-color: var(--accent); }
button.ghost { background: transparent; }
button.small { padding: 2px 8px; font-size: 12px; }

/* login */
.login-wrap { max-width: 560px; margin: 10vh auto; text-align: center; }
.login-wrap h1 { font-weight: 600; }
.login-fulllogo { display: block; width: min(320px, 70vw); height: auto; margin: 0 auto 4px; }
.login-appname { font-size: 20px; font-weight: 600; letter-spacing: .02em; color: var(--fg); margin-bottom: 4px; }
.login-cards { display: flex; gap: 16px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 26px; width: 240px; cursor: pointer; text-align: left; }
.login-card:hover { border-color: var(--accent); }
.login-card .who { font-size: 16px; font-weight: 600; }
.login-card .what { color: var(--dim); margin-top: 6px; font-size: 13px; }
.login-note { color: var(--dim); font-size: 12px; margin-top: 26px; }
.login-form { max-width: 340px; margin: 28px auto 0; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px 26px; }
.login-form label { display: block; font-size: 12px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 5px; }
.login-form label:first-child { margin-top: 0; }
.login-form input { width: 100%; box-sizing: border-box; }
.login-form button.primary { width: 100%; margin-top: 20px; }
.login-msg { min-height: 1.2em; font-size: 13px; margin-top: 12px; color: var(--bad); }
/* Presence dot — someone currently online (People page). */
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--good, #3fb950); margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--good, #3fb950) 30%, transparent); }
.gal-actions { margin-top: 10px; }
/* People → Permissions grid */
.pm-grid { width: 100%; border-collapse: collapse; }
.pm-grid th, .pm-grid td { text-align: left; padding: 9px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.pm-grid thead th { border-top: none; color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pm-grid th.sortable { cursor: pointer; }
.pm-grid tr.subgroup td { background: var(--panel); font-weight: 600; padding: 6px 12px; }
.pm-grid tr.subgroup .g-count { color: var(--dim); font-weight: 400; margin-left: 6px; }
/* match the app's normal pull-down look (unstyled, these render as native
   OS selects with a heavy blue outline) */
.pm-grid select { font-size: 13px; max-width: 200px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.pm-grid select:hover { border-color: var(--dim); }
.pm-grid select:focus { border-color: var(--accent); outline: none; }
.pm-acc-list { display: flex; flex-direction: column; gap: 5px; }
.pm-acc-item, .pm-acc-add { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.pm-acc-add { margin-top: 4px; }
/* slot 1 (project code / "grant a project" picker) and slot 2 (access level)
   share fixed widths so the level pull-downs and buttons line up in columns */
.pm-acc-proj { font-family: var(--mono); font-size: 12px; width: 200px; flex: none; }
.pm-acc-add .pm-add-proj { width: 200px; flex: none; }
.pm-acc-item select.pm-lvl, .pm-acc-add select.pm-add-lvl { width: 130px; flex: none; }
.pm-acc-lvl { color: var(--dim); width: 130px; flex: none; }
.pm-remove { font-size: 12px; padding: 2px 8px; color: var(--dim); }
.pm-remove:hover { color: var(--bad); border-color: var(--bad); }
.pm-name .pm-dot { display: inline-block; width: 16px; vertical-align: middle; }
.pm-name .pm-dot .online-dot { margin-right: 0; }
.pm-name.pm-indent { padding-left: 30px; }

/* tables */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; color: var(--dim); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(55,119,188,.08); }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 22px; overflow-x: auto; }
.section h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.section h2 .sub { color: var(--dim); font-weight: 400; font-size: 13px; margin-left: 8px; }

.badge { display: inline-block; font-size: 11px; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.badge.Active { background: rgba(98,196,142,.18); color: var(--ok); }
.badge.Pending { background: rgba(250,167,63,.18); color: var(--warn); }
.badge.Complete { background: rgba(55,119,188,.24); color: var(--accent); }
.badge.Cancelled, .badge.Rejected { background: rgba(241,83,85,.16); color: var(--bad); }
.badge.Approved { background: rgba(98,196,142,.18); color: var(--ok); }
.badge.In-development { background: rgba(55,119,188,.24); color: var(--accent); }
.badge.Submitted { background: rgba(250,167,63,.18); color: var(--warn); }
.flag { color: var(--bad); font-size: 12px; font-family: var(--mono); }
.flag.warn { color: var(--warn); }
.muted { color: var(--dim); }

/* project header */
.proj-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.proj-head h1 { margin: 0; }
.kpis { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 22px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; min-width: 160px; }
.kpi .label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.kpi .value { font-size: 20px; font-family: var(--mono); margin-top: 4px; }
.kpis .push { flex: 1; }
.kpi-fees { min-width: 250px; }
.fee-comp { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.fee-comp .pie { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.fee-comp .legend { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim); }
.fee-comp .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

/* project summary tab */
.summary-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .summary-grid { grid-template-columns: 1fr; } }
.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14px; }
.detail-list dt { color: var(--dim); }
.detail-list dd { margin: 0; }
.detail-list dd.ied-detail { cursor: pointer; border-radius: 4px; }
.detail-list dd.ied-detail:hover { outline: 1px dashed var(--accent); outline-offset: 2px; }
.detail-list dd input, .detail-list dd select { background: var(--panel2); color: var(--text);
  border: 1px solid var(--accent); border-radius: 4px; font: inherit; padding: 2px 5px; width: 100%; max-width: 220px; }
.client-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.client-head img { height: 40px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px 5px; }
.client-head .cname { font-size: 16px; font-weight: 600; }
.sum-kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.pie-lg { width: 96px; height: 96px; border-radius: 50%; flex: none; }
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.bar-track { background: var(--panel2); border-radius: 4px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-row .bar-val { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.section.breakdown { margin-top: 22px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.bd-panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim);
  font-weight: 600; margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
.bd-panel h3 .bd-total { font-family: var(--mono); font-size: 13px; color: var(--text); letter-spacing: 0; text-transform: none; }
.bd-panel .bar-row { grid-template-columns: 150px 1fr auto; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--dim); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { border-radius: 6px 6px 0 0; border-bottom: none; color: var(--dim); }
.tabs button.active { color: var(--text); border-color: var(--accent); }

/* editable cells */
td.edit { cursor: text; }
td.edit:hover { outline: 1px dashed var(--accent); outline-offset: -3px; }
td input, td select { width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--accent); border-radius: 4px; font: inherit; padding: 3px 5px; }
td.num input { text-align: right; font-family: var(--mono); }
.ovr { color: var(--accent2); cursor: pointer; }
.ovr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); margin-left: 6px; vertical-align: 1px; }
.cost-cell { cursor: pointer; }
.cost-cell:hover { outline: 1px dashed var(--accent2); outline-offset: -3px; }
/* keyboard-navigated grid cell */
td.cell-focus { outline: 2px solid var(--accent); outline-offset: -2px; }
#budget-grid td[data-field] { outline: none; }
#budget-grid td[data-field]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Budget group (Direct/Indirect/Reimbursable) badge — reimbursable stands out. */
.grp-badge { display: inline-block; font-size: 11px; border-radius: 999px; padding: 1px 9px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim); }
.grp-badge.reimb { background: color-mix(in srgb, var(--ltc-teal) 22%, transparent);
  border-color: var(--ltc-teal); color: var(--ltc-teal); font-weight: 600; }
tr.reimb-line td[data-cost] { box-shadow: inset 3px 0 0 var(--ltc-teal); }
.group-row td { background: var(--panel2); font-weight: 600; border-top: 1px solid var(--line); }
tr.sp-head td { background: var(--panel2); }
tr.ph-head td { background: rgba(34,42,51,.5); font-weight: 500; }
tr.ph-head .grp-indent { padding-left: 18px; color: var(--dim); }
tr.ph-head .grp-indent::before { content: '↳ '; color: var(--line); }
tr.group-row[data-collapse] { cursor: pointer; }
tr.group-row .chev { display: inline-block; width: 14px; color: var(--dim); transition: transform .12s; }
tr.group-row.open .chev { transform: rotate(90deg); }
td.bg-indent { padding-left: 26px; }
tr.panel-total td { background: var(--panel); border-bottom: 2px solid var(--line); font-weight: 600; color: var(--dim); }
.bg-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.bg-filters .bg-crit { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12px; max-width: 200px; }
.bg-filter { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 9px; font: inherit; font-size: 12px; width: 150px; margin-left: auto; }
h2 .panel-add { float: right; }
.note-banner { background: rgba(55,119,188,.10); border: 1px solid rgba(55,119,188,.40);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; color: var(--dim); font-size: 13px; }
.note-banner strong { color: var(--text); }

/* Sandbox projects: practice space the team can experiment in. The badge and
   banner exist so nobody mistakes test data for real work, and the banner is
   where the (deliberately two-step) purge lives. */
.badge.sandbox { background: rgba(208,82,192,.18); color: #d052c0; font-weight: 700; letter-spacing: .06em; }
.sandbox-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: rgba(208,82,192,.10); border: 1px solid rgba(208,82,192,.40);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 18px;
  color: var(--dim); font-size: 13px; }
.sandbox-banner strong { color: var(--text); }
.sandbox-banner .sb-acts { margin-left: auto; display: flex; gap: 8px; flex: none; }
.sandbox-offer { margin-bottom: 14px; }
button.small.danger { border-color: rgba(241,83,85,.55); color: var(--bad); }
button.small.danger:hover { background: rgba(241,83,85,.14); border-color: var(--bad); }

/* projects page controls */
.controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.control { display: flex; flex-direction: column; gap: 4px; }
.control label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.control select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; font: inherit; min-width: 140px; }
.controls .push { flex: 1; }
/* One consistent height for every control in a top-of-page row — pull-downs,
   toggles, and search bars line up whatever their internal padding/borders. */
.controls select,
.controls input:not([type=checkbox]):not([type=radio]),
.controls .seg { height: 34px; box-sizing: border-box; }
.controls input:not([type=checkbox]):not([type=radio]) { background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; font: inherit; min-width: 160px; }
.controls input:not([type=checkbox]):not([type=radio]):focus { border-color: var(--accent); outline: none; }
.controls .seg { display: inline-flex; align-items: stretch; }
.controls .seg-btn { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.control-search input { min-width: 220px; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th .arrow { font-size: 10px; margin-left: 3px; color: var(--accent); }
tr.subgroup td { background: var(--panel2); font-weight: 600; border-top: 1px solid var(--line); }
tr.subgroup .g-count { color: var(--dim); font-weight: 400; margin-left: 8px; }

/* page headers with action button */
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.page-head h1 { margin: 0; }
.page-head .push { flex: 1; }
button.primary { background: var(--accent); color: #0d1218; border-color: var(--accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.1); }

/* modal forms */
#modal-root:empty { display: none; }
.modal-overlay { position: fixed; inset: 0; background: rgba(6,9,12,.72); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  width: 100%; max-width: 520px; max-height: 84vh; overflow-y: auto; padding: 20px 22px; }
.modal h2 { margin: 0 0 16px; font-size: 16px; }
.modal .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.modal .field { display: flex; flex-direction: column; gap: 4px; }
.modal .field.wide { grid-column: 1 / -1; }
.modal .field label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.modal .field label .req { color: var(--bad); }
.modal input, .modal select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; font: inherit; width: 100%; }
.modal input[type=checkbox] { width: auto; align-self: flex-start; transform: scale(1.2); margin-top: 6px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal .error { color: var(--bad); font-size: 13px; margin-top: 10px; min-height: 1em; }
.modal .link-row { display: flex; gap: 10px; margin-top: 6px; }
.modal .link-out[data-empty="1"] { display: none; }
.modal .link-out { margin-top: 12px; }
.modal .link-note { font-size: 12px; color: var(--accent); margin-bottom: 6px; }
.modal .link-copy { display: flex; gap: 8px; }
.modal .link-copy input { font-size: 12px; font-family: ui-monospace, monospace; }
.modal button.small { padding: 4px 10px; white-space: nowrap; }
td .rowedit { visibility: hidden; }
tr:hover td .rowedit { visibility: visible; }
td.row-actions { text-align: right; white-space: nowrap; }
td.row-actions .rowedit { margin-left: 6px; }

/* Setup — Security & Permissions matrix */
.perm-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim);
  font-weight: 600; margin: 0 0 10px; }
.perm-scroll { overflow-x: auto; }
.perm-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.perm-table th, .perm-table td { border-bottom: 1px solid var(--line); padding: 7px 10px; }
.perm-table th.perm-col { text-align: center; font-size: 11px; color: var(--dim); font-weight: 600;
  white-space: nowrap; vertical-align: bottom; width: 96px; }
.perm-table th.perm-task, .perm-table td.perm-task { text-align: left; min-width: 260px; }
.perm-table td.perm-cell { text-align: center; width: 96px; }
.perm-table tr.perm-group td { background: var(--panel2); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--dim); padding: 5px 10px; cursor: pointer; }
.perm-table tr.perm-group .chev { transition: transform .12s; }
.perm-table tr.perm-group:not(.collapsed) .chev { transform: rotate(90deg); }
.perm-yes { color: var(--ok, #62c48e); font-weight: 700; }
.perm-no { color: var(--dim); }
/* Editable cell: green ✓ when granted, gray · when not — matches the read-only
   cells and reads clearly at a glance (higher contrast than a blue checkbox). */
.perm-check { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0;
  cursor: pointer; position: relative; vertical-align: middle; background: none; border: none; border-radius: 5px; }
.perm-check::before { content: '·'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--dim); font-size: 20px; font-weight: 700; line-height: 1; }
.perm-check:checked::before { content: '✓'; color: var(--ok, #62c48e); font-size: 15px; }
.perm-check:hover { background: var(--panel2); }
.perm-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.perm-col.perm-locked { color: var(--accent2); }
.perm-col .perm-sub { font-size: 9px; font-weight: 400; letter-spacing: .02em; color: var(--dim); text-transform: none; }
.grp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.grp-bar-label { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.grp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 13px; }
.grp-chip .grp-del { background: none; border: none; color: var(--dim); cursor: pointer; padding: 0 4px;
  font-size: 12px; border-radius: 50%; }
.grp-chip .grp-del:hover { color: var(--bad); }
.grp-assign { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.grp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.grp-check input { width: auto; transform: scale(1.1); accent-color: var(--accent); }

/* collapsible groups + row indent */
tr.subgroup td { cursor: pointer; }
.chev { display: inline-block; width: 14px; color: var(--dim); transition: transform .12s; }
tr.subgroup.open .chev { transform: rotate(90deg); }
td.indent { padding-left: 28px; }

/* resizable columns (drag the right edge of a header) */
th { position: relative; }
.col-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 2; }
.col-grip:hover { background: linear-gradient(to right, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px); }
table.resizing { user-select: none; }

/* health icon */
.health-ico { cursor: help; font-size: 14px; }

/* inline-editable entity cells */
td.ied { cursor: text; }
td.ied:hover { outline: 1px dashed var(--accent); outline-offset: -3px; }
td.ied-check { cursor: pointer; text-align: center; }

/* client logos */
.client-logo { height: 26px; max-width: 90px; object-fit: contain; display: block;
  background: #fff; border-radius: 4px; padding: 2px 4px; }
.logo-none { color: var(--line); }

/* person row highlight (arriving via a contact link) */
@keyframes rowflash { 0% { background: rgba(55,119,188,.40); } 100% { background: transparent; } }
tr.flash td { animation: rowflash 2.2s ease-out; }

a.quiet { color: var(--accent); text-decoration: none; }
a.quiet:hover { text-decoration: underline; }

/* image upload field + avatars */
.img-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-preview { max-height: 56px; max-width: 140px; border-radius: 6px; background: #fff; padding: 3px; object-fit: contain; }
.img-pick { cursor: pointer; display: inline-block; }
.avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: -8px; margin-right: 8px; background: var(--panel2); }

/* view-as (impersonation preview) — must be visually unmistakable */
#viewas-wrap { display: flex; align-items: center; gap: 6px; }
#viewas-wrap[hidden] { display: none; }
#viewas-wrap label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
/* Height is shared with the $ toggle beside it (--control-h) so the top-bar
   controls line up — they drifted apart because each set its own padding. */
#viewas-wrap select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px;
  height: var(--control-h); box-sizing: border-box; }
body.impersonating #topbar { border-bottom: 2px solid var(--accent2); }

/* dashboard (home) */
.home-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.home-greet { margin: 4px 0 2px; font-size: 24px; }
.home-greet.birthday { color: var(--accent2); }
.home-date { color: var(--dim); margin-bottom: 22px; }
/* World-clock panel (top-right of the Dashboard) */
.clock-panel { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; margin: 2px 0 22px; }
.clock { min-width: 66px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 9px; text-align: center; }
.clock-time { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.clock-code { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 2px; white-space: nowrap; }
.clock.local { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.clock.local .clock-code { color: var(--accent); font-weight: 600; }
/* Settings — typed clock fields */
.clock-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.clock-fields input { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; }
.clock-status { font-size: 12px; margin-left: 8px; color: var(--dim); }
.clock-status.ok { color: var(--ok); }
.clock-status.err { color: var(--bad); }
/* Fun events — Dashboard chips */
.fun-events { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 22px; }
.fun-event { background: color-mix(in srgb, var(--accent2) 20%, var(--panel)); border: 1px solid var(--accent2);
  color: var(--text); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; }
/* Fun events — Settings editor rows */
.fev-list { display: flex; flex-direction: column; gap: 8px; }
.fev-row { display: grid; grid-template-columns: minmax(160px, 1fr) 160px auto auto; gap: 10px; align-items: center; }
.fev-row input.fev-title, .fev-row input.fev-date { background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; }
.fev-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.fev-rec input { width: auto; accent-color: var(--accent); }
/* List / Gallery card view (Projects, People, Clients) */
.view-toggle .seg-btn { padding: 5px 12px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gal-card { display: block; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; text-decoration: none; color: var(--text); transition: border-color .12s, transform .12s;
  position: relative; }
/* Online dot pinned to the card's top-right corner (right side of the card). */
.gal-online { position: absolute; top: 14px; right: 14px; margin-right: 0; }
.gal-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.gal-code { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.gal-name { color: var(--dim); font-size: 13px; margin: 4px 0 10px; min-height: 1.1em; }
.gal-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gal-sub { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--panel); }
.gal-card .role { margin-left: 0; }
.gal-person, .gal-client, .gal-project { cursor: pointer; }
.gal-card .client-logo { height: 22px; max-width: 60px; }
/* Open LTC Workspace — the project card's link through to the project's
   Workspace page (the project header uses the same class, styled below). */
.gal-card .ws-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin-top: 12px; padding: 7px 10px; font-size: 13px; border-radius: 8px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--dim); }
.gal-card .ws-btn:hover { border-color: var(--accent); color: var(--text); }
.ws-btn:disabled, .ws-icon:disabled { cursor: not-allowed; opacity: .5; }
/* In the project header the same class renders exactly like the small ghost
   buttons beside it (Manage Access / Edit project) — identical box, identical
   baseline — not a bare text link. */
.proj-head .ws-btn { display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; font-size: 12px; line-height: normal; text-decoration: none; white-space: nowrap; }
.proj-head .ws-btn:hover { border-color: var(--accent); }
.proj-head .ws-btn svg { width: 13px; height: 13px; }
.ws-btn svg, .ws-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; display: block; }
td.proj-actions { white-space: nowrap; text-align: right; }
.ws-icon { display: inline-flex; align-items: center; padding: 3px 6px; background: transparent;
  border: 1px solid var(--line); border-radius: 6px; color: var(--dim); vertical-align: middle; margin-left: 6px; }
.ws-icon:hover { border-color: var(--accent); color: var(--text); }
.gal-group { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim);
  font-weight: 600; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; }
.gal-group:first-child { margin-top: 0; }
.gal-group .gal-group-count { background: var(--panel2); border-radius: 999px; padding: 1px 9px;
  font-size: 11px; letter-spacing: 0; }
.gallery + .gal-group { margin-top: 22px; }
.scope-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 999px; padding: 2px 9px; vertical-align: 2px; }
.scope-badge.you { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: 1px solid var(--accent); }
.scope-badge.site { background: color-mix(in srgb, var(--accent2) 18%, transparent); color: var(--accent2); border: 1px solid var(--accent2); }
.uid-line { font-size: 12px; color: var(--dim); margin-top: 14px; }
.uid-line code { background: var(--panel2); border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.modal .actions .push { flex: 1; }
/* Settings — preferences + clock chooser */
.pref-row { display: flex; align-items: center; gap: 14px; }
.pref-row > label { font-size: 13px; color: var(--dim); min-width: 100px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn { background: var(--panel2); color: var(--dim); border: none; padding: 6px 14px; font: inherit;
  font-size: 13px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.active { background: var(--accent); color: #0d1218; font-weight: 600; }
.clock-choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 16px; }
.clock-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.clock-opt input { width: auto; transform: scale(1.1); accent-color: var(--accent); }
.clock-opt-code { font-family: var(--mono); font-size: 11px; color: var(--dim); min-width: 38px; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 26px; }
.mod-card { display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 10px 16px; color: var(--text); text-decoration: none; }
.mod-card:hover { border-color: var(--accent); }
.mod-card svg { width: 30px; height: 30px; stroke: var(--accent); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mod-card .mod-label { font-size: 13px; font-weight: 600; }
.mod-card.dev { opacity: .45; cursor: not-allowed; }
.mod-card.dev svg { stroke: var(--dim); }
.mod-card.dev .mod-state { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }
/* help */
#help-btn { flex: none; box-sizing: border-box; width: var(--control-h); height: var(--control-h); border-radius: 50%;
  padding: 0; font-weight: 700; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; color: var(--accent); border-color: var(--line); }
#help-btn:hover { border-color: var(--accent); }
.modal.help-modal { max-width: 820px; padding: 0; overflow: hidden; }
.help-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.help-titlebar h2 { margin: 1px 0 0; font-size: 19px; }
.help-kicker { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; }
.help-close-x { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--dim); }
.help-modal .help-body { max-height: calc(84vh - 136px); overflow-y: auto; padding: 4px 22px 12px; }
.help-section { padding: 15px 0 16px; border-bottom: 1px solid var(--line); }
.help-section:last-of-type { border-bottom: none; }
.help-body h3 { margin: 0 0 7px; font-size: 14px; color: var(--accent); }
.help-body p, .help-body li { font-size: 13.5px; line-height: 1.48; color: var(--text); }
.help-body p { margin: 7px 0; }
.help-body ul, .help-body ol { margin: 7px 0 0; padding-left: 20px; }
.help-body li + li { margin-top: 5px; }
.help-body .muted { font-size: 12px; }
.help-body a { color: var(--accent); }
.help-rule { margin: 10px 0 2px; padding: 9px 11px; border-left: 3px solid var(--accent2);
  background: color-mix(in srgb, var(--accent2) 9%, transparent); border-radius: 0 6px 6px 0;
  color: var(--text); font-size: 13px; line-height: 1.45; }
.help-linkline { margin-top: 10px !important; }
.help-steps { counter-reset: help-step; list-style: none; padding-left: 0 !important; }
.help-steps li { position: relative; min-height: 24px; padding-left: 34px; }
.help-steps li::before { counter-increment: help-step; content: counter(help-step);
  position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel2); border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 11px; font-weight: 700; }
.help-calc, .help-override { display: inline-block; padding: 0 4px; }
.help-calc { outline: 1px dashed #5b9bd5; outline-offset: -1px; }
.help-override { outline: 1px dashed #e0a33d; outline-offset: -1px; }
.help-access { display: grid; gap: 5px; margin-top: 9px; }
.help-access > div { display: grid; grid-template-columns: 22px 140px 1fr; gap: 7px;
  align-items: baseline; padding: 5px 7px; border-radius: 5px; background: var(--panel2); font-size: 12.5px; }
.help-access > div > span:last-child { color: var(--dim); }
.help-yes { color: var(--ok); font-weight: 700; }
.help-no { color: var(--dim); }
.help-identity { margin: 14px 0 4px !important; }
.help-modal > .actions { margin: 0; padding: 12px 22px; border-top: 1px solid var(--line);
  background: var(--panel2); }
@media (max-width: 620px) {
  .help-access > div { grid-template-columns: 22px 1fr; }
  .help-access > div > span:last-child { grid-column: 2; }
}

.warn-banner { background: rgba(250,167,63,.12); border: 1px solid var(--warn);
  color: var(--warn); border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: 13px; }
.home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .home-cols { grid-template-columns: 1fr; } }
.viewas-banner { background: rgba(242,196,109,.14); border: 1px solid var(--accent2);
  color: var(--accent2); border-radius: 8px; padding: 8px 14px; margin-bottom: 16px; font-size: 13px; }

/* Calculated-cell rule (owner 2026-07-22, both apps): cells whose value comes
   from a formula get a blue dashed outline; formula cells overridden with a
   hard value get orange. Overriding requires permission + acknowledgment. */
.calc-cell { outline: 1px dashed #5b9bd5; outline-offset: -2px; }
.calc-overridden { outline: 1px dashed #e0a33d; outline-offset: -2px; }

/* Milestone / sprint icon chips (Phases tab) — colored square with a glyph;
   the border keeps White/Black chips visible in both themes. */
.ms-chip { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; font-size: 12px; vertical-align: middle;
  border: 1px solid rgba(128,128,128,.45); margin-right: 4px; }

/* Inline date entry on phase / sprint / milestone rows. */
.ph-inline { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 6px; font-size: 12.5px; color-scheme: light dark; }
.ph-inline:focus { border-color: var(--accent); outline: none; }
.ph-inline:disabled { opacity: .55; border-color: transparent; background: transparent; }

/* Phases table v4: colored capsules, grouped column headers, warning icons. */
.ms-cap { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; font-size: 12.5px; vertical-align: middle; }
.ph-grphead th { text-align: center; color: var(--dim); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; padding: 4px 6px 0; border-bottom: none; }
.ph-warn { cursor: pointer; font-size: 14px; }

/* Swatch pickers (icon & color) in modals — native option styling is ignored
   by macOS pop-up menus, so these are real buttons. */
.swatch-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.swatch-btn { width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--line);
  cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; }
.swatch-btn:hover { border-color: var(--dim); }
.swatch-btn.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* Settings page: subject nav + content (mirrors LTC Workspace's Setup tab). */
.setup-split { display: flex; gap: 16px; align-items: flex-start; }
.setup-nav { flex: none; width: 250px; display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 14px; }
.setup-navbtn { display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 10px 12px; cursor: pointer; color: var(--text); }
.setup-navbtn:hover { border-color: var(--accent); }
.setup-navbtn.active { border-color: var(--accent); background: var(--panel2);
  box-shadow: inset 3px 0 0 var(--accent); }
.setup-nav-label { font-size: 13px; font-weight: 600; }
.setup-nav-desc { font-size: 11px; color: var(--dim); line-height: 1.35; }
.setup-body { flex: 1; min-width: 0; }
.setup-body .section { margin-top: 0; }
@media (max-width: 900px) { .setup-split { flex-direction: column; } .setup-nav { width: 100%; position: static; } }

/* Phase-template editor cards (Settings → Phase templates). */
.tpl-card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel2);
  padding: 12px 14px; margin-bottom: 12px; }
.tpl-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.tpl-label { flex: 1; max-width: 340px; font-weight: 600; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: 13.5px; }
.tpl-defrow { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.tpl-code { width: 76px; font-family: var(--mono); }
.tpl-name { width: 320px; max-width: 60%; }
.tpl-code, .tpl-name { background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.tpl-code:focus, .tpl-name:focus, .tpl-label:focus { border-color: var(--accent); outline: none; }
.tpl-adddef { margin-top: 6px; }

/* Phase-template phases indent under their template name; the ＋ phase
   button aligns with the indented rows. */
.tpl-defs { margin-left: 26px; border-left: 1px dashed var(--line); padding-left: 14px; }
.tpl-card .tpl-adddef { margin-left: 40px; }
.tpl-defrow .tpl-defup, .tpl-defrow .tpl-defdown { padding: 2px 7px; font-size: 11px; }

/* Device-category templates reuse the phase-template card frame, with a narrow
   single-letter field and a wide category field. */
.dct-label { flex: 1; max-width: 340px; font-weight: 600; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: 13.5px; }
.dct-letter { width: 40px; font-family: var(--mono); text-align: center; text-transform: uppercase; }
.dct-cat { width: 320px; max-width: 60%; }
.dct-letter, .dct-cat { background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.dct-letter:focus, .dct-cat:focus, .dct-label:focus { border-color: var(--accent); outline: none; }
.dct-cats { margin-left: 26px; border-left: 1px dashed var(--line); padding-left: 14px; }
.dct-card .dct-addcat { margin-left: 40px; margin-top: 6px; }
.dct-defrow .dct-up, .dct-defrow .dct-down { padding: 2px 7px; font-size: 11px; }

/* Settings nav: the SELECTED item's outline follows its scope color — blue
   for Just-you, yellow for Site-wide (matching the scope badges). Unselected
   items keep the neutral look. */
.setup-navbtn.active.scope-you { border-color: var(--accent); background: var(--panel2);
  box-shadow: inset 3px 0 0 var(--accent); }
.setup-navbtn.active.scope-site { border-color: var(--accent2); background: var(--panel2);
  box-shadow: inset 3px 0 0 var(--accent2); }
.setup-navbtn.scope-site:hover { border-color: var(--accent2); }

/* World clocks: stacked city fields + dot-matrix world map. */
.clock-fields-stack { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.clock-fields-stack .clock-city-field { width: 100%; box-sizing: border-box; }
.clock-map { display: block; width: 100%; max-width: 860px; margin-top: 16px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
.wm-land { fill: var(--line); }
.wm-halo { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
.wm-city { fill: var(--accent); }
.wm-label { fill: var(--text); font-size: 11px; font-weight: 600; }

/* World clocks: city fields left, map right. */
.clock-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.clock-layout .clock-fields-stack { flex: none; width: 320px; }
.clock-map-col { flex: 1; min-width: 420px; }
.clock-map-col .clock-map { margin-top: 0; }

/* Phases panel toolbar: seeding controls left, creation buttons right. */
.ph-toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.ph-toolbar select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 8px; font-size: 12.5px; }

/* Phases panel: card layout (Zones look). Each phase is a bordered card with
   a colored left edge; sprints indent inside it with columns still aligned;
   milestones are compact blocks that do not span the full width. */
.ph-scroll { overflow-x: auto; }
.ph-hdr { display: flex; align-items: flex-end; gap: 8px; padding: 0 12px; margin: 2px 0;
  color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.ph-hdr-groups { font-size: 10px; margin-bottom: 0; }
.ph-hdr-groups .grp { text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.ph-c { flex: none; box-sizing: border-box; min-width: 0; }
.ph-c.num { text-align: right; font-variant-numeric: tabular-nums; }
.ph-c.mono { font-family: var(--mono); font-size: 12px; }
.ph-card { border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  background: var(--panel); padding: 5px 12px; margin: 8px 0; min-width: max-content; }
.ph-card .ph-row + .ph-row { border-top: 1px solid var(--line-soft); }
.ph-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.ph-row.ph-indent { margin-left: 26px; }
.ph-actions { margin-left: auto; display: inline-flex; gap: 4px; white-space: nowrap; }
.ph-msblock { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel2); padding: 5px 12px; margin: 6px 0 6px 86px;
  max-width: max-content; }
.ph-msblock.ph-msloose { margin-left: 0; display: flex; }
.ph-msblock .ph-actions { margin-left: 6px; }
/* Tier colors cycle per phase (same family as the Workspace Zones edges). */
.ph-tier-0 { border-left-color: var(--ltc-blue); }
.ph-tier-1 { border-left-color: var(--ltc-teal); }
.ph-tier-2 { border-left-color: var(--ltc-purple); }
.ph-tier-3 { border-left-color: var(--ltc-orange); }
.ph-tier-4 { border-left-color: var(--ltc-green); }
.ph-tier-5 { border-left-color: var(--ltc-red); }
.ph-tier-none { border-left-color: var(--line); }

/* Phases cards: compact action buttons; header aligns with card content
   (12px padding + 3px left border). */
.ph-hdr { padding: 0 15px; }
.ph-actions .small { padding: 2px 7px; font-size: 11.5px; }

/* Phases cards: tighter action cluster so a full row fits ~1180px panels. */
.ph-actions { gap: 3px; }
.ph-actions .small { padding: 2px 6px; font-size: 11px; }
.ph-inline { font-size: 12px; padding: 3px 4px; }

/* Phases v5: vertical group separators, milestone date alignment, and a
   band that makes each phase's own row read as the card's header. */
.ph-div { flex: none; width: 1px; align-self: stretch; background: var(--line); margin: 0 5px; }
.ph-hdr .ph-div { background: transparent; }
.ph-prow { background: var(--panel2); margin: -5px -12px 4px; padding: 5px 12px;
  border-radius: 6px 6px 0 0; }
.ph-prow strong { font-size: 14px; }
/* Milestone blocks: internal columns mirror the row grid so the date input
   sits exactly under the End column (39px card-content offset; 54px loose). */
.ph-msblock { gap: 8px; margin-left: 39px; }
.ph-msblock.ph-msloose { margin-left: 54px; display: inline-flex; }

/* Deliverable marker (owner 2026-07-23): 📤 — something going OUT the door
   (drawings, budgets, schedules), never a "complete" check. Orange accent. */
.ms-deliv-chk { background: transparent; border: none; cursor: pointer; padding: 0 6px;
  font-size: 13px; font-weight: 700; color: #e8963f; line-height: 1; }
.ms-deliv-chk:not(.on) { color: var(--dim); font-weight: 400; }
.ms-deliv-chk:disabled { cursor: default; }
.ms-deliv { font-size: 13px; line-height: 1; }

/* Timeline (mini-Gantt): one band for the whole project; phases as pills,
   sprints beneath, milestones as circular markers, subtle today line. */
.tl-head { display: flex; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.tl-wrap { position: relative; padding: 2px 0 4px; }
.tl-band { height: 6px; border-radius: 3px; background: var(--panel2); border: 1px solid var(--line); margin-bottom: 12px; }
.tl-row { position: relative; height: 24px; margin: 4px 0; }
.tl-row.tl-sub { height: 20px; margin-top: 0; }
.tl-pill { position: absolute; top: 0; height: 22px; min-width: 10px; box-sizing: border-box;
  border: 1px solid var(--tlc); background: color-mix(in srgb, var(--tlc) 26%, transparent);
  border-radius: 999px; display: flex; align-items: center; padding: 0 9px; font-size: 11.5px; overflow: hidden; }
.tl-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-pill.tl-sprint { height: 16px; top: 2px; font-size: 10px; padding: 0 6px; }
.tl-ms { position: absolute; top: 0; transform: translateX(-50%); width: 20px; height: 20px;
  border-radius: 50%; border: 1.5px solid var(--tlc);
  background: color-mix(in srgb, var(--tlc) 22%, var(--panel));
  display: flex; align-items: center; justify-content: center; font-size: 10px; }
.tl-today { position: absolute; top: -6px; bottom: 0; width: 2px; background: var(--accent);
  opacity: .5; border-radius: 1px; }

/* Money-hide presenter toggle. */
.money-toggle { font-weight: 700; font-size: 15px; min-width: 34px;
  height: var(--control-h); box-sizing: border-box; padding: 0 12px; }
.money-toggle.off { text-decoration: line-through; color: var(--bad, #f15355);
  border-color: var(--bad, #f15355); text-decoration-thickness: 2px; }
/* Raw money inputs (budget grid unit costs, BOM costs) blur in hide mode. */
body.hide-money td[data-field="goods_unit_cost"],
body.hide-money td[data-field="goods_unit_cost"] input,
body.hide-money .bom-f[data-f="unit_cost"] { filter: blur(5px); }

/* Milestone block: breathing room before the edit/delete tools. */
.ph-msblock .ph-actions { margin-left: 22px; }

/* Timeline v2: double-height phase pills (name + weeks/% line). */
.tl-row { height: 42px; }
.tl-pill { height: 38px; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 0; border-radius: 10px; padding: 2px 10px; }
.tl-l1 { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tl-l2 { font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tl-row.tl-sub { height: 22px; }
.tl-pill.tl-sprint { height: 16px; top: 2px; flex-direction: row; align-items: center; border-radius: 999px; }

/* Dashboard widgets (owner 2026-07-23): role-scoped panels. Four columns
   up top (owner 2026-07-23); .widget-wide spans two tracks — grid makes that
   2× a column plus the gap between them. Narrow screens fall back to 2 / 1. */
.widget-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.widget-grid .section.widget { margin: 0; min-width: 0; overflow-x: auto; }
/* Owner's layout (2026-07-23): row 1 = Proposal Status, Active, Phases, blank;
   row 2 = Tasks (col 1), blank, Industry News (cols 3-4). */
.widget-grid .widget-tasks { grid-column: 1; }
.widget-grid .widget-propstat { grid-column: 4; }
.widget-grid .widget-empty { border-style: dashed; }
.widget-grid .widget-empty h2 { color: var(--dim); }
.widget-grid .widget-wide { grid-column: 3 / span 2; }
/* Four-up columns are narrow — compact the tables/rows so single-wide panels
   fit without horizontal scrolling (overflow-x above stays as a safety net). */
.widget-grid .widget:not(.widget-wide) th,
.widget-grid .widget:not(.widget-wide) td { padding: 6px 4px; font-size: 12px; }
.widget-grid .widget:not(.widget-wide) td.num,
.widget-grid .widget:not(.widget-wide) th.num { font-size: 12px; }
.widget-grid .widget:not(.widget-wide) .kpi { min-width: 124px; padding: 10px 12px; flex: 1; }
.widget-grid .widget:not(.widget-wide) .kpi .value { font-size: 17px; }
.widget-grid .widget:not(.widget-wide) .dashx-row { flex-wrap: wrap; row-gap: 2px; }
.widget-grid .widget:not(.widget-wide) .task-addbar { flex-wrap: wrap; }
@media (max-width: 1199px) {
  .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget-grid .widget-tasks { grid-column: auto; }
  .widget-grid .widget-propstat { grid-column: auto; }
  .widget-grid .widget-wide { grid-column: span 2; }
}
@media (max-width: 699px) {
  .widget-grid { grid-template-columns: 1fr; }
  .widget-grid .widget-tasks { grid-column: auto; }
  .widget-grid .widget-propstat { grid-column: auto; }
  .widget-grid .widget-wide { grid-column: auto; }
}
.widget-h3 { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 4px; }
.dashx-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.dashx-row:first-of-type { border-top: none; }
/* Phases/Sprints/Milestones widget: rows grouped under a project header. */
.dashx-group { margin-bottom: 12px; }
.dashx-group:last-child { margin-bottom: 0; }
.dashx-proj { font-size: 12.5px; padding: 4px 0 3px; border-bottom: 1px solid var(--line); }
.dashx-sub { margin-left: 12px; }
/* Scope switch: one joined pill, exactly one side lit — reads as a toggle. */
.dash-scope { float: right; display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; text-transform: none; letter-spacing: 0; font-weight: 400; }
.dash-scope button { border: none; border-radius: 0; background: transparent; color: var(--dim);
  font-size: 11.5px; padding: 3px 12px; cursor: pointer; line-height: 1.4;
  font-weight: 600; /* constant weight — the active state must not resize the pill */ }
.dash-scope button + button { border-left: 1px solid var(--line); }
.dash-scope button.on { background: var(--accent); color: #0b1420; font-weight: 600; cursor: default; }
:root[data-theme="light"] .dash-scope button.on { color: #fff; }
/* Proposal Status header: flex so the toggle sits at the right and wraps below
   cleanly on the narrow column instead of floating over the subtitle. */
.propstat-h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.propstat-h2 .sub { margin-left: 0; }
.propstat-h2 .dash-scope { float: none; margin-left: auto; }
.dashx-row .push { flex: 1; }
/* Clickable dashboard rows (open the project's phases/tasks). */
.dashx-go { cursor: pointer; border-radius: 6px; transition: background .1s; }
.dashx-go:hover { background: var(--panel2); }
.dashx-date { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.dashx-date.late { color: var(--bad, #f15355); }
.kpis-widget { margin: 0 0 12px; }
/* Proposal Status widget: four status cards (same hues as the badges). */
.pstat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pstat-card { border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; padding: 9px 12px; min-width: 0; }
.pstat-card.In-development { border-left-color: var(--accent); }
.pstat-card.Submitted { border-left-color: var(--warn); }
.pstat-card.Approved { border-left-color: var(--ok); }
.pstat-card.Rejected { border-left-color: var(--bad); }
.pstat-card .badge { margin: 0; }
.pstat-count { font-size: 20px; font-family: var(--mono); margin: 5px 0 3px; }
.pstat-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--dim); }
.pstat-line span:last-child { font-family: var(--mono); color: var(--text); white-space: nowrap; }
/* All-tasks view: who owns each row. */
.task-owner { font-size: 11px; color: var(--dim); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* Tasks widget */
.task-addbar { display: flex; gap: 8px; margin-bottom: 10px; }
.task-addbar #task-new { flex: 1; background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 9px; font-size: 13px; }
.task-row { display: block; padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.task-row:first-child { border-top: none; }
.task-row.done .task-text { text-decoration: line-through; color: var(--dim); }
.task-row .task-text { flex: 1; }
.task-line { display: flex; align-items: center; gap: 6px; }
.task-line .task-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Assignees start at one fixed indent so the first name lines up everywhere. */
.task-asg-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: 30px; margin-top: 3px; }
.task-row.sub, .task-row.more { display: flex; align-items: center; gap: 6px; border-top: none; padding: 2px 0 2px 30px; }
.task-row.more { font-size: 11.5px; }
/* Tasks header: title left, time-window select centered, scope toggle right. */
.tasks-h2 { display: flex; align-items: center; gap: 8px; }
.tasks-h2 .dash-scope { float: none; margin-left: 0; }
.task-scopebar { flex: 1; display: flex; justify-content: center; }
.task-scopebar select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; font: inherit; font-size: 12px; font-weight: 400; }
/* Fixed right-side columns so Overdue chips, dates, and % line up. */
.tk-od-col { flex: none; width: 64px; display: inline-flex; justify-content: flex-end; }
.tk-date-col { flex: none; min-width: 48px; text-align: right; font-family: var(--mono); font-size: 11.5px;
  color: var(--dim); white-space: nowrap; }
.tk-date-col.late { color: var(--bad); font-weight: 600; }
.tk-pct-col { flex: none; min-width: 30px; display: inline-flex; justify-content: flex-end; white-space: nowrap; }
.task-due { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.task-due.late { color: var(--bad, #f15355); font-weight: 600; }

/* Project tasks (owner design 2026-07-23) — the Tasks tab and dashboard rows. */
.tk-new { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 8px; background: var(--panel2); }
.tk-new-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tk-fld { display: inline-flex; flex-direction: column; gap: 3px; }
.tk-fld > input, .tk-fld > select { background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; }
.tk-fld-l { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.tk-new .tk-new-row:first-child .tk-fld:first-child { flex: 1; min-width: 240px; }
.tk-new .tk-new-row:first-child .tk-fld:first-child > input { width: 100%; }
.tk-new-row .push { flex: 1; }
.tk-new input, .tk-new select { background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; }
.tk-chip { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--dim);
  font-size: 12px; padding: 2px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.tk-chip.on { border-color: var(--accent); color: var(--text); background: rgba(55,119,188,.14); }
.tk-chip.on.done { border-color: var(--ok); background: rgba(98,196,142,.12); }
span.tk-chip { cursor: default; }
.tk-unasg { border: none; background: transparent; color: var(--dim); padding: 0 2px 0 0; cursor: pointer; font-size: 11px; }
.tk-unasg:hover { color: var(--bad); border: none; }
.tk-row { border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.tk-row.overdue { border-left-color: var(--bad); }
.tk-row.done { opacity: .7; }
.tk-row.done .tk-title { text-decoration: line-through; color: var(--dim); }
.tk-row.cancelled { opacity: .55; }
.tk-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-main .push { flex: 1; }
/* Priority chips: equal width (sized to the widest, "Normal"). Low/Normal
   gray thin outline, High red thin outline; Overdue is the bold one. */
.tk-prio { display: inline-flex; justify-content: center; box-sizing: border-box; min-width: 56px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em; border: 1px solid var(--dim);
  color: var(--dim); border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.tk-prio.p-High { color: var(--bad); border-color: var(--bad); }
.tk-overdue { display: inline-flex; justify-content: center; box-sizing: border-box;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border: 2px solid var(--bad); color: var(--bad); border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.tk-link { font-size: 11.5px; border: 1px solid var(--line); border-radius: 8px; padding: 1px 8px; color: var(--dim); }
.tk-mode { font-size: 11.5px; }
.tk-due { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.tk-due.late { color: var(--bad); font-weight: 700; }
.tk-doneat { color: var(--ok); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.tk-notes { font-size: 12.5px; margin: 5px 0 0 2px; white-space: pre-wrap; }
.tk-asgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
/* Progress reads as plain % text; editable versions are chromeless selects. */
.tk-pctxt { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.tk-pctxt.full { color: var(--ok); }
.tk-pcsel { font-family: var(--mono); font-size: 12px; color: var(--text); background: transparent;
  border: none; border-bottom: 1px dotted var(--dim); border-radius: 0; padding: 0 2px; cursor: pointer; }
.tk-pcsel:hover { border-bottom-color: var(--accent); color: var(--accent); }
.tk-pcsel.full { color: var(--ok); }
.task-owner.done { color: var(--ok); border-color: var(--ok); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
/* Each-must-complete on the dashboard: one head line, indented person lines. */
.task-row.head { border-top: 1px solid var(--line-soft); }
.task-row.sub { border-top: none; padding: 2px 0 2px 30px; }
.tk-log { border-top: 1px solid var(--line-soft); margin-top: 8px; padding-top: 6px; font-size: 12px; }
.tk-log-row { padding: 1px 0; color: var(--dim); }
.tk-log-row strong { color: var(--text); font-weight: 600; }
.task-del { opacity: 0; }
.task-row:hover .task-del { opacity: 1; }
/* Industry News widget */
.news-row { padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.news-row:first-child { border-top: none; }
.news-row a { color: var(--text); text-decoration: none; }
.news-row a:hover { color: var(--accent); }
.news-meta { display: block; font-size: 11.5px; margin-top: 1px; }

/* Industry News v2: client-priority + topic badges. */
.news-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-radius: 999px; padding: 1px 8px; margin-right: 6px; vertical-align: 1px; }
.news-badge.client { background: color-mix(in srgb, var(--accent2) 20%, transparent);
  color: var(--accent2); border: 1px solid var(--accent2); }
.news-badge.topic { background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); border: 1px solid var(--accent); }
.news-row.news-client a { font-weight: 600; }

/* Industry News: indented headlines with per-browser read-state (gray + ✓). */
.news-row { display: flex; align-items: flex-start; gap: 4px; padding-left: 8px; }
.news-check { flex: none; width: 16px; color: var(--ok, #62c48e); font-weight: 700; font-size: 12px;
  padding-top: 1px; text-align: center; }
.news-main { flex: 1; min-width: 0; }
.news-row.read a, .news-row.read .news-badge { color: var(--dim); border-color: var(--line); background: transparent; }
.news-row.read a { font-weight: 400; }

/* Industry News settings: count / frequency selects. */
#nf-count, #nf-ttl { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 8px; font-size: 12.5px; }

/* ------------------------------------------------------------ schedule ---- */
.sched-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sched-head h1 { margin: 0; }
.sched-nav { display: flex; align-items: center; gap: 6px; }
.sched-label { font-size: 15px; font-weight: 600; margin-left: 8px; white-space: nowrap; }
.sched-head .dash-scope { float: none; }
.sched-body { padding: 12px 14px; }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0;
  font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em;
  padding: 0 0 6px; text-align: center; }
.cal-week { border-top: 1px solid var(--line); padding-bottom: 6px; }
.cal-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-height: 54px; padding: 3px 4px; border-left: 1px solid var(--line-soft); cursor: pointer; min-width: 0; }
.cal-cell:first-child { border-left: none; }
.cal-cell:hover { background: rgba(55,119,188,.07); }
.cal-cell.cal-out { opacity: .35; }
.cal-daynum { font-family: var(--mono); font-size: 11.5px; color: var(--dim); display: inline-flex;
  width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; }
.cal-today .cal-daynum { background: var(--accent); color: #0b1420; font-weight: 700; }
.cal-grid.week .cal-cell { min-height: 120px; }
.cal-ms { display: block; font-size: 11px; border: 1px solid var(--line); border-radius: 7px;
  padding: 0 5px; margin-top: 2px; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ms:hover { filter: brightness(1.2); }
.cal-lanes { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.cal-lane { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 2px; }
.cal-bar { font-size: 11px; line-height: 1.5; border: 1px solid; border-radius: 7px; padding: 0 6px;
  color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; }
.cal-bar.sprint { font-size: 10.5px; opacity: .92; border-style: dashed; }
.cal-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dotted; }
.cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dotted; }
.cal-bar:hover { filter: brightness(1.25); }
.cal-daylist { padding: 4px 6px; }
/* Year: 12 mini months */
.cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.cal-mini-title { font-size: 13px; font-weight: 600; margin-bottom: 5px; cursor: pointer; }
.cal-mini-title:hover { color: var(--accent); }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-mini-day { position: relative; font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  text-align: center; padding: 2px 0 7px; cursor: pointer; border-radius: 4px; }
.cal-mini-day:hover { background: rgba(55,119,188,.12); }
.cal-mini-day.cal-out { cursor: default; }
.cal-mini-day.cal-inspan { color: var(--text); }
.cal-mini-day.cal-today { background: var(--accent); color: #0b1420; font-weight: 700; }
.cal-dot { position: absolute; left: 50%; transform: translateX(-50%); bottom: 2px;
  width: 5px; height: 5px; border-radius: 50%; }
/* Schedule filters: combinable kind + project chips. */
.sched-filters { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sched-fsep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.cal-task { display: block; font-size: 11px; border: 1px dashed var(--line); border-radius: 7px;
  padding: 0 5px; margin-top: 2px; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-task.high { border-color: var(--bad); color: var(--bad); }
.cal-task.done { color: var(--dim); text-decoration: line-through; }
.cal-task:hover { filter: brightness(1.2); }

/* ----------------------------------------------------------- time clock ---- */
.tc-grid th { white-space: nowrap; }
.tc-grid td { padding: 4px 8px; }
.tc-day { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; color: var(--dim); }
.tc-row.tc-wknd { background: rgba(46,56,68,.22); }
.tc-row.tc-today .tc-day { color: var(--accent); font-weight: 700; }
.tc-in input { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 4px; font: inherit; font-size: 12.5px; width: 96px; }
.tc-in input:disabled { background: transparent; border-color: transparent; color: var(--dim); opacity: .8; }
.tc-lock .tc-in input:disabled { cursor: not-allowed; }
.tc-worked { font-weight: 700; }
.tc-total td { border-top: 2px solid var(--line); font-weight: 600; }
.tc-tier-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tc-tier-row input { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 13px; width: 80px; }
.tc-note input { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; font: inherit; font-size: 12px; width: 150px; }
.tc-note input:disabled { background: transparent; border-color: transparent; color: var(--dim); }
/* Dashboard Time Clock widget */
.tcw-rates { display: flex; gap: 8px; flex-wrap: wrap; }
.tcw-rate { border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px;
  font-family: var(--mono); font-size: 15px; display: inline-flex; align-items: baseline; gap: 7px; }
.tcw-rate-l { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; font-family: inherit; }
.tcw-await { font-size: 12.5px; color: var(--bad); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
/* Holidays on the Schedule calendar */
.cal-holcell { background: rgba(250,167,63,.05); }
.cal-hol { display: block; font-size: 10.5px; color: var(--warn); border: 1px dotted var(--warn);
  border-radius: 7px; padding: 0 5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-holbanner { font-size: 13px; color: var(--warn); border: 1px dotted var(--warn); border-radius: 8px;
  padding: 5px 12px; margin-bottom: 10px; display: inline-block; }
.cal-mini-day.cal-holday { color: var(--warn); font-weight: 700; }
/* Federal holidays in the Time Clock grid */
.tc-row.tc-holiday { background: rgba(147,161,176,.10); }
.tc-row.tc-holiday .tc-day { color: var(--dim); }
.tc-holname { display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.tc-auto { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; margin-left: 4px; }

/* Save-status chip (shared by Operations and Workspace): every mutating API
   call reports Saving… / Saved / Could not save in a fixed corner chip. */
#save-status { position: fixed; right: 14px; bottom: 14px; z-index: 300;
  background: var(--panel2); color: var(--dim); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 11px; font-size: 12px; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
#save-status.show { opacity: 1; transform: translateY(0); }
#save-status[data-state="saved"] { color: #3fa650; border-color: rgba(63,166,80,.5); }
#save-status[data-state="error"] { color: #f15355; border-color: rgba(241,83,85,.55); max-width: 46ch; }

/* Search bar shared by two type-ahead search boxes: Operations' Settings page
   and Workspace's project Setup tab. Sits below the header/tabs, above the
   subject nav + panels; the suggestion list (.set-q-*) drops below it, and a
   chosen result flashes its target with .set-hit. */
.settings-search { position: relative; margin: 2px 0 14px; max-width: 480px; }
.settings-search input { width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
.settings-search input:focus { border-color: var(--accent); outline: none; }
.set-q-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); overflow: hidden; }
.set-q-hit { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; text-align: left; background: transparent; border: none; border-radius: 0;
  padding: 8px 12px; font-size: 13px; color: var(--text); cursor: pointer; }
.set-q-hit:hover, .set-q-hit.sel { background: var(--panel2); }
.set-q-sec { color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.set-q-none { padding: 9px 12px; font-size: 13px; }
@keyframes set-hit-kf { 0%, 55% { outline: 2px solid var(--accent2); outline-offset: 3px; } 100% { outline: 2px solid transparent; outline-offset: 3px; } }
.set-hit { animation: set-hit-kf 2.5s ease-out; border-radius: 6px; }

/* Project contacts list (Summary tab) — person + role rows with an add-row. */
.contacts-table { width: 100%; max-width: 520px; }
.contacts-table th { text-align: left; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.contacts-table td { padding: 5px 8px 5px 0; vertical-align: top; }
.ct-role { width: 160px; }
.ct-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ct-add select, .ct-add input { max-width: 200px; }

/* Shared page footer (version.js): suite version, copyright, confidentiality.
   Quiet, sits at the bottom of the page flow so it never overlaps content. */
#app-footer { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  justify-content: center; padding: 14px 24px 26px; margin-top: 24px;
  border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 11.5px; }
#app-footer[hidden] { display: none; }
.foot-app strong { color: var(--text); font-weight: 600; }
.foot-sep { opacity: .5; }
.foot-link { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.foot-link:hover { text-decoration: underline; }
.foot-notice { flex-basis: 100%; text-align: center; color: var(--dim); opacity: .8; }
/* Company name links to the site; kept subtle within the copyright line. */
.foot-corp { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }
.foot-corp:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* LTC astronaut: chest-up, resting on the divider line at the left. object-fit
   cover + top position crops the standing figure to its upper body. */
.foot-astro { position: absolute; left: 24px; bottom: 100%; width: 50px; height: 56px;
  object-fit: cover; object-position: top; pointer-events: none; }
/* Revision-notes modal body (renders the curated changelog). */
.rev-modal { max-width: 680px; }
.rev-body { max-height: 62vh; overflow-y: auto; padding: 4px 2px; }
.rev-body h1 { font-size: 18px; margin: 0 0 10px; }
.rev-body h2 { font-size: 14px; margin: 18px 0 6px; color: var(--accent); }
.rev-body h3 { font-size: 13px; margin: 12px 0 4px; }
.rev-body ul { margin: 4px 0 10px; padding-left: 20px; }
.rev-body li { font-size: 13px; margin: 2px 0; }
.rev-body p { font-size: 13px; margin: 6px 0; color: var(--dim); }
.rev-body code { font-family: var(--mono); font-size: 12px; background: var(--panel2); padding: 1px 4px; border-radius: 4px; }

/* ---- Time Clock: carved-bar timecard (2026-07-25, rev 07-26b) --------
   LTC astronaut palette: worked = LTC blue, OT 1.5x = orange, OT 2x = red,
   holiday = gold. Row = date | entry fields | 24h bar | flags + summary. */
.tc2 { --tc-wrk: var(--ltc-blue); --tc-ot15: var(--ltc-orange); --tc-ot2: var(--ltc-red); --tc-hol: var(--ok); }
.tc2 .tc-ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
/* holiday star matches the green Holiday summary bucket */
.tc-ic.tc-star { fill: var(--tc-hol); stroke: var(--tc-hol); stroke-width: 1; }
.tc-ic.tc-moon { fill: var(--dim); stroke: var(--dim); stroke-width: 1; }

/* progress bar */
.tc-prog { margin-bottom: 14px; }
.tc-prog-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text); margin-bottom: 6px; }
.tc-prog-bar { height: 5px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.tc-prog-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* summary tiles — outline matches the colour each number represents; the
   green Holiday tile appears only when the span actually has holiday pay */
.tc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tc-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.tc-tile.tc-t-reg { border-color: var(--tc-wrk); }
.tc-tile.tc-t-15 { border-color: var(--tc-ot15); }
.tc-tile.tc-t-2 { border-color: var(--tc-ot2); }
.tc-tile.tc-t-hol { border-color: var(--tc-hol); }
.tc-tl { font-size: 12.5px; color: var(--dim); margin-bottom: 3px; }
.tc-tv { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
.tc-tv i { font-size: 13px; font-weight: 500; font-style: normal; color: var(--dim); margin-left: 3px; }
.tc-tv.tc-awrk { color: var(--tc-wrk); }
.tc-tv.tc-a15 { color: var(--tc-ot15); }
.tc-tv.tc-a2 { color: var(--tc-ot2); }
.tc-tv.tc-ahol { color: var(--tc-hol); }

/* day list + rows — the section scrolls sideways on narrow windows instead
   of crushing the bar column */
.tc2 { overflow-x: auto; }
.tc-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; min-width: 1220px; }
.tc-day-row { display: flex; align-items: center; gap: 12px; padding: 5px 12px; }
/* tall enough for a 3-line right-side summary, so row heights stay uniform */
.tc-day-row { min-height: 54px; border-bottom: 1px solid var(--line-soft); }
.tc-day-row:last-child { border-bottom: 0; }
.tc-day-row.tc-wknd { background: rgba(46, 56, 68, .28); }
.tc-day-row.tc-today { box-shadow: inset 3px 0 0 var(--accent); }
.tc-day-row.tc-saving { background: rgba(100, 156, 216, .07); }
.tc-day-row.tc-saved { transition: background .5s; }
.tc-daycol { width: 84px; flex: none; }
.tc-dlabel { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.tc-day-row.tc-today .tc-dlabel { color: var(--accent); font-weight: 700; }
.tc-mk { display: inline-flex; align-items: center; gap: 3px; }
.tc-mid { flex: 1; min-width: 0; }
.tc-side { flex: none; width: 128px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* stacked per-day summary: regular / 1.5x / 2x, small, no bold */
.tc-snum { text-align: right; font-variant-numeric: tabular-nums; font-size: 10.5px; line-height: 1.35; font-weight: 400; }
.tc-snum .tc-sreg { color: var(--tc-wrk); }
.tc-snum .tc-s15 { color: var(--tc-ot15); }
.tc-snum .tc-s2 { color: var(--tc-ot2); }
.tc-snum .tc-shol { color: var(--tc-hol); }
.tc-warnslot { display: inline-flex; align-items: center; }
.tc-warnic { display: inline-flex; cursor: help; }
.tc-ic.tc-warn { stroke: var(--warn); width: 15px; height: 15px; }
.tc-auto { font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin-left: 4px; }

/* the note slot ahead of the bar (a future rule may demand a note when a
   warning fires) — the bar starts a touch further right to make room */
.tc-midrow { display: flex; align-items: center; gap: 8px; }
.tc-midrow .tc-bar { flex: 1; min-width: 0; }
.tc-noteslot { width: 26px; flex: none; display: inline-flex; justify-content: center; }

/* the carved bar — outlined track, transparent where nothing happened */
.tc-bar { position: relative; height: 9px; border: 1px solid var(--line-soft); border-radius: 5px; overflow: hidden; }
.tc-seg { position: absolute; top: 0; height: 100%; border-radius: 4px; }
.tc-seg.tc-wrk { background: var(--tc-wrk); }
.tc-seg.tc-ot15 { background: var(--tc-ot15); }
.tc-seg.tc-ot2 { background: var(--tc-ot2); }
/* meal gap: recessed sliver inside the worked span */
.tc-seg.tc-meal { top: 2px; height: 5px; background: var(--line); border-radius: 3px; }
/* hours past midnight: same colour, hatched — they belong to the next day */
.tc-seg.tc-x { background-image: repeating-linear-gradient(135deg, rgba(16, 20, 24, .55) 0 3px, transparent 3px 6px); }
.tc-wshol { background: var(--tc-hol); }
.tc-dot.tc-hol { background: var(--tc-hol); }

/* entry fields — four FIXED-WIDTH zones left of the bar so every column
   lines up vertically; locked rows show the same fields disabled */
.tc-fields { display: flex; align-items: center; gap: 8px; flex: none; }
.tc-zone { display: inline-flex; align-items: center; justify-content: flex-start; flex: none; }
.tc-zone.tc-z-in { width: 108px; }
.tc-zone.tc-z-m1 { width: 216px; }
.tc-zone.tc-z-m2 { width: 250px; }
.tc-zone.tc-z-out { width: 164px; }
.tc-if { display: inline-flex; align-items: center; gap: 3px; }
.tc-if label { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; margin-right: 1px; }
.tc-moonin { display: inline-flex; margin-left: 2px; }
.tc-tin { font: inherit; font-size: 11px; font-variant-numeric: tabular-nums; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 4px; width: 78px; }
/* empty fields: placeholder text sits well back so filled times stand out */
.tc-tin.tc-emptyv:not(:focus) { color: color-mix(in srgb, var(--dim) 38%, var(--panel2)); border-color: var(--line-soft); }
.tc-tin:hover:not(:disabled) { border-color: var(--dim); }
.tc-tin:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }
.tc-tin:invalid { border-color: var(--bad); }
/* Locked rows (submitted, or a past period) are READ-ONLY, not less important:
   a filed timecard is the record people go back to check. The lock is shown by
   removing the input chrome — border, background, caret — never by fading the
   numbers, which previously dropped filed hours to --dim and made a past pay
   period hard to read. Empty slots stay recessive so the filled times lead. */
/* WebKit paints disabled controls with its own -webkit-text-fill-color, which
   beats `color` — both must be set or filed hours stay grey in Safari. */
.tc-lock .tc-tin:disabled { background: transparent; border-color: transparent;
  color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; }
/* An empty slot on a locked row is a blank placeholder span, not an input, so
   no browser time-mask can masquerade as data. */
.tc-tblank { display: inline-flex; align-items: center; justify-content: flex-start;
  color: color-mix(in srgb, var(--dim) 45%, transparent); font-variant-numeric: tabular-nums;
  border: 1px solid transparent; padding: 1px 4px; user-select: none; }
.tc-mdash { color: var(--dim); font-size: 10px; }
.tc-crossed { color: var(--dim); font-size: 9px; font-weight: 600; }
.tc-addmeal, .tc-mealrm { font: inherit; font-size: 10.5px; color: var(--dim); background: transparent;
  border: 1px dashed var(--line); border-radius: 5px; padding: 1px 6px; cursor: pointer; white-space: nowrap; }
.tc-addmeal:hover { color: var(--accent); border-color: var(--accent); }
.tc-mealrm { border-style: solid; padding: 0 5px; }
.tc-mealrm:hover { color: var(--bad); border-color: var(--bad); }

/* note */
.tc-notebtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; color: var(--dim);
  background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.tc-notebtn:hover, .tc-notebtn.on { color: var(--text); border-color: var(--line); background: var(--panel2); }
.tc-notebtn.has { color: var(--accent); }
.tc-notebtn.tc-ro { cursor: default; }
.tc-notebtn.tc-ro:hover { border-color: transparent; background: transparent; color: var(--accent); }
.tc-noteline { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; color: var(--dim); }
.tc-noteedit { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.tc-noteinp { flex: 1; font: inherit; font-size: 12px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; }
.tc-noteinp:focus { border-color: var(--accent); outline: none; }

/* the "editing enabled" toggle in the page header (outside .tc2 scope) */
#tc-unlock.tc-unlock-on { border-color: var(--warn); color: var(--warn); }
#tc-unlock.tc-unlock-on:hover { border-color: var(--warn); }

/* last two days of the pay period: Submit hours glows for attention */
@keyframes tc-due-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
#tc-submit.tc-due { animation: tc-due-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #tc-submit.tc-due { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
}

/* ---- Year to date: 52-week stacked chart + analysis panels ---- */
.tc-ytd .tc-prog-top { margin-bottom: 10px; }
.tc-ytd-chartwrap { display: flex; gap: 8px; margin: 6px 0 18px; }
.tc-ytd-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  height: 160px; font-size: 9.5px; color: var(--dim); font-variant-numeric: tabular-nums; flex: none; width: 26px; }
.tc-ytd-plot { flex: 1; min-width: 0; position: relative; }
.tc-ytd-grid { position: absolute; left: 0; right: 0; top: 0; height: 160px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.tc-ytd-grid span { border-top: 1px solid var(--line-soft); }
.tc-ytd-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 160px; }
.tc-wkcol { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.tc-wkcol.tc-wkcur { box-shadow: 0 3px 0 var(--accent); }
.tc-wkstack { display: flex; flex-direction: column; border-radius: 2px 2px 0 0; overflow: hidden; min-height: 2px; }
.tc-wsreg { background: var(--tc-wrk); }
.tc-ws15 { background: var(--tc-ot15); }
.tc-ws2 { background: var(--tc-ot2); }
.tc-ytd-months { display: flex; gap: 2px; margin-top: 4px; font-size: 9.5px; color: var(--dim); }
.tc-ytd-months span { flex: 1; min-width: 0; overflow: visible; white-space: nowrap; }
.tc-ytd-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .tc-ytd-panels { grid-template-columns: 1fr; } }
.tc-ytd-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.tc-ytd-panel h3 { margin: 0 0 4px; font-size: 13px; }
.tc-ytd-panel p.muted { font-size: 11.5px; margin: 0 0 10px; }
.tc-dowchart { display: flex; gap: 10px; align-items: flex-end; }
.tc-dowcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tc-dowbar { height: 90px; width: 100%; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; }
.tc-dowlab { font-size: 10px; color: var(--dim); font-family: var(--mono); }
.tc-dowavg { font-size: 9.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.tc-hl { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tc-hlrow { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.tc-hlrow span { color: var(--dim); }
.tc-hlrow b { font-weight: 500; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* legend */
.tc-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--dim); }
.tc-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tc-dot { width: 12px; height: 8px; border-radius: 3px; display: inline-block; }
.tc-dot.tc-wrk { background: var(--tc-wrk); }
.tc-dot.tc-meal { background: var(--panel2); border: 1px solid var(--line); }
.tc-dot.tc-ot15 { background: var(--tc-ot15); }
.tc-dot.tc-ot2 { background: var(--tc-ot2); }

/* transient save confirmation, bottom-center — survives SPA re-renders */
#ops-notice { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  max-width: min(720px, 90vw); background: var(--panel); border: 1px solid var(--accent);
  color: var(--text); padding: 9px 16px; border-radius: 8px; font-size: 12.5px;
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 99;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
#ops-notice.show { opacity: 1; }
#ops-notice.err { border-color: var(--bad); color: var(--bad); }

/* ============ first-run notice ============ */
/* Deliberately unskippable: no close affordance, and the overlay swallows
   clicks rather than dismissing. The acknowledgement button is the only exit. */
.notice-overlay { cursor: default; }
.notice-modal { max-width: 560px; }
.notice-list { margin: 4px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 11px; }
.notice-list li { line-height: 1.5; font-size: 13.5px; }
.notice-bug { font-size: 14px; }

/* ============ bug reporting ============ */
/* Matches #help-btn's box exactly — same height and border treatment — so the
   two sit as a pair. Rounded rectangle rather than a circle to distinguish it. */
#bug-btn { flex: none; box-sizing: border-box; width: var(--control-h); height: var(--control-h); border-radius: 8px;
  padding: 0; font-size: 15px; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; border-color: var(--line); }
#bug-btn:hover { border-color: var(--accent); }
/* Only alerts for people who can act on the list; everyone else stays plain. */
#bug-btn.has-bugs { color: var(--bad); border-color: var(--bad);
  animation: bug-pulse 1.6s ease-in-out infinite; }
@keyframes bug-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bad) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  #bug-btn.has-bugs { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 45%, transparent); }
}
.bug-modal { max-width: 720px; }
.bug-modal textarea { width: 100%; font: inherit; font-size: 13px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; resize: vertical; }
.bug-modal textarea:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }
.bug-ctx { margin: 8px 0 2px; font-size: 11.5px; color: var(--dim); }
.bug-ctx > summary { cursor: pointer; list-style: revert; }
.bug-ctx > summary:hover { color: var(--text); }
.bug-ctx-list { margin: 5px 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
#bug-list { margin-top: 14px; max-height: 46vh; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 10px; }
.bug-list-h { margin: 0 0 8px; font-size: 13px; color: var(--dim); font-weight: 600;
  display: flex; align-items: center; gap: 8px; }
.bug-list-h .push { flex: 1; }
.bug-list-h a.ghost { text-decoration: none; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--text); font-weight: 400; }
.bug-list-h a.ghost:hover { border-color: var(--accent); }
.bug-list-h .bug-purge:hover { border-color: var(--bad); color: var(--bad); }
.bug-meta + .bug-meta { margin-top: 2px; opacity: .85; }
.bug-row { border: 1px solid var(--line-soft); border-radius: 7px; padding: 8px 10px; margin-bottom: 8px; background: var(--panel2); }
.bug-row-h { display: flex; align-items: center; gap: 9px; font-size: 11.5px; margin-bottom: 5px; }
.bug-row-h .push, .bug-row-h button { margin-left: auto; }
.bug-notes { font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.bug-meta { margin-top: 5px; font-size: 11px; color: var(--dim); }
.bug-errs { margin-top: 6px; font-size: 11px; color: var(--dim); }
.bug-errs pre { white-space: pre-wrap; word-break: break-word; margin: 4px 0 0; font-size: 10.5px; }

/* ============ discretionary ("granted") hours ============ */
/* Occupies the 24-hour bar's slot while leadership is editing, so the row keeps
   its shape and nothing below it shifts. */
.tc-disc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.tc-disc-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--tc-hol); }
.tc-din { width: 66px; }
.tc-dreason { font: inherit; font-size: 10.5px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 3px; }
.tc-dreason:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }
.tc-dhrs { font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--tc-hol); min-width: 44px; }
/* Granted hours on the 24-hour bar: the same green as the Holiday roll-up, so
   the bar, the row total, and the tile all agree. */
.tc-seg.tc-grant { background: var(--tc-hol); opacity: .85; }

/* ============ Project Notes ============ */
.notes-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .notes-wrap { grid-template-columns: 1fr; } }
.notes-side { border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 8px; position: sticky; top: 12px; max-height: 78vh; display: flex; flex-direction: column; gap: 8px; }
.notes-side-h { display: flex; gap: 6px; }
.notes-side-h select { flex: 1; min-width: 0; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font: inherit; font-size: 12.5px; height: 28px; }
.note-find { width: 100%; box-sizing: border-box; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12.5px; }
.note-find:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }
#note-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.note-card { position: relative; text-align: left; background: transparent; border: 1px solid transparent;
  border-radius: 8px; padding: 7px 9px; cursor: pointer; width: 100%; }
.note-card:hover { background: var(--panel2); border-color: var(--line); }
.note-card.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.note-card-t { font-size: 13px; font-weight: 600; color: var(--text); }
.note-card-m { font-size: 11px; color: var(--dim); margin-top: 2px; }
.note-hit { font-size: 11.5px; color: var(--dim); margin-top: 4px; line-height: 1.4; }
.note-hit mark { background: color-mix(in srgb, var(--accent2) 35%, transparent); color: var(--text); border-radius: 2px; }
.note-final { position: absolute; top: 7px; right: 8px; }

.notes-main { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 14px 16px; min-height: 320px; }
.note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.note-title { flex: 1; min-width: 220px; font: inherit; font-size: 17px; font-weight: 700; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; }
.note-title:hover:not([readonly]) { border-color: var(--line); }
.note-title:focus { border-color: var(--accent); outline: none; background: var(--panel2); }
.note-head input[type=date], .note-head select { background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12.5px; }
.note-saved { font-size: 11.5px; color: var(--ok); }

.note-block { padding: 2px 0; border-radius: 6px; }
.note-block.being-edited { background: color-mix(in srgb, var(--accent2) 9%, transparent); }
.note-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); margin: 9px 0 2px; }
.note-row { display: flex; align-items: flex-start; gap: 6px; }
.note-body { flex: 1; min-width: 0; resize: none; overflow: hidden; font: inherit; font-size: 13.5px; line-height: 1.5;
  background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; }
.note-body:hover:not([readonly]) { border-color: var(--line-soft); }
.note-body:focus { border-color: var(--accent); outline: none; background: var(--panel2); }
.nb-heading .note-body { font-size: 15px; font-weight: 700; }
.note-bul, .note-dec { color: var(--dim); font-size: 13px; padding-top: 5px; }
.note-dec { color: var(--ok); }
.note-check { margin-top: 7px; }
.nb-todo .note-check:checked + .note-body { text-decoration: line-through; color: var(--dim); }
.note-tools { display: flex; gap: 3px; opacity: 0; transition: opacity .12s; }
.note-block:hover .note-tools, .note-block:focus-within .note-tools { opacity: 1; }
.note-tools select { font: inherit; font-size: 10.5px; background: var(--panel2); color: var(--dim);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 2px; }
.note-tools button { font-size: 12px; line-height: 1; padding: 3px 7px; background: transparent;
  border: 1px solid var(--line); border-radius: 5px; color: var(--dim); }
.note-tools .note-del:hover { color: var(--bad); border-color: var(--bad); }
.note-presence { font-size: 10.5px; color: var(--accent2); margin: 1px 0 3px 24px; }
.note-conflict { outline: 1px solid var(--warn); outline-offset: 2px; border-radius: 6px; }
.note-conflict-note { font-size: 11.5px; color: var(--warn); margin: 3px 0 4px 24px; }
button.danger { color: var(--bad); }
button.danger:hover { border-color: var(--bad); }

/* ---- typed notes: cards, details, attendees, issue roll-up ---- */
.nc-flag { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  margin-right: 5px; border-radius: 4px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 800; }
.note-card.nc-critical_issues { border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.note-card.nc-critical_issues.on { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: var(--bad); }
.badge.nt-critical_issues { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }
.badge.nt-meeting { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.badge.nt-site_visit { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }

.note-clientbar { border: 1px solid var(--accent2); background: rgba(242,196,109,.12); color: var(--text);
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px; margin-bottom: 10px; }
.note-details { border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; background: var(--panel2); }
.note-dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.note-dgrid label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim); }
.note-dgrid input, .note-dgrid select { font: inherit; font-size: 13px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 7px; text-transform: none; letter-spacing: 0;
  height: 30px; box-sizing: border-box; }
/* Join sits WITH the link rather than under the row. */
.nd-linkrow { display: flex; gap: 6px; align-items: stretch; }
.nd-linkrow input { flex: 1; min-width: 0; }
.note-join { display: inline-flex; align-items: center; white-space: nowrap; font-size: 12px; color: var(--accent);
  text-decoration: none; border: 1px solid var(--accent); border-radius: 6px; padding: 0 10px; height: 30px; box-sizing: border-box; }
.note-join:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.note-join[hidden] { display: none; }
.note-dgrid input:focus, .note-dgrid select:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }

.note-att { margin-bottom: 12px; }
.note-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.note-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); color: var(--text); }
/* A linked person is visually distinct from a typed-in name. */
.note-chip.linked { border-color: var(--accent); color: var(--accent); }
.note-chip .att-del { background: transparent; border: none; color: var(--dim); cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; }
.note-chip .att-del:hover { color: var(--bad); }
.note-attadd { display: flex; gap: 6px; }
.note-attadd input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.note-attadd input:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }

.note-iss { color: var(--bad); font-weight: 800; font-size: 13px; padding-top: 4px; }
.nb-issue .note-body { border-left: 2px solid color-mix(in srgb, var(--bad) 55%, transparent); border-radius: 0 6px 6px 0; }
.nb-resolved .note-body { text-decoration: line-through; color: var(--dim); }
.note-task { font-size: 10.5px; color: var(--ok); border: 1px solid var(--ok); border-radius: 999px;
  padding: 1px 7px; text-decoration: none; margin-top: 4px; white-space: nowrap; }
.note-tools .note-mktask { font-size: 10.5px; white-space: nowrap; color: var(--ok); border-color: var(--ok); }
.note-tools .note-mktask:hover { background: color-mix(in srgb, var(--ok) 16%, transparent); }

.note-rollup { border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); border-radius: 8px;
  padding: 8px 11px; margin-bottom: 12px; background: color-mix(in srgb, var(--bad) 6%, transparent); }
.ri-row { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; font-size: 13px; }
.ri-row.ri-done .ri-body { text-decoration: line-through; color: var(--dim); }
.ri-body { flex: 1; min-width: 0; line-height: 1.45; }
.ri-src { font-size: 11px; color: var(--dim); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; cursor: pointer; white-space: nowrap; }
.ri-src:hover { color: var(--accent); border-color: var(--accent); }

/* ---- sections, action items, checklist, grouped list ---- */
/* Air above each section so the page reads as separate parts rather than one
   dense block. Padding rather than margin, so it cannot collapse into the
   neighbouring element's spacing. The first section keeps only a little — the
   details and attendees blocks above it already carry their own gap. */
.note-sec { margin: 0 0 10px; padding-top: 22px; }
.note-sec:first-of-type { padding-top: 6px; }
.note-sec-h { margin: 0 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.note-sec-b { display: flex; flex-direction: column; }
.note-sec-add { margin-top: 2px; font-size: 11px; color: var(--dim); border-style: dashed; }
.note-sec-add:hover { color: var(--accent); border-color: var(--accent); }

.nb-done .note-body { text-decoration: line-through; color: var(--dim); }
.note-img { max-width: min(100%, 520px); border-radius: 8px; border: 1px solid var(--line); display: block; }

.ai-fields { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 2px 0 6px 24px; }
.ai-fields input, .ai-fields select { font: inherit; font-size: 11px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; height: 24px; box-sizing: border-box; }
.ai-fields input:focus, .ai-fields select:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }
.ai-mktask { font-size: 11px; height: 24px; padding: 0 9px; color: var(--ok); border: 1px solid var(--ok);
  background: transparent; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.ai-mktask:hover { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.ai-prog { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ok); }
.ai-bar { display: inline-block; width: 54px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ai-bar i { display: block; height: 100%; background: var(--ok); }
.ai-task { font-size: 11px; color: var(--ok); text-decoration: none; border: 1px solid var(--ok);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

.ci-extra { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 6px 24px; }
.ci-res-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); white-space: nowrap; padding-top: 3px; }
.ci-resolution { flex: 1; min-width: 0; resize: none; overflow: hidden; font: inherit; font-size: 12px;
  background: var(--panel2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 7px; }
.ci-resolution:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; }

.note-checklist { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; margin-top: 14px; background: var(--panel2); }
.nck { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; padding: 3px 0; line-height: 1.4; }

.note-group { margin-top: 6px; }
.note-group-h { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: transparent;
  border: none; color: var(--dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 4px; cursor: pointer; }
.note-group-h:hover { color: var(--text); }
.note-group-h .chev { transition: transform .12s; display: inline-block; font-size: 9px; }
.note-group-h .chev.open { transform: rotate(90deg); }
.note-grp-n { margin-left: auto; font-weight: 400; }
.ri-row { cursor: pointer; border-radius: 6px; padding: 4px 6px; }
.ri-row:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.ri-res { display: block; font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.note-lockbar { border: 1px solid var(--line); background: var(--panel2); color: var(--dim);
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px; margin-bottom: 10px; }
.note-lockbar b { color: var(--text); }
.note-sec-h { display: flex; align-items: center; gap: 6px; cursor: help; }
.sec-help { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px;
  border: 1px solid var(--line); border-radius: 50%; font-size: 9px; color: var(--dim); font-weight: 400; }
.note-sec-h:hover .sec-help { color: var(--accent); border-color: var(--accent); }
.nd-linkwarn { font-size: 10.5px; color: var(--warn); text-transform: none; letter-spacing: 0; min-height: 0; }

/* ---- attribution, outline, section presence ---- */
.who-pill { align-self: flex-start; margin-top: 4px; font-size: 10px; line-height: 1.6; padding: 0 7px;
  border-radius: 999px; background: var(--panel2); border: 1px solid var(--line-soft); color: var(--dim);
  white-space: nowrap; cursor: default; }
.who-pill i { font-style: normal; color: var(--accent2); margin-left: 2px; }
.note-block { transition: margin-left .1s; }
.sec-here { display: inline-flex; gap: 4px; margin-left: auto; }
.here-chip { font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: none;
  padding: 1px 7px; border-radius: 999px; color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 16%, transparent); }
/* Summary without the financial column: the remaining panel takes the width
   rather than leaving a conspicuous empty half. */
.summary-grid.one-col { grid-template-columns: 1fr; }