/* ==========================================================================
   THE PRACTICE CARD (Oct 5 2026, card fiO3jPPv).

   The professional page on ummah.directory, redesigned to the surface brief's
   counter board: the arch nameplate first, then the source's words with the
   arch and the khatam set into them and the page's one provenance statement
   beside them, then the reach ledger. Plain CSS, NOT in the Vite build.

   EVERY RULE IS SCOPED TO `.ud-entry`, the class a person's PUBLIC page carries.
   The ready page (the private preview a professional is sent) does not carry
   it, so this file leaves that page exactly as it was. This file never touches
   layouts/app.blade.php, resources/css/app.css or public/css/directory.css.

   It loads AFTER directory.css (directory.css is linked by the layout on the
   directory host and by partials/head on the old host; this file is linked at
   the end of partials/head), so same-specificity rules here win.

   Colours, radii, shadows and type sizes are the directory.css tokens only
   (`var(--ud-*)`). No new colour and no new shape: the arch comes from
   `--ud-arch-mask` and the star from `--ud-glyph`, the two figures the
   generator already writes. No em dashes anywhere.
   ========================================================================== */

/* ---- Where the provenance went (Oct 5 2026, card fiO3jPPv) ----------------
   A strip under the nameplate was built here first and then REMOVED. With the
   words block's own attribution line and the claim panel's line, it made the
   desktop first screen state the same provenance three times; Tab ruled it to
   one. The page now states where it came from, that it is not claimed and that
   we have not checked it ONCE, in the source's-words block, beside the words,
   in the markup. No rules live here for it. */

/* Browser surfaces belong to the page too: text selection is drawn in the
   site's own colours rather than the platform default. */
.ud-entry ::selection {
    background: var(--ud-forest-tint);
    color: var(--ud-forest-deep);
}

/* ---- THE COLOPHON (Tab's ruling, Oct 5 2026): the page's ONE provenance
   record, 8px under the words and in the same section. It replaced the
   attribution line that sat inside the words block and the fine print that said
   the same things at the foot of the column, so the page states where it came
   from, on what basis, when it was added, that we have not checked it and that
   it is not a licence, ONCE.
   The caveat line is FIRST, so a reader meets it before the attribution: the
   caveat travels with the claim. */
.ud-entry .ud-colophon {
    /* The record hugs the words: its first line is the caveat, and Tab's ruling
       (item 2) puts it within 24px of the quote at both widths. Measured from
       the words' box to the caveat: 4px, versus the 129px it was before. */
    margin: 0;
    padding: 3px 0 0;
    border-top: 1px solid var(--ud-brass-edge);
    max-width: 640px;
}

.ud-entry .ud-colophon__line,
.ud-entry .ud-colophon__note {
    margin: 0;
    font-size: var(--ud-t-s);
    line-height: 1.5;
    color: var(--ud-ink-2);
}

.ud-entry .ud-colophon__line + .ud-colophon__line,
.ud-entry .ud-colophon__note + .ud-colophon__line {
    margin-top: 3px;
}

.ud-entry .ud-colophon__check {
    color: var(--ud-ink);
}

.ud-entry .ud-colophon__check strong {
    font-weight: var(--ud-w-strong);
}

/* ---- The source's words: the arch mark, and no coloured left border ----
   The craft floor bans a coloured left border above 1px on a callout, and the
   old quote wore a 3px brass one on a wash card. The words now sit in a
   hairline panel with a brass hairline along its top edge, and the panel's
   mark is the arch every portrait sits in (the same `--ud-arch-mask` token),
   with the one khatam figure set inside it. The words fill the column. */
.ud-entry .ud-whyhere,
.ud-entry .ud-quote {
    position: relative;
    margin: 12px 0 0;
    padding: 20px 22px 18px 74px;
    max-width: 640px;
    background: var(--ud-card);
    border: 1px solid var(--ud-line);
    border-top-color: var(--ud-brass-edge);
    border-left-width: 1px;
    border-radius: var(--ud-r-s);
}

/* The arch, drawn as a FILL. A masked BORDER cannot draw this shape: a border
   paints only on the box's four straight edges, so clipping it to the arch
   removes the curved, pointed top and leaves an open square (two blind seats
   and a zoom crop caught that, Oct 5 2026). A masked brass fill renders the
   arch, and the khatam is set into it in the panel's own ground, so the mark is
   the portrait's arch with the one figure inside it. */
.ud-entry .ud-whyhere::before,
.ud-entry .ud-quote::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 20px;
    width: 30px;
    height: 40px;
    background-color: var(--ud-brass-edge);
    -webkit-mask-image: var(--ud-arch-mask);
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--ud-arch-mask);
    mask-position: center;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

/* The khatam, cut into the arch in the panel's own ground: the figure, from the
   one glyph token, never a second motif. */
.ud-entry .ud-whyhere::after,
.ud-entry .ud-quote::after {
    content: '';
    position: absolute;
    left: 29px;
    top: 44px;
    width: 12px;
    height: 12px;
    background-color: var(--ud-card);
    -webkit-mask-image: var(--ud-glyph);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--ud-glyph);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}

