/* BizGrips portal — design tokens lifted from the Claude Design mockups
   (Client Portal.dc.html / Admin Portal.dc.html). Colours, type ramp and
   spacing here are the ones in those files; change them here, not inline. */

:root {
  --ac: oklch(0.45 0.07 195);       /* per-client accent, overridden at runtime */
  --ink: #1c1a17;
  --canvas: #faf8f5;
  --shell: #efece6;
  --panel: #fff;
  --sidebar: #17181a;
  --sidebar-ink: #f5f3ef;

  --line: rgba(28, 26, 23, .09);
  --line-soft: rgba(28, 26, 23, .07);
  --line-strong: rgba(28, 26, 23, .16);
  --muted: rgba(28, 26, 23, .5);
  --muted-2: rgba(28, 26, 23, .62);
  --faint: rgba(28, 26, 23, .38);

  --green: oklch(0.52 0.11 150);
  --yellow: oklch(0.68 0.14 78);
  --red: oklch(0.55 0.18 27);
  --grey: rgba(28, 26, 23, .28);
  --green-bg: rgba(28, 26, 23, .05);
  --yellow-bg: oklch(0.96 0.04 85);
  --red-bg: oklch(0.95 0.035 27);
  --red-line: oklch(0.86 0.07 27);

  --sans: 'Instrument Sans', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(28, 26, 23, .04);
  --shadow-lift: 0 1px 2px rgba(28, 26, 23, .05), 0 12px 32px -18px rgba(28, 26, 23, .18);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ac); text-decoration: none; }
a:hover { filter: brightness(.88); }

button { font-family: inherit; }

/* ------------------------------------------------------------------ layout */

.app { min-height: 100vh; display: flex; background: var(--canvas); }

.sidebar {
  width: 244px; flex: none;
  background: var(--sidebar); color: var(--sidebar-ink);
  padding: 24px 18px 22px;
  display: flex; flex-direction: column; gap: 30px;
}
.sidebar--admin { width: 236px; padding: 24px 16px 20px; gap: 26px; }

.brand { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.brand img { height: 25px; width: auto; align-self: flex-start; display: block; filter: brightness(0) invert(1); }
.brand small {
  font: 400 11.5px/1 var(--mono);
  letter-spacing: .06em;
  color: rgba(245, 243, 239, .4);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button, .nav a {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  border: none; background: transparent; cursor: pointer;
  padding: 9px 10px; border-radius: 6px;
  font: 400 13.5px/1 var(--sans);
  color: rgba(245, 243, 239, .6);
}
.nav button:hover, .nav a:hover { background: rgba(245, 243, 239, .05); filter: none; }
.nav .is-on { font-weight: 500; color: var(--sidebar-ink); background: rgba(245, 243, 239, .09); }
.nav .count { margin-left: auto; font: 400 11px/1 var(--mono); color: rgba(245, 243, 239, .35); }

/* Everything that sits at the bottom of the sidebar. The auto margin lives here
   rather than on .contact-card, so sign-out still anchors to the bottom for a
   client who has no assigned lead. */
.sidebar-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 12px;
}

.contact-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px; border-radius: 8px;
  background: rgba(245, 243, 239, .06);
}

