/*
 * Ummah Directory (r1233, r1237, r1240; Oct 2 2026).
 *
 * The styles for the professionals directory on its own host: the header and
 * footer, the directory pages, a professional's own page, a ready page, the
 * claim steps, the privacy and terms pages.
 *
 * THE LOOK (r1240): editorial calm, one rich moment. Ivory, forest and
 * brass. Quiet, generous space, portraits in an arch, fine type. ONE
 * ornament on the whole site: the window of khatam stars that draws itself
 * once behind the home headline. Nothing else is decorated.
 *
 * THREE THINGS THAT ARE THIS SITE'S OWN:
 *   the arch      every portrait, and the placeholder, sit in the same arch
 *   the ledger    dotted leaders, for professions and for a person's facts
 *   the nameplate a professional's page opens with his name on a door plate
 *
 * This file is plain CSS and is NOT part of the Vite build. Every class
 * starts with `ud-`. These rules are unlayered, so they win over the layered
 * Tailwind base; that is deliberate.
 */

/* ── Fonts (r1717, r1832; Oct 10 2026): two families from Bunny, named here
   so the directory host needs no other font request.
   Literata 400, 400 italic and 600 (names, headings, our summary): the
   estate's editorial face since r1717, replacing Fraunces.
   Atkinson Hyperlegible Next 400 and 600 (every control, label and note):
   drawn by the Braille Institute for legibility; it replaces Outfit, which
   DESIGN-STANDARD 1b names as an AI-default face. Both are SIL OFL (the
   licence URL in each file's name table, read Oct 10 2026).
   The two FALLBACK faces are metric-matched with fonttools against
   Liberation Serif and Liberation Sans (Times New Roman and Arial metrics),
   so the swap does not move the page (DESIGN-STANDARD defect 10). ── */
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.bunny.net/literata/files/literata-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.bunny.net/atkinson-hyperlegible-next/files/atkinson-hyperlegible-next-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.bunny.net/atkinson-hyperlegible-next/files/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.bunny.net/atkinson-hyperlegible-next/files/atkinson-hyperlegible-next-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.bunny.net/atkinson-hyperlegible-next/files/atkinson-hyperlegible-next-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Literata Fallback';font-style:normal;font-weight:400;src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif');size-adjust:119.4%;ascent-override:98.6%;descent-override:25.8%;line-gap-override:0%}
@font-face{font-family:'Literata Fallback';font-style:normal;font-weight:600;src:local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT'),local('Liberation Serif Bold');size-adjust:116.8%;ascent-override:100.7%;descent-override:26.4%;line-gap-override:0%}
@font-face{font-family:'Atkinson Fallback';font-style:normal;font-weight:400 600;src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:100%;ascent-override:98.4%;descent-override:31.6%;line-gap-override:0%}

/*
 * TOKENS. Every colour, type size, weight, radius and shadow this site uses
 * is a custom property on [data-ud-theme]. A second theme re-values them in
 * its own stylesheet (public/css/ud-theme-modern.css, loaded after this one)
 * and may restyle any component by its class. Blade never holds a colour.
 *
 * Type scale: six sizes. On a phone 12.5, 14, 16, 18, 22, 32 px. From 720px
 * the two largest become 28 and 48 px.
 */
:root,
[data-ud-theme] {
    /* ground and ink */
    --ud-paper: #fbfaf6;
    --ud-card: #ffffff;
    --ud-wash: #f3efe3;
    --ud-ink: #1c1b18;
    --ud-ink-2: #4a453b;
    --ud-ink-3: #5f594d;
    /* lines */
    --ud-line: #e3ddce;
    --ud-line-strong: #cfc7b3;
    /* The edge of a control (field, chip, pager, outline button): 3:1 or more on every ground. */
    --ud-edge: #8a8370;
    /* forest: the action colour */
    --ud-forest: #166534;
    --ud-forest-deep: #0f4a26;
    --ud-forest-tint: #eef5ef;
    --ud-forest-line: #9ec3a8;
    --ud-on-action: #ffffff;
    /* the nameplate */
    --ud-plate: #0e3b21;
    --ud-plate-ink: #f7f1e3;
    --ud-plate-well: #174a2c;
    /* brass: an accent only. Lines, keylines and small capitals. Never a button. */
    --ud-brass: #c8912e;
    --ud-brass-light: #e6bf74;
    --ud-brass-ink: #74500f;
    --ud-brass-edge: #a37a1f;
    /* notices */
    --ud-warn-ground: #fdf3e0;
    --ud-warn-line: #e8c680;
    --ud-warn-ink: #6b4100;
    --ud-danger: #9f1d1d;
    --ud-danger-tint: #fbf0f0;
    /* the mark */
    --ud-mark-ground: var(--ud-plate);
    --ud-mark-star: var(--ud-plate-ink);
    /* type */
    --ud-display: 'Literata', 'Literata Fallback', Georgia, serif;
    --ud-sans: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* r1832: six steps at each width. Phone 13 15 16 18 24 34; from 720px the
       two largest become 30 and 52. */
    --ud-t-xs: 13px;
    --ud-t-s: 15px;
    --ud-t-m: 16px;
    --ud-t-l: 18px;
    --ud-t-xl: 24px;
    --ud-t-d: 34px;
    --ud-w-display: 400;
    --ud-w-name: 600;
    --ud-w-strong: 600;
    --ud-track-caps: 0.12em;
    /* shape */
    --ud-r-xs: 4px;
    --ud-r-s: 8px;
    --ud-r-m: 12px;
    --ud-r-pill: 999px;
    --ud-radius: var(--ud-r-m);
    /* the arch every portrait sits in: a round top, a small foot */
    /* The pointed arch, as a mask: one geometry at every size (r1246). */
    --ud-arch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400V206.4A200 200 0 0 1 150 12.9A200 200 0 0 1 300 206.4V400Z'/%3E%3C/svg%3E");
    --ud-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,1 15.22,4.22 19.78,4.22 19.78,8.78 23,12 19.78,15.22 19.78,19.78 15.22,19.78 12,23 8.78,19.78 4.22,19.78 4.22,15.22 1,12 4.22,8.78 4.22,4.22 8.78,4.22'/%3E%3C/svg%3E");
    /* one shadow */
    --ud-shadow: 0 14px 30px -18px rgba(28, 27, 24, 0.4);
}

@media (min-width: 720px) {
    :root,
    [data-ud-theme] {
        --ud-t-xl: 30px;
        --ud-t-d: 52px;
    }
}

/* The window's ground belongs to the editorial theme: the forest of the
   nameplate. A theme that does not set it gets the lines alone. */
:root:not([data-ud-theme]),
[data-ud-theme="editorial"] {
    --ud-window-ground: var(--ud-plate);
    --ud-window-star: var(--ud-plate-ink);
}

/* ── Base, scoped to the directory's own wrappers ───────────────────────── */

.ud-page {
    background: var(--ud-paper);
    color: var(--ud-ink);
    font-family: var(--ud-sans);
    font-size: var(--ud-t-m);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.ud-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.ud-wrap--narrow { max-width: 720px; }

@media (min-width: 720px) {
    .ud-wrap { padding-left: 32px; padding-right: 32px; }
}

.ud-page [hidden] { display: none !important; }

.ud-page a { color: inherit; }

/* The skip link (first thing a keyboard reaches): white on forest. The
   rule above would otherwise give it the ink colour on a green ground. */
.ud-page > a[href="#main-content"] { color: var(--ud-on-action); background: var(--ud-forest); border-radius: var(--ud-r-s); }

.ud-link {
    color: var(--ud-forest-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ud-link:hover { color: var(--ud-forest); }

.ud-page a:focus-visible,
.ud-page button:focus-visible,
.ud-page input:focus-visible,
.ud-page select:focus-visible,
.ud-page summary:focus-visible,
.ud-header a:focus-visible,
.ud-footer a:focus-visible {
    outline: 2px solid var(--ud-forest-deep);
    outline-offset: 2px;
    border-radius: var(--ud-r-xs);
}

.ud-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Type ───────────────────────────────────────────────────────────────── */

.ud-kicker {
    font-size: var(--ud-t-xs);
    font-weight: var(--ud-w-strong);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ud-brass-ink);
    margin: 0;
}

.ud-h1 {
    font-family: var(--ud-display);
    font-weight: var(--ud-w-display);
    font-size: var(--ud-t-d);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ud-ink);
    margin: 0;
    text-wrap: balance;
}

.ud-h2 {
    font-family: var(--ud-display);
    font-weight: var(--ud-w-name);
    font-size: var(--ud-t-xl);
    line-height: 1.2;
    color: var(--ud-ink);
    margin: 0;
    text-wrap: balance;
}

.ud-h3 {
    font-family: var(--ud-display);
    font-weight: var(--ud-w-name);
    font-size: var(--ud-t-l);
    line-height: 1.25;
    color: var(--ud-ink);
    margin: 0;
}

.ud-lead {
    font-size: var(--ud-t-m);
    line-height: 1.55;
    color: var(--ud-ink-2);
    margin: 0;
    max-width: 62ch;
    text-wrap: pretty;
}

@media (min-width: 720px) {
    .ud-lead { font-size: var(--ud-t-l); }
}

.ud-small { font-size: var(--ud-t-s); line-height: 1.5; color: var(--ud-ink-2); margin: 0; }
.ud-fine { font-size: var(--ud-t-xs); line-height: 1.5; color: var(--ud-ink-3); margin: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.ud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--ud-r-s);
    border: 1px solid transparent;
    font: inherit;
    font-size: var(--ud-t-m);
    font-weight: var(--ud-w-strong);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ud-btn--primary { background: var(--ud-forest); color: var(--ud-on-action); }
.ud-btn--primary:hover { background: var(--ud-forest-deep); }
.ud-page a.ud-btn--primary { color: var(--ud-on-action); }

.ud-btn--quiet {
    background: var(--ud-card);
    color: var(--ud-forest-deep);
    border-color: var(--ud-forest);
}

.ud-btn--quiet:hover { background: var(--ud-forest-tint); }
.ud-page a.ud-btn--quiet { color: var(--ud-forest-deep); }

.ud-btn--danger {
    background: var(--ud-card);
    color: var(--ud-danger);
    border-color: var(--ud-danger);
}

.ud-btn--danger:hover { background: var(--ud-danger-tint); }

.ud-btn--block { display: flex; width: 100%; }

.ud-btn--small { min-height: 44px; font-size: var(--ud-t-s); padding: 0 16px; }

@media (prefers-reduced-motion: reduce) {
    .ud-btn { transition: none; }
}

/* ── Header and footer on the directory host ────────────────────────────── */

.ud-header {
    background: var(--ud-paper);
    border-bottom: 1px solid var(--ud-line);
    position: sticky;
    top: 0;
    z-index: 40;
}

.ud-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
}

.ud-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    text-decoration: none;
    color: var(--ud-ink);
    font-family: var(--ud-display);
    font-weight: var(--ud-w-name);
    font-size: var(--ud-t-l);
    letter-spacing: -0.005em;
    white-space: nowrap;
}

/* The mark: the eight-point star in the green square. */
.ud-brand__mark { width: 28px; height: 28px; flex-shrink: 0; display: block; }

.ud-header__nav { display: flex; align-items: center; gap: 4px; }

.ud-header__link {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: var(--ud-t-s);
    font-weight: 400;
    color: var(--ud-ink-2);
    text-decoration: none;
    border-radius: var(--ud-r-s);
}

.ud-header__link:hover { color: var(--ud-ink); background: var(--ud-wash); }

@media (min-width: 720px) {
    .ud-header__link { display: inline-flex; }
}

.ud-footer {
    background: var(--ud-wash);
    border-top: 1px solid var(--ud-line);
    color: var(--ud-ink-2);
    margin-top: 56px;
    padding: 32px 0 40px;
    font-size: var(--ud-t-s);
    line-height: 1.6;
}