/* The label over the words, on the panel's own brass hairline: small capitals,
   the page's provenance voice. */
.ud-entry .ud-whyhere__label {
    font-size: var(--ud-t-xs);
    letter-spacing: var(--ud-track-caps);
    text-transform: uppercase;
    color: var(--ud-brass-ink);
}

/* ---- The rhythm between the nameplate block and the card ----
   The strip carries the separation now, so the grid opens closer to it: a
   tighter gap here is what keeps the source's words inside a phone's first
   screen without hiding the honest strip below the fold. */
.ud-entry .ud-entry__grid {
    margin-top: 20px;
}

@media (min-width: 900px) {
    .ud-entry .ud-entry__grid:not(.ud-entry__grid--stack) {
        margin-top: 24px;
    }

    /* The section headings step back one size so the source's words lead the
       page: the quote is the largest text after the name (Tab's ruling). */
    .ud-entry .ud-h2,
    .ud-entry .ud-h3 {
        font-size: 24px;
    }

    .ud-entry .ud-whyhere__lead,
    .ud-entry .ud-quote p {
        font-size: 26px;
        line-height: 1.28;
    }
}

/* ---- The section rules: the khatam, then a hairline to the edge ----
   Every heading on the page opens with the figure at its glyph scale and is
   closed by a rule that runs to the column's edge, so the page reads as one
   ruled card instead of stacked blocks. The mark and the rule ride the FIRST
   line, not the box: a two-line heading with a mark floating at its middle
   reads as a stray bullet (a 1440 read of this surface, Oct 5 2026). No gap on
   the container: the text run keeps its own spacing, so a heading that ends in
   a name span does not get an invented space before it. */
.ud-entry .ud-h2,
.ud-entry .ud-h3 {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.ud-entry .ud-h2::before,
.ud-entry .ud-h3::before {
    content: '';
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    margin-top: 0.30em;
    background-color: var(--ud-brass-edge);
    -webkit-mask-image: var(--ud-glyph);
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--ud-glyph);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
}

.ud-entry .ud-h2::after,
.ud-entry .ud-h3::after {
    content: '';
    flex: 1 1 auto;
    min-width: 16px;
    height: 1px;
    margin-left: 14px;
    margin-top: 0.62em;
    /* A touch stronger than the ledger's hairline: a 1440 read of this surface
       found the rules too faint to anchor a section (Oct 5 2026). */
    background: var(--ud-line-strong);
}

/* A flex row DISCARDS the whitespace between a bare text run and an element:
   a heading written as `As written on <span>host</span>` renders as
   "onhost" once the heading is a flex container. The heading's own words are
   wrapped in one item so the space survives (two blind seats caught this). */
.ud-entry .ud-h2__ink {
    min-width: 0;
}

/* On a phone the first and last headings sit at the page's own edges and the
   rule would read as a stray dash; the mark stays, the rule waits for room.
   The card also opens sooner here, so more of the source's words clears the
   sticky action bar: the bar itself now steps aside over those words. */
@media (max-width: 559px) {
    .ud-entry .ud-h2::after,
    .ud-entry .ud-h3::after {
        display: none;
    }

    /* A heading that names its source carries a host as long as
       "physiciansofsoutherncalifornia.com". At 22px it needed three lines on a
       phone, and the third was a two-letter stump. At 18px the host holds one
       line under "As written on", the heading takes two lines, and the words it
       introduces come into the first screen with 27px to spare. */
    .ud-entry .ud-h2 {
        font-size: var(--ud-t-l);
    }

    .ud-entry .ud-entry__grid {
        margin-top: 12px;
    }
}

/* ---- THE PHONE NAMEPLATE IS THE SAME CARD, BESIDE ITSELF (Oct 5 2026) ----
   Measured at 390 on the test page (dr-asim-rizvi-md-glendora-california): the
   nameplate took 338px of the 724px first screen and the source's own words
   did not begin until y=715, so the entire first screen was furniture. The
   plate now uses the arrangement directory.css already uses from 720px up (the
   arch, and the words in one block beside it), with the arch at 104px. Nothing
   is hidden: the role, the place, the name, the practice and the engraved
   brass rule all stay, and the lattice field is already held back below 1000px
   by directory.css, so no figure is drawn under a word at phone width. */
@media (max-width: 719px) {
    .ud-entry .ud-plate {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 18px 18px;
    }

    .ud-entry .ud-plate__text {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
    }

    .ud-entry .ud-plate .ud-arch--plate {
        width: 96px;
    }

    .ud-entry .ud-plate__kicker {
        margin: 0 0 6px;
        line-height: 1.5;
    }

    .ud-entry .ud-plate__name {
        margin-top: 0;
        font-size: 28px;
    }

    .ud-entry .ud-plate__practice {
        margin: 8px 0 0;
    }

    /* The visitor's own action comes INTO the first screen (Tab's ruling, Oct 5
       2026): on a phone it sat 490px below the fold while the owner's line sat
       above it. The nameplate carries it here, and the sticky bar yields while
       it is on screen, so one green button for one action shows at a time. */
    .ud-entry .ud-plate__go {
        display: block;
        margin: 12px 0 0;
    }

    .ud-entry .ud-plate__go .ud-btn {
        width: 100%;
        justify-content: center;
    }

    /* The photo credit sits tight under the plate on a phone: it is a
       provenance line, not a paragraph, and the 10px the wide rule gives it
       is most of the gap the honesty line needed. */
    .ud-entry .ud-credit {
        margin-top: 6px;
    }
}

