*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  line-height: 1.55;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(217,168,76,.12), transparent),
    radial-gradient(ellipse 40% 30% at 100% 0%, rgba(40,50,120,.25), transparent);
}
a { color: var(--gold-tx); text-decoration: none; }
a:hover { color: var(--gold-hi); }
h1,h2,h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.mono { font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }

.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.nav-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line-2); color: var(--gold-hi); border-radius: var(--r); padding: .3rem .55rem; font-size: 1.1rem; cursor: pointer; }
.nav-badge { display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-left: .35rem; border-radius: 999px; background: var(--gold); color: var(--navy-0); font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.5; }
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 10; padding: .75rem 1rem; gap: .75rem; }
  .nav-toggle { display: inline-flex; }
  .sidebar .nav, .sidebar .footer-note { display: none; }
  .sidebar.open .nav, .sidebar.open .footer-note { display: flex; }
  .sidebar.open .footer-note { display: block; }
  .main { padding: 1rem; max-width: 100vw; overflow-x: hidden; }
  .hero { padding: 1.25rem; }
  .hero h1 { font-size: 1.5rem; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .inbox-row { grid-template-columns: 1fr; }
  .inbox-row .preview { white-space: normal; }
  .stack-list li { flex-wrap: wrap; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}

.sidebar {
  background: var(--navy-1);
  border-right: 1px solid var(--line);
  padding: 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.brand { display: flex; align-items: center; gap: .75rem; padding: .25rem .5rem; }
.brand img { height: 36px; width: auto; }
.brand-text { font-family: var(--serif); font-size: 1rem; color: var(--gold-hi); }
.nav { display: flex; flex-direction: column; gap: .25rem; }
.nav a {
  display: block; padding: .55rem .75rem; border-radius: var(--r);
  color: var(--muted); border: 1px solid transparent;
}
.nav a:hover, .nav a.active {
  color: var(--fg); background: var(--surface-2); border-color: var(--line);
}
.nav a.active { color: var(--gold-hi); box-shadow: inset 2px 0 0 var(--gold); }

.main { padding: var(--pad); width: 100%; max-width: none; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.card h2, .card h3 { color: var(--gold-hi); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.grid-2 > *, .grid-dash > * { min-width: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .6rem 1rem; border-radius: var(--r); border: 1px solid var(--line-2);
  background: transparent; color: var(--fg); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--navy-0); border-color: var(--gold-lo);
}
.btn-primary:hover { filter: brightness(1.05); color: var(--navy-0); }
.btn-danger { border-color: rgba(255,141,118,.4); color: var(--danger); }

label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
input, textarea, select {
  width: 100%; padding: .65rem .75rem; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--navy-2); color: var(--fg);
  font-family: var(--sans); font-size: 1rem; margin-bottom: .9rem;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,168,76,.45); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.skip-link { position: absolute; left: .75rem; top: -3rem; z-index: 1000; padding: .55rem .9rem; border-radius: var(--r); background: var(--gold); color: var(--navy-0); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: .75rem; }
.main:focus, .auth-main:focus { outline: none; }
form[aria-busy="true"] button[type=submit], form[aria-busy="true"] .btn[type=submit] { opacity: .6; cursor: progress; }
textarea { min-height: 120px; resize: vertical; }

.table { width: 100%; border-collapse: collapse; }
.card > .table, .card > form > .table { display: block; overflow-x: auto; max-width: 100%; }
.card > .table thead, .card > .table tbody, .card > .table tr { width: 100%; }
@media (min-width: 861px) { .card > .table, .card > form > .table { display: table; } }
.table th, .table td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--subtle); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; border: 1px solid var(--line-2); color: var(--gold-tx);
}
.badge-success { color: var(--success); border-color: rgba(127,211,154,.35); }
.badge-danger { color: var(--danger); border-color: rgba(255,141,118,.35); }

.alert {
  padding: .75rem 1rem; border-radius: var(--r); margin-bottom: 1rem;
  border: 1px solid var(--line-2); background: var(--surface-2);
}
.alert-error { border-color: rgba(255,141,118,.4); color: var(--danger); }
.alert-success { border-color: rgba(127,211,154,.4); color: var(--success); }
.alert-info { border-color: rgba(217,168,76,.45); color: var(--gold-hi); }

.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 2rem;
}
.auth-card {
  width: min(420px, 100%);
  background: var(--glass); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--glow);
  backdrop-filter: blur(12px);
}
.auth-card .logo { display: block; margin: 0 auto 1.25rem; height: 48px; }
.auth-card h1 { text-align: center; color: var(--gold-hi); }
.auth-card p.lead { text-align: center; color: var(--muted); margin-top: 0; }

.prose { color: var(--fg); }
.prose h2 { color: var(--gold-hi); }
.prose ul { padding-left: 1.2rem; color: var(--muted); }

.footer-note { margin-top: auto; font-size: .75rem; color: var(--subtle); padding: .5rem; }
.empty { color: var(--subtle); font-style: italic; padding: .5rem 0; }

/* Luxury command surfaces (client and owner) */
.hero {
  position: relative;
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: calc(var(--r-lg) + 4px);
  border: 1px solid var(--line-2);
  background:
    linear-gradient(135deg, rgba(217,168,76,.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: var(--glow);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: auto -20% -60% auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(217,168,76,.18), transparent 70%);
  pointer-events: none;
}
.hero-kicker {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem;
}
.hero h1 { margin-bottom: .35rem; color: var(--fg); }
.hero .lede { color: var(--muted); max-width: 42rem; margin: 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.15rem; }
.hero-meta span { font-size: .85rem; color: var(--subtle); }
.hero-meta strong { color: var(--gold-hi); font-weight: 600; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}
.kpi {
  padding: 1rem 1.1rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(10px);
}
.kpi .label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--subtle); margin-bottom: .35rem;
}
.kpi .value {
  font-family: var(--serif); font-size: 1.65rem; color: var(--gold-hi);
  letter-spacing: -0.02em; line-height: 1.1;
}
.kpi .hint { font-size: .8rem; color: var(--muted); margin-top: .25rem; }

.progress {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,.06);
  overflow: hidden; border: 1px solid var(--line); margin-top: .65rem;
}
.progress > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  box-shadow: 0 0 12px rgba(217,168,76,.45);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.card.glass { padding: 1.35rem 1.4rem; }
.card .card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .85rem;
}
.card .card-head h2 { margin: 0; font-size: 1.15rem; }
.card .card-head a { font-size: .85rem; font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; }
/* A very long word or link in typed text wraps instead of pushing the page sideways. */
.timeline li, .stack-list li, .card p { overflow-wrap: anywhere; }
.timeline li {
  position: relative; padding: 0 0 1rem 1.15rem;
  border-left: 1px solid var(--line-2);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: .35rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--navy-2); border: 2px solid var(--gold);
}
.timeline .t-title { font-weight: 600; color: var(--fg); }
.timeline .t-meta { font-size: .8rem; color: var(--subtle); }

.stack-list { list-style: none; margin: 0; padding: 0; }
.stack-list li {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid var(--line);
}
.stack-list li:last-child { border-bottom: 0; }
.stack-list .primary { font-weight: 600; color: var(--fg); }
.stack-list .secondary { font-size: .8rem; color: var(--subtle); }

.next-action {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
  border-radius: var(--r-lg); border: 1px solid var(--line-3);
  background: linear-gradient(90deg, rgba(217,168,76,.12), rgba(217,168,76,.03));
}
.next-action .na-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .2rem;
}
.next-action .na-body { font-family: var(--serif); font-size: 1.2rem; color: var(--fg); }

.impersonation-banner {
  background: rgba(217,168,76,.15); border-bottom: 1px solid var(--line-3);
  padding: .55rem 1rem; font-size: .85rem; color: var(--gold-hi);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}

.owner-shell .main { max-width: none; }
.panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.btn-sm { padding: .35rem .65rem; font-size: .8rem; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--subtle); margin-right: .4rem; vertical-align: middle;
}
.status-dot.on { background: var(--success); box-shadow: 0 0 8px rgba(127,211,154,.5); }
.status-dot.warn { background: var(--gold); }
.status-dot.off { background: var(--danger); }

.grid-dash {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}
@media (max-width: 980px) { .grid-dash { grid-template-columns: 1fr; } }

.empty-lux {
  text-align: center; padding: 1.75rem 1rem; color: var(--subtle);
  border: 1px dashed var(--line); border-radius: var(--r); margin: .25rem 0;
}
.empty-lux strong { display: block; color: var(--muted); font-family: var(--serif);
  font-size: 1.05rem; font-weight: 500; margin-bottom: .25rem; }

