/* Adjust360 knowledge site: design system
   Tokens first, then Material overrides, then the guide components. */

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --a-ink: #172033;
  --a-ink-2: #3B4660;
  --a-ink-3: #6B7590;
  --a-paper: #F4F6F9;
  --a-surface: #FFFFFF;
  --a-line: #DCE1EA;
  --a-line-strong: #B9C2D2;
  --a-brand: #C7891A;
  --a-brand-ink: #7A5006;
  --a-brand-wash: #FBF3E3;
  --a-confirmed: #1C7C54;
  --a-confirmed-wash: #E6F4EC;
  --a-indeterminate: #A86A00;
  --a-indeterminate-wash: #FFF4DF;
  --a-excluded: #B3261E;
  --a-excluded-wash: #FBE9E7;
  --a-material: #5B3FA3;
  --a-material-wash: #EFEAF9;
  --a-held: #566072;
  --a-held-wash: #EEF0F4;
  --a-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --a-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --a-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  --a-radius-panel: 14px;
  --a-radius-chip: 999px;
  --a-radius-control: 8px;
  --a-measure: 68ch;
}

[data-md-color-scheme="slate"] {
  --a-ink: #E8ECF4;
  --a-ink-2: #C3CAD9;
  --a-ink-3: #8C96AD;
  --a-paper: #0F1726;
  --a-surface: #161F31;
  --a-line: #26304A;
  --a-line-strong: #3B4866;
  --a-brand: #E2A63A;
  --a-brand-ink: #F3CC84;
  --a-brand-wash: #2A2416;
  --a-confirmed: #4FC48D;
  --a-confirmed-wash: #13301F;
  --a-indeterminate: #F2B14B;
  --a-indeterminate-wash: #332812;
  --a-excluded: #F0776B;
  --a-excluded-wash: #3A1B18;
  --a-material: #B49BF0;
  --a-material-wash: #27203E;
  --a-held: #9AA4B8;
  --a-held-wash: #1E2535;
}

/* Material variable mapping */
:root, [data-md-color-scheme="default"] {
  --md-default-bg-color: var(--a-paper);
  --md-default-fg-color: var(--a-ink);
  --md-default-fg-color--light: var(--a-ink-2);
  --md-default-fg-color--lighter: var(--a-ink-3);
  --md-default-fg-color--lightest: var(--a-line);
  --md-primary-fg-color: var(--a-ink);
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: var(--a-brand-ink);
  --md-typeset-a-color: #1F4FA3;
  --md-code-bg-color: #EEF1F6;
  --md-code-fg-color: #2B3550;
  --md-footer-bg-color: var(--a-ink);
  --md-footer-bg-color--dark: #0F1726;
  --md-typeset-table-color: var(--a-line);
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--a-paper);
  --md-default-fg-color: var(--a-ink);
  --md-default-fg-color--light: var(--a-ink-2);
  --md-default-fg-color--lighter: var(--a-ink-3);
  --md-default-fg-color--lightest: var(--a-line);
  --md-primary-fg-color: #0B111D;
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: var(--a-brand);
  --md-typeset-a-color: #8FB3FF;
  --md-code-bg-color: #1C2538;
  --md-code-fg-color: #D4DBEA;
  --md-footer-bg-color: #0B111D;
  --md-footer-bg-color--dark: #080D17;
}

/* Base type */
body, .md-typeset { font-family: var(--a-body); }
.md-typeset { font-size: 0.86rem; line-height: 1.65; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-family: var(--a-body);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--a-ink);
}
.md-typeset h1 { font-size: 2.1rem; line-height: 1.12; margin-bottom: 0.6em; }
.md-typeset h2 { font-size: 1.45rem; line-height: 1.2; margin-top: 2.2em; padding-bottom: 0.25em; border-bottom: 1px solid var(--a-line); }
.md-typeset h3 { font-size: 1.1rem; font-family: var(--a-body); font-weight: 600; }
.md-typeset p, .md-typeset li { max-width: var(--a-measure); }
.md-typeset code { font-family: var(--a-mono); font-size: 0.8em; padding: 0.1em 0.35em; border-radius: 4px; }
.md-typeset table:not([class]) { font-size: 0.78rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--a-line); box-shadow: none; }
.md-typeset table:not([class]) th { background: var(--a-surface); font-weight: 600; color: var(--a-ink-2); border-bottom: 1px solid var(--a-line-strong); }
.md-typeset table:not([class]) td { border-top: 1px solid var(--a-line); vertical-align: top; }
.md-typeset mark { background: var(--a-brand-wash); color: var(--a-brand-ink); padding: 0 0.25em; border-radius: 3px; font-family: var(--a-mono); font-size: 0.78em; }
.md-typeset .admonition { border-radius: 10px; border-left-width: 3px; font-size: 0.8rem; }
.md-typeset hr { border-color: var(--a-line); }