.ud-footer__grid { display: grid; gap: 24px; }

@media (min-width: 720px) {
    .ud-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
}

.ud-footer p { margin: 0 0 8px; }
.ud-footer__grid p { max-width: 46ch; }
.ud-footer a { color: var(--ud-forest-deep); text-decoration: underline; text-underline-offset: 3px; }
.ud-footer__title { font-weight: var(--ud-w-strong); color: var(--ud-ink); margin: 0 0 8px; font-size: var(--ud-t-s); }
.ud-footer__links { list-style: none; margin: 0; padding: 0; }
.ud-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.ud-footer__base { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--ud-line-strong); font-size: var(--ud-t-s); color: var(--ud-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.ud-footer__base a, .ud-footer__base span { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.ud-footer__grid p a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ── The list pages: headline, search, people, then the index ───────────── */

/* One column at every width. People come straight after the search; the
   index of professions and the three steps follow them. */
.ud-directory { display: grid; grid-template-columns: minmax(0, 1fr); }

.ud-hero { padding: 20px 0 20px; }

@media (min-width: 720px) {
    .ud-hero { padding: 40px 0 28px; }
}

.ud-hero .ud-crumbs { margin: 0 0 4px; }
.ud-hero .ud-lead { margin-top: 14px; }

/* THE HOME HERO. On a phone the headline has the whole width (three lines)
   and the window sits beside the lead. From 720px the hero is two columns:
   the words on the left, the window as architecture on the right, standing
   on the hero's floor. */
.ud-directory--home .ud-hero { padding-top: 0; }
.ud-directory--home .ud-hero .ud-kicker { margin: 0 0 8px; }
.ud-directory--home .ud-hero .ud-h1 { max-width: 13.5em; }

/* ON A PHONE the home's ornament is an ARCADE: seven of the pointed arches
   in a row, edge to edge under the header, a star standing in each, brass
   lines on forest, still, on a brass sill. So the phone carries the arch
   too. The headline and the lead keep the whole column. (A two-star window
   beside the lead squeezed the lead and read as a cross under an arch; a
   plain 56 px ribbon read as trim.) */
.ud-band {
    position: relative;
    height: 80px;
    margin: 0 -16px 12px;
    border-bottom: 1px solid var(--ud-brass);
}
.ud-band::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    bottom: 0;
    background: var(--ud-plate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c8912e' stroke-linejoin='miter'%3E%3Cpath stroke-width='1.3' d='M40 0l11.72 11.72l16.57 0l0 16.57l11.72 11.72l-11.72 11.72l0 16.57l-16.57 0l-11.72 11.72l-11.72 -11.72l-16.57 0l0 -16.57l-11.72 -11.72l11.72 -11.72l0 -16.57l16.57 0z'/%3E%3Cpath stroke-width='0.8' d='M51.72 11.72l16.57 16.57l0 23.43l-16.57 16.57l-23.43 0l-16.57 -16.57l0 -23.43l16.57 -16.57z'/%3E%3C/svg%3E") left bottom / 14.2857% auto repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cpath d='M12 400V221.89A184 184 0 0 1 150 43.87A184 184 0 0 1 288 221.89V400Z'/%3E%3C/svg%3E") left bottom / 14.2857% 100% repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cpath d='M12 400V221.89A184 184 0 0 1 150 43.87A184 184 0 0 1 288 221.89V400Z'/%3E%3C/svg%3E") left bottom / 14.2857% 100% repeat-x;
}
/* "Professions" leads the chips on a phone: the index is far down the page. */
.ud-chip--index { border-color: var(--ud-forest-deep); color: var(--ud-forest-deep); font-weight: var(--ud-w-strong); }
.ud-directory--home .ud-hero .ud-search { margin-top: 14px; }
.ud-directory--home .ud-hero .ud-lead { margin-top: 10px; }

@media (min-width: 720px) {
    .ud-band, .ud-chips .ud-chip--index, .ud-chips .ud-chip--extra { display: none; }
    /* FROM 720px: the headline has the full width, three lines. Under it,
       the words on the left and the window as architecture on the right. */
    .ud-directory--home .ud-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 200px;
        column-gap: 40px;
        align-items: start;
        padding: 44px 0 32px;
    }

    .ud-directory--home .ud-hero > * { grid-column: 1; }
    .ud-directory--home .ud-hero .ud-kicker, .ud-directory--home .ud-hero .ud-h1 { grid-column: 1 / -1; }
    .ud-directory--home .ud-hero .ud-lead { max-width: 34em; }
    /* The search keeps two rows here, as on a phone: the city box is never squeezed. */
    .ud-directory--home .ud-hero .ud-search { grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
    /* Three lines are kept for the headline whatever face is drawing it, so
       nothing below moves when Fraunces arrives (a measured 0.101 shift at
       768). The chips run the full width, under the window. */
    .ud-directory--home .ud-hero .ud-h1 { min-height: 3.24em; }
    .ud-directory--home .ud-hero .ud-chips { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
    .ud-directory--home .ud-hero { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 64px; padding: 56px 0 40px; }
    .ud-directory--home .ud-hero .ud-kicker, .ud-directory--home .ud-hero .ud-h1, .ud-directory--home .ud-hero .ud-chips { grid-column: 1; }
    .ud-directory--home .ud-hero .ud-h1 { min-height: 0; }
    .ud-directory--home .ud-hero .ud-search { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); }
}

.ud-search { display: grid; gap: 8px; margin-top: 20px; max-width: 760px; }

.ud-search__row { display: flex; gap: 8px; }

@media (min-width: 720px) {
    .ud-search { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); }
}

.ud-field {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--ud-edge);
    border-radius: var(--ud-r-s);
    background: var(--ud-card);
    color: var(--ud-ink);
    font: inherit;
    font-size: var(--ud-t-m);
}

.ud-field::placeholder { color: var(--ud-ink-3); opacity: 1; }
.ud-field:hover { border-color: var(--ud-ink-2); }

select.ud-field {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a453b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* On a phone the chips are one row that slides. Its right edge fades, so
   the row reads as "there is more". */
.ud-chips {
    display: flex;
    gap: 8px;
    margin: 14px -16px 0;
    padding: 0 56px 4px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    /* Pass 3 (seat A at 390): the fade was 48px and the last chip could sit
       cut mid-word inside it. 72px of fade plus 56px of tail room reads as
       "there is more", never as a clipped row. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
}

.ud-chips::-webkit-scrollbar { display: none; }

@media (min-width: 720px) {
    .ud-chips { flex-wrap: wrap; overflow: visible; margin: 16px 0 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
}

.ud-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--ud-edge);
    border-radius: var(--ud-r-pill);
    background: var(--ud-card);
    color: var(--ud-ink-2);
    font-size: var(--ud-t-s);
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ud-chip:hover { border-color: var(--ud-forest); color: var(--ud-forest-deep); background: var(--ud-forest-tint); }
.ud-chip--on { border-color: var(--ud-forest-deep); background: var(--ud-forest-tint); color: var(--ud-forest-deep); font-weight: var(--ud-w-strong); }
/* The two regions lead the row. */
.ud-chip--region { border-color: var(--ud-forest-deep); color: var(--ud-forest-deep); font-weight: var(--ud-w-strong); }

/* ── The window: the one ornament ───────────────────────────────────────── */

/* The khatam lattice at its largest scale (r1246): brass lines on the forest
   of the nameplate, cut to the pointed arch every portrait sits in. Home
   hero only, from 720px (a phone carries the band instead). Three stars
   wide, four tall: one whole star on the axis, its tip at the point of the
   arch. Its size is fixed by its width and its shape, so it moves nothing
   when it draws. It draws once from the sill upward, in about a second,
   and never again. With reduced motion it is simply there.
   LINES ONLY. The stars are not filled: filled stars leave the ground
   between them reading as crosses under an arch (second design review).
   Stroke widths are set per size so the outline is 1.5 px on screen and the
   inner octagon 1 px. */
.ud-window {
    display: none;
    aspect-ratio: 8 / 11;
    color: var(--ud-brass);
    pointer-events: none;
}

.ud-window__svg { display: block; width: 100%; height: 100%; overflow: visible; stroke-width: 1.8; }
.ud-window__ground { fill: var(--ud-window-ground, none); stroke: none; }
/* The still copy under the lines that draw: the arch is never seen empty. */
.ud-window .ud-window__rest { fill: none; stroke: currentColor; stroke-opacity: 0.32; stroke-dasharray: none; }
.ud-window__fine { stroke-width: 1.2; }
.ud-window__frame { stroke-width: 2.4; }

@media (min-width: 720px) {
    /* Beside the lead, the search and the chips. */
    .ud-directory--home .ud-hero .ud-window {
        display: block;
        grid-column: 2;
        grid-row: 3 / span 2;
        justify-self: end;
        width: 176px;
        margin: 4px 0 0;
    }
    .ud-window__svg { stroke-width: 2.05; }
    .ud-window__fine { stroke-width: 1.36; }
    .ud-window__frame { stroke-width: 2.7; }
}

@media (min-width: 1000px) {
    /* 340 px, the hero's full height: its foot stands on the hero's floor. */
    /* Five rows, the rows the words make. A sixth, empty row took the
       window's spare height and pushed the people down by 73 px. */
    .ud-directory--home .ud-hero .ud-window { grid-row: 1 / span 5; justify-self: start; width: 340px; margin: -8px 0 -40px; }
    .ud-window__svg { stroke-width: 1.06; }
    .ud-window__fine { stroke-width: 0.71; }
    .ud-window__frame { stroke-width: 1.41; }
}

.ud-window path { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
    .ud-window__row path, .ud-window .ud-window__frame { animation: ud-draw 0.56s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.15s; }
    .ud-window__row:nth-of-type(2) path { animation-delay: 0.33s; }
    .ud-window__row:nth-of-type(3) path { animation-delay: 0.51s; }
    .ud-window__row:nth-of-type(4) path { animation-delay: 0.69s; }
    .ud-window .ud-window__frame { animation-duration: 1.1s; }
}

@keyframes ud-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* DRAWN ONCE, THEN STILL FOR GOOD. When the draw has ended the page marks
   the window (one line of script on the home). From then on nothing can
   start the draw again, so a full-page capture, a print or a resize across
   a breakpoint shows the finished lattice, never an empty arch. Without
   scripts the still copy under the lines does that job. */
.ud-window--drawn path, .ud-window--drawn .ud-window__frame { animation: none !important; }

@media print { .ud-window { display: none; } }

/* ── The index of professions: a full-width band under the people ───────── */

.ud-directory__board { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--ud-line); }
.ud-directory__board .ud-kicker { margin-bottom: 8px; }

/* ── How it works: three real steps, in order ───────────────────────────── */

.ud-how { margin-top: 40px; padding: 28px 0 0; border-top: 1px solid var(--ud-line); }

.ud-how__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: ud-step; }

.ud-how__step { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; counter-increment: ud-step; }

.ud-how__step::before {
    content: counter(ud-step);
    font-family: var(--ud-display);
    font-weight: var(--ud-w-display);
    font-size: var(--ud-t-xl);
    line-height: 1;
    color: var(--ud-brass-ink);
    font-variant-numeric: lining-nums;
    padding-top: 2px;
    border-top: 1px solid var(--ud-brass);
}

.ud-how__title { font-family: var(--ud-display); font-weight: var(--ud-w-name); font-size: var(--ud-t-l); line-height: 1.25; color: var(--ud-ink); margin: 0; text-wrap: balance; }
.ud-how__text { font-size: var(--ud-t-s); line-height: 1.55; color: var(--ud-ink-2); margin: 4px 0 0; max-width: 34em; text-wrap: pretty; }
.ud-how__more { margin: 18px 0 0; font-size: var(--ud-t-s); color: var(--ud-ink-2); }

