/*
 * LayerCloud cookie-consent banner styles (issue #79).
 * First-party file; loaded by every public shell. Logical properties only,
 * so the banner follows the document direction (rtl on /fa/) with no
 * extra rules. No inline styles are used anywhere - the document CSP stays
 * strict.
 */
.lc-consent {
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    z-index: 2147483000;
    display: flex;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

/* #195 follow-up: the banner's TEXT colours were literal emerald
   (#d1fae5 / #ecfdf5 / #a7f3d0 / #04120b), so the notice kept a green cast
   under any picked accent even though its border, glow and buttons already
   followed the accent. They read the accent ladder now, with the old literals
   as fallbacks for the standalone error documents that carry no app theme. */
.lc-consent-card {
    pointer-events: auto;
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px;
    border-radius: 16px;
    /* #161 round 24: the banner is shown on the same pages as the app, whose
       accent engine sets --color-accent-* on <html>. The literals below keep
       the emerald default as the fallback for the pre-JS paint, so the banner
       follows a user's accent pick instead of always looking like someone
       else's brand. */
    border: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 35%, transparent);
    background: rgba(8, 14, 21, 0.97);
    color: var(--color-accent-100, #d1fae5);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 40px color-mix(in oklab, var(--color-accent-500, #10b981) 12%, transparent);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    backdrop-filter: blur(6px);
}

.lc-consent-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-accent-50, #ecfdf5);
}

.lc-consent-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: color-mix(in oklab, var(--color-accent-100, #d1fae5) 78%, transparent);
}

.lc-consent-links {
    display: flex;
}

.lc-consent-links a {
    /* #161 round 23: this was the last sub-24px target in the app (90x18).
       inline-flex + min-height gives it the floor the rest of the UI meets. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent-400, #34d399);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lc-consent-links a:hover {
    color: var(--color-accent-200, #a7f3d0);
}

.lc-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.lc-consent-btn {
    appearance: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.lc-consent-accept {
    border: 1px solid var(--color-accent-500, #10b981);
    background: var(--color-accent-500, #10b981);
    color: var(--color-accent-950, #04120b);
}

.lc-consent-accept:hover {
    background: var(--color-accent-400, #34d399);
}

.lc-consent-decline {
    border: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 45%, transparent);
    background: transparent;
    color: var(--color-accent-200, #a7f3d0);
}

.lc-consent-decline:hover {
    border-color: var(--color-accent-400, #34d399);
    color: var(--color-accent-50, #ecfdf5);
}

@media (max-width: 640px) {
    .lc-consent { padding: 10px; }
    .lc-consent-card { padding: 16px; }
    .lc-consent-actions { justify-content: stretch; }
    .lc-consent-btn { flex: 1 1 auto; text-align: center; }

    /* #161 round 38: the SHORT-viewport rules further down only fire at
       max-height:700px, so a typical tall phone (390x844 - the most common
       portrait shape) still rendered the full card: measured 255px, 30% of the
       first screen. A vision review independently flagged the same crowding on
       every mobile screenshot. The same reasoning as issue #193 D2 applies at
       this size - the explanatory body is the expendable part, while the title,
       both links and the accept/decline actions keep the full consent
       semantics, and consent.js re-opens the complete text on demand. Two
       clamped lines rather than the short-viewport single line, because there
       is more room here and the rationale should stay readable. */
    .lc-consent-card { gap: 8px; padding: 14px 16px; }
    .lc-consent-title { font-size: 14px; }
    .lc-consent-body {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.5;
    }
    .lc-consent-btn { padding: 9px 14px; font-size: 13px; }
    .lc-consent-actions { gap: 8px; }
}

/* Issue #193 D2: on SHORT viewports (phones in portrait at ~700px height,
   and any landscape phone) the full banner covered the page's primary
   actions — measured covering both OAuth buttons on /login (y 549-657 at
   360x800), the hero CTAs on /, and the invite-code input on /register;
   in landscape it covered 65% of the viewport. The explanatory body text
   is the expendable part: title, links, and the accept/decline actions
   still carry the full consent semantics, and /consent.js's re-open
   affordance keeps the body reachable on demand. This roughly halves the
   banner height and uncovers the buttons. */
@media (max-height: 700px), (orientation: landscape) and (max-height: 500px) {
    .lc-consent-card { gap: 6px; padding: 12px 16px; }
    .lc-consent-title { font-size: 13px; }
    /* One clamped line instead of display:none: keeps the notice's rationale
       visible (no-JS visitors and re-opened banners never had another place
       to read it) while holding the height budget that uncovers the
       OAuth buttons (issue #193 D2). */
    .lc-consent-body {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 11.5px;
        line-height: 1.45;
    }
    .lc-consent-links a { min-height: 20px; font-size: 11px; }
    .lc-consent-btn { padding: 8px 14px; font-size: 12px; }
}

/* No light layer here any more: the app is dark-only (issue #167), so the
   #159/#161 light-mode rules these comments described are gone. Do not
   reintroduce a light block on this banner - see the /blog fix in #195 for
   what a live light layer does to a dark-only shell. */

/* #161: the banner is position:fixed, so while it is up it sits ON TOP of the page.
   Measured on /register at 1440x900: the card occupied [0,665,1440,235] and
   elementFromPoint at the centre of the ToS checkbox (y=830) and the referral input
   (y=662) both returned the BANNER, not the control - so a mouse user could not tick
   the terms box or open the ToS link, and registration was blocked on a first visit.
   Because the page had no room reserved at the bottom it could not even be scrolled
   clear of the banner.

   Reserving space is the robust fix: the form can now always be scrolled out from
   under the banner, so nothing is permanently unreachable at any viewport height.
   The classes below are the reason this is a CLASS on <html> rather than an inline
   style - the document CSP is style-src 'self', so consent.js sets no style
   attributes anywhere, by design.

   The reserve tracks the card's real height at each breakpoint rather than using one
   large blanket value, so a desktop visitor does not get 400px of empty page. */
html.lc-consent-open body { padding-bottom: 300px; }

@media (max-width: 640px) {
    /* The short-viewport rules below shrink the card on small screens, so the
       reserve shrinks with it. */
    html.lc-consent-open body { padding-bottom: 280px; }
}

@media (max-height: 700px) {
    html.lc-consent-open body { padding-bottom: 160px; }
}

/* Consent convention: declining must be as easy as accepting. The accept button was
   a filled emerald slab while decline was a bare ghost with no background, so the two
   read as "one real choice and one escape hatch". Both now carry the same border
   weight and padding, and only the fill differs. */
.lc-consent-decline {
    background: color-mix(in oklab, var(--color-accent-500, #10b981) 12%, transparent);
}

/* #161: the first reserve (220px) was SMALLER than the banner itself - the card measures ~235px
   tall plus 16px of container padding, so at 1440x900 the fixed card still covered the ToS
   checkbox (y=828) after the change and elementFromPoint still returned the banner. A reserve
   that does not exceed the overlay buys nothing. These values are the measured card height plus
   the container padding plus margin. */