/* Header and tabs */
.md-header { background: var(--a-surface); color: var(--a-ink); border-bottom: 1px solid var(--a-line); box-shadow: none; }
.md-header__title, .md-header__button, .md-header .md-search__input { color: var(--a-ink); }
.md-header__title { font-family: var(--a-display); font-weight: 500; font-size: 1rem; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 26px; width: auto; }
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-header__button.md-logo svg { filter: invert(1); }
.md-tabs { background: var(--a-surface); color: var(--a-ink-2); border-bottom: 1px solid var(--a-line); }
.md-tabs__link { font-size: 0.74rem; font-weight: 600; opacity: 1; color: var(--a-ink-3); }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--a-ink); }
.md-tabs__item--active .md-tabs__link { box-shadow: inset 0 -2px 0 var(--a-brand); }
.md-search__form { background: var(--a-paper); border: 1px solid var(--a-line); border-radius: 8px; }
.md-search__input::placeholder { color: var(--a-ink-3); }
[data-md-color-scheme="slate"] .md-header, [data-md-color-scheme="slate"] .md-tabs { background: #0B111D; }

/* Sidebars */
.md-nav__title { font-weight: 600; color: var(--a-ink-2); }
.md-nav__link { font-size: 0.74rem; }
.md-nav__link--active, .md-nav__link:hover { color: var(--a-ink); }
.md-nav__item .md-nav__link--active { font-weight: 600; }
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb { background: var(--a-line-strong); }

/* Footer */
.md-footer-meta { font-size: 0.68rem; }
.md-copyright { color: #AEB7CA; }

/* Page kind badge from front matter */
.a-kind { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.68rem; color: var(--a-ink-3); margin-bottom: 1.4em; }
.a-kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--a-line-strong); }
.a-kind[data-kind="authored"]::before { background: var(--a-brand); }
.a-kind[data-kind="generated"]::before { background: var(--a-confirmed); }
.a-kind[data-kind="guide"]::before { background: var(--a-material); }

/* ---------- Status vocabulary chips (used everywhere) ---------- */
.st { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--a-mono); font-size: 0.72em; line-height: 1; padding: 0.3em 0.6em; border-radius: var(--a-radius-chip); border: 1px solid transparent; white-space: nowrap; vertical-align: middle; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-stated { color: var(--a-confirmed); background: var(--a-confirmed-wash); }
.st-not_stated { color: var(--a-indeterminate); background: var(--a-indeterminate-wash); }
.st-not_returned, .st-omitted { color: var(--a-held); background: var(--a-held-wash); }
.st-not_returned::before, .st-omitted::before { background: transparent; border: 1.5px solid currentColor; }
.st-not_extractable { color: var(--a-excluded); background: var(--a-excluded-wash); }

/* Verdict tokens */
.vd { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--a-body); font-weight: 600; font-size: 0.78rem; padding: 0.35em 0.75em; border-radius: 6px; }
.vd-confirmed { color: var(--a-confirmed); background: var(--a-confirmed-wash); }
.vd-indeterminate { color: var(--a-indeterminate); background: var(--a-indeterminate-wash); }
.vd-excluded { color: var(--a-excluded); background: var(--a-excluded-wash); }
.vd-held, .vd-rerouted { color: var(--a-held); background: var(--a-held-wash); }
.vd-material { color: var(--a-material); background: var(--a-material-wash); }

/* ---------- Hubs and cards ---------- */
.a-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 1.5rem 0 2rem; }
.a-card { display: block; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius-panel); padding: 1.1rem 1.2rem 1.2rem; color: inherit; text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; }
.a-card:hover, .a-card:focus-visible { border-color: var(--a-line-strong); outline: none; }
.a-card:focus-visible { box-shadow: 0 0 0 3px var(--a-brand-wash), 0 0 0 4px var(--a-brand); }
.a-card h3 { margin: 0 0 0.35em; font-family: var(--a-body); font-weight: 600; font-size: 1.05rem; color: var(--a-ink); }
.a-card p { margin: 0; font-size: 0.78rem; color: var(--a-ink-2); max-width: none; }
.a-card .a-card-meta { display: flex; gap: 0.5em; flex-wrap: wrap; margin-top: 0.8em; }
.a-card .a-card-lob { font-size: 0.68rem; font-weight: 600; color: var(--a-ink-3); padding: 0.2em 0.55em; border: 1px solid var(--a-line); border-radius: 4px; }
.a-card--theory { border-top: 3px solid var(--a-brand); }
.a-card--theory.auto { border-top-color: #2F6DB5; }
.a-card--theory.property { border-top-color: var(--a-brand); }
.a-door { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius-panel); padding: 1.4rem 1.5rem 1.5rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.5rem; }
.a-door .a-door-title { font-family: var(--a-body); font-weight: 700; font-size: 1.1rem; line-height: 1.2; color: var(--a-ink); }
.a-door .a-door-text { color: var(--a-ink-2); font-size: 0.82rem; line-height: 1.55; }
.a-door .a-door-who { font-size: 0.72rem; color: var(--a-ink-3); }
.a-door:hover { border-color: var(--a-brand); }

