/* Lightmorphic Pulse — house style. Plain CSS, no framework, no CDN. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;  --fg: #09090b;
  --panel: #ffffff;  --panel-border: rgba(24, 24, 40, 0.10);
  --border: #e4e4e7;  --muted: #f4f4f5;  --muted-fg: #71717a;
  --shadow-panel: 0 1px 2px rgba(24,24,40,.05), 0 8px 24px -16px rgba(24,24,40,.18);

  /* Brand yellow — the default accent. */
  --accent: #fbc711;  --accent-hover: #ddaf0f;  --on-accent: #645007;
  --accent-container: #fff8e2;  --on-accent-container: #5f4c06;

  --brand-navy: #111827;
  --link: #1b74bc;
  --danger: #cc372d;   --danger-bg: #fef2f1;
  --success: #38813a;  --success-bg: #f2f9f3;
  --warning: #8f6c03;  --warning-bg: #fffbee;
  --info: #1b74bc;     --info-bg: #f0f8fe;

  --radius: 0.875rem;
  --panel-radius: 1.375rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090b;  --fg: #fafafa;
    --panel: #1b1d29;  --panel-border: rgba(255,255,255,.09);
    --border: #27272a;  --muted: #1c1c1f;  --muted-fg: #a1a1aa;
    --shadow-panel: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6);
    --accent-container: #4b3c05;  --on-accent-container: #fde694;
    --link: #2295f1;
    --danger: #f34236;   --danger-bg: #350f0c;
    --success: #4bae4f;  --success-bg: #102611;
    --warning: #ffc006;  --warning-bg: #382a01;
    --info: #2295f1;     --info-bg: #072135;
  }
}

/* Accent switching: map the light/dark pair into the live tokens. */
:root[data-accent] { --accent: var(--accent-light); --accent-hover: var(--accent-hover-light);
  --accent-container: var(--accent-container-light); --on-accent-container: var(--on-accent-container-light); }