/* Messages */
.thread { display: flex; flex-direction: column; gap: .75rem; }
.msg { padding: .85rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); max-width: 46rem; }
.msg.mine { border-color: var(--line-3); background: linear-gradient(90deg, rgba(217,168,76,.10), rgba(217,168,76,.03)); margin-left: auto; }
.msg .msg-meta { font-size: .78rem; color: var(--subtle); margin-bottom: .3rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.msg .msg-meta strong { color: var(--gold-hi); font-weight: 600; }
.msg .msg-body { white-space: pre-wrap; word-wrap: break-word; margin: 0; }
.msg .msg-subject { font-weight: 600; color: var(--fg); margin-bottom: .25rem; }
.inbox-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.inbox-row:last-child { border-bottom: 0; }
.inbox-row .preview { color: var(--subtle); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40rem; }

/* Reveal-once secrets */
.secret-box { border: 1px solid var(--line-3); background: rgba(217,168,76,.08); border-radius: var(--r-lg); padding: 1rem 1.15rem; margin-bottom: 1rem; }
.secret-box .mono { word-break: break-all; user-select: all; color: var(--gold-hi); }
.secret-box dt { color: var(--subtle); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .5rem; }
.secret-box dd { margin: .1rem 0 0; }
details.card > summary { cursor: pointer; color: var(--gold-hi); font-family: var(--serif); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '+'; color: var(--subtle); font-family: var(--sans); }
details.card[open] > summary::after { content: '\2212'; }
details.card > summary .count { font-family: var(--sans); font-size: .8rem; color: var(--subtle); margin-left: auto; margin-right: .75rem; }
details.card > *:not(summary) { margin-top: 1rem; }
.section-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.5rem 0 1.25rem; }
.section-jump a { font-size: .8rem; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.section-jump a:hover { border-color: var(--gold); color: var(--gold-hi); }
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 .4rem 0 0; }
.check-row { display: flex; gap: .5rem; align-items: center; color: var(--fg); margin: .3rem 0; font-size: .95rem; }
.check-row-top > span:not(.sr-only) { flex: 1 1 auto; min-width: 0; }
.check-row-top { align-items: flex-start; }
.check-row-top > input { margin-top: .2rem; }
.form-inline { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.form-inline > * { margin-bottom: 0; }
.form-inline input, .form-inline select { margin-bottom: 0; }
.muted-note { font-size: .8rem; color: var(--subtle); }


/* Third build */
.article-body h2, .article-body h3 { color: var(--gold-hi); margin-top: 1.25rem; }
.article-body p { line-height: 1.65; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body a { color: var(--gold-tx); }
.stack-list li details { width: 100%; }
.stack-list li details summary::-webkit-details-marker { display: none; }
.stack-list li details summary > span:first-child { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.hero h1 img { max-height: 2.2rem; }

/* ---- v5: firm management (24 Sep 2026) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.health { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; border: 1px solid var(--line-2); }
.health::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.health-green { color: var(--success); border-color: rgba(127,211,154,.35); }
.health-amber { color: #f2c46b; border-color: rgba(242,196,107,.4); }
.health-red { color: var(--danger); border-color: rgba(255,141,118,.4); }
.meter { height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; border: 1px solid var(--line); min-width: 70px; }
.meter > i { display: block; height: 100%; background: var(--success); }
.meter.warn > i { background: #f2c46b; }
.meter.over > i { background: var(--danger); }
.cell-sub { display: block; font-size: .75rem; color: var(--subtle); margin-top: .15rem; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: 0 0 1rem; }
.filters > div { min-width: 140px; }
.filters label { font-size: .75rem; }
.is-overdue { color: var(--danger); }
.tab-body { margin-top: 1rem; }
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: .85rem; overflow-x: auto; padding-bottom: .5rem; }
.board-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .75rem; min-height: 120px; }
.board-col h3 { font-size: .9rem; margin: 0 0 .25rem; display: flex; justify-content: space-between; color: var(--gold-hi); }
.board-col .col-total { font-size: .75rem; color: var(--subtle); margin-bottom: .6rem; }
.lead-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: .65rem .75rem; margin-bottom: .6rem; }
.lead-card .primary { font-weight: 700; }
.lead-card .secondary { font-size: .8rem; color: var(--muted); }
.lead-card:target { border-color: var(--gold); box-shadow: var(--glow); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { font-size: .72rem; color: var(--subtle); text-transform: uppercase; letter-spacing: .06em; padding: .25rem .35rem; }
.cal-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-height: 96px; padding: .35rem; font-size: .75rem; overflow: hidden; }
.cal-day.other { opacity: .35; }
.cal-day.today { border-color: var(--gold); box-shadow: var(--glow); }
.cal-num { font-weight: 700; color: var(--muted); margin-bottom: .2rem; }
.cal-item { display: block; min-height: 24px; line-height: 20px; padding: .1rem .3rem; border-radius: 4px; margin-bottom: 2px; background: var(--surface-2); color: var(--fg); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--gold-lo); }
.cal-item.k-meeting { border-left-color: #8fb8ff; }
.cal-item.k-invoice, .cal-item.k-billing { border-left-color: var(--success); }
.cal-item.k-task { border-left-color: #f2c46b; }
.cal-item.k-sales { border-left-color: var(--copper); }
.cal-item.k-project { border-left-color: var(--danger); }
.cal-legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .75rem; color: var(--subtle); margin: .5rem 0 1rem; }
.drive-frame { width: 100%; min-height: 420px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.score-row { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; }
.score-row label { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; margin: 0; font-weight: 700; }
.score-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.score-row input:checked + span { color: var(--navy-0); }
.score-row label:has(input:checked) { background: var(--gold); color: var(--navy-0); border-color: var(--gold); }
.score-row input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
@media (max-width: 900px) {
  .cal { grid-template-columns: 1fr; }
  .cal-head, .cal-day.other { display: none; }
  .cal-day { min-height: 0; }
  .board { grid-template-columns: repeat(4, 80vw); }
}
.nav-label { margin: .9rem .75rem .2rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .75; }
.drive-block { border: 1px solid var(--line); border-radius: var(--r); padding: .9rem; margin-bottom: 1rem; background: var(--surface-2); }
.drive-block .drive-frame { margin-top: .6rem; }
.folder-chip { display: inline-block; font-size: .75rem; padding: .05rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.inline-select { display: flex; gap: .35rem; align-items: center; margin: 0; }
.inline-select select { width: auto; min-width: 9rem; padding: .25rem .4rem; font-size: .8rem; }
.read-receipt { font-size: .72rem; color: var(--muted); margin-left: .35rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cal-legend span::before { content: ""; width: .7rem; height: .7rem; border-radius: 2px; background: var(--gold-lo); }
.cal-legend .k-meeting::before { background: #8fb8ff; }
.cal-legend .k-invoice::before { background: var(--success); }
.cal-legend .k-task::before { background: #f2c46b; }
.cal-legend .k-sales::before { background: var(--copper); }
.cal-legend .k-project::before { background: var(--danger); }
.span-all { grid-column: 1 / -1; }
.picker { border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .8rem; margin: .25rem 0 .5rem; }
.picker legend { padding: 0 .35rem; font-size: .85rem; color: var(--gold-hi); }
.picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 .75rem; margin: .25rem 0 .25rem 1.5rem; }
.table td.wrap-cell { white-space: normal; min-width: 10rem; max-width: 18rem; }

/* ---- phones and tablets (v6) ---- */
/* The main column never grows past the screen: wide tables and boards scroll inside their card. */
.app-shell > .main { min-width: 0; }
/* Cards hold wide tables: they scroll sideways inside the card instead of widening the page.
   Card height is automatic, so nothing is clipped vertically. */
.card, details.card { min-width: 0; overflow-x: auto; }
.hero, .kpi-row, .grid-2, .grid-dash { min-width: 0; }
.grid-2 > *, .grid-dash > *, .kpi-row > * { min-width: 0; }
.stack-list li { flex-wrap: wrap; }
.stack-list li > * { min-width: 0; }
.inline-select { flex-wrap: wrap; }
.panel-actions { flex-wrap: wrap; }
.msg-body, .primary, .secondary { overflow-wrap: anywhere; }
/* iPhone and iPad zoom into any field smaller than 16px; keep them at 16px on touch screens. */
@media (pointer: coarse), (max-width: 1024px) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
  .btn-sm { min-height: 36px; }
}
@media (max-width: 860px) {
  .inline-select select { min-width: 0; max-width: 100%; }
  .inline-select input { width: 100% !important; }
  .form-inline { flex-wrap: wrap; }
  .form-inline > * { min-width: 0; max-width: 100%; }
  .drive-frame { min-height: 320px; }
  .picker-list { margin-left: .5rem; grid-template-columns: 1fr; }
}

/* Phones: tables with actions in their rows become one card per row, each value labelled. */
@media (max-width: 700px) {
  .table.stack-sm, .card > .table.stack-sm { display: block; white-space: normal; overflow: visible; }
  .table.stack-sm thead { display: none; }
  .table.stack-sm tbody, .table.stack-sm tr, .table.stack-sm td { display: block; width: 100%; }
  .table.stack-sm tr { border: 1px solid var(--line); border-radius: var(--r); padding: .55rem .75rem; margin-bottom: .75rem; }
  .table.stack-sm td { border: 0; padding: .3rem 0; }
  .table.stack-sm td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; color: var(--subtle); text-transform: uppercase; letter-spacing: .04em; }
  .table.stack-sm td:empty { display: none; }
  .table.stack-sm .form-inline input { width: 100% !important; }
}
.jump-reply { display: none; }
@media (max-width: 980px) { .jump-reply { display: inline-flex; } }
@media (max-width: 860px) { .main [id] { scroll-margin-top: 4.5rem; } }

/* ==== v9 (25 Sep 2026): full width everywhere, file viewer, files panel, calendars, conversations, notifications ==== */
/* The page uses the whole window at every size. Long text keeps a readable line length. */
.main p.lede, .main .topbar p.muted { max-width: 80ch; }
@media (min-width: 1600px) { :root { --pad: clamp(1.5rem, 2.5vw, 3rem); } }
.table-wrap { overflow-x: auto; max-width: 100%; }
[data-hide-text], [data-hide-folder] { display: none !important; }
.split-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .split-2 { grid-template-columns: minmax(0, 1fr); } }
.check-list { border: 0; padding: 0; margin: .25rem 0 .75rem; }
.check-list.is-off { opacity: .45; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; }
.scroll-list { max-height: 16rem; overflow-y: auto; }
.mode-pick { border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .8rem; margin: 0 0 1rem; }
.mode-pick .check-row { align-items: flex-start; }
.setup-banner { border-color: var(--line-3); background: linear-gradient(90deg, rgba(217,168,76,.10), rgba(217,168,76,.02)); }
.role-guide summary { cursor: pointer; }
.file-ext { display: inline-block; min-width: 2.6em; padding: 0 .3em; border-radius: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-align: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--gold-tx); vertical-align: middle; }
.file-link { color: var(--fg); }
.file-table tr[data-row-href] { cursor: pointer; }
.file-table tr[data-row-href]:hover td { background: var(--surface-2); }
.move-menu summary { list-style: none; }
.move-menu summary::-webkit-details-marker { display: none; }