/* Who you are, and how to stop being them. */
.session {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 2px;
  border-top: 1px solid rgba(245, 243, 239, .1);
}
.session .who {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.session .who b {
  font: 500 12px/1.3 var(--sans);
  color: rgba(245, 243, 239, .82);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.session .who span {
  font: 400 10.5px/1.3 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(245, 243, 239, .38);
}
.session button {
  margin-left: auto; flex: none;
  border: 1px solid rgba(245, 243, 239, .18);
  background: transparent;
  color: rgba(245, 243, 239, .72);
  font: 500 11.5px/1 var(--sans);
  padding: 6px 10px; border-radius: 5px; cursor: pointer;
  white-space: nowrap;
}
.session button:hover, .session button:focus-visible {
  border-color: rgba(245, 243, 239, .45);
  color: var(--sidebar-ink);
}
.contact-card .label {
  font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245, 243, 239, .45);
}
.contact-card .who { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: rgba(245, 243, 239, .14);
  display: flex; align-items: center; justify-content: center;
  font: 500 11px/1 var(--mono); color: rgba(245, 243, 239, .6);
}
.contact-card .name { font: 500 13px/1.2 var(--sans); }
.contact-card .role { font: 400 11.5px/1.2 var(--sans); color: rgba(245, 243, 239, .5); }
.contact-card a { font: 400 12.5px/1 var(--sans); color: rgba(245, 243, 239, .78); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.pagehead {
  display: flex; align-items: flex-end; gap: 24px;
  padding: 34px 44px 26px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.pagehead .titles { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pagehead .actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

.kicker {
  font: 500 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: rgba(28, 26, 23, .45);
}
.kicker--ac { color: var(--ac); }

h1.display { margin: 0; font: 400 36px/1.1 var(--serif); letter-spacing: -.01em; }
h1.display--sm { font-size: 32px; line-height: 1.08; }

.scroll { flex: 1; overflow: auto; padding: 30px 44px 60px; display: flex; flex-direction: column; gap: 40px; }
.scroll--narrow { max-width: 1220px; }

.section { display: flex; flex-direction: column; gap: 16px; }
.section > header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section h2 { margin: 0; font: 600 15px/1 var(--sans); letter-spacing: -.005em; }
.section .sub { font: 400 13px/1 var(--sans); color: var(--muted); }
.section .right { margin-left: auto; font: 400 13px/1 var(--sans); color: rgba(28, 26, 23, .45); }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--panel);
  border: 1px solid rgba(28, 26, 23, .1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card--pad { padding: 20px 22px 22px; }
.card--flush { overflow: visible; }
.card > header {
  display: flex; align-items: baseline; gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.card > header h2 { margin: 0; font: 600 15px/1 var(--sans); }
.card > header .sub { font: 400 12.5px/1 var(--sans); color: var(--muted); }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--tiles { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 22px; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: transparent;
  font: 500 13px/1 var(--sans); color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: rgba(28, 26, 23, .4); filter: none; }
.btn--primary { background: var(--ac); border-color: var(--ac); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); border-color: var(--ac); }
.btn--sm { padding: 7px 12px; font-size: 12.5px; }
.btn--ghost { border-color: transparent; color: var(--muted-2); }
.btn--danger { color: var(--red); border-color: var(--red-line); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.chip {
  padding: 7px 12px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(28, 26, 23, .14); background: transparent;
  font: 400 12.5px/1 var(--sans); color: var(--muted-2);
}
.chip.is-on { background: rgba(28, 26, 23, .85); border-color: rgba(28, 26, 23, .85); color: #faf8f5; font-weight: 500; }

.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 7px; background: rgba(28, 26, 23, .06); }
.seg button {
  padding: 5px 11px; border: none; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--muted); font: 400 12px/1 var(--sans);
}
.seg .is-on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(28, 26, 23, .12); }

/* ------------------------------------------------------------------- pills */

.pill {
  padding: 6px 11px; border-radius: 20px; white-space: nowrap;
  font: 500 12px/1 var(--sans);
  color: var(--muted); background: rgba(28, 26, 23, .05);
}
.pill--done  { color: var(--green);  background: var(--green-bg); }
.pill--soon  { color: var(--yellow); background: var(--yellow-bg); }
.pill--over  { color: var(--red);    background: var(--red-bg); }
.pill--idle  { color: rgba(28, 26, 23, .45); background: transparent; border: 1px solid rgba(28, 26, 23, .14); }
.pill--ac    { color: var(--ac); background: rgba(28, 26, 23, .05); }

.owner {
  display: inline-block; padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  background: rgba(28, 26, 23, .07); color: var(--muted);
}
.owner--client { background: rgba(28, 26, 23, .85); color: #faf8f5; }

.blocking {
  font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red);
}
.blocking--off { background: transparent; border: 1px solid rgba(28, 26, 23, .14); color: rgba(28, 26, 23, .45); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--grey); }
.dot--done { background: var(--green); }
.dot--soon { background: var(--yellow); }
.dot--over { background: var(--red); }
.dot--idle { background: var(--grey); }

/* -------------------------------------------------------------- progress */

.bar { height: 5px; border-radius: 3px; background: rgba(28, 26, 23, .08); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 3px; background: var(--ac); transition: width .3s ease; }
.bar--over > span { background: var(--red); }

/* ----------------------------------------------------------------- tables */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; align-items: center; gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.rows .row:last-child { border-bottom: none; }
.row .title { font: 500 14px/1.3 var(--sans); }
.row .meta { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.row.is-done .title { color: var(--muted); }

.row--task { grid-template-columns: 8px minmax(0, 1fr) auto auto auto; }
.row--check { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 15px; }
.row--check.is-done { background: rgba(28, 26, 23, .012); }

.checkbox {
  width: 22px; height: 22px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: 500 12px/1 var(--sans); cursor: pointer;
  background: #fff; border: 1.5px dashed rgba(28, 26, 23, .28); color: transparent;
}
.checkbox.is-on { background: var(--ac); border: 1px solid var(--ac); color: #fff; }
.checkbox[disabled] { cursor: default; opacity: .8; }

.strike { text-decoration: line-through; text-decoration-color: rgba(28, 26, 23, .25); }

/* ------------------------------------------------------------------ forms */

label.field { display: flex; flex-direction: column; gap: 6px; font: 500 12px/1 var(--sans); color: var(--muted-2); }
label.field > span.hint { font-weight: 400; font-size: 11.5px; color: var(--faint); }

input[type=text], input[type=email], input[type=url], input[type=number], input[type=date],
select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: #fff; color: var(--ink);
  font: 400 13.5px/1.4 var(--sans);
}
textarea { min-height: 96px; resize: vertical; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ac); outline-offset: -1px; border-color: var(--ac); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

/* ----------------------------------------------------------------- dialog */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(28, 26, 23, .34);
  display: flex; align-items: stretch; justify-content: flex-end;
}
.sheet {
  width: min(680px, 94vw); background: var(--canvas);
  display: flex; flex-direction: column;
  box-shadow: -18px 0 48px -24px rgba(28, 26, 23, .5);
}
.sheet > header {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 28px 20px; border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.sheet > header h2 { margin: 0; font: 400 26px/1.15 var(--serif); }
.sheet .body { flex: 1; overflow: auto; padding: 26px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.sheet > footer {
  display: flex; gap: 10px; align-items: center;
  padding: 16px 28px; border-top: 1px solid var(--line); background: var(--panel);
}
.sheet .close {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  font: 400 20px/1 var(--sans); color: var(--muted); padding: 4px 6px;
}

/* --------------------------------------------------------------- markdown */

.md { font: 400 14.5px/1.65 var(--sans); color: rgba(28, 26, 23, .82); }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h2 { margin: 26px 0 10px; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.md h3 { margin: 20px 0 8px; font: 600 13.5px/1.3 var(--sans); color: var(--ink); }
.md p { margin: 0 0 12px; text-wrap: pretty; }
.md ul, .md ol { margin: 0 0 14px; padding-left: 22px; }
.md li { margin-bottom: 6px; }
.md strong { font-weight: 600; color: var(--ink); }
.md code {
  font: 500 12.5px/1 var(--mono);
  background: rgba(28, 26, 23, .06); padding: 2px 5px; border-radius: 4px;
}
.md hr { border: none; border-top: 1px solid var(--line); margin: 20px 0; }

/* ------------------------------------------------------------------ misc */

.empty {
  padding: 40px 22px; text-align: center;
  font: 400 13.5px/1.6 var(--sans); color: var(--muted);
}
.placeholder {
  background-color: #f2efe9;
  background-image: repeating-linear-gradient(135deg, rgba(28, 26, 23, .05) 0 1px, transparent 1px 9px);
  display: flex; align-items: center; justify-content: center;
}
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stack--lg { gap: 9px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spread { display: flex; align-items: center; gap: 12px; }
/* Global, not scoped to .spread: right-aligned items appear inside plain
   anchors, <header> and <footer> too, and scoping it silently broke those. */
.push { margin-left: auto; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 60; padding: 11px 18px; border-radius: 8px;
  background: var(--sidebar); color: var(--sidebar-ink);
  font: 400 13px/1 var(--sans);
  box-shadow: 0 8px 28px -12px rgba(28, 26, 23, .6);
}
.toast--err { background: var(--red); }

.gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px; background: var(--canvas);
}
.gate .box {
  max-width: 460px; display: flex; flex-direction: column; gap: 16px;
  padding: 36px 38px; background: var(--panel);
  border: 1px solid rgba(28, 26, 23, .1); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.gate h1 { margin: 0; font: 400 30px/1.12 var(--serif); }
.gate p { margin: 0; font: 400 14.5px/1.6 var(--sans); color: var(--muted-2); text-wrap: pretty; }
.gate img { height: 26px; width: auto; align-self: flex-start; }

@media (max-width: 1080px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: minmax(0, 1fr); }
  .scroll { padding: 24px 24px 48px; }
  .pagehead { padding: 26px 24px 20px; }
}
@media (max-width: 760px) {
  .app { flex-direction: column; }
  .sidebar, .sidebar--admin { width: 100%; flex-direction: row; align-items: center; gap: 16px; padding: 14px 18px; overflow-x: auto; }
  .sidebar .contact-card { display: none; }
  .nav { flex-direction: row; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .pagehead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pagehead .actions { margin-left: 0; flex-wrap: wrap; }
}