/* ============================================================================
   ITEM DETAIL — 5B family composition
   ============================================================================

   Ported from docs/design/locked/2026-08-11/phase-5b-item-detail.html
   (ITEM-DETAIL-PORT-001). Scoped under `.la2-pg`, which only a page that opts
   in with `@section('design_shell')` carries, so an un-ported family cannot
   pick up a half-converted appearance.

   WHAT THIS FILE OWNS
   -------------------
   5B-SPECIFIC composition only: the breadcrumb trail, the report head, the two
   column grid, the gallery, the report sections and their definition lists, the
   location and map composition, the owner-only fenced block, the reward note,
   the action panel, the safety block, the owner match list, the related strip,
   the mobile action bar and the family's responsive behaviour.

   WHAT IT DOES NOT OWN — and never redefines
   ------------------------------------------
     · tokens, type scale, `.btn` / `.b-*`, `.wrap`, `.ico`   → foundation.css
     · header, drawer, footer, `.avatar`                      → public-shell.css
     · `.tchip` / `.schip` / `.tslot` / `.sv` / `.bm`         → report-card.css

   The 5B standalone HTML embeds copies of the shared shell's styles only so the
   proof can render on its own. Those copies do not supersede the already-final
   shared component authority, so nothing below re-states them.
   ========================================================================== */


/* ============================================================================
   0 · ICONS THIS FAMILY ADDS
   ============================================================================
   The shared icon family (foundation.css) is a MASKED `<span class="ico i-*">`,
   painted with `background: currentColor` through a `--i` mask — never an inline
   <svg>. The glyphs below are the ones 5B needs that the family does not already
   carry.

   They are declared HERE, not in foundation.css: each has exactly one consumer
   today, and this file's own rule is not to generalise a primitive before a
   second family asks for it. Move them up when one does.

   `i-flag` WAS declared here and has MOVED UP, byte-for-byte, because 5K's
   Report-user control is that second family
   (5K-PUBLIC-OWNER-PROFILE-STAGE-B-FINAL-PORT-001). 5B renders exactly what it
   rendered before: same bytes, same selector, same specificity, and nothing else
   declares `--i` for that name.

   `i-ext` HAS NOW MOVED UP TOO, byte-for-byte, on the same rule: the Admin F1
   admission masthead's "Return to site" escape is the second family that draws
   an external-link mark (ADMIN-F1-AUTH-STAGE-B-FINAL-DESIGN-PORT-001). Same
   bytes, same selector, same specificity, foundation.css loads first, and
   nothing else declares `--i` for that name — so 5B renders unchanged and no
   parity axis moves.
   ========================================================================== */

.la2-pg .i-eye-off { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.9%2017.9A10%2010%200%200112%2020c-7%200-11-8-11-8a18.4%2018.4%200%20015.1-5.9M9.9%204.2A9.1%209.1%200%200112%204c7%200%2011%208%2011%208a18.5%2018.5%200%2001-2.2%203.2%22%2F%3E%3Cpath%20d%3D%22M2%202l20%2020%22%2F%3E%3C%2Fsvg%3E"); }

/* The breadcrumb chevron points along the reading direction. */

/* ============================================================================
   0.5 · THE FAMILY'S OWN CONTENT MEASURE
   ============================================================================
   `.wrap` in foundation.css is the SHARED 1240/40 content measure. 5B draws its
   page on the narrower 1180/28 measure, exactly as 5A does — so, exactly as
   search.css does, this family scopes its own `.wrap` rather than moving the
   shared one and dragging every other ported page with it. The shared shell's
   own header and footer keep the shared measure; only the page body narrows.
   ========================================================================== */

.la2-pg .dwrap { max-width: 1180px; padding: 0 28px; }

@media (max-width: 767.98px) {
    .la2-pg .dwrap { padding: 0 16px; }
}


/* ============================================================================
   1 · BREADCRUMB
   ============================================================================
   5A defines `.bc` in its own stylesheet but draws it on no Search frame (5A
   §07: Search has a visible H1 and no breadcrumb), so Item Detail is the first
   ported consumer and owns the composition here rather than in search.css.
   ========================================================================== */

.la2-pg .bc { padding: 16px 0 0; }

.la2-pg .bc ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.la2-pg .bc li { display: inline-flex; align-items: center; gap: 6px; }
.la2-pg .bc a { color: var(--muted); }
.la2-pg .bc a:hover { color: var(--act); }
.la2-pg .bc .ico { width: 15px; height: 15px; color: var(--muted); opacity: .7; }

.la2-pg .bc [aria-current] { color: var(--head); font-weight: 600; }


/* ============================================================================
   2 · REPORT HEAD
   ========================================================================== */

.la2-pg .ihead { padding: 18px 0 22px; }

.la2-pg .badgerow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 11px;
}

/* The report title is the page's only H1 and its measure is capped so a long
   Egyptian report title still breaks into a readable column. Arabic sets at a
   slightly smaller size with more leading, and takes a wider measure because
   its glyphs are narrower. */
