/* ────────────────────────────────────────────────────────────────
   ARABOO LMS — HOW-TO PAGE
   Consumes global design tokens from _tokens.css. Single-page
   walkthrough; every visual choice reads brand tokens so the page
   re-tints automatically with the rest of the platform.
   ──────────────────────────────────────────────────────────────── */

#ahw-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 24px 96px;
    font-family: var(--font-chrome);
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.55;
    background: var(--surface);
}

#ahw-page * { box-sizing: border-box; }

/* ── Hero ─────────────────────────────────────────────────────── */
.ahw-hero {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 48px 44px 44px;
    margin: 0 0 40px;
    color: var(--surface-warm);
    background: linear-gradient(135deg, var(--ink-deep) 0%, var(--teal-primary) 100%);
    overflow: hidden;
    isolation: isolate;
}
.ahw-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(233,122,79,0.45), transparent 45%),
        radial-gradient(circle at 18% 95%, rgba(124,174,124,0.30), transparent 55%);
    z-index: -1;
    pointer-events: none;
}
.ahw-hero-inner { position: relative; z-index: 1; }
.ahw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--surface-warm);
}
.ahw-eyebrow i { font-size: 16px; }
.ahw-ar {
    font-family: var(--font-arabic);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding-inline-start: 4px;
    border-inline-start: 1px solid rgba(255,255,255,0.4);
    margin-inline-start: 6px;
    font-size: 0.92em;
}
.ahw-h1 {
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.05;
    font-weight: 800;
    margin: 0 0 12px;
    color: #FFFFFF;
    letter-spacing: -0.02em;
}
.ahw-lede {
    max-width: 620px;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--surface-warm);
    opacity: 0.92;
}

/* ── Table of contents ───────────────────────────────────────── */
.ahw-toc {
    background: var(--surface-mint);
    border: 1px solid var(--sage-pale);
    border-radius: var(--radius-md);
    padding: 24px 28px 22px;
    margin: 0 0 56px;
}
.ahw-toc-title {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}
.ahw-toc-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    counter-reset: none;
}
.ahw-toc-list li { margin: 0; }
.ahw-toc-list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}
.ahw-toc-list a:hover {
    color: var(--teal-primary);
    border-bottom-color: var(--teal-soft);
}
.ahw-toc-num {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 800;
    color: var(--teal-primary);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .ahw-toc-list { grid-template-columns: 1fr; }
}

/* ── Section shell ───────────────────────────────────────────── */
.ahw-section {
    margin: 0 0 64px;
    scroll-margin-top: 60px;
}
.ahw-shead {
    display: flex; align-items: baseline; gap: 14px;
    border-bottom: 2px solid var(--sage-pale);
    padding-bottom: 14px;
    margin-bottom: 22px;
}
.ahw-snum {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--accent-coral);
    font-variant-numeric: tabular-nums;
    padding: 4px 10px;
    background: rgba(233, 122, 79, 0.10);
    border-radius: var(--radius-sm);
}
.ahw-shead h2 {
    margin: 0;
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 800;
    color: var(--ink-deep);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.01em;
}
.ahw-shead h2 i { color: var(--teal-primary); font-size: 0.9em; }
.ahw-shead h2 .ahw-ar {
    border-inline-start-color: var(--sage-line);
    color: var(--ink-soft);
    font-weight: 600;
}

.ahw-intro {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 22px;
    max-width: 740px;
}
.ahw-sub {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink-deep);
    margin: 28px 0 12px;
}

/* ── Card grids ──────────────────────────────────────────────── */
.ahw-grid-2,
.ahw-grid-3 {
    display: grid;
    gap: 16px;
    margin: 0 0 18px;
}
.ahw-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ahw-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.ahw-card {
    padding: 22px 22px 20px;
    border: 1px solid var(--sage-pale);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}
.ahw-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--teal-soft);
}
.ahw-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink-deep);
    display: flex; align-items: center; gap: 8px;
}
.ahw-card h3 i { color: var(--teal-primary); font-size: 18px; }
.ahw-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
}
.ahw-card-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 0 12px;
    font-size: 20px;
    background: var(--surface-mint);
    color: var(--teal-primary);
}
.ahw-card-icon.ahw-tone-mint  { background: var(--surface-mint); color: var(--teal-primary); }
.ahw-card-icon.ahw-tone-burnt { background: rgba(198,90,48,0.12); color: var(--accent-burnt); }
.ahw-card-icon.ahw-tone-amber { background: rgba(242,179,61,0.18); color: var(--accent-burnt); }

