/*
  Matches the product sites (Floating Tiles): white panels on light grey,
  near-black ink, coral for the main action, violet for links, Inter for
  headings and Urbanist for text. Light only. Colours are darkened slightly
  where needed so text meets WCAG AA contrast (4.5:1).
*/
:root {
  --bg: #F1F2F5;
  --panel: #FFFFFF;
  --raised: #F9F9F9;
  --ink: #080808;
  --muted: #5E5E66;
  --line: #E1E2E5;
  --line-soft: #EAEAEA;
  --accent: #D42A19;       /* coral: the one main action per view */
  --accent-soft: #FDECEA;
  --accent-ink: #FFFFFF;
  --violet: #6B3BD9;
  --violet-soft: #F1EBFE;
  --sky-soft: #E3F7FD;
  --sun-soft: #FEF8D8;
  --ok: #1B7F43;
  --ok-soft: #E6F4EC;
  --warn: #8A5A00;
  --warn-soft: #FEF4D9;
  --bad: #C62F2F;
  --bad-soft: #FCEAEA;
  --chip: #F1F2F5;
  --focus: #6B3BD9;
  --radius: 20px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(8, 8, 8, 0.04), 0 6px 20px rgba(8, 8, 8, 0.05);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Urbanist, "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.015em; margin: 0 0 12px; line-height: 1.25; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 19px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 650; }
p { margin: 0 0 12px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--panel); padding: 10px 14px; border-radius: var(--radius-sm); z-index: 10; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.nav { background: var(--panel); border-right: 1px solid var(--line); padding: 22px 14px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.brand { font-family: Inter, sans-serif; font-weight: 700; font-size: 17px; margin: 0 10px 20px; line-height: 1.3; }
.brand span { display: block; color: var(--muted); font-family: Urbanist, sans-serif; font-weight: 500; font-size: 13px; }
.nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; min-height: 40px; }
.nav a:hover { background: var(--chip); }
.nav a.active, .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav .section { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin: 18px 12px 6px; }
.main { padding: 32px 36px 64px; max-width: 1200px; width: 100%; min-width: 0; }
.shell > *, .grid-2 > * { min-width: 0; }

.intro { background: var(--violet-soft); border-radius: var(--radius-sm); padding: 14px 18px; margin: 0 0 22px; max-width: 820px; }
.intro p:last-child { margin-bottom: 0; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 20px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 20px; }
.grid-2 { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .label { color: var(--muted); font-size: 14px; }
.stat .value { font-family: Inter, sans-serif; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .sub { color: var(--muted); font-size: 13px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 14px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--chip); color: var(--muted); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.chip.violet { background: var(--violet-soft); color: var(--violet); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--muted); }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); } .dot.warn { background: #D99A00; }

.muted { color: var(--muted); }
.small { font-size: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pre { white-space: pre-wrap; font-family: inherit; background: var(--raised); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; }
code { background: var(--chip); padding: 1px 6px; border-radius: 6px; font-size: 0.92em; }

button, .btn { font: inherit; font-weight: 600; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 9px 16px; min-height: 42px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--muted); background: var(--raised); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover, .btn.primary:hover { filter: brightness(1.06); background: var(--accent); }
button.danger { color: var(--bad); border-color: #F1C4C4; }
button.small, .btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
input, textarea, select { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid #C9CAD0; border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); min-height: 44px; }
input:focus, textarea:focus, select:focus { border-color: var(--focus); }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; vertical-align: middle; margin-right: 8px; accent-color: var(--accent); }
textarea { min-height: 120px; resize: vertical; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
.help { color: var(--muted); font-size: 14px; margin-top: 4px; }
form.inline { display: inline; }
details summary { cursor: pointer; }

.task { border-left: 5px solid var(--line); }
.task.p1 { border-left-color: var(--accent); }
.task.approval { border-left-color: var(--violet); }
.flash { background: var(--sun-soft); border: 1px solid #F5E39A; border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; }
.empty { color: var(--muted); padding: 20px 0; text-align: center; }

/* Public pages (intake form, thank-you) */
.public { max-width: 640px; margin: 40px auto; padding: 0 16px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 4px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav .section { display: none; }
  .brand { width: 100%; margin: 0 8px 8px; }
  .main { padding: 20px 16px 48px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Client account areas (one per product site) */
.portal-top { background: var(--panel); border-bottom: 1px solid var(--line); }
.portal-top .inner { max-width: 1040px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.portal-top .name { font-weight: 700; font-size: 18px; color: var(--ink); }
.portal-top nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.portal-top nav a { padding: 6px 12px; border-radius: 9px; color: var(--ink); }
.portal-top nav a.active, .portal-top nav a:hover { background: var(--chip); text-decoration: none; }
.portal-main { max-width: 1040px; margin: 0 auto; padding: 28px 16px 60px; }
.portal-narrow { max-width: 440px; margin: 56px auto; padding: 0 16px; }
.portal-foot { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; color: var(--muted); font-size: 13px; }
.next { border-left: 4px solid var(--accent); }
.next .btn.primary { margin-top: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 30px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: -2px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .mark { position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); }
.timeline li.done .mark { background: var(--ok); border-color: var(--ok); }
.timeline li.current .mark { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.timeline li.upcoming { color: var(--muted); }
.feed-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.feed-item:last-child { border-bottom: 0; }
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); }
.readonly-banner { background: var(--violet); color: #fff; padding: 8px 16px; text-align: center; font-size: 13px; }
.calendly-inline-widget { min-width: 280px; height: 700px; }
.portal-main a:not(.btn), .portal-narrow a:not(.btn) { color: var(--accent); }