@media (min-width: 1000px) {
    .ud-how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* ── The board: professions with dotted leaders ─────────────────────────── */

.ud-board { list-style: none; margin: 0; padding: 0; }

.ud-board__row {
    display: flex;
    align-items: baseline;
    align-items: last baseline;
    gap: 8px;
    min-height: 44px;
    padding: 10px 0;
    color: var(--ud-ink);
    text-decoration: none;
    font-size: var(--ud-t-m);
}

.ud-board__name { flex-shrink: 1; min-width: 0; text-wrap: balance; }

.ud-board__dots {
    flex: 1 1 12px;
    min-width: 12px;
    align-self: center;
    height: 0;
    border-bottom: 2px dotted var(--ud-line-strong);
    transform: translateY(3px);
}

.ud-board__count {
    font-variant-numeric: tabular-nums;
    font-weight: var(--ud-w-strong);
    color: var(--ud-brass-ink);
}

.ud-board__row:hover .ud-board__name { color: var(--ud-forest-deep); text-decoration: underline; text-underline-offset: 3px; }
.ud-board__row--on .ud-board__name { font-weight: var(--ud-w-strong); color: var(--ud-forest-deep); }

.ud-board--cols { columns: 1; }

@media (min-width: 560px) { .ud-board--cols { columns: 2; column-gap: 40px; } }

@media (max-width: 559px) {
    /* Pass 3 (recheck v2, seat A at 390, 6 of 9 pages): a long profession name
       wrapped, the dotted leader broke and the count fell to a second line.
       On a phone the row stacks: the name takes its line, the count sits under
       it, right-aligned; the leader retires. */
    .ud-board__row { flex-wrap: wrap; }
    .ud-board__dots { display: none; }
    .ud-board__count { margin-left: auto; }
}


.ud-board--cols li { break-inside: avoid; }

@media (min-width: 1000px) {
    .ud-directory__board .ud-board__row { font-size: var(--ud-t-s); }
}

/* ── Results layout ─────────────────────────────────────────────────────── */

.ud-results { padding-top: 16px; }

.ud-count { font-size: var(--ud-t-s); color: var(--ud-ink-2); margin: 0 0 12px; }

.ud-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }

@media (min-width: 640px) {
    .ud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ud-grid--three { align-items: stretch; }

@media (min-width: 1000px) {
    .ud-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* r1898 design round (Oct 14 2026), seat A D3/D5/D10/D13/D17/D21: a trailing
   orphan card fills its row instead of hugging the left with dead columns
   beside it, and a lone result gets a deliberate wide measure. Second pass
   (recheck Oct 14): the lone result caps at 720px at BOTH bands (seat A
   measured the 900px card too wide for its content), and the two-column
   tail span (3n+2) is dropped: live-measured at ?q=therepist&page=17 it left
   half an empty wide card. */
@media (min-width: 640px) and (max-width: 999px) {
    /* Pass 3 (recheck v2, seat B, search-tail at 768): the tail span is dropped
       here too. A full-width last card with a one-column interior read
       half-empty; the settled direction from pass 2 is a normal short last row.
       A LONE result is different: it spans the row as a deliberate wide
       measure, capped and centered so the void is symmetric, never 338px on
       one side (seat B, search-single 1280). */
    .ud-grid--three > :only-child { grid-column: 1 / -1; max-width: 720px; justify-self: center; }
}
@media (min-width: 1000px) {
    .ud-grid--three > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
    .ud-grid--three > :only-child { grid-column: 1 / -1; max-width: 720px; justify-self: center; }
}

.ud-section { margin-top: 40px; }
.ud-section > .ud-h2 { margin-bottom: 16px; }

.ud-notice {
    border: 1px solid var(--ud-warn-line);
    background: var(--ud-warn-ground);
    color: var(--ud-warn-ink);
    border-radius: var(--ud-r-s);
    padding: 10px 14px;
    font-size: var(--ud-t-s);
    line-height: 1.5;
    margin: 0 0 16px;
}

.ud-notice a { color: inherit; font-weight: var(--ud-w-strong); text-decoration: underline; }
.ud-notice--done { border-color: var(--ud-forest-line); background: var(--ud-forest-tint); color: var(--ud-forest-deep); }

.ud-empty {
    border: 1px dashed var(--ud-line-strong);
    border-radius: var(--ud-r-m);
    padding: 20px;
    background: var(--ud-card);
}

.ud-empty .ud-h2 { margin-bottom: 8px; }

/* ── The arch: every portrait sits in one ───────────────────────────────── */

/* A gently pointed two-centred arch, three wide to four tall: span 1,
   centres 1/6 in from each side, radius 2/3 (r1246). ONE geometry at every
   size: the window, every portrait, the placeholder. It is a mask, so the
   shape is the same drawing wherever it appears.
   Three layers: a brass hairline, a breath of the ground, the picture. A
   photo and the placeholder use the same arch, so a grid of both reads as
   one set. */
.ud-arch {
    --ud-arch-gap: 4px;
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 80px;
    aspect-ratio: 3 / 4;
    background: var(--ud-brass);
    -webkit-mask: var(--ud-arch-mask) center / 100% 100% no-repeat;
    mask: var(--ud-arch-mask) center / 100% 100% no-repeat;
}

.ud-arch::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--ud-card);
    -webkit-mask: var(--ud-arch-mask) center / 100% 100% no-repeat;
    mask: var(--ud-arch-mask) center / 100% 100% no-repeat;
}

.ud-arch__fill {
    position: absolute;
    inset: var(--ud-arch-gap);
    width: calc(100% - 2 * var(--ud-arch-gap));
    height: calc(100% - 2 * var(--ud-arch-gap));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 16%;
    background: var(--ud-wash);
    overflow: hidden;
    -webkit-mask: var(--ud-arch-mask) center / 100% 100% no-repeat;
    mask: var(--ud-arch-mask) center / 100% 100% no-repeat;
}

img.ud-arch__fill { display: block; padding: 0; object-fit: cover; object-position: 50% 0; }

/* The placeholder: one small brass khatam, the site's one figure, over the
   person's initials. Never a face. */
.ud-arch__star { display: block; width: 18px; height: 18px; fill: var(--ud-brass); stroke: none; }
.ud-arch__initials { font-family: var(--ud-display); font-weight: var(--ud-w-display); font-size: var(--ud-t-xl); line-height: 1; letter-spacing: 0.02em; color: var(--ud-forest-deep); margin-top: 8%; }

@media (min-width: 720px) {
    .ud-arch { width: 96px; }
}

/* In the three-column grid the name needs the room more than the arch does. */
@media (min-width: 1000px) {
    .ud-grid--three .ud-arch--card { width: 84px; }
}

.ud-arch--plate { --ud-arch-gap: 5px; width: 112px; background: var(--ud-brass-light); }
.ud-arch--plate::before { background: var(--ud-plate); }
.ud-arch--plate .ud-arch__fill { background: var(--ud-plate-well); }
.ud-arch--plate.ud-arch--initials .ud-arch__fill { background: var(--ud-plate-ink); }
.ud-arch--plate .ud-arch__star { width: 22px; height: 22px; }
.ud-arch--plate .ud-arch__initials { font-size: var(--ud-t-d); }

@media (min-width: 720px) {
    .ud-arch--plate { --ud-arch-gap: 6px; width: 152px; }
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.ud-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ud-card);
    border: 1px solid var(--ud-line);
    border-radius: var(--ud-r-m);
    height: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ud-card:hover { border-color: var(--ud-brass-edge); box-shadow: var(--ud-shadow); transform: translateY(-2px); }
/* The name's link covers the card, so its focus ring is drawn on the card. */
.ud-card:has(.ud-card__name a:focus-visible) { outline: 2px solid var(--ud-forest-deep); outline-offset: 2px; }
.ud-page .ud-card__name a:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .ud-card { transition: none; }
    .ud-card:hover { transform: none; }
}

.ud-card__head { display: flex; gap: 16px; padding: 18px 18px 0; align-items: flex-start; }

.ud-card__id { min-width: 0; flex: 1; padding-top: 4px; }

.ud-card__role { 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); margin: 0 0 6px; }

.ud-card__name { font-family: var(--ud-display); font-weight: var(--ud-w-name); font-size: var(--ud-t-l); line-height: 1.2; margin: 0; color: var(--ud-ink); overflow-wrap: anywhere; text-wrap: pretty; }

/* The whole card opens the person's page; the name carries the link. */
.ud-card__name a { color: inherit; text-decoration: none; }
.ud-card__name a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--ud-r-m); }
.ud-card:hover .ud-card__name a { color: var(--ud-forest-deep); }

.ud-card__place { font-size: var(--ud-t-s); color: var(--ud-ink-2); margin: 6px 0 0; }
.ud-card__practice { font-size: var(--ud-t-s); color: var(--ud-ink); margin: 2px 0 0; }

.ud-card__body { padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ud-card__body:empty { padding: 0 0 14px; }

.ud-card__text {
    font-size: var(--ud-t-s);
    line-height: 1.55;
    color: var(--ud-ink-2);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ud-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.ud-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ud-r-pill);
    border: 1px solid var(--ud-line-strong);
    background: var(--ud-paper);
    font-size: var(--ud-t-xs);
    color: var(--ud-ink-2);
    line-height: 1.4;
}

.ud-tag--online { border-color: var(--ud-forest-line); background: var(--ud-forest-tint); color: var(--ud-forest-deep); font-weight: var(--ud-w-strong); }

.ud-card__foot {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--ud-line);
    margin: 0 18px;
    /* r1898 (Oct 14 2026), seat A D3/D7/D17: with the row now stretch-aligned,
       the foot pins to the card bottom so source lines and CTAs line up across
       a row instead of floating at content height. */
    margin-top: auto;
    padding: 12px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ud-source { font-size: var(--ud-t-xs); line-height: 1.5; color: var(--ud-ink-3); margin: 0; }
.ud-source strong { color: var(--ud-ink-2); font-weight: var(--ud-w-strong); }

