*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--ht-color-bg-primary);
    color: var(--ht-color-text-primary);
    font-family: var(--mono);
    overflow-x: hidden;
}

/* honest-page grid */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "main"
        "footer";
}

#honest-header  { grid-area: header; }
#honest-main    { grid-area: main; }
#honest-footer  { grid-area: footer; }

/* Notification surfaces */
#honest-alerts-banners {
    position: sticky;
    top: 0;
    z-index: 100;
    pointer-events: none;
}

#honest-alerts-banners:not(:empty) {
    pointer-events: auto;
}

#honest-alerts-toasts {
    position: fixed;
    bottom: var(--ht-space-xl);
    right: var(--ht-space-xl);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--ht-space-sm);
    pointer-events: none;
}

#honest-alerts-toasts:not(:empty) {
    pointer-events: auto;
}

#honest-alerts-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
}

#honest-alerts-modal:not(:empty) {
    pointer-events: auto;
}

/* Grain overlay */
.grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px;
}

/* S-curve accent */
.s-accent {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: 30vw;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Persona-aware content ───────────────────────────────────────────────── */

/*
  Usage in templates:
    <div class="persona-block for-react for-django">...</div>
    <div class="persona-block for-rails">...</div>
    <div class="persona-block for-polyglot">...</div>

  All .persona-block elements are hidden by default.
  Only the block(s) matching the active persona are shown.
  The polyglot and fp personas see all universal content.
*/

.persona-block { display: none; }

html[data-persona="react"]    .persona-block.for-react,
html[data-persona="rails"]    .persona-block.for-rails,
html[data-persona="django"]   .persona-block.for-django,
html[data-persona="fastapi"]  .persona-block.for-fastapi,
html[data-persona="go"]       .persona-block.for-go,
html[data-persona="laravel"]  .persona-block.for-laravel,
html[data-persona="rust"]     .persona-block.for-rust,
html[data-persona="polyglot"] .persona-block.for-polyglot,
html[data-persona="fp"]       .persona-block.for-fp {
    display: block;
}

/* Polyglot sees all practitioner content too */
html[data-persona="polyglot"] .persona-block { display: block; }



/* ── Bridge text ────────────────────────────────────────────────────────── */

.hf-bridge {
    font-family: var(--serif);
    font-size: 1rem;
    font-style: italic;
    color: var(--cream);
    border-left: 2px solid var(--gold);
    padding: 0.6rem 0 0.6rem 1.25rem;
    margin: 1.5rem 0;
    line-height: 1.6;
}

html[data-persona="fp"] .hf-bridge {
    border-left-color: var(--green);
}

/* ── Universal concept section ─────────────────────────────────────────── */

.hf-universal {
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.hf-universal__heading {
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 1.5rem;
}

.hf-universal__body p {
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ht-color-text-secondary);
    margin-bottom: 1rem;
    max-width: 72ch;
}

.hf-universal__body strong {
    color: var(--cream);
    font-weight: 600;
}

.hf-universal__body code {
    font-family: var(--mono);
    font-size: 0.8em;
    color: var(--gold);
    background: rgba(233, 196, 106, 0.08);
    padding: 0.1em 0.35em;
}

.hf-universal__body pre {
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--cream);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.hf-universal__body pre code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

.hf-universal__subhead {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--cream);
    margin: 2rem 0 0.75rem;
}

/* ── Markdown tables ───────────────────────────────────────────────────────────── */

.hf-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.7rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    display: block;
}

.hf-table th,
.hf-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.5;
}

.hf-table th {
    background: rgba(233, 196, 106, 0.06);
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.62rem;
    white-space: nowrap;
}

.hf-table td {
    color: var(--ht-color-text-secondary);
}

.hf-table td code,
.hf-table th code {
    font-family: var(--mono);
    font-size: 0.8em;
    color: var(--gold);
    background: rgba(233, 196, 106, 0.08);
    padding: 0.1em 0.35em;
}

.hf-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

html[data-persona="fp"] .hf-table th {
    background: rgba(42, 157, 143, 0.06);
    color: var(--green);
}

html[data-persona="fp"] .hf-table td code {
    color: var(--green);
    background: rgba(42, 157, 143, 0.08);
}

/* ── Before/after panels ────────────────────────────────────────────────── */

.before-after { margin: 2rem 0; }

.ba-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.ba-panel {
    background: var(--ht-color-bg-primary);
    display: flex;
    flex-direction: column;
}

.ba-panel__header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ba-panel__label {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ba-panel--before .ba-panel__label {
    color: var(--red);
}

.ba-panel--before .ba-panel__header::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
}

.ba-panel--after .ba-panel__label {
    color: var(--green);
}

.ba-panel--after .ba-panel__header::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}

.ba-panel__code {
    margin: 0;
    padding: 1.25rem 1.25rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.7;
    overflow-x: auto;
    flex: 1;
    color: var(--cream);
}

