/* Main Growth Accelerator portal. Direction A "Ledger" (same family as the system dashboard),
   with the progress bar and "what happens next" block from direction C. */
/* MGA Accelerator brand (docs/brand/MGA_Accelerator_Brandbook.pdf): Ink, Forest, Paper, Stone, Line; Inter. */
:root {
  --canvas: #FAF9F5; --stone: #F0F1EC; --surface: #FFFFFF; --ink: #171D1D; --muted: #5C6461; --faint: #8C938F;
  --line: #D9DDD7; --field: #CFD4CE; --code: #F0F1EC; --hover: rgba(23, 29, 29, 0.05);
  --forest: #185E45; --forest-hover: #134C38; --btn: #185E45; --btn-ink: #FFFFFF; --btn-hover: #134C38;
  --side: #171D1D; --side-ink: #C9D0CC; --side-active: #24493C; --side-line: #2B3332;
  --green: #185E45; --green-bg: #E3EEE8; --yellow: #8A5A00; --yellow-bg: #FBF3DB; --red: #9F2F2D; --red-bg: #FDEBEC; --blue: #1F5F8F; --blue-bg: #E3EEF6;
  --serif: Inter, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; /* the brand uses one sans family */
  --sans: Inter, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --canvas: #111515; --stone: #1A2020; --surface: #1A2020; --ink: #E7EBE8; --muted: #A3ABA7; --faint: #6F7774;
    --line: #2B3332; --field: #384140; --code: #232A2A; --hover: rgba(255, 255, 255, 0.055);
    --forest: #4FA883; --btn: #1F7A59; --btn-ink: #FFFFFF; --btn-hover: #24694F;
    --side: #0B0F0F; --side-ink: #B6BEBA; --side-active: #1F3F34; --side-line: #222A29;
    --green: #7CC4A3; --green-bg: #1C3329; --yellow: #D9B265; --yellow-bg: #3A3122; --red: #E8908C; --red-bg: #3B2526; --blue: #84BDE6; --blue-bg: #1F3040; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--canvas); color: var(--ink); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--faint); }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
code, pre { font-family: var(--mono); }
code { background: var(--code); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Signed-in layout: sidebar + content ---------- */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side { flex: 1 1 240px; max-width: 260px; background: var(--side); color: var(--side-ink); padding: 24px 14px 20px; display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 24px; text-decoration: none; color: inherit; }
.brand .chip { background: #FFFFFF; border-radius: 8px; padding: 7px 8px; display: inline-flex; } /* the logo always sits on a light support */
.brand .chip img { display: block; width: 64px; height: auto; } /* brandbook minimum for the monogram */
.brand .word { display: flex; flex-direction: column; line-height: 1.15; }
.brand .word b { font-size: 16px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.02em; }
.brand .word span { font-size: 13px; letter-spacing: 0.06em; color: var(--side-ink); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { padding: 9px 12px; border-radius: 6px; text-decoration: none; font-size: 14px; letter-spacing: 0.02em; color: var(--side-ink); }
.side nav a:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.side nav a[aria-current="page"] { background: var(--side-active); color: #FFFFFF; font-weight: 600; }
.who { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--side-line); font-size: 13px; color: var(--side-ink); display: flex; flex-direction: column; gap: 8px; }
.who button { align-self: flex-start; min-height: 0; padding: 0; border: 0; background: none; color: var(--side-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.who button:hover { background: none; color: #FFFFFF; }
.content { flex: 999 1 560px; min-width: 0; padding: 56px 72px 96px; }
.content > .inner { max-width: 960px; display: flex; flex-direction: column; gap: 24px; }
.page-head h1 { font-size: 36px; line-height: 1.15; margin-bottom: 8px; }
.page-head p { color: var(--muted); font-size: 16px; max-width: 60ch; }

/* ---------- Sign-in pages: split screen ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 100vh; }
.split .intro { background: var(--stone); border-right: 1px solid var(--line); padding: 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.split .intro h2 { font-size: 34px; line-height: 1.15; max-width: 18ch; }
/* Sign-in timeline: the steps of the service. On load the rail fills with Forest from top to bottom, each node turns
   Forest when the fill reaches it, and its text appears right after. Transform and opacity only; once, never looped. */
.promise { --step: 280ms; --start: 350ms; list-style: none; margin: 32px 0 0; padding: 0; max-width: 540px; }
.promise li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 0 0 22px; }
.promise li:last-child { padding-bottom: 0; }
.promise .n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px;
  font: 700 13px var(--sans); letter-spacing: 0.02em; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  animation: node-on 320ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--start) + var(--i) * var(--step)); }
.promise li > div { padding-top: 8px; display: flex; flex-direction: column; gap: 3px;
  animation: step-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--start) + var(--i) * var(--step) - 120ms); }
.promise b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; transition: color 200ms ease; }
.promise li > div > span { font-size: 15px; line-height: 1.5; color: var(--muted); }
/* the rail between two nodes: a Line track and a Forest fill that grows downward */
.promise li:not(:last-child)::before, .promise li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; }
.promise li:not(:last-child)::before { background: var(--line); }
.promise li:not(:last-child)::after { background: var(--btn); transform: scaleY(0); transform-origin: top;
  animation: rail 300ms linear forwards; animation-delay: calc(var(--start) + var(--i) * var(--step) + 40ms); }
