/* ==========================================================================
   Ridents — design layer
   --------------------------------------------------------------------------
   Bootstrap supplies the grid, utilities and the offcanvas/dropdown behaviour.
   Everything visual is owned here, so the interface reads as Ridents rather
   than as stock Bootstrap.

   The palette is deliberately its own: indigo / teal / amber / coral. The
   homepage keeps the blueprint's structure — centred wordmark, pill search
   field, chips, four cards — without borrowing another search engine's
   colours or letterforms.
   ========================================================================== */

:root {
    /* Brand ------------------------------------------------------------- */
    --r-indigo:      #3d5afe;
    --r-indigo-dark: #2f49d8;
    --r-indigo-soft: #eef1ff;
    --r-teal:        #00b8a9;
    --r-teal-soft:   #e4f8f6;
    --r-amber:       #ff9f1c;
    --r-amber-soft:  #fff4e3;
    --r-coral:       #ff5a5f;
    --r-coral-soft:  #ffeeef;

    /* Text-safe variants of teal/amber, for the handful of places these
       carry copy rather than decorating a badge/background/icon. The base
       --r-teal/--r-amber read at 2.05:1 and 2.49:1 on white — decorative
       uses (badge fills, icon strokes, chip accents) don't need AA contrast,
       but the two places that set live-region validation TEXT in these
       colors (.r-submit__count) did, and didn't have it. */
    --r-teal-text:   #00847a;
    --r-amber-text:  #ad6400;

    /* Same reasoning, for the rejected/suspended pill text on the account
       dashboard — matches .r-flash--error's colour, already proven AA. */
    --r-coral-text:  #a3282c;

    /* Ink and surfaces --------------------------------------------------- */
    --r-ink:         #1f2330;
    --r-ink-2:       #4a5060;
    --r-ink-3:       #70768a;
    --r-line:        #e3e6ec;
    --r-line-strong: #cfd4de;
    --r-surface:     #ffffff;
    --r-surface-2:   #f7f8fa;
    --r-footer:      #f5f6f8;

    /* Type --------------------------------------------------------------- */
    --r-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
              "Helvetica Neue", Arial, sans-serif;

    /* Shape and depth ---------------------------------------------------- */
    --r-radius:    12px;
    --r-radius-lg: 16px;
    --r-pill:      999px;
    --r-shadow-1:  0 1px 2px rgba(31, 35, 48, .06), 0 1px 3px rgba(31, 35, 48, .04);
    --r-shadow-2:  0 2px 6px rgba(31, 35, 48, .08), 0 6px 18px rgba(31, 35, 48, .07);
    --r-shadow-3:  0 8px 28px rgba(31, 35, 48, .12);

    /* The search field is the visual anchor of the whole product, and the
       approved design gives it roughly 59% of the viewport. Capped so it does
       not become an unreadably long line on a 1920 display. */
    --r-search-max: 880px;
    --r-header-h:   64px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--r-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--r-ink);
    background: var(--r-surface);
    -webkit-font-smoothing: antialiased;

    /* Never allow sideways scroll. Checked at every breakpoint down to 360px. */
    overflow-x: hidden;
}

a { color: var(--r-indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible focus everywhere. :focus-visible keeps the ring for keyboard users
   without outlining every mouse click. */
:focus-visible {
    outline: 3px solid rgba(61, 90, 254, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

.r-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: .75rem 1.25rem;
    background: var(--r-indigo);
    color: #fff;
    border-radius: 0 0 var(--r-radius) 0;
}
.r-skip-link:focus { left: 0; text-decoration: none; }

.r-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Page is a flex column so the footer sits at the bottom on short pages but
   still flows normally when content is tall. */
.r-page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.r-main { flex: 1 0 auto; }

.r-shell {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.r-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--r-header-h);
    padding: 0 24px;
}

.r-header__left,
.r-header__right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.r-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--r-ink-2);
    cursor: pointer;
    transition: background-color .15s ease;
    flex: 0 0 auto;
}
.r-iconbtn:hover { background: var(--r-surface-2); color: var(--r-ink); }
.r-iconbtn svg { width: 22px; height: 22px; }

/* Primary nav ------------------------------------------------------------ */

.r-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

.r-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--r-header-h);
    padding: 0 14px;
    font-size: 14.5px;
    color: var(--r-ink-2);
    text-decoration: none;
    white-space: nowrap;

    /* "More" is a <button> so it can own a dropdown; without these it renders
       with the browser's default button chrome and looks nothing like the
       anchors beside it. */
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.r-nav__link:hover { color: var(--r-ink); text-decoration: none; }

/* The active tab carries an underline, as in the approved design. */
.r-nav__link.is-active { color: var(--r-indigo); font-weight: 500; }
.r-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--r-indigo);
}

.r-nav__caret { width: 14px; height: 14px; opacity: .7; }

.r-signin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    background: var(--r-indigo);
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    border: 0;
    white-space: nowrap;
}
.r-signin:hover { background: var(--r-indigo-dark); color: #fff; text-decoration: none; }
.r-signin svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.r-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 84px 24px 0;
    text-align: center;
}

/* Wordmark ---------------------------------------------------------------
   Multicolour like the approved layout, but on the Ridents palette and in the
   product's own typeface — the structure is reproduced, the trade dress is not. */
.r-logo {
    font-size: clamp(56px, 9vw, 92px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
    margin: 0;
    user-select: none;
}
.r-logo a { color: inherit; text-decoration: none; }
.r-logo span:nth-child(4n+1) { color: var(--r-indigo); }
.r-logo span:nth-child(4n+2) { color: var(--r-teal); }
.r-logo span:nth-child(4n+3) { color: var(--r-amber); }
.r-logo span:nth-child(4n+4) { color: var(--r-coral); }

.r-tagline {
    margin: 14px 0 0;
    font-size: clamp(16px, 2.2vw, 20px);
    color: var(--r-ink-3);
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Search field — the focal point of the page
   -------------------------------------------------------------------------- */

.r-searchwrap {
    width: 100%;
    max-width: var(--r-search-max);
    margin: 34px auto 0;
    position: relative;
}

.r-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--r-line-strong);
    border-radius: var(--r-pill);
    background: var(--r-surface);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.r-search:hover { box-shadow: var(--r-shadow-2); border-color: transparent; }
.r-search.is-focused { box-shadow: var(--r-shadow-2); border-color: transparent; }

/* When the suggestion list is open the field and list read as one surface.
   The shadow is split rather than shared: this element casts upward and to the
   sides only, and .r-suggest casts downward and to the sides, so the two halves
   form one continuous halo with no dark seam where they meet. A full shadow on
   both would draw a line across the join, which is precisely the giveaway that
   they are two stacked boxes rather than one open capsule. */
.r-searchwrap.is-open .r-search {
    border-radius: 24px 24px 0 0;
    border-color: transparent;
    box-shadow: 0 -1px 6px rgba(31, 35, 48, .16);
}

.r-search__icon { width: 20px; height: 20px; color: var(--r-ink-3); flex: 0 0 auto; }

.r-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    /* Zeroed explicitly: browsers give an <input> a couple of pixels of their
       own, which is invisible on its own and obvious the moment the suggestion
       rows below have to line up with this text. */
    padding: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: var(--r-ink);
}
.r-search__input::placeholder { color: var(--r-ink-3); }

.r-search__tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* 44px hit area at every width — a tablet at 768px is still a touch device, so
   sizing these by viewport would leave real touch targets too small. The icon
   stays 20px; only the hit area is larger, and the hover background is the only
   thing that reveals it. */