/* The quiet source link: in the sentence, with a full-size target. */
.ud-card__source-link {
    display: inline-block;
    padding: 14px 6px;
    margin: -14px -6px;
    min-width: 44px;
    text-align: center;
    color: var(--ud-ink-2);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ud-card__source-link:hover { color: var(--ud-forest-deep); }

.ud-card__actions { display: flex; gap: 8px; align-items: stretch; }
.ud-card__actions .ud-btn { flex: 1 1 auto; min-width: 0; }

/* The one link in the foot: where the person can be reached. A text link
   with a full-size target, not a button on every card. */
.ud-card__go {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -6px 0 -10px;
    font-size: var(--ud-t-s);
    font-weight: var(--ud-w-strong);
    color: var(--ud-forest-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.ud-card__go::after { content: '\2192'; margin-left: 6px; text-decoration: none; display: inline-block; transition: transform 0.15s ease; }
.ud-card__go:hover { color: var(--ud-forest); }
.ud-card__go:hover::after { transform: translateX(3px); }
.ud-page a.ud-card__go { color: var(--ud-forest-deep); }
.ud-nowrap { white-space: nowrap; }

.ud-distance { font-size: var(--ud-t-xs); font-weight: var(--ud-w-strong); color: var(--ud-brass-ink); margin: 0; }

/* ── Pager ──────────────────────────────────────────────────────────────── */

.ud-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.ud-pager__pages { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.ud-pager__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 44px; color: var(--ud-ink-3); }

.ud-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ud-edge);
    border-radius: var(--ud-r-s);
    background: var(--ud-card);
    color: var(--ud-ink);
    font-size: var(--ud-t-s);
    font-weight: var(--ud-w-strong);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.ud-pager__page:hover { border-color: var(--ud-forest); }
.ud-pager__page--on { background: var(--ud-plate); border-color: var(--ud-plate); color: var(--ud-plate-ink); }
.ud-page a.ud-pager__page--on { color: var(--ud-plate-ink); }
.ud-pager__page--off { color: var(--ud-ink-3); background: var(--ud-wash); border-color: var(--ud-line); }

/* ── The nameplate (the signature) ──────────────────────────────────────── */

.ud-plate {
    position: relative;
    background: var(--ud-plate);
    color: var(--ud-plate-ink);
    border-radius: var(--ud-r-m);
    padding: 28px 26px 28px;
    /* On a phone: the arch, and beside it the profession and the place.
       Then the name across the whole plate. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    align-items: end;
    box-shadow: var(--ud-shadow);
}

.ud-plate__text { display: contents; }
.ud-plate .ud-arch { grid-row: 1; grid-column: 1; }
/* On a phone the kicker has its own full line under the arch: the role,
   then the place on the next line, with no dot between them. */
.ud-plate__kicker, .ud-plate__name, .ud-plate__practice, .ud-plate__address { grid-column: 1 / -1; }
.ud-plate__place { display: block; }
.ud-plate__dot { display: none; }
.ud-plate__name { margin-top: 6px; }

/* THE FIELD (r1246): the same khatam lattice as the home's window, at its
   second scale, set still into the plate's empty side. Brass at low
   strength, inside the engraved rule, cropped by the plate. One field on a
   page, under a fifth of the plate, and never under a word: the name stops
   before it. It is the window's figure again, not a second motif, and it
   never moves. */
.ud-plate::after {
    content: '';
    position: absolute;
    /* On a phone: two stars by two, exactly, anchored in the top right
       corner of the engraved rule, as it is on a wide screen. */
    top: 10px;
    right: 10px;
    width: 152px;
    height: 152px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c8912e' stroke-linejoin='miter'%3E%3Cpath stroke-width='1.3' d='M40 0l11.72 11.72l16.57 0l0 16.57l11.72 11.72l-11.72 11.72l0 16.57l-16.57 0l-11.72 11.72l-11.72 -11.72l-16.57 0l0 -16.57l-11.72 -11.72l11.72 -11.72l0 -16.57l16.57 0z'/%3E%3Cpath stroke-width='0.8' d='M51.72 11.72l16.57 16.57l0 23.43l-16.57 16.57l-23.43 0l-16.57 -16.57l0 -23.43l16.57 -16.57z'/%3E%3C/svg%3E") right top / 76px 76px repeat;
    opacity: 0.38;
    pointer-events: none;
}

/* The brass rule, engraved a little way in from the edge. */
.ud-plate::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid var(--ud-brass);
    border-radius: var(--ud-r-xs);
    pointer-events: none;
}

.ud-plate > *, .ud-plate__text > * { position: relative; }

.ud-plate__kicker {
    font-size: var(--ud-t-xs);
    font-weight: var(--ud-w-strong);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ud-brass-light);
    line-height: 1.6;
    /* 16 px of air under the arch on a phone (it touched, second review). */
    margin: 16px 0 4px;
}

.ud-plate__name {
    font-family: var(--ud-display);
    font-weight: var(--ud-w-display);
    font-size: var(--ud-t-d);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--ud-plate-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.ud-plate__practice { font-size: var(--ud-t-m); line-height: 1.4; color: var(--ud-plate-ink); opacity: 0.92; margin: 10px 0 0; }

/* r1236: his address on the directory, under his name on the plate. */
.ud-plate__address { font-size: var(--ud-t-s); letter-spacing: 0.02em; color: var(--ud-brass-light); margin: 12px 0 0; overflow-wrap: anywhere; }

@media (min-width: 720px) {
    /* On a wide screen: the arch, and the words in one block beside it. */
    .ud-plate { display: flex; align-items: center; gap: 36px; padding: 44px 48px 42px; }
    .ud-plate::before { inset: 12px; }
    .ud-plate__text { display: block; min-width: 0; }
    .ud-plate__kicker { margin: 0 0 10px; }
    .ud-plate__place { display: inline; }
    .ud-plate__dot { display: inline; }
    .ud-plate__name { margin-top: 0; }
    .ud-plate__practice { font-size: var(--ud-t-l); }
    /* The lattice panel: the plate's right side, inside the engraved rule. */
    /* Whole stars only: the panel is three stars tall, whatever the plate's
       height, and two wide (four from 1000px). */
    .ud-plate__kicker { margin-top: 0; }
    /* From 720 to 999px the name has the plate to itself: the name wins,
       and the lattice never sits under a word, so there is none here. */
    .ud-plate::after { display: none; }
    .ud-arch--plate .ud-arch__star { width: 30px; height: 30px; }
}

@media (min-width: 1000px) {
    /* Whole stars only: three tall, whatever the plate's height, inside the
       engraved rule, in brass at over half strength: the same lattice as
       the home's window, and it looks like it.
       THE NAME WINS (fourth read). One column from 1000 to 1119px, where the
       plate is narrow, and the name a size smaller there. Two columns from
       1120px. Never three: the plate is no wider at 1440 than at 1280, and
       three columns put "Dr. Nihad Ammar, DMD" on two lines. */
    .ud-plate::after { display: block; top: 12px; bottom: 12px; right: 12px; height: auto; width: auto; aspect-ratio: 1 / 3; background-size: auto calc(100% / 3); opacity: 0.55; }
    .ud-plate__text { max-width: calc(100% - 152px - 36px - 100px); }
    .ud-plate__name { font-size: 44px; }
}

@media (min-width: 1120px) {
    .ud-plate::after { aspect-ratio: 2 / 3; }
    .ud-plate__text { max-width: calc(100% - 152px - 36px - 180px); }
    .ud-plate__name { font-size: var(--ud-t-d); }
}

@media (max-width: 359px) {
    .ud-plate::after { display: none; }
}

@media print { .ud-plate::after { display: none; } }

/* Inside the ready page's preview the plate is narrower: two stars wide. */
@media (min-width: 720px) {
    .ud-preview .ud-plate::after { aspect-ratio: 1 / 3; }
    .ud-preview .ud-plate__text { max-width: none; }
}
@media (min-width: 1000px) {
    .ud-preview .ud-plate__text { max-width: calc(100% - 152px - 36px - 100px); }
}

.ud-credit { font-size: var(--ud-t-xs); color: var(--ud-ink-3); margin: 10px 0 0; }

/* A quiet line near the top of a phone page: straight to the claim card. */
.ud-jump { margin: 2px 0 0; font-size: var(--ud-t-s); }
@media (min-width: 900px) { .ud-jump { display: none; } }
.ud-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 14px 0; margin: -14px 0; min-width: 44px; }

/* ── A professional's own page ──────────────────────────────────────────── */

.ud-entry { padding-top: 16px; }

/* One line, always. A long profession name is cut with an ellipsis; the
   first and the last link keep their full words. */
.ud-crumbs { font-size: var(--ud-t-s); color: var(--ud-ink-2); margin: 0 0 8px; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.ud-crumbs a { flex: 0 1 auto; min-width: 44px; line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ud-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ud-crumbs a:first-child { flex-shrink: 0; }
/* The last crumb is the page's own name, and on some pages it is long
   ("Family Medicine / General Practice Physicians"). Keeping it unshrinkable
   pushed the document past the phone viewport: 6 live pages scrolled sideways
   at 390. It shrinks and ellipsizes like the middle ones now, and the h1 above
   still states the full name. */
.ud-crumbs a:last-child { flex-shrink: 1; min-width: 0; }
.ud-crumbs a:last-child:first-child { flex-shrink: 1; }
.ud-crumbs span[aria-hidden] { flex: 0 0 auto; }
.ud-crumbs a:hover { color: var(--ud-forest-deep); }
.ud-crumbs span[aria-hidden] { color: var(--ud-ink-3); }

/* Two columns on a wide screen: the page on the left, the claim card on the
   right. On a phone one column, in reading order: how to reach him, the
   words about him, where the page comes from, then the claim card. */
.ud-entry__grid {
    display: grid;
    gap: 36px;
    margin-top: 28px;
    grid-template-columns: minmax(0, 1fr);
}

.ud-entry__main { min-width: 0; display: grid; gap: 36px; align-content: start; }
.ud-entry__side { display: grid; gap: 16px; align-content: start; }

@media (min-width: 900px) {
    .ud-entry__grid:not(.ud-entry__grid--stack) {
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 64px;
        align-items: start;
        margin-top: 36px;
    }

    /* The claim card stays beside the page as it is read. */
    .ud-entry__grid:not(.ud-entry__grid--stack) .ud-entry__side { position: sticky; top: 84px; }
}

/* The facts ledger: how to reach him, where, languages, online. The same
   dotted leaders as the board of professions. */
.ud-facts { margin: 0; padding: 0; }

.ud-facts__row { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--ud-line); }
.ud-facts__row:first-child { border-top: 1px solid var(--ud-line); }

.ud-facts dt { flex: 0 0 auto; font-size: var(--ud-t-xs); font-weight: var(--ud-w-strong); letter-spacing: var(--ud-track-caps); text-transform: uppercase; color: var(--ud-ink-3); margin: 0; }
/* The leader sits on the label's own line, also when the value wraps. */
.ud-facts__dots { flex: 1 1 16px; min-width: 16px; align-self: flex-start; height: 0; margin-top: 0.82em; border-bottom: 2px dotted var(--ud-line-strong); }
.ud-facts dd { flex: 0 1 auto; max-width: 68%; margin: 0; font-size: var(--ud-t-m); color: var(--ud-ink); text-align: right; overflow-wrap: anywhere; text-wrap: balance; }
/* On a phone a value often wraps. The label goes over the value there and
   the leader is dropped: a five-dot stub is worse than none. */
@media (max-width: 559px) {
    .ud-facts__row { display: block; padding: 10px 0 12px; }
    .ud-facts__dots { display: none; }
    .ud-facts dd { max-width: none; text-align: left; margin-top: 2px; text-wrap: wrap; }
}

.ud-facts dd a { color: var(--ud-forest-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }

/* From public records (r1756): the same ledger, and under each value the line that names its
   source and the day it was read. Quieter than the value, never hidden. */
.ud-pr__intro { margin-top: 8px; max-width: 62ch; text-wrap: pretty; }
.ud-pr { margin-top: 14px; }
.ud-pr dd { line-height: 1.4; }
.ud-pr__src { display: block; margin-top: 3px; font-size: var(--ud-t-xs); line-height: 1.45; color: var(--ud-ink-3); text-wrap: balance; }
.ud-facts dd .ud-pr__src a { color: var(--ud-ink-2); padding: 8px 0; margin: -8px 0; display: inline; } /* inline, not inline-block: an atomic box let ", read <date>" wrap to its own line at 390 px (Oct 9 2026) */

/* The actions under the ledger: one primary, then the quiet ones. */
.ud-actions { display: grid; gap: 10px; margin-top: 20px; }

@media (min-width: 560px) {
    .ud-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ud-actions > .ud-actions__full { grid-column: 1 / -1; }
}

.ud-actions .ud-fine { grid-column: 1 / -1; }

/* Sharing: plain links and two buttons. Nothing is loaded from WhatsApp. */
.ud-share { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 16px; }
.ud-share__label { font-size: var(--ud-t-xs); font-weight: var(--ud-w-strong); letter-spacing: var(--ud-track-caps); text-transform: uppercase; color: var(--ud-ink-3); }

.ud-share__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--ud-t-s);
    color: var(--ud-forest-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ud-share__link:hover { color: var(--ud-forest); }
.ud-page a.ud-share__link { color: var(--ud-forest-deep); }

.ud-panel {
    background: var(--ud-card);
    border: 1px solid var(--ud-line);
    border-radius: var(--ud-r-m);
    padding: 20px;
}

.ud-panel > * + * { margin-top: 12px; }
.ud-panel--wash { background: var(--ud-wash); }

.ud-prose { font-size: var(--ud-t-m); line-height: 1.65; color: var(--ud-ink); max-width: 66ch; }
.ud-prose p { margin: 0 0 12px; }

/* r1367 (Oct 4 2026): line length. A blind panel seat measured the privacy prose at
   about 82 characters per line and the person-page quote at 95 to 117, against the
   45 to 75 bar. The container (.ud-wrap--narrow, 720px) is the right width for the
   page; it is the PROSE that must not run the full width. Cap the measure, not the
   layout, so nothing else on these pages moves.
   An absolute width, not `ch`: in this font 66ch computes to 692px, which is about 82
   average characters, so `ch` here is not the measure it looks like. 528px is about 66
   average characters at 16px and about 59 at the 18px lead. */
.ud-policy p,
.ud-policy li,
.ud-why__lead { max-width: 528px; }

.ud-dl { margin: 0; display: grid; gap: 14px; }
.ud-dl dt { font-size: var(--ud-t-xs); font-weight: var(--ud-w-strong); letter-spacing: var(--ud-track-caps); text-transform: uppercase; color: var(--ud-ink-3); margin: 0 0 2px; }
.ud-dl dd { margin: 0; font-size: var(--ud-t-m); color: var(--ud-ink); }

/* "About this page": the calm, smaller note under the page itself. */
.ud-about-page { border-top: 1px solid var(--ud-line); padding-top: 20px; }
.ud-about-page .ud-dl dd { font-size: var(--ud-t-s); line-height: 1.6; color: var(--ud-ink-2); max-width: 62ch; }

.ud-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ud-panel > .ud-points { margin-top: 12px; }

.ud-points li { position: relative; padding-left: 18px; font-size: var(--ud-t-m); line-height: 1.45; color: var(--ud-ink); }

.ud-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 2px;
    background: var(--ud-brass);
}

.ud-free { font-size: var(--ud-t-s); font-weight: var(--ud-w-strong); color: var(--ud-forest-deep); margin: 0; }
.ud-points + .ud-free { margin-top: 12px; }
.ud-panel .ud-dl { border-top: 1px solid var(--ud-line); padding-top: 14px; }

/* On a phone the way to reach him stays one thumb away. It steps aside when
   the buttons themselves are on screen. Without scripts it simply stays. */
.ud-actbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--ud-paper);
    border-top: 1px solid var(--ud-line-strong);
    box-shadow: var(--ud-shadow);
}