/* The three questions (sequence, so numbered) */
.a-seq { counter-reset: q; list-style: none; padding: 0; margin: 1.2rem 0 2rem; display: grid; gap: 0.7rem; }
.a-seq li { counter-increment: q; position: relative; padding: 0.9rem 1rem 0.9rem 3.2rem; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; max-width: none; }
.a-seq li::before { content: counter(q); position: absolute; left: 1rem; top: 0.8rem; font-family: var(--a-body); font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--a-brand); }
.a-seq li strong { display: block; font-weight: 600; margin-bottom: 0.2em; }

/* Status word table */
.a-vocab { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1rem 0 2rem; }
.a-vocab div { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; padding: 0.8rem 0.9rem; font-size: 0.78rem; }
.a-vocab div p { margin: 0.5em 0 0; color: var(--a-ink-2); }

/* ---------- Scenario page layout ---------- */
.a-scenario .md-content__inner { max-width: none; }
.a-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2.2rem; align-items: start; }
@media (max-width: 1219px) { .a-two { grid-template-columns: 1fr; } .a-lab { position: static !important; } }
.a-lab { position: sticky; top: 5.4rem; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-radius-panel); padding: 1rem 1.1rem 1.2rem; }
.a-lab h3 { margin: 0 0 0.2em; font-family: var(--a-body); font-weight: 700; font-size: 1.15rem; }
.a-lab .a-lab-hint { font-size: 0.72rem; color: var(--a-ink-3); margin: 0 0 0.9rem; }
.a-fact { display: grid; grid-template-columns: 1fr; gap: 0.25rem; padding: 0.55rem 0; border-top: 1px solid var(--a-line); }
.a-fact:first-of-type { border-top: 0; }
.a-fact label { font-size: 0.74rem; color: var(--a-ink-2); }
.a-fact label code { font-family: var(--a-mono); font-size: 0.72rem; background: transparent; padding: 0; color: var(--a-ink); }
.a-seg { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.a-seg button { font: 500 0.7rem/1 var(--a-body); padding: 0.4em 0.65em; border: 1px solid var(--a-line-strong); background: var(--a-paper); color: var(--a-ink-2); border-radius: var(--a-radius-control); cursor: pointer; }
.a-seg button[aria-pressed="true"] { background: var(--a-ink); color: #fff; border-color: var(--a-ink); }
.a-seg button:focus-visible { outline: 2px solid var(--a-brand); outline-offset: 1px; }
.a-verdict { margin-top: 0.9rem; border-radius: 10px; padding: 0.85rem 0.95rem; border: 1px solid var(--a-line); background: var(--a-paper); transition: background 180ms ease; }
.a-verdict[data-status="confirmed"] { background: var(--a-confirmed-wash); border-color: transparent; }
.a-verdict[data-status="indeterminate"] { background: var(--a-indeterminate-wash); border-color: transparent; }
.a-verdict[data-status="excluded"] { background: var(--a-excluded-wash); border-color: transparent; }
.a-verdict[data-status="held"], .a-verdict[data-status="rerouted"] { background: var(--a-held-wash); border-color: transparent; }
.a-verdict .a-verdict-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.a-verdict .a-outcome { font-family: var(--a-body); font-size: 1.25rem; font-weight: 700; }
.a-verdict ul { margin: 0.55rem 0 0; padding-left: 1.1rem; font-size: 0.76rem; }
.a-verdict ul li { max-width: none; margin: 0.15em 0; }
.a-verdict .a-targets { margin-top: 0.5rem; font-size: 0.74rem; }
.a-verdict .a-targets span { display: inline-block; margin: 0.15rem 0.35rem 0 0; padding: 0.2em 0.5em; border: 1px solid var(--a-line-strong); border-radius: 4px; background: var(--a-surface); }
.a-verdict .a-gap { margin-top: 0.6rem; font-size: 0.72rem; color: var(--a-ink-2); border-left: 2px solid var(--a-brand); padding-left: 0.6rem; }
.a-tries { margin-top: 0.9rem; display: grid; gap: 0.35rem; }
.a-tries button { text-align: left; font: 500 0.72rem/1.3 var(--a-body); padding: 0.5em 0.7em; border: 1px dashed var(--a-line-strong); background: transparent; color: var(--a-ink); border-radius: var(--a-radius-control); cursor: pointer; }
.a-tries button:hover { border-style: solid; }
.a-tries .a-expect { display: none; font-size: 0.7rem; color: var(--a-ink-2); padding: 0.1rem 0.7em 0.3rem; }
.a-tries .a-expect.show { display: block; }
.a-reset { margin-top: 0.6rem; font: 500 0.7rem/1 var(--a-body); background: none; border: 0; color: var(--a-ink-3); cursor: pointer; text-decoration: underline; }

/* Scenario prose blocks */
.a-sec { margin: 1.4rem 0; }
.a-sec h2 { margin-top: 1.6rem; }
.a-narr { border-left: 3px solid var(--a-brand); padding: 0.2rem 0 0.2rem 1rem; margin: 1rem 0; font-family: var(--a-body); font-size: 0.98rem; line-height: 1.5; color: var(--a-ink-2); max-width: var(--a-measure); }
.a-reading { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; padding: 0.9rem 1rem; font-size: 0.8rem; max-width: var(--a-measure); }
.a-reading strong { display: block; margin-bottom: 0.3em; color: var(--a-ink-2); font-weight: 600; }
.a-records { font-size: 0.74rem; color: var(--a-ink-2); display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.6rem 0 1.2rem; }
.a-records code { font-size: 0.72rem; }
.a-note { font-size: 0.76rem; color: var(--a-ink-2); border: 1px solid var(--a-line); border-left: 3px solid var(--a-material); border-radius: 8px; padding: 0.7rem 0.9rem; max-width: var(--a-measure); }

/* Quiz */
.a-quiz { border: 1px solid var(--a-line); border-radius: 12px; padding: 1rem 1.1rem; margin: 1rem 0; background: var(--a-surface); max-width: var(--a-measure); }
.a-quiz .a-q { font-weight: 600; margin: 0 0 0.6rem; }
.a-quiz .a-opts { display: grid; gap: 0.35rem; }
.a-quiz .a-opts button { text-align: left; font: 400 0.78rem/1.35 var(--a-body); padding: 0.5em 0.75em; border: 1px solid var(--a-line-strong); background: var(--a-paper); color: var(--a-ink); border-radius: var(--a-radius-control); cursor: pointer; }
.a-quiz .a-opts button[data-state="right"] { background: var(--a-confirmed-wash); border-color: var(--a-confirmed); }
.a-quiz .a-opts button[data-state="wrong"] { background: var(--a-excluded-wash); border-color: var(--a-excluded); }
.a-quiz .a-why { display: none; margin-top: 0.6rem; font-size: 0.76rem; color: var(--a-ink-2); }
.a-quiz .a-why.show { display: block; }
.a-quiz-score { font-size: 0.78rem; color: var(--a-ink-2); margin: 0.5rem 0 1rem; }

/* Quick reference table */
.a-ref table { font-size: 0.74rem; }

/* ---------- Home page ---------- */
.a-home .md-content__inner { max-width: none; padding-top: 0; }
.a-home .md-content__inner::before { display: none; }
.a-hero { display: block; padding: 3.2rem 0 2.6rem; }
.a-hero h1 { font-family: var(--a-body); font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 1rem; }
.a-hero h1 em { font-style: normal; color: var(--a-brand-ink); }
.a-hero .a-lede { font-size: 1rem; color: var(--a-ink-2); max-width: 54ch; margin: 0 0 1.4rem; line-height: 1.55; }
.a-hero .a-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.a-btn { display: inline-block; font: 600 0.8rem/1 var(--a-body); padding: 0.75em 1.1em; border-radius: 8px; text-decoration: none; border: 1px solid var(--a-ink); color: var(--a-ink); }
.a-btn.primary { background: var(--a-ink); color: #fff; }
[data-md-color-scheme="slate"] .a-btn.primary { background: var(--a-brand); color: #0F1726; border-color: var(--a-brand); }
.a-hero .a-lab { position: static; }
.a-home-section { padding: 1.2rem 0 2rem; border-top: 1px solid var(--a-line); }
.a-home-section h2 { font-family: var(--a-body); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-ink-2); margin: 0 0 0.3rem; border: 0; padding: 0; }
.a-home-section > p { color: var(--a-ink-2); font-size: 0.84rem; max-width: 64ch; margin: 0 0 1rem; }
.a-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.a-facts-strip { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.78rem; color: var(--a-ink-2); margin: 0.6rem 0 0; }
.a-facts-strip b { color: var(--a-ink); font-weight: 600; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Dark-mode pressed segment: light pill, dark text */
[data-md-color-scheme="slate"] .a-seg button[aria-pressed="true"] { background: #E8ECF4; color: #0F1726; border-color: #E8ECF4; }
[data-md-color-scheme="slate"] .a-verdict .a-targets span { background: var(--a-surface); }
[data-md-color-scheme="slate"] .md-typeset mark { background: var(--a-brand-wash); color: var(--a-brand-ink); }