/* ============================================================================
   Ummah One — the member home (/ummah-one). Built Aug 26 2026, rulings r302-r305.
   Round 2: rebuilt against the two blind panel seats (QA 55, CD 70).

   PALETTE PROVENANCE — read this before adding a colour.
   The DAY scale below is taken directly from the estate token file
   (ummah.city/css/brand/tokens.css): cream, ink, stone, forest, forest-deep,
   gold-text, and prism-ummahpass. Those are canonical, unchanged.

   The NIGHT scale is NOT in tokens.css. It is DERIVED here, because the estate
   file defines exactly one night surface — void #060B18 — and reserves it for
   ummah.city ("do NOT use on consumer products"), while r303 requires a night
   theme on this property. Every derived value is listed with the contrast it
   was chosen to hit, measured against the surface it sits on. An earlier
   revision of this file claimed "EVERY colour here is an estate token", which
   was false and was caught in review; promoting these into tokens.css as a
   named PRISM-UmmahPass night ramp is carded, and until that lands this comment
   is the honest description of where they come from.

   TYPE (r298): Outfit 800 on the display line, self-hosted, real 800 weight
   (public/fonts/outfit-latin-800-normal.woff2 — not a synthesised bold).
   Amiri appears only on Arabic text, never on an English @handle.
   ========================================================================= */

/* Tokens live on :root, not on .mh — the member-card dialog renders outside the
   .mh subtree (it is appended at body level so the scrim can cover the page),
   and when these were scoped to .mh that dialog inherited none of them and
   painted black-on-transparent. Scoping a design system to one subtree breaks
   the moment any part of it teleports out. */
:root {
    --mh-bg:        #FAF8F3;  /* tokens.css --cream */
    --mh-surface:   #FFFFFF;
    --mh-ink:       #0F1F17;  /* tokens.css --ink */
    --mh-muted:     #4A5C52;  /* derived: ink lightened; 7.3:1 on cream */
    --mh-line:      #EAE6DF;  /* tokens.css --stone — decorative dividers only */
    /* Interactive boundaries need 3:1 to count as a UI component (stone is 1.24:1 on white,
       which made the quiet button's outline effectively invisible). Dividers between ledger
       rows are decoration and keep --mh-line; anything a person can press uses this. */
    --mh-line-strong: #949081;  /* 3.20:1 on white, 3.01:1 on cream */
    --mh-accent:    #1B5FA8;  /* tokens.css --prism-ummahpass */
    --mh-accent-sf: rgba(27, 95, 168, 0.08);
    --mh-cta:       #166534;  /* tokens.css --forest */
    --mh-cta-hover: #0F4A26;  /* tokens.css --forest-deep */
    --mh-cta-ink:   #FFFFFF;  /* 5.9:1 on forest */
    --mh-gold:      #96631A;  /* tokens.css --gold-text */
    --mh-shadow:    0 2px 6px rgba(15, 31, 23, 0.08), 0 1px 2px rgba(15, 31, 23, 0.05);
    --mh-radius:    12px;     /* tokens.css --radius-lg */
    --mh-radius-sm: 8px;      /* tokens.css --radius-md */
}

/* NIGHT — derived ramp, each value with the contrast it was chosen for.
   The CTA deliberately stays in the FOREST hue family rather than becoming
   sapphire: a review flagged that swapping the primary action to the same hue
   as the address text made one button read as two different brand colours
   across themes. Forest #166534 measures 2.17:1 on the night surface and fails
   the 3:1 UI floor, so the night CTA is a lighter forest that clears it. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="day"]) {
        --mh-bg:        #0F1F17;  /* tokens.css --ink, used as a surface */
        --mh-surface:   #16281F;  /* derived: ink lifted one step */
        --mh-ink:       #F2F5F3;  /* 12.4:1 on surface */
        --mh-muted:     #A8B8AE;  /* 5.8:1 on surface */
        --mh-line:      #24382D;
    --mh-line-strong: #587A68;  /* 3.24:1 on the night surface */  /* derived: ink lifted two steps */
        --mh-accent:    #7FB2E8;  /* prism-ummahpass lifted; 6.9:1 on surface */
        --mh-accent-sf: rgba(127, 178, 232, 0.12);
        --mh-cta:       #2EA55C;  /* forest lifted; 4.9:1 on surface */
        --mh-cta-hover: #35B869;  /* 6.1:1 on surface */
        --mh-cta-ink:   #0F1F17;  /* 5.4:1 on the CTA */
        --mh-gold:      #DFA032;  /* tokens.css --gold-bright */
        --mh-shadow:    0 2px 8px rgba(0, 0, 0, 0.35);
    }
}

