/* ==========================================================================
   curva.io: the page around the embedded app
   --------------------------------------------------------------------------
   Loaded after the app's own stylesheet (styles.css, copied in at build
   time), so the header, hero, footer, colours and type are the app's. This
   file adds the frame that holds the app, the chart guide and the FAQ, using
   the same tokens, so tests/test_accessibility.py covers their contrast too.
   ========================================================================== */

/* -- The app ------------------------------------------------------------ */

/* The app arrives in an iframe that grows to fit it (site.js) and paints no
   background of its own: the page's gradient shows through, so the frame has
   no visible edge and the page scrolls as one. */
.app-frame {
    position: relative;
    min-height: calc(100vh - var(--header-height));
}

.app-frame.is-ready {
    min-height: 0;
}

.app-frame iframe {
    display: block;
    width: 100%;
    /* Until the app reports its height. */
    height: calc(100vh - var(--header-height));
    border: 0;
    background: transparent;
    color-scheme: light;
}

.app-status {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
    font-weight: 500;
    text-align: center;
}

.app-fallback {
    top: 146px;
    border-radius: var(--border-radius);
}

.app-noscript {
    position: static;
    transform: none;
    margin: 48px auto;
    border-radius: var(--border-radius);
}

.app-frame.is-ready .app-status {
    display: none;
}

/* Measures the visitor's screen height (the large viewport, which does not
   change as mobile toolbars come and go) for the app's charts. */
.viewport-probe {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    visibility: hidden;
    pointer-events: none;
}

/* -- Chart guide -------------------------------------------------------- */

.guide-section {
    padding: 76px 0;
    background: var(--surface-soft);
}

.guide-families ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
}

.guide-families .chip {
    display: inline-block;
    text-decoration: none;
}

.guide-families .chip:hover,
.guide-families .chip:focus-visible {
    border-color: var(--secondary-color);
    color: var(--text-strong);
}

.guide-family {
    margin-top: 52px;
}

.guide-family-title {
    font-size: 1.4rem;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}

.guide-family-intro {
    max-width: 72ch;
    margin: 6px 0 20px;
    color: var(--text-muted);
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 16px;
}

.guide-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.guide-card:target {
    box-shadow: var(--focus-ring);
}

.guide-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guide-card-head h4 {
    font-size: 1.08rem;
    line-height: 1.3;
    color: var(--text-strong);
}

.guide-purpose {
    color: var(--text-body);
}

.guide-facts {
    display: grid;
    gap: 10px;
}

.guide-facts dt {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.guide-facts dd {
    margin-top: 2px;
    font-size: 0.95rem;
    color: var(--text-body);
}

.guide-try {
    align-self: flex-start;
    margin-top: auto;
}

.guide-try .icon {
    width: 18px;
    height: 18px;
}

.guide-note {
    margin-top: auto;
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* -- FAQ ---------------------------------------------------------------- */

.faq-section {
    padding: 72px 0;
    background: var(--surface);
}

.faq-list {
    display: grid;
    gap: 10px;
    max-width: 820px;
    margin: 32px auto 0;
}

.faq-item {
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    background: var(--surface);
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-weight: 600;
    color: var(--text-strong);
    cursor: pointer;
    list-style: none;
}

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

.faq-item summary::after {
    content: "+";
    flex: none;
    font-weight: 700;
    color: var(--link-color);
}

.faq-item[open] summary::after {
    content: "\2212";
}

.faq-item summary:focus-visible {
    outline: none;
    border-radius: var(--border-radius);
    box-shadow: var(--focus-ring);
}

.faq-item p {
    padding: 0 20px 18px;
    color: var(--text-body);
}

/* -- Page not found ----------------------------------------------------- */

.notfound-card {
    max-width: 640px;
    text-align: center;
}

.notfound-language + .notfound-language {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--surface-border);
}

.notfound-title {
    margin-bottom: 8px;
    font-size: 1.5rem;
    color: var(--text-strong);
}