/* ══════════════════════════════════════════════════════════════════════════════════════════
   Knowledge — the pieces that appear on other pages: the bottom sheet, wizard help links,
   plan-day words, and the "Questions people ask" block on plan and area pages.

   Loaded by the layout on every page while Knowledge is on. The section's own pages add
   knowledge.css on top. Colours are the site's tokens (site.css), so both themes follow.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Wizard help link ───────────────────────────────────────────────────────────────────── */

/* A step with help packs its rows to the top, so the link sits right under the controls instead of
   being spread to the middle of the step's minimum height. Only these steps — every other step
   keeps the grid exactly as it was. */
.wc-grid.kn-has-help {
    align-content: start;
}

.kn-help {
    margin-top: -2px;
}

.kn-help-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;              /* a full touch target, though it reads as a line of text */
    padding: 6px 12px 6px 10px;
    border-radius: 10px;
    border: 1px dashed var(--dark-5);
    color: var(--green-ink);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    text-decoration: none;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kn-help-link:hover,
.kn-help-link:focus-visible {
    background: var(--green-glow);
    border-color: var(--green);
    color: var(--green-ink);
}

.kn-help-link:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* The icon is a panel rising from the bottom: it opens here, it does not take you anywhere. */
.kn-help-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* ── Plan-day words ─────────────────────────────────────────────────────────────────────── */

.kn-term {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: var(--green);
    cursor: help;
}

.kn-term:hover {
    color: var(--green-ink);
}

.kn-term:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── The sheet ──────────────────────────────────────────────────────────────────────────── */

/* The page behind a modal sheet does not scroll. */
html.kn-sheet-open,
html.kn-sheet-open body {
    overflow: hidden;
}

.kn-sheet {
    /* A bottom sheet on a phone; a centred panel from tablet up. The dialog itself is only a frame
       the panel fills, so a click whose target is the dialog landed on the backdrop. */
    position: fixed;
    inset: auto 0 0 0;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    overflow: visible;
}

.kn-sheet::backdrop {
    background: rgba(5, 10, 18, 0.55);
}

.kn-sheet[open] .kn-sheet-panel {
    animation: kn-sheet-in 0.22s ease-out;
}

@keyframes kn-sheet-in {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.kn-sheet-panel {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    background: var(--dark-3);
    border: 1px solid var(--dark-5);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.kn-sheet-bar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 52px 4px;
    min-height: 40px;
    touch-action: none;            /* the handle is for swiping, not scrolling */
}

.kn-sheet-grab {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--dark-5);
}

.kn-sheet-close {
    position: absolute;
    right: 8px;
    top: 4px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
}

.kn-sheet-close:hover { background: var(--dark-4); color: var(--text-primary); }
.kn-sheet-close:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

.kn-sheet-body {
    overflow-y: auto;
    padding: 4px 22px 28px;
    overscroll-behavior: contain;
}

.kn-sheet-loading {
    color: var(--text-muted);
    padding: 16px 0 8px;
    margin: 0;
}

@media (min-width: 700px) {
    .kn-sheet {
        inset: 0;
        margin: auto;
        height: fit-content;
        max-height: 80vh;
    }

    .kn-sheet-panel {
        max-height: 80vh;
        border-bottom: 1px solid var(--dark-5);
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    }

    .kn-sheet-grab { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .kn-sheet[open] .kn-sheet-panel { animation: none; }
    .kn-sheet-panel { transition: none; }
}

/* Sheet content (also reused by the entry page where it shares a class). */
.kn-sheet-type {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green-ink);
}

.kn-sheet-title {
    font-size: calc(21px * var(--rp-font-scale));
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.kn-sheet-title:focus { outline: none; }

.kn-sheet-answer {
    font-size: calc(17px * var(--rp-font-scale));
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.kn-points {
    margin: 0 0 16px;
    padding-left: 1.2em;
    font-size: calc(16px * var(--rp-font-scale));
    line-height: 1.5;
    color: var(--text-secondary);
}

.kn-points li { margin-bottom: 6px; }
.kn-points li::marker { color: var(--green); }

.kn-sheet-full {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-weight: 600;
    color: var(--green-ink);
    text-decoration: none;
}

.kn-sheet-full:hover { text-decoration: underline; }

/* Safety note — compact in the sheet, full on the entry page (knowledge.css). */
.kn-safety {
    border-left: 3px solid var(--yellow);
    background: var(--yellow-glow);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 16px;
    color: var(--text-primary);
}

.kn-safety p:last-child,
.kn-safety ul:last-child { margin-bottom: 0; }

.kn-safety-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.kn-safety--compact {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ── Helpful vote ───────────────────────────────────────────────────────────────────────── */

.kn-vote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dark-5);
    color: var(--text-secondary);
}

.kn-vote-q { font-weight: 600; }

.kn-vote-buttons { display: inline-flex; gap: 8px; }

.kn-vote-btn {
    min-width: 64px;
    min-height: 40px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--dark-5);
    background: var(--dark-3);
    color: var(--text-primary);
    font-weight: 600;
}

.kn-vote-btn:hover:not(:disabled) { border-color: var(--green); }
.kn-vote-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.kn-vote-btn:disabled { opacity: 0.55; }
.kn-vote-btn[aria-pressed="true"] { opacity: 1; border-color: var(--green); background: var(--green-glow); }

.kn-vote-thanks {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
}

/* ── A question that opens in place ───────────────────────────────────────────────────────
   The unit every Knowledge list is built from (_QuestionDisclosure): a native <details> whose
   summary is the question and whose body is the short answer and a link to the full one. Here
   rather than in knowledge.css because the home page and the catalogue pages use it too. */

.kn-qd-list {
    display: grid;
    gap: 10px;
}

/* Two or three columns where there is room — the catalogue's plan pages. Rows size to their own
   content, so opening one question does not stretch the one beside it. */
.kn-qd-list--cols {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
}

@media (min-width: 992px) {
    .kn-qd-list--home {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.kn-qd {
    border: 1px solid var(--dark-5);
    border-radius: 12px;
    background: var(--dark-3);
    transition: border-color 0.15s ease;
}

.kn-qd[open] {
    border-color: rgba(34, 197, 94, 0.45);
}

.kn-qd-q {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
}

.kn-qd-q::-webkit-details-marker { display: none; }
.kn-qd-q::marker { content: ""; }

.kn-qd-q:hover .kn-qd-title { color: var(--green-ink); }

.kn-qd-q:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 12px;
}

.kn-qd-chev {
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

details[open] > summary .kn-qd-chev { transform: rotate(180deg); }

.kn-qd-a {
    padding: 0 16px 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.kn-qd-a p { margin: 0 0 8px; }

.kn-qd-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-weight: 600;
    color: var(--green-ink);
    text-decoration: none;
}

.kn-qd-more:hover { text-decoration: underline; color: var(--green-ink); }

@media (prefers-reduced-motion: reduce) {
    .kn-qd-chev { transition: none; }
}

/* ── "Questions people ask" on plan and area pages ──────────────────────────────────────── */

.kn-plan-questions .kn-pq-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.kn-pq-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

/* ── Links into Knowledge from the home page ────────────────────────────────────────────── */

.kn-pq-more,
.kn-faq-more a,
.kn-how-more a {
    font-weight: 600;
    color: var(--green-ink);
    text-decoration: none;
}

.kn-pq-more:hover,
.kn-faq-more a:hover,
.kn-how-more a:hover { text-decoration: underline; }

.kn-faq-more {
    margin: 18px 0 0;
    color: var(--text-secondary);
}

.kn-how-more {
    margin: 22px 0 0;
    text-align: center;
}