.ud-actbar .ud-btn { flex: 1 1 auto; min-width: 0; }
.ud-actbar .ud-btn--quiet { flex: 0 0 auto; }
.ud-actbar--away { display: none; }
.ud-entry--bar { padding-bottom: 24px; }
/* The bar must never sit on the last line of the page: the footer makes
   room for it on a phone. */
@media (max-width: 899px) {
    body:has(.ud-actbar) .ud-footer { padding-bottom: 112px; }
}

@media (min-width: 900px) {
    .ud-actbar { display: none; }
}

@media print {
    .ud-header, .ud-footer, .ud-crumbs, .ud-actbar, .ud-share, .ud-entry__side, .ud-actions, .ud-section[aria-labelledby="ud-more"], .ud-owner, .ud-value, .ud-themeswitch { display: none !important; }
    .ud-page, body.ud-page { background: #fff; }
    .ud-plate { background: none; color: #000; box-shadow: none; padding: 0 0 12pt; border-bottom: 1pt solid #000; border-radius: 0; }
    .ud-plate::before { display: none; }
    .ud-plate__name, .ud-plate__practice, .ud-plate__kicker, .ud-plate__address { color: #000; opacity: 1; }
    .ud-arch { border-color: #000; background: none; }
    .ud-entry__grid { display: block; margin-top: 12pt; }
    .ud-entry__main { gap: 14pt; }
    .ud-facts dd a { text-decoration: none; color: #000; }
    .ud-facts dd a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
    .ud-notice { border: 1pt solid #000; background: none; color: #000; }
    .ud-wrap { max-width: none; padding: 0; }
}

/* ── Ready page ─────────────────────────────────────────────────────────── */

.ud-status {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--ud-warn-line);
    background: var(--ud-warn-ground);
    color: var(--ud-warn-ink);
    border-radius: var(--ud-r-s);
    padding: 14px 16px;
    font-size: var(--ud-t-m);
    line-height: 1.45;
    font-weight: 400;
}

.ud-status--public { border-color: var(--ud-forest-line); background: var(--ud-forest-tint); color: var(--ud-forest-deep); }

.ud-status__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; margin-top: 7px; }

.ud-ready { padding-top: 20px; }
.ud-ready .ud-h1 { margin-top: 20px; }
.ud-ready .ud-lead { margin-top: 12px; }

.ud-ready__grid { display: grid; gap: 28px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 960px) {
    .ud-ready__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; margin-top: 36px; }
    .ud-ready__side { position: sticky; top: 24px; }
}

.ud-ready__side { display: grid; gap: 16px; }

/* The preview frame. Inside it the page is drawn exactly as the public
   page. While the page is private the frame is a dashed brass line: the
   plate is made, and it is not on the wall yet. */
.ud-preview { border: 1px solid var(--ud-line); border-radius: var(--ud-r-m); padding: 12px; background: var(--ud-paper); }
.ud-preview--private { border: 2px dashed var(--ud-brass-edge); }

@media (min-width: 720px) {
    .ud-preview { padding: 20px; }
}

.ud-preview-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--ud-t-xs);
    font-weight: var(--ud-w-strong);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ud-ink-3);
    margin: 0 0 10px;
}

.ud-preview-label::after { content: ''; flex: 1; height: 1px; background: var(--ud-line-strong); }

.ud-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--ud-edge);
    border-radius: var(--ud-r-s);
    background: var(--ud-card);
    cursor: pointer;
    min-height: 48px;
}

.ud-check input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ud-forest); }
.ud-check__label { font-size: var(--ud-t-l); font-weight: var(--ud-w-strong); color: var(--ud-ink); line-height: 1.3; }

.ud-error { color: var(--ud-danger); font-size: var(--ud-t-s); font-weight: var(--ud-w-strong); margin: 0; }

.ud-details summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ud-danger);
    font-weight: var(--ud-w-strong);
    font-size: var(--ud-t-m);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ud-details summary::-webkit-details-marker { display: none; }

/* The removal request on a public page: a plain line, not an alarm. */
.ud-details--quiet summary { color: var(--ud-ink-2); font-size: var(--ud-t-s); font-weight: 400; }
.ud-details[open] summary { text-decoration: none; }
.ud-details__body { margin-top: 8px; display: grid; gap: 12px; }

.ud-copy { display: flex; gap: 8px; }
.ud-copy .ud-field { font-size: var(--ud-t-s); }

.ud-value { border: 1px solid var(--ud-line-strong); border-radius: var(--ud-r-m); padding: 18px; background: var(--ud-card); }
.ud-value > * + * { margin-top: 12px; }
.ud-value__price { font-family: var(--ud-display); font-weight: var(--ud-w-name); font-size: var(--ud-t-xl); color: var(--ud-ink); margin: 0; }

/* ── Plain centred message pages (claim steps, not found, removed) ──────── */

.ud-message { padding-top: 40px; padding-bottom: 16px; }
.ud-message > * + * { margin-top: 16px; }
.ud-message__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.ud-form { display: grid; gap: 14px; margin-top: 20px; }
.ud-label { display: block; font-size: var(--ud-t-s); font-weight: var(--ud-w-strong); color: var(--ud-ink); margin: 0 0 6px; }

/* ── The next step, one tap away on a phone (ready page) ────────────────── */

.ud-nextbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--ud-paper);
    border-top: 1px solid var(--ud-line-strong);
    box-shadow: var(--ud-shadow);
}

.ud-nextbar--away { display: none; }

.ud-ready { padding-bottom: 84px; }

@media (min-width: 960px) {
    .ud-nextbar { display: none; }
    .ud-ready { padding-bottom: 0; }
}

#ud-next { scroll-margin-top: 76px; }

/* Once the page is public, the next step (claim) leads on a phone: he has
   already seen his page. */
@media (max-width: 959px) {
    .ud-ready__grid--act-first .ud-ready__side { order: -1; }
}

/* Inside the preview column the nameplate is narrower than the page. */
@media (min-width: 960px) {
    .ud-preview .ud-plate__name { font-size: var(--ud-t-xl); }
    .ud-preview .ud-plate { padding: 36px 36px 32px; }
}

/* On a phone the pager is three things: back, where you are, forward. The
   numbered pages appear when there is room for them. */
.ud-pager__where { font-size: var(--ud-t-s); color: var(--ud-ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 639px) {
    .ud-pager__pages { display: none; }
}

@media (min-width: 640px) {
    .ud-pager__where { display: none; }
}

/* A link that stands alone on its line gets a full-size target. */
.ud-rowlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ud-forest-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.ud-rowlink:hover { color: var(--ud-forest); }

/* The source's words on an unclaimed entry: shown as a quotation, never as
   the directory's own statement. */
.ud-quote {
    margin: 12px 0 0;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--ud-brass);
    font-size: var(--ud-t-m);
    line-height: 1.65;
    color: var(--ud-ink);
    /* r1367: 66ch in this font is ~82 average characters at 16px and ~95 at 14px.
       An absolute measure instead, sized for the 14px quote. */
    max-width: 500px;
}

.ud-quote p { margin: 0 0 12px; }
.ud-quote p:last-child { margin-bottom: 0; }

/* The privacy page: plain paragraphs, one idea each. */
.ud-policy section { margin-top: 32px; }
.ud-policy section > p { font-size: var(--ud-t-m); line-height: 1.65; color: var(--ud-ink); margin: 10px 0 0; max-width: 528px; }
.ud-policy section > .ud-fine { color: var(--ud-ink-3); font-size: var(--ud-t-xs); margin-top: 16px; }

/* ── Sign in, and the signed-in menu ────────────────────────────────────── */

.ud-header__signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    font-size: var(--ud-t-s);
    font-weight: 400;
    color: var(--ud-ink-2);
    text-decoration: none;
    border-radius: var(--ud-r-s);
    white-space: nowrap;
}

.ud-header__signin:hover { color: var(--ud-ink); background: var(--ud-wash); }

.ud-wide-only { display: none; }

@media (min-width: 480px) {
    .ud-wide-only { display: inline; }
}

.ud-menu { position: relative; }

.ud-menu__button {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 8px;
    border-radius: var(--ud-r-s);
    cursor: pointer;
    font-size: var(--ud-t-s);
    font-weight: 400;
    color: var(--ud-ink);
}

.ud-menu__button::-webkit-details-marker { display: none; }
.ud-menu__button:hover { background: var(--ud-wash); }

.ud-menu__initial {
    width: 30px;
    height: 30px;
    border-radius: var(--ud-r-xs);
    background: var(--ud-plate);
    color: var(--ud-plate-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ud-display);
    font-weight: var(--ud-w-name);
    font-size: var(--ud-t-m);
}

.ud-menu__name { display: none; }

@media (min-width: 720px) {
    .ud-menu__name { display: inline; }
}

.ud-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 190px;
    background: var(--ud-card);
    border: 1px solid var(--ud-line-strong);
    border-radius: var(--ud-r-m);
    padding: 6px;
    box-shadow: var(--ud-shadow);
    z-index: 50;
    display: grid;
}