.r-search__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 0; background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--r-ink-3);
}
.r-search__tool:hover { background: var(--r-surface-2); }
.r-search__tool svg { width: 20px; height: 20px; }
.r-search__tool--voice { color: var(--r-indigo); }
.r-search__tool--lens  { color: var(--r-teal); }

/* Only shown once there is something to clear. */
.r-search__clear[hidden] { display: none; }

.r-search__divider { width: 1px; height: 22px; background: var(--r-line); flex: 0 0 auto; }

/* Suggestions ------------------------------------------------------------ */

.r-suggest {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 60;
    margin: 0;
    padding: 4px 0 8px;
    list-style: none;
    background: var(--r-surface);
    border-radius: 0 0 24px 24px;

    /* A hairline where the field ends, exactly as the reference does. Without
       it the input and the list merge into one undifferentiated white slab and
       the field stops looking like a field. */
    border-top: 1px solid var(--r-line);

    /* Downward and sideways only — see .r-searchwrap.is-open .r-search. */
    box-shadow: 0 4px 10px rgba(31, 35, 48, .16);
    overflow: hidden;

    /* The homepage hero centres its text, and a suggestion list is the one
       place that must not inherit it: a centred list has a different left edge
       on every row, so the eye has nothing to scan down and the rows stop
       lining up with the text in the field above them. */
    text-align: left;
}
.r-suggest[hidden] { display: none; }

/*
 * Row geometry is copied from the field above rather than chosen.
 *
 * .r-search is `padding: 0 16px` with a 20px icon and a 12px gap, putting the
 * input's text at 48px from the left edge. These rows use the identical
 * values, so a suggestion's first letter sits directly under the first letter
 * of what was typed, and the icons form one vertical line. Any other numbers
 * make the list look bolted on.
 */
.r-suggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 17px on the left, not 16: the field above keeps its 1px border when open
       (only the colour goes transparent), so its contents sit one pixel
       further in. Matching 16 here leaves every row a pixel off. */
    padding: 6px 16px 6px 17px;
    cursor: pointer;
    font-size: 16px;
    line-height: 22px;
    color: var(--r-ink);
}
/* Both hover and keyboard highlight use the same state, so arrowing through
   the list looks identical to moving the mouse through it. */
.r-suggest__item:hover,
.r-suggest__item.is-active { background: var(--r-surface-2); }

.r-suggest__icon { width: 20px; height: 20px; color: var(--r-ink-3); flex: 0 0 auto; }
.r-suggest__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The completion, not the match — see renderText() in ridents.js. */
.r-suggest__text b { font-weight: 600; }

.r-suggest__meta { font-size: 12.5px; color: var(--r-ink-3); flex: 0 0 auto; padding-left: 12px; }
.r-suggest__status { padding: 8px 16px; font-size: 14px; color: var(--r-ink-3); }

/* Buttons ---------------------------------------------------------------- */

.r-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.r-inline { display: inline; }

.r-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.r-btn:hover { text-decoration: none; }
/* An <svg> with no width/height and no sizing class falls back to the
   browser's 300x150 replaced-element default — invisible on desktop where
   Icon::render('external') on the "Visit Website" button happened to still
   read as "a big blob before the label", but on a narrow mobile viewport it
   is large enough to push the label off-screen entirely. Scoped here rather
   than fixed per call site so every current and future bare Icon::render()
   inside a button is sized correctly without remembering to pass a class. */
.r-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.r-btn--primary { background: var(--r-indigo); color: #fff; }
.r-btn--primary:hover { background: var(--r-indigo-dark); color: #fff; box-shadow: var(--r-shadow-1); }

.r-btn--ghost { background: var(--r-surface); color: var(--r-ink-2); border-color: var(--r-line); }
.r-btn--ghost:hover { background: var(--r-surface-2); color: var(--r-ink); border-color: var(--r-line-strong); }

.r-btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Trending searches
   -------------------------------------------------------------------------- */

.r-trending { margin-top: 66px; }

.r-trending__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--r-ink);
}
.r-trending__head svg { width: 17px; height: 17px; color: var(--r-indigo); }

.r-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.r-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--r-line);
    border-radius: var(--r-pill);
    background: var(--r-surface);
    color: var(--r-ink-2);
    font-size: 14px;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.r-chip:hover {
    border-color: var(--r-line-strong);
    background: var(--r-surface-2);
    color: var(--r-ink);
    text-decoration: none;
}
.r-chip svg { width: 15px; height: 15px; color: var(--r-ink-3); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Discovery cards
   -------------------------------------------------------------------------- */

.r-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 58px auto 90px;
    max-width: 1070px;
}

.r-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius);
    background: var(--r-surface);
    color: inherit;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.r-card:hover {
    box-shadow: var(--r-shadow-2);
    border-color: transparent;
    text-decoration: none;
    transform: translateY(-2px);
}
.r-card:focus-visible { box-shadow: var(--r-shadow-2); border-color: transparent; }

.r-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 11px;
    flex: 0 0 auto;
}
.r-card__icon svg { width: 21px; height: 21px; }

.r-card__icon--business { background: var(--r-indigo-soft); color: var(--r-indigo); }
.r-card__icon--service  { background: var(--r-teal-soft);   color: var(--r-teal); }
.r-card__icon--product  { background: var(--r-coral-soft);  color: var(--r-coral); }
.r-card__icon--location { background: var(--r-amber-soft);  color: var(--r-amber); }

.r-card__title { font-size: 15px; font-weight: 600; color: var(--r-ink); }
.r-card__desc  { font-size: 12.5px; color: var(--r-ink-3); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.r-footer {
    flex: 0 0 auto;
    background: var(--r-footer);
    border-top: 1px solid var(--r-line);
}

.r-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 24px;
}

.r-footer__links { display: flex; flex-wrap: wrap; gap: 4px; }

.r-footer__link {
    padding: 8px 12px;
    font-size: 14px;
    /* --r-ink-3 on --r-footer's background reads 4.18:1, just under AA —
       one step darker here only (not the shared token) since --r-ink-3 on
       white elsewhere is fine at 4.52:1. */
    color: #6a7083;
    border-radius: 6px;
}
.r-footer__link:hover { color: var(--r-ink); text-decoration: none; background: rgba(31, 35, 48, .04); }

.r-footer__region {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--r-ink-3);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.r-footer__region:hover { color: var(--r-ink); background: rgba(31, 35, 48, .04); }
.r-footer__region svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */

.r-flash {
    max-width: 640px;
    margin: 16px auto 0;
    padding: 12px 16px;
    border-radius: var(--r-radius);
    font-size: 14.5px;
    border: 1px solid transparent;
}
.r-flash--success { background: var(--r-teal-soft);  border-color: #b9e9e4; color: #0a6f66; }
.r-flash--error   { background: var(--r-coral-soft); border-color: #ffc9cb; color: #a3282c; }
.r-flash--info    { background: var(--r-indigo-soft);border-color: #ccd4ff; color: #2f49d8; }

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

.r-drawer__nav { display: flex; flex-direction: column; padding: 8px 0; }
.r-drawer__divider { border: 0; border-top: 1px solid var(--r-line); margin: 8px 20px; }

.r-drawer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 20px;
    color: var(--r-ink-2);
    font-size: 15.5px;
}
.r-drawer__link:hover { background: var(--r-surface-2); color: var(--r-ink); text-decoration: none; }
.r-drawer__link.is-active { color: var(--r-indigo); font-weight: 600; background: var(--r-indigo-soft); }
.r-drawer__link svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------
   Verified at 1920 / 1440 / 1366 / 1024 / 768 / 430 / 390 / 360. Tap targets
   stay at or above 44px and the page never scrolls sideways.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .r-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
    .r-hero  { padding-top: 60px; }
    .r-trending { margin-top: 52px; }
}

@media (max-width: 860px) {
    /* Desktop nav folds into the drawer; the hamburger is already present. */
    .r-nav { display: none; }
    .r-header { padding: 0 12px; }
}

@media (max-width: 640px) {
    .r-hero { padding: 40px 18px 0; }
    .r-shell { padding-inline: 18px; }

    .r-search { height: 52px; padding: 0 10px; gap: 6px; }
    .r-searchwrap { margin-top: 26px; }

    /* The field tightens here, so the rows have to tighten with it or the
       suggestions stop lining up with the text they are completing: 1px border
       + 10px padding + 20px icon + 6px gap. */
    .r-suggest__item { padding-left: 11px; padding-right: 11px; gap: 6px; }

    /* Full-width stacked buttons: at this size a 44px target matters more
       than the side-by-side arrangement. */
    .r-actions { flex-direction: column; align-items: stretch; margin-top: 24px; }
    .r-btn { width: 100%; }

    /* Chips scroll sideways in their own track rather than wrapping into a
       tall block that pushes the cards off-screen. */
    .r-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .r-chips::-webkit-scrollbar { display: none; }

    .r-cards { grid-template-columns: 1fr; margin: 40px auto 60px; gap: 12px; }

    .r-footer__row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; }
    .r-footer__links { gap: 0; }
}