/* The role is the brass tracked label; the place is a quieter line in its own
   case. They shared one uppercase treatment, so the eye met two labels of
   equal weight and could not tell the profession from the town. */
.ud-entry .ud-plate__place {
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ud-plate-ink);
    opacity: 0.82;
}

/* A source host longer than the column used to widen the whole page: the host
   is a keep-together span, 388px wide in a 358px column, and it pushed the
   test page 35px past the viewport at 390. THE FIX LIVES IN directory.css (a
   companion commit, `acd3cc8`, scoped to .ud-h2 .ud-keep); this file does not
   carry a second copy of it. What stays here is the size that keeps the host on
   ONE line: the phone heading runs at --ud-t-l, so a 33-character host no
   longer breaks into a three-line heading with a two-letter stump. */

/* ---- The crisis line, tightened, never shortened (Oct 5 2026) ----
   On this surface the safety line is 94px of a phone's first screen. Its copy
   and its 44px link targets are pinned (r674 and the QA read), so only the
   presentation moves: 2px less padding, a 1.45 line-height. It stays high,
   directly under the plate, where a person in crisis meets it without
   scrolling past anything. */
.ud-entry .ud-notice {
    padding: 8px 12px;
    line-height: 1.42;
}

/* ---- THE WORDS ARE THE DISPLAY MOMENT (Tab's ruling, Oct 5 2026) ----
   The source's sentence is the reason the page exists, and it was set at body
   size under a heading that led with a domain name. It is now the largest text
   after the name, in the display face, with the source demoted to the colophon.
   The measure stays capped so a line never passes 75 characters: at 26px in a
   640px column a line is about 46. */
.ud-entry .ud-whyhere__lead,
.ud-entry .ud-quote p {
    font-family: var(--ud-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    color: var(--ud-ink);
    max-width: 640px;
    /* The caveat is the next thing under this line (Tab's ruling, item 2), so
       the quote carries no bottom margin of its own. */
    margin-bottom: 0;
}

/* On a wide screen the words grow, so the sentence still ends the line quickly
   without passing 75 characters. Declared HERE, after the base rule, so it is
   not overridden by it. */
@media (min-width: 900px) {
    .ud-entry .ud-whyhere__lead,
    .ud-entry .ud-quote p {
        font-size: 26px;
        line-height: 1.28;
    }
}

/* ---- WHAT WE KNOW AND WHAT WE DO NOT KNOW (Tab's ruling, Oct 5 2026) ----
   A record of the PAGE, not of the person: what it holds and what it does not
   hold, each absence stated rather than left as a gap. No line says or implies
   that we checked anyone. */
.ud-entry .ud-known {
    margin: 0;
    max-width: 640px;
}

.ud-entry .ud-known dt {
    margin: 12px 0 0;
    font-size: var(--ud-t-xs);
    font-weight: var(--ud-w-strong);
    letter-spacing: var(--ud-track-caps);
    text-transform: uppercase;
    color: var(--ud-brass-ink);
}

.ud-entry .ud-known dt:first-child {
    margin-top: 0;
}

.ud-entry .ud-known dd {
    margin: 3px 0 0;
    font-size: var(--ud-t-s);
    line-height: 1.5;
    color: var(--ud-ink);
}

.ud-entry .ud-known__close {
    margin: 16px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--ud-line);
    font-size: var(--ud-t-xs);
    line-height: 1.5;
    color: var(--ud-ink-2);
}

/* ---- The panels of the board ----
   Each section of the main column opens on the same 1px hairline the ledger
   rows use, so the page reads as the board's ruled panels instead of stacked
   blocks. */
.ud-entry .ud-entry__main > section + section {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--ud-line-strong);
}

/* On a phone the words block was padded for a wide column: 74px of left
   padding for a 30px mark on a 358px column left the words 262px wide. */
@media (max-width: 559px) {
    .ud-entry .ud-whyhere,
    .ud-entry .ud-quote {
        padding: 16px 16px 14px 60px;
    }

    .ud-entry .ud-whyhere::before,
    .ud-entry .ud-quote::before {
        left: 16px;
        top: 16px;
        width: 26px;
        height: 34px;
    }

    .ud-entry .ud-whyhere::after,
    .ud-entry .ud-quote::after {
        left: 24px;
        top: 37px;
        width: 10px;
        height: 10px;
    }
}

@media print {
    .ud-entry .ud-whyhere::before,
    .ud-entry .ud-whyhere::after,
    .ud-entry .ud-quote::before,
    .ud-entry .ud-quote::after,
    .ud-entry .ud-h2::before,
    .ud-entry .ud-h2::after,
    .ud-entry .ud-h3::before,
    .ud-entry .ud-h3::after {
        display: none;
    }
}