.ud-menu__list a,
.ud-menu__list button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    border-radius: var(--ud-r-xs);
    font: inherit;
    font-size: var(--ud-t-m);
    color: var(--ud-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ud-menu__list a:hover,
.ud-menu__list button:hover { background: var(--ud-wash); }

.ud-menu__list form { margin: 0; border-top: 1px solid var(--ud-line); margin-top: 4px; padding-top: 4px; }

/* The owner strip on his own page. */
.ud-owner {
    border: 1px solid var(--ud-forest-line);
    background: var(--ud-forest-tint);
    color: var(--ud-forest-deep);
    border-radius: var(--ud-r-s);
    padding: 12px 16px;
    margin: 0 0 12px;
    font-size: var(--ud-t-m);
}

.ud-owner p { margin: 0; }
.ud-owner + .ud-value { margin-bottom: 12px; }

/* The Promoted strip: paid advertising, in its own box, above the results. */
.ud-promoted { border: 1px solid var(--ud-line-strong); border-radius: var(--ud-r-m); background: var(--ud-wash); padding: 14px; margin: 0 0 24px; }
.ud-promoted > .ud-kicker { margin: 0 0 12px; }

/* ── Round 3 (Oct 2 2026): finish ───────────────────────────────────────── */

/* The index of professions as a band: four columns on a wide screen. */
@media (min-width: 1000px) {
    .ud-board--cols { columns: 4; column-gap: 48px; }
}

/* The pager is one row at every width. The numbered pages need room: below
   900px it is back, where you are, forward. */
.ud-pager { flex-wrap: nowrap; }
@media (max-width: 899px) {
    .ud-pager__pages { display: none; }
    .ud-pager__where { display: inline; }
}
@media (min-width: 900px) {
    .ud-pager__where { display: none; }
}

/* The crisis line. Its two links are the most urgent on the site: each is
   a full-size target, with no change to how the sentence reads. */
.ud-notice--crisis { line-height: 1.7; }
.ud-notice__link { display: inline-block; padding: 13px 10px; margin: -13px -10px; font-weight: var(--ud-w-strong); text-decoration: underline; text-underline-offset: 3px; }

/* A grid of three that would leave one card alone in a two-column grid. */
@media (min-width: 640px) and (max-width: 999px) {
    .ud-grid--related > :nth-child(3) { display: none; }
}

/* The source's words, set as a quotation in the serif. */
.ud-quote { font-family: var(--ud-display); font-weight: var(--ud-w-display); font-size: var(--ud-t-l); line-height: 1.5; }

/* A region's page: the same hero, with no window and no index beside it. */
.ud-region .ud-hero { padding-bottom: 8px; }
.ud-region .ud-results { padding-top: 20px; }

/* An address and its full stop stay together. */
.ud-keep { white-space: nowrap; }

/* Oct 5 2026 (three blind seats, same finding): a long source domain in the
   'As written on <host>' heading was nowrap, so it widened the column past the
   viewport and the page scrolled sideways at 390 (scrollWidth 424 against
   clientWidth 375, measured on dr-asim-rizvi and on the chicagomuslimdentalsociety
   entries). The standard's own bar is scrollWidth == clientWidth. Scoped so
   .ud-keep keeps its nowrap where the token really is short. */
.ud-h2 .ud-keep, .ud-h2__ink .ud-keep, .ud-credits .ud-keep {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* The theme switch: a bar in the page flow, above the header. It covers
   nothing. Shown only to a browser that holds the ud_theme cookie. */
.ud-themeswitch { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 16px; background: #1c1b18; color: #f4efe6; font: 400 13px/1 var(--ud-sans); }
.ud-themeswitch__label { padding: 0 8px 0 0; opacity: 0.7; }
.ud-themeswitch a { color: inherit; text-decoration: none; padding: 9px 14px; border-radius: 999px; }
.ud-themeswitch a[aria-current="true"] { background: #f4efe6; color: #1c1b18; }
.ud-themeswitch a:focus-visible { outline: 2px solid #c9a24b; outline-offset: 2px; }
@media print { .ud-themeswitch { display: none; } }

/* ── The ready page: the decision, and what happens next ────────────────── */

.ud-ready .ud-h1 { margin-top: 8px; }
.ud-ready .ud-status { margin-top: 16px; }
.ud-decide__remove { margin-top: 4px; }
/* "Remove this page" is a full button here. It opens a second step, so a
   page is never deleted by one tap. */
.ud-details summary.ud-btn { display: flex; color: var(--ud-ink-2); border-color: var(--ud-edge); text-decoration: none; font-size: var(--ud-t-m); }
.ud-details summary.ud-btn:hover { background: var(--ud-wash); }
.ud-details[open] summary.ud-btn { border-style: dashed; }

.ud-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: ud-next; }
.ud-steps li { position: relative; padding-left: 30px; font-size: var(--ud-t-m); line-height: 1.45; color: var(--ud-ink); counter-increment: ud-next; }
.ud-steps li::before { content: counter(ud-next); position: absolute; left: 0; top: 0; font-family: var(--ud-display); font-weight: var(--ud-w-name); font-size: var(--ud-t-l); line-height: 1.3; color: var(--ud-brass-ink); }

/* ── The modern theme, bridged ──────────────────────────────────────────────
   The modern theme is a separate file from the design seat. It was written
   against an earlier page: it names the home's parts as grid areas, and it
   expects a line of small capitals above the headline. These rules give it
   what it expects, so the two files can change apart. They touch nothing in
   the editorial theme. */
html[data-ud-theme="modern"] .ud-band { display: none; }
html[data-ud-theme="modern"] .ud-chips--jump .ud-chip { color: var(--m-ink); background: var(--m-card); border-color: var(--m-line); }
html[data-ud-theme="modern"] .ud-chips--jump .ud-chip__n { color: var(--m-teal-deep); }
html[data-ud-theme="modern"] .ud-directory--home .ud-hero { padding-top: 28px; }
html[data-ud-theme="modern"] .ud-headplate { background: none; color: inherit; padding: 0; border-radius: 0; box-shadow: none; }
html[data-ud-theme="modern"] .ud-headplate::before, html[data-ud-theme="modern"] .ud-headplate::after { display: none; }
html[data-ud-theme="modern"] .ud-headplate .ud-h1, html[data-ud-theme="modern"] .ud-headplate__lead { color: inherit; }
@media (min-width: 720px) {
    html[data-ud-theme="modern"] .ud-directory--home .ud-hero { display: block; }
    html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-window { width: 168px; margin: 0; }
    html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-lead { min-height: 0; }
}
@media (min-width: 1000px) {
    html[data-ud-theme="modern"] .ud-directory > .ud-directory__hero { grid-area: hero; }
    html[data-ud-theme="modern"] .ud-directory > .ud-directory__results { grid-area: results; }
    html[data-ud-theme="modern"] .ud-directory > .ud-directory__board { grid-area: board; }
    html[data-ud-theme="modern"] .ud-directory > .ud-directory__how { grid-area: how; }
    html[data-ud-theme="modern"] .ud-directory--home .ud-hero { display: block; padding: 56px 0; }
    html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-window { width: 168px; margin: 0; }
    html[data-ud-theme="modern"] .ud-board--cols { columns: 1; }
}
@media (min-width: 1100px) {
    html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-window { width: 288px; }
}
/* On a phone the window sits beside the lead, as in the editorial theme: the
   headline has the whole column. */
@media (max-width: 719px) {
    html[data-ud-theme="modern"] .ud-directory--home .ud-hero .ud-window {
        display: block;
        position: static;
        float: right;
        width: 120px;
        margin: 10px 0 0 16px;
    }
    html[data-ud-theme="modern"] .ud-directory--home .ud-search, html[data-ud-theme="modern"] .ud-directory--home .ud-chips { clear: both; }
}
@media (min-width: 1000px) {
    html[data-ud-theme="modern"] .ud-board--cols { display: block; }
}

/* ── The glyph (r1246): the khatam at 10 px, filled ─────────────────────────
   One home besides the placeholder: the marker on the profession you are
   reading. Never a bullet in rows, never on a button, a chip or a card. */
.ud-board__row--on .ud-board__name::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    background: var(--ud-brass);
    -webkit-mask: var(--ud-glyph) center / contain no-repeat;
    mask: var(--ud-glyph) center / contain no-repeat;
}

/* ── The Featured section (r1245 item 3) ────────────────────────────────────
   Paid placement, said in words on the section. A plain framed band above
   the results: no ornament in it or beside it, so it can never read as a
   seal. The cards inside are the same cards as the list. */
.ud-featured { margin: 0 0 28px; }
.ud-featured__frame { border: 1px solid var(--ud-line-strong); border-radius: var(--ud-r-m); background: var(--ud-wash); padding: 16px; }
.ud-featured__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ud-featured__title { font-family: var(--ud-display); font-weight: var(--ud-w-name); font-size: var(--ud-t-l); line-height: 1.2; color: var(--ud-ink); margin: 0; }
.ud-featured__label { font-size: var(--ud-t-xs); font-weight: var(--ud-w-strong); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--ud-ink); background: var(--ud-card); border: 1px solid var(--ud-edge); border-radius: var(--ud-r-xs); padding: 6px 8px; margin: 0; white-space: nowrap; }
.ud-featured__note { font-size: var(--ud-t-s); color: var(--ud-ink-2); margin: 0 0 12px; }
.ud-featured__foot { margin: 12px 0 0; }
.ud-featured__lead { margin: 6px 0 14px; max-width: 60ch; }
.ud-featured--own { margin: 28px 0 0; }
.ud-featured--own .ud-grid--three { grid-template-columns: minmax(0, 440px); }
.ud-owner + .ud-featured--own { margin: 0 0 24px; }
@media (min-width: 720px) {
    .ud-featured__frame { padding: 20px 22px; }
}
@media print { .ud-featured { display: none; } }

/* ── Why be listed (r1246 C) ────────────────────────────────────────────────
   For the professional who is reading. Numbers are read from the data when
   the page is drawn. One display sentence, then plain ruled lines. */
.ud-why { grid-column: 1 / -1; }
.ud-why__lead { font-size: var(--ud-t-m); line-height: 1.5; color: var(--ud-ink-2); margin: 8px 0 14px; max-width: 44ch; }
.ud-why__count { font-family: var(--ud-display); font-weight: var(--ud-w-name); font-size: var(--ud-t-xl); line-height: 1.25; color: var(--ud-forest-deep); margin: 0; text-wrap: balance; }
.ud-why__list { list-style: none; margin: 14px 0 0; padding: 0; font-size: var(--ud-t-m); line-height: 1.45; color: var(--ud-ink); }
.ud-why__list li { padding: 8px 0; border-top: 1px solid var(--ud-line); }
.ud-why--band { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--ud-line); display: grid; gap: 20px; }
@media (min-width: 900px) {
    .ud-why--band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
}
.ud-why--side, .ud-why--panel { margin-top: 16px; padding: 18px 20px 10px; border: 1px solid var(--ud-line); border-radius: var(--ud-r-m); background: var(--ud-card); }
.ud-why--panel { margin-top: 28px; }
.ud-why--side .ud-why__count, .ud-why--panel .ud-why__count { font-size: var(--ud-t-l); }
.ud-why--side .ud-why__lead, .ud-why--panel .ud-why__lead { font-size: var(--ud-t-s); margin-bottom: 12px; }
.ud-why--side .ud-why__list, .ud-why--panel .ud-why__list { font-size: var(--ud-t-s); margin-top: 10px; }
@media print { .ud-why { display: none; } }

/* A page for a group of professions (/health): the same quiet page as a region. */
.ud-collection .ud-directory__board { margin-top: 40px; }

/* ── The private page, second read (design review, Oct 2 2026) ───────────── */

/* The greeting by name, above the heading. */
.ud-ready__greet { margin: 0 0 6px; }
.ud-ready .ud-ready__greet + .ud-h1 { margin-top: 0; }

/* Who can see it: smaller, so his nameplate is on the first screen. */
.ud-status--small { font-size: var(--ud-t-s); padding: 10px 12px; gap: 10px; margin-top: 12px; }
.ud-status--small .ud-status__dot { margin-top: 5px; }

/* His nameplate, first: a picture of it in the dashed frame. */
.ud-preview--plate { margin-top: 14px; }
.ud-ready__intro { margin-top: 10px; max-width: 62ch; font-size: var(--ud-t-m); line-height: 1.45; color: var(--ud-ink); }
.ud-ready__intro p { margin: 0 0 6px; }
.ud-ready__note { color: var(--ud-forest-deep); font-weight: var(--ud-w-strong); }
.ud-ready__after { margin: 16px 0 0; max-width: 62ch; font-size: var(--ud-t-m); line-height: 1.5; color: var(--ud-ink-2); }
/* On a phone the nameplate is a little closer set, so the whole plate is on
   the first screen under the greeting and the two lines. */
@media (max-width: 719px) {
    .ud-ready { padding-top: 12px; }
    .ud-ready .ud-status--small { margin-top: 8px; }
    .ud-preview--plate { padding: 8px; margin-top: 10px; }
    .ud-preview--plate .ud-plate { padding: 22px 20px 22px; }
    .ud-preview--plate .ud-arch--plate { width: 96px; }
    .ud-preview--plate .ud-plate::after { top: 10px; right: 10px; width: 136px; height: 136px; background-size: 68px 68px; }
}
/* The bar waits until he starts to scroll: the first screen is his plate. */
.ud-nextbar.ud-nextbar--wait { display: none; }

/* A preview is a picture of the page. Nothing in it can be tapped, and its
   button is drawn as an outline so the real decision is the only solid one. */
.ud-preview[inert] { pointer-events: none; user-select: none; -webkit-user-select: none; }
.ud-preview[inert] .ud-btn--primary { background: transparent; color: var(--ud-forest-deep); border: 1px solid var(--ud-forest); box-shadow: none; }
.ud-page .ud-preview[inert] a.ud-btn--primary { color: var(--ud-forest-deep); }
.ud-preview-note { margin: 8px 2px 0; }
.ud-ready__fix { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--ud-line-strong); border-radius: var(--ud-r-m); background: var(--ud-card); font-size: var(--ud-t-m); line-height: 1.5; max-width: 62ch; }
.ud-ready__fix a { font-weight: var(--ud-w-strong); }
.ud-decide__free { margin: -6px 0 0; text-align: center; }