@media (max-width: 380px) {
    .r-logo { font-size: 50px; }
    .r-tagline { font-size: 15px; }
    .r-signin { padding: 0 14px; }
    .r-signin span { display: none; }  /* icon-only at the narrowest widths */
}

/* Respect a reduced-motion preference: remove movement, keep state changes. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .r-card:hover { transform: none; }
}

@media print {
    .r-header, .r-footer, .r-actions, .r-suggest { display: none !important; }
}

/* ==========================================================================
   Search results page
   ========================================================================== */

.r-serp { border-bottom: 1px solid var(--r-line); }

.r-serp__bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 24px 10px;
}

.r-serp__logo {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
    text-decoration: none;
    flex: 0 0 auto;
}
.r-serp__logo span:nth-child(4n+1) { color: var(--r-indigo); }
.r-serp__logo span:nth-child(4n+2) { color: var(--r-teal); }
.r-serp__logo span:nth-child(4n+3) { color: var(--r-amber); }
.r-serp__logo span:nth-child(4n+4) { color: var(--r-coral); }

/* The field keeps its prominence here, just left-aligned rather than centred. */
.r-serp__search { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.r-serp__search .r-searchwrap { margin: 0; max-width: none; }
.r-serp__search .r-search { height: 46px; }

.r-serp__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }

.r-serp__tabs {
    display: flex;
    gap: 4px;
    padding: 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
}
.r-serp__tabs::-webkit-scrollbar { display: none; }

.r-serp__tab {
    position: relative;
    padding: 10px 14px 12px;
    font-size: 14.5px;
    color: var(--r-ink-3);
    white-space: nowrap;
}
.r-serp__tab:hover { color: var(--r-ink); text-decoration: none; }
.r-serp__tab.is-active { color: var(--r-indigo); font-weight: 500; }
.r-serp__tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--r-indigo);
}

.r-serp__body { max-width: 720px; margin-inline: 0; padding-left: 24px; }
@media (min-width: 1100px) { .r-serp__body { padding-left: 148px; } }

.r-serp__stats { font-size: 13.5px; color: var(--r-ink-3); margin: 16px 0 6px; }
.r-serp__hint  { font-size: 15px; color: var(--r-ink-3); margin: 40px 0; }

.r-serp__correction { font-size: 15px; margin: 16px 0 0; color: var(--r-ink-2); }
.r-serp__correction strong { color: var(--r-coral); font-style: italic; }

.r-serp__note {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 24px 0; padding: 12px 14px;
    background: var(--r-surface-2); border-radius: var(--r-radius);
    font-size: 13.5px; color: var(--r-ink-2);
}
.r-serp__note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

/* Results ---------------------------------------------------------------- */

.r-results { list-style: none; margin: 8px 0 0; padding: 0; }

.r-result { padding: 18px 0; border-bottom: 1px solid var(--r-line); }
.r-result:last-child { border-bottom: 0; }

.r-result__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.r-result__favicon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--r-indigo-soft); color: var(--r-indigo);
    font-size: 13px; font-weight: 700;
}

.r-result__meta { min-width: 0; line-height: 1.25; }
.r-result__site { display: block; font-size: 14px; color: var(--r-ink); }
.r-result__url  { display: block; font-size: 12.5px; color: var(--r-ink-3);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.r-result__title { margin: 2px 0 4px; font-size: 20px; font-weight: 400; line-height: 1.3; }
.r-result__title a { color: var(--r-indigo); }
.r-result__title a:visited { color: #6b4bb8; }

.r-result__desc { margin: 0 0 8px; font-size: 14.5px; color: var(--r-ink-2); line-height: 1.58; }

.r-result__facts { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--r-ink-3); }
.r-result__fact  { display: inline-flex; align-items: center; gap: 5px; }
.r-result__fact svg { width: 14px; height: 14px; }

.r-result__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.r-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 500;
    background: var(--r-indigo-soft); color: var(--r-indigo);
}
/* #0a7f74 read 4.43:1 at this badge's 12px size, just under AA. */
.r-badge--verified { background: var(--r-teal-soft); color: #0a7c72; }
.r-badge svg { width: 13px; height: 13px; }

/* Empty state ------------------------------------------------------------ */

.r-empty { padding: 32px 0 48px; max-width: 560px; }
.r-empty__title { font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.r-empty__text  { font-size: 15px; color: var(--r-ink-2); margin: 0 0 14px; }
.r-empty__tips  { font-size: 14.5px; color: var(--r-ink-2); margin: 0 0 22px; padding-left: 20px; }
.r-empty__tips li { margin-bottom: 6px; }

/* Active filters --------------------------------------------------------- */

.r-activefilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.r-activefilters__label { font-size: 13px; color: var(--r-ink-3); }
.r-activefilters__clear { font-size: 13px; }
.r-chip--removable { min-height: 32px; padding: 0 12px; font-size: 13px; }
.r-chip--removable svg { width: 13px; height: 13px; }

/* Pagination ------------------------------------------------------------- */

.r-pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 32px 0 56px; }

.r-pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 12px;
    border-radius: 8px; font-size: 14.5px; color: var(--r-indigo);
}
.r-pagination__link:hover { background: var(--r-surface-2); text-decoration: none; }
.r-pagination__link.is-current { background: var(--r-indigo); color: #fff; font-weight: 600; }
.r-pagination__gap { padding: 0 4px; color: var(--r-ink-3); }

/* Filter panel ----------------------------------------------------------- */

.r-filters__group { margin-bottom: 18px; }
.r-filters__label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.r-filters__hint  { font-size: 12.5px; color: var(--r-ink-3); margin: 6px 0 0; }
.r-filters__check { margin: 8px 0 22px; }
.r-filters__actions { display: flex; gap: 10px; }

@media (max-width: 860px) {
    .r-serp__bar { flex-wrap: wrap; gap: 12px; padding: 12px 16px 8px; }
    .r-serp__logo { font-size: 22px; }
    .r-serp__search { order: 3; flex-basis: 100%; max-width: none; }
    .r-serp__actions { margin-left: auto; }
    .r-serp__tabs { padding: 0 16px; }
    .r-serp__body { padding-left: 16px; padding-right: 16px; }
    .r-result__title { font-size: 18px; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.r-field { margin-bottom: 16px; }
.r-field__label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--r-ink); }

.r-field__input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--r-ink);
    background: var(--r-surface);
    border: 1px solid var(--r-line-strong);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.r-field__input:focus { outline: 0; border-color: var(--r-indigo); box-shadow: 0 0 0 3px rgba(61,90,254,.15); }
