/* ==========================================================================
   THE COUNTER BOARD (Oct 5 2026, card fiO3jPPv, lane profile-listing).
   The listing detail page and the ummah.directory professional pages,
   redesigned to the counter-board direction (seed 0091f16a): cream paper,
   forest ink, brass rules, the khatam arch for the photo, and an order
   board for the acts. Scoped to `.up-board`, never a global rule, so it
   never touches app.css or layouts/app.blade.php (the other lane holds
   those files). Plain English comments, no em dashes.
   Palette (locked brand tokens): cream #faf8f5, ink #0f4c2d, forest
   #166534, brass #c8912e (text at #96631a / accent-600 for AA), warm
   stone #e8e0d4. Fonts come from the page's own Bunny-loaded stack
   (Fraunces display, Outfit UI); this file adds no font imports.
   ========================================================================== */

.up-board {
    /* The page's ground: cream paper, the khatam field at 5 percent so the
       lattice is texture, never noise. The figure is the same one the
       generator draws; it lives in the arch plate, not a background image. */
    background-color: #faf8f5;
    color: #2a241c; /* warm-900 */
    font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- The name board ------------------------------------------------------
   The counter's fascia: the category line, the name in Fraunces, the city.
   Hairline brass rule above, hairline stone rule below. */
.up-board .up-nameboard {
    border-top: 1px solid #c8912e;
    border-bottom: 1px solid #e8e0d4;
    padding: 10px 0 10px;
}
.up-board .up-nameboard__category {
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #96631a; /* brass at AA on cream */
    margin: 0 0 4px;
}
.up-board .up-nameboard__category a { color: inherit; text-decoration: none; }
.up-board .up-nameboard__category a:hover { text-decoration: underline; }
.up-board .up-nameboard__name {
    font-family: 'Fraunces', 'Lora', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #0f4c2d; /* brand-900 */
    margin: 0;
    text-wrap: balance;
}
.up-board .up-nameboard__city {
    margin-top: 5px;
    font-size: 0.875rem;
    color: #6b5c48; /* warm-600 */
}
.up-board .up-nameboard__tagline {
    margin-top: 6px;
    font-size: 1rem;
    line-height: 1.4;
    color: #50432f; /* warm-700 */
    max-width: 65ch;
}

/* ---- The halal line ------------------------------------------------------
   The certificate: the tier pill plus the evidence trigger, one row. */
.up-board .up-halal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e8e0d4;
}

/* ---- The good line -------------------------------------------------------
   The rating row: the crescent or the honest not-rated sentence, then the
   platform chips as a colour-token legend (the transit board's kept raise:
   one swatch per platform, so the chips read without a key). */