/* The bar holds both choices while the page is private: the button, and
   "Remove" as a quiet text link with a full-size target. */
.ud-nextbar--two { display: flex; align-items: center; gap: 4px; }
.ud-nextbar--two .ud-btn { flex: 1 1 auto; }
.ud-nextbar__quiet { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; font-size: var(--ud-t-m); font-weight: var(--ud-w-strong); color: var(--ud-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ud-page a.ud-nextbar__quiet { color: var(--ud-ink-2); }
.ud-nextbar--two.ud-nextbar--away { display: none; }

/* ── The second design review (Oct 2 2026) ─────────────────────────────────── */

/* THE HEADING PLATE: a list page's heading on the forest plate, with the
   lattice set still into its empty side. The field, one plate on the page.
   The words never sit on the lattice. */
.ud-headplate {
    position: relative;
    margin-top: 6px;
    padding: 24px 22px 24px;
    background: var(--ud-plate);
    color: var(--ud-plate-ink);
    border-radius: var(--ud-r-m);
    box-shadow: var(--ud-shadow);
    overflow: hidden;
}
.ud-headplate::before { content: ''; position: absolute; inset: 9px; border: 1px solid var(--ud-brass); border-radius: var(--ud-r-xs); pointer-events: none; }
/* The lattice has a FIXED tile at every width. (It was tied to the plate's
   height: a taller title made a wider lattice, which narrowed the title,
   which made it taller: five lines on /health at 768.)
   On a phone: one row of stars across the top, inside the rule. */
.ud-headplate::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c8912e' stroke-linejoin='miter'%3E%3Cpath stroke-width='1.3' d='M40 0l11.72 11.72l16.57 0l0 16.57l11.72 11.72l-11.72 11.72l0 16.57l-16.57 0l-11.72 11.72l-11.72 -11.72l-16.57 0l0 -16.57l-11.72 -11.72l11.72 -11.72l0 -16.57l16.57 0z'/%3E%3Cpath stroke-width='0.8' d='M51.72 11.72l16.57 16.57l0 23.43l-16.57 16.57l-23.43 0l-16.57 -16.57l0 -23.43l16.57 -16.57z'/%3E%3C/svg%3E") left top / 44px 44px repeat-x;
    opacity: 0.45;
    pointer-events: none;
}
.ud-headplate { padding-top: 70px; }
.ud-headplate__text { position: relative; }
.ud-headplate .ud-h1 { color: var(--ud-plate-ink); margin: 0; text-wrap: balance; }
.ud-headplate__lead { margin: 10px 0 0; font-size: var(--ud-t-m); line-height: 1.5; color: var(--ud-plate-ink); opacity: 0.92; max-width: 52ch; }
.ud-hero .ud-headplate + .ud-search { margin-top: 20px; }
@media (min-width: 720px) {
    .ud-headplate { padding: 36px 44px 36px; }
    .ud-headplate::before { inset: 12px; }
    /* One column at the right, 76 px stars, cropped by the plate above
       and below alike. The title has the rest of the width. */
    .ud-headplate::after { top: 13px; bottom: 13px; left: auto; right: 13px; height: auto; width: 76px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c8912e' stroke-linejoin='miter'%3E%3Cpath stroke-width='1.3' d='M40 0l11.72 11.72l16.57 0l0 16.57l11.72 11.72l-11.72 11.72l0 16.57l-16.57 0l-11.72 11.72l-11.72 -11.72l-16.57 0l0 -16.57l-11.72 -11.72l11.72 -11.72l0 -16.57l16.57 0z'/%3E%3Cpath stroke-width='0.8' d='M51.72 11.72l16.57 16.57l0 23.43l-16.57 16.57l-23.43 0l-16.57 -16.57l0 -23.43l16.57 -16.57z'/%3E%3C/svg%3E") right center / 76px 76px repeat; }
    .ud-headplate__text { max-width: calc(100% - 108px); }
}
@media (min-width: 1000px) {
    .ud-headplate::after { width: 228px; opacity: 0.5; }
    .ud-headplate__text { max-width: calc(100% - 270px); }
}
@media print {
    .ud-headplate { background: none; color: #000; box-shadow: none; padding: 0; }
    .ud-headplate::before, .ud-headplate::after { display: none; }
    .ud-headplate .ud-h1, .ud-headplate__lead { color: #000; }
}

/* A region page: the count in the body, jump chips, groups by profession. */
.ud-region__count { margin: 20px 0 0; }
.ud-chips--jump { margin-top: 14px; }
.ud-chip__n { margin-left: 8px; font-weight: var(--ud-w-strong); color: var(--ud-brass-ink); font-variant-numeric: tabular-nums; }
.ud-group { margin-top: 36px; scroll-margin-top: 16px; }
.ud-group:first-of-type { margin-top: 28px; }
.ud-group__title { margin: 0 0 14px; }

/* The letters after a name, together on their own line under it. */
.ud-card__creds { display: block; margin-top: 3px; font-family: var(--ud-sans); font-weight: 400; font-size: var(--ud-t-s); line-height: 1.35; letter-spacing: 0; color: var(--ud-ink-2); }
.ud-card__name { text-wrap: balance; }

/* The professions index: four balanced columns, read down each column. The
   place of each row comes from the page (--c, --r). */
@media (min-width: 1000px) {
    .ud-board--cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; columns: auto; }
    .ud-board--cols > li { grid-column: var(--c); grid-row: var(--r); }
}

.ud-how__title { text-wrap: balance; }
.ud-notice--plain { margin: 0 0 16px; }

/* ── The third design read (Oct 2 2026) ─────────────────────────────────── */

/* "Why be listed" on a person's page: one closed line on a phone, out of
   the visitor's path; the whole block beside the claim on a wide screen.
   Never both. */
.ud-why-fold { margin-top: 4px; border-top: 1px solid var(--ud-line); border-bottom: 1px solid var(--ud-line); }
.ud-why-fold > summary { display: flex; align-items: center; min-height: 48px; font-size: var(--ud-t-m); font-weight: var(--ud-w-strong); color: var(--ud-forest-deep); cursor: pointer; }
.ud-why--fold { padding: 0 0 14px; }
.ud-why--fold .ud-why__lead { margin-top: 0; font-size: var(--ud-t-s); }
.ud-why--fold .ud-why__count { font-size: var(--ud-t-l); }
.ud-why--fold .ud-why__list { font-size: var(--ud-t-s); margin-top: 10px; }
.ud-why-wide { display: none; }
@media (min-width: 900px) {
    .ud-why-fold { display: none; }
    .ud-why-wide { display: block; }
}
.ud-why__list a { text-decoration: underline; text-underline-offset: 3px; }

/* The Featured label sits beside its heading, not across the page from it. */
.ud-featured__head { justify-content: flex-start; }

/* The private page: the greeting is the headline. */
.ud-ready__hello { text-wrap: balance; }
.ud-ready .ud-ready__hello { margin-top: 4px; }
.ud-ready .ud-error { margin-top: -4px; }

/* A profession page's city chips stay one sliding row below 1000px: one
   chip alone on a second row read as a mistake. */
@media (min-width: 720px) and (max-width: 999px) {
    .ud-directory:not(.ud-directory--home) .ud-hero .ud-chips { flex-wrap: nowrap; overflow-x: auto; margin: 16px -32px 0 0; padding: 0 40px 4px 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
}

/* ── The fourth design read, the security check and QA (Oct 2 2026) ──────── */

/* Why be listed: the count as one display line and one plain line. Beside
   the claim, and folded on a phone, both are plain text: a display line in
   a narrow card broke into four. */
.ud-why__where { margin: 6px 0 0; font-size: var(--ud-t-m); font-weight: var(--ud-w-strong); line-height: 1.4; color: var(--ud-ink); }
.ud-why--side .ud-why__count, .ud-why--panel .ud-why__count, .ud-why--fold .ud-why__count { font-family: var(--ud-sans); font-size: var(--ud-t-m); font-weight: var(--ud-w-strong); line-height: 1.4; color: var(--ud-forest-deep); text-wrap: pretty; }
.ud-why--side .ud-why__where, .ud-why--panel .ud-why__where, .ud-why--fold .ud-why__where { font-size: var(--ud-t-s); font-weight: 400; margin-top: 4px; }

/* A long group folds after six people. The summary is a full-size target. */
.ud-more { margin-top: 12px; }
.ud-more__summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--ud-edge); border-radius: var(--ud-r-s); background: var(--ud-card); font-size: var(--ud-t-m); font-weight: var(--ud-w-strong); color: var(--ud-forest-deep); cursor: pointer; list-style: none; }
.ud-more__summary::-webkit-details-marker { display: none; }
.ud-more__summary:hover { background: var(--ud-forest-tint); }
.ud-more[open] > .ud-more__summary { display: none; }
.ud-more > .ud-grid { margin-top: 0; }

/* /health on a phone: the chips under the search name the professions, so
   the form is one row (the place and the button) and a person is on the
   first screen. */
@media (max-width: 719px) {
    .ud-search--collection > div:first-child { display: none; }
    .ud-collection .ud-headplate__lead { font-size: var(--ud-t-s); }
    .ud-collection .ud-chips--jump { margin-top: 10px; }
}
.ud-count .ud-link { margin-left: 6px; }
.ud-policy .ud-headplate { margin-bottom: 20px; }
@media (min-width: 1000px) {
    /* A narrow page: two columns of stars, so the heading is one line. */
    .ud-policy .ud-headplate::after { width: 152px; }
    .ud-policy .ud-headplate__text { max-width: calc(100% - 190px); }
}

/* Under the modern theme the footer also makes room for the phone bar. */
@media (max-width: 899px) {
    html[data-ud-theme="modern"] body:has(.ud-actbar) .ud-footer { padding-bottom: 112px; }
}

/* A profession page's link to the region pages it has people in. */
.ud-also { margin: 20px 0 0; font-size: var(--ud-t-s); color: var(--ud-ink-2); }

/* r1257: the ad unit, built dark. One a page, below the results. The box is
   reserved at the exact height of the size in use, plus one label line, so
   nothing moves when an ad draws. The unit stays [hidden] until its own
   script runs, and goes back to [hidden] when nothing fills. The label is
   shown only once an ad is in the box. */
.ud-ad { margin: 40px auto 0; max-width: 100%; overflow: hidden; text-align: center; }
.ud-ad[hidden] { display: none; }
.ud-ad__box { display: flex; align-items: center; justify-content: center; margin: 0 auto; max-width: 100%; overflow: hidden; }
.ud-ad--list .ud-ad__box { height: 50px; }
.ud-ad--city .ud-ad__box { height: 250px; }
.ud-ad__label { height: 20px; margin: 0; font-size: var(--ud-t-xs); line-height: 20px; letter-spacing: 0.04em; color: var(--ud-ink-3); visibility: hidden; }
.ud-ad--filled .ud-ad__label, .ud-ad--preview .ud-ad__label { visibility: visible; }
@media (min-width: 800px) {
    .ud-ad--list .ud-ad__box { height: 90px; }
}
/* The reviewer's preview: the reserved box drawn as an outline. No ad. */
.ud-ad--preview .ud-ad__box { width: 320px; border: 1px dashed var(--ud-edge); border-radius: var(--ud-r-xs); color: var(--ud-ink-3); font-size: var(--ud-t-xs); letter-spacing: 0.04em; box-sizing: border-box; }
.ud-ad--preview.ud-ad--city .ud-ad__box { width: 300px; }
.ud-ad__note { font-size: var(--ud-t-s); color: var(--ud-ink-2); margin: 0 0 12px; }
.ud-ad__size--wide { display: none; }
@media (min-width: 800px) {
    .ud-ad--preview.ud-ad--list .ud-ad__box { width: 728px; }
    .ud-ad--list .ud-ad__size--wide { display: inline; }
    .ud-ad--list .ud-ad__size--narrow { display: none; }
}

/* r1260 round 1: the header button reads "Get listed" and stays on one line
   at every width. Under 420px the row tightens; under 380px the brand word
   steps down one size; under 340px only the mark shows (the link keeps its
   aria-label), so nothing runs off a 320px screen. */
.ud-header .ud-btn--primary { white-space: nowrap; }
@media (max-width: 419px) {
    .ud-header .ud-btn--primary { padding: 0 12px; }
    .ud-header__signin { padding-left: 8px; padding-right: 8px; }
    .ud-header__nav { gap: 2px; }
    /* r2038 (Oct 14 2026): the ladder above still ran the row 26px past a 360px
       viewport, measured on every page (offenders: the nav and the Get listed
       button). The brand gives way instead of the actions: it ellipsizes, and the
       nav keeps both its buttons at full size. The link keeps its aria-label, so
       a screen reader still hears the whole name. */
    .ud-header__row { min-width: 0; }
    .ud-brand { min-width: 0; overflow: hidden; }
    .ud-brand__words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 379px) {
    .ud-brand { font-size: var(--ud-t-m); gap: 8px; }
    .ud-header__row { gap: 8px; }
    .ud-header__signin { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 339px) {
    .ud-brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* r1260 round 2: Claim and "Ask us to remove it", two buttons of the same
   weight and the same width, side by side. Opening the removal request
   moves it to its own full row, with its one line and its send button. */
.ud-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ud-twin__remove { min-width: 0; }
.ud-twin > .ud-btn, .ud-twin__remove > summary { width: 100%; box-sizing: border-box; padding-left: 8px; padding-right: 8px; font-size: var(--ud-t-s); text-align: center; white-space: nowrap; }
.ud-twin__remove > summary { list-style: none; }
.ud-twin__remove > summary::-webkit-details-marker { display: none; }
.ud-twin__remove[open] { grid-column: 1 / -1; }
.ud-twin__remove[open] > summary { background: var(--ud-forest-tint); }

/* r1263: the theme line in the footer, for every visitor. Quiet, plain links,
   44px targets, the theme in use marked by weight, not colour alone. */
.ud-footer__theme { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 20px 0 0; font-size: var(--ud-t-s); }
.ud-footer__theme > span:first-child { margin-right: 4px; }
.ud-footer__theme a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 8px; }
.ud-footer__theme a[aria-current="true"] { font-weight: var(--ud-w-strong); text-decoration: none; }

/* r1260 round 4. The card's link: the last word and the arrow are one unit,
   and the label wraps as text (it was a flex row, so a two-line label held
   its arrow in the middle of the block). Still a 44px target. */
.ud-card__go--tail { display: inline-block; padding: 12px 0; margin: -12px 0 -14px; line-height: 1.45; }
.ud-card__go--tail::after { content: none; }
.ud-card__go-tail { white-space: nowrap; }
.ud-card__go-tail::after { content: '\2192'; margin-left: 6px; display: inline-block; text-decoration: none; transition: transform 0.15s ease; }
.ud-card__go--tail:hover .ud-card__go-tail::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ud-card__go-tail::after { transition: none; } }

/* The main action under the name, on a wide screen only. A light button on
   the plate: the plate is the action colour's own ground. */
.ud-plate__go { display: none; }
.ud-btn--onplate { background: var(--ud-plate-ink); color: var(--ud-plate); border-color: var(--ud-plate-ink); }
.ud-btn--onplate:hover { background: #fff; border-color: #fff; }
.ud-page a.ud-btn--onplate { color: var(--ud-plate); }
@media (min-width: 720px) {
    .ud-plate__go { display: block; margin: 18px 0 0; }
}

/* A list page's heading on a phone: a title strip, so the first whole card
   is on the first screen. No row of stars; the keyline stays. */
@media (max-width: 719px) {
    .ud-hero .ud-headplate { padding: 16px 18px; margin-top: 4px; }
    .ud-hero .ud-headplate::before { inset: 6px; }
    .ud-hero .ud-headplate::after { display: none; }
    .ud-hero .ud-headplate .ud-h1 { font-size: var(--ud-t-xl); line-height: 1.15; }
    .ud-hero .ud-headplate__lead { font-size: var(--ud-t-s); line-height: 1.4; margin-top: 4px; }
}

/* r1260 round 4: on a phone, a list page's head sits closer, so a whole card
   is on the first screen (lawyer page: the first card ends at 712px). */
@media (max-width: 719px) {
    .ud-hero:has(> .ud-headplate) { padding-top: 4px; padding-bottom: 12px; }
    .ud-hero:has(> .ud-headplate) .ud-headplate + .ud-search { margin-top: 12px; }
    .ud-hero:has(> .ud-headplate) + .ud-results { padding-top: 8px; }
}

/* r1260 round 7: why this page exists. The words the listing rests on, as a
   quotation with its page, near the top. Built dark behind a flag. */
/* Build round, Oct 3 2026: a labelled source excerpt inside "As written
   on", in the body face. It was a pull quote in the display serif. */
.ud-whyhere { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--ud-brass); background: var(--ud-card); border-radius: 0 var(--ud-r-s) var(--ud-r-s) 0; max-width: 528px; }
.ud-whyhere__label { margin: 0; font-family: var(--ud-sans); font-size: var(--ud-t-s); font-weight: var(--ud-w-strong); color: var(--ud-ink-2, var(--ud-ink)); }
.ud-whyhere__text { margin: 4px 0 0; font-family: var(--ud-sans); font-size: var(--ud-t-m); line-height: 1.6; color: var(--ud-ink); overflow-wrap: anywhere; }
.ud-whyhere .ud-small { margin: 6px 0 0; }

/* r1265: the page's own "Ads by Muslim Ad Network" line, legible: 13px. */
.ud-ad__label { font-size: 13px; letter-spacing: 0.02em; color: var(--ud-ink-2); }

/* Build round, Oct 3 2026: the privacy page's list of sections. */
.ud-toc { margin: 20px 0 8px; padding: 14px 18px; background: var(--ud-card); border: 1px solid var(--ud-line); border-radius: var(--ud-r-s); }
.ud-toc .ud-kicker { margin: 0 0 6px; }
.ud-toc__list { margin: 0; padding: 0 0 0 1.4em; columns: 1; }
.ud-toc__list li { break-inside: avoid; }
.ud-toc__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--ud-forest-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) { .ud-toc__list { columns: 2; column-gap: 32px; } }

/* r1289: the example card in the Featured section. Placeholder words in the
   arch's frame; drawn as a card, never linked as one. */
/* Seats round 2: a compact card that spans its row, one line of label. */
.ud-excard { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; padding: 12px 14px; background: var(--ud-card); border: 1px dashed var(--ud-line-strong); border-radius: var(--ud-r-s); max-width: 560px; }
.ud-excard .ud-arch { flex: 0 0 auto; width: 48px; height: 64px; }
.ud-excard__body { min-width: 0; }
.ud-excard__tag { margin: 0; font-size: var(--ud-t-s); font-weight: var(--ud-w-strong); color: var(--ud-brass-ink); text-wrap: balance; }
.ud-excard__name { margin: 4px 0 0; font-family: var(--ud-display); font-weight: var(--ud-w-name); font-size: var(--ud-t-m); line-height: 1.25; color: var(--ud-ink); }
.ud-excard__place { margin: 2px 0 0; font-size: var(--ud-t-s); color: var(--ud-ink-2); }

/* r1288: people near the visitor. */
.ud-near { margin: 0 0 18px; }
.ud-near__line { margin: 0 0 8px; color: var(--ud-ink-2); }
.ud-near__change { display: inline; }
.ud-near__change summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ud-forest-deep); text-decoration: underline; text-underline-offset: 3px; }
.ud-near__choices { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 8px; }
.ud-near__out { margin-top: 10px; }
.ud-near__head { margin: 0 0 6px; font-weight: var(--ud-w-strong); }
.ud-near__list { margin: 0; padding-left: 1.3em; }
.ud-near__list li { margin: 0 0 6px; }