.r-field__input.is-invalid { border-color: var(--r-coral); }
.r-field__input--num { max-width: 6rem; text-align: right; }

textarea.r-field__input { min-height: 120px; resize: vertical; }

/* Errors are tied to their input with aria-describedby, so a screen reader
   announces the reason rather than just "invalid". */
.r-field__error { margin: 6px 0 0; font-size: 13px; color: #a3282c; }
.r-field__hint  { margin: 6px 0 0; font-size: 12.5px; color: var(--r-ink-3); }

.r-btn--block { width: 100%; }

/* ==========================================================================
   Auth pages
   ========================================================================== */

.r-auth { display: flex; align-items: center; justify-content: center; padding: 56px 20px; }

.r-auth__card {
    width: 100%; max-width: 420px;
    padding: 32px;
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius-lg);
    box-shadow: var(--r-shadow-1);
}

.r-auth__logo { display: block; text-align: center; font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 20px; }
.r-auth__logo:hover { text-decoration: none; }
.r-auth__logo span:nth-child(4n+1) { color: var(--r-indigo); }
.r-auth__logo span:nth-child(4n+2) { color: var(--r-teal); }
.r-auth__logo span:nth-child(4n+3) { color: var(--r-amber); }
.r-auth__logo span:nth-child(4n+4) { color: var(--r-coral); }

.r-auth__card .r-check { margin-bottom: 18px; }
.r-auth__card .r-check a { color: var(--r-indigo); }

.r-auth__title { font-size: 21px; font-weight: 600; margin: 0 0 4px; text-align: center; }
.r-auth__sub   { font-size: 14px; color: var(--r-ink-3); margin: 0 0 22px; text-align: center; }
.r-auth__foot  { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--r-ink-3); }

/* ==========================================================================
   Content pages: browse, profile, static
   ========================================================================== */

.r-page__body { padding-top: 28px; padding-bottom: 64px; }
.r-page__body--narrow { max-width: 780px; }

.r-page__head { margin-bottom: 24px; }
.r-page__title { font-size: 28px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.r-page__intro { font-size: 15.5px; color: var(--r-ink-2); margin: 0; max-width: 68ch; }
.r-page__count { font-size: 13px; color: var(--r-ink-3); margin: 10px 0 0; }

.r-crumbs { font-size: 13px; color: var(--r-ink-3); margin-bottom: 14px; }
.r-crumbs span { margin: 0 6px; }

.r-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.r-grid--tight { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.r-tile {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--r-line); border-radius: var(--r-radius-lg);
    background: var(--r-surface); color: inherit;
    position: relative; overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
/* A colour bar that sweeps in on hover/focus rather than sitting there
   permanently — depth that shows up as a response to attention, the same
   idea as the lift and the stronger shadow below, instead of a static
   decoration every tile carries all the time. */
.r-tile::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--r-indigo), var(--r-teal));
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s ease;
}
.r-tile:hover, .r-tile:focus-visible {
    text-decoration: none; box-shadow: var(--r-shadow-3); border-color: transparent;
    transform: translateY(-4px);
}
.r-tile:hover::before, .r-tile:focus-visible::before { transform: scaleX(1); }
.r-tile--compact { padding: 14px 16px; }

.r-tile__head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.r-tile__name { font-size: 15.5px; font-weight: 600; color: var(--r-ink); }
.r-tile__desc {
    font-size: 13.5px; color: var(--r-ink-3); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.r-tile__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--r-ink-3); margin-top: 2px; }
.r-tile__meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.r-tile__count { font-size: 12.5px; color: var(--r-indigo); font-weight: 500; }

/* Per-tile icon / avatar, shared by the businesses, services and products
   grids — the thing that turns a list of text rows into cards with an
   identity each. Sizing and tint match .r-card__icon (the homepage's
   discovery cards) on purpose, so the same shape reads consistently
   wherever it appears on the site. */
.r-tile__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
    margin-bottom: 4px;
    transition: transform .25s ease;
}
.r-tile:hover .r-tile__icon { transform: scale(1.08) rotate(-4deg); }
.r-tile__icon svg { width: 19px; height: 19px; }
.r-tile__icon--service { background: var(--r-teal-soft);  color: var(--r-teal); }
.r-tile__icon--product { background: var(--r-coral-soft); color: var(--r-coral); }
.r-tile__icon--news    { background: var(--r-amber-soft); color: var(--r-amber-text); }

.r-tile__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
    margin-bottom: 4px;
    font-size: 16px; font-weight: 700;
    transition: transform .25s ease;
}
.r-tile:hover .r-tile__avatar { transform: scale(1.08) rotate(-4deg); }
.r-tile__avatar--1 { background: var(--r-indigo-soft); color: var(--r-indigo); }
.r-tile__avatar--2 { background: var(--r-teal-soft);   color: var(--r-teal-text); }
.r-tile__avatar--3 { background: var(--r-amber-soft);  color: var(--r-amber-text); }
.r-tile__avatar--4 { background: var(--r-coral-soft);  color: var(--r-coral-text); }

/* Browse page hero ---------------------------------------------------------
   Replaces a plain text .r-page__head on the businesses/services/products
   indexes specifically — the same generated-gradient idea as the listing
   profile banner, so a page with no photography of its own still opens with
   some colour and depth instead of a flat white header. */