/* ── Callouts ────────────────────────────────────────────────── */
.ahw-callout {
    display: flex; gap: 14px;
    padding: 16px 20px;
    margin: 18px 0 0;
    background: var(--surface-mint);
    border: 1px solid var(--sage-pale);
    border-left: 4px solid var(--teal-primary);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.55;
}
.ahw-callout i {
    color: var(--teal-primary);
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1.3;
}
.ahw-callout p { margin: 0; }
.ahw-callout-tip {
    background: rgba(242, 179, 61, 0.12);
    border-color: rgba(242, 179, 61, 0.32);
    border-left-color: var(--accent-amber);
}
.ahw-callout-tip i { color: var(--accent-burnt); }
.ahw-callout-warn {
    background: rgba(233, 122, 79, 0.10);
    border-color: rgba(233, 122, 79, 0.35);
    border-left-color: var(--accent-coral);
}
.ahw-callout-warn i { color: var(--accent-coral); }

/* ── Lists ───────────────────────────────────────────────────── */
.ahw-tabs,
.ahw-bullets,
.ahw-steps {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.ahw-tabs li,
.ahw-bullets li {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sage-pale);
    font-size: 15px;
    color: var(--ink);
}
.ahw-tabs li:last-child,
.ahw-bullets li:last-child { border-bottom: 0; }
.ahw-tabs li i,
.ahw-bullets li i {
    color: var(--teal-primary);
    margin-right: 6px;
}
.ahw-tabs li b,
.ahw-steps li b {
    color: var(--ink-deep);
    font-weight: 700;
}
.ahw-steps li {
    padding: 12px 16px 12px 18px;
    margin-bottom: 8px;
    background: var(--surface-mint);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--teal-primary);
    font-size: 15px;
    color: var(--ink);
}
.ahw-steps li b {
    font-variant-numeric: tabular-nums;
    color: var(--teal-primary);
    margin-right: 6px;
}

/* ── Chip list (block-type catalogue) ────────────────────────── */
.ahw-chip-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ahw-chip-list li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--sage-pale);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-deep);
}
.ahw-chip-list li i {
    color: var(--teal-primary);
    font-size: 16px;
}

/* ── Figure / illustration ───────────────────────────────────── */
.ahw-figure {
    margin: 22px 0;
    padding: 0;
}
.ahw-figure svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--sage-pale);
    background: var(--surface);
}
.ahw-figure figcaption {
    margin: 10px 4px 0;
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
    line-height: 1.5;
}

/* ── Feature catalogue (#14) ─────────────────────────────────── */
.ahw-section-catalogue { margin-top: 80px; }

.ahw-roles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 26px 0 0;
}
@media (max-width: 980px) {
    .ahw-roles-grid { grid-template-columns: 1fr; }
}

.ahw-role-col {
    background: var(--surface);
    border: 1px solid var(--sage-pale);
    border-radius: var(--radius-md);
    padding: 0 0 22px;
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.ahw-role-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sage-pale);
    color: var(--ink-deep);
}
.ahw-role-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: inherit;
    display: inline-flex; align-items: baseline; gap: 8px;
}
.ahw-role-head .ahw-ar {
    border-inline-start-color: rgba(22, 54, 59, 0.25);
    color: inherit;
    opacity: 0.85;
    font-weight: 600;
}
.ahw-role-glyph {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    font-size: 20px;
    flex-shrink: 0;
}

.ahw-role-head--mint  { background: var(--surface-mint);          color: var(--teal-primary); }
.ahw-role-head--burnt { background: rgba(198, 90, 48, 0.10);      color: var(--accent-burnt); }
.ahw-role-head--amber { background: rgba(242, 179, 61, 0.16);     color: var(--accent-burnt); }

.ahw-role-note {
    margin: 12px 22px 4px;
    padding: 8px 12px;
    background: var(--surface-mint);
    border-left: 3px solid var(--teal-primary);
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-style: italic;
    color: var(--ink-soft);
}

.ahw-role-sub {
    margin: 18px 22px 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-burnt);
}

.ahw-role-list {
    list-style: none;
    margin: 0;
    padding: 0 22px;
}
.ahw-role-list li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    border-bottom: 1px solid var(--sage-pale);
}
.ahw-role-list li:last-child { border-bottom: 0; }
.ahw-role-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--teal-primary);
    opacity: 0.55;
}

/* ── Footer ──────────────────────────────────────────────────── */
.ahw-footer {
    margin: 80px 0 0;
    padding: 28px;
    background: var(--surface-mint);
    border: 1px solid var(--sage-pale);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--ink-soft);
}
.ahw-footer p { margin: 0 0 6px; font-size: 14px; }
.ahw-footer time { font-weight: 700; color: var(--ink-deep); }
.ahw-footer-soft { font-style: italic; }

/* ── Anchored scroll ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Theme bleed defence (Funcare button paint won't reach our buttons; this page has none, but tabs in svg are inert) ── */
.ahw-section a {
    color: var(--teal-primary);
}
.ahw-section a:hover {
    color: var(--ink-deep);
}