/* Client portal. Design language from the Pipeline CRM (crm/src/app/globals.css):
   cool-tinted neutrals, ink for actions, color only for meaning, frosted glass over a soft color field.
   Every type size is fluid (clamp). Change this file → bump PORTAL_CSS_V in inc.php. */
:root {
  color-scheme: light;
  --canvas: oklch(0.958 0.007 265);
  --surface: oklch(0.997 0.0015 265);
  --sunken: oklch(0.962 0.005 265);
  --sunken-2: oklch(0.94 0.007 265);
  --line: oklch(0.885 0.008 265);
  --line-strong: oklch(0.8 0.01 265);
  --ink: oklch(0.22 0.018 268);
  --ink-2: oklch(0.4 0.017 268);
  --ink-3: oklch(0.49 0.015 268);
  --ink-4: oklch(0.55 0.013 268);
  --accent: oklch(0.52 0.19 258);
  --accent-hover: oklch(0.47 0.19 258);
  --accent-deep: oklch(0.3 0.11 262);
  --accent-soft: oklch(0.955 0.03 256);
  --danger: oklch(0.52 0.19 25);
  --danger-soft: oklch(0.965 0.025 25);
  --warn: oklch(0.5 0.12 62);
  --warn-soft: oklch(0.97 0.04 85);
  --success: oklch(0.48 0.14 148);
  --success-soft: oklch(0.965 0.035 145);
  --st-0: #2a78d6; --st-1: #6250d6; --st-2: #eb6834; --st-3: #eda100; --st-4: #1baf7a; --st-5: #0f8f8f; --st-6: #0ca30c;

  --shadow-xs: 0 1px 1.5px oklch(0.22 0.02 268 / 0.05);
  --shadow-card: 0 1px 1px oklch(0.22 0.02 268 / 0.06), 0 2px 5px -1px oklch(0.22 0.02 268 / 0.09), 0 0 0 0.5px oklch(0.22 0.02 268 / 0.04);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --fs-11: clamp(.6875rem, .67rem + .05vw, .71875rem);
  --fs-12: clamp(.75rem, .73rem + .06vw, .78125rem);
  --fs-13: clamp(.8125rem, .79rem + .08vw, .84375rem);
  --fs-14: clamp(.84375rem, .82rem + .1vw, .875rem);
  --fs-15: clamp(.875rem, .85rem + .12vw, .9375rem);
  --fs-17: clamp(1rem, .96rem + .15vw, 1.0625rem);
  --fs-title: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --fs-big: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
  --gutter: clamp(1rem, .6rem + 1.6vw, 1.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink); font: 400 var(--fs-14)/1.55 var(--font); font-feature-settings: "cv11", "ss01"; }
::selection { background: oklch(0.58 0.17 256 / 0.18); }
h1, h2, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.i { width: 15px; height: 15px; flex-shrink: 0; }

/* ambient color field + glass */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48rem 32rem at 8% -6%, oklch(0.75 0.13 256 / 0.32), transparent 70%),
    radial-gradient(40rem 30rem at 96% 4%, oklch(0.8 0.12 45 / 0.26), transparent 70%),
    radial-gradient(44rem 34rem at 70% 108%, oklch(0.82 0.12 165 / 0.26), transparent 70%),
    radial-gradient(36rem 28rem at 18% 100%, oklch(0.85 0.12 85 / 0.22), transparent 70%),
    var(--canvas);
}
.glass {
  background: oklch(0.997 0.003 265 / 0.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid oklch(0.86 0.01 265 / 0.7);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7), 0 1px 2px oklch(0.22 0.02 268 / 0.04), 0 8px 24px -12px oklch(0.22 0.02 268 / 0.12);
}
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--surface); backdrop-filter: none; } }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; border-width: 0 0 1px; border-radius: 0; }
.top__in { max-width: 1240px; margin: 0 auto; height: 56px; padding: 0 var(--gutter); display: flex; align-items: center; gap: clamp(.75rem, .2rem + 2vw, 2rem); }
.brand { display: flex; align-items: center; gap: .6rem; font: 600 var(--fs-15)/1 var(--font); letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand .mark { width: 28px; height: 28px; color: var(--accent); }
.brand--light { color: #fff; }
.nav { display: flex; gap: .25rem; font: 600 var(--fs-13)/1 var(--font); }
.nav a { padding: .5rem .75rem; border-radius: 8px; color: var(--ink-3); text-decoration: none; transition: background .15s var(--ease), color .15s; }
.nav a:hover { background: oklch(1 0 0 / .5); color: var(--ink); }
.nav a[aria-current="page"] { background: oklch(1 0 0 / .72); color: var(--ink); box-shadow: var(--shadow-xs); }
.me { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.me__name { font: 600 var(--fs-13)/1 var(--font); color: var(--ink-2); }
.avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 var(--fs-11)/1 var(--font); letter-spacing: .02em; box-shadow: inset 0 0 0 1px oklch(0.52 0.19 258 / .15); }
@media (max-width: 640px) { .me__name, .hide-sm { display: none; } .brand span { display: none; } }

/* page */
.page { width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(1.25rem, .9rem + 1.5vw, 2rem) var(--gutter) 3rem; display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem); align-content: start; flex: 1; }
.phead { display: grid; gap: .5rem; }
.phead--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.phead--row > div { display: grid; gap: .4rem; }
.phead__meta { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-size: var(--fs-13); }
.phead__sum { max-width: 64ch; }
.phead__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.phead__acts:empty { display: none; }
.h-title { font: 600 var(--fs-title)/1.15 var(--font); letter-spacing: -.025em; }
.sub { font-size: var(--fs-15); color: var(--ink-3); }
.back { justify-self: start; margin-left: -.6rem; margin-bottom: -.5rem; }

.layout { display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem); align-items: start; }
.layout__main, .layout__side { display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem); min-width: 0; align-content: start; }
@media (min-width: 1040px) { .layout { grid-template-columns: minmax(0, 1fr) 380px; } }

.card { border-radius: 16px; padding: clamp(1.1rem, .9rem + .8vw, 1.5rem); display: grid; gap: .9rem; align-content: start; min-width: 0; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.card h2 { font: 600 var(--fs-15)/1.3 var(--font); letter-spacing: -.01em; }
.card--danger { border-color: oklch(0.85 0.06 25 / .8); }
.empty { text-align: center; padding: 3rem 1.5rem; }
.label { font: 600 var(--fs-11)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* utilities */
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-13); }
.strong { font-weight: 600; }
.block { display: block; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.break { word-break: break-all; }
.txt-danger { color: var(--danger); font-weight: 600; }
.quiet-link { color: var(--ink-3); }
.quiet-link:hover { color: var(--ink); }
.strong-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.strong-link:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }
.sep { padding-top: .9rem; border-top: 1px solid var(--line); }
.grid2 { display: grid; gap: .75rem; }
@media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.25rem; padding: 0 .9rem; border-radius: 9px; border: 0; font: 600 var(--fs-13)/1 var(--font); white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), color .15s, transform .12s var(--ease); }
.btn:active { transform: translateY(.5px) scale(.98); }
.btn-primary { background: var(--accent); color: oklch(0.99 0.005 256); box-shadow: inset 0 1px 0 oklch(1 0 0 / .18), 0 1px 2px oklch(0.4 0.17 258 / .4), 0 0 0 1px oklch(0.46 0.18 258); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: inset 0 1px 0 oklch(1 0 0 / .18), 0 4px 12px -2px oklch(0.45 0.18 258 / .45), 0 0 0 1px oklch(0.42 0.18 258); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--sunken); color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-danger-solid { background: var(--danger); color: #fff; box-shadow: inset 0 1px 0 oklch(1 0 0 / .15), 0 1px 2px oklch(0.54 0.19 25 / .4); }
.btn-sm { height: 2rem; padding: 0 .7rem; font-size: var(--fs-12); border-radius: 8px; }
.btn-xs { height: 1.75rem; padding: 0 .55rem; font-size: var(--fs-12); border-radius: 7px; }
.btn-xs .i { width: 13px; height: 13px; }
.btn-lg { height: 2.75rem; font-size: var(--fs-14); border-radius: 10px; }
.btn-block { width: 100%; }

/* fields: floating labels in the CRM's field style */
.stack { display: grid; gap: .75rem; }
.stack--tight { gap: .55rem; }
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3rem; padding: 1.25rem .8rem .4rem; border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: 400 var(--fs-14)/1.4 var(--font); box-shadow: var(--shadow-xs); outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 5.25rem; resize: vertical; }
/* multi-line boxes: a solid strip behind the label, so scrolled text slides under it instead of through it */
.field--area::before { content: ""; position: absolute; z-index: 1; left: 1px; right: 16px; top: 1px; height: 1.3rem; border-radius: 8px 0 0 0; background: var(--surface); pointer-events: none; }
.field--area label { z-index: 2; }
.fs[disabled] .field--area::before { background: var(--sunken); }
.field select { appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8f9c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--line-strong); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.52 0.19 258 / .18); }
.field label { position: absolute; left: .8rem; top: .95rem; color: var(--ink-4); font: 400 var(--fs-14)/1.2 var(--font); pointer-events: none; transform-origin: left top; transition: transform .18s var(--ease), color .18s; }
.field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label, .field--fixed label {
  transform: translateY(-.55rem) scale(.8); font-weight: 600; color: var(--ink-3);
}
.field input:focus + label, .field textarea:focus + label { color: var(--accent); }
.inline { display: inline-flex; align-items: center; gap: .35rem; }
.inline--select .field select { min-height: 2.5rem; padding-top: 1rem; padding-bottom: .2rem; font-size: var(--fs-13); }
.inline--select .field label { top: .7rem; }
.inline--select .field { min-width: 8rem; }
.addrow { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding-top: .9rem; border-top: 1px solid var(--line); }
.addrow .btn { height: 3rem; }
.hint { display: flex; gap: .55rem; align-items: flex-start; padding: .65rem .8rem; border-radius: 10px; background: var(--sunken); color: var(--ink-2); font-size: var(--fs-13); }
.hint .i { margin-top: .15rem; color: var(--accent); }