.r-browsehero {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 28px 30px;
    border-radius: var(--r-radius-lg);
    margin-bottom: 26px;
    color: #fff;
    position: relative; overflow: hidden;
}
.r-browsehero::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.25) 1.5px, transparent 1.5px);
    background-size: 16px 16px; opacity: .5;
}
.r-browsehero--business { background-image: linear-gradient(135deg, var(--r-indigo), #7b5cff); }
.r-browsehero--service  { background-image: linear-gradient(135deg, var(--r-teal), #00d4c2); }
.r-browsehero--product  { background-image: linear-gradient(135deg, var(--r-coral), #ff8a7a); }
.r-browsehero--news     { background-image: linear-gradient(135deg, var(--r-amber), #ff7a45); }

.r-browsehero__icon {
    position: relative; z-index: 1;
    width: 56px; height: 56px; border-radius: 16px;
    background: rgba(255,255,255,.22);
    display: grid; place-items: center; flex: 0 0 auto;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.r-browsehero__icon svg { width: 28px; height: 28px; }
.r-browsehero__text { position: relative; z-index: 1; flex: 1 1 260px; min-width: 0; }
.r-browsehero__title { font-size: 27px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.r-browsehero__intro { font-size: 14.5px; margin: 0; opacity: .95; max-width: 62ch; }
.r-browsehero__stat {
    position: relative; z-index: 1;
    background: rgba(255,255,255,.18);
    padding: 10px 20px; border-radius: var(--r-radius);
    text-align: center; flex: 0 0 auto;
}
.r-browsehero__stat strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; }
.r-browsehero__stat span { display: block; font-size: 11px; opacity: .9; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

@media (max-width: 640px) {
    .r-browsehero { padding: 22px; }
    .r-browsehero__title { font-size: 22px; }
}

/* Listing profile hero ----------------------------------------------------
   One rounded, shadowed card — banner strip on top, the avatar/name/actions
   sitting in its own white section below — rather than a banner bleeding
   across the full viewport width. A full-bleed stripe reads as a page
   section; a contained card reads as a single deliberate piece of the page,
   which is the difference between "a green bar" and a hero.

   The banner itself is a soft two-colour "aurora" — a couple of large,
   softly-fading light patches over a gradient rather than a flat block or a
   busy repeating texture — plus the avatar, name and primary actions pulled
   up to overlap its bottom edge, the same shape Google Business Profile /
   Yelp / Zomato all converged on independently.

   Four palette variants only, keyed off the listing id, so the same listing
   always gets the same colour and the palette stays the site's own four
   brand colours rather than an arbitrary hash-to-hue.
   ---------------------------------------------------------------------- */

.r-listing__hero {
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius-lg);
    box-shadow: var(--r-shadow-2);
    background: var(--r-surface);
    overflow: hidden;
}

.r-listing__banner {
    height: 152px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.r-listing__banner--1 { background-image: linear-gradient(135deg, var(--r-indigo), #7b5cff); }
.r-listing__banner--2 { background-image: linear-gradient(135deg, var(--r-teal), #00d4c2); }
.r-listing__banner--3 { background-image: linear-gradient(135deg, var(--r-amber), #ff7a45); }
.r-listing__banner--4 { background-image: linear-gradient(135deg, var(--r-coral), #ff8a7a); }

/* Illustrated band content -------------------------------------------------
   Three additions layered on the gradient: a hand-drawn ring motif (real
   <circle> geometry, not a gradient trick — two rounds of gradient tweaks
   upstream of this both still read as "plain"), a translucent icon tile
   borrowed from .r-browsehero__icon's treatment, and a white category
   kicker borrowed from .r-browsehero__title's. Both sit top-left, clear of
   the avatar, which only ever occupies the band's bottom 40px — nothing
   here touches the avatar-overlap mechanism itself. */
.r-listing__pattern {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.r-listing__bandhead {
    position: absolute; left: 26px; top: 18px; z-index: 1;
    display: flex; align-items: center; gap: 10px;
    max-width: calc(100% - 52px);
    color: #fff;
}
.r-listing__bandicon {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255,255,255,.22);
    display: grid; place-items: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.r-listing__bandicon svg { width: 20px; height: 20px; }
.r-listing__bandlabel {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    text-shadow: 0 1px 3px rgba(0,0,0,.18);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.r-listing__body {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 26px 22px;
}

/* Only the avatar overlaps the banner — pulled up by its own negative
   margin, entirely independent of its siblings. Name/meta/actions stay in
   normal flow below the banner and are never at risk of being dragged up
   into it (which is exactly what happened when the whole row shared one
   negative margin: enough header content and the title itself got pulled
   up far enough to be clipped by the card's rounded corners). */
.r-listing__avatar {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: -40px;
    width: 84px; height: 84px;
    border-radius: 20px;
    border: 4px solid var(--r-surface);
    /* A tight, near-neutral ring rather than a directional drop shadow. This
       avatar sits half on a colour banner and half on white, and a
       conventional offset-and-blur shadow reads completely differently
       against each — invisible on the banner, a hard grey rectangle on the
       white below — which looked like a rendering glitch, not a shadow. A
       symmetric, low-spread ring close to the edge reads as "a raised tile"
       consistently regardless of what is behind it. */
    box-shadow: 0 0 0 1px rgba(15,17,23,.06), 0 3px 8px rgba(15,17,23,.10);
    /* White regardless of palette — an avatar tinted the same colour as the
       banner it sits on is exactly what made the previous version nearly
       vanish into it. Only the letter carries the palette colour now, on a
       background that reads clearly against any of the four banners. */
    background: var(--r-surface);
    display: grid; place-items: center;
    font-size: 30px; font-weight: 700;
    overflow: hidden;
}
.r-listing__avatar img { width: 100%; height: 100%; object-fit: cover; }
.r-listing__avatar--1 { color: var(--r-indigo); }
.r-listing__avatar--2 { color: var(--r-teal-text); }
.r-listing__avatar--3 { color: var(--r-amber-text); }
.r-listing__avatar--4 { color: var(--r-coral-text); }

.r-listing__herotext { flex: 1 1 260px; min-width: 0; }

.r-listing__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.r-profile__name { font-size: 26px; font-weight: 650; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; letter-spacing: -.01em; }
.r-profile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 14px; color: var(--r-ink-3); margin: 0; }
.r-profile__meta svg { width: 15px; height: 15px; vertical-align: -3px; }
.r-profile__meta .r-stars { color: var(--r-amber); letter-spacing: 1px; }

.r-listing__trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.r-listing__trust-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--r-surface-2); color: var(--r-ink-2);
    border: 1px solid var(--r-line);
}
.r-listing__trust-item svg { width: 12px; height: 12px; }
.r-listing__trust-item--good { background: var(--r-teal-soft); color: var(--r-teal-text); border-color: transparent; }

.r-profile__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 24px; }

@media (max-width: 640px) {
    .r-listing__banner   { height: 104px; }
    .r-listing__bandhead { left: 18px; top: 12px; gap: 8px; max-width: calc(100% - 36px); }
    .r-listing__bandicon { width: 30px; height: 30px; border-radius: 10px; }
    .r-listing__bandicon svg { width: 16px; height: 16px; }
    .r-listing__bandlabel { font-size: 11px; }
    .r-listing__body    { gap: 14px; padding: 14px 18px 18px; }
    .r-listing__avatar  { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; margin-top: -32px; }
    .r-listing__actions { width: 100%; }
}

/* Contact card icon rows -------------------------------------------------- */

.r-iconlist { list-style: none; margin: 0; padding: 0; }
.r-iconlist li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--r-line);
}
.r-iconlist li:last-child { border-bottom: 0; }
.r-iconlist__icon {
    flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--r-surface-2); color: var(--r-ink-2);
    display: grid; place-items: center;
}
.r-iconlist__icon svg { width: 16px; height: 16px; }
.r-iconlist__body { min-width: 0; }
.r-iconlist__label { display: block; font-size: 11.5px; color: var(--r-ink-3); text-transform: uppercase; letter-spacing: .03em; }
.r-iconlist__value { display: block; font-size: 14px; color: var(--r-ink); word-break: break-word; margin-top: 1px; }
.r-iconlist__value a { color: inherit; }
.r-iconlist__value a:hover { color: var(--r-indigo); }

/* Social links, map, share ------------------------------------------------- */

.r-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.r-social__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--r-pill);
    font-size: 13px; color: var(--r-ink-2);
    background: var(--r-surface-2); border: 1px solid var(--r-line);
}
.r-social__link:hover { border-color: var(--r-line-strong); color: var(--r-ink); text-decoration: none; }
.r-social__link svg { width: 14px; height: 14px; }

.r-map {
    border-radius: var(--r-radius); overflow: hidden;
    border: 1px solid var(--r-line);
    aspect-ratio: 16 / 9;
}
.r-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.r-sharebtn {
    display: inline-flex; align-items: center; gap: 6px;
    width: 100%; justify-content: center;
    padding: 9px 14px; margin-top: 10px;
    border-radius: var(--r-radius); border: 1px solid var(--r-line);
    background: var(--r-surface); color: var(--r-ink-2);
    font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.r-sharebtn:hover { background: var(--r-surface-2); color: var(--r-ink); }
.r-sharebtn svg { width: 15px; height: 15px; }

.r-updated-note { margin: 14px 0 0; }

/* ==========================================================================
   Image search (/images)
   ========================================================================== */

.r-imgsearch {
    display: flex; gap: 10px; max-width: 560px;
    margin: 0 0 6px;
}
.r-imgsearch__input {
    flex: 1 1 auto; min-width: 0;
    height: 46px; padding: 0 16px;
    font-size: 15px; color: var(--r-ink);
    background: var(--r-surface);
    border: 1px solid var(--r-line-strong); border-radius: var(--r-radius);
}
.r-imgsearch__input:focus { outline: 0; border-color: var(--r-indigo); box-shadow: 0 0 0 3px rgba(61,90,254,.15); }
.r-imgsearch__btn { height: 46px; padding: 0 22px; }
.r-imgsearch__note { font-size: 12.5px; color: var(--r-ink-3); margin: 0 0 26px; }

.r-photogrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 40px;
}

.r-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-radius);
    overflow: hidden;
    background: var(--r-surface-2);
    box-shadow: var(--r-shadow-1);
}
.r-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.r-photo:hover img { transform: scale(1.06); }
.r-photo__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 18px 10px 8px;
    font-size: 12px; color: #fff;
    background: linear-gradient(0deg, rgba(15,17,23,.75), transparent);
    opacity: 0; transition: opacity .2s ease;
}
.r-photo:hover .r-photo__caption { opacity: 1; }

.r-section-title { font-size: 18px; font-weight: 650; margin: 0 0 4px; color: var(--r-ink); }
.r-section-hint  { font-size: 13.5px; color: var(--r-ink-3); margin: 0 0 16px; }

/* ==========================================================================
   News achievement promo
   --------------------------------------------------------------------------
   The one box on the submission sidebar meant to be noticed, not just
   consulted — a gradient "reward" card with real depth (layered shadows, a
   glossy top highlight, a lift on hover) rather than the flat neutral panels
   used everywhere else on this page, so it reads as a badge rather than
   another form hint.
   ========================================================================== */

.r-achieve {
    display: block;
    padding: 18px 18px 16px;
    margin-bottom: 20px;
    border-radius: var(--r-radius-lg);
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.16), transparent 40%),
        linear-gradient(135deg, var(--r-amber), var(--r-coral));
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 14px 26px -8px rgba(255, 122, 69, .55),
        0 3px 8px rgba(31,35,48,.12);
    transform: translateY(0) scale(1);
    transition: transform .2s ease, box-shadow .2s ease;
}
.r-achieve:hover, .r-achieve:focus-visible {
    text-decoration: none;
    color: #fff;
    transform: translateY(-3px) scale(1.015);
    box-shadow:
        0 1px 0 rgba(255,255,255,.4) inset,
        0 20px 34px -10px rgba(255, 122, 69, .6),
        0 4px 10px rgba(31,35,48,.14);
}

.r-achieve__badge {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; margin-bottom: 10px;
    border-radius: 11px;
    background: rgba(255,255,255,.22);
}
.r-achieve__badge svg { width: 20px; height: 20px; }
.r-achieve__title { display: block; font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.r-achieve__text  { display: block; font-size: 12.5px; line-height: 1.5; opacity: .96; margin-bottom: 12px; }
.r-achieve__text strong { font-weight: 700; }

.r-achieve__bar {
    display: block; height: 6px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.28);
    overflow: hidden;
    margin-bottom: 8px;
}
.r-achieve__fill {
    display: block; height: 100%; border-radius: var(--r-pill);
    background: #fff;
    transition: width .3s ease;
}
.r-achieve__stat { display: block; font-size: 11.5px; font-weight: 600; opacity: .95; }

/* News slot confirmation banner, shown on /submit-news itself. Quieter than
   .r-achieve on purpose — that one has to catch the eye of someone who does
   not know this exists yet; this one only confirms something the visitor
   already knows because it is the reason they are on this page. */
.r-achieve-status {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    margin-bottom: 22px;
    background: var(--r-teal-soft);
    border-radius: var(--r-radius);
}
.r-achieve-status__icon {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--r-teal); color: #fff;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 700;
}
.r-achieve-status strong { display: block; font-size: 14.5px; color: var(--r-ink); }
.r-achieve-status span:not(.r-achieve-status__icon) { font-size: 13px; color: var(--r-ink-2); }

/* Opening hours: today's row picked out from the rest of the week. */
.r-deflist .is-today dt,
.r-deflist .is-today dd { color: var(--r-ink); font-weight: 650; }
.r-deflist .is-today { position: relative; }
.r-deflist .is-today::before {
    content: "Today";
    position: absolute; left: -2px; top: -14px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--r-indigo);
}

/* Sticky mobile action bar -------------------------------------------------
   On a small screen the hero's own action row scrolls out of view within the
   first screenful, and a listing's whole reason for existing is "call or
   visit this business" — so the two or three ways to do that stay reachable
   the entire time you are reading, the way a checkout's buy button would. */
.r-stickybar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--r-surface);
    border-top: 1px solid var(--r-line);
    box-shadow: 0 -4px 16px rgba(31,35,48,.08);
    gap: 8px;
}
.r-stickybar .r-btn { flex: 1 1 0; min-height: 46px; }
@media (max-width: 720px) {
    .r-stickybar { display: flex; }
    /* Leaves room so the sticky bar never covers the report control or footer. */
    .r-page__body:has(.r-stickybar) { padding-bottom: 76px; }
}
.r-profile__text { font-size: 15px; line-height: 1.65; color: var(--r-ink-2); margin: 0; }
/* The report control is a <details>, so it needs no JavaScript and stays
   keyboard-reachable. Collapsed by default: it must be findable without
   competing with the listing's own content. */
.r-profile__report {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius);
    background: var(--r-surface-2);
    font-size: 13.5px;
}
.r-profile__report > summary {
    cursor: pointer;
    color: var(--r-ink-2);
    /* 44px tap target even though it renders as one line of text. */
    padding: 6px 0;
    list-style-position: inside;
}
.r-profile__report > summary:hover { color: var(--r-ink); }
.r-profile__report[open] > summary { margin-bottom: 10px; font-weight: 600; }
.r-profile__report .r-field { margin-bottom: 12px; }
.r-profile__report .r-field__input { font-size: 14px; }

.r-deflist { margin: 0; font-size: 14px; }
.r-deflist > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--r-line); }
.r-deflist > div:last-child { border-bottom: 0; }
.r-deflist dt { color: var(--r-ink-3); font-size: 13px; flex: 0 0 auto; }
.r-deflist dd { margin: 0; text-align: right; word-break: break-word; }

