/*
 * polyrob.dev portal — page layout
 * Composes ONLY from variables.css tokens (terminal aesthetic, no new palette).
 * Load order: variables.css -> primitives.css -> portal.css
 */

/* ===== HERO ===== */
.hero {
    padding: var(--spacing-2xl) 0;
    border-bottom: var(--border-width) solid var(--color-border);
}

.hero__tag {
    color: var(--color-accent-green);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
}

.hero__title {
    font-family: var(--font-family-display);
    font-size: clamp(var(--font-size-3xl), 7vw, 64px);
    line-height: 1.05;
    letter-spacing: 1px;
    color: var(--color-text-highlight);
    margin-bottom: var(--spacing-lg);
}

.hero__title .accent { color: var(--color-accent-green); }

.hero__sub {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 70ch;
    margin-bottom: var(--spacing-2xl);
}

.hero__cta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
}

/* ===== INSTALL CALLOUT ===== */
.install {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--color-bg-terminal);
    border: var(--border-width) solid var(--color-border);
    border-left-width: var(--border-width-accent);
    border-left-color: var(--color-accent-green);
    padding: var(--spacing-md) var(--spacing-lg);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-md);
    overflow-x: auto;
}

.install__prompt { color: var(--color-accent-green); user-select: none; }
.install__cmd { color: var(--color-text-highlight); white-space: nowrap; }

/* ===== SECTIONS ===== */
.section { padding: var(--spacing-2xl) 0; }
.section__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    letter-spacing: 1px;
    color: var(--color-text-highlight);
    margin-bottom: var(--spacing-xl);
}
.section--bordered { border-top: var(--border-width) solid var(--color-border); }

/* ===== FEATURE / PILLAR GRID ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
}

.tile__title {
    font-size: var(--font-size-lg);
    color: var(--color-text-highlight);
    margin-bottom: var(--spacing-sm);
}
.tile__body { color: var(--color-text-secondary); font-size: var(--font-size-base); margin: 0; }

/* ===== COMPARE TEASER ===== */
.compare-row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
    border-bottom: var(--border-width) solid var(--color-border);
    font-size: var(--font-size-base);
}
.compare-row__label { color: var(--color-text-secondary); }
.compare-row__val { color: var(--color-accent-green); font-family: var(--font-family-mono); }

/* ===== COMPARISON TABLE ===== */
.ctable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
}
.ctable th,
.ctable td {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: var(--border-width) solid var(--color-border);
}
.ctable thead th {
    color: var(--color-text-highlight);
    font-family: var(--font-family-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--font-size-xs);
    border-bottom: var(--border-width-thick) solid var(--color-border);
}
.ctable th.col-polyrob { color: var(--color-accent-green); }
.ctable td.col-polyrob { color: var(--color-accent-green); font-family: var(--font-family-mono); }
.ctable td .feat { color: var(--color-text-secondary); }
.yes { color: var(--color-accent-green); }
.no { color: var(--color-text-muted); }
.partial { color: var(--color-accent-yellow); }

/* ===== STEPS (install / how-to) ===== */
.steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
}
.steps > li {
    counter-increment: step;
    position: relative;
    padding: 0 0 var(--spacing-xl) var(--spacing-2xl);
    border-left: var(--border-width) solid var(--color-border);
    margin-left: var(--spacing-md);
}
.steps > li::before {
    content: counter(step);
    position: absolute;
    left: calc(-1 * var(--spacing-md) - 1px);
    top: 0;
    width: var(--spacing-2xl);
    height: var(--spacing-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-terminal);
    border: var(--border-width) solid var(--color-accent-green);
    color: var(--color-accent-green);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}
.steps > li:last-child { border-left-color: transparent; }
.steps h3 { margin-bottom: var(--spacing-sm); }

/* ===== CATALOG (skills) ===== */
.skill-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
.skill-card__tools {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-md);
}

/* ===== DOC INDEX ===== */
.doc-group { margin-bottom: var(--spacing-2xl); }
.doc-group__kind {
    color: var(--color-accent-blue);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-md);
}
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li { padding: var(--spacing-xs) 0; }

