/* Shared button theme: mechanical keyboard key (pure CSS — matches the keycap recipe)
   Recipe structure (exactly):
   - button = the dark key SHELL: body gradient + inset side/bottom shading +
     2px key ring + deep drop shadow + overflow:hidden
   - ::before = the lighter inset key FACE holding the letter
     (top:3px / left:4px / bottom:14px / right:12px → thick front wall bottom/right)
   - site behavior: hover pre-sinks 1px, :active presses down 4px */
button,
.btn,
.submit-btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-outline,
a.btn,
a.submit-btn,
a.btn-primary,
a.btn-secondary,
a.btn-danger,
a.btn-outline,
.modal-close-btn,
.input-with-button button,
.map-modal-actions button {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    margin: 0;
    text-align: center;
    background: linear-gradient(180deg, #284828 0%, #205020 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 calc(1px * var(--kc)) calc(2px * var(--kc)) rgba(0, 0, 0, 0.55);
    border: none !important;
    border-radius: 2px !important;
    padding: 14px 22px !important;
    font-size: var(--text-btn) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.22);
    transition: box-shadow 0.08s ease, transform 0.06s ease, filter 0.08s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* ── Keycap treatment (all buttons get the keycap: dark shell + face) ──
   The button IS the dark key shell (recipe `span`). */
button,
.view-group-btn,
.btn,
.submit-btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-outline,
a.btn,
a.submit-btn,
a.btn-primary,
a.btn-secondary,
a.btn-danger,
a.btn-outline,
.modal-close-btn,
.input-with-button button,
.map-modal-actions button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 40px;
    --kc: 0.55; /* default ≈44px button; button-theme.js sets the exact per-button scale */
    border-radius: calc(5px * var(--kc)) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0.03) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.40) 100%),
        linear-gradient(180deg, #282828 0%, #203020 100%) !important;
    box-shadow:
        inset calc(-8px * var(--kc)) 0 calc(8px * var(--kc)) rgba(0, 0, 0, 0.15),
        inset 0 calc(-8px * var(--kc)) calc(8px * var(--kc)) rgba(0, 0, 0, 0.25),
        0 0 0 calc(2px * var(--kc)) rgba(0, 0, 0, 0.75),
        calc(10px * var(--kc)) calc(20px * var(--kc)) calc(25px * var(--kc)) rgba(0, 0, 0, 0.40) !important;
}

/* Key face: lighter inset surface holding the letter (recipe `span::before`) */
button::before,
.view-group-btn::before,
.btn::before,
.submit-btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-danger::before,
a.btn::before,
a.submit-btn::before,
a.btn-primary::before,
a.btn-secondary::before,
a.btn-danger::before,
.modal-close-btn::before,
.input-with-button button::before,
.map-modal-actions button::before {
    content: "";
    position: absolute;
    top: calc(3px * var(--kc));
    left: calc(4px * var(--kc));
    bottom: calc(14px * var(--kc));
    right: calc(14px * var(--kc));
    z-index: -1;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.18) 35%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 75%),
        linear-gradient(90deg, #234323 0%, #4A724A 100%);
    border-radius: calc(5px * var(--kc));
    border-top: calc(1px * var(--kc)) solid rgba(0, 0, 0, 0.60);   /* #0009 hairline */
    border-left: calc(1px * var(--kc)) solid rgba(0, 0, 0, 0.27);  /* #0004 hairline */
    border-bottom: calc(1px * var(--kc)) solid rgba(0, 0, 0, 0.27);/* #0004 hairline */
    box-shadow:
        calc(-10px * var(--kc)) calc(-10px * var(--kc)) calc(10px * var(--kc)) rgba(255, 255, 255, 0.25),
        calc(10px * var(--kc)) calc(5px * var(--kc)) calc(10px * var(--kc)) rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* Hover: tiny pre-sink (1px) + subtle brighten */
button:hover:not(:disabled),
.btn:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-outline:hover:not(:disabled),
a.btn:hover,
a.submit-btn:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.btn-danger:hover,
a.btn-outline:hover,
.modal-close-btn:hover,
.input-with-button button:hover,
.map-modal-actions button:hover {
    transform: translateY(calc(1px * var(--kc))) !important;
}
.btn:hover:not(:disabled),
.view-group-btn:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
a.btn:hover,
a.submit-btn:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.btn-danger:hover,
.modal-close-btn:hover,
.input-with-button button:hover,
.map-modal-actions button:hover {
    filter: brightness(1.05);
}

/* Pressed: key sinks down — snappy, mechanical */
button:active:not(:disabled),
.btn:active:not(:disabled),
.submit-btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled),
.btn-outline:active:not(:disabled),
a.btn:active,
a.submit-btn:active,
a.btn-primary:active,
a.btn-secondary:active,
a.btn-danger:active,
a.btn-outline:active,
.modal-close-btn:active,
.input-with-button button:active,
.map-modal-actions button:active {
    transform: translateY(calc(4px * var(--kc))) !important;
}
.btn:active:not(:disabled),
.view-group-btn:active:not(:disabled),
.submit-btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled),
a.btn:active,
a.submit-btn:active,
a.btn-primary:active,
a.btn-secondary:active,
a.btn-danger:active,
.modal-close-btn:active,
.input-with-button button:active,
.map-modal-actions button:active {
    box-shadow:
        inset calc(-8px * var(--kc)) 0 calc(8px * var(--kc)) rgba(0, 0, 0, 0.15),
        inset 0 calc(-8px * var(--kc)) calc(8px * var(--kc)) rgba(0, 0, 0, 0.25),
        0 0 0 calc(2px * var(--kc)) rgba(0, 0, 0, 0.75),
        0 calc(4px * var(--kc)) calc(8px * var(--kc)) rgba(0, 0, 0, 0.35) !important;
}
.btn:active:not(:disabled)::before,
.view-group-btn:active:not(:disabled)::before,
.submit-btn:active:not(:disabled)::before,
.btn-primary:active:not(:disabled)::before,
.btn-secondary:active:not(:disabled)::before,
.btn-danger:active:not(:disabled)::before,
a.btn:active::before,
a.submit-btn:active::before,
a.btn-primary:active::before,
a.btn-secondary:active::before,
a.btn-danger:active::before,
.modal-close-btn:active::before,
.input-with-button button:active::before,
.map-modal-actions button:active::before {
    filter: brightness(0.92);
}

