/* ==========================================================================
   Develop — long-form reading surface.

   These pages are prose, read start-to-finish by non-technical operators, and the
   ecosystem's default app chrome is built for dashboards and tables. This stylesheet
   adds ONLY what is specific to long-form reading; everything with a shared
   equivalent composes that instead (CLAUDE.md rules 6 and 12):

       surface   -> .card          + .dn-wrap        (measure, padding, typography)
       callout   -> .alert-*       + .dn-callout     (block flow for multi-paragraph)
       table     -> .data-table    + local overrides (top-aligned comparison rows)
       status    -> .badge-*                          (no local equivalent needed)
       empty     -> .empty-state .empty-state-card

   Load order: ecosystem-base -> ecosystem-nav -> ecosystem-themes ->
               ecosystem-components -> THIS
   ========================================================================== */

/* ── Reading surface ──────────────────────────────────────────────
   Used as `class="card dn-wrap"`. .card supplies the frosted panel; this
   supplies the reading measure and rhythm. backdrop-filter is required by
   rule 7 for text over the matrix rain and is not part of .card. */

.dn-wrap {
    max-width: 72ch;
    margin: 0 auto 2rem;
    padding: 2.25rem 2.5rem 2rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-primary);
}

/* The overview lists networks side by side rather than as prose. */
.dn-wrap-wide {
    max-width: 60rem;
}

/* ── Typography ───────────────────────────────────────────────── */