/* Seats round 3: the data credit, a small line of its own at the very bottom. */
.ud-footer__credit { margin: 6px 0 0; font-size: var(--ud-t-xs); }
.ud-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
/* The Near me results: the list page's own cards. */
.ud-near__out .ud-grid { margin-top: 8px; }

/* The footer's feedback block (r1977/r1978) is a SHARED component, and its own
   stylesheet centres it: `.umgf-block { margin: 40px auto 8px }`. Inside this
   footer that centring fights the footer's own left-aligned three-column grid,
   so the form floated 208px in from the left edge and lined up with nothing
   above it (Tab, Oct 14 2026: "the footer section, with feedback area, looks
   messed up"). Measured at 1440: the grid's left edge 185, the form's left edge
   393. Align the form's left edge with the grid and keep its readable 640px
   measure, so the footer has ONE alignment line. Scoped to this footer, so the
   other six apps that mount the same component are untouched. */
.ud-footer .ud-feedback .umgf-block {
    margin-left: 0;
    margin-right: auto;
}

/* The same block carries its OWN palette, and inside this footer it reads as a
   different site's colours: a cool blue-black ink (#1a1a2e), a cool grey-green
   soft ink (#46564d), a teal accent (#0f766e) and pure white fields. The footer
   it sits in is warm: paper #fbfaf6, footer ground #f3efe3, ink #1c1b18, soft
   ink #4a453b, link green #0f4a26, line #e3ddce (Tab, Oct 14 2026: "the
   footer's text and coloring was off"). Measured on the live page, not guessed.
   Remap the block's variables to the directory's own palette so the form belongs
   to the footer it sits in. This rule is deliberately MORE specific than the
   shared stylesheet, so it also wins over that file's dark-scheme block: this
   directory is light-only, and a visitor whose operating system prefers dark
   would otherwise get a dark form inside a light footer. The success and error
   colours are left alone: they are semantic, not decorative. */
.ud-footer .ud-feedback .umgf-block {
    --umgf-accent: var(--ud-forest-deep);
    --umgf-accent-strong: #0b3519;
    --umgf-ink: var(--ud-ink);
    --umgf-ink-soft: var(--ud-ink-2);
    --umgf-line: var(--ud-line-strong);
    --umgf-ground: var(--ud-paper);
}