/* messages */
.flash { padding: .75rem 1rem; border-radius: 10px; font-size: var(--fs-13); font-weight: 500; box-shadow: var(--shadow-xs); animation: pop .22s var(--ease) both; }
.flash--ok { background: var(--success-soft); color: var(--success); }
.flash--err { background: var(--danger-soft); color: var(--danger); }
.flash--key { display: grid; gap: .55rem; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.keybox { justify-self: start; padding: .55rem .8rem; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px oklch(0.5 0.12 62 / .3); font: 600 clamp(1rem, .95rem + .2vw, 1.125rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--ink); user-select: all; -webkit-user-select: all; }
.keybox__hint { font-weight: 500; color: var(--ink-2); font-size: var(--fs-12); }

/* pills, chips, tiles */
.spill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs), 0 0 0 1px var(--line); font: 600 var(--fs-12)/1 var(--font); color: var(--ink); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.st-0 { background: var(--st-0); } .st-1 { background: var(--st-1); } .st-2 { background: var(--st-2); } .st-3 { background: var(--st-3); }
.st-4 { background: var(--st-4); } .st-5 { background: var(--st-5); } .st-6 { background: var(--st-6); }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: 999px; font: 600 var(--fs-11)/1 var(--font); background: var(--sunken-2); color: var(--ink-2); white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill--paid, .pill--signed { background: var(--success-soft); color: var(--success); }
.pill--unpaid, .pill--sent { background: var(--warn-soft); color: var(--warn); }
.pill--overdue { background: var(--danger-soft); color: var(--danger); }
.chip { display: inline-flex; align-items: center; gap: .35rem; height: 1.75rem; padding: 0 .6rem; border-radius: 8px; background: var(--sunken); color: var(--ink-2); font: 600 var(--fs-12)/1 var(--font); white-space: nowrap; }
.chip .i { width: 13px; height: 13px; }
.chip--xs { height: 1.5rem; margin-top: .3rem; font-size: var(--fs-11); }
.chip--danger { background: var(--danger-soft); color: var(--danger); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--off { background: var(--sunken); color: var(--ink-4); }
.tile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--sunken); color: var(--ink-3); }
.tile .i { width: 16px; height: 16px; }
.tile--accent, .tile--blue { background: color-mix(in oklch, #2a78d6 13%, var(--surface)); color: #2a78d6; }
.tile--orange { background: color-mix(in oklch, #eb6834 13%, var(--surface)); color: #d0581f; }
.tile--green { background: color-mix(in oklch, #0ca30c 13%, var(--surface)); color: #0a8a0a; }
.tile--red { background: color-mix(in oklch, #d63a2a 13%, var(--surface)); color: #c4321f; }
.tile--violet { background: color-mix(in oklch, #6250d6 13%, var(--surface)); color: #5443c4; }

/* progress stepper: the line runs from the first dot to the last, no tail */
.stages { display: grid; }
.stage { position: relative; display: flex; align-items: center; gap: .75rem; padding: .4rem 0; font-size: var(--fs-13); color: var(--ink-4); }
.stage__dot { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.stage__dot .i { width: 12px; height: 12px; color: #fff; stroke-width: 3; }
.stage:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: calc(50% + 10px); height: calc(100% - 20px); width: 2px; border-radius: 2px; background: var(--line); }
.stage.is-done { color: var(--ink-2); }
.stage.is-done .stage__dot { background: var(--accent); box-shadow: none; }
.stage.is-done:not(:last-child)::before { background: var(--accent); }
.stage.is-now { color: var(--ink); font-weight: 600; }
.stage.is-now .stage__dot { box-shadow: inset 0 0 0 5px var(--accent), 0 0 0 4px oklch(0.52 0.19 258 / .15); }
@media (min-width: 820px) {
  .stages { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .stage { flex-direction: column; text-align: center; gap: .55rem; padding: 0 .25rem; }
  .stage:not(:last-child)::before { left: calc(50% + 10px); top: 9px; width: calc(100% - 20px); height: 2px; }
}
.next { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; padding: .85rem 1rem; border-radius: 12px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px oklch(0.52 0.19 258 / .12); }
.next > div { flex: 1 1 16rem; display: grid; gap: .15rem; }
.next__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: #fff; flex: none; }
.next__text { font: 600 var(--fs-14)/1.4 var(--font); }
.next .chip { background: var(--surface); }
.next .chip--danger { background: var(--danger-soft); }
.next .chip--warn { background: var(--warn-soft); }

/* meter */
.meter { display: block; height: 6px; border-radius: 3px; background: var(--sunken-2); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .6s var(--ease); }
.meter--sm { width: 100%; max-width: 7.5rem; height: 4px; margin-top: .45rem; }
.w0 { width: 0; } .w10 { width: 10%; } .w20 { width: 20%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; }
.w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; }

/* to-dos */
.todos { display: grid; }
.todo { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.todo:first-child { border-top: 0; padding-top: .25rem; }
.tick { width: 22px; height: 22px; margin-top: .05rem; border-radius: 7px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong), var(--shadow-xs); cursor: pointer; display: grid; place-items: center; color: transparent; transition: background .15s var(--ease), box-shadow .15s; }
.tick .i { width: 13px; height: 13px; stroke-width: 3; }
.tick:hover { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 3px oklch(0.52 0.19 258 / .12); }
.tick[aria-pressed="true"] { background: var(--accent); box-shadow: none; color: #fff; }
.todo__body { display: grid; gap: .3rem; min-width: 0; }
.todo__text { font-weight: 500; }
.todo.is-done .todo__text { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.todo__meta { font-size: var(--fs-12); color: var(--ink-4); }
.todo__note summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font: 600 var(--fs-12)/1 var(--font); color: var(--ink-3); list-style: none; padding: .25rem 0; }
.todo__note summary::-webkit-details-marker { display: none; }
.todo__note summary:hover { color: var(--accent); }
.todo__note summary .i { width: 13px; height: 13px; }
.todo__note[open] summary { margin-bottom: .45rem; }

/* lists + rows */
.list { display: grid; }
.row { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--line); min-width: 0; }
.list > .row:first-child, .list > li:first-child > .row { border-top: 0; padding-top: 0; }
.row--wrap { align-items: flex-start; }
.row__main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.row__title { font: 600 var(--fs-14)/1.35 var(--font); color: var(--ink); }
.row__meta { font-size: var(--fs-12); color: var(--ink-3); }
.row__side { display: flex; align-items: center; gap: .4rem; flex: none; }
.row.is-done .row__title { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.row--link { text-decoration: none; color: var(--ink); border-radius: 10px; margin: 0 -.5rem; padding: .7rem .5rem; transition: background .15s; }
.list > li:first-child > .row--link { padding-top: .7rem; }
.row--link:hover { background: var(--sunken); }
.row--link > .i { color: var(--ink-4); }
.acts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; margin-left: -.55rem; }
.note { display: flex; gap: .45rem; margin-top: .35rem; padding: .5rem .65rem; border-radius: 8px; background: var(--warn-soft); color: var(--ink-2); font-size: var(--fs-13); }
.note .i { margin-top: .2rem; color: var(--warn); width: 13px; height: 13px; }

/* row menus (details popover, no script) + collapsible add forms */
.menu { position: relative; }
.card:has(.menu[open]) { position: relative; z-index: 25; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--sunken); color: var(--ink); }
.menu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 15.5rem; padding: .5rem; border-radius: 12px; display: grid; gap: .25rem;
  background: oklch(0.997 0.003 265 / .96); box-shadow: inset 0 1px 0 oklch(1 0 0 / .8), 0 0 0 1px oklch(0.22 0.02 268 / .06), 0 10px 20px -6px oklch(0.22 0.02 268 / .14), 0 24px 48px -16px oklch(0.22 0.02 268 / .26);
  animation: pop .18s var(--ease) both; }
.menu__panel > .stack { padding: .25rem .25rem .5rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.menu__item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 8px; background: none; font: 500 var(--fs-13)/1.2 var(--font); color: var(--ink-2); text-align: left; text-decoration: none; cursor: pointer; }
.menu__item:hover { background: var(--sunken); color: var(--ink); }
.menu__item .i { width: 14px; height: 14px; color: var(--ink-4); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger .i { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-soft); color: var(--danger); }
.adder { padding-top: .9rem; border-top: 1px solid var(--line); }
.adder > summary { list-style: none; width: max-content; }
.adder > summary::-webkit-details-marker { display: none; }
.adder[open] > summary { margin-bottom: .75rem; background: var(--sunken); }
.btn-icon { width: 1.75rem; padding: 0; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* shared folder card */
.folder { background: linear-gradient(160deg, oklch(0.97 0.025 256 / .9), oklch(0.997 0.003 265 / .82)); }
.folder__top { display: flex; align-items: center; gap: .75rem; }
.folder__top .tile { width: 40px; height: 40px; border-radius: 11px; }
.folder__top .tile .i { width: 20px; height: 20px; }

/* timeline (updates, activity) */
.timeline { display: grid; }
.timeline li { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: .8rem; padding-bottom: 1rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--line); border-radius: 2px; }
.timeline__dot { width: 12px; height: 12px; margin-top: .3rem; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px var(--accent); }
.tl--done .timeline__dot { box-shadow: inset 0 0 0 3px var(--success); }
.tl--note .timeline__dot { box-shadow: inset 0 0 0 3px var(--st-3); }
.tl--login .timeline__dot { box-shadow: inset 0 0 0 3px var(--line-strong); }
.timeline time { display: block; font: 600 var(--fs-11)/1.4 var(--font); color: var(--ink-4); letter-spacing: .02em; }
.timeline p { color: var(--ink-2); }
.timeline q { font-weight: 600; color: var(--ink); }

/* admin KPIs + table */
.kpis { border-radius: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; min-width: 0; }
.kpi__val { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.kpi__val .num { font: 600 var(--fs-17)/1.2 var(--font); letter-spacing: -.015em; }
.kpi__hint { font-size: var(--fs-12); color: var(--ink-4); }
.kpi--attn { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: .45rem; border-top: 1px solid var(--line); }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (min-width: 900px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; padding: .25rem 0; }
  .kpi + .kpi { border-left: 1px solid var(--line); }
  .kpi--attn { grid-column: auto; border-top: 0; justify-content: center; }
}
.table-wrap { overflow-x: auto; margin: 0 -.25rem; }
.dash { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.dash th { text-align: left; font: 600 var(--fs-11)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 .75rem .7rem .25rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dash td { padding: .85rem .75rem .85rem .25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.dash tbody tr { transition: background .15s; }
.dash tbody tr:hover { background: oklch(1 0 0 / .55); }
.dash tr:last-child td { border-bottom: 0; }
.who { display: flex; gap: .65rem; align-items: center; }
@media (max-width: 759px) {
  .dash thead { display: none; }
  .dash, .dash tbody, .dash tr, .dash td { display: block; width: 100%; }
  .dash tr { padding: .9rem .25rem; border-bottom: 1px solid var(--line); }
  .dash tr:last-child { border-bottom: 0; }
  .dash td { display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: .75rem; padding: .3rem 0; border: 0; }
  .dash td::before { content: attr(data-label); grid-row: 1 / span 4; font: 600 var(--fs-11)/1.8 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
  .dash td > * { grid-column: 2; justify-self: start; }
}

/* dashboard: KPI cards, project rows, two-up bottom */
.kgrid { display: grid; gap: clamp(.6rem, .4rem + .6vw, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .kgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kcard { flex-direction: column; gap: .6rem; padding: .9rem; } }
.kcard { border-radius: 16px; padding: 1rem 1.1rem; display: flex; gap: .85rem; align-items: flex-start; }
.kcard .tile { width: 36px; height: 36px; border-radius: 10px; }
.kcard__body { display: grid; gap: .1rem; min-width: 0; }
.kcard__num { font: 600 clamp(1.5rem, 1.25rem + .8vw, 1.75rem)/1.1 var(--font); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.kcard__label { font: 600 var(--fs-13)/1.3 var(--font); color: var(--ink); }
.kcard__hint { font-size: var(--fs-12); color: var(--ink-4); }
.kcard__hint.is-alert { color: var(--danger); font-weight: 600; }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card__head--pad { padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid var(--line); }
.pad { padding: 1.25rem; }
/* projects table: one shared column template so every row lines up */
.ptable { display: grid; }
.prow { display: grid; grid-template-columns: minmax(15rem, 1.35fr) 11rem minmax(13rem, 1.6fr) 5.5rem 7rem 6.5rem 16px; gap: 1.25rem; align-items: center; padding: .95rem 1.25rem; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); transition: background .15s var(--ease); }
.prow--head { padding-top: .7rem; padding-bottom: .7rem; border-top: 0; font: 600 var(--fs-11)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); background: oklch(0.97 0.004 265 / .6); }
a.prow:hover { background: oklch(1 0 0 / .65); }
a.prow:hover > .i { color: var(--accent); transform: translateX(2px); }
.prow > .i { color: var(--ink-4); transition: transform .15s var(--ease), color .15s; }
.prow.is-live { opacity: .6; }
.prow__who { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.avatar--sq { width: 36px; height: 36px; border-radius: 10px; font-size: var(--fs-12); }
.prow__id { display: grid; min-width: 0; }
.prow__name { display: flex; align-items: center; gap: .45rem; font: 600 var(--fs-14)/1.3 var(--font); min-width: 0; }
.prow__name { flex-wrap: wrap; row-gap: .2rem; overflow-wrap: anywhere; }
.prow__av { position: relative; flex: none; }
.prow__av .badge { position: absolute; top: -.4rem; right: -.4rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; justify-content: center; font-size: .625rem; box-shadow: 0 0 0 2px #fff; }
.prow__av .badge .i { display: none; }
.badge { flex: none; display: inline-flex; align-items: center; gap: .2rem; height: 1.25rem; padding: 0 .4rem; border-radius: 999px; background: #eb6834; color: #fff; font: 700 var(--fs-11)/1 var(--font); }
.badge .i { width: 11px; height: 11px; }
.prow__client { font-size: var(--fs-12); color: var(--ink-3); overflow-wrap: anywhere; }
.prow__stage { display: grid; gap: .4rem; justify-items: start; }
.prow__step { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-11); color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prow__step .meter--sm { width: 4.5rem; margin: 0; }
.prow__next { display: grid; gap: .25rem; min-width: 0; font-size: var(--fs-13); }
.prow__nexttext { color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.prow__due { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.prow__due .i { width: 12px; height: 12px; }
.prow__due.is-late { color: var(--danger); font-weight: 600; }
.prow__cell { font-size: var(--fs-13); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prow__cell b { color: var(--ink); }
.prow__seen { color: var(--ink-3); }
@media (max-width: 1100px) {
  .prow { grid-template-columns: minmax(0, 1fr) auto auto 16px; grid-template-areas: "who todo inv chev" "stage stage stage stage" "next next next next"; row-gap: .6rem; }
  .prow--head { display: none; }
  .prow__who { grid-area: who; } .prow > .i { grid-area: chev; } .prow__stage { grid-area: stage; grid-auto-flow: column; align-items: center; justify-content: start; gap: .75rem; }
  .prow__next { grid-area: next; } .prow__cell:nth-of-type(4) { grid-area: todo; } .prow__cell:nth-of-type(5) { grid-area: inv; } .prow__seen { display: none; }
}
@media (max-width: 600px) {
  .prow { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "who chev" "stage stage" "next next" "todo todo" "inv inv"; }
  .prow__cell::before { content: attr(data-label) ": "; color: var(--ink-4); }
}
.duo { display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem); align-items: start; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.row--link .num { font-size: var(--fs-13); }
.menu--wide .menu__panel { width: 19rem; }
.menu--wide .menu__panel > .stack { border-bottom: 0; margin: 0; padding: .35rem; }

/* stage focus card ("Right now") */
.focus h2 { font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.25 var(--font); letter-spacing: -.02em; }
.focus__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.offer { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .offer { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: start; } }
.offer__main { display: grid; gap: .55rem; justify-items: start; }
.offer__price { font: 700 clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem)/1.05 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.incl { display: grid; gap: .45rem; margin-top: .5rem; }
.incl li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-14); color: var(--ink-2); }
.incl .i { margin-top: .2rem; color: var(--success); stroke-width: 2.5; }
.offer__act { display: grid; gap: .75rem; align-content: start; padding: 1.1rem; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.reveal > summary { list-style: none; width: max-content; max-width: 100%; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal[open] > summary { margin-bottom: .75rem; }
.offer__act .reveal > .btn-lg, .offer__act > .btn { width: 100%; }
.offer__act .reveal > summary.btn-lg { width: 100%; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-13); color: var(--ink-2); cursor: pointer; }
.check input { margin: .15rem 0 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.signform { padding: .9rem; border-radius: 12px; background: var(--sunken); }
.after { display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.nextsteps { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.nextsteps li { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-13); color: var(--ink-2); }
.nextsteps span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 var(--fs-11)/1 var(--font); flex: none; }
.tasks { display: grid; gap: .5rem; }
.task { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .8rem .9rem; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs), 0 0 0 1px var(--line); }
.task__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; }
.task.is-done .task__mark { background: var(--success); box-shadow: none; color: #fff; }
.task__mark .i { width: 13px; height: 13px; stroke-width: 3; }
.task__main { flex: 1 1 12rem; min-width: 0; }
.task__title { font: 600 var(--fs-14)/1.3 var(--font); }
.task.is-done .task__title { color: var(--ink-3); }
.task__meta { font-size: var(--fs-12); color: var(--ink-3); }
.bigmeter { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .15rem .6rem; max-width: 26rem; }
.bigmeter__num { font: 700 clamp(1.5rem, 1.3rem + .8vw, 1.875rem)/1 var(--font); letter-spacing: -.02em; }
.bigmeter .meter { grid-column: 1 / -1; margin-top: .5rem; }
.split { display: grid; gap: .75rem; }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }
.split .reveal > summary { width: 100%; }
.live { display: flex; gap: 1rem; align-items: center; }
.live__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in oklch, #0ca30c 14%, var(--surface)); color: #0a8a0a; flex: none; }
.live__icon .i { width: 24px; height: 24px; }
.msgs { display: grid; gap: .5rem; }
.msgs li { padding: .6rem .75rem; border-radius: 10px; background: var(--sunken); font-size: var(--fs-13); color: var(--ink-2); display: grid; gap: .2rem; }
.msgs .msgs__head { background: none; padding: .25rem 0 0; }
.msgs__meta { font-size: var(--fs-11); color: var(--ink-4); }
.ok { color: var(--success); }
.msgbody { font-size: var(--fs-13); color: var(--ink); margin-top: .2rem; white-space: normal; }

/* admin: stage details, records */
.fs { border: 0; margin: 0; padding: 0; display: grid; gap: .65rem; min-width: 0; }
.fsrow { display: grid; gap: .9rem; padding-block: 1.25rem; }
.fsrow + .fsrow { border-top: 1px solid var(--line); }
.fsrow:first-of-type { padding-top: .25rem; }
.fsrow__lbl { display: grid; align-content: start; justify-items: start; gap: .35rem; }
.fsrow__lbl h3 { display: flex; align-items: center; gap: .45rem; font: 600 var(--fs-14)/1.3 var(--font); color: var(--ink); }
.fsrow__lbl p { font-size: var(--fs-12); line-height: 1.45; color: var(--ink-3); max-width: 15rem; }
.fsrow__save { padding-top: 1rem; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .fsrow { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.75rem; } }
.fs[disabled] .field input, .fs[disabled] .field textarea { background: var(--sunken); color: var(--ink-3); }
.trail { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .25rem; font-size: var(--fs-12); color: var(--ink-3); }
.trail span { display: inline-flex; align-items: center; gap: .35rem; cursor: help; }
.trail .i { width: 13px; height: 13px; opacity: .7; }
.pill--msg { background: color-mix(in oklch, #eb6834 14%, var(--surface)); color: #b5501f; }
.tl--big .timeline__dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }

/* ===== client page: hero band, one focus panel, plain sections, one file panel ===== */
.hero { position: relative; overflow: hidden; background: var(--accent-deep); color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40rem 26rem at 88% -10%, oklch(0.62 0.17 45 / .32), transparent 70%), radial-gradient(36rem 26rem at 0% 110%, oklch(0.7 0.14 165 / .26), transparent 70%), radial-gradient(34rem 24rem at 45% 40%, oklch(0.6 0.18 256 / .42), transparent 72%); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(oklch(1 0 0 / .045) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / .045) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 70% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 70% 0%, #000, transparent 75%); }
.hero__in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) var(--gutter) clamp(5.5rem, 4.5rem + 4vw, 7.5rem); display: grid; gap: .9rem; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: .55rem; font: 600 var(--fs-12)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: oklch(1 0 0 / .7); }
.hero__eyebrow .dot { box-shadow: 0 0 0 3px oklch(1 0 0 / .14); }
.hero__title { font: 600 clamp(2rem, 1.4rem + 2.6vw, 3.5rem)/1.04 var(--font); letter-spacing: -.035em; max-width: 22ch; text-wrap: balance; }
.hero__sum { max-width: 60ch; font-size: var(--fs-15); line-height: 1.6; color: oklch(1 0 0 / .66); }
.prog { margin-top: clamp(1rem, .7rem + 1.2vw, 1.75rem); display: grid; gap: .85rem; max-width: 64rem; }
.prog__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--fs-13); color: oklch(1 0 0 / .72); }
.prog__meta b { color: #fff; font-weight: 600; }
.prog__next { color: oklch(1 0 0 / .5); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.step { display: grid; gap: .65rem; padding-bottom: .35rem; color: oklch(1 0 0 / .38); font: 500 var(--fs-12)/1.3 var(--font); text-decoration: none; }
.step__bar { display: block; height: 6px; border-radius: 3px; background: oklch(1 0 0 / .16); transition: background .15s, box-shadow .15s; }
.step.is-done .step__bar { background: oklch(1 0 0 / .85); }
.step.is-now .step__bar { background: linear-gradient(90deg, oklch(1 0 0 / .95), oklch(0.85 0.1 220)); box-shadow: 0 0 14px oklch(0.8 0.12 230 / .7); }
.step__lbl { display: flex; align-items: flex-start; gap: .35rem; }
.step__lbl .i { flex: none; width: 12px; height: 12px; margin-top: .1rem; stroke-width: 3; color: oklch(0.85 0.12 160); }
.step__lbl .pulse { margin-top: .3rem; }
a.step { color: oklch(1 0 0 / .72); transition: color .15s; }
a.step:hover { color: #fff; }
a.step.is-done:hover .step__bar { background: #fff; }
.step.is-now { color: #fff; font-weight: 600; }
.step.is-view { color: #fff; font-weight: 600; }
.step.is-view .step__bar { box-shadow: 0 0 0 3px oklch(1 0 0 / .22); }
.step.is-now.is-view .step__bar { box-shadow: 0 0 0 3px oklch(1 0 0 / .22), 0 0 14px oklch(0.8 0.12 230 / .7); }
@media (max-width: 640px) {
  .step { padding-block: .5rem; }
  .step__lbl { display: none; }
}
.pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: oklch(0.85 0.1 220); box-shadow: 0 0 0 0 oklch(0.85 0.1 220 / .6); animation: pulse 2s infinite; }
.is-view .pulse { background: var(--accent); }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px oklch(0.85 0.1 220 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.85 0.1 220 / 0); } }
.focus--recap::before { background: linear-gradient(90deg, var(--success), oklch(0.7 0.12 180)); }
.focus__label--done { display: inline-flex; align-items: center; gap: .4rem; color: var(--success); }
.focus__label--done .i { width: 13px; height: 13px; stroke-width: 3; }
.agreed { display: grid; gap: .5rem; justify-items: start; padding: 1.1rem 1.25rem; border-radius: 14px; background: var(--sunken); }

.cpage { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: calc(-1 * clamp(3.5rem, 3rem + 2vw, 5rem)) auto 0; padding: 0 var(--gutter) 4rem; display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); flex: 1; }
.cpage > .flash { justify-self: start; }

.focus { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); border-radius: 22px; background: var(--surface);
  box-shadow: 0 0 0 1px oklch(0.22 0.02 268 / .05), 0 2px 4px oklch(0.22 0.02 268 / .04), 0 24px 60px -20px oklch(0.25 0.06 262 / .35); }
.focus { overflow: hidden; }
.focus::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent), oklch(0.7 0.14 200), oklch(0.75 0.15 60)); opacity: .9; pointer-events: none; }
.focus__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.focus__label { font: 600 var(--fs-11)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.focus__next { display: block; max-width: 44rem; font-size: var(--fs-13); line-height: 1.5; color: var(--ink-2); }
.focus__next .i { color: var(--accent); width: 14px; height: 14px; vertical-align: -2px; margin-right: .4rem; }
.todo__said { justify-self: start; max-width: 100%; padding: .45rem .75rem; border-radius: 4px 12px 12px 12px; background: oklch(1 0 0 / .7); box-shadow: 0 0 0 1px var(--line); font-size: var(--fs-13); color: var(--ink-2); }
/* confirmations float as a toast instead of pushing the page around */
.cpage > .flash { position: fixed; z-index: 50; right: var(--gutter); bottom: var(--gutter); max-width: min(26rem, calc(100vw - 2 * var(--gutter))); box-shadow: 0 0 0 1px oklch(0.22 0.02 268 / .06), 0 14px 32px -10px oklch(0.22 0.02 268 / .3); animation: toast 4.5s var(--ease) both; }
.cpage > .flash--key, .cpage > .flash--err { animation: pop .22s var(--ease) both; }
@keyframes toast { 0% { opacity: 0; transform: translateY(10px); } 6%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); visibility: hidden; } }
.focus h2 { font: 600 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.15 var(--font); letter-spacing: -.025em; }
.focus .sub { max-width: 60ch; }
.offer__act { box-shadow: none; background: var(--sunken); }
.task { box-shadow: none; background: var(--sunken); }

.cols { display: grid; gap: clamp(2rem, 1.4rem + 2vw, 3rem); align-items: start; }
@media (min-width: 1040px) { .cols { grid-template-columns: minmax(0, 1fr) 360px; } }
.cols__main { display: grid; gap: clamp(2rem, 1.4rem + 2vw, 3rem); min-width: 0; }
.sect { display: grid; gap: 1rem; }
.sect__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sect__head h2 { font: 600 var(--fs-17)/1.3 var(--font); letter-spacing: -.015em; }
.sect__aside { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-13); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sect__aside .meter--sm { width: 4.5rem; margin: 0; }
.meter--thin { height: 3px; margin-top: -.5rem; }
.sect .todos { gap: 1.35rem; }
.sect .todo, .sect .todo:first-child { border-top: 0; padding: 0; }
.timeline--lg li { gap: 1rem; padding-bottom: 1.4rem; }
.timeline--lg p { font-size: var(--fs-14); line-height: 1.6; }

.file { display: grid; border-radius: 20px; background: oklch(0.997 0.003 265 / .72); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 0 0 1px oklch(0.86 0.01 265 / .7), inset 0 1px 0 oklch(1 0 0 / .7), 0 12px 32px -18px oklch(0.22 0.02 268 / .2); }
@media (min-width: 1040px) { .file { position: sticky; top: 76px; } }
.file__block { display: grid; gap: .75rem; padding: 1.25rem 1.35rem; }
.file__block + .file__block { border-top: 1px solid var(--line); }
.file__block--folder { background: linear-gradient(165deg, oklch(0.96 0.03 256 / .8), transparent 70%); border-radius: 20px 20px 0 0; }
.file__title { display: flex; align-items: center; gap: .5rem; }
.file__title .i { color: var(--accent); width: 16px; height: 16px; }
.file__title h2 { font: 600 var(--fs-14)/1.3 var(--font); letter-spacing: -.01em; }
.file__text { font-size: var(--fs-13); color: var(--ink-3); }
.flist { display: grid; }
.flist li { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.flist li:first-child { border-top: 0; padding-top: 0; }
.flist__main { flex: 1; min-width: 0; display: grid; gap: .05rem; }
.flist__title { font: 600 var(--fs-13)/1.35 var(--font); color: var(--ink); }
.flist__meta { font-size: var(--fs-12); color: var(--ink-3); }
.flist__go { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 .55rem; border-radius: 8px; color: var(--ink-3); text-decoration: none; font: 600 var(--fs-12)/1 var(--font); transition: background .15s, color .15s; }
.flist__go:hover { background: var(--sunken); color: var(--ink); }
.flist__go.is-pay { background: var(--accent); color: #fff; }
.flist__go.is-pay:hover { background: var(--accent-hover); }
.flist__link { flex: 1; display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.flist__link > .i { color: var(--ink-4); }
.flist__link:hover .flist__title { color: var(--accent); }
.file .msgs li { background: var(--sunken); }

/* printable documents (invoice, agreement) */
.docbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem var(--gutter); background: oklch(0.997 0.003 265 / .85); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.docbar__hint { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-12); color: var(--ink-3); }
kbd { padding: .05rem .35rem; border-radius: 5px; background: var(--sunken-2); font: 600 var(--fs-11)/1.4 var(--font); color: var(--ink-2); }
.docwrap { width: 100%; max-width: 860px; margin: 0 auto; padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) var(--gutter) 3rem; display: grid; gap: 1rem; }
.paper { background: #fff; border-radius: 6px; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); box-shadow: 0 0 0 1px oklch(0.22 0.02 268 / .06), 0 2px 4px oklch(0.22 0.02 268 / .04), 0 30px 60px -24px oklch(0.22 0.02 268 / .3); display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); color: var(--ink); }
.paper__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 2px solid var(--ink); }
.paper__brand { display: flex; gap: .7rem; align-items: center; }
.paper__brand .mark { width: 34px; height: 34px; color: var(--accent); }
.paper__brand b { display: block; font: 700 var(--fs-17)/1.2 var(--font); }
.paper__brand span { font-size: var(--fs-12); color: var(--ink-3); }
.paper__from { font-size: var(--fs-12); line-height: 1.6; color: var(--ink-3); text-align: right; }
.paper__title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.paper__title h1 { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.1 var(--font); letter-spacing: -.025em; }
.stamp { padding: .35rem .8rem; border-radius: 6px; border: 2px solid currentColor; font: 800 var(--fs-13)/1 var(--font); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-4deg); }
.stamp--paid { color: var(--success); }
.stamp--overdue { color: var(--danger); }
.paper__meta { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .paper__meta { grid-template-columns: 1fr auto; } }
.paper__meta p { margin-top: .35rem; font-size: var(--fs-14); line-height: 1.6; }
.paper dl { display: grid; grid-template-columns: auto auto; gap: .3rem 1.25rem; margin: 0; font-size: var(--fs-13); align-content: start; }
.paper dt { color: var(--ink-3); }
.paper dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.lines { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.lines th { text-align: left; font: 600 var(--fs-11)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: .6rem 0; border-bottom: 1px solid var(--line); }
.lines td { padding: .9rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lines .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1.5rem; }
.lines tfoot td { border-bottom: 0; padding-top: 1rem; font: 700 var(--fs-17)/1.2 var(--font); }
.paper__foot { display: grid; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: var(--fs-13); color: var(--ink-2); }
@media (min-width: 640px) { .paper__foot { grid-template-columns: 1fr 1fr; } }
.paper__foot p { margin-top: .35rem; line-height: 1.6; }
.clauses { list-style: decimal; padding-left: 1.25rem; display: grid; gap: 1.1rem; }
.clauses li::marker { font-weight: 700; color: var(--ink-3); }
.clauses h2 { font: 700 var(--fs-14)/1.3 var(--font); margin-bottom: .25rem; }
.clauses p, .clauses li li { font-size: var(--fs-13); line-height: 1.65; color: var(--ink-2); }
.clauses ul { list-style: disc; padding-left: 1.1rem; margin: .35rem 0; display: grid; gap: .15rem; }
.sigs { display: grid; gap: 1.25rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
@media (min-width: 640px) { .sigs { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.sig { display: grid; gap: .35rem; align-content: start; }
.sig__name { margin-top: .25rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line-strong); font: 600 var(--fs-17)/1.3 var(--font); }
.sig__name--signed { font: italic 500 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.3 Georgia, 'Times New Roman', serif; color: var(--accent-deep); }
.sig__meta { font-size: var(--fs-12); color: var(--ink-3); }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .ambient, .docbar, .foot, .flash, .noprint { display: none !important; }
  .docwrap { max-width: none; padding: 0; }
  .paper { box-shadow: none; padding: 0; border-radius: 0; }
  a { color: inherit; text-decoration: none; }
}

/* sign-in screens */
.auth { display: grid; min-height: 100dvh; flex: 1; }
@media (min-width: 1000px) { .auth { grid-template-columns: 1fr 1fr; } }
.auth__side { display: none; position: relative; overflow: hidden; background: var(--accent-deep); color: #fff; }
.auth__side::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(34rem 26rem at 85% 10%, oklch(0.62 0.17 45 / .35), transparent 70%), radial-gradient(30rem 24rem at 10% 90%, oklch(0.7 0.14 165 / .3), transparent 70%), radial-gradient(28rem 22rem at 40% 45%, oklch(0.6 0.18 256 / .45), transparent 70%); }
@media (min-width: 1000px) { .auth__side { display: flex; } }
.auth__col { position: relative; width: 100%; max-width: 460px; margin: 0 auto; padding: 3rem 1.5rem; display: flex; flex-direction: column; }
.auth__story { margin: auto 0; padding: 3rem 0; }
.auth__big { margin-top: 2.5rem; font: 600 var(--fs-big)/1.15 var(--font); letter-spacing: -.025em; }
.auth__sub { margin-top: .75rem; max-width: 40ch; font-size: var(--fs-15); line-height: 1.6; color: oklch(1 0 0 / .62); }
.auth__foot { font-size: var(--fs-12); color: oklch(1 0 0 / .45); }
.mini { display: grid; gap: .6rem; max-width: 340px; }
.mini__row { display: flex; align-items: center; gap: .65rem; padding: .8rem .9rem; border-radius: 12px; background: oklch(1 0 0 / .08); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .1); }
.mini__row b { height: 7px; width: 42%; border-radius: 4px; background: oklch(1 0 0 / .55); }
.mini__row em { margin-left: auto; height: 7px; width: 18%; border-radius: 4px; background: oklch(1 0 0 / .22); }
.mini__row.is-on { background: oklch(1 0 0 / .16); transform: translateX(14px) rotate(-1deg); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .2), 0 18px 36px -12px oklch(0 0 0 / .45); }
.auth__main { position: relative; display: flex; align-items: center; justify-content: center; padding: 3rem var(--gutter); }
.auth__card { width: 100%; max-width: 460px; border-radius: 24px; padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); display: grid; gap: 1rem; }
.auth__card h1 { font: 600 clamp(1.4rem, 1.2rem + .8vw, 1.625rem)/1.2 var(--font); letter-spacing: -.02em; }
.auth__card .sub { margin-top: -.5rem; }
.auth__brand-sm { margin-bottom: 1.5rem; }
@media (min-width: 1000px) { .auth__brand-sm { display: none; } }
.auth__note { margin-top: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: var(--fs-13); color: var(--ink-3); }
.auth__note a { color: var(--ink); font-weight: 600; text-decoration-color: var(--line-strong); }
.pop { animation: pop .22s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }

.foot { padding: 1.5rem var(--gutter) 2rem; text-align: center; font-size: var(--fs-12); color: var(--ink-4); }
.foot a { color: var(--ink-3); }
.auth + .foot { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* dashboard activity feed: icon, what happened, which client, when */
.feed { list-style: none; margin: 0 -.6rem; padding: 0; display: grid; gap: .15rem; }
.feed__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .6rem; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .15s var(--ease); }
a.feed__row:hover { background: oklch(1 0 0 / .7); }
.feed__ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--sunken-2); color: var(--ink-4); }
.feed__ic .i { width: 14px; height: 14px; }
.feed__ic--ok { background: var(--success-soft); color: var(--success); }
.feed__ic--warn { background: var(--warn-soft); color: var(--warn); }
.feed__main { display: grid; gap: .15rem; min-width: 0; padding-top: .1rem; }
.feed__line { font-size: var(--fs-13); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.feed__line b { color: var(--ink); font-weight: 600; }
.feed__who { font-size: var(--fs-12); color: var(--ink-4); }
.feed__time { padding-top: .15rem; font-size: var(--fs-12); color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }

.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; }

/* invoice generator + invoices tab */
.grid3 { display: grid; gap: .75rem; }
@media (min-width: 560px) { .grid3 { grid-template-columns: 1.2fr .8fr 1fr; } }
.gen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .75rem; border-radius: 12px; background: var(--accent-soft); }
.card__pad { padding: 1.1rem 1.25rem; }
.seg { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: 10px; background: var(--sunken); }
.seg a { padding: .4rem .75rem; border-radius: 8px; font: 600 var(--fs-12)/1 var(--font); color: var(--ink-3); text-decoration: none; transition: background .15s, color .15s; }
.seg a:hover { color: var(--ink); }
.seg a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px oklch(0 0 0 / .08); }
.menu--inv .menu__panel { width: min(24rem, 90vw); }
.itable { display: grid; }
.irow { display: grid; grid-template-columns: minmax(12rem, 1.6fr) minmax(9rem, 1.2fr) 7rem 7rem 6.5rem 6rem 8.5rem; gap: 1rem; align-items: center; padding: .85rem 1.25rem; border-top: 1px solid var(--line); font-size: var(--fs-13); color: var(--ink-2); }
.irow--head { border-top: 0; padding-block: .65rem; font: 600 var(--fs-11)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); background: oklch(0.97 0.004 265 / .6); }
.irow .r { text-align: right; }
.irow__inv { display: grid; gap: .15rem; min-width: 0; }
.irow__client a { color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.irow__client a:hover { color: var(--accent); }
.irow__d { font-variant-numeric: tabular-nums; }
.irow__amt { font-weight: 600; color: var(--ink); }
.irow__act { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; }
@media (max-width: 980px) {
  .irow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "inv amt" "client st" "iss due" "act act"; row-gap: .35rem; }
  .irow--head { display: none; }
  .irow__inv { grid-area: inv; } .irow__amt { grid-area: amt; } .irow__client { grid-area: client; }
  .irow > [data-label="Status"] { grid-area: st; justify-self: end; }
  .irow > [data-label="Issued"] { grid-area: iss; } .irow > [data-label="Due"] { grid-area: due; justify-self: end; }
  .irow > [data-label="Issued"]::before, .irow > [data-label="Due"]::before { content: attr(data-label) " "; color: var(--ink-4); }
  .irow__act { grid-area: act; justify-content: flex-start; }
}
.card__head--pad .small { white-space: nowrap; }
.menu__title { font: 600 var(--fs-13)/1.3 var(--font); color: var(--ink); padding: .15rem .1rem .2rem; }
.menu--inv textarea { min-height: 6rem; }
@media (max-width: 980px) { .irow__act .menu__panel { left: 0; right: auto; } }
.menu--inv .menu__panel { background: var(--surface); backdrop-filter: none; box-shadow: 0 18px 48px -12px oklch(0.2 0.03 265 / .28), 0 0 0 1px var(--line); }

/* admin updates: composer bar + quiet remove icon per item */
.composer__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.timeline li.tl-item { grid-template-columns: 12px minmax(0, 1fr) auto; }
.tl-item__del { align-self: start; }
.iconbtn { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink-4); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.iconbtn .i { width: 14px; height: 14px; }
.tl-item:hover .iconbtn, .iconbtn:focus-visible { opacity: 1; }
.iconbtn:hover { background: var(--danger-soft); color: var(--danger); }
@media (hover: none) { .iconbtn { opacity: .6; } }
.composer__bar { margin-bottom: .75rem; }

/* ===== Invoice / agreement sheet (Glen's invoice design) ===== */
.docwrap:has(.paper--sheet) { max-width: calc(210mm + 2 * var(--gutter)); }
.paper--sheet {
  --sh-text: #1A1A1A; --sh-sub: #7D7D7D; --sh-stroke: #E0E0E0;
  --sh-accent: #54734e; --sh-accent-l: #8ba47d; --sh-accent-bg: #dde9d9; --sh-tint: #F7FAF6;
  display: block; padding: clamp(1.25rem, .6rem + 3vw, 12mm); gap: 0;
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--sh-text);
  font-size: 8.9pt; line-height: 1.42; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.paper--sheet p, .paper--sheet h2, .paper--sheet ul, .paper--sheet dl, .paper--sheet dd { margin: 0; }
.sh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm 18mm; flex-wrap: wrap; padding-bottom: 3mm; border-bottom: 2px solid var(--sh-accent); }
.sh-mark { display: flex; align-items: center; gap: 9px; }
.sh-mark img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.sh-word { font-size: 14pt; font-weight: 700; letter-spacing: -.02em; }
.sh-word b { color: var(--sh-accent); font-weight: 800; }
.sh-role { color: var(--sh-sub); font-size: 8.4pt; margin-top: 3px !important; }
.sh-meta { color: var(--sh-sub); font-size: 8.4pt; margin-top: 5px !important; line-height: 1.55; }
.sh-doc { text-align: right; min-width: 62mm; margin-left: auto; }
.sh-title { font-size: 15pt; font-weight: 700; letter-spacing: -.02em; }
.sh-doc table { margin: 6px 0 0 auto; border-collapse: collapse; font-size: 8.4pt; }
.sh-doc td { padding: 2px 0 2px 12px; vertical-align: top; }
.sh-doc td:first-child { color: var(--sh-sub); padding-left: 0; text-align: left; }
.sh-doc td:last-child { text-align: right; font-weight: 600; }
.sh-pills { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; margin-top: 8px !important; }
.sh-pill { display: inline-block; background: var(--sh-accent-bg); color: #3c5537; font-weight: 700; font-size: 7.6pt; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.sh-pill--paid, .sh-pill--signed { background: #3c5537; color: #fff; }
.sh-pill--overdue { background: #f9dcd6; color: #9b2c1c; }
.sh-pill--draft { background: #EEE; color: #666; }
.sh-parties { display: flex; gap: 7mm; margin-top: 3.4mm; }
.sh-party { flex: 1; border: 1px solid var(--sh-stroke); border-radius: 8px; padding: 2.8mm 3.6mm; }
.sh-party--tint { background: #FAFAFA; }
.sh-cap { font-size: 7.2pt; letter-spacing: .1em; text-transform: uppercase; color: var(--sh-sub); font-weight: 700; }
.sh-name { font-size: 10pt; font-weight: 700; margin-top: 5px !important; letter-spacing: -.01em; }
.sh-line { color: var(--sh-sub); font-size: 8.1pt; margin-top: 2px !important; overflow-wrap: anywhere; }
.sh-sec { font-size: 7.2pt; letter-spacing: .1em; text-transform: uppercase; color: var(--sh-sub); font-weight: 700; margin: 4mm 0 1.8mm !important; }
.sh-items { width: 100%; border-collapse: collapse; }
.sh-items th { font-size: 7.2pt; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-sub); text-align: left; font-weight: 700; padding: 0 0 6px; border-bottom: 1px solid var(--sh-stroke); }
.sh-items .n { text-align: right; white-space: nowrap; padding-left: 5mm; }
.sh-items td { padding: 6px 0; border-bottom: 1px solid #F0F0F0; vertical-align: top; }
.sh-items tr { break-inside: avoid; }
.sh-items td.n { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 9.6pt; }
.sh-it { font-weight: 700; font-size: 9.4pt; letter-spacing: -.01em; }
.sh-sub { color: var(--sh-sub); font-size: 7.9pt; margin-top: 1px !important; }
.sh-deliv { list-style: none; padding: 0; margin-top: 4px !important; column-count: 2; column-gap: 7mm; }
.sh-deliv li, .sh-tick li { position: relative; padding-left: 11px; font-size: 7.9pt; line-height: 1.4; color: #3a3a3a; margin-bottom: 2.5px; break-inside: avoid; }
.sh-deliv li::before, .sh-tick li::before { content: ""; position: absolute; left: 0; top: 5.5px; width: 4px; height: 4px; border-radius: 50%; background: var(--sh-accent-l); }
.sh-deliv b, .sh-tick b, .sh-line b { color: var(--sh-text); font-weight: 600; }
.sh-callout { margin-top: 2.6mm; border: 1px solid var(--sh-accent-l); background: var(--sh-tint); border-radius: 8px; padding: 2.4mm 3.4mm; break-inside: avoid; }
.sh-callout .sh-cap { color: #3c5537; }
.sh-callout p:last-child { font-size: 7.9pt; line-height: 1.45; color: #3a3a3a; margin-top: 3px; }
.sh-totals { display: flex; justify-content: flex-end; margin-top: 2.6mm; break-inside: avoid; }
.sh-totals table { border-collapse: collapse; min-width: min(78mm, 100%); }
.sh-totals td { padding: 2.6px 0; font-size: 8.6pt; }
.sh-totals td:first-child { color: var(--sh-sub); padding-right: 8mm; }
.sh-totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sh-totals tr.rule td { border-top: 1px solid var(--sh-stroke); padding-top: 7px; }
.sh-totals tr.gap td { padding: 4px 0; }
.sh-totals tr.due td { background: var(--sh-accent); color: #fff; font-size: 10.8pt; font-weight: 700; padding: 8px 11px; }
.sh-totals tr.due td:first-child { color: #e8f0e5; border-radius: 8px 0 0 8px; }
.sh-totals tr.due td:last-child { border-radius: 0 8px 8px 0; }
.sh-cols { display: flex; gap: 5mm; margin-top: 3mm; break-inside: avoid; }
.sh-box { flex: 1; border: 1px solid var(--sh-stroke); border-radius: 8px; padding: 3.2mm 3.6mm; }
.sh-box--pay { flex: 0 0 86mm; border-color: var(--sh-accent-l); background: var(--sh-tint); }
.sh-paygrid { display: flex; gap: 4mm; align-items: flex-start; }
.sh-pay { flex: 1; margin-top: 5px !important; font-size: 8.4pt; }
.sh-pay dt { color: var(--sh-sub); margin-top: 3.5px; }
.sh-pay dd { font-weight: 600; overflow-wrap: anywhere; }
.sh-qr { flex: 0 0 27mm; text-align: center; }
.sh-qr img { width: 27mm; height: 27mm; display: block; border-radius: 5px; }
.sh-qr p { font-size: 6.6pt; line-height: 1.25; color: var(--sh-sub); margin-top: 3px; font-weight: 600; }
.sh-paylink { margin-top: 3mm !important; }
.sh-terms { margin-top: 3mm !important; font-size: 7.6pt; color: var(--sh-sub); }
.sh-tick { list-style: none; padding: 0; margin-top: 4px !important; }
.sh-tick li { margin: 3.5px 0 0; line-height: 1.36; }
.sh-foot { margin-top: 3mm; padding-top: 1.6mm; border-top: 1px solid var(--sh-stroke); display: flex; justify-content: space-between; gap: 1rem; font-size: 7.9pt; color: var(--sh-sub); }
/* agreement terms + signatures inside the sheet */
.paper--sheet .clauses { padding-left: 1.1rem; gap: 2.4mm; }
.paper--sheet .clauses li::marker { color: var(--sh-accent); }
.paper--sheet .clauses h2 { font-size: 9.4pt; font-weight: 700; margin-bottom: 1px; }
.paper--sheet .clauses p, .paper--sheet .clauses li li { font-size: 8.4pt; line-height: 1.5; color: #3a3a3a; }
.paper--sheet .sigs { margin-top: 4mm; padding-top: 3mm; border-top: 2px solid var(--sh-accent); gap: 7mm; }
.paper--sheet .sig .label { font-size: 7.2pt; letter-spacing: .1em; text-transform: uppercase; color: var(--sh-sub); font-weight: 700; }
.paper--sheet .sig__name--signed { color: #3c5537; }
.paper--sheet .signform, .paper--sheet .stack { font-family: var(--font); font-size: var(--fs-14); }
@media (max-width: 700px) {
  .paper--sheet { font-size: 9.5pt; }
  .sh-doc { text-align: left; margin-left: 0; min-width: 0; }
  .sh-doc table { margin-left: 0; }
  .sh-pills { justify-content: flex-start; }
  .sh-parties, .sh-cols { flex-direction: column; gap: 3mm; }
  .sh-box--pay { flex: 1; }
  .sh-deliv { column-count: 1; }
  .sh-totals table { width: 100%; }
  .sh-foot { flex-direction: column; gap: 2px; }
}
@media print {
  @page { size: A4; margin: 10mm 12mm 8mm; }
  .docwrap:has(.paper--sheet) { max-width: none; }
  .paper--sheet { padding: 0; font-size: 8.9pt; }
}
.paper--sheet dl.sh-pay { display: block; }
.paper--sheet .sh-pay dd { text-align: left; }

/* ===== Admin invoice editor: form left, sheet right ===== */
.ied { width: 100%; max-width: 1480px; margin: 0 auto; padding: clamp(1rem, .8rem + 1vw, 1.75rem) var(--gutter) 3rem; display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1100px) { .ied { grid-template-columns: minmax(22rem, 27rem) minmax(0, 1fr); } }
.ied__form { padding: 0 1.1rem 1.1rem; border-radius: 16px; display: grid; gap: .9rem; }
@media (min-width: 1100px) { .ied__form { position: sticky; top: 4.75rem; max-height: calc(100vh - 6rem); overflow: auto; overscroll-behavior: contain; } }
.ied__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin: 0 -1.1rem; padding: 1rem 1.1rem .85rem; background: oklch(0.99 0.003 265 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.ied__bar h1 { font: 700 var(--fs-20, 1.25rem)/1.2 var(--font); letter-spacing: -.02em; margin-top: .2rem; }
.ied__back { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-12); color: var(--ink-3); text-decoration: none; }
.ied__back:hover { color: var(--accent); }
.ied__back .i { width: 13px; height: 13px; }
.ied__acts { display: flex; gap: .35rem; }
.ied__fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; }
.ied__sec { border-bottom: 1px solid var(--line); }
.ied__sec:last-of-type { border-bottom: 0; }
.ied__sec summary { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; cursor: pointer; list-style: none; font: 700 var(--fs-11)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ied__sec summary::-webkit-details-marker { display: none; }
.ied__sec summary .i { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s var(--ease); }
.ied__sec[open] summary .i { transform: rotate(-90deg); }
.ied__sec summary:hover { color: var(--ink); }
.ied__sec > .stack { padding-bottom: 1rem; }
.ied__sec textarea { min-height: 5.5rem; }
.ied__sec #f-items { min-height: 14rem; font-size: var(--fs-13); line-height: 1.55; }
.hint--code code { font: 600 .92em/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: .1rem .3rem; border-radius: 4px; background: var(--surface); }
.ied__note { padding-top: .25rem; }
.ied__save { padding-top: .25rem; }
.ied__save .btn { width: 100%; }
.ied__fs[disabled] { opacity: .6; }
.linkbtn { border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline; cursor: pointer; }
.ied__preview { display: grid; gap: .6rem; min-width: 0; }
.ied__plabel { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-12); color: var(--ink-3); }
.ied__plabel .i { width: 13px; height: 13px; }
.ied__preview .paper--sheet { width: 100%; max-width: 210mm; }
.paper--sheet .sh-pay { font-size: 8.4pt; }
.paper--sheet .sh-pay dt { color: var(--sh-sub); font-weight: 400; }
.paper--sheet .sh-pay dd { font-weight: 600; font-variant-numeric: normal; }

/* =====================================================================
   SaaS shell + flat surfaces (overrides the earlier glass look).
   Sidebar app shell, neutral canvas, white panels with hairline borders.
   ===================================================================== */
:root {
  --canvas: oklch(0.975 0.003 265);
  --side-bg: oklch(0.985 0.002 265);
  --panel-line: oklch(0.91 0.005 265);
  --side-w: 15.5rem;
  --radius: 12px;
}
body { background: var(--canvas); }
.ambient { display: none; }
.glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--panel-line); box-shadow: 0 1px 2px oklch(0.22 0.02 268 / .04); }
.card, .kcard { border-radius: var(--radius); }
.card__head h2, .sect__head h2 { font: 600 var(--fs-15)/1.3 var(--font); letter-spacing: -.01em; }
.h-title { font: 650 clamp(1.375rem, 1.2rem + .6vw, 1.625rem)/1.2 var(--font); letter-spacing: -.02em; }
.sub { font-size: var(--fs-14); }
.btn { border-radius: 8px; }
.btn-primary { box-shadow: 0 1px 2px oklch(0.4 0.17 258 / .3), 0 0 0 1px oklch(0.46 0.18 258); }
.btn-primary:hover { box-shadow: 0 1px 2px oklch(0.4 0.17 258 / .3), 0 0 0 1px oklch(0.42 0.18 258); }
.btn-secondary:hover { box-shadow: var(--shadow-xs); background: var(--sunken); }

/* shell */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; flex: 1; }
.side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1rem .75rem; background: var(--side-bg); border-right: 1px solid var(--panel-line); overflow-y: auto; }
.side__brand { padding: .35rem .5rem .9rem; font-size: var(--fs-14); }
.side__group { padding: .5rem .6rem .35rem; font: 600 var(--fs-11)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.side__nav { display: grid; gap: 2px; }
.side__nav a, .side__act { display: flex; align-items: center; gap: .6rem; height: 2.125rem; padding: 0 .6rem; border: 0; border-radius: 8px; background: none; font: 500 var(--fs-13)/1 var(--font); color: var(--ink-2); text-decoration: none; cursor: pointer; transition: background .12s, color .12s; width: 100%; }
.side__nav a .i, .side__act .i { width: 16px; height: 16px; color: var(--ink-4); transition: color .12s; }
.side__nav a:hover, .side__act:hover { background: oklch(0.94 0.004 265); color: var(--ink); }
.side__nav a:hover .i, .side__act:hover .i { color: var(--ink-2); }
.side__nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--panel-line), 0 1px 2px oklch(0.22 0.02 268 / .05); }
.side__nav a[aria-current="page"] .i { color: var(--accent); }
.side__me { display: grid; gap: .35rem; padding-top: .75rem; border-top: 1px solid var(--panel-line); }
.side__who { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; min-width: 0; }
.side__id { display: grid; min-width: 0; }
.side__id b { font: 600 var(--fs-13)/1.3 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__id span { font-size: var(--fs-11); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__acts { display: grid; gap: 2px; }
.side__acts form { display: block; }
.app__main { min-width: 0; display: flex; flex-direction: column; }
.app__main > main { flex: 1; }
.app__main .page, .app__main .cpage, .app__main .ied { max-width: 1180px; margin-inline: 0; padding-inline: clamp(1rem, .5rem + 2vw, 2.5rem); }
.app__main .page { padding-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.app__main .ied { max-width: 1400px; }
.app__main .foot { text-align: left; padding-inline: clamp(1rem, .5rem + 2vw, 2.5rem); }
@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; }
  .side { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; padding: .5rem .75rem; border-right: 0; border-bottom: 1px solid var(--panel-line); overflow: visible; }
  .side__top { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; }
  .side__brand { padding: .25rem; }
  .side__brand span, .side__group, .side__who, .side__act span { display: none; }
  .side__nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .side__nav a { flex: none; }
  .side__me { border-top: 0; padding-top: 0; display: flex; }
  .side__acts { display: flex; }
  .side__act { width: 2.125rem; justify-content: center; padding: 0; }
}
@media (max-width: 899px) and (min-width: 600px) { .side__nav a span { display: inline; } }
@media (max-width: 599px) { .side__nav a span { display: none; } .side__nav a { width: 2.25rem; justify-content: center; padding: 0; } .side__nav a[aria-current="page"] span { display: inline; } .side__nav a[aria-current="page"] { width: auto; padding: 0 .6rem; } }
.ied__form { top: 1rem; }
.ied__bar { background: var(--surface); }
@media (min-width: 1100px) { .ied__form { max-height: calc(100dvh - 2rem); } }

/* client page header: light, no dark band */
.hero { background: transparent; color: var(--ink); overflow: visible; }
.hero::before, .hero::after { display: none; }
.hero__in { max-width: 1180px; margin: 0; padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(1rem, .5rem + 2vw, 2.5rem) clamp(1rem, .8rem + .8vw, 1.5rem); gap: .6rem; }
.hero__eyebrow { color: var(--ink-3); letter-spacing: .06em; font-size: var(--fs-11); }
.hero__eyebrow .dot { box-shadow: none; }
.hero__title { font: 650 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.15 var(--font); letter-spacing: -.025em; max-width: 30ch; }
.hero__sum { color: var(--ink-3); font-size: var(--fs-14); }
.prog { margin-top: .75rem; padding: 1rem 1.1rem .75rem; border: 1px solid var(--panel-line); border-radius: var(--radius); background: var(--surface); max-width: none; }
.prog__meta { color: var(--ink-3); }
.prog__meta b { color: var(--ink); }
.prog__next { color: var(--ink-4); }
.step { color: var(--ink-4); }
.step__bar { background: var(--sunken-2); }
.step.is-done .step__bar { background: var(--accent); opacity: .55; }
.step.is-now .step__bar { background: var(--accent); box-shadow: none; }
.step__lbl .i { color: var(--success); }
a.step { color: var(--ink-2); }
a.step:hover { color: var(--ink); }
a.step.is-done:hover .step__bar { background: var(--accent); opacity: .8; }
.step.is-now, .step.is-view { color: var(--ink); }
.step.is-view .step__bar, .step.is-now.is-view .step__bar { box-shadow: 0 0 0 3px var(--accent-soft); }
.pulse { background: var(--accent); box-shadow: 0 0 0 0 oklch(0.52 0.19 258 / .4); }
@keyframes pulse { 70% { box-shadow: 0 0 0 6px oklch(0.52 0.19 258 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.52 0.19 258 / 0); } }
.app__main .cpage { margin-top: 0; padding-bottom: 3rem; gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
.focus { border-radius: var(--radius); border: 1px solid var(--panel-line); box-shadow: 0 1px 2px oklch(0.22 0.02 268 / .04); }
.focus::before { height: 2px; background: var(--accent); opacity: 1; }
.focus--recap::before { background: var(--success); }
.file { border-radius: var(--radius); background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--panel-line); box-shadow: 0 1px 2px oklch(0.22 0.02 268 / .04); }
.file__block--folder { background: none; border-radius: var(--radius) var(--radius) 0 0; }
.sect { padding: clamp(1rem, .8rem + .6vw, 1.35rem); border: 1px solid var(--panel-line); border-radius: var(--radius); background: var(--surface); }
.prow--head, .irow--head { background: var(--sunken); }
a.prow:hover { background: var(--sunken); }
.kcard .tile { width: 32px; height: 32px; border-radius: 8px; }
@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { min-width: 0; }
  .side__top { overflow: hidden; }
  .side__me { flex: none; }
}
@media (max-width: 599px) {
  .side__nav a[aria-current="page"] span { display: none; }
  .side__nav a, .side__nav a[aria-current="page"] { width: 2.25rem; padding: 0; justify-content: center; }
  .side__top { overflow: visible; }
  .sect__head { flex-wrap: wrap; }
}

/* =====================================================================
   Premium layer: inset sheet on a tinted canvas, Geist, ink actions,
   joined metric strip, breadcrumb bar, refined pills and tables.
   ===================================================================== */
:root {
  --font: 'Geist', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --canvas: oklch(0.955 0.006 265);
  --side-bg: transparent;
  --panel-line: oklch(0.915 0.005 265);
  --ink: oklch(0.19 0.012 268);
  --ink-btn: oklch(0.2 0.012 268);
  --sheet-shadow: 0 0 0 1px oklch(0.2 0.02 268 / .06), 0 1px 2px oklch(0.2 0.02 268 / .04), 0 12px 32px -12px oklch(0.2 0.03 268 / .14);
}
body { font-feature-settings: "ss01", "cv11"; letter-spacing: -.003em; }
.has-shell { background: radial-gradient(60rem 40rem at 0% 0%, oklch(0.93 0.025 265 / .7), transparent 60%), var(--canvas); }

/* sidebar on the canvas */
.side { background: transparent; border-right: 0; padding: .9rem .6rem .9rem .75rem; }
.side__ws { display: flex; align-items: center; gap: .65rem; padding: .4rem .5rem; margin-bottom: .9rem; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .12s; }
.side__ws:hover { background: oklch(1 0 0 / .55); }
.side__logo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(160deg, oklch(0.32 0.03 268), oklch(0.16 0.012 268)); color: #fff; font: 600 13px/1 var(--font); box-shadow: inset 0 1px 0 oklch(1 0 0 / .18), 0 1px 2px oklch(0 0 0 / .2); }
.side__wsname { display: grid; min-width: 0; }
.side__wsname b { font: 600 var(--fs-13)/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__wsname span { font-size: var(--fs-11); color: var(--ink-4); }
.side__group { font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: var(--fs-12); color: var(--ink-4); padding: .4rem .6rem .3rem; }
.side__nav a, .side__act { height: 2rem; font-weight: 500; color: oklch(0.36 0.014 268); }
.side__nav a:hover, .side__act:hover { background: oklch(1 0 0 / .55); }
.side__nav a[aria-current="page"] { background: var(--surface); box-shadow: 0 0 0 1px oklch(0.2 0.02 268 / .06), 0 1px 3px oklch(0.2 0.02 268 / .08); }
.side__nav a[aria-current="page"] .i { color: var(--ink); }
.side__count { margin-left: auto; min-width: 1.35rem; padding: .15rem .4rem; border-radius: 6px; font: 500 var(--fs-11)/1 var(--font); font-style: normal; text-align: center; color: var(--ink-3); background: oklch(0.2 0.02 268 / .06); font-variant-numeric: tabular-nums; }
.side__me { border-top: 1px solid oklch(0.2 0.02 268 / .07); }

/* the inset sheet */
.app__main { margin: .5rem .5rem .5rem 0; border-radius: 14px; background: var(--surface); box-shadow: var(--sheet-shadow); min-height: calc(100dvh - 1rem); overflow: clip; }
.crumbs { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3rem; padding: 0 clamp(1rem, .5rem + 2vw, 2.5rem); border-bottom: 1px solid var(--panel-line); background: oklch(1 0 0 / .86); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.crumbs__path { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: var(--fs-13); color: var(--ink-4); white-space: nowrap; overflow: hidden; }
.crumbs__path b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.crumbs__path .i { width: 13px; height: 13px; opacity: .5; }
.crumbs__meta { font-size: var(--fs-12); color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* type + actions */
.h-title, .hero__title { font-weight: 600; letter-spacing: -.035em; }
.h-title { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.875rem); }
.card__head h2, .sect__head h2 { font-weight: 600; letter-spacing: -.015em; }
.btn { font-weight: 500; letter-spacing: -.005em; }
.btn-primary { background: linear-gradient(180deg, oklch(0.3 0.014 268), var(--ink-btn)); color: #fff; box-shadow: inset 0 1px 0 oklch(1 0 0 / .14), 0 0 0 1px oklch(0.14 0.01 268), 0 1px 2px oklch(0 0 0 / .18), 0 4px 10px -4px oklch(0 0 0 / .25); }
.btn-primary:hover { background: linear-gradient(180deg, oklch(0.34 0.014 268), oklch(0.24 0.012 268)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .16), 0 0 0 1px oklch(0.14 0.01 268), 0 2px 4px oklch(0 0 0 / .2), 0 6px 14px -4px oklch(0 0 0 / .3); }
.btn-secondary { box-shadow: 0 1px 2px oklch(0.2 0.02 268 / .05); border-color: var(--panel-line); }

/* panels inside the sheet: hairline only */
.app__main .glass, .app__main .sect, .app__main .file, .app__main .focus, .app__main .prog { background: var(--surface); border: 1px solid var(--panel-line); box-shadow: 0 1px 2px oklch(0.2 0.02 268 / .03); }
.app__main .focus { box-shadow: 0 1px 2px oklch(0.2 0.02 268 / .03), 0 16px 40px -24px oklch(0.25 0.06 262 / .25); }
.focus::before { height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }

/* joined metric strip */
.kgrid { gap: 0; border: 1px solid var(--panel-line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.kgrid .kcard { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 1.1rem 1.25rem 1.2rem; }
.kgrid .kcard + .kcard { box-shadow: -1px 0 0 var(--panel-line); }
@media (max-width: 899px) { .kgrid .kcard:nth-child(n+3) { box-shadow: 0 -1px 0 var(--panel-line); } .kgrid .kcard:nth-child(4) { box-shadow: 0 -1px 0 var(--panel-line), -1px 0 0 var(--panel-line); } }
.kcard .tile { display: none; }
.kcard__body { gap: .3rem; }
.kcard__label { order: -1; font: 500 var(--fs-12)/1.2 var(--font); color: var(--ink-3); }
.kcard__num { font: 600 clamp(1.625rem, 1.4rem + .8vw, 2rem)/1.05 var(--font); letter-spacing: -.04em; }
.kcard__hint { font-size: var(--fs-12); }

/* tables */
.prow, .irow { padding-block: .8rem; }
.prow--head, .irow--head { background: transparent; font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: var(--fs-12); color: var(--ink-4); }
a.prow:hover, .irow:hover { background: oklch(0.975 0.004 265); }
.avatar, .avatar--sq { background: oklch(0.96 0.006 265); color: var(--ink-2); box-shadow: inset 0 0 0 1px oklch(0.2 0.02 268 / .07); }

/* pills: ring + dot */
.pill { font-weight: 500; padding: .25rem .55rem; box-shadow: inset 0 0 0 1px oklch(0.2 0.02 268 / .07); }
.pill--paid, .pill--signed { box-shadow: inset 0 0 0 1px oklch(0.48 0.14 148 / .18); }
.pill--unpaid, .pill--sent { box-shadow: inset 0 0 0 1px oklch(0.5 0.12 62 / .2); }
.pill--overdue { box-shadow: inset 0 0 0 1px oklch(0.52 0.19 25 / .2); }

/* client header on the sheet */
.hero__eyebrow { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-13); }
.hero__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.step.is-done .step__bar { background: var(--ink); opacity: .78; }
.step.is-now .step__bar { background: linear-gradient(90deg, var(--ink), var(--accent)); }
a.step.is-done:hover .step__bar { background: var(--ink); opacity: 1; }

/* phones: no inset */
@media (max-width: 899px) {
  .app__main { margin: 0; border-radius: 0; box-shadow: none; min-height: 0; }
  .side { background: oklch(0.975 0.004 265 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--panel-line); padding: .5rem .75rem; }
  .side__ws { margin: 0; padding: .2rem; }
  .side__wsname, .side__count { display: none; }
  .crumbs { display: none; }
}
/* one ink accent across the UI; blue stays for links and focus */
.meter i { background: var(--ink); }
.tick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.focus__label { color: var(--ink-3); }
.focus__next .i, .file__title .i { color: var(--ink-3); }
.timeline__dot { box-shadow: inset 0 0 0 2px var(--ink); }
.step__lbl .pulse, .pulse { background: var(--ink); box-shadow: 0 0 0 0 oklch(0.2 0.02 268 / .35); }
@keyframes pulse { 70% { box-shadow: 0 0 0 6px oklch(0.2 0.02 268 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.2 0.02 268 / 0); } }
.step.is-now .step__bar { background: var(--ink); }
.step.is-view .step__bar, .step.is-now.is-view .step__bar { box-shadow: 0 0 0 3px oklch(0.2 0.02 268 / .1); }
.tick:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3), 0 0 0 3px oklch(0.2 0.02 268 / .08); }
.flist__go.is-pay { background: linear-gradient(180deg, oklch(0.3 0.014 268), var(--ink-btn)); color: #fff; box-shadow: inset 0 1px 0 oklch(1 0 0 / .14), 0 0 0 1px oklch(0.14 0.01 268); }
/* the sheet is the scroll area, so its rounded corners never scroll away (desktop) */
@media (min-width: 900px) {
  .has-shell { height: 100dvh; overflow: hidden; }
  .app { height: 100dvh; min-height: 0; }
  .app__main { height: calc(100dvh - 1rem); min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scroll-padding-top: 4rem; }
  .ied__form { top: 3.75rem; max-height: calc(100dvh - 5rem); }
}
.app__main > * { flex-shrink: 0; }

/* ===== Sidebar: ICA-style sliding pill (pure CSS, the portal runs no scripts) =====
   An ink pill sits under the current page and glides to whichever item is hovered,
   then back when the pointer leaves. Text turns white as the pill lands, not before. */
@media (min-width: 900px) and (hover: hover) {
  .side__nav { position: relative; }
  .side__nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2rem; z-index: 0; border-radius: 9px; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, oklch(0.3 0.014 268), oklch(0.19 0.012 268)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .12), 0 1px 2px oklch(0 0 0 / .18), 0 6px 14px -6px oklch(0 0 0 / .35);
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s linear; }
  .side__nav a { position: relative; z-index: 1; transition: color .2s linear .06s; }
  .side__nav a .i { transition: color .2s linear .06s; }
  .side__nav a:hover, .side__nav a[aria-current="page"] { background: transparent; box-shadow: none; }
  .side__nav:has(> a:nth-child(1)[aria-current])::before { transform: translateY(calc(0 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(2)[aria-current])::before { transform: translateY(calc(1 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(3)[aria-current])::before { transform: translateY(calc(2 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(4)[aria-current])::before { transform: translateY(calc(3 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(5)[aria-current])::before { transform: translateY(calc(4 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(6)[aria-current])::before { transform: translateY(calc(5 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(1):hover)::before, .side__nav:has(> a:nth-child(1):focus-visible)::before { transform: translateY(calc(0 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(2):hover)::before, .side__nav:has(> a:nth-child(2):focus-visible)::before { transform: translateY(calc(1 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(3):hover)::before, .side__nav:has(> a:nth-child(3):focus-visible)::before { transform: translateY(calc(2 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(4):hover)::before, .side__nav:has(> a:nth-child(4):focus-visible)::before { transform: translateY(calc(3 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(5):hover)::before, .side__nav:has(> a:nth-child(5):focus-visible)::before { transform: translateY(calc(4 * (2rem + 2px))); opacity: 1; }
  .side__nav:has(> a:nth-child(6):hover)::before, .side__nav:has(> a:nth-child(6):focus-visible)::before { transform: translateY(calc(5 * (2rem + 2px))); opacity: 1; }
  /* who is lit: the hovered item, or the current page while nothing is hovered */
  .side__nav a:hover, .side__nav a:focus-visible, .side__nav:not(:hover) a[aria-current="page"] { color: #fff; }
  .side__nav a:hover .i, .side__nav a:focus-visible .i, .side__nav:not(:hover) a[aria-current="page"] .i { color: #fff; }
  .side__nav:hover a[aria-current="page"]:not(:hover) { color: oklch(0.36 0.014 268); font-weight: 500; }
  .side__nav:hover a[aria-current="page"]:not(:hover) .i { color: var(--ink-4); }
  .side__nav a:hover .side__count, .side__nav:not(:hover) a[aria-current="page"] .side__count { background: oklch(1 0 0 / .16); color: #fff; }
  .side__count { transition: background .2s linear .06s, color .2s linear .06s; }
  .side__nav a:focus-visible { outline: none; }
}
@media (prefers-reduced-motion: reduce) { .side__nav::before { transition: opacity .2s linear; } }

/* account block: softer card, hover nudges */
.side__me { gap: .25rem; }
.side__who { padding: .5rem; border-radius: 10px; background: oklch(1 0 0 / .5); box-shadow: 0 0 0 1px oklch(0.2 0.02 268 / .05); margin-bottom: .2rem; }
.side__act .i { transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), color .12s; }
.side__act:hover .i { transform: translateX(2px); }

/* account: one compact row, icon actions on the right */
.side__me { display: flex; align-items: center; gap: .55rem; padding: .45rem .35rem .45rem .5rem; border-top: 0; border-radius: 10px; transition: background .15s; }
.side__me:hover { background: oklch(1 0 0 / .55); }
.side__me .avatar { width: 28px; height: 28px; }
.side__me .side__id { flex: 1; }
.side__me form { display: contents; }
.side__ib { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 7px; background: none; color: var(--ink-4); cursor: pointer; transition: background .12s, color .12s; }
.side__ib .i { width: 15px; height: 15px; }
.side__ib:hover { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px oklch(0.2 0.02 268 / .07), 0 1px 2px oklch(0.2 0.02 268 / .06); }
@media (max-width: 899px) { .side__me { padding: 0; background: none; } .side__me .avatar, .side__me .side__id { display: none; } }

/* =====================================================================
   Microinteractions. Fast (150–250ms), ease-out, transform/opacity only.
   Everything respects prefers-reduced-motion at the end.
   ===================================================================== */
:root { --spring: cubic-bezier(0.34, 1.4, 0.64, 1); --out: cubic-bezier(0.22, 1, 0.36, 1); }

/* buttons: lift on hover, press down, icons with their own small motion */
.btn { transition: background .15s var(--out), box-shadow .2s var(--out), color .15s, transform .16s var(--out), border-color .15s; }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active { transform: translateY(0) scale(.97); }
.btn .i, .side__ib .i, .flist__go .i, .menu__item .i, a .i { transition: transform .25s var(--spring); }
.btn:hover .i-plus, summary:hover .i-plus { transform: rotate(90deg); }
.btn:hover .i-chevron, .row--link:hover .i-chevron, a.prow:hover > .i-chevron { transform: translateX(3px); }
.btn:hover .i-arrow-left, a:hover > .i-arrow-left { transform: translateX(-3px); }
.btn:hover .i-send { transform: translate(2px, -2px) rotate(-8deg); }
.btn:hover .i-check { transform: scale(1.15); }
.btn:hover .i-upload { transform: translateY(-2px); }
.btn:hover .i-external, a:hover .i-external, .flist__go:hover .i { transform: translate(1.5px, -1.5px); }
.btn:hover .i-pen, .menu__item:hover .i-pen { transform: rotate(-12deg); }
.btn:hover .i-eye { transform: scale(1.12); }
.btn:hover .i-sparkle { transform: rotate(20deg) scale(1.12); }
.btn:hover .i-folder { transform: translateY(-1px) rotate(-4deg); }
.side__ib:hover .i-key { transform: rotate(-20deg); }
.side__ib:hover .i-logout { transform: translateX(2px); }
.side__ib:active, .flist__go:active, .iconbtn:active { transform: scale(.92); }
.side__ib, .flist__go, .iconbtn { transition: background .12s, color .12s, box-shadow .15s, transform .14s var(--out), opacity .15s; }
.iconbtn:hover .i-trash { animation: wiggle .4s var(--out); }
@keyframes wiggle { 25% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 100% { transform: rotate(0); } }

/* checkbox: squish on press, the tick pops in */
.tick { transition: background .18s var(--out), box-shadow .18s var(--out), transform .14s var(--out); }
.tick:active { transform: scale(.86); }
.tick[aria-pressed="true"] .i { animation: tickpop .35s var(--spring) both; }
@keyframes tickpop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.check input { transition: transform .14s var(--out); }
.check input:active { transform: scale(.88); }

/* fields: the focus ring grows in, the label glides */
.field input, .field textarea, .field select { transition: border-color .15s, box-shadow .2s var(--out), background .15s; }
.field label { transition: transform .2s var(--out), color .15s, font-size .2s var(--out), top .2s var(--out); }

/* menus and add-forms open with a quick scale/fade from their trigger */
details[open] > .menu__panel { animation: menuin .18s var(--out) both; transform-origin: top right; }
@keyframes menuin { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
.adder[open] > form, .reveal[open] > :not(summary), .ied__sec[open] > .stack { animation: slidein .22s var(--out) both; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
summary { transition: color .15s, background .15s; }

/* rows and list items: soft hover, links nudge */
a.prow, .irow, .feed__row, .row--link, .flist li { transition: background .15s var(--out); }
a.prow > .i-chevron { transition: transform .25s var(--spring), color .15s; }
.feed__row:hover .feed__ic { transform: scale(1.08); }
.feed__ic { transition: transform .25s var(--spring); }
.prow__av .badge { animation: badgein .4s var(--spring) both .2s; }
@keyframes badgein { from { transform: scale(0); } to { transform: scale(1); } }

/* metric strip + nav counts: numbers settle in on load */
.kcard__num { animation: numin .5s var(--out) both; }
.kcard:nth-child(2) .kcard__num { animation-delay: .04s; } .kcard:nth-child(3) .kcard__num { animation-delay: .08s; } .kcard:nth-child(4) .kcard__num { animation-delay: .12s; }
@keyframes numin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kgrid .kcard { transition: background .2s var(--out); }
.kgrid .kcard:hover { background: oklch(0.985 0.003 265); }

/* pills + stepper */
.pill { transition: transform .2s var(--spring); }
a.step .step__bar { transition: background .2s, opacity .2s, transform .25s var(--spring); transform-origin: left center; }
a.step:hover .step__bar { transform: scaleY(1.5); }
.step.is-now .step__bar { animation: barpulse 2.4s ease-in-out infinite; }
@keyframes barpulse { 50% { opacity: .72; } }

/* workspace header + account row */
.side__ws .side__logo { transition: transform .3s var(--spring); }
.side__ws:hover .side__logo { transform: rotate(-6deg) scale(1.05); }
.side__ws:active .side__logo { transform: scale(.94); }

/* page content eases in once */
.app__main > main { animation: pagein .35s var(--out) both; }
@keyframes pagein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.side__group { padding: .5rem .6rem .7rem; }

/* ===== Stage tracker: nodes on a line (first node to last, no tail) ===== */
.track { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.track li { position: relative; display: flex; justify-content: center; min-width: 0; }
/* the connector runs from this node's edge to the next node's edge */
.track li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; border-radius: 2px; background: var(--sunken-2); }
.track li.is-done::after { background: var(--ink); }
.track li.is-now::after { background: linear-gradient(90deg, var(--ink-4), var(--sunken-2)); }
.track__step { display: grid; justify-items: center; gap: .3rem; padding: 0 .25rem .2rem; text-align: center; color: inherit; text-decoration: none; min-width: 0; border-radius: 10px; }
.track__node { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 600 var(--fs-12)/1 var(--font); font-variant-numeric: tabular-nums; transition: transform .25s var(--spring), box-shadow .2s var(--out); }
.track__node .i { width: 14px; height: 14px; stroke-width: 2.6; }
.is-done .track__node { background: var(--ink); color: #fff; box-shadow: 0 1px 2px oklch(0 0 0 / .18); }
.is-now .track__node { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 4px oklch(0.2 0.02 268 / .07); }
.is-next .track__node { background: var(--surface); color: var(--ink-4); box-shadow: inset 0 0 0 1.5px var(--line); }
.track__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: dotpulse 2s ease-in-out infinite; }
@keyframes dotpulse { 50% { transform: scale(.65); opacity: .6; } }
.track__name { margin-top: .15rem; font: 500 var(--fs-13)/1.25 var(--font); color: var(--ink-2); max-width: 100%; text-wrap: balance; }
.is-now .track__name { font-weight: 600; color: var(--ink); }
.is-next .track__name { color: var(--ink-4); }
.track__sub { font-size: var(--fs-11); color: var(--ink-4); }
.is-now .track__sub { color: var(--ink-2); }
a.track__step:hover .track__node { transform: scale(1.1); }
a.track__step:hover .track__name { color: var(--ink); }
.is-view:not(.is-now) .track__node { box-shadow: 0 0 0 4px oklch(0.2 0.02 268 / .12); }
.is-view:not(.is-now) .track__name { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) {
  .track__name, .track__sub { display: none; }
  .track li:not(:last-child)::after { left: calc(50% + 16px); right: calc(-50% + 16px); }
}


/* =====================================================================
   First-run walkthrough (pattern from Thumbnail Studio): glass welcome,
   then a spotlight + tip. No scripts: state is in the URL.
   ===================================================================== */
.is-touring .cpage, .is-touring .hero__in, .is-touring .app__main > main { z-index: auto; animation: none; }
.is-touring .app__main { scroll-padding-top: 5rem; }
.welcome { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; animation: fadein .3s var(--out) both; }
.welcome__scrim { position: absolute; inset: 0; background: oklch(0.16 0.02 268 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.welcome__card { position: relative; width: min(420px, 100%); padding: 32px 28px 22px; border-radius: 22px; text-align: center; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, oklch(0.3 0.02 268 / .92), oklch(0.17 0.015 268 / .96)); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid oklch(1 0 0 / .14); box-shadow: inset 0 1px 0 oklch(1 0 0 / .16), 0 30px 80px -20px oklch(0.1 0.02 268 / .7);
  animation: cardin .42s var(--spring) both .05s; }
.welcome__card::before { content: ""; position: absolute; inset: auto -30% -60% -30%; height: 90%; pointer-events: none; background: radial-gradient(closest-side, oklch(0.62 0.15 256 / .38), transparent); }
.welcome__card > * { position: relative; }
.welcome__mark { display: block; width: 52px; height: 52px; margin: 0 auto 18px; color: #fff; }
.welcome__mark .mark { width: 52px; height: 52px; color: oklch(0.55 0.18 258); filter: drop-shadow(0 8px 18px oklch(0.4 0.18 258 / .5)); }
.welcome h2 { font: 600 26px/1.2 var(--font); letter-spacing: -.03em; margin: 0 0 10px; }
.welcome h2 span { color: oklch(0.78 0.11 250); }
.welcome p { font-size: 14.5px; line-height: 1.6; color: oklch(1 0 0 / .74); margin: 0 auto; max-width: 34ch; }
.welcome__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.welcome__chips span { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: oklch(1 0 0 / .08); border: 1px solid oklch(1 0 0 / .16); }
.welcome__actions { display: grid; gap: 6px; }
.welcome__actions .btn { width: 100%; height: 2.75rem; font-size: var(--fs-14); }
.welcome .btn-primary { background: #fff; color: var(--ink); box-shadow: 0 1px 2px oklch(0 0 0 / .2), 0 8px 20px -8px oklch(0 0 0 / .5); }
.welcome .btn-primary:hover { background: oklch(0.96 0.005 265); }
.welcome__skip { background: transparent; color: oklch(1 0 0 / .72); }
.welcome__skip:hover { background: oklch(1 0 0 / .08); color: #fff; }
@keyframes fadein { from { opacity: 0; } }
@keyframes cardin { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* spotlight: the page dims, the target is lifted above it with a ring */
.tour-dim { position: fixed; inset: 0; z-index: 55; background: oklch(0.14 0.02 268 / .5); animation: fadein .25s var(--out) both; cursor: default; }
.tour-t-sidenav #sidenav, .tour-t-metrics #metrics, .tour-t-projects #projects, .tour-t-newproj #newproj, .tour-t-activity #activity, .tour-t-tourbtn #tourbtn, .tour-t-progress #progress, .tour-t-now #now, .tour-t-todos #todos, .tour-t-files #files, .tour-t-message #message { position: relative; z-index: 60; anchor-name: --tour; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--ink), 0 20px 50px -12px oklch(0.1 0.02 268 / .5) !important; animation: spotin .35s var(--spring) both; }
.tour-t-sidenav #sidenav { background: var(--surface); }
.tour-t-tourbtn #tourbtn { background: var(--surface); color: var(--ink); border-radius: 8px; }
.tour-t-newproj #newproj { border-radius: 10px; }
@keyframes spotin { from { box-shadow: 0 0 0 4px var(--surface), 0 0 0 14px oklch(0.2 0.02 268 / 0); } }

.tour-tip { position: fixed; z-index: 70; width: min(320px, calc(100vw - 32px)); left: 50%; bottom: 20px; translate: -50% 0;
  background: var(--surface); color: var(--ink); border-radius: 16px; padding: 18px 18px 14px;
  box-shadow: 0 0 0 1px oklch(0.2 0.02 268 / .06), 0 1px 2px oklch(0.1 0.02 268 / .08), 0 20px 50px -12px oklch(0.1 0.02 268 / .45);
  animation: tipin .3s var(--out) both .12s; }
@supports (anchor-name: --a) {
  @media (min-width: 900px) {
    .tour-tip { position-anchor: --tour; left: auto; bottom: auto; translate: none; position-area: right span-bottom; margin: 0 0 0 18px; position-try-fallbacks: --tour-below, --tour-above, --tour-left; }
  }
}
@position-try --tour-below { position-area: bottom span-right; margin: 18px 0 0 0; }
@position-try --tour-above { position-area: top span-right; margin: 0 0 18px 0; }
@position-try --tour-left { position-area: left span-bottom; margin: 0 18px 0 0; }
@keyframes tipin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.tour-tip__step { font-size: 12px; font-weight: 500; color: var(--ink-4); margin: 0 0 6px; }
.tour-tip h3 { font: 600 16px/1.3 var(--font); letter-spacing: -.015em; margin: 0 0 6px; }
.tour-tip p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.tour-tip__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 8px; }
.tour-tip__dots { display: flex; gap: 5px; }
.tour-tip__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.tour-tip__dots i.on { width: 16px; border-radius: 6px; background: var(--ink); animation: dotgrow .3s var(--out) both; }
@keyframes dotgrow { from { width: 6px; } }
.tour-tip__nav { display: flex; gap: 6px; }
.side__help { font: 600 13px/1 var(--font); text-decoration: none; }
@media (max-width: 899px) { .side__help { display: grid; } }
@media (min-width: 900px) { .is-touring .side { position: relative; } }
.tour-tip { left: 0; right: 0; margin-inline: auto; translate: none; }
@supports (anchor-name: --a) { @media (min-width: 900px) { .tour-tip { right: auto; margin-inline: 0; margin: 0 0 0 18px; } } }

/* ===== Content uses the width: up to 1440px, centered on very wide screens ===== */
.app__main .page, .app__main .cpage { max-width: 1440px; width: 100%; margin-inline: auto; }
.app__main .hero__in { max-width: 1440px; margin-inline: auto; }
.app__main .ied { max-width: 1600px; margin-inline: auto; }

/* ===== Sign-in: the app's look (tinted canvas, one inset white sheet) ===== */
.auth--app { min-height: 100dvh; padding: .5rem; background: radial-gradient(60rem 40rem at 0% 0%, oklch(0.93 0.025 265 / .7), transparent 60%), var(--canvas); display: grid; }
.auth--app .auth__sheet { display: grid; min-height: calc(100dvh - 1rem); border-radius: 14px; background: var(--surface); box-shadow: var(--sheet-shadow); overflow: hidden; }
@media (min-width: 1000px) { .auth--app .auth__sheet { grid-template-columns: minmax(26rem, 1fr) minmax(0, 1.15fr); } }
.auth--app .auth__main { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.25rem, .5rem + 3vw, 3rem); background: none; }
.auth--app .auth__card { width: 100%; max-width: 380px; display: grid; gap: 1rem; padding: 0; border: 0; background: none; box-shadow: none; animation: pagein .4s var(--out) both; }
.auth__ws { display: inline-flex; align-items: center; gap: .65rem; justify-self: start; margin-bottom: 1.25rem; color: var(--ink); text-decoration: none; }
.auth__ws:hover .side__logo { transform: rotate(-6deg) scale(1.05); }
.auth__ws .side__logo { transition: transform .3s var(--spring); }
.auth--app .auth__card h1 { font: 600 clamp(1.625rem, 1.4rem + .8vw, 2rem)/1.15 var(--font); letter-spacing: -.035em; }
.auth--app .auth__card .sub { margin-top: -.5rem; color: var(--ink-3); }
.auth--app .auth__card .btn-primary { width: 100%; height: 2.75rem; font-size: var(--fs-14); }
.auth--app .auth__note { border-top-color: var(--panel-line); color: var(--ink-3); }
.auth__legal { font-size: var(--fs-12); color: var(--ink-4); }
.auth__legal a { color: var(--ink-3); }
/* the showcase panel */
.auth__show { display: none; position: relative; overflow: hidden; padding: clamp(2.5rem, 2rem + 2vw, 4rem); background: linear-gradient(160deg, oklch(0.27 0.02 268), oklch(0.15 0.014 268)); color: #fff; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
@media (min-width: 1000px) { .auth__show { display: flex; } }
.auth__show::before { content: ""; position: absolute; inset: -20% -30% auto auto; width: 70%; height: 70%; background: radial-gradient(closest-side, oklch(0.6 0.15 256 / .35), transparent); pointer-events: none; }
.auth__copy { position: relative; max-width: 30rem; }
.auth__eyebrow { font: 500 var(--fs-13)/1 var(--font); color: oklch(1 0 0 / .6); }
.auth--app .auth__big { margin-top: .9rem; font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem)/1.15 var(--font); letter-spacing: -.035em; }
/* mini app: a decorative preview of the portal */
.ap { position: relative; display: grid; grid-template-columns: 9.5rem 1fr; width: 100%; max-width: 40rem; margin-left: auto; border-radius: 14px 0 0 14px; margin-right: calc(-1 * clamp(2.5rem, 2rem + 2vw, 4rem)); overflow: hidden; background: oklch(0.955 0.006 265); box-shadow: 0 0 0 1px oklch(1 0 0 / .1), 0 40px 80px -20px oklch(0 0 0 / .6); color: var(--ink); font-size: 11px; animation: apin .7s var(--out) both .15s; }
@keyframes apin { from { opacity: 0; transform: translateY(14px); } }
.ap__side { display: grid; align-content: start; gap: 3px; padding: .8rem .55rem; }
.ap__ws { display: flex; align-items: center; gap: .45rem; padding: .2rem .3rem .7rem; }
.ap__ws i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: #fff; font: 600 10px/1 var(--font); font-style: normal; }
.ap__ws b, .ap__crumb { display: block; height: 6px; width: 60%; border-radius: 3px; background: oklch(0.2 0.02 268 / .12); }
.ap__nav { display: flex; align-items: center; gap: .45rem; height: 1.6rem; padding: 0 .45rem; border-radius: 7px; color: var(--ink-3); }
.ap__nav .i { width: 12px; height: 12px; }
.ap__nav b { font-weight: 500; }
.ap__nav.is-on { background: linear-gradient(180deg, oklch(0.3 0.014 268), oklch(0.19 0.012 268)); color: #fff; }
.ap__main { margin: .45rem 0 .45rem 0; padding: .9rem 1rem 1rem; border-radius: 10px 0 0 10px; background: var(--surface); display: grid; gap: .8rem; align-content: start; }
.ap__crumb { width: 30%; }
.ap__title { font: 600 15px/1.2 var(--font); letter-spacing: -.02em; }
.ap__track { list-style: none; margin: 0; padding: .6rem .5rem; display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--panel-line); border-radius: 9px; }
.ap__track li { position: relative; display: grid; justify-items: center; gap: .25rem; font-size: 8.5px; color: var(--ink-3); }
.ap__track li:not(:last-child)::after { content: ""; position: absolute; top: 7px; left: calc(50% + 9px); right: calc(-50% + 9px); height: 1.5px; background: var(--sunken-2); }
.ap__track li.is-done::after { background: var(--ink); }
.ap-node { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; }
.ap-node .i { width: 9px; height: 9px; stroke-width: 3; }
.is-done .ap-node { background: var(--ink); color: #fff; }
.is-now .ap-node { box-shadow: inset 0 0 0 1.5px var(--ink); }
.is-now .ap-node i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); animation: dotpulse 2s ease-in-out infinite; }
.is-next .ap-node { box-shadow: inset 0 0 0 1px var(--line); }
.ap__now { display: grid; gap: .3rem; justify-items: start; padding: .75rem .8rem; border: 1px solid var(--panel-line); border-radius: 9px; }
.ap__label { font: 600 8px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.ap__now p { font: 600 12.5px/1.3 var(--font); letter-spacing: -.01em; }
.ap__btn { margin-top: .2rem; padding: .35rem .6rem; border-radius: 6px; background: var(--ink); color: #fff; font-weight: 500; font-size: 10px; }
.ap__kpis { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--panel-line); border-radius: 9px; }
.ap__kpis span { display: grid; gap: .2rem; padding: .55rem .7rem; }
.ap__kpis span + span { box-shadow: -1px 0 0 var(--panel-line); }
.ap__kpis em { font-style: normal; font-size: 9px; color: var(--ink-4); }
.ap__kpis b { font: 600 13px/1 var(--font); letter-spacing: -.02em; }
@media (max-width: 999px) { .auth--app { padding: 0; } .auth--app .auth__sheet { border-radius: 0; box-shadow: none; } }
.auth.auth--app { grid-template-columns: minmax(0, 1fr); width: 100%; }