/* Keyboard-style focus ring */
button:focus-visible,
.btn:focus-visible,
.submit-btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-outline:focus-visible,
a.btn:focus-visible,
a.submit-btn:focus-visible,
a.btn-primary:focus-visible,
a.btn-secondary:focus-visible,
a.btn-danger:focus-visible,
a.btn-outline:focus-visible,
.modal-close-btn:focus-visible,
.input-with-button button:focus-visible,
.map-modal-actions button:focus-visible {
    outline: 2px solid #d0d0d0 !important;
    outline-offset: 2px !important;
}

button:disabled,
.btn:disabled,
.submit-btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-outline:disabled,
.disabled,
.disabled-btn {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Keycap variants ─────────────────────────────────────────── */

/* Danger = dark red keycap (recipe style) */
.btn-danger,
a.btn-danger {
    background: linear-gradient(180deg, #4a2421 0%, #381a17 100%) !important;
}
.btn-danger::before,
a.btn-danger::before {
    background: linear-gradient(90deg, #582a25 0%, #8f4a40 100%);
}

/* Secondary = lighter gray keycap (recipe style) */
.btn-secondary,
a.btn-secondary {
    background: linear-gradient(180deg, #3b3b3b 0%, #2e2e2e 100%) !important;
}
.btn-secondary::before,
a.btn-secondary::before {
    background: linear-gradient(90deg, #454545 0%, #636363 100%);
}

/* Outline = flat "secondary key": dark ring, faint face, no dark shell */
.btn-outline,
a.btn-outline {
    color: #333333 !important;
    background: transparent !important;
    box-shadow: 0 0 0 calc(2px * var(--kc)) rgba(0, 0, 0, 0.6) !important;
}
.btn-outline::before,
a.btn-outline::before {
    background: rgba(0, 0, 0, 0.04);
    box-shadow: none;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
    border-left: 1px solid rgba(0, 0, 0, 0.20);
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
}
.btn-outline:hover:not(:disabled),
a.btn-outline:hover {
    transform: translateY(calc(1px * var(--kc))) !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #111111 !important;
}
.btn-outline:active:not(:disabled),
a.btn-outline:active {
    transform: translateY(calc(3px * var(--kc))) !important;
    background-color: rgba(0, 0, 0, 0.14) !important;
}

.btn-small {
    padding: 8px 14px !important;
    font-size: var(--text-sm) !important;
}

.full-width {
    width: 100% !important;
}

/* Shared input focus style for consistent project theme */
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: #3EAC77 !important;
    box-shadow: 0 0 0 3px rgba(62, 172, 119, 0.15) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #3EAC77;
}

/* Site logo base: let header-scoped rules control visible size */
.site-logo {
    height: auto;
    max-height: none;
    width: auto;
    display: block;
}

/* Ensure header logo aligns and cannot overflow header */
.header .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.header .logo .site-logo {
    /* Match header avatar size (45px) for visual balance */
    height: 45px !important;
    max-height: 45px !important;
    width: auto;
    display: block;
}

/* Make the header logo a bit smaller on narrower viewports */
@media (max-width: 900px) {
    .header .logo .site-logo {
        height: 40px !important;
        max-height: 40px !important;
    }
}

@media (max-width: 480px) {
    .header .logo .site-logo {
        /* !important required to beat the 40px !important rule in the 900px block above */
        height: 36px !important;
        max-height: 36px !important;
    }
}

/* Keep avatar and logo visually in sync on small screens */
@media (max-width: 900px) {
    .avatar { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
    .avatar { width: 36px; height: 36px; }
}
.header .logo .logo-text {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-left: 0.01rem;
    font-size: 2.8rem !important;
    font-weight: 700 !important;
}

/* The wordmark colour follows the key it sits on: WHITE on the dark key, and
   the accent green on the light key and the plain pill. The old unconditional
   `color: #ffffff !important` here is what made the logo read white in Light
   and Plain as well — that pin is now per-theme. */
.header .logo .logo-text {
    color: #ffffff !important;
}
html[data-btn-style="points"] .header .logo .logo-text,
html[data-btn-style="pill"] .header .logo .logo-text {
    color: #1f6b45 !important;
}

@media (max-width: 900px) {
    .header .logo .logo-text {
        font-size: 2.1rem !important;
    }
}

/* Phones: much smaller wordmark so it stays balanced with the 36px logo/avatar.
   Must come AFTER the 900px rule above (equal specificity + !important → last wins). */
@media (max-width: 480px) {
    .header .logo .logo-text {
        font-size: 1.25rem !important;
    }
}

/* Ensure header layout flips with page direction */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 720px) {
    .header { flex-wrap: wrap; gap: 0.5rem; }
}



/* Tier badge appearance across site */
.badge {
    background: #FAEB16 !important;
    color: #2f855a !important;
    padding: 0.3rem 1rem !important;
    border-radius: 30px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* Simple word-only toggles used on dashboard for show/hide sections */
.toggle-list {
    display: flex;
    gap: 0.75rem;
    list-style:outside;
    margin: 0 0 0.6rem 0;
    padding: 0.1rem;
    align-items: center;
}
.toggle-word {
    cursor: pointer;
    padding: 0.36rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3EAC77 0%, #ffffff 100%);
    min-width: 0;
    font-size: 0.83rem;
    color: #1a4730;
    font-weight: 600;
}
.toggle-word[aria-expanded="false"] { opacity: 0.5; }
.toggle-word:hover { color: #0d2f1f; background: linear-gradient(135deg, #3EAC77 0%, #ffffff 100%); filter: brightness(0.97); }
.toggle-word:focus { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 3px; }

/* Collapsible: only overflow+transition; max-height is controlled entirely by JS inline style */
.collapsible {
    overflow: hidden;
    transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* `.collapsible.collapsed` is a JS state marker only. The card collapses via
   inline max-height (JS) and fully hides via display:none when done; its
   padding/margin/border/size/shape are never modified. 
.collapsible.collapsed {
     no style changes 
}
*/
/* ── RTL overrides (Arabic) ─────────────────────────────────── */
[dir="rtl"] body {
    text-align: right;
}
[dir="rtl"] .avatar-dropdown,
[dir="rtl"] .header-avatar-dropdown {
    right: auto;
    left: 0;
}
[dir="rtl"] .btn-row,
[dir="rtl"] .input-row,
[dir="rtl"] .seedates-filters,
[dir="rtl"] .modal-actions {
    flex-direction: row-reverse;
}
[dir="rtl"] .filter-group {
    text-align: right;
}
[dir="rtl"] .info-box {
    border-left: none;
    border-right: 6px solid #3EAC77;
    padding-left: 1.5rem;
    padding-right: 1.2rem;
}
[dir="rtl"] .container {
    direction: rtl;
}
[dir="rtl"] .toggle-tabs {
    flex-direction: row-reverse;
}
[dir="rtl"] .features li {
    text-align: right;
}
[dir="rtl"] .chart-info-grid {
    direction: rtl;
}
[dir="rtl"] .card {
    text-align: right;
}
[dir="rtl"] footer {
    direction: rtl;
}
html[dir="rtl"] .avatar-dropdown,
html[dir="rtl"] .header-avatar-dropdown,
html[dir="rtl"] .avatar-dropdown.show,
html[dir="rtl"] .header-avatar-dropdown.show {
    right: auto !important;
    left: 0 !important;
    text-align: right !important;
}
/* Language switch in footer. The keycap BUTTON inside carries .btn, so the
   theme owns the shell, palette, key face and the hover/press lift; only the
   compact geometry lives here. i18n.js builds the trigger and the menu.
   THE WRAPPER IS DELIBERATELY NOT THE KEYCAP: the keycap shell is
   `overflow: hidden`, so a menu inside it is sliced off along the key's edge.
   The wrapper is a plain positioned box that owns the button AND the panel. */
/* ── Footer switches: two PLAIN single-word links ─────────────────────
   The language switch and the button-theme switch each show their ACTIVE
   value as one word; clicking cycles to the next option (language:
   English <-> العربية, button theme: Dark -> Light -> Plain -> Dark).
   No pill and no keycap. The link green is #007509 — the user replaced the
   inherited footer grey with it ("the language and the theme do green").
   Built by lang/i18n.js and button-theme.js. */
#langToggle,
.btn-style-link {
    position: relative;
    display: inline-block;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0;
    color: #007509 !important;
    font: inherit;
    font-size: 0.95rem !important;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
#langToggle:hover,
.btn-style-link:hover,
#langToggle:focus-visible,
.btn-style-link:focus-visible {
    text-decoration: underline;
}
/* The theme link used to sit on its OWN LINE UNDER the language link inside
   .footer-switches; both are entries in the legal links row now, so it is
   inline like the links around it. */
.btn-style-link {
    display: inline-block;
    width: auto;
}

/* ══════════════════════════════════════════════════════════════
   (The footer dropdown panels are gone — both switches are plain single-word
   links now; see the block above.)
   ══════════════════════════════════════════════════════════════ */

/* ── Mobile: keep card content clear of the floated Hide keycap ──
   The Hide button is absolutely positioned in the card's trailing corner
   (right in LTR, left in RTL)
   and is 40px tall (top:8 → bottom:48 within the card). On small screens
   push the first content block below the h2 down so it clears the Hide
   button, instead of inflating the container. */
@media (max-width: 900px) {
    .card:has(.card-hide-btn) > h2 + * {
        margin-top: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEFT HEADER GROUP — WRAPPED IN A POINTS-STYLE LABEL
   The left side (mark + wordmark) sits inside a pill that copies the
   points label on the right: same 30px radius, same green→white gradient,
   same dark-green text. It is ONLY a wrap — the mark and the wordmark keep
   their own sizes and the group can still wrap onto a second line when the
   favourites side no longer fits (below 720px the header wraps as well).
   ═══════════════════════════════════════════════════════════════════════ */
/* The logo FOLLOWS THE BUTTON THEME — it carries .btn (added by
   button-theme.js), so the theme supplies the shell, palette, radius, shadow,
   key face and press states. Only geometry lives here.
   The logo is NOT a key: it keeps the .btn class only so button-theme.js can
   still measure --kc from it, but the themed shell and face are stripped here
   so the header shows the mark alone. */
html[data-btn-style] .header .logo,
.header .logo {
    height: auto !important;
    padding: 0 !important;
    gap: 0.5rem !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
html[data-btn-style] .header .logo::before,
.header .logo::before {
    display: none !important;
}
.header .logo,
.header .logo a {
    flex-wrap: wrap;
    min-width: 0;
}
.header .logo .logo-text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    /* The theme forces `font-size: var(--text-btn)` on .btn; the wordmark keeps
       its own scale. Mirrors header-footer.css exactly (2.8 / 2.1 / 1.25rem). */
    font-size: 2.8rem !important;
}
@media (max-width: 900px) {
    .header .logo .logo-text { font-size: 2.1rem !important; }
}
@media (max-width: 480px) {
    .header .logo .logo-text { font-size: 1.25rem !important; }
}
@media (max-width: 720px) {
    .header {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   STYLE B — "POINTS" KEYCAP   (optional, A/B preview)
   ───────────────────────────────────────────────────────────────────────
   SAME SHAPE as the default dark key: identical geometry, face offsets,
   --kc scaling, hover/active press and focus behaviour. Only the palette
   changes, to match the header points pill:
       shell  = linear-gradient(135deg, #2C8759 0%, #3EAC76 40%, #ffffff 100%)
                (deeper green at the start, green through the middle, and
                 the white returns on the far SIDE of the key)
       text   = #1f6b45
   Edges differ slightly from the pill (that is the "little difference"):
   the key keeps the flat 2px ring — tinted dark green instead of
   near-black — plus lighter green hairlines on the face, so it still
   reads as a mechanical key and not as another badge.

   Activated by  <html data-btn-style="points">  (toggled by the preview
   switcher at the bottom of button-theme.js).

   ROLLBACK: pick "Keycap" in the switcher, or delete this whole block
   plus the switcher module in button-theme.js. The default dark key
   design is untouched and does not depend on this block.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-btn-style="points"] button,
html[data-btn-style="points"] .view-group-btn,
html[data-btn-style="points"] .btn,
html[data-btn-style="points"] .submit-btn,
html[data-btn-style="points"] .btn-primary,
html[data-btn-style="points"] .btn-secondary,
html[data-btn-style="points"] .btn-danger,
html[data-btn-style="points"] .btn-outline,
html[data-btn-style="points"] a.btn,
html[data-btn-style="points"] a.submit-btn,
html[data-btn-style="points"] a.btn-primary,
html[data-btn-style="points"] a.btn-secondary,
html[data-btn-style="points"] a.btn-danger,
html[data-btn-style="points"] a.btn-outline,
html[data-btn-style="points"] .modal-close-btn,
html[data-btn-style="points"] .input-with-button button,
html[data-btn-style="points"] .map-modal-actions button {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.14) 26%, rgba(255, 255, 255, 0.03) 44%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.16) 100%),
        linear-gradient(135deg, #2C8759 0%, #3EAC76 40%, #ffffff 100%) !important;
    color: #1f6b45 !important;
    text-shadow: none !important;
    box-shadow:
        inset calc(-8px * var(--kc)) 0 calc(8px * var(--kc)) rgba(31, 107, 69, 0.20),
        inset 0 calc(-8px * var(--kc)) calc(8px * var(--kc)) rgba(31, 107, 69, 0.24),
        0 0 0 calc(2px * var(--kc)) rgba(31, 107, 69, 0.35),
        calc(10px * var(--kc)) calc(20px * var(--kc)) calc(25px * var(--kc)) rgba(31, 107, 69, 0.22) !important;
}

/* Key face — same offsets as the dark key, pale green→white surface */
html[data-btn-style="points"] button::before,
html[data-btn-style="points"] .view-group-btn::before,
html[data-btn-style="points"] .btn::before,
html[data-btn-style="points"] .submit-btn::before,
html[data-btn-style="points"] .btn-primary::before,
html[data-btn-style="points"] .btn-secondary::before,
html[data-btn-style="points"] .btn-danger::before,
html[data-btn-style="points"] a.btn::before,
html[data-btn-style="points"] a.submit-btn::before,
html[data-btn-style="points"] a.btn-primary::before,
html[data-btn-style="points"] a.btn-secondary::before,
html[data-btn-style="points"] a.btn-danger::before,
html[data-btn-style="points"] .modal-close-btn::before,
html[data-btn-style="points"] .input-with-button button::before,
html[data-btn-style="points"] .map-modal-actions button::before {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.15) 38%, rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0) 78%),
        linear-gradient(135deg, #3FA47A 0%, #63C099 60%, #F2FBF6 100%);
    border-top: calc(1px * var(--kc)) solid rgba(31, 107, 69, 0.35);
    border-left: calc(1px * var(--kc)) solid rgba(31, 107, 69, 0.16);
    border-bottom: calc(1px * var(--kc)) solid rgba(31, 107, 69, 0.16);
    box-shadow:
        calc(-10px * var(--kc)) calc(-10px * var(--kc)) calc(10px * var(--kc)) rgba(255, 255, 255, 0.38),
        calc(10px * var(--kc)) calc(5px * var(--kc)) calc(10px * var(--kc)) rgba(31, 107, 69, 0.12);
}

/* Pressed — same travel, green-tinted ring/shadow instead of black */
html[data-btn-style="points"] button:active:not(:disabled),
html[data-btn-style="points"] .btn:active:not(:disabled),
html[data-btn-style="points"] .view-group-btn:active:not(:disabled),
html[data-btn-style="points"] .submit-btn:active:not(:disabled),
html[data-btn-style="points"] .btn-primary:active:not(:disabled),
html[data-btn-style="points"] .btn-secondary:active:not(:disabled),
html[data-btn-style="points"] .btn-danger:active:not(:disabled),
html[data-btn-style="points"] .btn-outline:active:not(:disabled),
html[data-btn-style="points"] a.btn:active,
html[data-btn-style="points"] a.submit-btn:active,
html[data-btn-style="points"] a.btn-primary:active,
html[data-btn-style="points"] a.btn-secondary:active,
html[data-btn-style="points"] a.btn-danger:active,
html[data-btn-style="points"] a.btn-outline:active,
html[data-btn-style="points"] .modal-close-btn:active,
html[data-btn-style="points"] .input-with-button button:active,
html[data-btn-style="points"] .map-modal-actions button:active {
    box-shadow:
        inset calc(-8px * var(--kc)) 0 calc(8px * var(--kc)) rgba(31, 107, 69, 0.20),
        inset 0 calc(-8px * var(--kc)) calc(8px * var(--kc)) rgba(31, 107, 69, 0.24),
        0 0 0 calc(2px * var(--kc)) rgba(31, 107, 69, 0.35),
        0 calc(4px * var(--kc)) calc(8px * var(--kc)) rgba(31, 107, 69, 0.25) !important;
}

/* Focus ring — green on the light key (invisible grey otherwise) */
html[data-btn-style="points"] button:focus-visible,
html[data-btn-style="points"] .btn:focus-visible,
html[data-btn-style="points"] .view-group-btn:focus-visible,
html[data-btn-style="points"] .submit-btn:focus-visible,
html[data-btn-style="points"] .btn-primary:focus-visible,
html[data-btn-style="points"] .btn-secondary:focus-visible,
html[data-btn-style="points"] .btn-danger:focus-visible,
html[data-btn-style="points"] .btn-outline:focus-visible,
html[data-btn-style="points"] a.btn:focus-visible,
html[data-btn-style="points"] a.submit-btn:focus-visible,
html[data-btn-style="points"] a.btn-primary:focus-visible,
html[data-btn-style="points"] a.btn-secondary:focus-visible,
html[data-btn-style="points"] a.btn-danger:focus-visible,
html[data-btn-style="points"] a.btn-outline:focus-visible,
html[data-btn-style="points"] .modal-close-btn:focus-visible,
html[data-btn-style="points"] .input-with-button button:focus-visible,
html[data-btn-style="points"] .map-modal-actions button:focus-visible {
    outline: 2px solid #1f6b45 !important;
}

/* ── Style B variants — reuse the other two tier-pill palettes ── */
html[data-btn-style="points"] .btn-danger,
html[data-btn-style="points"] a.btn-danger {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.14) 26%, rgba(255, 255, 255, 0.03) 44%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.16) 100%),
        linear-gradient(135deg, #B92A2A 0%, #d63636 40%, #ffffff 100%) !important;
    color: #8f1d1d !important;
    box-shadow:
        inset calc(-8px * var(--kc)) 0 calc(8px * var(--kc)) rgba(143, 29, 29, 0.20),
        inset 0 calc(-8px * var(--kc)) calc(8px * var(--kc)) rgba(143, 29, 29, 0.24),
        0 0 0 calc(2px * var(--kc)) rgba(143, 29, 29, 0.35),
        calc(10px * var(--kc)) calc(20px * var(--kc)) calc(25px * var(--kc)) rgba(143, 29, 29, 0.22) !important;
}
html[data-btn-style="points"] .btn-danger::before,
html[data-btn-style="points"] a.btn-danger::before {
    background: linear-gradient(135deg, #CE4A4A 0%, #e57c7c 38%, #FDF3F3 100%);
    border-top-color: rgba(143, 29, 29, 0.35);
    border-left-color: rgba(143, 29, 29, 0.16);
    border-bottom-color: rgba(143, 29, 29, 0.16);
}

html[data-btn-style="points"] .btn-secondary,
html[data-btn-style="points"] a.btn-secondary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.14) 26%, rgba(255, 255, 255, 0.03) 44%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.14) 100%),
        linear-gradient(135deg, #b4b4b4 0%, #cfcfcf 40%, #ffffff 100%) !important;
    color: #3b3b3b !important;
    box-shadow:
        inset calc(-8px * var(--kc)) 0 calc(8px * var(--kc)) rgba(0, 0, 0, 0.12),
        inset 0 calc(-8px * var(--kc)) calc(8px * var(--kc)) rgba(0, 0, 0, 0.16),
        0 0 0 calc(2px * var(--kc)) rgba(0, 0, 0, 0.28),
        calc(10px * var(--kc)) calc(20px * var(--kc)) calc(25px * var(--kc)) rgba(0, 0, 0, 0.18) !important;
}
html[data-btn-style="points"] .btn-secondary::before,
html[data-btn-style="points"] a.btn-secondary::before {
    background: linear-gradient(135deg, #d4d4d4 0%, #e4e4e4 38%, #fcfcfc 100%);
    border-top-color: rgba(0, 0, 0, 0.28);
    border-left-color: rgba(0, 0, 0, 0.12);
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

/* Outline stays transparent/flat — only the text + ring pick up the green */
html[data-btn-style="points"] .btn-outline,
html[data-btn-style="points"] a.btn-outline {
    color: #1f6b45 !important;
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: 0 0 0 calc(2px * var(--kc)) rgba(31, 107, 69, 0.45) !important;
}
html[data-btn-style="points"] .btn-outline:hover:not(:disabled),
html[data-btn-style="points"] a.btn-outline:hover {
    color: #145335 !important;
    background-color: rgba(62, 172, 118, 0.12) !important;
}
html[data-btn-style="points"] .btn-outline:active:not(:disabled),
html[data-btn-style="points"] a.btn-outline:active {
    background-color: rgba(62, 172, 118, 0.20) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   STYLE C — "PILL" BUTTONS (flat, no key)   (third design)
   ───────────────────────────────────────────────────────────────────────
   Copies the header points label / index Log In pill: the same gradient
   (linear-gradient(135deg,#3EAC76 0%,#ffffff 100%)), the same dark-green
   text, fully rounded 30px ends — and NO mechanical-key depth at all: the
   ::before face is switched off, there is no ring and no drop shadow. It is
   the one design that reads flat from every angle.
   Geometry stays the theme's (40px tall, same padding and hover travel), so
   nothing moves in the layout when you switch designs — only the surface.

   Activated by  <html data-btn-style="pill">  (footer picker).

   ROLLBACK: pick "Keycap", or delete this block + its picker option in
   button-theme.js.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-btn-style="pill"] button,
html[data-btn-style="pill"] .view-group-btn,
html[data-btn-style="pill"] .btn,
html[data-btn-style="pill"] .submit-btn,
html[data-btn-style="pill"] .btn-primary,
html[data-btn-style="pill"] .btn-secondary,
html[data-btn-style="pill"] .btn-danger,
html[data-btn-style="pill"] .btn-outline,
html[data-btn-style="pill"] a.btn,
html[data-btn-style="pill"] a.submit-btn,
html[data-btn-style="pill"] a.btn-primary,
html[data-btn-style="pill"] a.btn-secondary,
html[data-btn-style="pill"] a.btn-danger,
html[data-btn-style="pill"] a.btn-outline,
html[data-btn-style="pill"] .modal-close-btn,
html[data-btn-style="pill"] .input-with-button button,
html[data-btn-style="pill"] .map-modal-actions button {
    border: none !important;
    border-radius: 30px !important;
    background: linear-gradient(135deg, #3EAC76 0%, #ffffff 100%) !important;
    color: #1f6b45 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* The keycap face is what makes a themed button look raised — off here. */
html[data-btn-style="pill"] button::before,
html[data-btn-style="pill"] .view-group-btn::before,
html[data-btn-style="pill"] .btn::before,
html[data-btn-style="pill"] .submit-btn::before,
html[data-btn-style="pill"] .btn-primary::before,
html[data-btn-style="pill"] .btn-secondary::before,
html[data-btn-style="pill"] .btn-danger::before,
html[data-btn-style="pill"] .btn-outline::before,
html[data-btn-style="pill"] a.btn::before,
html[data-btn-style="pill"] a.submit-btn::before,
html[data-btn-style="pill"] a.btn-primary::before,
html[data-btn-style="pill"] a.btn-secondary::before,
html[data-btn-style="pill"] a.btn-danger::before,
html[data-btn-style="pill"] a.btn-outline::before,
html[data-btn-style="pill"] .modal-close-btn::before,
html[data-btn-style="pill"] .input-with-button button::before,
html[data-btn-style="pill"] .map-modal-actions button::before {
    content: none !important;
}

/* Pressed: the keycap active rule re-adds a black ring and a drop shadow.
   Swap it for a flat inner tint so the pill never gains depth. */
html[data-btn-style="pill"] button:active:not(:disabled),
html[data-btn-style="pill"] .btn:active:not(:disabled),
html[data-btn-style="pill"] .view-group-btn:active:not(:disabled),
html[data-btn-style="pill"] .submit-btn:active:not(:disabled),
html[data-btn-style="pill"] .btn-primary:active:not(:disabled),
html[data-btn-style="pill"] .btn-secondary:active:not(:disabled),
html[data-btn-style="pill"] .btn-danger:active:not(:disabled),
html[data-btn-style="pill"] .btn-outline:active:not(:disabled),
html[data-btn-style="pill"] a.btn:active,
html[data-btn-style="pill"] a.submit-btn:active,
html[data-btn-style="pill"] a.btn-primary:active,
html[data-btn-style="pill"] a.btn-secondary:active,
html[data-btn-style="pill"] a.btn-danger:active,
html[data-btn-style="pill"] a.btn-outline:active,
html[data-btn-style="pill"] .modal-close-btn:active,
html[data-btn-style="pill"] .input-with-button button:active,
html[data-btn-style="pill"] .map-modal-actions button:active {
    box-shadow: inset 0 0 0 calc(2px * var(--kc)) rgba(31, 107, 69, 0.28) !important;
}

/* Focus ring — green, same as the rest of the family */
html[data-btn-style="pill"] button:focus-visible,
html[data-btn-style="pill"] .btn:focus-visible,
html[data-btn-style="pill"] .view-group-btn:focus-visible,
html[data-btn-style="pill"] .submit-btn:focus-visible,
html[data-btn-style="pill"] .btn-primary:focus-visible,
html[data-btn-style="pill"] .btn-secondary:focus-visible,
html[data-btn-style="pill"] .btn-danger:focus-visible,
html[data-btn-style="pill"] .btn-outline:focus-visible,
html[data-btn-style="pill"] a.btn:focus-visible,
html[data-btn-style="pill"] a.submit-btn:focus-visible,
html[data-btn-style="pill"] a.btn-primary:focus-visible,
html[data-btn-style="pill"] a.btn-secondary:focus-visible,
html[data-btn-style="pill"] a.btn-danger:focus-visible,
html[data-btn-style="pill"] a.btn-outline:focus-visible,
html[data-btn-style="pill"] .modal-close-btn:focus-visible,
html[data-btn-style="pill"] .input-with-button button:focus-visible,
html[data-btn-style="pill"] .map-modal-actions button:focus-visible {
    outline: 2px solid #1f6b45 !important;
    outline-offset: 2px !important;
}

/* ── Style C variants — same flat treatment in their own palettes ── */
html[data-btn-style="pill"] .btn-danger,
html[data-btn-style="pill"] a.btn-danger {
    background: linear-gradient(135deg, #d63636 0%, #ffffff 100%) !important;
    color: #8f1d1d !important;
}
html[data-btn-style="pill"] .btn-secondary,
html[data-btn-style="pill"] a.btn-secondary {
    background: linear-gradient(135deg, #cfcfcf 0%, #ffffff 100%) !important;
    color: #3b3b3b !important;
}
html[data-btn-style="pill"] .btn-outline,
html[data-btn-style="pill"] a.btn-outline {
    background: transparent !important;
    color: #1f6b45 !important;
    box-shadow: 0 0 0 calc(2px * var(--kc)) rgba(31, 107, 69, 0.45) !important;
}
html[data-btn-style="pill"] .btn-outline:hover:not(:disabled),
html[data-btn-style="pill"] a.btn-outline:hover {
    background-color: rgba(62, 172, 118, 0.12) !important;
    color: #145335 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTON-THEME SWITCH (footer)
   A plain single-word link now — the active design's name (Dark / Light /
   Plain), cycling to the next on click. Built by button-theme.js and styled
   by the shared "Footer switches: two PLAIN single-word links" block above.
   Wording comes from theme.dark / theme.light / theme.plain, while the VALUES
   stay keycap | points | pill (never translate a value).
   ═══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   KEYCAP LABEL ALIGNMENT + THE "SEE DATES" LABEL (2026-10-01)
   The key face is inset asymmetrically (top 3 / left 4 / bottom 14 / right 12,
   all × --kc) to fake the thick front wall of a real key. A label centred in
   the BUTTON therefore sits low and left of the visible FACE, which reads as
   "out of place" on a long word. The two wide keys — the header logo and the
   dashboard's See Dates toggle — carry their content to the face's centre
   instead. The face centre is half the totalled gaps away from the button
   centre: (4−12)/2 = −4 and (3−14)/2 = −5.5, in px × --kc.
   ══════════════════════════════════════════════════════════ */
/* Two logo markups ship in this site: `<a>` wrapping BOTH the mark and the
   wordmark (index.html, style.html), and `<a>` wrapping only the mark with the
   wordmark as its SIBLING (the other 19 pages). A transform on the link moves
   the wordmark only in the first case, so the sibling wordmark gets the same
   nudge of its own. Either way the mark + wordmark shift by the same amount, so
   the logo sits identically on every page. (`>` cannot match in the wrapped
   variant, so nothing is nudged twice.) Plain has no key face to centre on, so
   it needs no nudge in any variant. */
/* (The header logo is no longer a themed key, so the face-centring nudge that
   used to shift the mark + wordmark onto the key face is gone.) */
html[data-btn-style="keycap"] .view-group-btn,
html[data-btn-style="points"] .view-group-btn {
    /* Raw text cannot be nudged with a transform, so padding does it: +8px on
       the right and +11px on the bottom move the centred label by 4 / 5.5. */
    padding: 14px calc(22px + 8px * var(--kc)) calc(14px + 11px * var(--kc)) 22px !important;
}
/* The dashboard's See Dates / Personal / Compare toggles take the theme colour:
   white ONLY in Dark, dark green in Light and Plain. */
html[data-btn-style="points"] .view-group-btn,
html[data-btn-style="pill"] .view-group-btn {
    color: #1f6b45 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER STRUCTURE
   Every page ships the footer flat, so button-theme.js folds it into
   `.footer-sentences` (the copyright plus the legal links row). The language
   switch and the theme picker are moved INTO that links row by the same
   function, as two more entries separated by the row's own `|`. They used to
   form a second `.footer-switches` column beside the copyright, which is what
   made them read as separate from the rest of the footer instead of part of
   it. A page where the script never runs keeps the plain stacked footer.
   ═══════════════════════════════════════════════════════════════════════ */
.footer-sentences {
    min-width: 0;
    /* `start`, not `end`: the copy reads left-to-right in English and
       right-to-left in Arabic. Logical, so it follows the direction on its
       own — no [dir="rtl"] twin needed. */
    text-align: start;
}

/* Inside the links row, match THAT row's type (0.82rem) rather than the 0.95rem
   the two controls carried when they stood on their own — otherwise they read
   as a different class of thing from the links beside them. The colour is
   already #007509 for all of them, which is what keeps the row uniform. */
.footer-legal #langToggle,
.footer-legal .btn-style-link {
    font-size: 0.82rem !important;
    line-height: 1.45;
    margin: 0;
}

/* ── Legal links row ──────────────────────────────────────────────────────
   Present in every page's footer markup, right after the copyright span, and
   moved into `.footer-sentences` by groupFooterSections().
   STYLED HERE ON PURPOSE, not in header-footer.css: index.html and
   dashboard.html do NOT link that sheet, so on the landing page the row had
   no rule reaching it at all and every link rendered in the browser's default
   link blue (rgb(0,0,238)). button-theme.css is the only sheet on all 25
   pages. Small print, single green: #007509.
   `font-size: 0` on the row is load-bearing: the links and separators are
   inline elements on separate source lines, so every HTML newline renders as a
   SPACE and the gaps came out roughly twice as wide as intended. Zeroing the
   row's font-size removes those whitespace gaps and lets the separator's own
   margin own the spacing; the children set their size back explicitly. */
.footer-legal {
    margin-top: 0.25rem;
    font-size: 0;
    line-height: 1.45;
    color: inherit;
}

.footer-legal a {
    font-size: 0.82rem;
    color: #007509 !important;
    text-decoration: none;
    font-weight: 600;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    text-decoration: underline;
}

/* A thin bar, set tight — the user replaced the `·` with a `|` because the
   dots read as too much space between the links. */
.footer-legal-sep {
    font-size: 0.82rem;
    margin: 0 0.3rem;
    color: #b3bcc2;
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING HEADER + FOOTER ON EVERY PAGE (2026-10-04)
   The landing page floats both bars over the hero photo and fades them in
   when the pointer reaches that edge of the screen. Every other page kept
   them in the document flow, so they scrolled away and never hid.
   `button-theme.js` → initSiteChrome() wraps them in this markup on every
   page EXCEPT the landing page (which builds its own, with hero-specific
   touch handling). Values are identical to index.html's copy: hidden =
   opacity 0 + a 14px nudge, revealed = opacity 1 + translateY(0), and
   `pointer-events: none` while hidden so an invisible bar never swallows
   clicks. A `pointer-events: none` element can never match `:hover`, which
   is why the reveal is driven from JS rather than CSS.
   ═══════════════════════════════════════════════════════════════════════ */
.site-chrome {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 900;                  /* below the modals/overlays (1000+) */
    opacity: 0;
    pointer-events: none;
    /* Opacity ramps LINEARLY. With `ease` the fade is ~83% done by the half-way
       mark and the last quarter of the time adds almost nothing visible, so the
       bar reads as "rises, then pops". Linear adds the same amount every frame,
       so the fade is smooth the whole way to 100%. The nudge keeps its `ease`. */
    transition: opacity 750ms linear, transform 750ms ease;
}
.site-chrome--top { top: 0; transform: translateY(-14px); }
.site-chrome--bottom { bottom: 0; transform: translateY(14px); }
.site-chrome.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* ── The bars take their own space while they are showing ───────────────
   They used to reserve NOTHING: the page kept its full height and the bars
   floated over it, so a revealed bar covered whatever sat at that edge.
   Instead the page makes room for a bar while it is visible, and gives the
   space back when it hides — the content is PUSHED rather than covered.

   `--chrome-top-h` / `--chrome-bottom-h` are the REAL bar heights, measured
   and published by button-theme.js (the footer grows once the theme picker is
   injected into it), so the reservation always matches the bar exactly.
   The transition uses the same 300ms feel as the fade, so the two read as one
   movement instead of the bar sliding over a page that is still moving. */
html {
    --chrome-reserve-top: 0px;
    --chrome-reserve-bottom: 0px;
}
html.chrome-top    { --chrome-reserve-top: var(--chrome-top-h, 0px); }
html.chrome-bottom { --chrome-reserve-bottom: var(--chrome-bottom-h, 0px); }

body {
    padding-top: var(--chrome-reserve-top);
    padding-bottom: var(--chrome-reserve-bottom);
    transition: padding-top 300ms ease, padding-bottom 300ms ease;
}
/* A bar that left the flow must not keep its own outer margins. */
.site-chrome--top > .header,
.site-chrome--bottom > footer {
    margin: 0 !important;
}