.ba-panel__code code {
    font-family: inherit;
    font-size: inherit;
}

@media (max-width: 700px) {
    .ba-panels { grid-template-columns: 1fr; }
}

/* ── Spec detail (collapsible) ──────────────────────────────────────────── */

.hf-spec-detail {
    margin: 3rem 0;
    border-top: 1px solid var(--border);
    padding-top: 2rem;
}

.hf-spec-detail details {
    list-style: none;
}

.hf-spec-detail__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.5rem 0;
}

.hf-spec-detail__summary::-webkit-details-marker { display: none; }

.hf-spec-detail__label {
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dim);
}

.hf-spec-detail__hint {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: var(--gold);
    border: 1px solid rgba(233, 196, 106, 0.3);
    padding: 0.15rem 0.5rem;
    transition: background 0.15s;
}

.hf-spec-detail__summary:hover .hf-spec-detail__hint {
    background: rgba(233, 196, 106, 0.08);
}

/* Show/hide the correct hint based on open state */
.hf-spec-detail__hint.open-hint   { display: none; }
.hf-spec-detail__hint.closed-hint { display: inline; }

details[open] .hf-spec-detail__hint.open-hint   { display: inline; }
details[open] .hf-spec-detail__hint.closed-hint { display: none; }

/* Arrow indicator */
.hf-spec-detail__label::before {
    content: '▶ ';
    font-size: 0.5rem;
    vertical-align: middle;
    transition: transform 0.2s;
    display: inline-block;
}

details[open] .hf-spec-detail__label::before {
    transform: rotate(90deg);
}

.hf-spec-detail__body {
    padding-top: 1.5rem;
}

/* Body inherits universal body styles */
.hf-spec-detail__body p {
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ht-color-text-secondary);
    margin-bottom: 1rem;
    max-width: 72ch;
}

.hf-spec-detail__body strong { color: var(--cream); font-weight: 600; }

.hf-spec-detail__body code {
    font-family: var(--mono);
    font-size: 0.8em;
    color: var(--gold);
    background: rgba(233, 196, 106, 0.08);
    padding: 0.1em 0.35em;
}

.hf-spec-detail__body pre {
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--cream);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.hf-spec-detail__body pre code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

.hf-spec-detail__body h2,
.hf-spec-detail__body h3,
.hf-spec-detail__body h4 {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--cream);
    margin: 2rem 0 0.75rem;
}

.hf-spec-detail__body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
    font-family: var(--mono);
    font-size: 0.7rem;
}

.hf-spec-detail__body th,
.hf-spec-detail__body td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.hf-spec-detail__body th {
    color: var(--gold);
    background: rgba(233, 196, 106, 0.05);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6rem;
}

.hf-spec-detail__body td {
    color: var(--ht-color-text-secondary);
}

/* FP persona: green accents */
html[data-persona="fp"] .hf-spec-detail__hint { color: var(--green); border-color: rgba(42, 157, 143, 0.3); }
html[data-persona="fp"] .hf-spec-detail__summary:hover .hf-spec-detail__hint { background: rgba(42, 157, 143, 0.08); }
html[data-persona="fp"] .hf-spec-detail__body th { color: var(--green); background: rgba(42, 157, 143, 0.05); }
html[data-persona="fp"] .hf-spec-detail__body code { color: var(--green); background: rgba(42, 157, 143, 0.08); }

/* ── Reference links ────────────────────────────────────────────────────── */

.hf-references {
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.hf-references__heading {
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 1rem;
}

.hf-references__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hf-references__item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.hf-references__link {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(233, 196, 106, 0.25);
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.hf-references__link:hover {
    color: var(--cream);
    border-color: var(--cream);
}

.hf-references__note {
    font-family: var(--serif);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--dim);
}

html[data-persona="fp"] .hf-references__link {
    color: var(--green);
    border-color: rgba(42, 157, 143, 0.25);
}

html[data-persona="fp"] .hf-references__link:hover {
    color: var(--cream);
    border-color: var(--cream);
}

/* ── Site header ──────────────────────────────────────────────────────────── */

.hf-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 12, 0.92);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hf-header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 3rem;
    gap: 1.5rem;
}

.hf-header__wordmark {
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s;
}

.hf-header__wordmark:hover { color: var(--cream); }

.hf-header__dot {
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
}

.hf-header__controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

/* Persona badge */

.hf-header__persona-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}

.hf-header__persona-badge:hover {
    border-color: rgba(233, 196, 106, 0.3);
}

.hf-header__persona-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.hf-header__persona-change {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    color: var(--dim);
}

.hf-header__persona-badge:hover .hf-header__persona-change {
    color: var(--cream);
}

/* FP persona: green accent instead of gold */
.hf-header[data-persona="fp"] .hf-header__persona-label { color: var(--green); }
.hf-header[data-persona="fp"] .hf-header__persona-badge { border-color: rgba(42, 157, 143, 0.2); }