/*
 * Ummah Directory (r1233, Oct 2 2026).
 *
 * The styles for the professionals directory: its header and footer on the
 * directory host, the directory pages, a professional's own page, a ready
 * page and the professional claim steps.
 *
 * TOKENS. The greens and the brass are the estate's own (forest #166534,
 * gold #C8912E). The type is the site's own pair: Fraunces for names and
 * headings, Outfit for everything else. No new family is loaded.
 *
 * LAYOUT. The directory reads like the board in a building lobby: a list of
 * professions with dotted leaders and a count, then the people.
 *
 * SIGNATURE. The nameplate. A professional's own page opens with his name
 * on a door plate: forest ground, a brass inset rule, the profession in
 * small capitals. On a ready page that is still private the plate is drawn
 * as an outline only, because it is not on the wall yet.
 *
 * This file is plain CSS and is NOT part of the Vite build, so nothing here
 * depends on a utility class being found by the build. Every class starts
 * with `ud-`. These rules are unlayered, so they win over the layered
 * Tailwind base; that is deliberate.
 *
 * Seven type sizes: 12.5, 14, 16, 18, 22, 28 px and one fluid display size.
 */

:root {
    --ud-paper: #fbfaf6;
    --ud-card: #ffffff;
    --ud-ink: #1c1b18;
    --ud-ink-2: #4a453b;
    --ud-ink-3: #5f594d;
    --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;
    --ud-brass-edge: #a37a1f;
    --ud-forest: #166534;
    --ud-forest-deep: #0f4a26;
    --ud-plate: #0e3b21;
    --ud-plate-ink: #f7f1e3;
    --ud-brass: #c8912e;
    --ud-brass-light: #e6bf74;
    --ud-brass-ink: #74500f;
    --ud-wash: #f3efe3;
    --ud-warn-ground: #fdf3e0;
    --ud-warn-line: #e8c680;
    --ud-warn-ink: #6b4100;
    --ud-danger: #9f1d1d;
    --ud-display: 'Fraunces', 'Lora', Georgia, 'Times New Roman', serif;
    --ud-radius: 10px;
}

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

.ud-page {
    background: var(--ud-paper);
    color: var(--ud-ink);
    font-size: 16px;
    line-height: 1.5;
}

.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; }

.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: 4px;
}

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

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

.ud-kicker {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ud-brass-ink);
    margin: 0;
}

.ud-h1 {
    font-family: var(--ud-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 6.2vw, 3rem);
    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: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ud-ink);
    margin: 0;
    text-wrap: balance;
}

@media (min-width: 720px) {
    .ud-h2 { font-size: 28px; }
}

.ud-h3 {
    font-family: var(--ud-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    color: var(--ud-ink);
    margin: 0;
}

.ud-lead {
    font-size: 16px;
    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: 18px; }
}

.ud-small { font-size: 14px; line-height: 1.5; color: var(--ud-ink-2); margin: 0; }
.ud-fine { font-size: 12.5px; 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: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    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: #ffffff; }
.ud-btn--primary:hover { background: var(--ud-forest-deep); }
.ud-page a.ud-btn--primary { color: #ffffff; }

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

.ud-btn--quiet:hover { background: #eef5ef; }
.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: #fbf0f0; }

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

.ud-btn--small { min-height: 44px; font-size: 14px; 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: 600;
    font-size: 18px;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

/* The mark is a small door plate: the same object as the signature. */
.ud-brand__mark {
    width: 26px;
    height: 18px;
    border-radius: 3px;
    background: var(--ud-plate);
    box-shadow: inset 0 0 0 2px var(--ud-plate), inset 0 0 0 3px var(--ud-brass);
    flex-shrink: 0;
}

.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: 14px;
    font-weight: 500;
    color: var(--ud-ink-2);
    text-decoration: none;
    border-radius: 8px;
}

.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: 14px;
    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: 600; color: var(--ud-ink); margin: 0 0 8px; font-size: 14px; }
.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: 14px; 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; }

/* ── Directory hero and search ──────────────────────────────────────────── */

/* The directory page is one grid, so the board of professions can sit
   beside the heading on a wide screen and below the people on a phone
   without being printed twice. */
.ud-directory {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "results" "board";
}

.ud-directory__hero { grid-area: hero; }
.ud-directory__results { grid-area: results; }

.ud-directory__board {
    grid-area: board;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--ud-line);
}