.r-related { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 8px; }
.r-related li { padding: 0; border-bottom: 0; }
.r-related a {
    display: block; padding: 10px 12px; border-radius: var(--r-radius);
    background: var(--r-surface-2); color: var(--r-ink);
}
.r-related a:hover { background: var(--r-indigo-soft); color: var(--r-indigo); text-decoration: none; }
.r-related__desc { display: block; font-size: 12.5px; color: var(--r-ink-3); margin-top: 2px; font-weight: 400; }
.r-related a:hover .r-related__desc { color: var(--r-indigo); opacity: .8; }

.r-review { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--r-line); }
.r-review:last-child { border-bottom: 0; }
.r-review__avatar {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    background: var(--r-indigo-soft); color: var(--r-indigo);
    display: grid; place-items: center; font-size: 14px; font-weight: 650;
}
.r-review__body-wrap { min-width: 0; flex: 1 1 auto; }
.r-review__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; margin: 0 0 4px; }
.r-review__head strong { color: var(--r-ink); }
.r-review__head .r-stars { color: var(--r-amber); font-size: 12px; letter-spacing: 1px; }
.r-review__title { font-weight: 600; margin: 0 0 2px; font-size: 14.5px; }
.r-review__body { font-size: 14px; color: var(--r-ink-2); margin: 0; line-height: 1.55; }

.r-rating-summary { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.r-rating-summary__num { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--r-ink); line-height: 1; }
.r-rating-summary__stars { color: var(--r-amber); font-size: 15px; letter-spacing: 2px; }
.r-rating-summary__count { font-size: 13px; color: var(--r-ink-3); margin-top: 2px; }