/* Client overview: main column plus a Files panel on the right. */
.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); gap: 1rem; align-items: start; }
.dash-main { min-width: 0; }
.dash-side { position: sticky; top: 1rem; min-width: 0; }
.files-panel-tools { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.files-panel-tools > * { flex: 1 1 10rem; margin: 0; }
.files-panel-list { list-style: none; margin: 0 0 .75rem; padding: 0; max-height: 60vh; overflow-y: auto; }
.files-panel-list li a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; padding: .5rem .25rem; border-bottom: 1px solid var(--line); color: var(--fg); }
.files-panel-list li a:hover { background: var(--surface-2); }
.files-panel-list .file-ext { grid-row: span 2; align-self: start; margin-top: .15rem; }
.fp-name { overflow-wrap: anywhere; font-weight: 600; font-size: .9rem; }
.fp-meta { font-size: .75rem; color: var(--subtle); }
.fp-action { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .5rem; }
.fp-action summary { cursor: pointer; color: var(--gold-hi); font-weight: 600; }
@media (max-width: 1180px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-side { position: static; }
  .files-panel-list { max-height: 22rem; }
}

/* File viewer */
.viewer-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.viewer-title { flex: 1 1 16rem; min-width: 0; }
.viewer-title h1 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: 0; overflow-wrap: anywhere; }
.viewer-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.viewer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(.5rem, 1.5vw, 1.25rem); min-height: 50vh; }
.viewer.no-save { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.viewer-media { display: flex; justify-content: center; }
.viewer-media img, .viewer-media video { max-width: 100%; max-height: 80vh; height: auto; border-radius: var(--r); background: #000; }
.viewer-media audio { width: min(100%, 40rem); margin: 2rem 0; }
.pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 1rem; overflow-x: auto; }
.pdf-page { position: relative; max-width: 100%; }
.pdf-page canvas { display: block; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.35); border-radius: 2px; max-width: none; }
/* PDF.js text layer (v11): the page's text, transparent, over the drawing (from pdf_viewer.css 4.x) */
.pdf-page .textLayer { position: absolute; left: 0; top: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
  --min-font-size: 1; --text-scale-factor: calc(var(--scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.pdf-page .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.pdf-page .textLayer > :not(.markedContent), .pdf-page .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.pdf-page .textLayer .markedContent { display: contents; }
.pdf-page .textLayer[data-main-rotation="90"] { transform: rotate(90deg) translateY(-100%); }
.pdf-page .textLayer[data-main-rotation="180"] { transform: rotate(180deg) translate(-100%, -100%); }
.pdf-page .textLayer[data-main-rotation="270"] { transform: rotate(270deg) translateX(-100%); }
.pdf-page .textLayer span[role="img"] { user-select: none; cursor: default; }
.pdf-page .textLayer ::selection { background: rgba(0, 90, 255, .25); }
.pdf-page .textLayer br::selection { background: transparent; }
.pdf-page-num { text-align: center; font-size: .72rem; color: var(--subtle); margin-top: .3rem; }
.viewer-doc { color: var(--fg); overflow-wrap: anywhere; }
/* v18: an uploaded web page, shown in a sealed frame on the page's own light canvas */
.viewer-html { display: block; width: 100%; height: 75vh; min-height: 22rem; border: 1px solid var(--line); border-radius: var(--r); color-scheme: light; background: Canvas; }
.viewer-note { margin: 0 0 .6rem; }
.viewer-html.is-focused { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.preview-doc { background: #fff; color: #1d1d1f; border-radius: var(--r); padding: clamp(1rem, 4vw, 3rem); max-width: 60rem; margin: 0 auto; font-family: Georgia, "Times New Roman", serif; line-height: 1.55; }
.preview-doc h1, .preview-doc h2, .preview-doc h3, .preview-doc h4 { color: #111; font-family: var(--sans); }
.preview-doc img { max-width: 100%; height: auto; }
.preview-doc .preview-li { padding-left: 1.25rem; position: relative; margin: .2rem 0; }
.preview-doc .preview-li::before { content: "•"; position: absolute; left: .3rem; }
.preview-doc .preview-blank { min-height: .6rem; margin: 0; }
.preview-doc .preview-table td { border: 1px solid #ccc; color: #1d1d1f; }
.preview-table-wrap { overflow-x: auto; max-width: 100%; margin: .75rem 0; }
.preview-table { border-collapse: collapse; font-size: .85rem; min-width: 50%; }
.preview-table th, .preview-table td { border: 1px solid var(--line-2); padding: .3rem .5rem; vertical-align: top; text-align: left; }
.preview-grid th { background: var(--surface-2); color: var(--subtle); font-weight: 600; position: sticky; top: 0; }
.preview-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.preview-sheet { margin: .5rem 0; }
.preview-sheet summary { cursor: pointer; font-weight: 600; color: var(--gold-hi); }
.preview-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); gap: 1rem; }
.preview-slide { background: #fff; color: #1d1d1f; border-radius: var(--r); padding: 1.25rem; aspect-ratio: 16 / 9; overflow: auto; }
.preview-slide h3 { color: #111; font-family: var(--sans); margin: 0 0 .5rem; }
.preview-slide ul { margin: .25rem 0; padding-left: 1.2rem; }
.preview-slide img { max-width: 100%; max-height: 14rem; display: block; margin: .5rem auto; }
.preview-slide-num { font-size: .7rem; color: #777; margin-bottom: .25rem; }
.preview-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: .85rem; background: var(--navy-1); padding: 1rem; border-radius: var(--r); max-height: 75vh; overflow: auto; }

/* Calendars */
.cal-filters { padding: .9rem 1rem; }
.cal-filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .75rem; }
.cal-filter-row label { font-size: .8rem; }
.cal-kinds summary { cursor: pointer; color: var(--gold-hi); margin-top: .5rem; }
.cal-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }
.cal-title { font-family: var(--serif); font-size: 1.15rem; margin: 0 .5rem; }
.cal-wrap { overflow-x: auto; }
.cal-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; background: var(--gold-lo); flex: none; }
.cal-legend i.cal-dot { margin-right: .1rem; }
.cal-legend span::before { content: none; }
.k-meeting { --k: #8fb8ff; } .k-project { --k: var(--danger); } .k-milestone { --k: var(--gold); } .k-deliverable { --k: #d7a6ff; }
.k-task { --k: #f2c46b; } .k-invoice { --k: var(--success); } .k-billing { --k: #4fc3a1; } .k-questionnaire { --k: #7fd0e6; }
.k-upload { --k: #b9c6ff; } .k-checklist { --k: #e6a77f; } .k-risk { --k: #ff6f91; } .k-sales { --k: var(--copper); }
.cal-dot[class*="k-"] { background: var(--k); }
.cal-item[class*="k-"] { border-left-color: var(--k); }
.cal-item.done, .cal-list-item.done a { opacity: .55; text-decoration: line-through; }
.cal-client { color: var(--subtle); }
.cal-more { font-size: .72rem; color: var(--gold-tx); }
.cal-dow { display: none; }
.cal-list-day { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.cal-list-day.today .cal-list-date strong { color: var(--gold-hi); }
.cal-list-day ul { list-style: none; margin: 0; padding: 0; }
.cal-list-item a { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; padding: .25rem 0; color: var(--fg); }
.cal-item-title { font-weight: 600; }
.cal-item-meta { font-size: .78rem; color: var(--subtle); flex-basis: 100%; padding-left: 1.15rem; }
.cal-list-item.overdue .cal-item-meta { color: var(--danger); }
.feed-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.feed-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.feed-list li.is-new { background: rgba(217,168,76,.07); }
.feed-link { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .35rem; }
.feed-link input { flex: 1 1 18rem; margin: 0; font-size: .78rem; }
.how-to h3 { font-size: .95rem; margin-top: 1rem; }
.how-to ol { padding-left: 1.2rem; margin: .25rem 0; font-size: .88rem; color: var(--muted); }
@media (max-width: 900px) {
  .cal-dow { display: inline; color: var(--subtle); font-weight: 400; }
  .cal-day.empty { display: none; }
  .cal-item { white-space: normal; }
  .cal-list-day { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* Conversations */
.msg-layout { display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.msg-list { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.msg-search input { margin: 0 0 .5rem; }
.msg-tabs { display: flex; gap: .25rem; margin-bottom: .5rem; }
.msg-tabs a { padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.msg-tabs a.active { border-color: var(--gold); color: var(--gold-hi); }
.conv-list { list-style: none; margin: 0; padding: 0; }
.conv-list li a { display: block; padding: .6rem .5rem; border-bottom: 1px solid var(--line); color: var(--fg); border-radius: var(--r); }
.conv-list li a:hover { background: var(--surface-2); }
.conv-list li.active a { background: rgba(217,168,76,.1); box-shadow: inset 3px 0 0 var(--gold); }
.conv-list li.unread strong { color: var(--gold-hi); }
.conv-top { display: flex; justify-content: space-between; gap: .5rem; }
.conv-top strong { overflow-wrap: anywhere; }
.conv-time { font-size: .7rem; color: var(--subtle); white-space: nowrap; }
.conv-preview { display: block; font-size: .8rem; color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-tags { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .25rem; font-size: .75rem; }
.msg-pane { min-width: 0; }
.msg-pane-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.msg-pane-head h2 { margin: 0; flex: 1 1 12rem; overflow-wrap: anywhere; }
.msg-back { display: none; }
.msg .msg-body { white-space: normal; overflow-wrap: anywhere; }
.msg .msg-body a { text-decoration: underline; }
.msg { max-width: min(46rem, 92%); }
.msg.internal { border-style: dashed; background: rgba(143,184,255,.06); }
.msg-attachments { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.attach { display: inline-flex; gap: .35rem; align-items: center; padding: .25rem .5rem; border: 1px solid var(--line-2); border-radius: var(--r); font-size: .8rem; color: var(--fg); max-width: 100%; overflow-wrap: anywhere; }
.msg-actions, .msg-del { display: flex; gap: .35rem; margin-top: .4rem; }
.msg-edit summary { list-style: none; display: inline-flex; }
.msg-edit summary::-webkit-details-marker { display: none; }
.msg-edit[open] { flex-basis: 100%; }
.composer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.composer-top { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: flex-end; }
.composer-top label { margin-bottom: .25rem; }
.tpl-select { width: auto; max-width: 16rem; margin: 0 0 .35rem; font-size: .8rem; padding: .25rem .4rem; }
.composer-row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: .5rem 0; }
.composer-row .btn-primary { margin-left: auto; }
.file-pick { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; margin: 0; }
.file-pick input[type=file] { max-width: 15rem; font-size: .8rem; }
.lib-pick summary { cursor: pointer; font-size: .85rem; color: var(--gold-tx); }
.lib-pick-list { max-height: 12rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); padding: .25rem .5rem; margin-top: .25rem; }
.msg-placeholder { margin: 2rem 0; }
@media (max-width: 900px) {
  .msg-layout { grid-template-columns: minmax(0, 1fr); }
  .msg-list { position: static; max-height: none; }
  .msg-layout.has-open .msg-list { display: none; }
  .msg-layout:not(.has-open) .msg-pane { display: none; }
  .msg-back { display: inline-flex; }
  .composer-row .btn-primary { margin-left: 0; width: 100%; }
}

/* Notifications */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li a { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .5rem; border-bottom: 1px solid var(--line); color: var(--fg); border-radius: var(--r); }
.notif-list li a:hover { background: var(--surface-2); }
.notif-list li.is-new a { box-shadow: inset 3px 0 0 var(--gold); background: rgba(217,168,76,.06); }
.notif-kind { font-size: .72rem; color: var(--gold-tx); text-transform: uppercase; letter-spacing: .05em; }
.notif-body { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.notif-time { font-size: .72rem; color: var(--subtle); }

/* Recurring invoices in plain words */
.schedule-words { margin: .35rem 0 0; font-size: .9rem; color: var(--fg); line-height: 1.5; }
.schedule-preview { border: 1px solid var(--line-2); border-radius: var(--r); padding: .75rem .9rem; margin: .75rem 0; background: var(--surface-2); }

/* Phones: forms and buttons fill the width; nothing scrolls sideways. */
@media (max-width: 600px) {
  .viewer-actions, .viewer-actions form { width: 100%; }
  .viewer-actions .btn { flex: 1 1 auto; }
  .feed-link .btn, .feed-link form { flex: 1 1 auto; }
  .cal-nav .btn { flex: 1 1 auto; }
  .tpl-select { max-width: 100%; width: 100%; }
}

/* v9 gate: visible focus for ticks and radios, bigger touch targets on phones */
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.role-list { margin: .25rem 0 .5rem; padding-left: 1.1rem; }
.role-list li { margin: .15rem 0; }
@media (pointer: coarse) {
  .msg-tabs a { padding: .55rem .9rem; }
  .cal-item { padding: .35rem .4rem; }
  .conv-list li a, .files-panel-list li a, .notif-list li a { min-height: 44px; }
}

/* v10: developer workspace */
.dev-tabs { flex-wrap: wrap; margin-bottom: 1rem; }
.dev-tabs a { padding: .4rem .85rem; font-size: .85rem; }
fieldset.radio-row { border: 0; padding: 0; margin: 0 0 .75rem; min-width: 0; }
fieldset.radio-row legend { font-size: .85rem; color: var(--muted); margin-bottom: .25rem; padding: 0; }
.checklist-block { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; }
.checklist-block:first-of-type { border-top: 0; margin-top: 0; }
.checklist-block h3 { font-size: 1rem; margin: 0 0 .5rem; }
@media (max-width: 600px) {
  .form-inline input[style*="width"] { width: 100% !important; }
  .form-inline > div { flex: 1 1 100%; }
}

/* v11: welcome banner after sign-in, and the onboarding form */
.welcome-banner { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--line-2); border-left: 3px solid var(--gold); border-radius: var(--r); background: var(--glass); }
.welcome-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 1.02rem; line-height: 1.6; }
.welcome-close { margin: 0; flex: 0 0 auto; }
@media (max-width: 560px) { .welcome-banner { flex-direction: column; } }
.onb-section { margin: 1.5rem 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--gold); font-size: 1.1rem; }
.onb-q { margin: 0 0 1.1rem; }
.onb-q > label, .onb-q > .onb-label { display: block; font-weight: 600; color: var(--fg); margin-bottom: .35rem; }
.onb-q .onb-help { display: block; font-size: .85rem; color: var(--muted); margin: -.2rem 0 .4rem; }
.onb-q .onb-req { color: var(--gold-hi); margin-left: .2rem; }
.onb-q .onb-error { display: block; color: #ff9b8f; font-size: .88rem; margin-top: -.6rem; margin-bottom: .6rem; }
.onb-q fieldset { border: 0; padding: 0; margin: 0 0 .6rem; min-width: 0; }
.onb-q legend { font-weight: 600; color: var(--fg); margin-bottom: .35rem; padding: 0; }
.onb-options { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.onb-options label { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--fg); margin: 0; }
.onb-options input { width: auto; margin: 0; }
.onb-answer { margin: 0 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.onb-answer.empty { color: var(--muted); font-style: italic; }
.onb-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.onb-editor { width: 100%; border-collapse: collapse; }
.onb-editor td, .onb-editor th { padding: .35rem .3rem; vertical-align: top; text-align: left; }
.onb-editor input, .onb-editor select, .onb-editor textarea { margin-bottom: 0; }
.onb-editor .onb-order { width: 4.2rem; }
@media (max-width: 860px) { .onb-editor, .onb-editor tbody, .onb-editor tr, .onb-editor td { display: block; width: 100%; } .onb-editor thead { display: none; } .onb-editor tr { border-bottom: 1px solid var(--line-2); padding: .5rem 0; } }

/* v11: legal pages and the footer every page carries */
.site-footer { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; align-items: center; margin: 2.5rem 0 1rem; padding: 1rem 0 0; border-top: 1px solid var(--line-2); font-size: .85rem; color: var(--muted); }
.auth-main + .site-footer { max-width: 60rem; margin: 0 auto 1.5rem; padding: 1rem 1rem 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.site-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; display: inline-block; min-height: 24px; line-height: 24px; }
.site-footer a:hover { color: var(--gold-hi); }
.legal-card { width: min(46rem, 100%); }
.legal-wrap { place-items: start center; }
.legal-text h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.legal-text p, .legal-text li { line-height: 1.65; overflow-wrap: anywhere; }
.legal-text ul { padding-left: 1.2rem; }

/* Idle sign-out warning (v11) */
.session-warning { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1000; width: min(34rem, calc(100vw - 2rem)); background: var(--navy-3); color: var(--fg); border: 1px solid var(--gold-tx); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.session-warning[hidden] { display: none; }
.session-warning p { margin: 0 0 .75rem; line-height: 1.45; }
.session-warning-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Console sidebar: workspaces and their people by role (v11) */
.nav-ws { display: flex; flex-direction: column; gap: .15rem; max-height: 55vh; overflow-y: auto; padding-right: .15rem; }
.nav-ws-count { letter-spacing: 0; }
.nav-ws-find { margin: 0 0 .35rem; padding: .45rem .6rem; font-size: .85rem; }
.nav-ws-item > summary { overflow-wrap: anywhere; list-style: none; cursor: pointer; padding: .45rem .75rem; border-radius: var(--r); color: var(--muted); border: 1px solid transparent; min-height: 24px; }
.nav-ws-item > summary::-webkit-details-marker { display: none; }
.nav-ws-item > summary::before { content: "\25B8"; display: inline-block; width: 1em; color: var(--subtle); }
.nav-ws-item[open] > summary::before { content: "\25BE"; }
.nav-ws-item > summary:hover, .nav-ws-item[open] > summary { color: var(--fg); background: var(--surface-2); border-color: var(--line); }
.nav-ws-body { padding: .25rem .25rem .5rem 1.4rem; font-size: .85rem; }
.nav .nav-ws-body a { display: inline; padding: 0; border: 0; background: none; box-shadow: none; color: var(--gold-tx); }
.nav .nav-ws-body a:hover { text-decoration: underline; background: none; }
.nav-ws-actions { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; margin: .2rem 0 .4rem; }
.nav-ws-actions form, .nav-ws-people form { display: inline; margin: 0; }
.nav-ws-role { margin: .45rem 0 .1rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.nav-ws-people { list-style: none; margin: 0; padding: 0; }
.nav-ws-people li { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; min-height: 26px; }
.nav .nav-ws-people li > a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; display: inline-block; min-height: 24px; line-height: 24px; }
.nav .nav-ws-actions > a { display: inline-block; min-height: 24px; line-height: 24px; }
.nav .nav-ws-body > a { display: inline-block; min-height: 24px; line-height: 24px; }
.nav-ws-note { font-size: .72rem; color: var(--subtle); }
.nav-mini { font: inherit; font-size: .75rem; min-height: 24px; padding: .1rem .45rem; border-radius: var(--r); border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; }
.nav-mini:hover, .nav-mini:focus-visible { color: var(--fg); border-color: var(--line-3); }
.nav-mini-danger { color: var(--danger) !important; }
button.nav-mini-danger { border-color: rgba(255, 141, 118, .45); }
.nav-ws-empty { font-size: .8rem; color: var(--subtle); margin: .2rem .75rem; }
.person-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem .75rem; margin: 0 0 .75rem; border: 1px solid var(--line); border-radius: var(--r); }
.person-row form { margin: 0; }
@media (max-width: 900px) { .nav-ws { max-height: 45vh; } }

/* ==== v12 (29 Sep 2026): top bar and tabs instead of long pages; option A colours ==== */
/* Colours: a flat, darker page; royal navy boxes with a solid gold edge. */
body { background: var(--bg); background-image: none; }
.card, .glass, details.card, .kpi, .board-col, .welcome-banner, .viewer, .person-row, .drive-block {
  background: var(--box); border: 1px solid var(--box-edge); backdrop-filter: none; box-shadow: none;
}
.card .card, .card .kpi, .card .person-row, .card .drive-block, .tab-panel .card .card { background: var(--box-inset); border-color: var(--line-2); }
.hero { background: var(--box); border: 1px solid var(--box-edge); box-shadow: none; }
.hero::after { content: none; }
.setup-banner, .next-action { background: var(--box); }
.secret-box { background: var(--box-inset); }
.lead-card { background: var(--box-inset); }
.cal-day { background: var(--box); border-color: var(--line-2); }
.msg { background: var(--box); border-color: var(--line-2); }
.msg.mine { background: var(--box-inset); border-color: var(--box-edge); }
.auth-card { background: var(--box); border-color: var(--box-edge); box-shadow: none; backdrop-filter: none; }

/* What needs action: a 2px bright gold border and a gold "Needs you" pill. */
.needs-you { border: 2px solid var(--action) !important; }
.pill-needs { display: inline-block; padding: .12rem .6rem; border-radius: 999px; background: var(--action); color: var(--navy-0); font-size: .75rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.next-action { border: 2px solid var(--action); }
.table tr.needs-you td { border-top: 2px solid var(--action); border-bottom: 2px solid var(--action); }
.table tr.needs-you td:first-child { border-left: 2px solid var(--action); }
.table tr.needs-you td:last-child { border-right: 2px solid var(--action); }

/* The top bar */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy-1); border-bottom: 1px solid var(--box-edge); }
.site-header .bar { display: flex; align-items: center; gap: 1rem; padding: .55rem var(--pad); min-height: 3.5rem; }
.site-header .brand { padding: 0; flex: 0 0 auto; }
.site-header .brand img { height: 30px; }
.site-header .brand-text { font-size: .95rem; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; }
.site-header .nav { flex-direction: row; flex-wrap: wrap; gap: .15rem; flex: 1 1 auto; }
.site-header .nav a { padding: .45rem .7rem; border-radius: var(--r); white-space: nowrap; box-shadow: none; }
.site-header .nav a.active { color: var(--gold-hi); background: var(--box); border-color: var(--box-edge); box-shadow: none; }
.user-chip { display: flex; align-items: center; gap: .35rem .75rem; flex-wrap: wrap; margin-left: auto; font-size: .85rem; }
.user-chip .chip-link { color: var(--muted); padding: .35rem .5rem; border-radius: var(--r); border: 1px solid transparent; white-space: nowrap; }
.user-chip .chip-link:hover, .user-chip .chip-link.active { color: var(--gold-hi); border-color: var(--box-edge); }
.user-chip .who { color: var(--muted); display: inline-flex; gap: .35rem; align-items: center; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .who strong { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.user-chip form.signout { margin: 0; }
.main.page { padding: 1.25rem var(--pad) 1rem; max-width: none; }
@media (max-width: 1100px) {
  .site-header .bar { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .75rem; padding-bottom: .5rem; }
  .site-header.open .site-nav { display: flex; }
  .site-header .nav { flex-direction: column; }
  .user-chip { margin-left: 0; }
  .main.page { padding: 1rem; }
}

/* The workspace head (client pages and the owner's workspace pages) */
.ws-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin: .25rem 0 .75rem; }
.ws-head .ws-eyebrow, .ws-head .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ws-head .ws-name { font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.8rem); color: var(--fg); line-height: 1.2; overflow-wrap: anywhere; }
.ws-head h1 { margin: 0; }
.ws-head .sub { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.ws-head .ws-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.back-link { margin: 0 0 .35rem; font-size: .85rem; }

/* Tabs: one row of tabs, a second row of sub-tabs, never a long stack of sections */
.tabs { display: flex; gap: .15rem; border-bottom: 2px solid var(--line-2); margin: 0 0 1.1rem; overflow-x: auto; scrollbar-width: thin; }
.tabs a { white-space: nowrap; color: var(--muted); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; padding: .6rem .85rem; border-bottom: 3px solid transparent; margin-bottom: -2px; min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.tabs a:hover { color: var(--fg); }
.tabs a.active { color: var(--gold-hi); border-bottom-color: var(--gold); }
.tabs .count { display: inline-block; background: var(--box); border: 1px solid var(--box-edge); color: var(--gold-hi); border-radius: 999px; font-size: .72rem; padding: 0 .45rem; letter-spacing: 0; }
.tabs .nav-badge { margin-left: 0; }
.tabs-sub { border-bottom-width: 1px; margin-top: -.35rem; }
.tabs-sub a { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 600; padding: .45rem .75rem; min-height: 40px; border-bottom-width: 2px; margin-bottom: -1px; }
.tab-panel[hidden] { display: none !important; }
.tab-panel > summary { display: none; }
details.card.tab-panel > *:not(summary) { margin-top: 0; }
.tab-panel > .card:last-child, .tab-panel > details.card:last-child { margin-bottom: 0; }
.tabs-select { display: none; }
@media (max-width: 640px) {
  .tabs-sub.has-select { display: none; }
  .tabs-select { display: block; margin: -.2rem 0 1rem; }
  .tabs-select label { font-size: .75rem; }
}

/* Lists show a page at a time */
.pager { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: space-between; margin: .75rem 0 0; font-size: .85rem; color: var(--muted); }
.pager .pager-btns { display: flex; gap: .35rem; }
.pager button[disabled] { opacity: .45; cursor: default; }
.list-filter { margin: 0 0 .75rem; max-width: 22rem; }
.list-filter input { margin: 0; }
[data-page-hidden], [data-filter-hidden] { display: none !important; }

/* Forms in steps */
.steps-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: step; }
.steps-nav li { counter-increment: step; }
.steps-nav button { font: inherit; font-size: .82rem; padding: .35rem .7rem; min-height: 36px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; }
.steps-nav button::before { content: counter(step) ". "; }
.steps-nav button[aria-current="step"] { border-color: var(--gold); color: var(--navy-0); background: var(--gold); font-weight: 700; }
.step-panel[hidden] { display: none !important; }
.step-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .5rem; }
.step-controls .step-where { color: var(--muted); font-size: .85rem; margin-right: auto; }

/* The people of a workspace by role, inside its People tab (was the v11 sidebar tree) */
.ws-people .nav-ws-body { padding: 0; font-size: .95rem; }
.ws-people .nav-ws-people li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.ws-people .nav-ws-people li > a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; min-height: 24px; line-height: 24px; }
.ws-people .nav-ws-role { font-size: .72rem; margin-top: .9rem; }

/* Workspaces list (the owner's home for clients) */
.ws-list td .ws-title { font-weight: 700; color: var(--fg); }
.tab-panel .tab-panel .tabs-sub { border-bottom-style: dashed; }
.tab-panel .tab-panel .tabs-sub a { font-size: .85rem; min-height: 36px; }
details.card[data-subtabs] > section.tab-panel { margin-top: .5rem; }
@media (max-width: 640px) {
  .kpi-row { gap: .5rem; }
  .kpi { padding: .6rem .75rem; }
  .kpi .value { font-size: 1.1rem !important; }
  .ws-head h1 { font-size: 1.5rem; }
}
/* Links inside a sentence are underlined, so they never rely on colour alone (WCAG 1.4.1) */
p a:not(.btn), li.subtle a:not(.btn), .hint a, .lede a, .sub a, .legal-text a, .alert a, .muted-note a { text-decoration: underline; text-underline-offset: 2px; }
/* v12 gate fixes */
.auth-card, .legal-card { min-width: 0; max-width: 100%; }
.legal-card .tabs, .auth-card .tabs { flex-wrap: wrap; overflow: visible; }
.primary > a, .cell-sub a, label a, .t-meta a, .secondary a { text-decoration: underline; text-underline-offset: 2px; }
.cal-item.done, .cal-list-item.done a { opacity: 1; color: var(--muted); }
.tabs-select .tabs-go { display: flex; gap: .4rem; align-items: center; }
.tabs-select .tabs-go select { margin: 0; flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .table.stack-sm tr.needs-you { border: 2px solid var(--action); }
  .table.stack-sm tr.needs-you td { border: 0 !important; }
}
@media (max-width: 640px) {
  nav.tabs.has-select { display: none; }
}

/* v12 gate round 2 */
/* The top bar scrolls away with the page, so it can never cover the focused control (WCAG 2.4.11). */
.site-header { position: static; }
.ws-head > div { min-width: 0; max-width: 100%; }
.ws-head h1, .ws-head .sub, .ws-head .ws-name { overflow-wrap: anywhere; }
.next-action { border: 1px solid var(--box-edge); }
.next-action.needs-you { border: 2px solid var(--action); }
/* v12 gate round 3 */
@media (min-width: 641px) { .tabs { flex-wrap: wrap; overflow-x: visible; } }
.btn[hidden], button[hidden] { display: none !important; }
/* field edges stand out from the navy boxes and the page (WCAG 1.4.11, 3.9:1 and 5.4:1) */
input:not([type=checkbox]):not([type=radio]), textarea, select { border-color: var(--box-edge); }
/* no purple: the calendar's deliverable colour is warm white */
.k-deliverable { --k: #F4EFE4; }

/* ==== v14 theme 1a: Website parity ====
   Paste at the very END of assets/css/app.css (after the v12 gate blocks) so it wins.
   Style only: no PHP or markup changes needed. Fonts are already self-hosted in tokens.css. */

/* 1. Tokens: back to the site's navy, boxes become translucent surfaces */
:root {
  --navy-0: #03051A;                       /* was #01020D */
  --subtle: #A39D8F;                       /* keep your v12 accessible caption colour */
  --glass: rgba(7, 10, 36, .72);
  --box: rgba(255, 255, 255, .025);        /* was #1B2150 */
  --box-edge: rgba(226, 191, 110, .14);    /* was #A67A2C solid, now = --line */
  --box-inset: rgba(255, 255, 255, .045);
  --action: rgba(226, 191, 110, .5);       /* = --line-3 */
  --grad-btn: linear-gradient(135deg, #F2D68E 0%, #D9A84C 45%, #C98A4C 100%);
  --grad-text: linear-gradient(100deg, #F2D68E 0%, #D9A84C 45%, #C98A4C 100%);
  --grad-num: linear-gradient(180deg, #F2D68E, #D9A84C 60%, #A67A2C);
  --grad-rec: linear-gradient(180deg, rgba(217,168,76,.09), rgba(217,168,76,.02));
  --grad-panel: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  --display: "SOFT" 40, "opsz" 144;
}

/* 2. Page ground: the site atmosphere (gold haze top centre, blue-navy corner glow) */
body {
  background: var(--navy-0);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(217,168,76,.07), transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(40,60,140,.10), transparent 70%);
  background-attachment: fixed;
}

/* 3. Type: Fraunces light everywhere a heading appears */
h1, h2, h3, .ws-head .ws-name, .next-action .na-body, .kpi .value, .cal-title, .empty-lux strong {
  font-weight: 300; font-variation-settings: var(--display); letter-spacing: -0.02em;
}
.card h2, .card h3, .prose h2, .article-body h2, .article-body h3 { color: var(--fg); }

/* 4. Masthead: glass bar, hairline, mono product label */
.site-header { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.site-header .brand-text { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-tx); }
.site-header .nav a.active { background: var(--surface-2); border-color: var(--line-2); color: var(--fg); }
.user-chip .chip-link:hover, .user-chip .chip-link.active { border-color: var(--line-2); }

/* 5. Kickers: mono, .2em, with the 1.6rem fading gold rule */
.ws-head .ws-eyebrow, .ws-head .eyebrow, .hero-kicker {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .2em; color: var(--gold-tx);
}
.ws-head .ws-eyebrow::before, .ws-head .eyebrow::before, .hero-kicker::before {
  content: ""; width: 1.6rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); flex: none;
}

/* 6. Tabs: mono labels, 1px hairline rule, 1px gold underline on the active tab */
.tabs { border-bottom: 1px solid var(--line); }
.tabs a { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; border-bottom-width: 1px; margin-bottom: -1px; }
.tabs a.active { color: var(--fg); border-bottom-color: var(--gold); }
.tabs-sub { border-bottom: 1px solid var(--line); }
.tabs-sub a { font-family: var(--sans); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; border-bottom-width: 1px; }
.tabs-sub a.active { color: var(--fg); }
.nav-badge, .tabs .count { background: rgba(217,168,76,.12); color: var(--gold-tx); border: 1px solid var(--line-3); }

/* 7. Surfaces: cards, KPIs, panels. 2.5% white, 14% gold hairline, 14px radius */
.card, .glass, details.card, .kpi, .board-col, .welcome-banner, .viewer, .person-row, .drive-block, .cal-day, .msg, .auth-card {
  background: var(--box); border: 1px solid var(--box-edge); box-shadow: none; backdrop-filter: none;
}
.card.glass { padding: 1.6rem; }
.card .card-head h2 { font-size: 1.4rem; }
.card .card, .card .kpi, .card .person-row, .card .drive-block, .tab-panel .card .card, .secret-box, .lead-card { background: var(--box-inset); border-color: var(--line); }
.hero { background: var(--grad-panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.msg.mine { background: var(--grad-rec); border-color: var(--line-2); }
.welcome-banner { border-left: 1px solid var(--line-3); }

/* 8. Progress: a 3px gold trail instead of an 8px bar */
.progress { height: 3px; border: 0; background: var(--line); }
.progress > i { background: var(--grad-text); box-shadow: 0 0 12px rgba(217,168,76,.45); }

/* 9. What needs you: the site's "recommended" card, not a 2px bright border */
.next-action, .setup-banner { background: var(--grad-rec); border: 1px solid var(--line-3); }
.next-action.needs-you, .needs-you { border: 1px solid var(--line-3) !important; }
.next-action .na-label { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .2em; color: var(--gold-tx); }
.next-action .na-body { font-size: 1.45rem; }
.pill-needs {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem;
  background: rgba(217,168,76,.08); color: var(--gold-tx); border: 1px solid var(--line-3);
  font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.pill-needs::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 8px rgba(242,214,142,.7); }
.table tr.needs-you td { border-color: var(--line-3); border-width: 1px; }

/* 10. Buttons: site primary (135deg gradient, inset highlight, gold shadow) and glass secondary */
.btn { background: rgba(255,255,255,.02); border-color: var(--line-2); backdrop-filter: blur(6px); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.btn:hover { background: rgba(217,168,76,.08); border-color: var(--line-3); color: var(--fg); }
.btn-primary {
  background: var(--grad-btn); color: var(--navy-0); border-color: rgba(255,235,180,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px -10px rgba(217,168,76,.6);
}
.btn-primary:hover { filter: none; transform: translateY(-1px); color: var(--navy-0); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px -10px rgba(217,168,76,.75); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: inset 0 -1px 0 var(--copper); border-radius: 0; }
/* One primary per view: row-level buttons in lists drop to secondary */
.stack-list .btn-primary.btn-sm, .table .btn-primary.btn-sm {
  background: rgba(255,255,255,.02); color: var(--fg); border-color: var(--line-2); box-shadow: none;
}

/* 11. Chips: badges become mono uppercase chips */
.badge { font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-color: var(--line-2); padding: .2rem .55rem; }

/* 12. Readouts: KPI numbers in the gold number gradient */
.kpi { padding: 1.3rem 1.4rem; }
.kpi .label { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; }
.kpi .value { font-size: 2.2rem; background: var(--grad-num); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }

/* 13. Fields: translucent, with a border that still meets 3:1 (WCAG 1.4.11) */
input:not([type=checkbox]):not([type=radio]), textarea, select { background: var(--surface); border-color: var(--line-3); }

/* 14. Small details */
.file-ext { font-family: var(--mono); font-weight: 500; background: transparent; border-color: var(--line-2); }
.fp-action summary, .cal-kinds summary, .lib-pick summary { color: var(--gold-tx); }
.site-footer { border-top: 1px solid var(--line); }
.timeline li { border-left-color: var(--line-2); }
.timeline li::before { background: var(--navy-0); border-width: 1px; }
.score-row label:has(input:checked) { background: var(--grad-btn); border-color: rgba(255,235,180,.4); }
.steps-nav button[aria-current="step"] { background: var(--grad-btn); border-color: rgba(255,235,180,.4); }
@media (prefers-reduced-motion: reduce) { .btn-primary:hover { transform: none; } }

/* ==========================================================================
   v13 "Clean signal" (design 3a, 2026-10-06)
   Plain dark navy ground (#000312, the darkest navy in the logo art), no
   background pattern. Gold lives only in the interface: a trace leaving the
   logo along the masthead and a spine down the client overview.
   Appended last so it wins over v12; delete this block to roll back.
   ========================================================================== */

/* 1. Tokens */
:root {
  --navy-0: #000312;
  --bg: #000312;
  --glass: rgba(0, 2, 14, .92);
}

/* 2. Page ground: plain navy with a faint gold haze from the top, no pattern */
body {
  background-color: var(--navy-0);
  background-image: radial-gradient(90% 50% at 50% -10%, rgba(217,168,76,.04), transparent 60%);
  background-attachment: fixed;
}

/* 3. Masthead: larger logo, divided product label, gold trace leaving the logo */
.site-header { background: var(--glass); border-bottom: 0; }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 16px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%2216%22%20viewBox%3D%220%200%201440%2016%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22t%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221440%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23D9A84C%22%20stop-opacity%3D%22.2%22%2F%3E%3Cstop%20offset%3D%22.15%22%20stop-color%3D%22%23E5BD63%22%20stop-opacity%3D%22.9%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23D9A84C%22%20stop-opacity%3D%22.22%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23D9A84C%22%20stop-opacity%3D%22.08%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%208%20H200%20L206%202%20H430%20L436%208%20H1440%22%20stroke%3D%22url(%23t)%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%222%22%20r%3D%222.4%22%20fill%3D%22%23F2D68E%22%2F%3E%3Ccircle%20cx%3D%22436%22%20cy%3D%228%22%20r%3D%222%22%20fill%3D%22%23D9A84C%22%20opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 1440px 16px,
    linear-gradient(90deg, rgba(217,168,76,.08), rgba(217,168,76,.08)) no-repeat 1440px 7.5px / 100% 1px;
}
.site-header .bar { min-height: 4.5rem; gap: 1.25rem; }
.site-header .brand { gap: 1.1rem; }
.site-header .brand img { height: 46px; }
.site-header .brand-text { padding-left: 1.1rem; border-left: 1px solid var(--line-2); font-size: .66rem; }
.user-chip { gap: .35rem 1.1rem; }
.user-chip .chip-link { padding: .35rem .25rem; border: 0; }
.user-chip .chip-link:hover, .user-chip .chip-link.active { color: var(--gold-hi); }

/* 4. Workspace head and tabs */
.ws-head { margin: .75rem 0 1rem; }
.ws-head .ws-name { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.tabs { margin-bottom: 1.75rem; }
.tabs a { padding: .85rem .9rem; font-size: .72rem; }

/* 5. Hero: open on the page (no box), first stop on the gold spine */
.hero {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  padding: 0 0 0 2.25rem; margin-bottom: 1.4rem;
}
.hero::before {
  content: ""; position: absolute; left: .5rem; top: .9rem; bottom: -1.4rem; width: 1px;
  background: linear-gradient(180deg, rgba(242,214,142,.85), rgba(217,168,76,.45));
}
.hero::after {
  content: ""; position: absolute; left: calc(.5rem - 4px); top: .9rem; inset-inline-end: auto; bottom: auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-hi); box-shadow: 0 0 10px rgba(242,214,142,.8);
}
.hero h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
/* the one gold italic phrase per heading (dashboard.php wraps it in <em>) */
h1 em, h2 em, .hero h1 em {
  font-style: italic;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { max-width: 40rem; font-size: .97rem; }
.hero-meta { gap: .5rem 1.5rem; margin: 1rem 0 .75rem; }
.hero .progress { max-width: 40rem; }

/* 6. The spine continues down the overview's main column */
.dash-main { position: relative; padding-left: 2.25rem; }
.dash-main::before {
  content: ""; position: absolute; left: .5rem; top: 0; bottom: 2rem; width: 1px;
  background: linear-gradient(180deg, rgba(217,168,76,.45), rgba(217,168,76,.06));
}
.dash-main .tab-panel > .next-action,
.dash-main .tab-panel > .kpi-row,
.dash-main .tab-panel > .grid-dash,
.dash-main .tab-panel > .grid-2,
.dash-main .tab-panel > .card { position: relative; }
.dash-main .tab-panel > .next-action::before,
.dash-main .tab-panel > .kpi-row::before,
.dash-main .tab-panel > .grid-dash::before,
.dash-main .tab-panel > .grid-2::before,
.dash-main .tab-panel > .card::before {
  content: ""; position: absolute; left: calc(-2.25rem + .5rem - 4px); top: 1.85rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--navy-0); border: 1px solid var(--line-3);
}
.dash-main .tab-panel > .next-action::before { border-color: var(--gold); }

/* 7. Next action */
.next-action { padding: 1.4rem 1.6rem; border-radius: var(--r-lg); }
.next-action .na-label { margin-bottom: .45rem; }
.next-action .na-body { font-size: 1.45rem; line-height: 1.3; }

/* 8. KPIs: one bordered readout grid with glowing gold dots */
.kpi-row {
  gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(255,255,255,.02); overflow: visible;
}
.kpi-row > .kpi { border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; padding: 1.25rem 1.4rem; }
.kpi-row > .kpi:first-child { border-left: 0; }
.kpi .label { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.kpi .label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--gold-hi); box-shadow: 0 0 8px rgba(242,214,142,.7); }
.kpi .value { font-size: 2.5rem; }
.kpi .hint { color: var(--subtle); }

/* 9. Cards and lists */
.card .card-head h2 { font-size: 1.4rem; }
.card .card-head a::after { content: " \2192"; display: inline-block; transition: transform .2s var(--ease); }
.card .card-head a:hover::after { transform: translateX(.25em); }
.timeline li::before { background: var(--navy-0); border: 1px solid var(--gold); }
.files-panel-list .file-ext { color: var(--gold-tx); border-color: var(--line-2); }
.files-panel-list li a { padding: .65rem .15rem; }

/* 10. Small screens: no spine, KPI grid wraps cleanly */
@media (max-width: 860px) {
  .site-header .bar { min-height: 3.75rem; }
  .site-header .brand img { height: 34px; }
  .site-header .brand-text { display: none; }
  .hero, .dash-main { padding-left: 0; }
  .hero::before, .hero::after, .dash-main::before,
  .dash-main .tab-panel > *::before { display: none; }
  .kpi-row > .kpi:nth-child(odd) { border-left: 0; }
  .kpi-row > .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .card .card-head a::after { transition: none; } }

/* ==== 3a gate fixes (2026-10-06, v15 release) ====
   Two corrections found by the gate on the 3a block above; appended so the 3a block stays as supplied.
   1. The gold italic phrase: background-clip:text paints only inside the inline box, so the italic "d"
      at the end of "stand" was clipped. Give the em room for the overhang (net inline width unchanged). */
h1 em, h2 em, .hero h1 em { padding-right: .12em; margin-right: -.12em; }
/* 2. KPI readout grid: the per-cell borders assumed fixed column counts and broke between 640 and 1215px
      and on wrapped rows. Draw each tile's divider as a 1px hairline shadow into a 1px gap instead: it is
      right for any number of columns and any wrap, empty cells stay navy, and the row clips the lattice
      to its rounded corners. The tiles stay transparent, as in the 3a block. */
.kpi-row { gap: 1px; overflow: hidden; }
.kpi-row > .kpi, .kpi-row > .kpi:first-child, .kpi-row > .kpi:nth-child(n) {
  border: 0; border-radius: 0; background: transparent; box-shadow: 0 0 0 1px var(--line);
}
/* The client overview draws a spine dot outside this row, so that row must not clip. Its corner
   hairlines then run straight for the width of the radius, which is accepted there. */
.dash-main .tab-panel > .kpi-row { overflow: visible; }
/* v15: the SMTP block on Settings */
.settings-smtp { border: 1px solid var(--line); border-radius: var(--r); padding: .75rem 1rem 1rem; margin: 1rem 0; min-width: 0; }
.settings-smtp legend { padding: 0 .4rem; color: var(--gold-tx); font-size: .85rem; }

/* v16: payment dates on the calendar, the Billing page and the Book a meeting page */
.cal-item.k-payment { border-left-color: var(--success); }
.cal-legend .k-payment::before { background: var(--success); }
.k-payment { --k: var(--success); }
.next-action .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
.card.glass.booking-frame { padding: 0; overflow: hidden; }
.booking-frame iframe { display: block; width: 100%; height: min(80vh, 760px); min-height: 560px; border: 0; background: #fff; }
.sched-table td { vertical-align: middle; }
.sched-row.is-paid td { color: var(--subtle); }
.sched-row.sched-overdue td:first-child { border-left: 3px solid var(--danger); }
.sched-table td.mono { white-space: nowrap; }

/* v16: first-visit tour */
.chip-links { display: flex; align-items: center; gap: inherit; flex-wrap: wrap; }
.tour-layer { position: fixed; inset: 0; z-index: 1000; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px var(--scrim); outline: 2px solid var(--gold); outline-offset: 0; pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tour-spot[hidden] { display: block; box-shadow: none; outline: 0; width: 0; height: 0; }
.tour-layer:has(.tour-spot[hidden]) { background: var(--scrim); }
.tour-card { position: fixed; width: min(380px, calc(100vw - 24px)); background: var(--navy-3); opacity: 1; border: 1px solid var(--box-edge); border-radius: 14px; padding: 1.25rem 1.25rem 1rem; color: var(--fg); box-shadow: var(--shadow-pop); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.tour-card.tour-center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); }
.tour-card.tour-sheet { left: 12px; right: 12px; bottom: 12px; top: auto !important; width: auto; }
.tour-card h2 { font-family: var(--serif); font-size: 1.35rem; margin: 0 2rem .5rem 0; color: var(--fg); }
.tour-card h2:focus { outline: none; }
.tour-card p { margin: 0 0 .9rem; color: var(--muted); line-height: 1.55; }
.tour-card .tour-count { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tx); margin-bottom: .35rem; }
.tour-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.tour-actions .tour-gap { flex: 1; }
.tour-x { position: absolute; top: .6rem; right: .6rem; min-width: 2rem; min-height: 2rem; padding: 0; font-size: 1.2rem; line-height: 1; background: transparent; border: 1px solid transparent; color: var(--muted); }
.tour-x:hover, .tour-x:focus-visible { color: var(--fg); border-color: var(--line-2); }
.tour-dots { display: flex; gap: .3rem; margin: 0 0 .9rem; }
.tour-dots span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--line-3); }
.tour-dots span.on { background: var(--gold); }
.tour-target { position: relative; }
body.tour-open { overflow: hidden; }
.tour-still .tour-spot { transition: none; }
@media (max-width: 600px) { .tour-card.tour-center { top: auto; bottom: 12px; transform: translateX(-50%); } }

/* v21: one card per person in Team seats, every access action on the card, no sideways scrolling */
.person-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: .85rem 1rem; margin: 0 0 .75rem; scroll-margin-top: 6rem; }
.person-card.is-removed { opacity: .85; border-style: dashed; }
.person-card:target { border-color: var(--line-3); }
.person-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; align-items: center; }
.person-head > div { min-width: 0; overflow-wrap: anywhere; }
.person-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.person-meta .inline-select select { margin: 0; }
.person-scope { margin-top: .4rem; }
.person-actions { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin-top: .6rem; }
.person-actions form { margin: 0; }
.person-actions .form-inline { align-items: center; }
.person-actions input[type=text] { width: 12.5rem; max-width: 100%; margin: 0; }
.person-actions .check-row { margin: 0; font-size: .85rem; }
.person-card .person-secret { margin: .75rem 0 0; }
.card .person-card { background: var(--box-inset); }

/* v21: Book a meeting, a button at the far right of the client's main bar on every page */
.main-bar { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--line); margin: 0 0 1.75rem; }
.main-bar > .tabs-main { flex: 1 1 auto; min-width: 0; border-bottom: 0; margin: 0; }
a.nav-book, .book-cta a.btn-primary { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; white-space: nowrap; font-family: var(--sans); font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--navy-0); background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%); border: 1px solid var(--gold-hi); border-radius: 999px; box-shadow: 0 8px 22px -8px rgba(217,168,76,.7); }
a.nav-book { font-size: .95rem; padding: .55rem 1.25rem; min-height: 42px; }
a.nav-book:hover, a.nav-book:focus-visible, .book-cta a.btn-primary:hover { color: var(--navy-0); filter: brightness(1.06); }
a.nav-book.is-here { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
@media (max-width: 640px) { a.nav-book { font-size: .85rem; padding: .45rem .9rem; min-height: 38px; } }

/* v21: Book a meeting also leads the Calendar section for clients */
.tabs-sub a.tab-cta { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--navy-0); border: 1px solid var(--gold-hi); border-radius: 999px; padding: .5rem 1.15rem; margin: 0 .75rem .35rem 0; font-weight: 700; box-shadow: 0 6px 18px rgba(217,168,76,.25); }
.tabs-sub a.tab-cta:hover, .tabs-sub a.tab-cta:focus-visible { color: var(--navy-0); filter: brightness(1.06); }
.tabs-sub a.tab-cta.active { outline: 2px solid var(--gold-hi); outline-offset: 2px; color: var(--navy-0); }
.book-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; padding: 1rem 1.15rem; margin: 0 0 1rem; }
.btn-lg { font-size: 1.05rem; padding: .8rem 1.5rem; min-height: 48px; }

/* v21: My notes on a project */
.my-checklist { list-style: none; margin: 0; padding: 0; }
.my-checklist li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.my-checklist li form { margin: 0; }
.my-checklist .my-check { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 auto; }
.my-checklist .txt { overflow-wrap: anywhere; }
.my-checklist .is-done .txt { text-decoration: line-through; color: var(--subtle); }
.my-checklist .tick { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0; border-radius: 6px; border: 1px solid var(--line-3); background: transparent; color: var(--gold-hi); font-weight: 700; cursor: pointer; line-height: 1; }
.my-checklist .is-done .tick { background: rgba(217,168,76,.18); }

.nowrap { white-space: nowrap; }

/* v21: Rename workspace in the workspace header */
.ws-rename { display: inline-block; }
.ws-rename > summary { list-style: none; cursor: pointer; }
.ws-rename > summary::-webkit-details-marker { display: none; }
.ws-rename[open] form { margin-top: .5rem; }
.ws-rename input { width: 16rem; max-width: 100%; margin: 0; }

/* v21: Approvals (needs your review / with Agentive / approved) */
.appr-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.appr-tile { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-lg); text-decoration: none; color: var(--fg); background: var(--box-inset); }
.appr-tile .n { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.appr-tile .l { font-size: .9rem; color: var(--subtle); }
.appr-tile.is-needed { border-color: var(--gold-hi); background: rgba(217,168,76,.14); }
.appr-tile.is-needed .n, .appr-tile.is-needed .l { color: var(--gold-hi); }
.appr-tile.is-done .n { color: var(--fg); }
.appr-tile:hover, .appr-tile:focus-visible { border-color: var(--gold-hi); }
.appr-group { margin: 0 0 1.5rem; }
.appr-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.appr-head h2 { margin: 0; font-size: 1.2rem; }
.appr-count { display: inline-flex; min-width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-3); font-size: .85rem; padding: 0 .45rem; }
.appr-review .appr-count { background: rgba(217,168,76,.18); color: var(--gold-hi); }
.appr-list { list-style: none; margin: 0; padding: 0; }
.appr-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.appr-review .appr-item { border-left: 3px solid var(--gold-hi); padding-left: .75rem; }
.appr-main { min-width: 0; flex: 1 1 18rem; overflow-wrap: anywhere; }
.appr-title { font-weight: 600; }
.appr-desc { margin: .35rem 0 0; color: var(--subtle); white-space: pre-line; }
.appr-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.appr-actions form { margin: 0; }
.appr-changes > summary { list-style: none; cursor: pointer; }
.appr-changes > summary::-webkit-details-marker { display: none; }
.appr-changes[open] form { margin-top: .5rem; min-width: min(22rem, 80vw); }
.appr-tick { color: var(--gold-hi); }
.badge-ok { border-color: var(--gold-hi); color: var(--gold-hi); }
@media (max-width: 480px) { .appr-strip { grid-template-columns: 1fr; } }
.appr-item > .badge { align-self: flex-start; white-space: nowrap; height: auto; }

/* v24: Client review card in the owner console (tick off what the client already reviewed) */
.cr-list { border: 0; padding: 0; margin: 0 0 .5rem; min-width: 0; }
.cr-list .stack-list li { padding: .55rem 0; }
.cr-list .check-row { margin: 0; cursor: pointer; }
.cr-list .cr-all { padding: .35rem 0 .5rem; border-bottom: 1px solid var(--line); font-weight: 600; }
.cr-list .cr-all[hidden] { display: none; }
#client-review h2.cr-sub { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 1.25rem 0 .25rem; }