/* Compass Help Center (custom-help.hbs, partials/help-index.hbs and help-article.hbs). House design: dark glass,
   Playfair headings, noble gold for marks and the current article, accent blue for links. */

.help-entry:empty { display: none; } /* the Ask APRYL slot stays out of the layout until csi-frontend fills it */

/* ── Index: hero (the house page hero) and the article cards ── */
.help-hero__line { max-width: 34rem; margin: 1.25rem auto 0; font-size: 1.125rem; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.help-hero .help-entry { margin-top: 2rem; }

.help-index { max-width: 1180px; margin: 0 auto; padding: 1rem 2rem 5rem; }
.help-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.help-card { margin: 0; }
.help-card__link {
    position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.75rem 1.75rem 3.25rem;
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    color: var(--pure-white); text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.help-card__link:hover, .help-card__link:focus-visible { border-color: rgba(212, 175, 55, 0.55); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.help-card__link:focus-visible { outline: 2px solid var(--noble-gold); outline-offset: 3px; }
.help-card__no { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3em; color: var(--noble-gold); }
.help-card__title { margin: 0.75rem 0 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--pure-white); }
.help-card__summary { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.68); }
.help-card__go { position: absolute; left: 1.75rem; bottom: 1.25rem; font-size: 1.125rem; color: var(--accent-glow); transition: transform 0.25s ease; }
.help-card__link:hover .help-card__go { transform: translateX(4px); }
.help-index__body { margin-top: 3rem; padding: 0; }

/* ── Article: the side-nav and the reading column ── */
.help-layout {
    display: grid; grid-template-columns: 240px minmax(0, var(--content-width)); justify-content: center; gap: 3.5rem;
    max-width: calc(var(--content-width) + 240px + 3.5rem + 4rem); margin: 0 auto; padding: 8rem 2rem 5rem;
}
.help-nav { position: sticky; top: calc(96px + var(--tnh-announcement-offset, 0px)); align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.help-nav__home { display: block; margin-bottom: 1rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--noble-gold); text-decoration: none; }
.help-nav__home:hover { color: var(--noble-gold-bright); }
.help-nav__list { list-style: none; margin: 0; padding: 0 0 0 0; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.help-nav__list li { margin: 0; }
.help-nav__link { display: block; margin-left: -1px; padding: 0.5rem 0.75rem; border-left: 2px solid transparent; font-size: 0.875rem; line-height: 1.4; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
.help-nav__link:hover { color: rgba(255, 255, 255, 0.9); }
.help-nav__link[aria-current="page"] { color: var(--pure-white); font-weight: 600; border-left-color: var(--noble-gold); background: rgba(212, 175, 55, 0.06); }
.help-nav__pick { display: none; }

.help-article { min-width: 0; }
.help-article__head { margin-bottom: 2.5rem; }
.help-article__crumb { text-decoration: none; }
.help-article__title { margin: 0; font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.1; color: var(--pure-white); }
.help-article__lead { margin: 1.25rem 0 0; font-size: 1.1875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.help-article__body { max-width: none; margin: 0; padding: 0; }
.help-article__body > :first-child { margin-top: 0; }

/* Tables (2–4 columns, from pipe tables): full width, hairline rows, gold column heads. Words never break inside
   ("Observ/er"): cells wrap between words, and the first column keeps room for a short name. */
.help-article__body table { width: 100%; margin: 2rem 0 2.25rem; border-collapse: collapse; font-size: 0.975rem; line-height: 1.55; }
.help-article__body th, .help-article__body td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.09); overflow-wrap: break-word; word-break: normal; hyphens: none; }
.help-article__body thead th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--noble-gold); border-bottom: 1px solid rgba(212, 175, 55, 0.45); }
.help-article__body tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.help-article__body td { color: rgba(255, 255, 255, 0.86); }
.help-article__body td:first-child { color: var(--pure-white); font-weight: 600; }
.help-article__body th:first-child, .help-article__body td:first-child { min-width: 8.5rem; }

/* "Still need help?" */
.help-more { margin-top: 4rem; padding: 2.25rem 2rem; text-align: center; border: 1px solid rgba(212, 175, 55, 0.28); border-radius: var(--radius-sm); background: radial-gradient(circle at top, rgba(0, 113, 227, 0.1), rgba(255, 255, 255, 0.02) 70%); }
.help-more__title { margin: 0; font-size: 1.75rem; color: var(--pure-white); }
.help-more .help-entry { margin-top: 1.25rem; }
.help-more__alt { margin: 1rem 0 0; font-size: 0.9375rem; }
.help-more__alt a { color: var(--accent-glow); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 163, 255, 0.4); }
.help-more__alt a:hover { color: var(--pure-white); }

/* Tablets and phones: the side-nav becomes a select above the article. */
@media (max-width: 1024px) {
    .help-layout { display: block; max-width: calc(var(--content-width) + 4rem); padding-top: 7rem; }
    .help-nav { position: static; max-height: none; overflow: visible; margin-bottom: 2rem; }
    .help-nav__list, .help-nav__home { display: none; } /* the article's own eyebrow links back to /help/ */
    .help-nav__pick { display: block; }
    .help-nav__pick-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .help-nav__pick select {
        width: 100%; padding: 0.85rem 2.75rem 0.85rem 1rem; appearance: none; -webkit-appearance: none;
        border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 12px; font: inherit; font-size: 1rem; color: var(--pure-white);
        background: rgba(10, 10, 16, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D4AF37' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1rem center;
    }
    .help-nav__pick select:focus-visible { outline: 2px solid var(--noble-gold); outline-offset: 2px; }
    .help-nav__pick option { color: #fff; background: #0a0a10; }
}
@media (max-width: 600px) {
    .help-index { padding: 0.5rem 1rem 4rem; }
    .help-grid { grid-template-columns: 1fr; gap: 1rem; }
    .help-layout { padding: 6.5rem 1rem 4rem; }
    .help-more { padding: 1.75rem 1.25rem; }
    .help-article__body table { font-size: 0.875rem; }
    .help-article__body th, .help-article__body td { padding: 0.6rem 0.45rem; } /* a 4-column table fits 390 px */
    .help-article__body th:first-child, .help-article__body td:first-child { min-width: 5rem; }
}