/* ============================================================
   v3hs- : SLYD hardware subpage cluster (August 2026 rebuild).

   Shared layout primitives for the 18 pages nested under
   /hardware. Lives here rather than in 18 scoped .razor.css
   files because the cluster is one design system; per-page
   .razor.css is reserved for modules that genuinely belong to
   a single page.

   Family accents keep the four families visually distinct
   without changing the underlying structure:
     .v3hs--accel  accelerator + architecture   cyan
     .v3hs--oem    manufacturer families        purple
     .v3hs--infra  data center dependencies     gold
     .v3hs--svc    deployment + custom work     green
   ============================================================ */

.v3hs {
    --primary: var(--slyd-primary);
    --gold: var(--slyd-accent-gold);
    --gold-soft: var(--slyd-accent-gold-soft);
    --purple: var(--slyd-accent-purple);
    --success: var(--slyd-success);
    --bg-body: var(--slyd-bg-body);
    --bg-card: var(--slyd-bg-card);
    --bg-elevated: var(--slyd-bg-elevated);
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --border: var(--slyd-border);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --font-display: var(--slyd-font-family-heading);
    --font-body: var(--slyd-font-family);
    --font-mono: var(--slyd-font-family-mono);

    /* Overridden by the family modifiers below. */
    --accent: var(--slyd-primary);
    --accent-soft: rgba(6, 182, 212, 0.14);
    --accent-line: rgba(6, 182, 212, 0.32);

    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
}