:root[data-theme="night"] {
    --mh-bg:        #0F1F17;
    --mh-surface:   #16281F;
    --mh-ink:       #F2F5F3;
    --mh-muted:     #A8B8AE;
    --mh-line:      #24382D;
    --mh-line-strong: #587A68;  /* 3.24:1 on the night surface */
    --mh-accent:    #7FB2E8;
    --mh-accent-sf: rgba(127, 178, 232, 0.12);
    --mh-cta:       #2EA55C;
    --mh-cta-hover: #35B869;
    --mh-cta-ink:   #0F1F17;
    --mh-gold:      #DFA032;
    --mh-shadow:    0 2px 8px rgba(0, 0, 0, 0.35);
}

.mh {
    background: var(--mh-bg);
    color: var(--mh-ink);
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* ---- Shell ------------------------------------------------------------- */
/* One column, one left edge. A 720/1080 split was tried and left the card
   starting 160px inside the sections beneath it — that reads as sloppy, not as
   hierarchy. The 4-across door grid is what keeps a laptop from looking like a
   phone layout blown up. */
.mh-wrap { max-width: 880px; margin: 0 auto; padding: 24px 20px 64px; }

/* ---- The Address Card: the one memorable object on the page ------------- */
.mh-card {
    position: relative;
    background: var(--mh-surface);
    border: 1px solid var(--mh-line);
    border-left: 3px solid var(--mh-accent);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-shadow);
    padding: 28px 28px 24px;
    overflow: hidden;
}

/* The eight-point khatim, the estate's own motif (brand-system/star.svg, the
   same mark the membership card and /pricing use). It makes this card belong to
   THIS product rather than being a generic account panel with a coloured edge —
   which is what a reviewer correctly called the first version. Watermark
   opacity matches the estate's --star-watermark-opacity. */
/* Sits fully inside the card. An earlier revision hung it off the top-right corner, where
   `overflow: hidden` sliced it through two points and it read as a rendering artefact rather
   than a watermark — a clipped motif has to be clipped along a line that looks deliberate, or
   not clipped at all. */
.mh-card::after {
    content: '';
    position: absolute; top: 20px; right: 22px; width: 104px; height: 104px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon fill='none' stroke='%231B5FA8' stroke-width='3' points='194,100 162,126 167,167 126,162 100,194 74,162 33,167 38,126 6,100 38,74 33,33 74,38 100,6 126,38 167,33 162,74'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
    opacity: 0.10; pointer-events: none;
}
@media (max-width: 640px) { .mh-card::after { width: 76px; height: 76px; top: 16px; right: 16px; } }

.mh-state {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mh-accent); background: var(--mh-accent-sf);
    border-radius: 999px; padding: 5px 11px; margin-bottom: 14px;
    position: relative;
}

/* The handle IS the headline. Outfit 800 (r298). */
.mh-handle {
    position: relative;
    font-size: clamp(32px, 6vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 8px;
    color: var(--mh-ink);
    text-wrap: balance;
    overflow-wrap: break-word;   /* breaks only when a word genuinely cannot fit */
}
/* The clamp floors at 32px, and 6vw stops raising it below ~533px — so at 320px a 13-character
   handle did not fit the card's ~224px of content width and broke to leave a single orphaned
   letter under the headline. No overflow (break-word did its job), but a signature element that
   does not survive its own narrowest supported width is not finished. The modal's copy of the
   headline follows the same rule instead of hardcoding a size. */
@media (max-width: 380px) {
    .mh-handle, .mh-modal-scrim .mh-handle { font-size: clamp(22px, 7.4vw, 30px); }
}

.mh-address {
    position: relative;
    font-size: 18px; font-weight: 600; color: var(--mh-accent);
    margin: 0 0 6px; overflow-wrap: break-word;
}

/* The Hijri stamp. NOT Amiri: IntlDateFormatter with an en_US locale emits a Latin
   TRANSLITERATION ("22 Dhu'l-Hijjah 1447 AH"), so there is not one Arabic glyph on this line
   — dressing an English date sentence in the sacred face is costume, and r298 reserves Amiri
   for Arabic. It carries the estate's "(estimate)" label because the islamic-civil calendar is
   an arithmetic approximation. Amiri returns here the day this line renders Arabic script. */
.mh-hijri { position: relative; font-size: 15px; color: var(--mh-muted); margin: 0; }

.mh-detail { position: relative; font-size: 15px; color: var(--mh-muted); margin: 12px 0 0; text-wrap: balance; }

/* ---- Buttons ----------------------------------------------------------- */
.mh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 11px 20px;
    border-radius: var(--mh-radius-sm);
    font-size: 15px; font-weight: 600; text-decoration: none;
    background: var(--mh-cta); color: var(--mh-cta-ink); border: 1px solid transparent;
    transition: background 200ms ease;
    cursor: pointer; position: relative; text-wrap: balance;
}
.mh-btn:hover { background: var(--mh-cta-hover); }