/* ===== NOTE / CALLOUT ===== */
.note {
    border-left: var(--border-width-accent) solid var(--color-accent-yellow);
    background: var(--color-bg-card);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-lg) 0;
}

/* ===== DOCS VIEWER (client-side markdown render from git source) ===== */
.docs-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--spacing-2xl);
    align-items: start;
}
.docs-sidebar {
    position: sticky;
    top: var(--spacing-lg);
    border-right: var(--border-width) solid var(--color-border);
    padding-right: var(--spacing-lg);
}
.docs-sidebar__group { margin-bottom: var(--spacing-xl); }
.docs-sidebar__kind {
    color: var(--color-accent-blue);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
}
.docs-nav { list-style: none; margin: 0; padding: 0; }
.docs-nav a {
    display: block;
    padding: 3px 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}
.docs-nav a:hover { color: var(--color-accent-blue); }
.docs-nav a.is-active { color: var(--color-accent-green); }
.docs-src-note {
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.docs-status { color: var(--color-text-muted); padding: var(--spacing-2xl) 0; }
.docs-status--error { color: var(--color-accent-red); }

/* ===== MARKDOWN PROSE (token-composed) ===== */
.prose { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); max-width: 80ch; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--color-text-highlight); line-height: var(--line-height-tight); }
.prose h1 { font-family: var(--font-family-display); font-size: var(--font-size-3xl); letter-spacing: 1px; margin: 0 0 var(--spacing-lg); }
.prose h2 { font-size: var(--font-size-2xl); margin: var(--spacing-2xl) 0 var(--spacing-md); padding-bottom: var(--spacing-xs); border-bottom: var(--border-width) solid var(--color-border); }
.prose h3 { font-size: var(--font-size-xl); margin: var(--spacing-xl) 0 var(--spacing-sm); }
.prose h4 { font-size: var(--font-size-lg); margin: var(--spacing-lg) 0 var(--spacing-sm); }
.prose p { margin: 0 0 var(--spacing-lg); }
.prose a { color: var(--color-accent-blue); text-decoration: underline; }
.prose a:hover { color: var(--color-accent-green); }
.prose ul, .prose ol { margin: 0 0 var(--spacing-lg); padding-left: var(--spacing-xl); }
.prose li { margin-bottom: var(--spacing-xs); }
.prose code {
    font-family: var(--font-family-mono);
    font-size: 0.92em;
    background: var(--color-bg-terminal);
    border: var(--border-width) solid var(--color-border);
    padding: 1px var(--spacing-xs);
    color: var(--color-accent-teal);
}
.prose pre {
    background: var(--color-bg-terminal);
    border: var(--border-width) solid var(--color-border);
    border-left: var(--border-width-accent) solid var(--color-border);
    padding: var(--spacing-lg);
    overflow-x: auto;
    margin: 0 0 var(--spacing-lg);
}
.prose pre code { background: none; border: none; padding: 0; color: var(--color-text-primary); }
.prose blockquote {
    border-left: var(--border-width-accent) solid var(--color-accent-yellow);
    background: var(--color-bg-card);
    margin: 0 0 var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--color-text-secondary);
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--spacing-lg); font-size: var(--font-size-base); }
.prose th, .prose td { text-align: left; padding: var(--spacing-sm) var(--spacing-md); border-bottom: var(--border-width) solid var(--color-border); }
.prose thead th { color: var(--color-text-highlight); border-bottom: var(--border-width-thick) solid var(--color-border); }
.prose hr { border: none; border-top: var(--border-width) solid var(--color-border); margin: var(--spacing-2xl) 0; }
.prose img { max-width: 100%; }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .hero { padding: var(--spacing-xl) 0; }
    .install { font-size: var(--font-size-base); }
    .ctable { font-size: var(--font-size-sm); }
}
@media (max-width: 760px) {
    .docs-layout { grid-template-columns: 1fr; }
    .docs-sidebar { position: static; border-right: none; border-bottom: var(--border-width) solid var(--color-border); padding-right: 0; padding-bottom: var(--spacing-lg); }
}