.hr-pdl {
    display: flex;
    flex-direction: column;
    row-gap: var(--hr-pdl-gap-row, 24px);
    width: 100%;
}

/* Row 0: back-to-listings link (#997). A .hr-pdl row like the others (definite
   width, #995). The column row-gap would put a full slot gap under a one-line
   link, so the negative margin pulls the hero back up to a 12px lead-in
   whatever gap.row is set to. */
.hr-pdl-back {
    width: 100%;
    margin-bottom: calc(var(--hr-pdl-back-gap, 12px) - var(--hr-pdl-gap-row, 24px));
}

.hr-pdl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: -4px;
    padding: 2px 8px 2px 4px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--hr-text-base, #000);
    opacity: 0.72;
    text-decoration: none;
    transition: opacity 120ms ease, color 120ms ease;
}

.hr-pdl-back-link:hover {
    opacity: 1;
    color: var(--hr-pdl-accent, var(--hr-primary, #333333));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hr-pdl-back-link:focus-visible {
    opacity: 1;
    outline: 2px solid var(--hr-pdl-accent, var(--hr-primary, #333333));
    outline-offset: 2px;
}

.hr-pdl-back-icon {
    flex: 0 0 auto;
}

/* Row 1: Hero - full width */
.hr-pdl-hero {
    width: 100%;
}

/* An unbound hero/bottom slot renders as an empty row that still claims the
   column row-gap — 24px of nothing above the content or under it (#997 B).
   Both render paths leave the slot element childless when nothing is bound
   (SSR: `renderedSlots.hero ?? null`; CSR: an empty host list), so :empty
   holds identically. The sidebar is left alone: hiding an empty one would
   not widen the main column (fixed flex-basis), only move the row's geometry. */
.hr-pdl-hero:empty,
.hr-pdl-bottom:empty {
    display: none;
}

/* Row 2: Main + Sidebar */
.hr-pdl-content {
    display: flex;
    flex-direction: column;
    gap: var(--hr-pdl-gap-col, 24px);
    /* Explicit like the hero/bottom rows: .hr-pdl is a column flex container,
       and without a definite width an `.hr-pdl-content { margin: 0 auto }`
       from site custom CSS flips this item from stretch to fit-content
       sizing — the whole page then lays out at the widgets' intrinsic
       ~1000px on phones (#995). */
    width: 100%;
}

/* The desktop media rule (row direction + column flex-basis) is generated by
   widget.tsx with the configured breakpoint and ratio custom properties —
   CSS variables cannot appear in @media conditions (#681). */

/* Sticky sidebar. widget.tsx always sets the custom property from
   sidebar.stickyOffset; the fallback only documents the schema default (80,
   #945 — the 24 it used to say predated that change). */
.hr-pdl-sidebar-inner {
    position: sticky;
    top: var(--hr-pdl-sticky-offset, 80px);
}

/* Vertical spacing between stacked widgets within slots */
.hr-pdl-main > *,
.hr-pdl-hero > *,
.hr-pdl-bottom > * {
    margin-bottom: var(--hr-pdl-gap-row, 24px);
}

.hr-pdl-main > *:last-child,
.hr-pdl-hero > *:last-child,
.hr-pdl-bottom > *:last-child {
    margin-bottom: 0;
}

/* section-nav (#1068) is fixed-position chrome with a zero-height in-flow
   footprint: it must not claim the row gap, or the slot shows an empty band
   where the strip's host sits. Scoped to section-nav roots only. Two rules,
   not one list: the CSR shape needs :has(), and an unsupported :has() would
   invalidate the plain SSR-shape selectors if they shared the list. */
.hr-pdl-main > [data-hr-widget="section-nav"],
.hr-pdl-hero > [data-hr-widget="section-nav"],
.hr-pdl-bottom > [data-hr-widget="section-nav"] {
    margin-bottom: 0;
}

/* CSR shape: the root sits inside the runtime's [data-hr-widget-container]. */
.hr-pdl-main > [data-hr-widget-container]:has(> [data-hr-widget="section-nav"]),
.hr-pdl-hero > [data-hr-widget-container]:has(> [data-hr-widget="section-nav"]),
.hr-pdl-bottom > [data-hr-widget-container]:has(> [data-hr-widget="section-nav"]) {
    margin-bottom: 0;
}

/* Zero-footprint children (#1402): unlike section-nav's per-TYPE exemption
   above (#1068), a widget's zero-footprint status can depend on its own
   SETTINGS — reviews' floating badge is fixed-position and collapses to
   zero height, but its list/grid/carousel layouts (and a static badge) stay
   in flow — so a type-keyword exemption here would either miss the floating
   case or wrongly zero the margin for the in-flow ones. Any zero-footprint
   widget instead marks data-hr-inflow="none" somewhere in its own rendered
   subtree (both the SSR and CSR output). :has() with no child combinator
   matches a descendant at any depth, so one rule covers the SSR shape (the
   marker sits inside the [data-hr-widget] host) and the CSR shape (one more
   [data-hr-widget-container] wrapper deep) without the two-rule split
   section-nav needed above. Requires :has() support (Chrome 105+, Safari
   15.4+, Firefox 121+); this codebase already relies on it elsewhere
   (reviews.css's modal z-index rule, the CSR rule above). */
.hr-pdl-main > *:has([data-hr-inflow="none"]),
.hr-pdl-hero > *:has([data-hr-inflow="none"]),
.hr-pdl-bottom > *:has([data-hr-inflow="none"]) {
    margin-bottom: 0;
}

/* Row 3: Bottom - full width */
.hr-pdl-bottom {
    width: 100%;
}

/* Custom fields block (dashboard#1420). No color literals and no
   background (layout shells never paint one, common.css exclusions on
   [data-hr-widget-category="layout"]) — text inherits from the page/host,
   matching how the back-link row above stays unstyled beyond layout. */
.hr-pdl-custom-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    width: 100%;
}

.hr-pdl-custom-field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hr-pdl-custom-field-label {
    font-weight: 600;
    opacity: 0.75;
}

.hr-pdl-custom-field-value {
    /* Operator-imported values are free text: a long unbroken token (a URL, a
       pasted code) otherwise widens the grid and overflows the layout shell. */
    overflow-wrap: anywhere;
    white-space: pre-line;
    margin: 0;
}