.la2-pg h1.ititle {
    font-size: 31px;
    line-height: 1.2;
    margin: 0 0 9px;
    max-width: 30ch;
}

[dir="rtl"] .la2-pg h1.ititle { font-size: 29px; line-height: 1.45; max-width: 34ch; }

.la2-pg .imeta {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.la2-pg .imeta i { font-style: normal; opacity: .6; }


/* ============================================================================
   3 · THE TWO-COLUMN BODY
   ============================================================================
   The board spells this grid `.dbody`; the runtime spells it `.dgrid`, because
   `.dbody` is ALREADY the shared public shell's DRAWER BODY (public-shell.css)
   and a page that mounts the shared drawer would inherit its scroll padding.
   Same node, different name — the same rule that made 5A spell the board's
   `.sform` as `.sbar`. Recorded in tests/Design/maps/item-detail.json.
   The main column is fluid and the sidebar is a fixed 356px, so the reading
   measure grows with the viewport while the action panel keeps one width at
   every size. `align-items: start` is what lets the sticky sidebar work: a
   stretched grid item is already full height and has nothing to stick within.
   ========================================================================== */

.la2-pg .dmain { padding: 0 0 8px; }

.la2-pg .dgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 36px;
    align-items: start;
}

.la2-pg .dcol { min-width: 0; }


/* ============================================================================
   4 · GALLERY
   ============================================================================
   The media box holds one aspect at every state — photograph, or the honest
   category fallback plate — so the page below it never moves depending on
   whether the poster uploaded an image.
   ========================================================================== */

.la2-pg .gal { margin: 0; }

.la2-pg .galmain {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r3);
    overflow: hidden;
    background: var(--p1);
    border: 1px solid var(--edge);
}

.la2-pg .galmain > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No photograph, or a record whose file the service stripped from disk: a
   striped neutral field and the category mark — never a broken <img>. */
.la2-pg .ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, var(--ph1), var(--ph1) 8px, var(--ph2) 8px, var(--ph2) 16px);
    color: var(--pInk);
}

.la2-pg .ph .ico { width: 56px; height: 56px; }

/* Thumbnails render only when more than one image survives, so one image never
   leaves an empty rail. The strip scrolls inside its own box — the page itself
   must never scroll horizontally. */
.la2-pg .galthumbs {
    display: flex;
    gap: 10px;
    margin: 10px 0 0;
    padding: 2px 0 4px;
    overflow-x: auto;
    list-style: none;
}

.la2-pg .thumb {
    position: relative;
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--edge);
    background: var(--p1);
    padding: 0;
    cursor: pointer;
}

.la2-pg .thumb > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Selection is announced, not merely painted. */
.la2-pg .thumb[aria-pressed="true"] {
    border-color: var(--act);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--act) 32%, transparent);
}

.la2-pg .galthumbs form { display: contents; }


/* ============================================================================
   5 · REPORT SECTIONS — rounded information surfaces
   ============================================================================
   ITEM-DETAIL-CONTENT-SURFACES-001 (OWNER REVISION, ledger §31.1).

   The locked board draws Description, Items in This Report and Location as flat
   document sections separated only by a top hairline. The owner reviewed that on
   the real runtime and REJECTED it: the main reading column read as unfinished,
   most visibly in the owner state. Each top-level section is now an enclosed,
   rounded information surface in the established La2etlak card language, from the
   EXISTING tokens — no second component system, and no heavy dashboard look.

   ONE top-level section = ONE surface. The inner `.dl2` row rules stay exactly as
   they are: the structure is a rounded surface CONTAINING separated rows, never a
   rounded card around every field.
   ========================================================================== */

.la2-pg .sblk {
    border: 1px solid var(--edge);
    border-radius: var(--r3);
    background: var(--bg);
    box-shadow: var(--csh);
    padding: 21px 22px;
    margin-top: 18px;
}

.la2-pg .sblk h2 { font-size: 19px; margin: 0 0 12px; }

.la2-pg .dsc {
    margin: 0;
    font-size: 15.5px;
    color: var(--body);
    max-width: 70ch;
}

/* Attribute pairs. A real <dl> with a fixed label gutter, which stacks to
   label-over-value on mobile instead of squeezing a 186px column. */
.la2-pg .dl2 {
    display: grid;
    grid-template-columns: 186px minmax(0, 1fr);
    margin: 14px 0 0;
}

.la2-pg .dl2 dt {
    font-size: 13.5px;
    color: var(--muted);
    padding: 9px 14px 9px 0;
    border-top: 1px solid var(--line);
}

[dir="rtl"] .la2-pg .dl2 dt { padding: 9px 0 9px 14px; }

.la2-pg .dl2 dd {
    font-size: 14.5px;
    color: var(--ink);
    margin: 0;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}

