/* =============================================================================
 * NeuraCoreSupport — the support portal's own layer.
 * -----------------------------------------------------------------------------
 * Loaded AFTER the shared theme (`neuracore.css`), which it refines and never
 * replaces. Nothing here defines a colour of its own: every value is a token
 * from the theme, so a change to the palette reaches this portal without being
 * edited here.
 *
 * What belongs in this file is layout that is genuinely this portal's alone —
 * the header, the ticket panels, the message thread, and the one component the
 * other two sites do not have: a modal that opens with no JavaScript.
 *
 * MANDATORY RULE, INHERITED FROM AGENTS.md
 *   Text on the cyan accent, or on any light accent fill, is ALWAYS dark. Every
 *   badge and every filled button in this portal comes from the shared theme,
 *   which sets `color: var(--nc-on-accent)` on each of them itself. Nothing
 *   here overrides a foreground on a filled surface, and nothing here should.
 * ========================================================================== */

/* --- Page frame ---------------------------------------------------------- */
.portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.portal__main {
    flex: 1 0 auto;
    padding-block: var(--nc-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--nc-space-6);
}

/* The closed notice, the failure page and a refused handover are one panel with
   nothing else on the page, and they read better centred than pinned to the
   top of a tall empty column. */
.portal__main--centred {
    justify-content: center;
    align-items: center;
}
.portal__main--centred > * { width: min(100%, 46rem); }

/* --- Header -------------------------------------------------------------- */
.portal__header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(18, 18, 20, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--nc-line-soft);
}

.portal__header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nc-space-4);
    padding-block: var(--nc-space-3);
    flex-wrap: wrap;
}

/* "Support" under the wordmark, so the portal is distinguishable from the
   landing site at a glance without a second brand. */
.portal__brand-sub {
    display: block;
    font-size: var(--nc-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nc-text-faint);
    line-height: 1;
}

.portal__nav {
    display: flex;
    align-items: center;
    gap: var(--nc-space-4);
    flex-wrap: wrap;
}

.portal__nav-link {
    color: var(--nc-text-dim);
    font-size: var(--nc-size-sm);
    font-weight: 600;
}
.portal__nav-link:hover { color: var(--nc-cyan); text-decoration: none; }
.portal__nav-link--active { color: var(--nc-cyan); }

.portal__leave { display: inline; }

/* The language switcher: seven links, no control, no script. It wraps on a
   narrow screen rather than scrolling, because seven two-letter links are
   shorter wrapped than they are as a scroll region. */
.portal__lang {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-radius-pill);
    padding: 2px;
}

.portal__lang-option {
    padding: 0.15rem 0.5rem;
    border-radius: var(--nc-radius-pill);
    font-size: var(--nc-size-xs);
    font-weight: 700;
    color: var(--nc-text-faint);
    line-height: 1.6;
}
.portal__lang-option:hover { color: var(--nc-cyan); text-decoration: none; }

/* A filled option, so its text is dark. AGENTS.md. */
.portal__lang-option--active,
.portal__lang-option--active:hover {
    background: var(--nc-cyan);
    color: var(--nc-on-accent);
}

/* --- Identity ------------------------------------------------------------ */
.portal__identity {
    display: flex;
    align-items: center;
    gap: var(--nc-space-2);
    font-size: var(--nc-size-sm);
}
.portal__identity-name { font-weight: 600; }
.portal__identity-key { font-size: var(--nc-size-xs); }

/* --- Front page ---------------------------------------------------------- */
.portal__hero { padding-block: var(--nc-space-8) var(--nc-space-4); }

.portal__headline {
    font-size: clamp(1.75rem, 4vw, var(--nc-size-2xl));
    line-height: 1.15;
    margin-bottom: var(--nc-space-3);
}

.portal__section-title {
    font-size: var(--nc-size-lg);
    margin-bottom: var(--nc-space-3);
}

/* Prose is bounded so a line never runs the whole width of a wide screen. */
.portal__measure { max-width: var(--nc-measure); }

.portal__steps {
    margin: 0 0 var(--nc-space-6);
    padding-left: 1.25rem;
    max-width: var(--nc-measure);
}
.portal__steps li { margin-bottom: var(--nc-space-2); }