.ud-directory__board .ud-kicker { margin-bottom: 6px; }

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

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

@media (min-width: 1000px) {
    .ud-directory {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        column-gap: 64px;
        grid-template-areas: "hero board" "results results";
    }

    .ud-directory__board {
        margin-top: 0;
        padding: 56px 0 32px;
        border-top: 0;
        align-self: start;
    }

    .ud-directory__results { border-top: 1px solid var(--ud-line); padding-top: 24px; }
}

.ud-hero .ud-h1 { margin-top: 8px; }
.ud-hero .ud-lead { margin-top: 12px; }

.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: 8px;
    background: var(--ud-card);
    color: var(--ud-ink);
    font: inherit;
    font-size: 16px;
}

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

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;
}

.ud-chips {
    display: flex;
    gap: 8px;
    margin: 12px -16px 0;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

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

@media (min-width: 720px) {
    .ud-chips { flex-wrap: wrap; overflow: visible; margin: 14px 0 0; padding: 0; }
}

.ud-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ud-edge);
    border-radius: 999px;
    background: var(--ud-card);
    color: var(--ud-ink-2);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.ud-chip:hover { border-color: var(--ud-forest); color: var(--ud-forest-deep); }
.ud-chip--on { border-color: var(--ud-forest-deep); background: #eef5ef; color: var(--ud-forest-deep); font-weight: 600; }

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

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

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

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

.ud-board__dots {
    flex: 1 1 24px;
    min-width: 24px;
    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: 600;
    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: 600; color: var(--ud-forest-deep); }

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

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


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

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

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

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

.ud-count { font-size: 14px; 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 { }

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

.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: 8px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.ud-notice a { color: inherit; font-weight: 600; text-decoration: underline; }

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

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

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

.ud-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ud-card);
    border: 1px solid var(--ud-line);
    border-radius: var(--ud-radius);
    overflow: hidden;
    height: 100%;
}

.ud-card:hover { border-color: var(--ud-line-strong); }

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

.ud-avatar {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--ud-plate);
    color: var(--ud-plate-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ud-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    box-shadow: inset 0 0 0 3px var(--ud-plate), inset 0 0 0 4px rgba(200, 145, 46, 0.85);
}

.ud-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.ud-avatar--photo { box-shadow: none; background: var(--ud-wash); }

.ud-card__id { min-width: 0; flex: 1; }

.ud-card__name { font-family: var(--ud-display); font-weight: 600; font-size: 18px; line-height: 1.22; margin: 0; color: var(--ud-ink); overflow-wrap: anywhere; }