.mh-btn--quiet {
    background: transparent; color: var(--mh-ink); border-color: var(--mh-line-strong);
}
.mh-btn--quiet:hover { background: var(--mh-line); }

.mh-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; position: relative; }

/* ---- Next step --------------------------------------------------------- */
.mh-next {
    margin-top: 16px; padding: 20px 24px;
    background: var(--mh-surface);
    border: 1px solid var(--mh-line);
    border-radius: var(--mh-radius);
}
.mh-next-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mh-muted); margin: 0 0 8px;
}
.mh-next-why  { font-size: 18px; color: var(--mh-ink); margin: 0 0 4px; text-wrap: balance; }
.mh-next-note { font-size: 14px; color: var(--mh-muted); margin: 6px 0 0; }

/* ---- Sections ---------------------------------------------------------- */
.mh-section { margin-top: 40px; }
.mh-h2 {
    font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--mh-muted); margin: 0 0 14px;
}

/* ---- Doors ------------------------------------------------------------- */
/* minmax(0, 1fr), NOT 1fr. A bare `1fr` is `minmax(auto, 1fr)`, and `auto` floors at the
   track's min-content width — so below about 375px these tracks refused to shrink and pushed
   the whole document wider than the viewport (a 320px screen got a 374px document: WCAG 1.4.10
   reflow, failed). The links still worked; the page just demanded a sideways scroll. 360px is
   an ordinary Android width, not an exotic one. */
.mh-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .mh-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Under ~380px two columns leave each door about 140px — enough to overflow a word like
   "UmmahPlaces" onto its own cramped line. One column reads better than two squeezed ones. */
@media (max-width: 380px) { .mh-doors { grid-template-columns: minmax(0, 1fr); } }

.mh-door {
    display: block; min-height: 44px; padding: 16px;
    background: var(--mh-surface); border: 1px solid var(--mh-line);
    border-radius: var(--mh-radius-sm); text-decoration: none; color: var(--mh-ink);
    transition: border-color 200ms ease;
}
.mh-door:hover { border-color: var(--mh-accent); }
.mh-door-label { font-size: 17px; font-weight: 600; margin: 0 0 3px; }
/* `overflow-wrap: break-word` breaks a long token only as a last resort, unlike
   `word-break: break-word`, which split a member's own handle mid-character one
   screen below the 52px headline showing that same handle. */
/* text-wrap: balance so a two-word sub does not orphan its last word on a line of its own —
   "Included with Ummah / One", "Video calls, owned not / Meta" at 390px. */
.mh-door-sub   { font-size: 14px; color: var(--mh-muted); margin: 0; overflow-wrap: break-word; text-wrap: balance; }
.mh-door--shut .mh-door-label { color: var(--mh-muted); }

/* ---- Ledger rows ------------------------------------------------------- */
.mh-rows { border: 1px solid var(--mh-line); border-radius: var(--mh-radius); overflow: hidden; background: var(--mh-surface); }
.mh-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; border-bottom: 1px solid var(--mh-line);
}
.mh-row:last-child { border-bottom: 0; }
.mh-row-label { font-size: 16px; color: var(--mh-ink); margin: 0; }
.mh-row-sub   { font-size: 14px; color: var(--mh-muted); margin: 2px 0 0; }
.mh-row-value { font-size: 18px; font-weight: 700; color: var(--mh-ink); font-variant-numeric: tabular-nums; margin: 0; }

/* ---- Empty states ------------------------------------------------------ */
.mh-empty { padding: 28px 20px; text-align: center; }
.mh-empty-line { font-size: 16px; color: var(--mh-ink); margin: 0 0 4px; }
.mh-empty-sub  { font-size: 14px; color: var(--mh-muted); margin: 0 0 14px; text-wrap: balance; }

/* ---- The member-card dialog -------------------------------------------- */
/* display lives in the CLASS, never inline: Alpine's x-show restores an element
   to `style.display = ''` when it shows, which throws away an inline flex and
   left this dialog pinned to the top-left corner. */
.mh-modal-scrim {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(15, 31, 23, 0.62);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    /* Text colour has to be set here too. `.mh` carries it for the page, and this dialog is
       outside that subtree, so it was inheriting plain black from <body> — invisible against
       the night surface once the rest was themed. */
    color: var(--mh-ink);
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}
.mh-modal-scrim[x-cloak] { display: none !important; }