.v3hs--accel { --accent: #06b6d4; --accent-soft: rgba(6, 182, 212, 0.14); --accent-line: rgba(6, 182, 212, 0.34); }
.v3hs--oem   { --accent: #8b5cf6; --accent-soft: rgba(139, 92, 246, 0.14); --accent-line: rgba(139, 92, 246, 0.34); }
.v3hs--infra { --accent: #f59e0b; --accent-soft: rgba(245, 158, 11, 0.13); --accent-line: rgba(245, 158, 11, 0.32); }
.v3hs--svc   { --accent: #22c55e; --accent-soft: rgba(34, 197, 94, 0.13); --accent-line: rgba(34, 197, 94, 0.32); }

.v3hs *,
.v3hs *::before,
.v3hs *::after { box-sizing: border-box; }

.v3hs a { color: inherit; text-decoration: none; }

/* Focus ring on interactive elements only. Blazor's enhanced navigation
   focuses the page <h1> after a soft navigation for screen-reader
   announcement, and a visible ring there reads as a stray box. The site
   already suppresses it via `h1:focus { outline: none }` in app.css, so
   this rule must not reintroduce it with higher specificity. */
.v3hs a:focus-visible,
.v3hs button:focus-visible,
.v3hs summary:focus-visible,
.v3hs [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.v3hs-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- breadcrumb ---------- */

/* ---------- hero ---------- */

.v3hs-hero {
    padding: 72px 0 56px;
    border-bottom: 1px solid var(--border-subtle);
    background:
        radial-gradient(900px 380px at 12% -10%, var(--accent-soft), transparent 68%),
        var(--bg-body);
}

/* Flat hero, for pages that want the v3hs hero on the page background with
   no tinted panel of its own. Also cancels the three .v3hs root declarations
   that only make sense on a page wrapper: this modifier is used where .v3hs
   sits on the section itself, to pick up the token block without adopting a
   full-viewport, clipped, separately-painted page body. */
.v3hs-hero--flat {
    background: none;
    border-bottom: none;
    min-height: 0;
    overflow-x: visible;
}

.v3hs-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}

.v3hs-h1 {
    font-family: var(--font-display);
    font-size: clamp(2.125rem, 4vw, 3.125rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    max-width: 20ch;
}

.v3hs-lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 74ch;
    margin: 0 0 30px;
}

.v3hs-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ---------- buttons ---------- */

.v3hs-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.v3hs-btn-primary {
    background: var(--gold);
    color: #1a1206;
    border-color: var(--gold);
}

.v3hs-btn-primary:hover { background: var(--slyd-accent-gold-dark, #d97706); }

.v3hs-btn-ghost {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.v3hs-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.v3hs-btn-quiet {
    padding: 13px 4px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.v3hs-arr { transition: transform 0.15s ease; }
.v3hs-btn:hover .v3hs-arr { transform: translateX(3px); }

/* ---------- sections ---------- */

.v3hs-section { padding: 68px 0; border-bottom: 1px solid var(--border-subtle); }
.v3hs-section--alt { background: rgba(255, 255, 255, 0.015); }

.v3hs-head { margin-bottom: 34px; max-width: 78ch; }

.v3hs-kicker {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.v3hs-h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 1.9375rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
}

.v3hs-h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
}

.v3hs-p {
    color: var(--text-secondary);
    max-width: 78ch;
    margin: 0 0 16px;
}

.v3hs-p:last-child { margin-bottom: 0; }

.v3hs-p a,
.v3hs-li a,
.v3hs-answer a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Direct answer block: the first substantial answer on the page. */
.v3hs-answer {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 80ch;
    padding-left: 20px;
    border-left: 2px solid var(--accent-line);
    margin: 0;
}

/* ---------- generic card grid ---------- */

.v3hs-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.v3hs-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.v3hs-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    background: var(--bg-card);
}

.v3hs-card p { color: var(--text-tertiary); margin: 0; font-size: 0.9375rem; }

a.v3hs-card { display: block; transition: border-color 0.15s ease, background 0.15s ease; }
a.v3hs-card:hover { border-color: var(--accent); background: var(--bg-elevated); }
a.v3hs-card .v3hs-h3 { color: var(--text-primary); }

.v3hs-card-tag {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    display: block;
    margin-bottom: 10px;
}

/* ---------- lists ---------- */

.v3hs-list { list-style: none; margin: 0; padding: 0; }

.v3hs-list .v3hs-li {
    position: relative;
    padding: 0 0 0 22px;
    margin-bottom: 11px;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.v3hs-list .v3hs-li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.v3hs-list .v3hs-li:last-child { margin-bottom: 0; }

.v3hs-cols {
    display: grid;
    gap: 10px 40px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---------- numbered stage rail ---------- */

.v3hs-stages { list-style: none; margin: 0; padding: 0; counter-reset: v3hs-stage; }

.v3hs-stage {
    counter-increment: v3hs-stage;
    position: relative;
    padding: 0 0 26px 52px;
    border-left: 1px solid var(--border);
    margin-left: 15px;
}

.v3hs-stage:last-child { border-left-color: transparent; padding-bottom: 0; }

.v3hs-stage::before {
    content: counter(v3hs-stage);
    position: absolute;
    left: -15px;
    top: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-body);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.v3hs-stage p { color: var(--text-tertiary); font-size: 0.9375rem; margin: 0; max-width: 74ch; }

/* ---------- tables ---------- */

.v3hs-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.v3hs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 560px;
}

/* Caption sits below the table: it is source and scope context for the
   data, so it reads better as a footnote than as a heading competing
   with the column headers. */
.v3hs-table caption {
    caption-side: bottom;
    text-align: left;
    padding: 14px 18px 16px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    border-top: 1px solid var(--border-subtle);
}

.v3hs-table th,
.v3hs-table td {
    padding: 13px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
}

.v3hs-table thead th {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}

.v3hs-table tbody th {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.v3hs-table td { color: var(--text-tertiary); }
.v3hs-table tbody tr:last-child th,
.v3hs-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- source and caveat notes ---------- */

.v3hs-note {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 86ch;
    margin: 16px 0 0;
}

.v3hs-note a { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 2px; }
.v3hs-note a:hover { color: var(--accent); }

.v3hs-sources {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 22px 24px;
    background: rgba(255, 255, 255, 0.015);
}

.v3hs-sources h2 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px;
}

.v3hs-sources ul { list-style: none; margin: 0; padding: 0; }

.v3hs-sources li {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-muted);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
    word-break: break-word;
}

.v3hs-sources li:last-child { border-bottom: 0; }
.v3hs-sources a { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 2px; }
.v3hs-sources a:hover { color: var(--accent); }

/* ---------- FAQ ---------- */

.v3hs-faq { border-top: 1px solid var(--border-subtle); }

.v3hs-faq-item { border-bottom: 1px solid var(--border-subtle); }

.v3hs-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
}

.v3hs-faq-q::-webkit-details-marker { display: none; }
.v3hs-faq-q:hover { color: var(--accent); }

.v3hs-faq-mark {
    flex-shrink: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 1.125rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.v3hs-faq-item[open] .v3hs-faq-mark { transform: rotate(45deg); }

.v3hs-faq-a {
    margin: 0;
    padding: 0 44px 24px 0;
    color: var(--text-tertiary);
    font-size: 0.9375rem;
    line-height: 1.7;
    max-width: 84ch;
}

.v3hs-faq-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- related paths ---------- */

.v3hs-links {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.v3hs-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.v3hs-link:hover { border-color: var(--accent); color: var(--text-primary); }
.v3hs-link .v3hs-arr { color: var(--accent); }

/* ---------- closing CTA ---------- */

.v3hs-cta { padding: 64px 0 72px; }

.v3hs-cta-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 38px;
    background:
        radial-gradient(700px 260px at 88% 0%, var(--accent-soft), transparent 70%),
        var(--bg-card);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
}

.v3hs-cta-copy { flex: 1 1 420px; }

.v3hs-cta-copy h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.25;
}

.v3hs-cta-copy p { color: var(--text-tertiary); margin: 0; max-width: 62ch; font-size: 0.9375rem; }

.v3hs-cta-act { display: flex; flex-wrap: wrap; gap: 12px; }

.v3hs-updated {
    margin: 24px 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .v3hs-hero { padding: 52px 0 44px; }
    .v3hs-section { padding: 52px 0; }
    .v3hs-cta-card { padding: 28px; }
}

@media (max-width: 640px) {
    .v3hs-wrap { padding: 0 20px; }
    .v3hs-h1 { max-width: none; }
    .v3hs-hero-cta .v3hs-btn { flex: 1 1 100%; justify-content: center; }
    .v3hs-btn-quiet { justify-content: flex-start; }
    .v3hs-cta-act { width: 100%; }
    .v3hs-cta-act .v3hs-btn { flex: 1 1 100%; justify-content: center; }
    .v3hs-stage { padding-left: 40px; }
    .v3hs-faq-a { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .v3hs *,
    .v3hs *::before,
    .v3hs *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Spacing when two link groups stack in one section. */
.v3hs-links-spaced { margin-bottom: 26px; }