/* 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; }
.ud-card__name a:hover { color: var(--ud-forest-deep); }

.ud-card__role { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ud-brass-ink); margin: 4px 0 0; }
.ud-card__place { font-size: 14px; color: var(--ud-ink-2); margin: 2px 0 0; }

.ud-card__body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

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

.ud-card__practice { font-size: 14px; color: var(--ud-ink); margin: 0; font-weight: 500; }

.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: 999px;
    border: 1px solid var(--ud-line-strong);
    background: var(--ud-paper);
    font-size: 12.5px;
    color: var(--ud-ink-2);
    line-height: 1.4;
}

.ud-tag--online { border-color: #9ec3a8; background: #eef5ef; color: var(--ud-forest-deep); font-weight: 600; }

.ud-card__foot {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--ud-line);
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ud-source { font-size: 12.5px; line-height: 1.5; color: var(--ud-ink-3); margin: 0; }
.ud-card__actions { display: flex; gap: 8px; align-items: stretch; }
.ud-card__actions .ud-btn { flex: 1 1 auto; min-width: 0; }

.ud-card__source-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 10px;
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--ud-ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 8px;
}

.ud-card__source-link:hover { color: var(--ud-ink); background: var(--ud-wash); }
.ud-source strong { color: var(--ud-ink-2); font-weight: 600; }

.ud-distance { font-size: 12.5px; font-weight: 600; 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__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: 8px;
    background: var(--ud-card);
    color: var(--ud-ink);
    font-size: 14px;
    font-weight: 600;
    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: 8px;
    padding: 30px 26px 28px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 14px 30px -18px rgba(14, 59, 33, 0.55);
}

/* 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: 4px;
    pointer-events: none;
}

.ud-plate__text { min-width: 0; position: relative; }

.ud-plate__kicker {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ud-brass-light);
    margin: 0 0 10px;
}

.ud-plate__name {
    font-family: var(--ud-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--ud-plate-ink);
    margin: 0;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

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

.ud-plate__photo {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--ud-brass);
    background: #174a2c;
}

.ud-plate__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }

@media (min-width: 720px) {
    .ud-plate { padding: 44px 44px 40px; }
    .ud-plate::before { inset: 12px; }
    .ud-plate__photo { width: 132px; height: 132px; }
    .ud-plate__practice { font-size: 18px; }
}

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

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

.ud-crumbs { font-size: 14px; color: var(--ud-ink-2); margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ud-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ud-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ud-crumbs span[aria-hidden] { color: var(--ud-ink-3); }

/* Three blocks: the way to contact, the page itself, and the claim panel.
   On a phone they stack in that order, so the contact comes straight after
   the name and the claim panel comes last. On a wide screen the page takes
   the left column and the other two sit on the right. */
.ud-entry__grid {
    display: grid;
    gap: 24px;
    margin-top: 20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "contact" "main" "claim";
}

.ud-entry__contact { grid-area: contact; display: grid; gap: 16px; align-content: start; }
.ud-entry__main { grid-area: main; min-width: 0; }
.ud-entry__claim { grid-area: claim; }

@media (min-width: 900px) {
    .ud-entry__grid:not(.ud-entry__grid--stack) {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas: "main contact" "main claim";
        grid-template-rows: auto 1fr;
        column-gap: 56px;
        row-gap: 16px;
        align-items: start;
        margin-top: 32px;
    }
}

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

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

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

.ud-dl { margin: 0; display: grid; gap: 14px; }
.ud-dl dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ud-ink-3); margin: 0 0 2px; }
.ud-dl dd { margin: 0; font-size: 16px; color: var(--ud-ink); }

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

.ud-points li { position: relative; padding-left: 18px; font-size: 16px; 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: 14px; font-weight: 600; 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; }

.ud-credit { font-size: 12.5px; color: var(--ud-ink-3); margin: 0 2px; display: flex; align-items: center; gap: 4px; min-height: 44px; }
.ud-credit a { color: inherit; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* ── 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: 8px;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
}

.ud-status--public { border-color: #9ec3a8; background: #eef5ef; 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: 14px; 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: 12.5px;
    font-weight: 600;
    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: 8px;
    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: 18px; font-weight: 600; color: var(--ud-ink); line-height: 1.3; }

.ud-error { color: var(--ud-danger); font-size: 14px; font-weight: 600; 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: 600;
    font-size: 16px;
    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: 14px; font-weight: 500; }
.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: 14px; }

.ud-value { border: 1px solid var(--ud-line-strong); border-radius: var(--ud-radius); padding: 18px; background: var(--ud-card); }
.ud-value > * + * { margin-top: 12px; }
.ud-value__price { font-family: var(--ud-display); font-weight: 600; font-size: 22px; 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 .ud-h1 { font-size: clamp(1.75rem, 5.5vw, 2.4rem); }
.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: 14px; font-weight: 600; 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: 0 -8px 24px -18px rgba(28, 27, 24, 0.5);
}

.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: 28px; }
    .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: 14px; 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); }