/* Prose ------------------------------------------------------------------ */

.r-prose { font-size: 15.5px; line-height: 1.7; color: var(--r-ink-2); max-width: 68ch; }
.r-prose h2 { font-size: 18px; font-weight: 600; color: var(--r-ink); margin: 28px 0 8px; }
.r-prose p  { margin: 0 0 14px; }
.r-prose ul { margin: 0 0 14px; padding-left: 20px; }
.r-prose li { margin-bottom: 6px; }

@media (max-width: 860px) {
    .r-profile__grid { grid-template-columns: 1fr; }
    .r-page__title { font-size: 24px; }
    .r-profile__name { font-size: 23px; }
}


/* ==========================================================================
   Submission form
   --------------------------------------------------------------------------
   Every field on this form is required, and a long single column of equally
   weighted inputs is exactly what makes a required-everything form feel like a
   wall. So: four numbered cards, paired fields side by side, and a hint under
   each input that says what a good answer looks like before it is typed.

   The width is held at 720px rather than the page default. Wider measures read
   as more work even when the field count is identical.
   ========================================================================== */

.r-submit { max-width: 1060px; }

.r-submit__hero { text-align: center; margin: 0 auto 28px; max-width: 640px; }

/* Form + guidance sidebar, side by side once there is room for both without
   squeezing the form itself. Below that width the guide simply becomes the
   next block on the page rather than a column — it is still fully useful
   read top-to-bottom, it just is not pinned beside the field it describes. */
.r-submit__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    align-items: start;
}
.r-submit__form { min-width: 0; }

.r-submit__guide {
    position: sticky;
    top: 84px;
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius-lg);
    box-shadow: var(--r-shadow-1);
    padding: 20px;
}
.r-submit__guide-title { font-size: 14px; font-weight: 650; margin: 0 0 2px; }
.r-submit__guide-sub   { font-size: 12.5px; color: var(--r-ink-3); margin: 0 0 14px; }

/* The tip box mirrors whichever field currently has focus — the one piece of
   guidance most worth surfacing outside the small text under the field
   itself, since that line can scroll out of view while the field is still
   being edited on a short screen. */
.r-submit__tip {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 13px;
    margin-bottom: 16px;
    background: var(--r-indigo-soft);
    border-radius: var(--r-radius);
    font-size: 13px; line-height: 1.5; color: var(--r-ink-2);
}
.r-submit__tip svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--r-indigo); margin-top: 1px; }

.r-submit__checklist { list-style: none; margin: 0; padding: 0; }
.r-submit__check {
    display: flex; align-items: flex-start; gap: 10px;
    width: 100%; text-align: left;
    padding: 9px 4px; border: 0; background: none; cursor: pointer;
    border-radius: 8px;
    font: inherit; font-size: 13.5px; color: var(--r-ink-2);
}
.r-submit__check:hover { background: var(--r-surface-2); }
.r-submit__check-dot {
    flex: 0 0 auto; margin-top: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--r-surface-2); color: transparent;
    border: 1.5px solid var(--r-line-strong);
}
.r-submit__check-dot svg { width: 11px; height: 11px; }
.r-submit__check-label { font-weight: 500; color: var(--r-ink); }
.r-submit__check-note  { display: block; font-size: 12px; color: var(--r-ink-3); margin-top: 1px; }

.r-submit__check.is-done .r-submit__check-dot { background: var(--r-teal); border-color: var(--r-teal); color: #fff; }
.r-submit__check.is-warn .r-submit__check-dot { background: var(--r-amber); border-color: var(--r-amber); color: #fff; }
.r-submit__check.is-warn .r-submit__check-note { color: var(--r-amber-text); }

.r-submit__guide-foot {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--r-line);
    font-size: 12.5px; color: var(--r-ink-3); text-align: center;
}
.r-submit__guide-foot strong { color: var(--r-ink); }

@media (max-width: 980px) {
    .r-submit__layout { grid-template-columns: 1fr; }
    .r-submit__guide  { position: static; order: -1; }
}

.r-submit__eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 12px;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--r-indigo);
    background: var(--r-indigo-soft);
    border-radius: var(--r-pill);
}

.r-submit__title {
    font-size: 32px; font-weight: 650; letter-spacing: -.02em;
    margin: 0 0 10px; color: var(--r-ink);
}

.r-submit__lede {
    font-size: 16px; line-height: 1.6; color: var(--r-ink-2);
    margin: 0 auto; max-width: 56ch;
}

.r-submit__badges {
    list-style: none; margin: 20px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}

.r-submit__badge {
    font-size: 12.5px; color: var(--r-ink-2);
    background: var(--r-surface-2);
    border: 1px solid var(--r-line);
    border-radius: var(--r-pill);
    padding: 5px 12px 5px 26px;
    position: relative;
}

/* A drawn tick rather than an emoji or an icon font: it inherits the text
   colour, needs no extra request, and never renders as a missing glyph. */
.r-submit__badge::before {
    content: "";
    position: absolute; left: 11px; top: 50%;
    width: 5px; height: 9px;
    margin-top: -6px;
    border: solid var(--r-teal);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.r-submit__summary {
    margin-bottom: 20px;
    padding: 14px 16px;
    font-size: 14px; color: #7a1f22;
    background: var(--r-coral-soft);
    border: 1px solid rgba(255, 90, 95, .35);
    border-left-width: 3px;
    border-radius: 10px;
}

/* Cards ------------------------------------------------------------------ */

.r-submit__card {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius-lg);
    box-shadow: var(--r-shadow-1);
    padding: 24px;
    margin-bottom: 18px;
}

.r-submit__step {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--r-line);
}

.r-submit__stepno {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 650;
    color: #fff; background: var(--r-indigo);
    border-radius: 50%;
}

.r-submit__steptitle { font-size: 17px; font-weight: 650; margin: 2px 0 0; color: var(--r-ink); }
.r-submit__stephint  { font-size: 13.5px; line-height: 1.55; color: var(--r-ink-3); margin: 5px 0 0; }

/* Fields ----------------------------------------------------------------- */

.r-submit__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}

/* A field is full width unless it asks to be half, and spanning both columns
   is what "full width" means inside the grid. */
.r-submit__grid .r-field { grid-column: 1 / -1; }
.r-submit__grid .r-field--half { grid-column: span 1; }

.r-field__req { color: var(--r-coral); font-weight: 400; margin-left: 2px; }

/* The arrow is an inline data: URI — the CSP allows data: for images, and this
   avoids both a network request and a dependency on Bootstrap's form-select. */
.r-field__select {
    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 fill='none' stroke='%2370768a' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.r-submit__count { font-size: 12.5px; margin: -8px 0 0; min-height: 18px; color: var(--r-ink-3); }
/* WCAG AA (4.5:1) text-safe variants: the base --r-amber/--r-teal read at
   2.05:1 / 2.49:1 on white, which is fine for a badge fill but not for the
   live validation message these classes color. */
.r-submit__count.is-short { color: var(--r-amber-text); }
.r-submit__count.is-ok    { color: var(--r-teal-text); }

/* Checkboxes ------------------------------------------------------------- */

.r-check {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 14px; line-height: 1.55; color: var(--r-ink-2);
    padding: 12px 14px;
    background: var(--r-surface-2);
    border: 1px solid var(--r-line);
    border-radius: 10px;
    cursor: pointer;
}
.r-check:hover { border-color: var(--r-line-strong); }
.r-check.is-invalid { border-color: var(--r-coral); background: var(--r-coral-soft); }
.r-check input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--r-indigo); }

.r-check--inline {
    background: none; border: 0; padding: 0 0 16px;
    font-size: 13px; color: var(--r-ink-3);
}