.dn-wrap h2 {
    margin: 0 0 .75rem;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.dn-wrap h3 {
    margin: 2.25rem 0 .65rem;
    font-size: 1.1rem;
    line-height: 1.35;
    font-weight: 620;
}

.dn-wrap > h2:first-child {
    margin-top: 0;
}

.dn-wrap p {
    margin: 0 0 1.1rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

.dn-wrap strong {
    color: var(--text-primary);
    font-weight: 620;
}

.dn-wrap a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Opening paragraph — slightly larger, sets the reading pace. */
.dn-lede {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--text-primary);
    margin-bottom: 1.75rem;
}

/* Question headings on the operator Q&A page. */
.dn-q {
    margin: 2.1rem 0 .5rem;
    font-size: 1.06rem;
    font-weight: 640;
    line-height: 1.4;
    color: var(--text-primary);
}

.dn-q + p,
.dn-q + .alert,
.dn-q + .data-table {
    margin-top: 0;
}

/* ── Lists ────────────────────────────────────────────────────────
   ecosystem-base zeroes margin and padding on every element, so a bare <ul>
   would render with its markers clipped outside the box. */

.dn-wrap ul,
.dn-wrap ol {
    margin: 0 0 1.1rem;
    padding-left: 1.4rem;
    color: var(--text-secondary);
}

.dn-wrap li {
    margin-bottom: .4rem;
    line-height: 1.75;
}

.dn-wrap li:last-child {
    margin-bottom: 0;
}

/* ── Callouts ─────────────────────────────────────────────────────
   Used as `class="alert alert-warning dn-callout"`. The shared .alert is a
   one-line flex row; long-form callouts carry a heading and several
   paragraphs, so this restores block flow without redefining the colours. */

.dn-callout {
    display: block;
    margin-bottom: 1.4rem;
}

.dn-callout strong {
    display: block;
    margin-bottom: .4rem;
    color: inherit;
}

.dn-callout p {
    margin-bottom: .7rem;
    color: var(--text-secondary);
}

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

.dn-callout ul,
.dn-callout ol {
    margin-bottom: .7rem;
}

.dn-callout li {
    margin-bottom: .25rem;
}

/* ── Tables ───────────────────────────────────────────────────────
   Comparison tables read better top-aligned than the shared vertical
   centring, and content tables ship without <tbody>. */

.dn-wrap .data-table {
    margin: 0 0 1.5rem;
}

.dn-wrap .data-table td {
    vertical-align: top;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* The 38% suits the two-column key/value tables this app actually has — facts, requirements,
   chain identity — where the label column should hold a steady width against a long value.
   It is wrong for anything wider, which is why the validator census is no longer a table at
   all: eight columns needed ~920px inside a 560px reading measure, and no first-column width
   fixes that. See .dn-nodes at the end of this file. */
.dn-wrap .data-table td:first-child {
    color: var(--text-primary);
    font-weight: 560;
    width: 38%;
}

/* A 44-character genesis hash is the longest value any of these tables carries. */
.dn-wrap .data-table td code {
    overflow-wrap: anywhere;
}

.dn-wrap .data-table tr:last-child td {
    border-bottom: none;
}

/* ── Numbered steps ───────────────────────────────────────────── */

.dn-steps {
    counter-reset: dn-step;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.dn-steps li {
    counter-increment: dn-step;
    position: relative;
    padding: .65rem 0 .65rem 2.3rem;
    border-bottom: 1px solid var(--border);
    line-height: 1.7;
    color: var(--text-secondary);
}

.dn-steps li:last-child {
    border-bottom: none;
}

.dn-steps li::before {
    content: counter(dn-step);
    position: absolute;
    left: 0;
    top: .65rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* ── Overview: network cards ──────────────────────────────────────
   Used as `class="card dn-net-card"`. .card supplies the surface; this
   supplies the link layout. */

.dn-net-grid {
    display: grid;
    gap: 1rem;
    margin: 1.75rem 0 1.5rem;
}

/* Rule 8 — even grids, explicit counts, never auto-fit/auto-fill. */
.dn-net-grid[data-count="1"] { grid-template-columns: repeat(1, 1fr); }
.dn-net-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.dn-net-grid[data-count="3"] { grid-template-columns: repeat(1, 1fr); }
.dn-net-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }

/* 5+ networks: two even columns, so the layout never lands on a 3+1. */
.dn-net-grid { grid-template-columns: repeat(2, 1fr); }
.dn-net-grid[data-count="1"] { grid-template-columns: repeat(1, 1fr); }

.dn-net-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 0;
    padding: 1.15rem 1.25rem;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.dn-net-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.dn-net-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}

.dn-net-name {
    font-size: 1.05rem;
    font-weight: 640;
    line-height: 1.3;
    color: var(--text-primary);
}

.dn-net-tagline {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.dn-net-more {
    margin-top: auto;
    padding-top: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent);
}

/* ── Standing disclaimer ──────────────────────────────────────── */

.dn-disclaimer {
    margin-top: 2.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    font-size: .84rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.dn-disclaimer p {
    margin: 0 0 .5rem;
    font-size: .84rem;
    line-height: 1.65;
    color: var(--text-muted);
}

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

.dn-disclaimer strong {
    color: var(--text-secondary);
}

/* ── Empty state + back link ──────────────────────────────────── */

.dn-empty {
    padding: 2.5rem 1.5rem;
    border: none;
    background: transparent;
}

.dn-empty .empty-icon {
    font-size: 2.25rem;
    line-height: 1;
}

.dn-empty h3 {
    margin: 0 0 .5rem;
}

.dn-empty p {
    color: var(--text-muted);
    margin: 0 auto;
    max-width: 46ch;
}

.dn-back {
    margin-top: 1.5rem;
    font-size: .9rem;
}

.dn-nav-sep {
    color: var(--text-muted);
    opacity: .6;
    padding: 0 .1rem;
    align-self: center;
}

/* ── Mobile ───────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .dn-wrap {
        padding: 1.5rem 1.25rem;
        border-radius: var(--radius-sm);
    }

    .dn-wrap h2 {
        font-size: 1.3rem;
    }

    .dn-lede {
        font-size: 1.03rem;
    }

    .dn-net-grid,
    .dn-net-grid[data-count="2"],
    .dn-net-grid[data-count="4"] {
        grid-template-columns: repeat(1, 1fr);
        gap: .75rem;
    }

    .dn-wrap .data-table {
        font-size: .9rem;
    }

    .dn-wrap .data-table th,
    .dn-wrap .data-table td {
        padding: .6rem .5rem;
    }

    .dn-wrap .data-table td:first-child {
        width: 42%;
    }

}

/* ── Post feed ────────────────────────────────────────────────────
   Cards compose .card; these add only the link layout, as with .dn-net-card. */

.dn-feed {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: .75rem;
    margin: 1.25rem 0 1.5rem;
}

.dn-post-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 0;
    padding: 1.05rem 1.2rem;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}

.dn-post-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.dn-post-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
}

.dn-post-meta {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
}

.dn-wrap p.dn-post-meta {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
}

/* ── Discussion ───────────────────────────────────────────────── */

.dn-comments {
    margin: 1rem 0 1.75rem;
}

.dn-comment {
    padding: .9rem 0;
    border-bottom: 1px solid var(--border);
}

.dn-comment:last-child {
    border-bottom: none;
}

/* Replies are indented once and marked with a rule, rather than nesting
   arbitrarily deep — a flat second level keeps long threads readable. */
.dn-comment-reply {
    margin-left: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
}

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

/* ── Forms ────────────────────────────────────────────────────── */

.dn-comment-form,
.dn-join-form {
    margin: 1rem 0 1.5rem;
}

.dn-comment-form label,
.dn-join-form label {
    display: block;
    margin-bottom: .35rem;
    color: var(--text-primary);
    font-size: .92rem;
}

.dn-comment-form textarea,
.dn-join-form textarea,
.dn-join-form select {
    width: 100%;
    margin-bottom: .75rem;
}

.dn-join-form {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.dn-join-form:last-of-type {
    border-bottom: none;
}

/* Vote-account entry — proof of node control */
.dn-join-form .mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.dn-verified {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 3px solid var(--success, #22c55e);
    background: rgba(34, 197, 94, 0.08);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dn-verified code {
    font-size: 0.8rem;
}

/* Fenced code blocks — operator guides are almost entirely commands, so these must be
   readable, horizontally scrollable, and never reflowed. */
.dn-code {
    background: var(--bg-secondary, #0f172a);
    border: 1px solid var(--border-color, rgba(148,163,184,0.25));
    border-radius: 6px;
    padding: 14px 16px;
    margin: 16px 0;
    overflow-x: auto;
    max-width: 100%;
}

.dn-code code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-primary, #e2e8f0);
    white-space: pre;
    background: none;
    padding: 0;
    border: 0;
}

/* Collapsible reference sections. The shared module only toggles classes —
   each app supplies the display rule, scoped to its own container. */
.dn-collapse {
    border: 1px solid var(--border-color, rgba(148,163,184,0.22));
    border-radius: 8px;
    margin: 18px 0;
    overflow: hidden;
}

.dn-collapse-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    background: var(--bg-secondary, rgba(148,163,184,0.06));
    user-select: none;
}

.dn-collapse-header:hover { background: rgba(148,163,184,0.12); }

.dn-collapse-header .dn-collapse-count {
    color: var(--text-tertiary, #94a3b8);
    font-weight: 400;
    font-size: 0.85rem;
}

.dn-collapse-header .collapsible-chevron {
    margin-left: auto;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.dn-collapse-header.expanded .collapsible-chevron { transform: rotate(180deg); }

.dn-collapse > .collapsed { display: none; }

.dn-collapse > div:not(.collapsed):not(.dn-collapse-header) { padding: 4px 16px 16px; }

/* Network Status headline. The validator count is the number a migrating operator
   is waiting to see change, so it gets size rather than a table row. */
.dn-live-headline {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 18px 0 8px;
}

.dn-live-stat {
    flex: 1 1 130px;
    padding: 14px 16px;
    border: 1px solid var(--border-color, rgba(148,163,184,0.25));
    border-radius: 8px;
    background: var(--bg-secondary, rgba(148,163,184,0.06));
    text-align: center;
}

.dn-live-value {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary, #e2e8f0);
}

.dn-live-good { color: var(--success, #22c55e); }
.dn-live-bad  { color: var(--danger, #ef4444); }

.dn-live-label {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary, #94a3b8);
}

.dn-live-asof {
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--text-tertiary, #94a3b8);
}

/* ── Network Status: the vNode census ────────────────────────────────
   A stacked list, not a table, and the phone is why.

   The census was eight columns — two truncated pubkeys with copy buttons, commission, three
   stake figures, a state badge — inside .dn-wrap's 72ch reading measure, about 560px of
   content on a desktop and roughly 350px on a phone. Eight columns do not fit either. The
   browser does not drop columns, it shrinks them, and once a column is narrower than one
   character the only break point left is between characters: the identity column collapsed
   to a few pixels and rendered `AvLze5…QNy5` one character per line, straight down the page.
   Unreadable, and no first-column width or overflow-x container fixes it — scrolling a 350px
   window across a 920px table is not reading either.

   So the row is transposed. Each vNode lays its fields DOWN the page instead of across it,
   which fits any width without horizontal scrolling, and the pubkeys carry nowrap so they can
   never break mid-token again. */

.dn-nodes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 1.25rem;
}

.dn-node {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary, rgba(148, 163, 184, 0.05));
    overflow: hidden;
}

.dn-node-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
}

/* Abandoned vote accounts have no node to describe, so nothing to disclose. */
.dn-node-head-static {
    cursor: default;
}

.dn-node-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dn-node-chev {
    flex: 0 0 auto;
    line-height: 1.5;
    color: var(--text-tertiary, #94a3b8);
    transition: transform 0.15s ease;
}

.dn-node-head.expanded .dn-node-chev {
    transform: rotate(90deg);
}

/* min-width:0 is load-bearing. A flex item defaults to min-width:auto, which refuses to
   shrink below its content and would push the summary wider than the card on a phone. */
.dn-node-summary {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dn-node-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
}

/* nowrap on both address forms: these are already truncated to 13 characters, so they always
   fit, and forbidding the break is what guarantees the one-character-per-line failure cannot
   come back at any width. */
.dn-node-ident code {
    font-size: 0.85rem;
    white-space: nowrap;
}

.dn-node-meta code {
    font-size: 0.78rem;
    white-space: nowrap;
}

.dn-node-meta,
.dn-node-stake {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.dn-node-stake strong {
    color: var(--text-primary);
    font-weight: 640;
}

.dn-nodes-total {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0 0 1.5rem;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dn-nodes-total strong {
    color: var(--text-primary);
}

/* ── The per-node detail panel ──────────────────────────────────── */

.dn-node-body.collapsed {
    display: none;
}

.dn-node-detail {
    border-top: 1px solid var(--border);
    padding: 12px 14px 2px;
}

.dn-node-group {
    margin-bottom: 12px;
    min-width: 0;
}

.dn-node-group h4 {
    margin: 0 0 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #94a3b8);
}

.dn-node-group dl {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 3px 14px;
    margin: 0;
}

.dn-node-group dt {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.dn-node-group dd {
    margin: 0;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.dn-node-group dd code {
    font-size: 0.76rem;
}

.dn-node-group .badge {
    font-size: 0.65rem;
    vertical-align: baseline;
}

/* On a phone the card itself is ~350px, so the label/value pair stops fitting side by side.
   Stack it rather than let the label column squeeze the value into a sliver — the same
   failure mode, one level down. */
@media (max-width: 720px) {
    .dn-node-group dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .dn-node-group dt {
        margin-top: 7px;
        font-size: 0.72rem;
        color: var(--text-tertiary, #94a3b8);
    }
}

/* ── Operator roster ───────────────────────────────────────────────────────────────────────
   The roster reuses .dn-nodes / .dn-node wholesale: it is the same shape of object (one card
   per validator, disclosure panel underneath) and the transposed layout was adopted there for
   exactly the reason it is needed here — a row carrying two pubkeys, a person, two badges and
   a stake figure has never fitted across the reading measure at any width.

   What follows is only what the roster adds: the person's name at the head of a card, and the
   two action strips. Everything else is inherited. */

.dn-roster-who {
    font-weight: 640;
    color: var(--text-primary);
}

/* The Discord handle sits after the badges as a quiet identifier, because support conversations
   happen there and it is how master's reports name people. */
.dn-roster-handle {
    font-size: 0.78rem;
}

/* Page-level actions. Two independent forms, so flex rather than margins on the buttons —
   a form is a block and they would otherwise stack on a wide screen. */
.dn-roster-actions,
.dn-roster-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1.25rem;
}

.dn-roster-row-actions {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.dn-roster-actions form,
.dn-roster-row-actions form {
    margin: 0;
}

/* Free text the operator typed. It is quoted material rather than a field value, so it reads as
   prose and is allowed to wrap — including on a long unbroken string, which a pasted log line
   frequently is. */
.dn-roster-note {
    font-style: italic;
    overflow-wrap: anywhere;
}

.dn-roster-reqs {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.dn-roster-reqs li {
    margin-bottom: 6px;
}