.la2-pg .obj { margin-top: 20px; }
.la2-pg .obj--sep { border-top: 1px solid var(--line); padding-top: 18px; }

.la2-pg .objh {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0;
}

.la2-pg .objn {
    font: 700 11px/1 ui-monospace, Menlo, monospace;
    letter-spacing: .06em;
    color: var(--muted);
    border: 1px solid var(--edge);
    border-radius: 5px;
    padding: 5px 7px;
}

.la2-pg .objt { font-size: 15.5px; font-weight: 600; color: var(--head); }

/* The Private marker never appears for a non-owner, because the attribute it
   labels is omitted from the markup entirely for them. */
.la2-pg .privtag {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 6px;
    border-radius: 4px;
    font: 700 10px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--warnInk);
    background: var(--warnBg);
    margin-inline-start: 7px;
    vertical-align: 1px;
}

[dir="rtl"] .la2-pg .privtag {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
}


/* ============================================================================
   6 · LOCATION, MAP, AND THE OWNER-ONLY BLOCK
   ============================================================================
   Public viewers get governorate, district and the APPROXIMATE map. The owner
   block below is not a CSS state: its contents are resolved owner-only by
   ItemDetailService::buildOwnerLocationDetails(), so a non-owner's HTML does
   not contain the landmark or the exact coordinates at all.
   ========================================================================== */

.la2-pg .locline {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    color: var(--ink);
    margin: 0;
}

.la2-pg .locline .ico { width: 17px; height: 17px; color: var(--muted); }

.la2-pg .dmap {
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    overflow: hidden;
    margin-top: 16px;
}

.la2-pg .dmapcv { height: 232px; background: var(--p1); }

.la2-pg .mapnote2 { font-size: 12.5px; color: var(--muted); margin: 9px 0 0; }

/* Tile or script failure. The code already swaps this in; it carries the text
   alternative, so the region never becomes a dead frame. */
.la2-pg .mapfb2 {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px;
    background: var(--warnBg);
    border: 1px solid color-mix(in oklab, var(--warnInk) 26%, transparent);
    border-radius: var(--r2);
    margin-top: 16px;
}

.la2-pg .mapfb2 .ico { color: var(--warnInk); margin-top: 2px; flex: none; }
.la2-pg .mapfb2 p { margin: 0; font-size: 13.5px; color: var(--ink); }

.la2-pg .ownerbox {
    margin-top: 18px;
    border: 1px dashed var(--edge);
    border-radius: var(--r2);
    padding: 12px 14px;
    background: var(--band2);
}

.la2-pg .ownerbox p {
    margin: 0 0 9px;
    font-size: 14px;
    color: var(--ink);
    font-family: ui-monospace, Menlo, monospace;
}

.la2-pg .ownerbox p:last-child { margin-bottom: 0; }

.la2-pg .ownerbox__l {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 3px;
}

[dir="rtl"] .la2-pg .ownerbox__l { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* ITEM-DETAIL-OWNER-ONLY-DISCLOSURE-001 (OWNER REVISION, ledger §31.3).
   The boundary was already enforced in the service; what was missing was
   TELLING the owner about it. The board's own owner-only language, now backed by
   real `public.item.detail.owner_only_*` keys in both locales.

   Explanatory UI only. It appears exactly where owner-only data is already
   rendered, so it cannot exist in a guest or non-owner document — those viewers
   never receive the data these lines explain. */
.la2-pg .ownonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 10px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--inI);
    background: var(--inBg);
    border: 1px solid var(--inEd);
    border-radius: 999px;
    padding: 5px 9px;
    white-space: nowrap;
}

[dir="rtl"] .la2-pg .ownonly {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
}

.la2-pg .ownonly .ico { width: 12px; height: 12px; }