/* Submit ----------------------------------------------------------------- */

.r-submit__foot { margin-top: 20px; text-align: center; }
.r-submit__send { width: 100%; min-height: 50px; font-size: 15.5px; }
.r-submit__footnote { font-size: 12.5px; color: var(--r-ink-3); margin: 12px 0 0; }

@media (max-width: 640px) {
    .r-submit__title { font-size: 25px; }
    .r-submit__lede  { font-size: 15px; }
    .r-submit__card  { padding: 20px 16px; }
    .r-submit__grid  { grid-template-columns: 1fr; }
    .r-submit__grid .r-field--half { grid-column: 1 / -1; }
}

/* ==========================================================================
   Dropdown menu and offcanvas panel
   --------------------------------------------------------------------------
   Bootstrap previously supplied these two behaviours (and nothing else that
   isn't already implemented here) at a cost of 313 KB raw / 55 KB gzipped for
   the whole vendored library. This is the same visual result — a toggled
   menu, a slide-in panel with a backdrop — driven by the small vanilla JS
   in ridents.js (see initDropdowns/initOffcanvas) instead.
   ========================================================================== */

.r-dropdown { position: relative; }

.r-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 70;
    min-width: 210px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--r-surface);
    border-radius: var(--r-radius);
    box-shadow: var(--r-shadow-2);
    display: none;
}
.r-dropdown__menu.is-open { display: block; }
.r-dropdown__menu--end { left: auto; right: 0; }

.r-dropdown__item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    background: none;
    border: 0;
    color: var(--r-ink-2);
    font: inherit;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.r-dropdown__item:hover { background: var(--r-surface-2); color: var(--r-ink); text-decoration: none; }

.r-dropdown__divider { height: 1px; margin: 6px 4px; background: var(--r-line); border: 0; }

/* Not a heading — was a stray <h6> that injected a meaningless entry into
   every page's heading outline for a purely visual section label. */
.r-dropdown__header {
    display: block;
    padding: 6px 12px 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--r-ink-3);
}

.r-dropdown__text {
    display: block;
    padding: 0 12px 8px;
    font-size: 12.5px;
    color: var(--r-ink-3);
}

@media (prefers-reduced-motion: no-preference) {
    .r-dropdown__menu { animation: r-dropdown-in .12s ease; }
}
@keyframes r-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Offcanvas ---------------------------------------------------------------
   Fixed slide-in panel + backdrop. Positioned well above everything else on
   the page (z-index 1040/1050) since, unlike the dropdown, it's a full
   navigation surface meant to sit over all of it, including the sticky
   header. */

.r-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 17, 23, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.r-offcanvas-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s linear;
}

.r-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    background: var(--r-surface);
    box-shadow: var(--r-shadow-3);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}
.r-offcanvas--start { left: 0; transform: translateX(-100%); }
.r-offcanvas--end   { right: 0; transform: translateX(100%); }
.r-offcanvas.is-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform .25s ease, visibility 0s linear;
}

.r-offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--r-line);
    flex: 0 0 auto;
}
.r-offcanvas__title { margin: 0; font-size: 16px; font-weight: 600; }
.r-offcanvas__body { flex: 1 1 auto; overflow-y: auto; }
.r-offcanvas__body--flush { padding: 0; }

/* Bootstrap's close control shipped at 32px, below a comfortable touch
   target; this one is the same 44px minimum used everywhere else. */
.r-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--r-ink-2);
    cursor: pointer;
}
.r-close-btn:hover { background: var(--r-surface-2); color: var(--r-ink); }
.r-close-btn svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .r-offcanvas, .r-offcanvas-backdrop, .r-dropdown__menu { transition: none; animation: none; }
}

/* Locked on <html> while an offcanvas is open, so the page behind it cannot
   scroll — the same behaviour Bootstrap's offcanvas provided. */
html.r-scroll-lock { overflow: hidden; }

/* ==========================================================================
   Account dashboard
   --------------------------------------------------------------------------
   The public site had no panel, table or pill styling of its own — the only
   page that needed them (views/dashboard/index.php) was rendering unstyled
   HTML, because those classes existed only in admin.css, which a public page
   never loads. Defined here with the same names and the same visual language
   admin.css uses, so a submitter's own account reads as the same product as
   everywhere else on the site without pulling in the admin stylesheet.
   ========================================================================== */

.r-account__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.r-account__avatar {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--r-indigo-soft);
    color: var(--r-indigo);
    font-size: 19px; font-weight: 650;
}

.r-account__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.r-account__name h1 { font-size: 22px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.r-account__meta { font-size: 13.5px; color: var(--r-ink-3); margin: 3px 0 0; }

.r-account__verified {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600;
    color: var(--r-teal-text);
    background: var(--r-teal-soft);
    border-radius: var(--r-pill);
    padding: 3px 10px 3px 8px;
}
.r-account__verified svg { width: 13px; height: 13px; }

/* Verify banner --------------------------------------------------------- */

.r-verify {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
    background: var(--r-amber-soft);
    border: 1px solid #ffd9a0;
    border-radius: var(--r-radius);
}
.r-verify__icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--r-amber-text);
}
.r-verify__icon svg { width: 18px; height: 18px; }
.r-verify__body  { flex: 1 1 auto; min-width: 0; }
.r-verify__title { font-size: 14.5px; font-weight: 650; color: var(--r-ink); margin: 0 0 2px; }
.r-verify__text  { font-size: 13.5px; line-height: 1.55; color: var(--r-ink-2); margin: 0; }
.r-verify__foot  { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.r-verify__wait  { font-size: 12.5px; color: var(--r-ink-3); }

/* Stat tiles -------------------------------------------------------------- */

.r-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

.r-stat {
    padding: 16px 18px;
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius);
}
.r-stat__value { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--r-ink); }
.r-stat__label { display: block; font-size: 12.5px; color: var(--r-ink-3); margin-top: 2px; }

/* Panels ------------------------------------------------------------------ */

.r-panel {
    background: var(--r-surface);
    border: 1px solid var(--r-line);
    border-radius: var(--r-radius-lg);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.r-panel__title { font-size: 16px; font-weight: 650; margin: 0 0 4px; }
.r-panel__hint  { font-size: 13px; color: var(--r-ink-3); margin: 0 0 14px; }
.r-panel__empty { font-size: 14px; color: var(--r-ink-3); margin: 8px 0; }
.r-panel__head  {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}

/* Tables ------------------------------------------------------------------ */

.r-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.r-table th {
    text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--r-ink-3);
    padding: 10px; border-bottom: 1px solid var(--r-line);
}
.r-table td { padding: 10px; border-bottom: 1px solid var(--r-line); vertical-align: top; }
.r-table tbody tr:last-child td { border-bottom: 0; }
.r-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.r-table .muted { color: var(--r-ink-3); font-size: 13px; }

.r-table__scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.r-table__scroll .r-table { min-width: 560px; }

/* Pills -------------------------------------------------------------------- */

.r-pill {
    display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 500; text-transform: capitalize;
    background: var(--r-surface-2); color: var(--r-ink-3);
    white-space: nowrap;
}
.r-pill--pending, .r-pill--changes_requested { background: var(--r-amber-soft); color: var(--r-amber-text); }
.r-pill--approved, .r-pill--active           { background: var(--r-teal-soft);  color: var(--r-teal-text); }
.r-pill--rejected, .r-pill--suspended        { background: var(--r-coral-soft); color: var(--r-coral-text); }

@media (max-width: 640px) {
    .r-panel  { padding: 16px 16px; }
    .r-stats  { grid-template-columns: repeat(2, 1fr); }
}