/* ==========================================================================
   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; }
/* r1775 round 2: the chip's source is a real link where the record holds the page it came from.
   A 24px floor on the tap target; the colour stays the chip's own ink with an underline. */
.up-board .up-good__via .up-good__src {
    display: inline-flex; align-items: center;
    min-height: 24px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* ==========================================================================
   THE FOOD PAGE FLOW (Oct 2026, this lane, the venue page).
   Everything BELOW the counter board reads as one document with it: the same
   cream paper, the same forest ink, the same brass rules and the same Fraunces
   headings. Scoped under `.up-flow`, the class the listing template puts on the
   main column, so nothing here reaches app.css or any other page. Every rule
   is written with two classes (or a class plus a type) so it wins against the
   template's own utilities on specificity, never with !important.
   ========================================================================== */

/* The section headings: one face, one ink, one hairline rule. */
.up-flow h2 {
    font-family: 'Fraunces', 'Lora', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #0f4c2d;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8e0d4;
    margin: 0 0 16px;
    text-wrap: balance;
}
.up-flow h2 span { color: #8c7b65; font-weight: 500; }

/* A quieter third-level label: the small uppercase brass kicker inside cards. */
.up-flow .up-kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #96631a;
    margin: 0 0 10px;
}

/* The page's card: white on the cream paper, ruled in stone, never a heavy
   dashboard shadow. */
.up-flow .up-card {
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 10px;
    overflow: hidden;
}
.up-flow .up-card--pad { padding: 16px; }
.up-flow .up-card--wash { background: #faf8f5; }
/* The review summary keeps its brass identity as a rule, not a wash. */
.up-flow .up-card--accent { border-top: 2px solid #c8912e; }

/* A ledger row: the restaurant's own facts as lines, the same shape the
   professional page uses for "Reach". Every row is a 44px tap bar. */
.up-flow .up-ledger__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 16px;
    border-top: 1px solid #f3efe8;
    font-size: 0.9375rem;
    color: #2a241c;
}
.up-flow .up-ledger__row:first-child { border-top: 0; }
.up-flow .up-ledger__price {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: #0f4c2d;
}

/* Feature chips: forest ink on a light forest wash, never the old pills. */
.up-flow .up-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: #f0fdf6;
    border: 1px solid #cfe9d8;
    color: #166534;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ---- The open line on the counter board ---------------------------------
   The brief's first screen is the name, whether it is open, and the halal
   status, inside one thumb-scroll. The chip states a computed state, the real
   hours we can place in the listing's own day, or plainly that hours are not
   posted. It wraps rather than clipping at 390. */
.up-board .up-nameboard__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 8px;
}
.up-board .up-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
}
.up-board .up-status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.up-board .up-status--open { color: #0f4c2d; background: #e7f5ec; border: 1px solid #b6e0c4; }
.up-board .up-status--closed { color: #8a1f11; background: #fdecea; border: 1px solid #f3c2ba; }
.up-board .up-status--hours { color: #50432f; background: #fff; border: 1px solid #e8e0d4; font-weight: 600; }
.up-board .up-status--unknown { color: #6b5c48; background: #faf8f5; border: 1px solid #e8e0d4; font-weight: 600; }
.up-board .up-status__hours { font-size: 0.8125rem; font-weight: 600; color: #6b5c48; }

/* ---- r1775 round 2 (Oct 9 2026): the cover button, the credit lines, the gallery grid ----------
   The cover photo is a real <button> (a keyboard opens the lightbox); the arch clips its corners,
   so the focus ring is drawn around the whole arch box and, as a fallback, inside the button. */
.up-board .up-archwin__btn {
    display: block;
    width: 100%; height: 100%;
    padding: 0; border: 0;
    background: none;
    cursor: zoom-in;
}
.up-board .up-archwin__btn:focus-visible { outline: 3px solid #c8912e; outline-offset: -6px; }
.up-board .up-archwrap:has(.up-archwin__btn:focus-visible) {
    outline: 3px solid #0f4c2d;
    outline-offset: 4px;
    border-radius: 6px;
}

/* One credit line for every photo taken from a public page: plain text under the picture, 12px,
   the link a 24px-high target (padding grows the hit area, the negative margin keeps the line
   where it was). Never an overlay on a clickable photo. */
.up-flow .up-credit-line {
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #50432f; /* warm-700 */
    text-wrap: pretty;
}
.up-flow .up-credit-line a,
.up-flow .up-credit-line .up-credit-line__name {
    font-weight: 600;
    color: #2a241c; /* warm-900 */
}
.up-flow .up-credit-line a {
    display: inline-block;
    padding-block: 5px;
    margin-block: -5px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.up-flow .up-credit-line a:hover { color: #0f4c2d; }

/* The desktop gallery: four columns in reading order. A two-column tile is the same height as a
   one-column tile (the container's own width read through cqw), so the rows stay level. */
.up-flow .up-gallery { display: none; }
@media (min-width: 640px) {
    .up-flow .up-gallery {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
        container-type: inline-size;
    }
}
.up-flow .up-gallery__item { min-width: 0; }
.up-flow .up-gallery__item--wide { grid-column: span 2; }
.up-flow .up-gallery__tile {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0; border: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
}
.up-flow a.up-gallery__tile { display: flex; cursor: pointer; }
@supports (width: 1cqw) {
    .up-flow .up-gallery__item--wide .up-gallery__tile {
        aspect-ratio: auto;
        height: calc((100cqw - 36px) / 4);
    }
}
.up-flow .up-gallery__tile img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.up-flow .up-gallery__tile:hover img { transform: scale(1.04); }
.up-flow .up-gallery__tile:focus-visible { outline: 3px solid #0f4c2d; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .up-flow .up-gallery__tile img { transition: none; }
    .up-flow .up-gallery__tile:hover img { transform: none; }
}

/* The menu preview row for a dish with a price per size: the name, then each size as a small column
   (the size over its price), aligned right on a wide screen and under the name on a phone. */
.up-flow .up-ledger__row--dish { align-items: flex-start; flex-wrap: wrap; justify-content: space-between; padding-block: 10px; }
.up-flow .up-ledger__sizes { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; font-variant-numeric: tabular-nums; margin-left: auto; }
.up-flow .up-ledger__size { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; white-space: nowrap; }
.up-flow .up-ledger__sizename { font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: 0.75rem; color: #50432f; }
@media (max-width: 480px) {
    .up-flow .up-ledger__row--dish { flex-direction: column; align-items: flex-start; gap: 4px; }
    .up-flow .up-ledger__sizes { justify-content: flex-start; margin-left: 0; gap: 4px 22px; }
    .up-flow .up-ledger__size { align-items: flex-start; }
}

/* The Menu row on the order board is for a phone; from 1024px the contact card beside the page
   carries the menu link already. (A class of its own: .up-acts__row sets display, so a utility
   hide class would lose to it.) */
@media (min-width: 1024px) {
    .up-board .up-acts__row--mobile { display: none; }
}

/* The Ummah One door's dismiss button stays on the banner's own row inside the listing column. In the
   358px column its 44px target pushed it onto a second line under the offer; it now sits at the right
   edge and the offer keeps the room to its left. */
.up-flow #uo-door-banner > div { position: relative; padding-right: 36px; }
.up-flow #uo-door-banner > div > button {
    position: absolute;
    right: -10px; top: 50%;
    transform: translateY(-50%);
}