/*
Status pages: install, update and uninstall.

They reuse the landing page's header, footer, banded section headings and
highlight sweep, so all four pages read as one site. Only the centered
status hero, the pin steps and the form controls are page-specific.
*/

.info-main
{
    padding-block: clamp(2.4rem, 5.5vw, 4rem);
}

.info-wrap
{
    max-width: 40rem;
    margin-inline: auto;
}

/* ---------- Status hero ---------- */

.info-head
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
    text-align: center;
}

.info-mark
{
    border-radius: 18px;
    padding: 5px;
}

.info-mark img
{
    width: 64px;
    height: 64px;
    border-radius: 13px;
}

.info-head h1
{
    font-size: clamp(2.2rem, 5vw, 3.1rem);
    letter-spacing: -0.03em;
}

.info-sub
{
    max-width: 32rem;
    font-size: 1.02rem;
    text-wrap: pretty;
    color: var(--ink-soft);
}

.info-sub strong
{
    color: #f0711c;
}

.info-sub .version
{
    color: #3640D8;
}

/* ---------- Sections: the landing's band headings carry the page ---------- */

.info-section + .info-section
{
    margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

.info-section h2
{
    margin-bottom: 1.1rem;
}

.info-section > p
{
    max-width: 36rem;
    font-size: 0.98rem;
    text-wrap: pretty;
    color: var(--ink-soft);
}

.info-section > p + p
{
    margin-top: 0.7rem;
}

/* ---------- Pin hint (install) ---------- */

/* Minimal header for the install and update pages: no rule, no nav,
   centered brand, and no media badges. */
.page-minimal .page-head
{
    border-bottom: 0;
}

.page-minimal .page-head-inner
{
    display: flex;
    justify-content: center;
}

.page-minimal .head-nav,
.page-minimal .head-icons
{
    display: none;
}

/* Pinned to the very top so the arrow tip touches the toolbar it points at;
   the header's right side is clear on this page, so it overlaps nothing */
.pin-hint
{
    position: absolute;
    top: 0.25rem;
    right: clamp(1rem, 4vw, 2.5rem);
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    max-width: 20rem;
    opacity: 0;
    text-align: center;
    animation: hintIn 0.5s ease-out 0.6s forwards;
}

.pin-arrow
{
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    margin-top: 5px;
    color: var(--heading);
    animation: bob 1.6s ease-in-out infinite;
}

.pin-bubble
{
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-soft);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-hover);
    padding: 0.7rem 0.95rem;
}

/* One instruction set per browser; js/hints.js sets the body class */
.pin-firefox
{
    display: none;
}

body.is-firefox .pin-chrome
{
    display: none;
}

body.is-firefox .pin-firefox
{
    display: inline;
}

@keyframes hintIn
{
    from
    {
        opacity: 0;
        transform: translateY(-0.4rem);
    }

    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bob
{
    0%,
    100%
    {
        transform: translateY(0);
    }

    50%
    {
        transform: translateY(-0.35rem);
    }
}

.icon-inline
{
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
}

/* ---------- Version changelog (update) ---------- */

/* Version leading the heading, colored, no box at all */
.version-chip
{
    color: #3640D8;
    margin-right: 0.55rem;
}

/* Release notes as ruled rows: a tinted kind tag, then the change */
.version-list
{
    display: flex;
    flex-direction: column;
}

.version-item
{
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 0.6rem;
}

.version-item:first-child
{
    padding-top: 0;
}

.version-item:last-child
{
    padding-bottom: 0;
}

.version-item + .version-item
{
    border-top: 1px solid var(--line);
}

.version-kind
{
    flex: none;
    min-width: 3.2rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
    padding: 0.18rem 0.5rem;
}

.version-kind-new
{
    color: var(--green-deep);
    background: var(--green-tint);
}

.version-kind-fix
{
    color: var(--peach-deep);
    background: var(--peach-tint);
}

.version-text
{
    font-size: 0.97rem;
    color: var(--ink-soft);
}

/* ---------- Feedback form (uninstall) ---------- */

.feedback-form
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.feedback-input
{
    width: 100%;
    min-height: 7.5rem;
    font-family: var(--font-body);
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    resize: vertical;
}

.feedback-input:focus
{
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

.info-btn
{
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 0.65rem 1.2rem;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.info-btn:hover
{
    background: var(--wash);
    border-color: var(--ink-soft);
}

/* Fade-out used by js/feedback.js after the thank-you swap */
.feedback-card.is-fading
{
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* ---------- Misc ---------- */

.info-signoff
{
    margin-top: 2.2rem;
    font-size: 0.95rem;
    text-align: center;
    color: var(--ink-soft);
}

.visually-hidden
{
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* ---------- Responsive ---------- */

/* On narrower screens the hint joins the flow instead of floating */
@media (max-width: 1000px)
{
    .pin-hint
    {
        position: static;
        margin: 0 auto 1.8rem;
        opacity: 1;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .pin-hint,
    .pin-arrow
    {
        animation: none;
        opacity: 1;
    }
}