.portal__levels {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: var(--nc-measure);
}
.portal__levels li {
    display: flex;
    gap: var(--nc-space-3);
    align-items: baseline;
    margin-bottom: var(--nc-space-3);
    color: var(--nc-text-dim);
}
.portal__levels .nc-badge { flex: 0 0 auto; }

.portal__link { color: var(--nc-cyan); font-weight: 600; }

/* --- Gate panels --------------------------------------------------------- */
.gate__panel { padding: var(--nc-space-8); }
.gate__headline { font-size: var(--nc-size-xl); margin-block: var(--nc-space-3); }

.portal__gate-note { border-left: 3px solid var(--nc-orange); }

.portal__actionbar {
    display: flex;
    justify-content: flex-end;
    gap: var(--nc-space-3);
}

/* --- Listing ------------------------------------------------------------- */
.portal__summary { margin-bottom: var(--nc-space-3); }
.portal__marker { font-size: var(--nc-size-xs); margin-left: var(--nc-space-2); }

/* --- Form ---------------------------------------------------------------- */
.portal__form { max-width: 56rem; }

.portal__group {
    border: 1px solid var(--nc-line-soft);
    border-radius: var(--nc-radius);
    padding: var(--nc-space-4);
    margin-block: var(--nc-space-6);
}

.portal__group-title {
    font-size: var(--nc-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nc-text-dim);
    padding-inline: var(--nc-space-2);
}

/* Two columns where there is room, one where there is not. `auto-fit` rather
   than a fixed count, so the machine fields reflow instead of overflowing. */
.portal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0 var(--nc-space-4);
}

.portal__required { color: var(--nc-orange); }

.portal__kinds {
    border: 0;
    padding: 0;
    margin: 0 0 var(--nc-space-6);
    display: grid;
    gap: var(--nc-space-2);
}

.portal__kind {
    display: flex;
    align-items: flex-start;
    gap: var(--nc-space-3);
    padding: var(--nc-space-3);
    border: 1px solid var(--nc-line-soft);
    border-radius: var(--nc-radius);
    cursor: pointer;
    transition: border-color var(--nc-transition);
}
.portal__kind:hover { border-color: var(--nc-cyan); }
.portal__kind input { accent-color: var(--nc-cyan); margin-top: 0.35rem; }
.portal__kind-body { display: flex; flex-direction: column; gap: 0.15rem; }
.portal__kind-label { font-weight: 600; }

/* `:has` puts the ring on the chosen option without script. A browser that does
   not support it simply shows no ring, and the radio itself is still marked —
   so nothing is unusable, only slightly less obvious. */
.portal__kind:has(input:checked) {
    border-color: var(--nc-cyan);
    background: rgba(34, 195, 195, 0.06);
}

.portal__terms-gate {
    border-top: 1px solid var(--nc-line-soft);
    padding-top: var(--nc-space-4);
    margin-top: var(--nc-space-6);
}

.portal__actions {
    display: flex;
    gap: var(--nc-space-3);
    flex-wrap: wrap;
    margin-top: var(--nc-space-6);
}

/* --- Ticket -------------------------------------------------------------- */
.portal__ticket-head { display: grid; gap: var(--nc-space-3); }
.portal__ticket-flags { display: flex; gap: var(--nc-space-2); flex-wrap: wrap; }

.portal__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--nc-space-3);
    margin: 0;
}
.portal__detail { margin: 0; }
.portal__detail-label {
    font-size: var(--nc-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nc-text-faint);
}
.portal__detail-value { margin: 0; }

/* --- Screenshots ---------------------------------------------------------
   The preview IS the original image, bounded here rather than resized on the
   server: generating a second file would mean pointing an image decoder at
   bytes a member of the public uploaded. `object-fit: contain` keeps a wide
   screenshot and a tall one the same size on the row without either being
   cropped, which matters because the crop would hide the corner somebody
   photographed the problem in. */
.portal__shots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--nc-space-4);
}

.portal__shot {
    display: flex;
    flex-direction: column;
    gap: var(--nc-space-1);
    max-width: 12rem;
}