/* ---- Focus ------------------------------------------------------------- */
/* Not scoped to .mh — the dialog lives outside it and was left with no visible
   focus ring. */
.mh a:focus-visible, .mh button:focus-visible,
.mh-modal-scrim a:focus-visible, .mh-modal-scrim button:focus-visible {
    outline: 3px solid var(--mh-accent); outline-offset: 2px; border-radius: 4px;
}

/* ---- Chrome parity ------------------------------------------------------
   The nav and footer are Tailwind `bg-white/90` and `bg-white/50` with no dark
   variants, so at night the page painted an ink body between a white bar and a
   white footer. Scoped with :has() to pages carrying this stylesheet, which is
   exactly the converted set; a browser without :has() keeps light chrome around
   themed content — degraded, not broken. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="day"]) body:has(.mh) { background: #0F1F17; }
    :root:not([data-theme="day"]) body:has(.mh) nav#main-nav,
    :root:not([data-theme="day"]) body:has(.mh) > div > footer {
        background: #16281F !important;
        border-color: #24382D !important;
    }
    /* :not(.text-gold) matters. A bare `nav#main-nav span` repainted EVERY span in the bar,
       including the gold "One" of the wordmark — so the one piece of logo identity on the page
       went monotone white at night while reading correctly by day. Scope the repaint, then give
       the wordmark the night gold explicitly. */
    :root:not([data-theme="day"]) body:has(.mh) nav#main-nav a,
    :root:not([data-theme="day"]) body:has(.mh) nav#main-nav span:not(.text-gold),
    :root:not([data-theme="day"]) body:has(.mh) > div > footer a { color: #F2F5F3; }
    :root:not([data-theme="day"]) body:has(.mh) nav#main-nav .text-gold { color: #DFA032; }
    :root:not([data-theme="day"]) body:has(.mh) > div > footer p { color: #A8B8AE !important; }
}

:root[data-theme="night"] body:has(.mh) { background: #0F1F17; }
:root[data-theme="night"] body:has(.mh) nav#main-nav,
:root[data-theme="night"] body:has(.mh) > div > footer {
    background: #16281F !important;
    border-color: #24382D !important;
}
:root[data-theme="night"] body:has(.mh) nav#main-nav a,
:root[data-theme="night"] body:has(.mh) nav#main-nav span:not(.text-gold),
:root[data-theme="night"] body:has(.mh) > div > footer a { color: #F2F5F3; }
:root[data-theme="night"] body:has(.mh) nav#main-nav .text-gold { color: #DFA032; }

/* ---- Motion: one moment, and it is optional ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .mh-card { animation: mh-settle 300ms ease-out both; }
    @keyframes mh-settle {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .mh *, .mh-modal-scrim * { animation: none !important; transition: none !important; }
}

/* ---- Screen-reader only ------------------------------------------------ */
.mh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* The dialog's own card must not inherit page text colour from outside .mh. */
.mh-modal-scrim .mh-card { color: var(--mh-ink); }

/* Door icons — line marks so eight tiles are scannable by shape, not only by
   reading eight near-identical text blocks. They inherit currentColor, so they
   theme with everything else and dim with a shut door's label. */
.mh-door-icon { width: 20px; height: 20px; display: block; margin-bottom: 10px; color: var(--mh-accent); }
.mh-door--shut .mh-door-icon { color: var(--mh-muted); }

/* The address is a copy button, not a decorative link-alike. Keeps the sapphire weight it
   already had, adds the affordance that weight was promising. */
.mh-address--copy {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: 0; padding: 4px 0; margin: 0 0 6px;
    font: inherit; font-size: 18px; font-weight: 600; color: var(--mh-accent);
    cursor: pointer; text-align: left; min-height: 44px;
}
.mh-address-hint {
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mh-muted); border: 1px solid var(--mh-line-strong);
    border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.mh-address--copy:hover .mh-address-hint { color: var(--mh-ink); border-color: var(--mh-accent); }

/* The dialog's copy of the headline: one step down from the page's, and it inherits the
   narrow-width rule above rather than carrying an inline size of its own. */
.mh-handle--card { font-size: clamp(26px, 5vw, 32px); }

/* Background scroll lock while the dialog is open. The scrim already covers the viewport and
   intercepts every click, so the page behind was unreachable - but it still SCROLLED under a
   62%-opaque scrim, which reads as the page having come loose. Set by the dialog's Alpine
   state, so it cannot be left on if the dialog closes by any route. */
html:has(body.mh-modal-open), body.mh-modal-open { overflow: hidden; }
/* `overflow: hidden` on <body> alone does not stop the page: the scrolling element here is
   <html>, so the lock has to reach it. Verified by scrolling with the dialog open. */