@media (prefers-color-scheme: dark) {
  :root[data-accent] { --accent: var(--accent-dark); --accent-hover: var(--accent-hover-dark);
    --accent-container: var(--accent-container-dark); --on-accent-container: var(--on-accent-container-dark); }
}
:root[data-accent=""] { --accent: #fbc711; --accent-hover: #ddaf0f; --on-accent: #645007;
  --accent-container: #fff8e2; --on-accent-container: #5f4c06; }
@media (prefers-color-scheme: dark) {
  :root[data-accent=""] { --accent-container: #4b3c05; --on-accent-container: #fde694; }
}

:root[data-accent="red"] {
  --accent-light: #f34236; --accent-hover-light: #d63a30;
  --accent-container-light: #fee8e7; --on-accent-container-light: #5c1915;
  --accent-dark: #f34236; --accent-hover-dark: #f4594e;
  --accent-container-dark: #491410; --on-accent-container-dark: #faaaa5;
  --on-accent: #350f0c;
}
:root[data-accent="pink"] {
  --accent-light: #e8207e; --accent-hover-light: #cc1c6f;
  --accent-container-light: #fce4f0; --on-accent-container-light: #580c30;
  --accent-dark: #e8207e; --accent-hover-dark: #eb3b8d;
  --accent-container-dark: #460a26; --on-accent-container-dark: #f59bc5;
  --on-accent: #1e0410;
}
:root[data-accent="purple"] {
  --accent-light: #9b26ae; --accent-hover-light: #882199;
  --accent-container-light: #f3e5f5; --on-accent-container-light: #3b0e42;
  --accent-dark: #b763c5; --accent-hover-dark: #c076cc;
  --accent-container-dark: #46114e; --on-accent-container-dark: #d29ddb;
  --on-accent: #ffffff;
}
:root[data-accent="deep_purple"] {
  --accent-light: #6639ab; --accent-hover-light: #5a3296;
  --accent-container-light: #ede7f5; --on-accent-container-light: #271641;
  --accent-dark: #9170c3; --accent-hover-dark: #9e82ca;
  --accent-container-dark: #2e1a4d; --on-accent-container-dark: #baa6d9;
  --on-accent: #ffffff;
}
:root[data-accent="indigo"] {
  --accent-light: #3d51b4; --accent-hover-light: #36479e;
  --accent-container-light: #e8eaf6; --on-accent-container-light: #171f44;
  --accent-dark: #7382c9; --accent-hover-dark: #8491cf;
  --accent-container-dark: #1b2451; --on-accent-container-dark: #a8b1dd;
  --on-accent: #ffffff;
}
:root[data-accent="blue"] {
  --accent-light: #2295f1; --accent-hover-light: #1e83d4;
  --accent-container-light: #e4f2fd; --on-accent-container-light: #0d395c;
  --accent-dark: #2295f1; --accent-hover-dark: #3da2f3;
  --accent-container-dark: #0a2d48; --on-accent-container-dark: #9ccff9;
  --on-accent: #0a2a43;
}
:root[data-accent="light_blue"] {
  --accent-light: #03a8f3; --accent-hover-light: #0394d6;
  --accent-container-light: #e1f5fe; --on-accent-container-light: #01405c;
  --accent-dark: #03a8f3; --accent-hover-dark: #21b2f4;
  --accent-container-dark: #013249; --on-accent-container-dark: #8ed8fa;
  --on-accent: #013953;
}
:root[data-accent="cyan"] {
  --accent-light: #00bcd3; --accent-hover-light: #00a5ba;
  --accent-container-light: #e0f7fa; --on-accent-container-light: #004750;
  --accent-dark: #00bcd3; --accent-hover-dark: #00a9be;
  --accent-container-dark: #00383f; --on-accent-container-dark: #8ce1eb;
  --on-accent: #00464e;
}
:root[data-accent="teal"] {
  --accent-light: #019587; --accent-hover-light: #018377;
  --accent-container-light: #e1f2f1; --on-accent-container-light: #003933;
  --accent-dark: #019587; --accent-hover-dark: #1fa295;
  --accent-container-dark: #002d29; --on-accent-container-dark: #8dcfc9;
  --on-accent: #00211e;
}
:root[data-accent="green"] {
  --accent-light: #4bae4f; --accent-hover-light: #429946;
  --accent-container-light: #e9f5ea; --on-accent-container-light: #1c421e;
  --accent-dark: #4bae4f; --accent-hover-dark: #61b864;
  --accent-container-dark: #173418; --on-accent-container-dark: #aedbb0;
  --on-accent: #173618;
}
:root[data-accent="light_green"] {
  --accent-light: #8ac248; --accent-hover-light: #79ab3f;
  --accent-container-light: #f1f8e9; --on-accent-container-light: #344a1b;
  --accent-dark: #8ac248; --accent-hover-dark: #7caf41;
  --accent-container-dark: #293a16; --on-accent-container-dark: #cae4ad;
  --on-accent: #33481b;
}
:root[data-accent="lime"] {
  --accent-light: #cbdc38; --accent-hover-light: #b3c231;
  --accent-container-light: #f9fbe7; --on-accent-container-light: #4d5415;
  --accent-dark: #cbdc38; --accent-hover-dark: #b7c632;
  --accent-container-dark: #3d4211; --on-accent-container-dark: #e8efa5;
  --on-accent: #575f18;
}
:root[data-accent="yellow"] {
  --accent-light: #ffea3a; --accent-hover-light: #e0ce33;
  --accent-container-light: #fffce7; --on-accent-container-light: #615916;
  --accent-dark: #ffea3a; --accent-hover-dark: #e6d334;
  --accent-container-dark: #4d4611; --on-accent-container-dark: #fff6a6;
  --on-accent: #6e6519;
}
:root[data-accent="amber"] {
  --accent-light: #ffc006; --accent-hover-light: #e0a905;
  --accent-container-light: #fff7e1; --on-accent-container-light: #614902;
  --accent-dark: #ffc006; --accent-hover-dark: #e6ad05;
  --accent-container-dark: #4d3a02; --on-accent-container-dark: #ffe38f;
  --on-accent: #664d02;
}
:root[data-accent="orange"] {
  --accent-light: #fe9700; --accent-hover-light: #e08500;
  --accent-container-light: #fff3e0; --on-accent-container-light: #613900;
  --accent-dark: #fe9700; --accent-hover-dark: #e58800;
  --accent-container-dark: #4c2d00; --on-accent-container-dark: #ffd08c;
  --on-accent: #5e3800;
}
:root[data-accent="deep_orange"] {
  --accent-light: #ff5721; --accent-hover-light: #e04d1d;
  --accent-container-light: #ffebe4; --on-accent-container-light: #61210d;
  --accent-dark: #ff5721; --accent-hover-dark: #ff6b3c;
  --accent-container-dark: #4d1a0a; --on-accent-container-dark: #ffb39b;
  --on-accent: #471809;
}
:root[data-accent="brown"] {
  --accent-light: #795649; --accent-hover-light: #6a4c40;
  --accent-container-light: #efebe9; --on-accent-container-light: #2e211c;
  --accent-dark: #9f857c; --accent-hover-dark: #aa948c;
  --accent-container-dark: #362721; --on-accent-container-dark: #c3b3ad;
  --on-accent: #ffffff;
}
:root[data-accent="grey"] {
  --accent-light: #9e9d9e; --accent-hover-light: #8b8a8b;
  --accent-container-light: #f3f3f3; --on-accent-container-light: #3c3c3c;
  --accent-dark: #9e9d9e; --accent-hover-dark: #aaa9aa;
  --accent-container-dark: #2f2f2f; --on-accent-container-dark: #d3d3d3;
  --on-accent: #363536;
}
:root[data-accent="blue_grey"] {
  --accent-light: #607c8b; --accent-hover-light: #546d7a;
  --accent-container-light: #eceff1; --on-accent-container-light: #242f35;
  --accent-dark: #607c8b; --accent-hover-dark: #738c99;
  --accent-container-dark: #1d252a; --on-accent-container-dark: #b7c4cb;
  --on-accent: #000000;
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}
a { color: var(--link); }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1rem; }
h2 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.75rem; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--brand-navy); color: #fff;
  overflow-x: auto;
}
.topbar .brand {
  display: flex; align-items: center; gap: 0.45rem;
  color: #fbc711; font-weight: 700; font-size: 1.05rem;
  text-decoration: none; margin-right: 0.75rem; flex-shrink: 0;
}
.topbar nav { display: flex; gap: 0.15rem; flex: 1; }
.topbar nav a {
  color: #d7dae0; text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  padding: 0.35rem 0.65rem; border-radius: var(--radius); white-space: nowrap;
}
.topbar nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topbar nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.logout-form { margin: 0; flex-shrink: 0; }
.topbar .btn-icon { color: #d7dae0; }
.topbar .btn-icon:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.grid { display: grid; gap: 1.25rem; align-items: start; }
.grid-2 { grid-template-columns: 2fr 1fr; }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

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

button, .btn {
  font: inherit; font-weight: 600; font-size: 0.9375rem;
  border: 0; border-radius: var(--radius);
  padding: 0.55rem 1.1rem; cursor: pointer;
  background: var(--muted); color: var(--fg);
  border: 1px solid var(--border);
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--border); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: transparent; border: 0; border-radius: var(--radius);
  color: var(--muted-fg); cursor: pointer;
}
.btn-icon:hover { background: var(--muted); color: var(--fg); }
.btn-icon.confirm-danger { color: #fff; background: var(--danger); }

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

label { display: block; font-weight: 600; font-size: 0.9375rem; margin: 0.75rem 0 0.25rem; }
input, select, textarea {
  font: inherit; display: block; width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
}
textarea { min-height: 6.5rem; resize: vertical; }
input[type="checkbox"] { display: inline-block; width: auto; margin-right: 0.4rem; }
.hint { font-size: 0.8125rem; color: var(--muted-fg); margin: 0.25rem 0 0; }
.form-row { display: flex; gap: 0.75rem; }
.form-row > * { flex: 1; }
.form-actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; align-items: center; }
.inline-form { display: inline; }

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