.la2-pg .ownernote {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

/* Inside the fenced location block the pill leads the block; beside a private
   attribute it leads its own explanation line. */
.la2-pg .ownerbox > .ownonly { margin-bottom: 10px; }
.la2-pg .ownernote .ownonly { margin-inline-end: 7px; vertical-align: 2px; }


/* ============================================================================
   7 · SIDEBAR — reward, action panel, safety
   ============================================================================
   Only the reward and the panel are sticky. Safety Tips stays in normal flow,
   so the sidebar never needs a scrollbar of its own and stays usable at
   1440x768 and 1280x800.
   ========================================================================== */

.la2-pg .side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

@media (min-width: 992px) {
    .la2-pg .side { position: sticky; top: 18px; align-self: start; }
}

/* Short desktop viewports: a rail taller than the window has nowhere to stick to,
   and a sticky box that cannot fit is exactly how content ends up unreachable. The
   rail goes STATIC there and scrolls with the page - preferred over overlapping,
   and it never grows an internal scrollbar. */
@media (min-width: 992px) and (max-height: 860px) {
    .la2-pg .side { position: static; }
}

/* ITEM-DETAIL-SAFETY-RAIL-001 - the WHOLE rail is what sticks, not the panel
   inside it.
   ============================================================================
   Making `.sidesticky` sticky on its own let the reward + panel travel over the
   Safety block that follows them, so at some scroll offsets half an action panel
   and half of Safety Tips occupied the same space. Moving the stickiness up to
   `.side` makes reward + panel + Safety ONE rail that moves together: two
   siblings inside one sticky box cannot pass each other, so the overlap is
   impossible rather than merely unlikely.

   `align-self: start` is load-bearing - a stretched grid item is already full
   height and has nothing to stick within. */
.la2-pg .sidesticky {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.la2-pg .panel {
    border: 1px solid var(--edge);
    border-radius: var(--r3);
    background: var(--bg);
    box-shadow: var(--csh);
    padding: 17px;
}

.la2-pg .panel h2 { font-size: 17px; margin: 0 0 13px; }

/* One moderate-weight line with its disclaimer under it — no emoji, no green,
   no display-sized amount, nothing that reads as a marketplace price. */
.la2-pg .rew {
    border: 1px solid color-mix(in oklab, var(--warnInk) 26%, transparent);
    background: var(--warnBg);
    border-radius: var(--r2);
    padding: 12px 14px;
}

.la2-pg .rew .rv {
    margin: 0;
    font: 600 15px/1.35 'IBM Plex Sans', sans-serif;
    color: var(--ink);
}

[dir="rtl"] .la2-pg .rew .rv { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.la2-pg .rew .rv b { color: var(--warnInk); font-weight: 600; }
.la2-pg .rew .rv i { font-style: normal; color: var(--muted); padding: 0 5px; }
.la2-pg .rew p { margin: 7px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* Poster identity sits inside the panel for every viewer type. */
.la2-pg .poster {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}

.la2-pg .poster--bare { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }
.la2-pg .poster .avatar { width: 44px; height: 44px; font-size: 15px; flex: none; }
.la2-pg .poster > div { min-width: 0; }

.la2-pg .pn { font-size: 15px; font-weight: 600; color: var(--head); margin: 0; }
.la2-pg .pn a { color: inherit; }
.la2-pg .pby { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.la2-pg .ubadges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }

/* <x-badge-premium> / <x-badge-partner> are SHARED components that still ship the
   legacy `.la2-badge` skin from la2etlak.css. Inside the ported panel they take
   the board's own `.ub` language instead — scoped to `.ubadges`, so no shared
   component and no other page that mounts them is touched. */
.la2-pg .ubadges .la2-badge {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 8px;
    border-radius: 5px;
    font: 600 10.5px/1 'IBM Plex Sans', sans-serif;
    letter-spacing: .04em;
    border: 0;
}

[dir="rtl"] .la2-pg .ubadges .la2-badge {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: 0;
    font-size: 11.5px;
}

/* <x-item-status-badge> is the same case: a SHARED component still wearing the
   legacy `.la2-badge` skin. Inside the owner panel's badge row it takes the shared
   status-chip metrics ratified by ledger §24, so the owner's status reads as one
   family with the badges in the report head. */
/* The panel's own badge row carries the board's 12px flush; the report head's
   keeps 11px. Two rows, two values, both the board's own. */
.la2-pg .panel .badgerow { margin-bottom: 12px; }

.la2-pg .panel .badgerow .la2-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font: 600 12.5px/1 'IBM Plex Sans', sans-serif;
    color: var(--body);
    background: var(--fill);
    border: 1px solid var(--edge);
    white-space: nowrap;
}

[dir="rtl"] .la2-pg .panel .badgerow .la2-badge { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.la2-pg .panel .badgerow .la2-badge > i { display: none; }

/* AVAILABLE is a positive, active WORKFLOW status, so it takes the SUCCESS role.
   Deliberately NOT the Found tokens: Found is a REPORT TYPE and keeps its teal, and
   conflating the two would make a workflow status look like a report type. Same
   28px pill, radius, padding, type and geometry as every other status — colour
   only (ITEM-DETAIL-ACTION-HIERARCHY-002). */
.la2-pg .panel .badgerow .la2-badge--available {
    color: var(--okI);
    background: var(--okBg);
    border-color: var(--okEd);
}

.la2-pg .ubadges .la2-badge--premium { color: var(--warnInk); background: var(--warnBg); }
.la2-pg .ubadges .la2-badge--partner { color: var(--inI); background: var(--inBg); }

/* The board's badge is a word, not a word plus a Bootstrap glyph. */
.la2-pg .ubadges .la2-badge > i { display: none; }

.la2-pg .cvs { display: flex; flex-direction: column; gap: 13px; }
.la2-pg .cvl { font-size: 11.5px; color: var(--muted); margin: 0 0 3px; }
/* The line that introduces the action stack sits 9px clear of it. */
.la2-pg .cvl.intro { margin-bottom: 9px; }
.la2-pg .cvv { font-size: 15px; font-weight: 600; word-break: break-word; }

/* A masked channel prints the hidden-by-poster line and no value — the value is
   not in the markup for it to hide. */
.la2-pg .cvhide {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

.la2-pg .cvhide .ico { width: 15px; height: 15px; margin-top: 2px; flex: none; }

.la2-pg .hr { border: 0; border-top: 1px solid var(--line); margin: 15px 0; }

.la2-pg .acts { display: flex; flex-direction: column; gap: 9px; }
.la2-pg .acts form { display: contents; }
.la2-pg .claimzone { display: contents; }

/* The SUCCESS token role, in both themes. foundation.css carries `--erI/--erEd/
   --erBg` for the error role but only a bare `--ok`, so `.b-ok` and the strong
   match score were resolving to invalid `var()` and dropping to inherited ink.
   The three values are the locked design's own (5B stylesheet, light and dark
   blocks), declared here rather than in foundation.css because 5B is their only
   consumer today — same rule as the icon block above. Promote them when a second
   family needs them. */
.la2-pg { --okI: #0B6B58; --okEd: #B7DCD1; --okBg: #E8F4F0; }
[data-bs-theme="dark"] .la2-pg { --okI: #55C4A4; --okEd: #2C4A42; --okBg: #152622; }

/* The two button ROLES 5B needs that foundation.css does not carry yet. The board
   declares both; the shared family currently ships `.b-pri`, `.b-cta`, `.b-sec` and
   `.b-quiet` only, so an owner's Mark as Claimed and the danger-outline Report
   trigger were both rendering as bare buttons. Declared HERE, from the existing
   semantic tokens and with the board's own values, because 5B is their only
   consumer today — the same rule the icon block above follows. Move them into
   foundation.css when a second family asks for them. */
.la2-pg .btn.b-ok  { background: transparent; color: var(--okI); border-color: var(--okEd); }
.la2-pg .btn.b-ok:hover  { background: var(--okBg); border-color: var(--okI); color: var(--okI); }

/* `.b-dan` MOVED to foundation.css by 5H-SETTINGS-FINAL-DESIGN-PORT-001 — the
   second family asked for it, exactly as the note above anticipated. Its two
   declarations went across byte-for-byte and 5B renders unchanged. */

/* ITEM-DETAIL-ACTION-HIERARCHY-002 - the FILLED owner action stack.
   ============================================================================
   These modifiers are 5B-SCOPED and opt-in per element. `.b-ok` and `.b-dan`
   themselves stay OUTLINE everywhere else on this page - the claim-cancel action
   and any future quiet danger control still get the outline role - so making the
   owner's management stack solid has no global side effect.

   Every member shares the small-button geometry (44px, one radius, full width, one
   type and one padding); only the semantic colour differs, which is what turns four
   controls into one readable hierarchy. */
.la2-pg .owner-action { min-height: 44px; }

/* Success: filled, on the action-contrast ink the theme already resolves for a
   solid coloured button. */
.la2-pg .btn.owner-action--success,
.la2-pg .btn.owner-action--success:hover {
    background: var(--okI);
    border-color: var(--okI);
    color: var(--actInk);
}

/* Archive: filled NEUTRAL, never a white outline - it is a real action, just the
   quiet one. */
.la2-pg .btn.owner-action--archive {
    background: var(--fill);
    border-color: var(--secEdge);
    color: var(--secInk);
}

.la2-pg .btn.owner-action--archive:hover {
    background: var(--band);
    border-color: var(--edge);
    color: var(--head);
}

/* Danger: filled, and the SAME red for the owner's Delete and for Report this item
   so the page has exactly one destructive colour. */
.la2-pg .btn.owner-action--danger,
.la2-pg .btn.owner-action--danger:hover {
    background: var(--erI);
    border-color: var(--erI);
    color: var(--actInk);
}

/* Full-bleed action inside the panel and the mobile bar — the board's own `.blk`.
   `.acts form { display: contents }` above makes a form-wrapped button a direct
   flex child of the stack, so every owner management action is laid out and
   painted as the button it is, never collapsed to text by the form box.
   `.btn.blk` itself MOVED to foundation.css by
   5H-SETTINGS-FINAL-DESIGN-PORT-001: every locked board writes it as the
   button's own full-width modifier, so it is shared, not this page's. */
.la2-pg .danger form { display: contents; }

.la2-pg .alertbox {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    border-radius: var(--r2);
    padding: 11px 12px;
    font-size: 13px;
    margin: 0 0 13px;
    line-height: 1.5;
}

.la2-pg .alertbox .ico { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.la2-pg .alertbox p { margin: 0; }
.la2-pg .alertbox b { color: var(--head); }
.la2-pg .alertbox.inf { background: var(--inBg); border: 1px solid var(--inEd); color: var(--ink); }
.la2-pg .alertbox.inf .ico { color: var(--inI); }
.la2-pg .alertbox.wrn { background: var(--warnBg); border: 1px solid color-mix(in oklab, var(--warnInk) 26%, transparent); color: var(--ink); }
.la2-pg .alertbox.wrn .ico { color: var(--warnInk); }
.la2-pg .alertbox.err { background: var(--erBg); border: 1px solid var(--erEd); color: var(--ink); }
.la2-pg .alertbox.err .ico { color: var(--erI); }
.la2-pg .alertbox.neu { background: var(--band); border: 1px solid var(--line); color: var(--ink); }
.la2-pg .alertbox.neu .ico { color: var(--muted); }

/* Delete is the red member of the SAME stack, not a fenced-off zone: one ordinary
   stack gap above it and no horizontal rule (ITEM-DETAIL-ACTION-HIERARCHY-002). */
.la2-pg .danger { margin-top: 9px; padding-top: 0; border-top: 0; }

.la2-pg .claimedstate { text-align: center; }
.la2-pg .claimedstate .schip { margin-bottom: 9px; }
.la2-pg .claimedstate .mapnote2 { margin: 0; }

.la2-pg .bmrow { display: flex; gap: 11px; align-items: center; }
.la2-pg .svl { font-size: 13.5px; color: var(--body); }
/* The guest's save prompt: the paragraph keeps the body measure and it is the
   LINK that sets 13.5px — the board's own arrangement. Sizing the paragraph
   instead shortens the line box by 2.4px. */
.la2-pg .savelink { margin: 0; }
.la2-pg .savelink a { font-size: 13.5px; }

/* ITEM-DETAIL-REPORT-ACTION-001 (OWNER REVISION, ledger §31.2).
   The board draws the abuse-report trigger as a borderless quiet button, which
   on the real runtime reads as loose text rather than an action. It is now the
   EXISTING danger-outline button language — `b-dan`, semantic error tokens, the
   same flag icon, the same modal.

   OUTLINE, never filled: a filled red action would out-shout the filled claim
   action directly above it. Separated below Save by its own rule so it never
   sits adjacent to a routine action. */
.la2-pg .reportrow {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

/* The filled trigger's own icon keeps the small-button scale. */
.la2-pg .report-action { min-height: 44px; }

.la2-pg .report-action .ico { width: 14px; height: 14px; }

/* ITEM-SHARE-001 - the Share disclosure. ONE compact SECONDARY row between Save
   and Report item: the quiet `b-sec` summary never outranks the filled claim /
   owner actions or the red report trigger. A native <details>; the destinations
   are ordinary links, so it works with scripting off. Every target is 44px, the
   list wraps on its own available width (no viewport query), and the logical
   properties carry RTL without a second rule. */
.la2-pg .sharerow { margin-top: 15px; }

.la2-pg .sharesum { list-style: none; justify-content: center; }
.la2-pg .sharesum::-webkit-details-marker { display: none; }
.la2-pg .sharesum .ico { width: 16px; height: 16px; flex: none; }
.la2-pg .sharesum .ico:last-child { transition: transform .15s; }
.la2-pg .sharemenu[open] .sharesum .ico:last-child { transform: rotate(180deg); }
.la2-pg .sharesum:focus-visible,
.la2-pg .sharelink:focus-visible {
    outline: 2px solid var(--act);
    outline-offset: 2px;
}

/* P7-VISUAL-CORR-01 — the compact public-report preview at the top of the opened menu.
   Intrinsic: the thumbnail keeps a fixed aspect ratio, the title wraps on the
   panel's own width and logical properties carry RTL. */
.la2-pg .sharepreview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 9px 0 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r2);
    background: var(--band);
}
.la2-pg .sharethumb {
    flex: none;
    inline-size: 64px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg);
    color: var(--muted);
}
.la2-pg .sharethumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.la2-pg .sharethumb .ico { width: 24px; height: 24px; }
.la2-pg .sharepreview-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.la2-pg .sharepreview-title {
    color: var(--head);
    font: 600 14px/1.35 'IBM Plex Sans', sans-serif;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.la2-pg .sharepreview-site { color: var(--muted); font-size: 12.5px; }
[dir="rtl"] .la2-pg .sharepreview-title { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.la2-pg .sharelist {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.la2-pg .sharelink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r2);
    background: var(--bg);
    color: var(--ink);
    font: 500 14px/1.3 'IBM Plex Sans', sans-serif;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

[dir="rtl"] .la2-pg .sharelink { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg .sharelink:hover { background: var(--band); border-color: var(--edge); color: var(--head); text-decoration: none; }
.la2-pg .sharelink span:first-child { min-width: 0; overflow-wrap: anywhere; }
.la2-pg .sharelink .ico { width: 15px; height: 15px; flex: none; color: var(--muted); }

.la2-pg .sharestatus { margin: 9px 0 0; font-size: 12.5px; color: var(--muted); }
.la2-pg .sharestatus:empty { margin: 0; }

/* The transient copy buffer the clipboard fallback selects from. It is created
   on demand, removed straight after, and holds the canonical URL only. 16px keeps
   iOS from zooming on selection. */
.la2-pg .sharebuf {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
    pointer-events: none;
}

/* ITEM-DETAIL-SAFETY-RAIL-001 - Safety Tips is a SYSTEM SAFETY surface, not a
   neutral note, so it takes the existing warning palette rather than disappearing
   into the page. Geometry, padding, typography and the tips themselves are
   unchanged, and the dark theme resolves the same tokens to its own warning
   values - nothing here is a hard-coded yellow. */
.la2-pg .safe {
    border: 1px solid var(--warnEdge);
    border-radius: var(--r2);
    background: var(--warnBg);
    padding: 14px 15px;
}

.la2-pg .safe h2 {
    font: 700 12px/1.4 'IBM Plex Sans', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 9px;
    display: flex;
    gap: 8px;
    align-items: center;
}

[dir="rtl"] .la2-pg .safe h2 {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
}

.la2-pg .safe h2 { color: var(--warnInk); }
.la2-pg .safe h2 .ico { width: 15px; height: 15px; color: var(--warnInk); flex: none; }

.la2-pg .safe ul {
    margin: 0;
    padding-inline-start: 17px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--body);
    line-height: 1.5;
}


/* ============================================================================
   8 · OWNER MATCHES
   ============================================================================
   Absent entirely for anyone who is not the owner, and for owners whose report
   is not available — the service returns an empty collection and the section
   is not rendered, so scores and reasons never reach a non-owner's HTML.
   ========================================================================== */

.la2-pg .msec { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }

.la2-pg .msech {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.la2-pg .msec h2 { font-size: 20px; margin: 0; }
.la2-pg .msub { margin: 0 0 15px; font-size: 13.5px; color: var(--muted); }
.la2-pg .mlist { display: flex; flex-direction: column; gap: 11px; }

.la2-pg .mcard {
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    background: var(--band2);
    padding: 14px 15px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.la2-pg .mcard__b { min-width: 0; flex: 1 1 380px; }

.la2-pg .mtop { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }

.la2-pg .score {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    font: 600 12px/1 'IBM Plex Sans', sans-serif;
}

[dir="rtl"] .la2-pg .score { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* The band vocabulary is the SERVICE's, not the board's: MatchViewModelService
   ::scoreBand() returns strong / good / possible (>=80, >=50, below). The board
   spells its two specimens `.high` and `.med`; both names are carried so the
   reference and the runtime paint the same chip. */
.la2-pg .score.strong,
.la2-pg .score.high { color: var(--okI); background: var(--okBg); }
.la2-pg .score.good,
.la2-pg .score.med { color: var(--warnInk); background: var(--warnBg); }
.la2-pg .score.possible { color: var(--body); background: var(--fill); }

.la2-pg .mtitle { font-size: 15px; font-weight: 600; color: var(--head); margin: 0 0 4px; }
.la2-pg .mmeta { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.la2-pg .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.la2-pg .chip { font-size: 11.5px; color: var(--body); background: var(--fill); border-radius: 5px; padding: 5px 9px; }
.la2-pg .mact { display: flex; gap: 9px; flex: none; }
.la2-pg .mact .ico { width: 13px; height: 13px; }

.la2-pg .mempty {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r2);
    background: var(--band2);
}

.la2-pg .mempty .ico { width: 30px; height: 30px; color: var(--muted); margin: 0 auto 9px; }
.la2-pg .mempty p { margin: 0; font-size: 13.5px; color: var(--muted); }


/* ============================================================================
   9 · RELATED REPORTS
   ============================================================================
   Deliberately secondary: smaller cards, the report-type chip only, no status
   chip, no bookmark and no view count — so they cannot compete with the report
   being read. This is the 5B treatment the locked authority specifies, not the
   full shared Search card, but the badge itself is still the SHARED primitive.
   ========================================================================== */

.la2-pg .rel { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.la2-pg .rel h2 { font-size: 18px; margin: 0 0 14px; }

.la2-pg .relgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.la2-pg .relc {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: var(--r2);
    overflow: hidden;
}

.la2-pg .relimg { aspect-ratio: 4 / 3; position: relative; background: var(--p1); }

.la2-pg .relimg > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.la2-pg .relimg .ph .ico { width: 32px; height: 32px; }

.la2-pg .relb { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.la2-pg .relt { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--head); margin: 0; }
[dir="rtl"] .la2-pg .relt { line-height: 1.6; }
.la2-pg .relt a { color: inherit; text-decoration: none; }
.la2-pg .relt a:hover { color: var(--act); text-decoration: underline; }
.la2-pg .relm { margin: 0; font-size: 12px; color: var(--muted); }

/* The related strip's chip is one step smaller than the card family's. */
.la2-pg .relimg .tslot .tchip { height: 24px; padding: 0 9px; font-size: 11px; }


/* ============================================================================
   10 · MOBILE ACTION BAR
   ============================================================================
   Hidden above the sidebar collapse. Below it, the panel's own claim and
   bookmark controls are hidden instead (§11), so exactly ONE copy of each
   action is visible and operable at any width and there is never a duplicate
   claim button on screen. Every control maps to a route the runtime already
   ships — nothing here is a new action.
   ========================================================================== */

.la2-pg .mbar { display: none; }

.la2-pg .mbar form { display: contents; }

.la2-pg .mbar .btn { min-height: 48px; padding: 0 14px; white-space: nowrap; font-size: 15px; }
.la2-pg .mbar .btn.claim { flex: 1; min-width: 0; }
.la2-pg .mbar .ibtn { width: 48px; height: 48px; padding: 0; flex: none; border-radius: var(--r2); }
.la2-pg .mbar .sv { width: 48px; height: 48px; }


/* ============================================================================
   11 · RESPONSIVE
   ============================================================================
   Below the collapse the two-column grid becomes one flow. `.dcol`, `.side` and
   `.sidesticky` go `display: contents` so the main column's sections and the
   sidebar's blocks become siblings of one flex container and `order` can
   interleave them — which is what lets the reward move to just under the
   gallery, and the related strip fall below the panel, with ONE copy of every
   element in the document rather than a second mobile DOM.
   ========================================================================== */

@media (max-width: 991.98px) {

    .la2-pg .dgrid {
        display: flex;
        flex-direction: column;
        gap: 0;
        /* The desktop grid sets `align-items: start`, which a COLUMN flex box reads
           as a cross-axis (horizontal) alignment and shrink-wraps every stacked
           block to its content. Stretch is what makes the one-column stack full
           width. */
        align-items: stretch;
    }

    .la2-pg .dcol,
    .la2-pg .side,
    .la2-pg .sidesticky { display: contents; }

    .la2-pg .gal { order: 1; }

    /* The one sidebar element that changes the reader's decision before they
       scroll, so it is promoted above the report body. */
    .la2-pg .rew { order: 2; margin-top: 18px; }

    .la2-pg .sblk { order: 3; }
    .la2-pg .msec { order: 4; }
    .la2-pg .panel { order: 5; margin-top: 24px; }
    .la2-pg .safe { order: 6; margin-top: 16px; }
    .la2-pg .rel { order: 7; }

    /* Desktop-only in the placement registry — it cannot appear here at all. */
    .la2-pg .adside { display: none; }

    /* The actions handed to the sticky bar. Hidden here, not duplicated there:
       `display: none` also removes them from the tab order, so there is exactly
       one operable claim control and one operable bookmark control on screen.
       `.claimzone--in-bar` is set by Blade only when the bar really does carry
       the claim action, so a pending claim's Edit / Cancel pair — which the bar
       does NOT carry — is never hidden with nothing taking its place. */
    .la2-pg .panel .bmrow,
    .la2-pg .panel .claimzone--in-bar { display: none; }

    .la2-pg .mbar {
        position: sticky;
        bottom: 0;
        z-index: 20;
        display: flex;
        gap: 9px;
        align-items: center;
        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
        background: color-mix(in oklab, var(--bg) 96%, transparent);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--edge);
    }

    /* Clearance equal to the bar height plus the safe area, so the bar never
       covers the end of the page. */
    .la2-pg .dmain { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

    /* The rounded surfaces STAY below the collapse — the owner revision applies
       at every width — but they tighten so the page does not become a stack of
       bloated cards. */
    .la2-pg .sblk { padding: 16px; margin-top: 16px; }
    .la2-pg .sblk h2 { font-size: 17px; }
    .la2-pg .ownerbox { padding: 11px 12px; }

    /* The panel's actions take the small button metrics below the collapse — the
       board's own `sm` on the mobile frame — so the stack stays compact beside the
       sticky bar. ONE element, two sizes; never a second mobile control. */
    .la2-pg .panel .acts .btn { min-height: 44px; font-size: 14px; padding: 0 15px; }

    .la2-pg .dl2 { grid-template-columns: minmax(0, 1fr); }
    .la2-pg .dl2 dt { padding: 9px 0 0; border-top: 1px solid var(--line); }
    [dir="rtl"] .la2-pg .dl2 dt { padding: 9px 0 0; }
    .la2-pg .dl2 dd { padding: 2px 0 9px; border-top: 0; }

    .la2-pg .relgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }

    .la2-pg .mcard { gap: 11px; }
}

@media (max-width: 575.98px) {
    .la2-pg .ihead { padding: 14px 0 16px; }
    .la2-pg h1.ititle { font-size: 23px; max-width: none; }
    [dir="rtl"] .la2-pg h1.ititle { font-size: 22px; max-width: none; }
    .la2-pg .galmain { border-radius: var(--r2); }
    .la2-pg .thumb { width: 72px; height: 72px; }
}