.up-board .up-good {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e8e0d4;
}
.up-board .up-good__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.up-board .up-good__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 4px;
    border: 1px solid #e8e0d4;
    border-radius: 9999px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3d3529; /* warm-800 */
}
.up-board .up-good__swatch {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff;
}
.up-board .up-good__swatch--google { background: #1a73e8; }
.up-board .up-good__swatch--yelp { background: #d32323; }
.up-board .up-good__swatch--zabihah { background: #166534; }
.up-board .up-good__swatch--internal { background: #0f4c2d; }
.up-board .up-good__swatch--doordash { background: #e02d00; }
.up-board .up-good__swatch--grubhub { background: #e2231a; }
.up-board .up-good__chip .up-good__num { font-variant-numeric: tabular-nums; }
.up-board .up-good__chip .up-good__via { font-weight: 400; color: #6b5c48; font-size: 0.6875rem; }
.up-board .up-good__fresh { font-size: 0.6875rem; color: #6b5c48; }

/* ---- The arch window and the arch plate ----------------------------------
   The photo in the pointed arch (the generator's figure), or the designed
   absent state when the listing has no photo of its own. The plate is the
   same arch the directory and the homepage already draw, never an empty
   box and never a silently promoted gallery image. */
.up-board .up-archwrap {
    position: relative;
    margin: 12px 0 0;
}
.up-board .up-archwin {
    display: block;
    width: 100%;
    /* The arch clip: a two-centred pointed arch, span 1, apex 0.645, in a
       3:4 box on mobile and a 21:9 board window on desktop. clip-path
       polygon approximates the arch curve with 16 segments. */
    clip-path: polygon(50% 0%, 61% 1.5%, 71% 5.5%, 80% 11%, 87% 18%, 92% 26%,
        95.5% 35%, 97.5% 45%, 98.5% 56%, 99.3% 68%, 100% 100%, 0% 100%, 0.7% 68%,
        1.5% 56%, 2.5% 45%, 4.5% 35%, 8% 26%, 13% 18%, 20% 11%, 29% 5.5%, 39% 1.5%);
    background: #0f4c2d;
    overflow: hidden;
    border-radius: 4px;
}
.up-board .up-archwin img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The window is a wide counter board at every width: the four answers
   (name, halal, good, act) must sit in the first screen at 390 against a
   724px fold, and a tall portrait window pushes the act row below it.
   21:9 at desktop, 16:9 on a phone. */
.up-board .up-archwin { aspect-ratio: 2 / 1; }
@media (min-width: 1024px) {
    /* Capped: the window never reads as a second hero. The photo keeps its
       shape and the act board stays in the first screen at 1440. */
    .up-board .up-archwin { aspect-ratio: auto; height: 240px; }
}
.up-board .up-archplate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 2 / 1;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(200,145,46,0.14), rgba(200,145,46,0) 55%),
        #0f4c2d;
    clip-path: polygon(50% 0%, 61% 1.5%, 71% 5.5%, 80% 11%, 87% 18%, 92% 26%,
        95.5% 35%, 97.5% 45%, 98.5% 56%, 99.3% 68%, 100% 100%, 0% 100%, 0.7% 68%,
        1.5% 56%, 2.5% 45%, 4.5% 35%, 8% 26%, 13% 18%, 20% 11%, 29% 5.5%, 39% 1.5%);
    border-radius: 4px;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .up-board .up-archplate { aspect-ratio: auto; height: 240px; }
}
.up-board .up-archplate .up-arch { width: min(30%, 180px); }
.up-board .up-archplate__caption {
    margin-top: 10px;
    text-align: center;
    font-size: 0.75rem;
    color: #6b5c48;
}
/* The credit rides on the photo, brass on a scrim so it reads on any image. */
.up-board .up-archwrap .up-credit {
    position: absolute;
    left: 12px; bottom: 10px;
    padding: 3px 8px;
    background: rgba(15, 31, 23, 0.62);
    color: #faf8f3;
    font-size: 0.6875rem;
    border-radius: 4px;
    max-width: calc(100% - 24px);
}
.up-board .up-archwrap .up-credit a { color: #e8c470; }

/* ---- The order board -----------------------------------------------------
   The acts, one block with up to three real rows: order, call, directions.
   Each row is a real link or nothing renders. The board is cream, ruled
   in brass at the top, rows divided by hairlines, and every row is 44px. */
.up-board .up-acts {
    margin-top: 12px;
    border-top: 2px solid #c8912e;
    background: #fff;
    border: 1px solid #e8e0d4;
    border-top-width: 2px;
    border-radius: 6px;
    overflow: hidden;
}
.up-board .up-acts__head {
    padding: 10px 16px 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #96631a;
}
.up-board .up-acts__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 16px;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid #f3efe8;
}
.up-board .up-acts__head + .up-acts__row,
.up-board .up-acts__row:first-of-type { border-top: 0; }
.up-board .up-acts__row:hover { background: #faf8f5; }
.up-board .up-acts__icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f0fdf6;
    color: #166534;
}
.up-board .up-acts__body { flex: 1; min-width: 0; }
.up-board .up-acts__label { display: block; font-weight: 700; font-size: 0.9375rem; color: #0f4c2d; }
.up-board .up-acts__sub { display: block; font-size: 0.75rem; color: #6b5c48; margin-top: 1px; }
.up-board .up-acts__go {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #166534;
    white-space: nowrap;
}
.up-board .up-acts__row--primary { background: #166534; }
.up-board .up-acts__row--primary:hover { background: #0f4a26; }
.up-board .up-acts__row--primary .up-acts__icon { background: rgba(250,248,243,0.16); color: #faf8f3; }
.up-board .up-acts__row--primary .up-acts__label { color: #faf8f3; }
.up-board .up-acts__row--primary .up-acts__sub { color: rgba(250,248,243,0.8); }
.up-board .up-acts__row--primary .up-acts__go { color: #e8c470; }

/* ---- The ledger (sidebar contact + trust, restyled quiet) ----------------
   The counter's rail: the same content as the old cards, ruled like a
   ledger instead of boxed like a dashboard. */
.up-board .up-ledger {
    border-top: 2px solid #c8912e;
    padding-top: 4px;
}
.up-board .up-ledger__section { padding: 14px 0; border-bottom: 1px solid #e8e0d4; }
.up-board .up-ledger__head {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: #96631a; margin: 0 0 10px;
}

/* ---- The professional page: the practice card ----------------------------
   Read then Operate. The nameplate (the arch portrait), the source's words,
   the reach ledger. No rating, review, tick, price or halal block: that
   rule lives in the Blade gate, never in this stylesheet. Scoped under
   .ud-page so it lands on the directory without touching directory.css
   (that file is built by the design scripts). */

/* The plate's khatam lattice was drawn to bleed off the plate's inner gold
   frame, so the top stars clipped against the hairline and read as an
   overflow bug. Contain the lattice inside the frame instead. */
.ud-page .ud-plate { overflow: hidden; }

/* The practice card's own words: the source's sentence in the display
   serif, the brass bar at the left, then the provenance. The blockquote
   keeps its own ud-quote styles; this is the board's polish on top. */
.ud-page .ud-whyhere__text {
    font-family: 'Fraunces', 'Lora', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: #1c1b16;
}

/* Meta contrast: the photo credit, the "has not checked it" line and the
   page-facts text read taupe on cream at 3.0 to 3.4:1 in review. Raise
   them to the AA floor and above. */
.ud-page .ud-credit,
.ud-page .ud-fine,
.ud-page .ud-small,
.ud-page .ud-about-page .ud-dl dd { color: #5c5245; }

/* The reach ledger's dotted leaders were the one place the old page's
   register wavered. Keep them, but raise the row hit area to 44px and the
   label contrast. */
.ud-page .ud-facts__row { min-height: 44px; align-items: center; }

/* The one action must never read as a tick or a verified mark: keep the
   primary button forest, never brass, and the claim card's two buttons
   the same weight. */
.ud-page .ud-btn--primary { background: #166534; }
.ud-page .ud-btn--primary:hover { background: #0f4a26; }

/* Focus: the brass ring on the directory's own controls too. */
.ud-page a:focus-visible,
.ud-page button:focus-visible,
.ud-page summary:focus-visible {
    outline: 2px solid #c8912e;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Focus: the brass ring on every interactive row, so keyboard state is
   visible at 3:1 against the cream and the white. */
.up-board a:focus-visible,
.up-board button:focus-visible,
.up-board summary:focus-visible {
    outline: 2px solid #c8912e;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Print: the board reads as a clean single column. */
@media print {
    .up-board .up-acts, .up-board .up-archwrap { break-inside: avoid; }
}