table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: 600; font-size: 0.9375rem; padding-bottom: 0.5rem; }
th {
  text-align: left; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted-fg); padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-block; padding: 0.1rem 0.6rem;
  border-radius: 999px; font-size: 0.8125rem; font-weight: 600;
  border: 1px solid transparent;
}
.badge-success { color: var(--success); background: var(--success-bg); }
.badge-warning { color: var(--warning); background: var(--warning-bg); }
.badge-danger  { color: var(--danger);  background: var(--danger-bg); }
.badge-info    { color: var(--info);    background: var(--info-bg); }
.badge-muted   { color: var(--muted-fg); background: var(--muted); }

/* ---------------------------------------------------------------- bits */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.flashes { margin-bottom: 1rem; }
.flash {
  background: var(--info-bg); color: var(--info);
  border-radius: var(--radius); padding: 0.6rem 1rem; margin: 0 0 0.5rem;
  font-weight: 600;
}
.stat { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
.stat-label { font-size: 0.8125rem; color: var(--muted-fg); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { font-size: 0.8125rem; color: var(--muted-fg); }
.muted { color: var(--muted-fg); }
.small { font-size: 0.8125rem; }
.empty { color: var(--muted-fg); font-style: normal; padding: 0.75rem 0; }
.right { text-align: right; }
.mono { font-variant-numeric: tabular-nums; }

/* Kanban-ish pipeline */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.pipeline .col h3 { font-size: 0.9375rem; }
.pipeline .card {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius); box-shadow: var(--shadow-panel);
  padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; display: block;
  text-decoration: none; color: var(--fg);
}
.pipeline .card:hover { border-color: var(--accent); }

/* Public pages (signing, portal, feedback) */
.public-wrap { max-width: 720px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.public-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700;
  font-size: 1.15rem; margin-bottom: 1.5rem; color: var(--fg); }
.public-brand .dot { width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: #fbc711; }
.terms { white-space: pre-wrap; background: var(--muted); border-radius: var(--radius);
  padding: 1rem; font-size: 0.9375rem; }
.error-inline { color: var(--danger); background: var(--danger-bg);
  border-radius: var(--radius); padding: 0.6rem 1rem; font-weight: 600; }

@media (max-width: 600px) {
  h1 { font-size: 1.5rem; }
  .panel { padding: 1.1rem; }
  .form-row { flex-direction: column; gap: 0; }
}