.filing-header {
    background: var(--surface);
    padding: 32px 22px;
    border-bottom: 1px solid var(--border-color);
}

.filing-header-content {
    max-width: 900px;
    margin: 0 auto;
}

.filing-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.03em;
}

/* One-sentence summary under the h1 (CCT-477): the answer to "who is this
   business?" before any field-by-field detail. */
.filing-summary {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 65ch;
}

.filing-number {
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 4px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active {
    background: var(--green-110);
    color: var(--green-900);
}

.status-badge.inactive {
    background: var(--red-120);
    color: var(--red-910);
}

/* width: 100% because .page-content is a column flexbox and the auto
   margins turn off stretch: without it the body shrink-wraps its content,
   and a sparse filing (no officers table) squeezed the key facts grid into
   one ~270px column even on a desktop. */
.filing-body {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 22px;
}

.section {
    background: var(--surface);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

/* Section headings are <h2>s for the page outline, sized as quiet section
   labels rather than at a default heading size. */
.section-header {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

/* Key facts panel (CCT-477). Mobile-first: two columns at phone width
   (short values like "Active" or a date fit), widening with the viewport.
   The 16px gap is also assumed by .code-explanation-body's width cap. */
.key-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Layout comes from .info-item; this only lets long values wrap in a
   narrow grid cell. position: relative makes each cell the anchor for its
   own code-explanation panel, so the panel opens directly below the cell. */
.key-fact {
    position: relative;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The document-number chip hugs its text instead of filling the cell. */
.key-fact .filing-number {
    align-self: flex-start;
}

/* In-page links in the key facts (the industry filter link), styled like the
   app's other inline links (auth, saved searches): brand colour, underline
   on hover/focus. */
/* a.party-search-link: officer name links (CCT-481). */
.key-fact a,
a.party-search-link {
    color: var(--primary-color);
    text-decoration: none;
}

.key-fact a {
    font-weight: 500;
}

.key-fact a:hover,
.key-fact a:focus-visible,
a.party-search-link:hover,
a.party-search-link:focus-visible {
    text-decoration: underline;
}

.key-fact-secondary {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
}

.key-facts-note {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Location (CCT-477): principal address, then the mailing address only when
   it differs. The CCT-473 map sits below them (.detail-map). */
.location-addresses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* Location map (CCT-473). The canvas height is fixed here, before Leaflet
   runs, so the map filling in does not shift the page (CLS) — this page is
   the SEO entry point. Without JS the canvas never shows (a noscript style in
   detail.html hides it). The one case that does shift is a failure: if the
   Leaflet CDN script did not load, detail-map.js hides the canvas rather than
   leave an empty grey box, and the content below moves up. z-index/isolation
   keep Leaflet's panes (z-index up to 1000) from painting over the sticky
   header or the code-explanation panels. */
.detail-map {
    margin-top: 16px;
}

.detail-map-canvas {
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-sunken);
    isolation: isolate;
    z-index: 0;
}

.detail-map-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.detail-map-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.detail-map-link:hover,
.detail-map-link:focus-visible {
    text-decoration: underline;
}

@media (min-width: 641px) {
    .detail-map-canvas {
        height: 260px;
    }

    .key-facts {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .location-addresses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.agent-address {
    margin-top: 16px;
}

.agent-address .address-block {
    margin-top: 4px;
}

/* Registered agent / officers withheld after a privacy takedown. */
.redaction-notice {
    color: var(--gray-550);
    font-style: italic;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.info-value {
    font-size: 15px;
    color: var(--text-primary);
}

.info-value.empty {
    color: var(--text-secondary);
    font-style: italic;
}

.address-block {
    line-height: 1.6;
}

.officers-table {
    width: 100%;
    border-collapse: collapse;
}

.officers-table th,
.officers-table td {
    text-align: left;
    padding: 12px 8px;
    font-size: 14px;
}

.officers-table th {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.officers-table td {
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}

.officers-table tr:last-child td {
    border-bottom: none;
}

.officer-name {
    font-weight: 500;
    color: var(--text-primary);
}

.officer-entity {
    color: var(--text-secondary);
    font-size: 13px;
}

.officer-address {
    color: var(--text-secondary);
    font-size: 13px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--gray-100);
    color: var(--text-primary);
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-family: inherit; /* a <button> does not inherit it by default */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

/* The detail page renders a hidden history-back button beside the forward
   link and unhides one of them by script (CCT-472); display: inline-flex
   above would otherwise beat the UA's [hidden] rule and show both. */
.back-link[hidden] {
    display: none;
}

.back-link:hover {
    background: var(--gray-200);
}

.back-link svg {
    width: 16px;
    height: 16px;
}

.actions-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

/* No-JS <details> disclosure explaining a filing type or status code
   (filings/_code_explanation.html), placed in the key fact's <dt> right
   after the label text ("STATUS ?").

   Inline-block alone does not keep the toggle beside the label: a line
   break is allowed just before an inline-block, so in a narrow cell (the
   ~100px column of a 320px phone) the "?" dropped to a line of its own
   under "FILING TYPE". The template therefore wraps the label's last word
   and the disclosure in .key-fact-label-tail, which is nowrap: the two
   always share a line, and a multi-word label wraps between its words
   instead ("FILING" / "TYPE ?"). The panel resets white-space itself. */
.key-fact-label-tail {
    white-space: nowrap;
}

.code-explanation {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* text-transform / letter-spacing: the toggle lives in the <dt>, whose
   .info-label styles are inherited. Left alone, the toggle's screen-reader
   name is uppercased too, and some screen readers then read or spell out
   "WHAT DOES INACTIVE MEAN?". The visible "?" has no case, so resetting
   both costs nothing visually. */
.code-explanation-toggle {
    text-transform: none;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
}

.code-explanation-toggle::-webkit-details-marker {
    display: none;
}

.code-explanation[open] .code-explanation-toggle,
.code-explanation-toggle:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.code-explanation-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* The panel floats so opening it doesn't reflow the grid. Its positioning
   context is its own .key-fact cell (position: relative there): top: 100%
   opens it just below the cell, so it never covers the label or value it
   explains. Two earlier anchors failed in review: the toggle (ran past the
   viewport at 375px) and the whole grid (a Filing type panel opened under
   the Status column, far from its toggle).

   Width: 200% + 16px of the cell is two columns plus the grid gap, i.e.
   the whole grid when it has two columns (every phone), so the panel is
   never wider than the grid there. With three or more columns a cell is at
   least 180px, 200% + 16px is at least 376px, and the 320px cap wins. (A
   size container would give the grid width directly, but inline-size
   containment collapsed .filing-body, a shrink-to-fit flex item.) The
   inherited .info-label text styles are reset, since the panel lives
   inside the <dt>. */
.code-explanation-body {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    width: min(320px, calc(200% + 16px));
    padding: 12px 14px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    white-space: normal;
    overflow-wrap: normal;
    background: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    line-height: 1.5;
}

/* Even cells open their panel leftward from the cell's right edge. In a
   two-column grid (every phone, and narrow desktops) the even cell is the
   right column, where a left-anchored panel would run off the page. With
   three or more columns an even cell's right edge sits at least 2 x 180px
   + 16px = 376px in, past the widest panel, so right-anchoring still fits.
   Only Status and Filing type (always the first two cells) carry panels. */
.key-fact:nth-child(even) .code-explanation-body {
    left: auto;
    right: 0;
}

.code-explanation-note {
    margin-top: 8px;
    color: var(--text-secondary);
}

/* "All filing types explained" — the filing-type panel's link to the
   /filing-types/ glossary (CCT-483). */
.code-explanation-link {
    margin-top: 8px;
}

/* Filing history (CCT-479): a date column beside each entry; on mobile the
   date stacks above the entry instead. */
.history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.history-entry {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 14px;
}

.history-entry:last-child {
    border-bottom: none;
}

.history-date {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.history-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.history-title {
    font-weight: 500;
    color: var(--text-primary);
}

.history-line {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.history-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

/* The pager hides entries and its own buttons with the hidden attribute;
   these rules' display values would otherwise override it. */
.history-entry[hidden],
.history-pager[hidden],
.history-pager-button[hidden] {
    display: none;
}

.history-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    /* No border of its own: on a non-final page the last visible entry's
       bottom border already separates the list from the pager. */
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.history-pager-size select {
    margin-left: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
}

.history-pager-status {
    font-variant-numeric: tabular-nums;
}

.history-pager-nav {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
}

.history-pager-button {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}

.history-pager-button:disabled {
    color: var(--text-secondary);
    cursor: default;
    opacity: 0.6;
}

.history-note {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Removal request (CCT-478): the page's closing line, outside the section
   cards, in the same quiet type as the other notes. */
.takedown-note {
    margin: 8px 0 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Related businesses (CCT-474): a collapsed <details> beside its party (the
   principal address, the registered agent, an officer row) that opens onto a
   short list of other filings, each a link with a wrapping line of status /
   type / date / city. */
.related {
    margin-top: 8px;
    font-size: 14px;
}

.related-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 500;
    list-style: none;
}

.related-summary::-webkit-details-marker {
    display: none;
}

/* A chevron that turns when the reveal opens. */
.related-summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.related[open] > .related-summary::before {
    transform: rotate(45deg);
}

.related-summary:hover {
    text-decoration: underline;
}

.related-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--gray-100);
}

.related-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
}

.related-entry:last-child {
    border-bottom: none;
}

.related-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.related-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    color: var(--text-secondary);
    font-size: 12px;
}

.related-crowded,
.related-more {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.related-more {
    padding-left: 14px;
}

/* An officer's reveal sits in a full-width row under that officer: the pair
   reads as one entry, so the separator moves below the reveal. */
.officers-table tr.has-related td {
    border-bottom: none;
}

/* Desktop only: the mobile layout pads each stacked cell itself. */
@media (min-width: 641px) {
    .officers-table tr.has-related td {
        padding-bottom: 0;
    }
}

.officers-table .officer-related-row td {
    padding-top: 0;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .filing-title {
        font-size: 22px;
    }

    .history-entry {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .officers-table {
        display: block;
    }

    .officers-table thead {
        display: none;
    }

    .officers-table tbody,
    .officers-table tr,
    .officers-table td {
        display: block;
    }

    .officers-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--gray-100);
    }

    .officers-table tr:last-child,
    .officers-table tr.has-related {
        border-bottom: none;
    }

    .officers-table .officer-related-row {
        padding-top: 0;
    }

    .officers-table .officer-related-row td:before {
        content: none;
    }

    .officers-table td {
        padding: 4px 0;
        border-bottom: none;
    }

    .officers-table td:before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 500;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
        margin-bottom: 2px;
    }
}

/* Next step (CCT-475): the closing section's two short lists of other
   filings, side by side from tablet width up, then a row of onward links. */
.next-step-lists {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

@media (min-width: 641px) {
    /* One column per list present: one list spans, two sit side by side. */
    .next-step-lists {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-template-columns: none;
    }
}

.next-step-list-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.next-step-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.next-step-list li {
    padding: 6px 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.next-step-list li + li {
    border-top: 1px solid var(--border-color);
}

.next-step a,
.next-step-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.next-step a:hover,
.next-step a:focus-visible,
.next-step-links a:hover,
.next-step-links a:focus-visible {
    text-decoration: underline;
}

.next-step-meta {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.next-step-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 16px;
    font-size: 14px;
}

/* Breadcrumb trail inside the header (CCT-475). Overrides base.css's
   standalone .breadcrumbs box (its own 960px column and gutter) so the trail
   lines up with the title. One line on wider screens: the links never
   shrink, and only the current page's name — often a long ALL-CAPS legal
   name already shown in full by the h1 — is truncated with an ellipsis. */
.filing-breadcrumbs {
    max-width: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    row-gap: 2px;
    font-size: 13px;
    line-height: 1.4;
}

.filing-breadcrumbs a {
    white-space: nowrap;
}

.filing-breadcrumbs a:hover,
.filing-breadcrumbs a:focus-visible {
    color: var(--primary-color);
    text-decoration: underline;
}

.filing-breadcrumbs .sep {
    margin: 0 8px;
    color: var(--gray-550);
}

.filing-breadcrumbs .current {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 641px) {
    .filing-breadcrumbs {
        flex-wrap: nowrap;
    }

    .filing-breadcrumbs .current {
        flex: 1 1 auto;
    }
}


/* Email-alert prompt (CCT-536): one sentence and one action, after the
   next-step lists. The button reuses the site's primary-CTA look
   (developers-cta-btn) since there is no global button class. */
.alert-prompt-text {
    margin: 0 0 12px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.alert-prompt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.alert-prompt .btn-primary {
    display: inline-block;
    padding: 10px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-color);
    color: var(--text-on-accent);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.alert-prompt .btn-primary:hover,
.alert-prompt .btn-primary:focus-visible {
    background: var(--primary-hover);
}

.alert-prompt-signin {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

.alert-prompt-signin:hover,
.alert-prompt-signin:focus-visible {
    text-decoration: underline;
}