.promise li:nth-child(1) { --i: 0; } .promise li:nth-child(2) { --i: 1; } .promise li:nth-child(3) { --i: 2; }
.promise li:nth-child(4) { --i: 3; } .promise li:nth-child(5) { --i: 4; }
.promise li:hover b { color: var(--forest); }
.promise li:hover .n { translate: 2px 0; transition: translate 200ms ease; } /* "translate" composes with the entrance animation */
@keyframes node-on { 0% { background: var(--surface); color: var(--ink); border-color: var(--line); transform: scale(0.92); }
  60% { transform: scale(1.04); } 100% { background: var(--btn); color: #FFFFFF; border-color: var(--btn); transform: scale(1); } }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rail { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .promise .n, .promise li > div, .promise li::after { animation: none; }
  .promise .n { background: var(--btn); color: #FFFFFF; border-color: var(--btn); }
  .promise li:not(:last-child)::after { transform: none; }
}
.signature { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
.signature img { width: 112px; height: auto; display: block; }
.signature .word { display: flex; flex-direction: column; line-height: 1.15; font-size: 15px; letter-spacing: 0.08em; }
.signature .word b { color: var(--forest); font-weight: 700; }
@media (prefers-color-scheme: dark) { .signature { background: #FFFFFF; color: #171D1D; padding: 10px 14px; border-radius: 10px; align-self: flex-start; } .signature .word b { color: #185E45; } }
.split .intro p { color: var(--muted); font-size: 15px; max-width: 48ch; margin-top: 12px; }
.split .form-side { padding: 64px; display: flex; align-items: center; justify-content: center; }
.split .form-side > div { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.split h1 { font-size: 32px; }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.card h2 { font-size: 22px; font-weight: 600; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.step.current { border-color: var(--forest); box-shadow: inset 3px 0 0 var(--forest); }
.step.locked { background: transparent; border-style: dashed; }
.step.locked h2 { color: var(--muted); }
.step p { color: var(--muted); font-size: 14px; }
.step .go { margin-top: auto; }
.tag { align-self: flex-start; padding: 4px 9px; border-radius: 999px; font: 600 11px/1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; background: var(--code); color: var(--muted); }
.tag.ok { background: var(--green-bg); color: var(--green); } .tag.warn { background: var(--yellow-bg); color: var(--yellow); }
.tag.bad { background: var(--red-bg); color: var(--red); } .tag.info { background: var(--blue-bg); color: var(--blue); }
.progress { display: flex; align-items: center; gap: 14px; white-space: nowrap; font: 500 12px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.progress .bar { flex: 0 1 320px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress .bar span { display: block; height: 100%; width: 0; background: var(--forest); }
.progress .bar .done-1 { width: 33.3%; } .progress .bar .done-2 { width: 66.6%; } .progress .bar .done-3 { width: 100%; }
.gap-top { margin-top: 8px; } .narrow { max-width: 560px; }
.notice { padding: 14px 18px; border-radius: 10px; font-size: 14px; background: var(--blue-bg); color: var(--blue); }
.notice.ok { background: var(--green-bg); color: var(--green); } .notice.error { background: var(--red-bg); color: var(--red); }
.aside { padding: 20px 24px; background: var(--stone); border-radius: 12px; font-size: 14px; color: var(--muted); }
.aside strong { color: var(--ink); font-weight: 600; }

/* ---------- Forms and buttons ---------- */
form { margin: 0; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
input, select, textarea { font: 15px/1.5 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--field); border-radius: 8px; padding: 10px 14px; min-height: 44px; width: 100%; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
label.check input { width: auto; min-height: 0; }
/* Two columns at most; more space between fields than between a label and its field, so each pair reads as one */
fieldset { border: 0; border-top: 1px solid var(--line); margin: 16px 0 0; padding: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
fieldset label { gap: 8px; }
fieldset label.wide { grid-column: 1 / -1; }
fieldset:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
legend { font: 600 20px var(--sans); padding: 0 0 12px; float: left; width: 100%; grid-column: 1 / -1; }
@media (max-width: 640px) { fieldset { grid-template-columns: 1fr; } }
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--field); background: var(--surface); color: var(--ink); font: 500 14px var(--sans); text-decoration: none; cursor: pointer; transition: background 150ms ease, transform 100ms ease; }
button:hover, .button:hover { background: var(--hover); }
button:active, .button:active { transform: scale(0.98); }
.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.primary:hover { background: var(--btn-hover); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.inline { display: inline; }

/* ---------- Install command ---------- */
.command { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.command pre { flex: 1 1 420px; margin: 0; padding: 14px 16px; background: var(--code); border-radius: 8px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
ol.plain, ul.plain { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Tables (admin) ---------- */
.table { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { background: var(--canvas); color: var(--muted); font-weight: 500; font-size: 12px; }
dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 20px; margin: 0; font-size: 14px; }
dt { color: var(--muted); } dd { margin: 0; white-space: pre-wrap; }

@media (max-width: 860px) {
  .side { max-width: none; flex-basis: 100%; padding: 14px 16px; }
  .brand { padding: 0 2px 12px; }
  .side nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .side nav a { white-space: nowrap; }
  .who { flex-direction: row; justify-content: space-between; margin-top: 10px; padding: 10px 2px 0; }
  .content { padding: 28px 16px 64px; }
  .page-head h1 { font-size: 32px; }
  .split { grid-template-columns: 1fr; }
  .split .intro { padding: 32px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .split .intro h2 { font-size: 34px; }
  .split .form-side { padding: 32px 20px 56px; }
}
/* Sign-in panel on short windows (laptops, browser with toolbars): everything fits without scrolling. */
@media (min-width: 861px) and (max-height: 900px) {
  .split .intro { padding: 40px 56px; gap: 24px; }
  .signature img { width: 92px; } .signature .word { font-size: 13px; }
  .split .intro h2 { font-size: 28px; max-width: 24ch; }
  .split .intro p { font-size: 14px; margin-top: 8px; }
  .promise { margin-top: 20px; }
  .promise li { grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 14px; }
  .promise .n { width: 34px; height: 34px; border-radius: 8px; font-size: 12px; }
  .promise li:not(:last-child)::before, .promise li:not(:last-child)::after { left: 16px; top: 34px; }
  .promise li > div { padding-top: 5px; }
  .promise b { font-size: 15px; } .promise li > div > span { font-size: 14px; }
}
@media (min-width: 861px) and (max-height: 720px) {
  .split .intro { padding: 28px 48px; gap: 16px; }
  .split .intro h2 { font-size: 24px; max-width: 26ch; }
  .split .intro > div > p { display: none; } /* the form side already says what to do */
  .promise li { padding-bottom: 10px; }
  .promise li > div > span { font-size: 13px; line-height: 1.4; }
}
@media (min-width: 861px) and (max-height: 600px) { .split .intro > p { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Admin signals ---------- */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); vertical-align: middle; }
.dot.ok { background: var(--green); } .dot.warn { background: #d9a53a; } .dot.bad { background: var(--red); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.row h2 { margin-right: auto; }

/* ---------- Show/hide password ---------- */
.pw { position: relative; display: block; }
.pw input { padding-right: 48px; }
.pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-height: 36px; width: 40px; padding: 0; border: 0; background: none; color: var(--muted); border-radius: 6px; }
.pw-toggle:hover { background: var(--hover); color: var(--ink); }
.pw-toggle:active { transform: translateY(-50%) scale(0.96); }