.portal__shot-link {
    display: flex;
    flex-direction: column;
    gap: var(--nc-space-1);
    color: var(--nc-cyan);
    font-weight: 600;
}

.portal__shot-image {
    width: 12rem;
    height: 8rem;
    object-fit: contain;
    background: var(--nc-bg);
    border: 1px solid var(--nc-line-soft);
    border-radius: var(--nc-radius);
}

.portal__shot-name {
    font-size: var(--nc-size-xs);
    overflow-wrap: anywhere;
}

.portal__shot-size { font-size: var(--nc-size-xs); }

/* Screenshots a half-written ticket is still holding, on the new-ticket form. */
.portal__held { list-style: none; margin: 0 0 var(--nc-space-3); padding: 0; }

.portal__held-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--nc-space-2);
    margin-bottom: var(--nc-space-2);
}

.portal__held-name { overflow-wrap: anywhere; }

/* The companion form the remove buttons belong to. It carries only a token. */
.portal__subform { display: contents; }

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

.portal__message {
    border-left: 3px solid var(--nc-line);
    padding: var(--nc-space-2) var(--nc-space-4);
    margin-bottom: var(--nc-space-4);
}
/* A support answer is the thing somebody opened the page to find, so it is the
   one that carries the accent. */
.portal__message--support { border-left-color: var(--nc-cyan); }
.portal__message-meta { font-size: var(--nc-size-xs); margin-bottom: var(--nc-space-1); }

.portal__history { list-style: none; margin: 0; padding: 0; }
.portal__history li {
    display: flex;
    align-items: baseline;
    gap: var(--nc-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--nc-space-2);
    font-size: var(--nc-size-sm);
}

/* The close control, hidden behind a native disclosure. */
.portal__danger summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--nc-red);
}
.portal__danger[open] summary { margin-bottom: var(--nc-space-3); }

/* --- The terms overlay, with no JavaScript ------------------------------- *
 * A section that is invisible until a link makes it the `:target`. This is the
 * whole mechanism: `href="#terms"` opens it, `href="#"` closes it, and the
 * Content-Security-Policy can go on forbidding script outright.
 *
 * A native <dialog> would need showModal(), which is script. A <details>
 * disclosure needs none but expands in place and pushes the submit button off
 * the screen while the terms are read, which is how a terms notice becomes one
 * people close without reading.
 * ------------------------------------------------------------------------- */
.portal__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.72);
    padding: var(--nc-space-4);
    overflow-y: auto;
}

.portal__overlay:target { display: flex; align-items: flex-start; justify-content: center; }

.portal__overlay-card {
    background: var(--nc-panel);
    border: 1px solid var(--nc-line);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow);
    padding: var(--nc-space-8);
    max-width: 46rem;
    width: 100%;
    margin-block: var(--nc-space-8);
}

.portal__overlay-title { font-size: var(--nc-size-xl); margin-bottom: var(--nc-space-4); }
.portal__overlay-body { color: var(--nc-text-dim); max-width: var(--nc-measure); }
.portal__overlay-body p { margin-bottom: var(--nc-space-4); }
.portal__overlay-close { margin-top: var(--nc-space-4); }

/* --- Footer -------------------------------------------------------------- */
/* One centred line. It held two explanatory sentences and no longer does: the
   front page makes the same point at the length it deserves, and repeating it
   under every ticket somebody is reading is noise rather than reassurance.
 *
 * The centring is set on BOTH the footer and the paragraph. Once would be
 * enough by inheritance, and stating it on the element that actually holds the
 * text is what makes it survive somebody later giving `.portal__footer` a
 * flex or grid display — at which point `text-align` on the parent stops
 * describing where the line sits and starts describing nothing. */
.portal__footer {
    border-top: 1px solid var(--nc-line-soft);
    padding-block: var(--nc-space-6);
    font-size: var(--nc-size-sm);
    text-align: center;
}
.portal__footer p {
    margin: 0;
    text-align: center;
}

/* --- Narrow screens ------------------------------------------------------ */
@media (max-width: 720px) {
    .portal__header-inner { align-items: flex-start; }
    .portal__nav { width: 100%; justify-content: space-between; }
    .portal__overlay-card { padding: var(--nc-space-4); }
}