/* Токены GRABIT — одна фирменная палитра для «Авто», «Дня» и «Ночи»
   (2026-10-01, п. 91: монохромные токены удалены). :root — ночь и режим по
   умолчанию (без JS тоже); :root[data-theme="light"] — день. data-theme
   ставят загрузчик в <head> и theme-toggle.js всегда; data-palette="system"
   оставлен только для совместимости со старыми селекторами (chat-v2.css).

   Принципы палитры:
   · один акцент — коралл (маркер маскота): действия, активная вкладка,
     фокус, непрочитанное. Бирюза — только сведения («онлайн», пересылка).
     Заливка действия — --primary, мягкая плашка действия — --emphasis-soft;
     --accent — только маркеры (фокус, булавка места).
   · плотные поверхности без «стекла» и свечений: четыре ступени высоты
     (bg → bg-soft → surface/card → surface-2), тонкая линия --line, тень
     только у всплывающего (меню, листы, диалоги).
   · радиусы 8/12/16/22: поля и кнопки — 12, карточки — 16, чипы — пилюля.
   · заголовки не тяжелее 700, без градиентного текста. */
:root {
    --bg: #0e0d0c;
    --bg-soft: #141312;
    --surface: #191817;
    --card: #1c1b19;
    --card-hover: #232120;
    --surface-2: #262422;
    --line: rgba(231, 224, 216, .11);
    --line-strong: rgba(231, 224, 216, .24);
    --text-rgb: 245, 243, 240;
    /* Soft fills in the text colour (both themes follow --text-rgb): a
       quiet button, chip or icon plate; its hover; a disabled control. */
    --fill-soft: rgba(var(--text-rgb), .07);
    --fill-soft-hover: rgba(var(--text-rgb), .11);
    --fill-disabled: rgba(var(--text-rgb), .08);

    --text: #f5f3f0;
    --muted: #a8a29e;
    --text-muted: #a8a29e;

    /* Terracotta, the clay icons' accent (owner, 2026-10-19; was plum, п. 205а):
       as text on ink 9.2:1, dark text on a button 8.4:1. */
    --accent: #f0a07a;
    --accent-rgb: 240, 160, 122;
    --accent-soft: rgba(240, 160, 122, .14);
    --on-accent: #2a130a;
    --emphasis: #f6b392;
    --emphasis-light: #f6b392;
    --emphasis-soft: rgba(240, 160, 122, .14);
    --on-gold: #2a130a;
    --gold-fill: var(--primary);
    --on-gold-fill: #2a130a;

    /* The main button: the same terracotta, dark text on it 8.4:1. */
    --primary: #f0a07a;
    --primary-light: #f6b392;
    --primary-rgb: 240, 160, 122;
    --on-primary: #2a130a;

    /* Бирюза — сведения, не действие. */
    --teal: #4fd1c5;
    --teal-rgb: 79, 209, 197;
    --info: #4fd1c5;

    --success: #34d399;
    --status-ok: #34d399;
    --warning: #fbbf24;
    --on-warning: #1a1200;
    --danger: #fb7185;
    --on-danger: #1a0506;
    /* A danger button's plate and its hover; text on it is --danger. */
    --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
    --danger-soft-hover: color-mix(in srgb, var(--danger) 18%, transparent);
    --status-bad: #fb7185;
    --badge-bg: #dc2626;
    --badge-text: #ffffff;

    --bubble-mine: color-mix(in srgb, var(--accent) 18%, var(--card));
    --bubble-peer: var(--surface-2);
    --chat-peer-bg: var(--surface-2);
    --chat-peer-text: var(--text);
    --chat-composer-bg: var(--surface);
    --chat-input-bg: var(--bg-soft);
    --chat-input-text: var(--text);
    --chat-input-placeholder: var(--muted);
    --chat-listing-bg: var(--surface-2);
    --chat-listing-text: var(--text);

    --radius: 16px;
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-lg: 22px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .28);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .36);
    /* The dimmed page under a dialog or a sheet. */
    --backdrop: rgba(8, 7, 6, .6);

    --theme-color: #0e0d0c;
    color-scheme: dark;

    --radius-pill: 999px;

    /* Controls: the height of a button or a one-line field, and the
       smallest tap area (WCAG 2.5.5) — a smaller icon button keeps its
       drawing and grows an invisible ::after (see «Tap targets»). */
    --control-h: 46px;
    --tap-min: 44px;

    /* Keyboard focus: one ring on everything (outline 2px, offset 2px);
       a field shows a soft halo instead. */
    --focus-ring: var(--accent);
    --field-focus-halo: 0 0 0 3px var(--accent-soft);
    /* Одинаковы в обеих темах: белое поверх тёмного (кнопки видео,
       инициалы аватара) и фон видео. */
    --on-dark: #ffffff;
    --media-bg: #000000;

    /* Отступы — шире, по восьмёрке */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Переходы: только длительность+ease, свойство пишется на месте. */
    --transition-fast: .15s ease;
    --transition-base: .25s ease;
    --transition-slow: .55s ease;

    /* Типографика */
    /* Подписи и описания в карточках: 12/13px — на телефоне 11/12 были
       мелковаты (2026-10-01). */
    --text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;

    /* 3D icons (icons3d.rs): soft matte clay (2026-10-18, was brushed
       metal) — warm graphite body, terracotta accent, warm porcelain. The
       volume comes from the gradients and the relief filter (diffuse light
       from the top left, a faint sheen), not from a CSS brightness() boost.
       --i3-rim is the top-left edge light, --i3-inner the bottom-right inner
       shade, --i3-shadow/--i3-shadow-col the soft drop shadow. */
    --i3-m1: #ddd5cd; --i3-m2: #b3aaa2; --i3-m3: #857c74;
    --i3-d1: #9a928b; --i3-d2: #746c66; --i3-d3: #4f4843;
    --i3-a1: #ffb894; --i3-a2: #f08a62; --i3-a3: #c4603b;
    /* Tile-tone accents (icons3d::tinted). */
    --i3-amber1: #ffdc8f; --i3-amber2: #f7b44a; --i3-amber3: #c98420;
    --i3-blue1: #a3cdfa; --i3-blue2: #5f9de6; --i3-blue3: #3a6eb5;
    --i3-teal1: #92e6d6; --i3-teal2: #3fc2ac; --i3-teal3: #248a7a;
    --i3-green1: #b6e697; --i3-green2: #78c456; --i3-green3: #4a9333;
    --i3-violet1: #d2b8fa; --i3-violet2: #a581ea; --i3-violet3: #7454bd;
    --i3-p1: #fffaf4; --i3-p2: #efe4d8; --i3-p3: #c9b8a6;
    --i3-g1: #4a5870; --i3-g2: #262e3c;
    --i3-shine: .15; --i3-floor: .5; --i3-side: #000000;
    --i3-rim: .35; --i3-shadow: .5; --i3-inner: .4; --i3-shadow-col: #000000;
    /* Чат: медиа, затемнение, ошибка голосового, красная кнопка
       (бывший chat-mature.css, п. 93) — одинаковы в обеих темах. */
    --chat-media-bg: #000000;
    --chat-backdrop: #05070a;
    --chat-voice-error: #ff8d84;
    --chat-danger-from: #e65763;
    --chat-danger-to: #b52f3b;
    --i3-plate: linear-gradient(160deg, #1d2127, #111317);
    /* Лёгкий объём плоских иконок (п. 108): плашка светлее сверху,
       блик по верхней кромке, тень снизу, штрих иконки с тиснением. */
    --i3-tile-bg: linear-gradient(180deg, rgba(var(--text-rgb), .12), rgba(var(--text-rgb), .04));
    --i3-tile-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .3);
    --i3-emboss: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
    /* Rubric tiles (icons3d::tile): a tone per rubric — two gradient
       stops top to bottom, deep at night. The icon's metal is bright by
       itself (tokens above), so --tile-icon-filter only nudges contrast;
       icon body to tile background stays ≥ 3:1 (median, Playwright pixel
       probe 2026-10-08, both themes). */
    --tone-amber-1: #4b3517; --tone-amber-2: #2c1f0c;
    --tone-blue-1: #142a45; --tone-blue-2: #0a1628;
    --tone-teal-1: #143f41; --tone-teal-2: #0a2728;
    --tone-green-1: #203e24; --tone-green-2: #112513;
    --tone-coral-1: #4b2326; --tone-coral-2: #2d1315;
    --tone-violet-1: #2a1f42; --tone-violet-2: #150f22;
    --tone-slate-1: #2c343e; --tone-slate-2: #191e25;
    --tile-gloss: rgba(255, 255, 255, .16);
    --tile-rim: rgba(255, 255, 255, .18);
    --tile-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 10px -3px rgba(0, 0, 0, .55);
    --tile-icon-filter: contrast(1.05);
}

:root[data-theme="light"] {
    --bg: #f5f4f2;
    --bg-soft: #ebe9e6;
    --surface: #ffffff;
    --card: #ffffff;
    --card-hover: #faf9f7;
    --surface-2: #ffffff;
    --line: rgba(28, 25, 23, .09);
    --line-strong: rgba(28, 25, 23, .2);
    --text-rgb: 28, 25, 23;

    --text: #1c1917;
    --muted: #5c5650;
    --text-muted: #5c5650;

    /* Terracotta by day: white on it 6.5:1, as text on --bg 5.8:1. */
    --accent: #9c4226;
    --accent-rgb: 156, 66, 38;
    --accent-soft: rgba(156, 66, 38, .10);
    --on-accent: #ffffff;
    --emphasis: #85371f;
    --emphasis-light: #9c4226;
    --emphasis-soft: rgba(156, 66, 38, .10);
    --on-gold: #ffffff;
    --gold-fill: var(--primary);
    --on-gold-fill: #ffffff;

    --primary: var(--accent);
    --primary-light: #b04d2c;
    --primary-rgb: 156, 66, 38;
    --on-primary: #ffffff;

    --teal: #0f766e;
    --teal-rgb: 15, 118, 110;
    --info: #0f766e;

    /* Day status inks: ≥ 4.5:1 on --bg, --bg-soft and on their own 12 %
       plate (--danger-soft) — the earlier #c73a47/#976d00/#15803d fell to
       3.9–4.3:1 there (2026-10-18). */
    --success: #137337;
    --status-ok: #137337;
    --warning: #7f5c00;
    --on-warning: #ffffff;
    --danger: #b02a37;
    --on-danger: #ffffff;
    --status-bad: #b91c1c;
    --badge-bg: #dc2626;
    --badge-text: #ffffff;

    --bubble-mine: color-mix(in srgb, var(--accent) 12%, #ffffff);
    --bubble-peer: #ffffff;
    --chat-peer-bg: #ffffff;
    --chat-peer-text: var(--text);
    --chat-composer-bg: var(--surface);
    --chat-input-bg: var(--bg);
    --chat-input-text: var(--text);
    --chat-input-placeholder: var(--muted);
    --chat-listing-bg: #ffffff;
    --chat-listing-text: var(--text);

    --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06);
    --shadow-md: 0 4px 14px rgba(28, 25, 23, .08);
    --shadow-lg: 0 12px 32px rgba(28, 25, 23, .12);
    --backdrop: rgba(28, 25, 23, .4);

    --theme-color: #f5f4f2;
    color-scheme: light;

    /* 3D icons by day: warm graphite clay with terracotta details — dark
       enough to read on pastel tiles and white plates without a darkening filter
       (og_image.rs copies these values; a test keeps them in step). */
    --i3-m1: #a39d97; --i3-m2: #7d7671; --i3-m3: #57514c;
    --i3-d1: #5a5450; --i3-d2: #403b38; --i3-d3: #2a2624;
    --i3-a1: #f6a980; --i3-a2: #e47b52; --i3-a3: #b9532f;
    /* Tile-tone accents (icons3d::tinted). */
    --i3-amber1: #ffd27a; --i3-amber2: #f2a93b; --i3-amber3: #c27a17;
    --i3-blue1: #8fc1f5; --i3-blue2: #4f8fdc; --i3-blue3: #2f62a8;
    --i3-teal1: #7fdccb; --i3-teal2: #2fb39e; --i3-teal3: #1d7f70;
    --i3-green1: #a6dc84; --i3-green2: #67b545; --i3-green3: #3f8429;
    --i3-violet1: #c6a8f5; --i3-violet2: #9670e0; --i3-violet3: #6646b0;
    --i3-p1: #fffaf4; --i3-p2: #efe4d8; --i3-p3: #c9b8a6;
    --i3-g1: #3d4a5c; --i3-g2: #1f2632;
    --i3-shine: .18; --i3-floor: .22; --i3-side: #2a1c14;
    --i3-rim: .55; --i3-shadow: .28; --i3-inner: .32; --i3-shadow-col: #4a2c1c;
    --i3-plate: linear-gradient(160deg, #f6f7f9, #e6e9ed);
    --i3-tile-bg: linear-gradient(180deg, #ffffff, #e9ecf0);
    --i3-tile-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(28, 25, 23, .08), 0 1px 2px rgba(28, 25, 23, .12);
    --i3-emboss: drop-shadow(0 1px 0 rgba(255, 255, 255, .95));
    /* Rubric tiles by day: pastel; the steel is medium-dark by itself. */
    --tone-amber-1: #fdf0d9; --tone-amber-2: #f3dcb3;
    --tone-blue-1: #e4eefb; --tone-blue-2: #cadcf2;
    --tone-teal-1: #ddf3f0; --tone-teal-2: #bfe4df;
    --tone-green-1: #e5f3e2; --tone-green-2: #cae5c4;
    --tone-coral-1: #feeeeb; --tone-coral-2: #f8d9d4;
    --tone-violet-1: #ede7fb; --tone-violet-2: #d8cef3;
    --tone-slate-1: #eff2f5; --tone-slate-2: #d9dee4;
    --tile-gloss: rgba(255, 255, 255, .75);
    --tile-rim: rgba(255, 255, 255, .95);
    --tile-shadow: 0 1px 2px rgba(28, 25, 23, .16), 0 4px 10px -3px rgba(28, 25, 23, .26);
    --tile-icon-filter: contrast(1.05);
}

/* Inter, served from our own host (owner, 2026-10-19: "the most modern
   app" — a system font left every phone looking different). One variable
   file per script, loaded only when the page has its letters (unicode-range);
   ?v= is the font release, so the files are cached for a year. Arabic,
   Hebrew, Indic and other scripts fall back to the system font. Licence:
   static/vendor/inter/Inter-LICENSE.txt (OFL). */
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/vendor/inter/inter-latin-wght-normal.woff2?v=5.3.0") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/vendor/inter/inter-latin-ext-wght-normal.woff2?v=5.3.0") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/vendor/inter/inter-cyrillic-wght-normal.woff2?v=5.3.0") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/vendor/inter/inter-cyrillic-ext-wght-normal.woff2?v=5.3.0") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/vendor/inter/inter-greek-wght-normal.woff2?v=5.3.0") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/vendor/inter/inter-vietnamese-wght-normal.woff2?v=5.3.0") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* The system font sized like Inter while Inter loads, so the text does
   not jump when it arrives (the metrics Next.js uses for Inter on Arial). */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Roboto"), local("Helvetica");
    ascent-override: 90.49%;
    descent-override: 22.56%;
    line-gap-override: 0%;
    size-adjust: 107.06%;
}

* {
    box-sizing: border-box;
}

/* Фирменный акцент на наведении ссылки — только курсор задаёт, где он
   виден, поэтому одновременно не более одного. Точечные ссылки в
   футерах/навигации стилизуются отдельно с той же специфичностью и
   не затрагиваются. */
a:hover {
    color: var(--accent);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

html {
    width: 100%;
    overflow-x: hidden;
    background: var(--bg);
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-x: none;
}

body {
    width: 100%;
    min-width: 0;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    touch-action: pan-x pan-y pinch-zoom;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px); /* stylelint-disable-line csstools/use-logical -- the device's safe areas are physical sides, not reading direction */
    padding-right: env(safe-area-inset-right, 0px); /* stylelint-disable-line csstools/use-logical -- same */

    font-family:
        Inter,
        "Inter Fallback",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    color: var(--text);
    background: var(--bg);
}

/* Type rhythm: headings a touch tighter and balanced over their lines,
   paragraphs without a lone last word; numbers in columns line up. */
h1, h2, h3 {
    letter-spacing: -.02em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.tabular, time, .rm-price, .rm-resource-price, .rm-card-price, .chat-listing-price {
    font-variant-numeric: tabular-nums;
}

.page {
    width: min(100% - 32px, 900px);
    margin: 0 auto;
    padding: 22px 0 calc(140px + env(safe-area-inset-bottom, 0px));
}

.icon {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    flex: 0 0 auto;
}

.small-icon {
    width: 18px;
    height: 18px;
}

.chat-official-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.chat-official-group .icon {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--accent);
}

/* -----------------------------------------------------------
   HEADER
----------------------------------------------------------- */

.topbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: var(--space-6);
    animation: fadeIn .4s ease both;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    text-decoration: none;
    color: var(--text);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.brand-mark {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: var(--radius-sm);

    background: var(--surface);
    color: var(--accent);
    box-shadow: none;
}

.brand-mark .brand-logo-icon {
    width: 24px;
    height: 24px;
    color: var(--emphasis);
}

.brand-logo-img {
    display: block;
    height: 40px;
    width: 66px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
}

.brand-copy {
    min-width: 0;
}

.brand-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--primary);
    letter-spacing: .06em;
}

/* -----------------------------------------------------------
   HERO
----------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;

    padding: 26px 22px;

    border: 1px solid var(--line);
    border-radius: var(--radius-lg);

    background: transparent;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}

.hero h1 {
    margin: 0 0 10px 0;

    font-size: clamp(26px, 6vw, 38px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.02em;
}

.hero p {
    max-width: 560px;

    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--muted);
}

/* -----------------------------------------------------------
   SEARCH
----------------------------------------------------------- */

.search {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);

    margin-top: 24px;
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base);
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    background: var(--surface);
    box-shadow: none;
}

.search input {
    width: 100%;

    border: 0;
    outline: 0;

    color: var(--text);
    background: transparent;

    font: inherit;
    min-height: 50px;
    font-size: var(--text-base);
}

.search input::placeholder {
    color: var(--muted);
}

.rm-catalog-search {
    margin: 0 0 18px;
}

.rm-catalog-search button {
    flex: 0 0 auto;
    border: 0;
    padding: 6px 8px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.rm-catalog-search-status {
    min-height: 20px;
    margin: -8px 4px 14px;
    color: var(--muted);
    font-size: var(--text-xs);
}

/* Empty until the visitor types, and then it takes no room: in the city
   directory it sits between the search box and "What do you need" and
   left a ~60px gap there (plan item 234). */
.rm-catalog-search-status:empty {
    min-height: 0;
    margin-bottom: 0;
}

.rm-global-search-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text);
    background: var(--bg);
}

.rm-global-search-dialog::backdrop {
    backdrop-filter: blur(8px);
}

.rm-global-search-sheet {
    width: min(100% - 28px, 720px);
    margin: max(18px, env(safe-area-inset-top, 0px)) auto;
    padding: 18px;
    border: 1px solid var(--line);
}

.rm-global-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.rm-global-search-head h2 {
    margin: 0;
    font-size: var(--text-xl);
}

.rm-global-search-close {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.rm-global-search-form {
    margin-top: 18px;
}

.rm-global-search-form > span {
    display: inline-flex;
}

.rm-global-search-form .ui-button {
    flex: 0 0 auto;
    min-height: 42px;
}

/* Plan item 410: search by voice. Red while it listens. */
.rm-voice-search {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text);
    background: transparent;
    cursor: pointer;
}

.rm-voice-search.is-listening {
    border-color: var(--danger);
    color: var(--on-danger);
    background: var(--danger);
}

.rm-voice-search:disabled {
    cursor: progress;
    opacity: 0.6;
}

.rm-voice-search-status {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.rm-global-search-sheet > .rm-kind-chips,
.rm-global-search-sheet > .rm-intent {
    margin-top: 12px;
}

/* Under the search field: recent searches, then rubrics and places while
   typing (global-search.js). One row per thing, its kind told by the icon
   and the group title. */
.rm-search-suggest {
    margin-block-start: 12px;
}

.rm-search-suggest ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-search-suggest-group {
    position: relative;
    margin-block-start: 12px;
}

.rm-search-suggest-group h3 {
    margin: 0 0 4px;
    padding-inline: 10px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rm-search-suggest-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rm-search-suggest-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
}

.rm-search-suggest-link:hover,
.rm-search-suggest-link:focus-visible {
    background: rgba(var(--text-rgb), .07);
}

.rm-search-suggest-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--muted);
    background: rgba(var(--text-rgb), .06);
}

.rm-search-suggest-row--query .rm-search-suggest-icon,
.rm-search-suggest-row--rubric .rm-search-suggest-icon {
    color: var(--accent);
}

.rm-search-suggest-row--query .rm-search-suggest-text {
    font-weight: 600;
}

.rm-search-suggest-icon .icon {
    width: 18px;
    height: 18px;
}

.rm-search-suggest-text {
    display: grid;
    min-width: 0;
}

.rm-search-suggest-text bdi,
.rm-search-suggest-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-search-suggest-text small {
    color: var(--muted);
    font-size: var(--text-xs);
}

.rm-search-suggest-remove {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.rm-search-suggest-remove:hover,
.rm-search-suggest-remove:focus-visible {
    color: var(--text);
    background: rgba(var(--text-rgb), .07);
}

.rm-search-suggest-remove .icon {
    width: 16px;
    height: 16px;
}

.rm-search-suggest-clear {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: 0;
    min-height: 32px;
    padding: 4px 10px;
    border: 0;
    color: var(--accent);
    background: transparent;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

/* The server's part is on its way: the rows already shown stay, a thin
   line under them says more is coming. */
.rm-search-suggest.is-loading::after {
    content: "";
    display: block;
    height: 2px;
    margin-block-start: 8px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 200% 100%;
    animation: rm-search-suggest-wait 1s linear infinite;
}

/* «Favorites»: the feed card with a filled heart where its arrow was —
   one tap lets the listing go (favorites.js), «Undo» in the bar below
   brings it back. */
.rm-fav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-fav-item {
    position: relative;
}

.rm-fav-item .card-arrow {
    visibility: hidden;
}

.rm-fav-remove {
    position: absolute;
    inset-block-end: 12px;
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: var(--danger);
    background: transparent;
    cursor: pointer;
}

.rm-fav-remove .icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.rm-fav-remove:hover,
.rm-fav-remove:focus-visible {
    background: rgba(var(--text-rgb), .07);
}

.rm-fav-undo {
    position: fixed;
    inset-inline: 16px;
    inset-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 520px;
    margin-inline: auto;
    padding-block: 8px;
    padding-inline: 16px 8px;
    border-radius: var(--radius);
    color: var(--bg);
    background: var(--text);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
}

.rm-fav-undo[hidden] {
    display: none;
}

.rm-fav-undo-button {
    min-height: 40px;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.rm-fav-undo-button:hover,
.rm-fav-undo-button:focus-visible {
    background: rgba(127, 127, 127, .22);
}

@keyframes rm-search-suggest-wait {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rm-search-suggest.is-loading::after {
        animation: none;
        opacity: .5;
    }
}

/* -----------------------------------------------------------
   SECTION
----------------------------------------------------------- */

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 28px 0 12px;
    padding-bottom: 0;
    border-bottom: 0;
}

.section-title {
    margin: 0;
    font-size: var(--text-lg);
    letter-spacing: -.02em;
    padding-inline-start: 0;
    border-inline-start: 0;
    font-weight: 600;
    box-shadow: none;
}

.section-caption {
    margin: 5px 0 0;

    color: var(--muted);
    font-size: var(--text-xs);
}

/* -----------------------------------------------------------
   CARDS
----------------------------------------------------------- */

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

.card {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 92px;
    padding: 18px;

    color: var(--text);
    text-decoration: none;

    border: 1px solid var(--line);

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base);

    -webkit-tap-highlight-color: transparent;
}

.card:hover {
    transform: none;
    border-color: var(--line-strong);
    background: var(--card-hover);
    box-shadow: none;
}

.card:active {
    transform: scale(.99);
}

.card-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    /* Плоская плашка цветом текста во всех темах: градиент, тень и
       drop-shadow остались только в монохроме и спорили с системной. */
    color: var(--text);

    border: 0;
    border-radius: var(--radius-sm);

    background: var(--fill-soft);

    transition: transform var(--transition-base), color var(--transition-base);
}

/* Плитка рубрики (icons3d::tile) — одна разметка на всех экранах:
   3D-иконка на мягкой плитке тона рубрики. Объём без 3D: градиент сверху
   вниз, блик по верхней части, светлая кромка и тонкая тень. Плитка
   симметрична — в RTL зеркалить нечего. Размер задаёт место
   (--tile-size), в карточке — вся плашка. */
.rubric-tile {
    --tone-1: var(--tone-slate-1);
    --tone-2: var(--tone-slate-2);
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: var(--tile-size, 56px);
    block-size: var(--tile-size, 56px);
    overflow: hidden;
    border-radius: 28%;
    background: linear-gradient(180deg, var(--tone-1), var(--tone-2));
    box-shadow: inset 0 1px 0 var(--tile-rim), inset 0 -2px 3px rgba(0, 0, 0, .16), var(--tile-shadow);
}

.rubric-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(130% 62% at 50% 0, var(--tile-gloss), transparent 72%);
}

.rubric-tile > .i3d {
    inline-size: 92%;
    block-size: 92%;
    filter: var(--tile-icon-filter);
}

.rubric-tile[data-tone="amber"] { --tone-1: var(--tone-amber-1); --tone-2: var(--tone-amber-2); }
.rubric-tile[data-tone="blue"] { --tone-1: var(--tone-blue-1); --tone-2: var(--tone-blue-2); }
.rubric-tile[data-tone="teal"] { --tone-1: var(--tone-teal-1); --tone-2: var(--tone-teal-2); }
.rubric-tile[data-tone="green"] { --tone-1: var(--tone-green-1); --tone-2: var(--tone-green-2); }
.rubric-tile[data-tone="coral"] { --tone-1: var(--tone-coral-1); --tone-2: var(--tone-coral-2); }
.rubric-tile[data-tone="violet"] { --tone-1: var(--tone-violet-1); --tone-2: var(--tone-violet-2); }
.rubric-tile[data-tone="slate"] { --tone-1: var(--tone-slate-1); --tone-2: var(--tone-slate-2); }

/* Placeholder avatars (chat list, share sheet) wear the same tones (item 374). */
.chat-dialog-initials[data-tone],
.share-avatar[data-tone] { background: linear-gradient(180deg, var(--tone-1), var(--tone-2)); }
.chat-dialog-initials[data-tone="amber"], .share-avatar[data-tone="amber"] { --tone-1: var(--tone-amber-1); --tone-2: var(--tone-amber-2); }
.chat-dialog-initials[data-tone="blue"], .share-avatar[data-tone="blue"] { --tone-1: var(--tone-blue-1); --tone-2: var(--tone-blue-2); }
.chat-dialog-initials[data-tone="teal"], .share-avatar[data-tone="teal"] { --tone-1: var(--tone-teal-1); --tone-2: var(--tone-teal-2); }
.chat-dialog-initials[data-tone="green"], .share-avatar[data-tone="green"] { --tone-1: var(--tone-green-1); --tone-2: var(--tone-green-2); }
.chat-dialog-initials[data-tone="coral"], .share-avatar[data-tone="coral"] { --tone-1: var(--tone-coral-1); --tone-2: var(--tone-coral-2); }
.chat-dialog-initials[data-tone="violet"], .share-avatar[data-tone="violet"] { --tone-1: var(--tone-violet-1); --tone-2: var(--tone-violet-2); }
.chat-dialog-initials[data-tone="slate"], .share-avatar[data-tone="slate"] { --tone-1: var(--tone-slate-1); --tone-2: var(--tone-slate-2); }

/* Плашка карточки с плиткой рубрики: своей подложки нет, плитка — во
   всю плашку (60px, в сетках телефона — 44px). */
.card-icon--3d {
    width: 60px;
    height: 60px;
    background: none;
    box-shadow: none;
}

.card-icon--3d > .rubric-tile {
    --tile-size: 100%;
}

/* Шапка объявления: 3D-иконка рубрики слева от заголовка и строки
   типа/рейтинга; ссылка «назад» — на всю ширину сверху. */
.hero--rubric {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: center;
}

.hero--rubric > :not(.rm-hero-rubric-icon, h1, p) {
    grid-column: 1 / -1;
}

.hero--rubric > .rm-hero-rubric-icon {
    grid-row: span 2;
    align-self: start;
}

.hero--rubric > h1,
.hero--rubric > p {
    grid-column: 2;
    min-width: 0;
}

/* The rubric step of the listing form (plan item 244д): a search field
   and two profession tiles per row — icon above the name, no chevron. */
.rm-rubric-search {
    margin-block-end: var(--space-3);
}

.rm-rubric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.rm-rubric-grid > .card {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    margin: 0;
    padding: 16px 10px 14px;
    text-align: center;
}

.rm-rubric-grid > .card[hidden] {
    display: none;
}

.rm-rubric-grid .card-content {
    width: 100%;
    min-width: 0;
}

.rm-rubric-grid .card-title {
    font-size: var(--text-sm);
}

.rm-rubric-grid .card-arrow {
    display: none;
}

.rm-rubric-none {
    margin: var(--space-2) 0 0;
    text-align: center;
}

/* Рубрики под поиском (п. 104): плитка — 3D-иконка над названием,
   один ряд с прокруткой вбок. */
.rm-rubric-tiles {
    display: flex;
    gap: var(--space-2);
    margin: 12px 0;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.rm-rubric-tiles::-webkit-scrollbar {
    display: none;
}

.rm-rubric-tile {
    flex: 0 0 84px;
    display: grid;
    /* Icon on one line for every tile, the label below it in a box of
       two lines: a long name no longer lifts its icon (owner, 2026-10-19). */
    grid-template-rows: 48px calc(2em * 1.2);
    justify-items: center;
    align-content: start;
    gap: 4px;
    min-height: 84px;
    padding: 8px 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.rm-rubric-tile .rubric-tile {
    --tile-size: 48px;
}

.rm-rubric-tile span {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    /* Three lines: a hyphenated pair («Готов инвестиро-вать») needs them. */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    align-self: start;
    letter-spacing: -.01em;
    /* Break long words by syllable («Photo-grapher»), not at any letter. */
    hyphens: auto;
    overflow-wrap: break-word;
}

.rm-rubric-tile.is-active {
    border-color: var(--accent);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* Общие градиенты 3D-иконок: в документе, но без места на экране
   (display: none ломает ссылки на градиенты в Safari). */
.i3d-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.card-content {
    min-width: 0;
    flex: 1;
}

.card-title {
    color: var(--text);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.card-meta {
    margin-top: 5px;

    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* Подсказки Jev под описанием объявления (static/listing-assist.js). */
.listing-assist {
    display: grid;
    gap: 4px;
}

.listing-assist-line {
    margin: 0;

    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.card-arrow {
    transition: transform var(--transition-base), color var(--transition-base);
}

/* "Back" points to where the line starts: right in Arabic and Hebrew. */
[dir="rtl"] .icon-flip-rtl {
    transform: scaleX(-1);
}
.rm-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 20px;
}

.card--result {
    text-decoration: none;
    color: inherit;
    margin-bottom: 12px;
    align-items: flex-start;
}

.card-title--lg {
    font-size: var(--text-base);
    min-width: 0;
}

.card-title--people {
    font-size: var(--text-base);
    line-height: 1.3;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rm-card-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: 10px;
}

.rm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.rm-card-rating {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
}

/* Listing card: title / description / place — three rows, clamped so a
   long description can't turn one card into a wall of text. */
.rm-card-title {
    min-width: 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rm-card-desc {
    margin-top: 6px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price or rate (plan item 182): one short line under the title. */
.rm-card-price {
    margin-top: 4px;
    /* Second after the title: what it costs is what people compare. */
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

.rm-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 10px;
    font-size: var(--text-xs);
    color: var(--muted);
}

.rm-card-foot:empty {
    display: none;
}

.rm-card-place {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    font-weight: 600;
}

.rm-card-place .icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.rm-card-rating-votes {
    color: var(--muted);
}

/* «На связи» on a listing card (plan item 364): a green dot on the icon. */
.card--listing .card-icon {
    position: relative;
}

.rm-card-available {
    position: absolute;
    inset-block-end: -2px;
    inset-inline-end: -2px;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--success);
}

/* «Говорит: Deutsch, English» (plan item 162): one muted line on a card,
   cut with an ellipsis instead of widening it; the full list is the title. */
.rm-card-langs {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--muted);
}
/* Language codes (п. 185): RU · FR · EN as small chips, no flags. The
   chip keeps its width, so nothing moves while the page settles; the row
   follows the page direction (RTL — right to left). */
.rm-lang-codes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}

.rm-lang-code {
    display: inline-block;
    min-width: 2.2em;
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.4;
    text-align: center;
    unicode-bidi: isolate;
    direction: ltr;
}

.rm-card-row .rm-card-langs {
    align-self: center;
}

/* «Говорит на …» filter: one pill — the label and a language list that
   applies itself (place-chip.js); filled like an active chip while a
   language is picked. The <noscript> button only without JS. */
.rm-speaks-form {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
}
.rm-speaks-pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding-inline: 13px 6px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--text-rgb), .24);
    color: var(--text);
    font-size: var(--text-xs);
    white-space: nowrap;
    cursor: pointer;
}
.rm-speaks-pick.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}
.rm-speaks-pick:focus-within {
    outline: 2px solid var(--emphasis-light);
    outline-offset: 2px;
}
.rm-speaks-select {
    min-height: 34px;
    max-width: 10em;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.rm-speaks-select:focus-visible {
    outline: none;
}
.rm-speaks-select option {
    color: var(--text);
    background: var(--surface);
}
.rm-speaks-apply {
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.rm-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* Dark-theme colours by default; the light theme gets darker text so the
   11px chip still clears WCAG AA on a white card. */
.rm-type-chip--seeker {
    background: rgba(59, 130, 246, .18);
    color: #7cb3ff;
}

.rm-type-chip--offer {
    background: rgba(34, 197, 94, .16);
    color: #4ade80;
}

/* «Услуга» (plan item 179). */
.rm-type-chip--service {
    background: rgba(168, 85, 247, .18);
    color: #c4a1ff;
}

/* «Бизнес-предложение» and «Компания» (owner request 2026-10-08). */
.rm-type-chip--deal {
    background: rgba(245, 158, 11, .18);
    color: #fbbf24;
}

.rm-type-chip--general {
    background: rgba(20, 184, 166, .18);
    color: #5eead4;
}

/* «Ищу специалиста» — a client's request (plan item 242). */
.rm-type-chip--request {
    background: rgba(244, 63, 94, .16);
    color: #fda4af;
}

:root[data-theme="light"] .rm-type-chip--seeker {
    color: #1d4ed8;
}

:root[data-theme="light"] .rm-type-chip--offer {
    color: #166534;
}

:root[data-theme="light"] .rm-type-chip--service {
    color: #6b21a8;
}

:root[data-theme="light"] .rm-type-chip--deal {
    color: #92400e;
}

:root[data-theme="light"] .rm-type-chip--general {
    color: #115e59;
}

:root[data-theme="light"] .rm-type-chip--request {
    color: #9f1239;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .rm-type-chip--seeker {
        color: #1d4ed8;
    }

    :root:not([data-theme="dark"]) .rm-type-chip--offer {
        color: #166534;
    }

    :root:not([data-theme="dark"]) .rm-type-chip--service {
        color: #6b21a8;
    }

    :root:not([data-theme="dark"]) .rm-type-chip--deal {
        color: #92400e;
    }

    :root:not([data-theme="dark"]) .rm-type-chip--general {
        color: #115e59;
    }

    :root:not([data-theme="dark"]) .rm-type-chip--request {
        color: #9f1239;
    }
}

/* «Компания» (п. 180): рядом с чипом вида, тот же размер, нейтральный. */
.rm-company-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* «Принимает сегодня» (п. 163): тот же размер, что у чипа вида, свой цвет. */
/* «Удалённо» (plan item 178): a quiet pill like «Компания», blue-tinted. */
.rm-remote-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(59, 130, 246, .16);
    color: #60a5fa;
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

:root[data-theme="light"] .rm-remote-badge {
    color: #1d4ed8;
}

.rm-available-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background: rgba(16, 185, 129, .18);
    color: #34d399;
}

.rm-available-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

:root[data-theme="light"] .rm-available-badge {
    color: #047857;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .rm-available-badge {
        color: #047857;
    }
}

.rm-public-available {
    margin-top: 6px;
}

/* The résumé (plan item 247(5)) is one card (owner, 2026-10-08): its
   blocks follow each other with a hairline, the add forms are folded
   behind one button, the preferences show as a line until «Edit». */
/* The «Résumé» screen (owner, 2026-10-09): a block is one row — tile,
   title, what is in it, chevron — that unfolds its entries and add form.
   The letter row looks the same but is a link to its own page. */
.rm-resume-block {
    display: block;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

.rm-resume-block:first-child {
    border-block-start: 0;
}

.rm-resume-block-head {
    --tile-size: 36px;
    min-height: 56px;
    padding-block: var(--space-2);
    list-style: none;
    cursor: pointer;
}

.rm-resume-block-head::-webkit-details-marker,
.rm-resume-block-head::marker {
    display: none;
    content: "";
}

.rm-resume-block .rm-card-head-title {
    font-size: var(--text-sm);
}

.rm-resume-block-state {
    display: block;
    overflow: hidden;
    margin-block-start: 2px;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rm-resume-block-head .rm-profile-row-arrow {
    margin-inline-start: auto;
    transition: transform .15s ease;
}

.rm-resume-block[open] > .rm-resume-block-head .rm-profile-row-arrow {
    transform: rotate(90deg);
}

.rm-resume-block-body {
    padding-block: 0 var(--space-3);
}

.rm-resume-block-body > .rm-resume-list:last-child {
    margin-block-end: 0;
}

.rm-resume-more > summary {
    list-style: none;
    cursor: pointer;
}

/* «Fill in» first in its block, «Add education» over «Add certificate». */
.rm-resume-block-body > .rm-resume-more:first-child,
.rm-resume-more + .rm-resume-more {
    margin-block-start: var(--space-2);
}

.rm-resume-more > summary::-webkit-details-marker,
.rm-resume-more > summary::marker {
    display: none;
    content: "";
}

.rm-resume-more-open {
    display: inline-flex;
    gap: 6px;
}

.rm-resume-more-open .icon {
    width: 16px;
    height: 16px;
}

/* «Edit»: a pencil while closed; the plus turns into the «×» below. */
.rm-resume-more-edit {
    display: inline-flex;
}

.rm-resume-more--edit:not([open]) > .rm-resume-more-open > .icon {
    display: none;
}

/* The photo picker reads like the add buttons above it. */
.rm-work-photo-add .rm-doc-pick {
    gap: 6px;
}

.rm-work-photo-add .rm-doc-pick .icon {
    width: 16px;
    height: 16px;
}

/* Open: the button becomes a small «×» that folds the form back. */
.rm-resume-more[open] > .rm-resume-more-open span {
    display: none;
}

.rm-resume-more[open] > .rm-resume-more-open {
    min-width: 44px;
    padding-inline: 10px;
}

.rm-resume-more[open] > .rm-resume-more-open .icon {
    transform: rotate(45deg);
}

.rm-resume-more-body {
    margin-block-start: var(--space-2);
}

.rm-resume-list {
    display: grid;
    gap: 2px;
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.rm-resume-list:empty {
    display: none;
}

.rm-resume-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: 8px;
    border-block-end: 1px solid var(--line);
}

.rm-resume-row:last-child {
    border-block-end: 0;
}

.rm-resume-text {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rm-resume-text small {
    color: var(--muted);
    font-size: var(--text-xs);
}

.rm-resume-delete {
    flex: 0 0 auto;
}

.rm-resume-delete .rm-doc-action {
    min-width: 44px;
    padding-inline: 10px;
}

.rm-resume-add,
.rm-resume-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
}

.rm-resume-add .ui-field,
.rm-resume-form .ui-field,
.rm-resume-form .rm-price-row,
.rm-resume-form .rm-listing-price,
.rm-resume-form .rm-listing-languages,
.rm-resume-form .rm-resume-nights,
.rm-resume-form .ui-form-note,
.rm-resume-form .rm-notify-check {
    grid-column: 1 / -1;
}

.rm-resume-add .rm-resume-year {
    grid-column: auto;
}

.rm-resume-submit {
    grid-column: 1 / -1;
    justify-self: start;
}

/* Photos of work (plan item 247(5)): a square grid, three per row. */
.rm-work-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.rm-work-photos:empty {
    display: none;
}

.rm-work-photo {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.rm-work-photo img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* «Photos of work» and how many of the eight are taken. */
.rm-work-photos-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.rm-work-photos-count {
    color: var(--muted);
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
}

/* «Add photo» as the grid's last tile; alone, a wide first step. */
.rm-work-new {
    position: relative;
    aspect-ratio: 1;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-sm);
}

.rm-work-new:only-child {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-block-size: 9rem;
}

.rm-work-new .rm-work-photo-add {
    display: grid;
    block-size: 100%;
}

.rm-work-new-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-2);
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.rm-work-new-pick > .icon {
    width: 24px;
    height: 24px;
}

.rm-work-new-pick input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.rm-work-new:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rm-work-new .is-sending .rm-work-new-pick {
    opacity: .6;
    pointer-events: none;
}

.rm-work-photo .rm-resume-delete {
    position: absolute;
    inset-inline-end: 4px;
    inset-block-start: 4px;
}

/* «Before / after» (plan item 406): the pair takes a whole row; the
   «before» shows up to the line, the «after» past it. Left is «before» in
   every language — a slider of time, not of text. photo-viewer.js moves
   --pair-split with a finger, the range takes the keyboard. */
.rm-work-photo.rm-work-pair {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
}

.rm-before-after {
    --pair-split: 50%;
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    direction: ltr;
    touch-action: pan-y;
    cursor: ew-resize;
    user-select: none;
}

.rm-before-after img {
    position: absolute;
    inset: 0;
    -webkit-user-drag: none;
}

.rm-before-after .rm-pair-before {
    clip-path: inset(0 calc(100% - var(--pair-split)) 0 0);
}

.rm-pair-line {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--pair-split);
    inline-size: 3px;
    margin-inline-start: -1.5px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.rm-pair-line::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    inline-size: 36px;
    block-size: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    box-shadow: 0 0 6px rgba(0, 0, 0, .45);
}

.rm-pair-tag {
    position: absolute;
    inset-block-end: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    pointer-events: none;
}

.rm-pair-tag--before {
    inset-inline-start: 8px;
}

.rm-pair-tag--after {
    inset-inline-end: 8px;
}

/* The range only for the keyboard and screen readers: on top of nothing. */
.rm-pair-range {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    inline-size: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.rm-before-after:has(.rm-pair-range:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* «After» on a photo of one's own screen: picks the pair's second photo. */
.rm-work-photo .rm-work-after {
    position: absolute;
    inset-inline-start: 4px;
    inset-block-end: 4px;
}

.rm-work-after-pick {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-block-size: 32px;
    padding: 2px 10px 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    cursor: pointer;
}

.rm-work-after-pick input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.rm-work-after-pick:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* One photo viewer for the site (plan item 318, photo-viewer.js): a photo
   edge to edge on black in both themes, the neighbours a swipe away.
   touch-action: none — the viewer's own pinch zooms the photo, the page
   itself must not zoom or scroll under it. */
.rm-work-photos[data-photo-viewer] img,
[data-photo-viewer] .rm-resource-photo img {
    cursor: zoom-in;
}

.rm-photo-viewer-open,
.rm-photo-viewer-open body {
    overflow: hidden;
}

.rm-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 10050;
    overflow: hidden;
    color: #fff;
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-user-select: none;
    user-select: none;
}

.rm-photo-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--photo-viewer-dim, 1);
}

.rm-photo-viewer-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.rm-photo-viewer-slide[hidden] {
    display: none;
}

.rm-photo-viewer-slide img {
    max-inline-size: 100vw;
    max-block-size: 100dvh;
    object-fit: contain;
    cursor: zoom-in;
    transform-origin: 0 0;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.rm-photo-viewer.is-zoomed .rm-photo-viewer-slide img {
    cursor: grab;
}

.rm-photo-viewer.is-settling .rm-photo-viewer-slide,
.rm-photo-viewer.is-settling .rm-photo-viewer-slide img {
    transition: transform 0.22s ease;
}

.rm-photo-viewer.is-error .rm-photo-viewer-slide img {
    visibility: hidden;
}

.rm-photo-viewer-count {
    position: absolute;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 22px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
    pointer-events: none;
}

[dir="rtl"] .rm-photo-viewer-count {
    transform: translateX(50%);
}

/* «Loading…» / «Photo error» while the photo downloads. */
.rm-photo-viewer-state {
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 18px);
    margin: 0;
    padding: 0 16px;
    font-size: var(--text-sm);
    text-align: center;
    pointer-events: none;
}

.rm-photo-viewer-state:empty {
    display: none;
}

.rm-photo-viewer-actions {
    position: absolute;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 10px);
    inset-inline-end: 10px;
    display: flex;
    gap: 10px;
}

.rm-photo-viewer-action,
.rm-photo-viewer-step {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 45%);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.rm-photo-viewer-action:focus-visible,
.rm-photo-viewer-step:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.rm-photo-viewer-step {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.rm-photo-viewer-step:disabled {
    opacity: 0.3;
    cursor: default;
}

.rm-photo-viewer-step[hidden] {
    display: none;
}

.rm-photo-viewer-step--prev {
    inset-inline-start: 10px;
}

.rm-photo-viewer-step--next {
    inset-inline-end: 10px;
}

/* The chevron points right; «previous» faces back, in either direction. */
.rm-photo-viewer-step--prev svg,
[dir="rtl"] .rm-photo-viewer-step--next svg {
    transform: scaleX(-1);
}

[dir="rtl"] .rm-photo-viewer-step--prev svg {
    transform: none;
}

/* The long-press menu (photo-viewer.js): a dark pill above the bottom
   edge, over the photo in both themes. */
.rm-photo-viewer-menu {
    position: absolute;
    inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 24px);
    inset-inline-start: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-inline-size: 200px;
    padding: 6px;
    border-radius: 18px;
    background: rgb(28 28 30 / 92%);
    color: #fff;
    box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

[dir="rtl"] .rm-photo-viewer-menu {
    transform: translateX(50%);
}

.rm-photo-viewer-menu-item {
    display: flex;
    gap: 12px;
    align-items: center;
    min-block-size: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.rm-photo-viewer-menu-item:hover,
.rm-photo-viewer-menu-item:focus-visible {
    background: rgb(255 255 255 / 12%);
    outline: none;
}

/* A finger swipes; arrows only where a mouse can hover. */
@media not ((hover: hover) and (pointer: fine)) {
    .rm-photo-viewer-step {
        display: none;
    }
}

.rm-work-photo-add {
    display: grid;
    block-size: 100%;
}

.rm-work-new-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-2);
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.rm-work-new-pick > .icon {
    width: 24px;
    height: 24px;
}

.rm-work-new-pick input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.rm-work-new:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.rm-work-new .is-sending .rm-work-new-pick {
    opacity: .6;
    pointer-events: none;
}

.rm-work-photo .rm-resume-delete {
    position: absolute;
    inset-inline-end: 4px;
    inset-block-start: 4px;
}

/* «Before / after» (plan item 406): the pair takes a whole row; the
   «before» shows up to the line, the «after» past it. Left is «before» in
   every language — a slider of time, not of text. photo-viewer.js moves
   --pair-split with a finger, the range takes the keyboard. */
.rm-work-photo.rm-work-pair {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
}

.rm-before-after {
    --pair-split: 50%;
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    direction: ltr;
    touch-action: pan-y;
    cursor: ew-resize;
    user-select: none;
}

.rm-before-after img {
    position: absolute;
    inset: 0;
    -webkit-user-drag: none;
}

.rm-before-after .rm-pair-before {
    clip-path: inset(0 calc(100% - var(--pair-split)) 0 0);
}

.rm-pair-line {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--pair-split);
    inline-size: 3px;
    margin-inline-start: -1.5px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.rm-pair-line::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    inline-size: 36px;
    block-size: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    box-shadow: 0 0 6px rgba(0, 0, 0, .45);
}

.rm-pair-tag {
    position: absolute;
    inset-block-end: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    pointer-events: none;
}

.rm-pair-tag--before {
    inset-inline-start: 8px;
}

.rm-pair-tag--after {
    inset-inline-end: 8px;
}

/* The range only for the keyboard and screen readers: on top of nothing. */
.rm-pair-range {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    inline-size: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.rm-before-after:has(.rm-pair-range:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* «After» on a photo of one's own screen: picks the pair's second photo. */
.rm-work-photo .rm-work-after {
    position: absolute;
    inset-inline-start: 4px;
    inset-block-end: 4px;
}

.rm-work-after-pick {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-block-size: 32px;
    padding: 2px 10px 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    cursor: pointer;
}

.rm-work-after-pick input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.rm-work-after-pick:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* A work photo full screen, the rest a swipe away (plan item 318,
   photo-viewer.js). Black in both themes: a photo is looked at on dark. */
.rm-work-photos[data-photo-viewer] img,
[data-photo-viewer] .rm-resource-photo img {
    cursor: zoom-in;
}

.rm-photo-viewer-open,
.rm-photo-viewer-open body {
    overflow: hidden;
}

.rm-photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    color: #fff;
}

.rm-photo-viewer-track {
    display: flex;
    block-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
    outline: none;
}

.rm-photo-viewer-track::-webkit-scrollbar {
    display: none;
}

.rm-photo-viewer-slide {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.rm-photo-viewer-slide img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}

.rm-photo-viewer-count {
    position: absolute;
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 18px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

.rm-photo-viewer-close,
.rm-photo-viewer-step {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 45%);
    color: #fff;
    cursor: pointer;
}

.rm-photo-viewer-close {
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 8px);
    inset-inline-end: 8px;
}

.rm-photo-viewer-step {
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.rm-photo-viewer-step:disabled {
    opacity: 0.3;
    cursor: default;
}

.rm-photo-viewer-step--prev {
    inset-inline-start: 8px;
}

.rm-photo-viewer-step--next {
    inset-inline-end: 8px;
}

/* The chevron points right; «previous» faces back, in either direction. */
.rm-photo-viewer-step--prev svg,
[dir="rtl"] .rm-photo-viewer-step--next svg {
    transform: scaleX(-1);
}

[dir="rtl"] .rm-photo-viewer-step--prev svg {
    transform: none;
}

/* The long-press menu (photo-viewer.js): a dark pill above the bottom
   edge, over the photo in both themes. */
.rm-photo-viewer-menu {
    position: absolute;
    inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 24px);
    inset-inline-start: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-inline-size: 200px;
    padding: 6px;
    border-radius: 18px;
    background: rgb(28 28 30 / 92%);
    color: #fff;
    box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

[dir="rtl"] .rm-photo-viewer-menu {
    transform: translateX(50%);
}

.rm-photo-viewer-menu-item {
    display: flex;
    gap: 12px;
    align-items: center;
    min-block-size: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.rm-photo-viewer-menu-item:hover,
.rm-photo-viewer-menu-item:focus-visible {
    background: rgb(255 255 255 / 12%);
    outline: none;
}

/* A finger swipes; arrows only where a mouse can hover. */
@media not ((hover: hover) and (pointer: fine)) {
    .rm-photo-viewer-step {
        display: none;
    }
}

.rm-work-photo-add {
    display: flex;
    gap: var(--space-2);
}

.rm-resume-file {
    padding-block: 9px;
}

/* Skills as tags (plan item 256): a chip per skill, a cross to remove it. */
.rm-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.rm-skill-chips:empty {
    display: none;
}

.rm-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-block-size: 36px;
    padding-inline: 14px 4px;
    border: 1px solid rgba(var(--text-rgb), .2);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.rm-public-resume .rm-skill-chip {
    padding-inline: 14px;
}

.rm-skill-chip .rm-resume-delete {
    margin: 0;
}

.rm-skill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.rm-skill-remove:hover,
.rm-skill-remove:focus-visible {
    background: rgba(var(--text-rgb), .08);
    color: var(--text);
}

.rm-skill-remove .icon {
    inline-size: 16px;
    block-size: 16px;
}

.rm-skill-add {
    display: flex;
    gap: var(--space-2);
}

.rm-skill-add .ui-input {
    flex: 1;
    min-inline-size: 0;
}

.rm-permit-chip {
    margin-inline-start: 6px;
    vertical-align: middle;
}

.rm-permit-chip--pending {
    background: rgba(245, 158, 11, .18);
    color: #fbbf24;
}

.rm-permit-chip--verified {
    background: rgba(34, 197, 94, .16);
    color: #4ade80;
}

.rm-permit-chip--rejected {
    background: rgba(239, 68, 68, .16);
    color: #f87171;
}

/* By day the chips take darker inks (WCAG AA on the pale fills). */
:root[data-theme="light"] .rm-permit-chip--pending {
    color: #92400e;
}

:root[data-theme="light"] .rm-permit-chip--verified {
    color: #166534;
}

:root[data-theme="light"] .rm-permit-chip--rejected {
    color: #991b1b;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .rm-permit-chip--pending {
        color: #92400e;
    }

    :root:not([data-theme="dark"]) .rm-permit-chip--verified {
        color: #166534;
    }

    :root:not([data-theme="dark"]) .rm-permit-chip--rejected {
        color: #991b1b;
    }
}

/* The résumé as it will be sent, first on the screen (night 2026-10-18):
   the first page as a small paper sheet, the looks as a segmented row,
   «Download PDF» the one main button, Word and the letter under it. The
   sheet is white in both themes — it is paper. */
.rm-resume-export {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.rm-resume-thumb {
    display: block;
    aspect-ratio: 1240 / 1754;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: #ffffff;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.rm-resume-thumb img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.rm-resume-thumb:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.rm-resume-export-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
}

.rm-resume-export-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.3;
}

.rm-resume-looks {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
}

.rm-resume-look {
    flex: 1 1 0;
    min-inline-size: 0;
    min-block-size: 40px;
    display: grid;
    place-items: center;
    padding-inline: 6px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.rm-resume-look[aria-current="true"] {
    background: var(--card);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(var(--text-rgb), .18);
}

.rm-resume-look:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.rm-resume-pdf-row {
    display: flex;
    gap: var(--space-2);
}

.rm-resume-pdf {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 8px;
    min-inline-size: 0;
    min-block-size: 48px;
}

.rm-resume-share {
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    inline-size: 48px;
    min-block-size: 48px;
    padding: 0;
}

.rm-resume-share[hidden] {
    display: none;
}

.rm-resume-share .icon {
    inline-size: 20px;
    block-size: 20px;
}

.rm-resume-pdf .icon,
.rm-resume-export-more .icon {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
}

.rm-resume-export-more {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
}

.rm-resume-export-more .ui-button {
    display: flex;
    justify-content: center;
    gap: 6px;
    min-block-size: 44px;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
}

/* Under 360px the sheet goes above the controls. */
@media (max-width: 359px) {
    .rm-resume-export {
        grid-template-columns: minmax(0, 1fr);
    }

    .rm-resume-thumb {
        inline-size: 120px;
    }
}

/* «I speak» inside the résumé: the chosen languages wrap (no row cut at
   the edge), «+ Add language» unfolds a search and the other languages. */
.rm-resume-static-head {
    cursor: default;
}

.rm-resume-langs .rm-languages-form {
    gap: var(--space-2);
    margin-top: 0;
    padding-block-end: var(--space-3);
}

.rm-lang-chosen,
.rm-lang-others {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
    min-inline-size: 0;
}
/* A long name («中文（繁體） Китайский, традиционное письмо») wraps inside
   its chip instead of running past the card's edge. */
.rm-lang-chosen .rm-lang-chip,
.rm-lang-others .rm-lang-chip {
    flex: 0 1 auto;
    max-inline-size: 100%;
}
.rm-lang-chosen .rm-lang-chip-face,
.rm-lang-others .rm-lang-chip-face {
    max-inline-size: 100%;
    padding-block: 6px;
    white-space: normal;
}
/* The wrap falls between the two names, never inside «中文（繁體）». */
.rm-lang-chosen .rm-lang-chip-face > [lang],
.rm-lang-others .rm-lang-chip-face > [lang] {
    white-space: nowrap;
}

.rm-lang-chip[hidden],
.rm-lang-search[hidden],
.rm-lang-add-body [data-lang-none][hidden] {
    display: none;
}

.rm-lang-add > summary {
    list-style: none;
    display: inline-flex;
    gap: 6px;
}

.rm-lang-add > summary::-webkit-details-marker,
.rm-lang-add > summary::marker {
    display: none;
    content: "";
}

.rm-lang-add > summary .icon {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}

.rm-lang-add[open] > summary .icon {
    transform: rotate(45deg);
}

.rm-lang-add-body {
    display: grid;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
}

/* The CV and references inside the résumé: rows like the blocks above. */
.rm-resume-docs .rm-doc-list {
    margin: 0;
}

.rm-resume-docs .rm-doc-row {
    --tile-size: 36px;
    min-block-size: 56px;
    padding-block: var(--space-2);
}

.rm-resume-docs .rm-doc-row:first-child {
    border-top: 1px solid var(--line);
}

.rm-resume-docs .rm-doc-text small {
    margin-block-start: 2px;
}

.rm-doc-file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin-block-start: 2px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
    text-decoration: none;
}

.rm-doc-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
}

.rm-doc-file .icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    stroke-width: 3;
    color: var(--primary);
}

.rm-letter-form {
    display: grid;
    gap: var(--space-3);
}

/* The letter reads as a sheet: roomy lines, a margin like paper. */
.rm-letter-text {
    min-block-size: 22rem;
    padding: var(--space-4);
    line-height: 1.6;
    font-size: var(--text-base);
}

/* An empty résumé: the letter has nothing to tell, so this leads. */
.rm-letter-hint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--text);
    font-size: var(--text-sm);
    text-decoration: none;
}

.rm-letter-hint > .icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.rm-letter-hint > strong {
    flex: none;
    margin-inline-start: auto;
    color: var(--primary);
}

/* «Tailor it to a job ad»: folded until there is an ad. */
.rm-letter-target-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    color: var(--primary);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.rm-letter-target-head::-webkit-details-marker,
.rm-letter-target-head::marker {
    display: none;
    content: "";
}

.rm-letter-target-head > .icon {
    width: 18px;
    height: 18px;
}

.rm-letter-target-body {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.rm-letter-target-body > textarea {
    inline-size: 100%;
}

.rm-letter-copy[hidden] {
    display: none;
}

.rm-letter-status:empty {
    display: none;
}

.rm-letter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rm-public-resume-list {
    display: grid;
    gap: 8px;
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.rm-public-resume-list li {
    display: grid;
    gap: 2px;
}

.rm-public-resume-list small,
.rm-public-resume-line {
    color: var(--muted);
}

.rm-public-resume-line {
    margin: 0 0 var(--space-3);
    color: var(--text);
    overflow-wrap: anywhere;
}

/* «Это компания» asks once before marking (plan item 247(4)): the summary
   is the row's button; open, the note and the real button take a row of
   their own under it. */
.rm-company-form {
    flex-wrap: wrap;
}

.rm-confirm {
    flex: 0 0 auto;
}

.rm-confirm > summary {
    display: inline-flex;
    list-style: none;
    cursor: pointer;
}

.rm-confirm > summary::-webkit-details-marker,
.rm-confirm > summary::marker {
    display: none;
    content: "";
}

.rm-confirm[open] {
    flex-basis: 100%;
}

.rm-confirm-body {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--line);
}

.rm-confirm-body .card-meta {
    margin: 0;
}

.rm-ready-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: none;
    flex: 0 0 auto;
}

.section-head--mt-24 {
    margin-top: 24px;
}

/* -----------------------------------------------------------
   BOTTOM NAV
----------------------------------------------------------- */

.bottom-nav {
    position: fixed;
    z-index: 20;

    left: 50%; /* stylelint-disable-line csstools/use-logical -- centred with translateX(-50%), direction-neutral */
    bottom: 0;

    width: min(100%, 560px);

    transform: translateX(-50%);

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    padding: 6px 8px max(8px, env(safe-area-inset-bottom));

    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;

    /* Opaque: the page scrolls under the menu, and through a 94% fill the
       text below showed (a listing's "Report" chips, plan item 234). */
    background: var(--surface);

    box-shadow: none;
}

/* «Updated · what changed» (legal.rs, update_notice): one line above the
   bottom menu, shown once; fixed, so the page does not jump when it shows. */
.rm-legal-update {
    position: fixed;
    z-index: 19;

    inset-inline: 0;
    bottom: calc(72px + env(safe-area-inset-bottom));

    display: flex;
    align-items: center;

    gap: 8px;

    width: min(100% - 24px, 536px);
    margin-inline: auto;
    padding-block: 8px;
    padding-inline: 14px 8px;

    border: 1px solid var(--line);
    border-radius: var(--radius);

    background: var(--surface);
    box-shadow: var(--shadow-md);

    font-size: var(--text-sm);
    line-height: 1.35;
}

.rm-legal-update[hidden] {
    display: none;
}

.rm-legal-update p {
    flex: 1;
    margin: 0;
}

.rm-legal-update-close {
    display: inline-grid;
    place-items: center;
    flex: none;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--muted);
}

/* Одно меню на все темы: ровная полоса, подписи обычным регистром, активный
   пункт отмечен мягкой плашкой --accent-soft за иконкой, бейдж сидит на
   правом верхнем углу иконки (inset-inline — в RTL зеркально). */
.nav-item {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    min-height: 56px;

    color: var(--muted);
    text-decoration: none;

    border-radius: 0;

    font-size: var(--text-2xs);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;

    /* Свой контекст наложения: плашка ::before с z-index -1 лежит под иконкой
       и подписью, но над фоном меню. */
    isolation: isolate;

    transition: color var(--transition-fast), background var(--transition-fast);
}

/* Плашка активного пункта: за иконкой, по центру; left/margin — направление
   не важно (центр). */
.nav-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 6px;
    left: 50%; /* stylelint-disable-line csstools/use-logical -- centred: 56px wide, pulled back by half below; direction-neutral */
    width: 56px;
    height: 32px;
    margin-left: -28px; /* stylelint-disable-line csstools/use-logical -- see left above */
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    opacity: 0;
    transform: scale(.72);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-item:hover,
.nav-item.active {
    color: var(--text);
    background: transparent;
    box-shadow: none;
}

.nav-item.active {
    color: var(--accent);
}

.nav-item.active::before {
    opacity: 1;
    transform: none;
}

.nav-item .icon {
    pointer-events: none;
    width: 26px;
    height: 26px;
    stroke-width: 1.9;
    transition: transform .12s ease;
}

/* Бейдж — тоже <span>: правило «.nav-item span { position: relative }»
   здесь недопустимо, оно снимало absolute с бейджа (так он и уезжал к
   подписи в теме «Как в системе»). */
.nav-badge {
    position: absolute;
    top: 2px;
    inset-inline-start: 50%;
    margin-inline-start: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: var(--text-2xs);
    font-weight: 600;
    box-shadow: 0 0 0 2px var(--surface);
    box-sizing: border-box;
}

.nav-item.active .icon {
    stroke-width: 2.2;
    filter: none;
    color: var(--accent);
}

/* A phone on its side (plan item 421): ~390 px of height, and the menu took
   a fifth of it. Icon and label in one row, a lower bar. From 900 px wide
   the side rail below takes over. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899.98px) {
    .bottom-nav {
        padding-block: 4px max(4px, env(safe-area-inset-bottom));
    }

    .nav-item {
        flex-direction: row;
        gap: 8px;
        min-height: 44px;
        font-size: var(--text-xs);
    }

    .nav-item::before {
        inset: 4px 12px;
        width: auto;
        height: auto;
        margin: 0;
    }

    .nav-item .icon {
        width: 22px;
        height: 22px;
    }

    /* In the row, after the label instead of over it. */
    .nav-badge {
        position: static;
        order: 1;
        margin-inline-start: 0;
    }
}

html[data-page="chat"] .bottom-nav {
    display: none;
}

html[data-page="chat"] .page {
    padding-bottom: 8px;
}

html[data-page="chat"] .rm-version-footer {
    display: none;
}

/* Tablet (900–1023 px): the menu as a side rail. From 1024 px — the
   desktop top bar below. */
@media (min-width: 900px) and (max-width: 1023.98px) {
    .bottom-nav {
        top: 50%;
        bottom: auto;
        /* Sidebar on the inline-start edge (right in RTL); `auto` on the
           other side overrides the mobile rule's centring `left: 50%`. */
        inset-inline: 18px auto;
        width: 92px;
        transform: translateY(-50%);
        grid-template-columns: 1fr;
        gap: var(--space-1);
        padding: 10px 8px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--card);
        box-shadow: var(--shadow-md);
    }

    .nav-item {
        min-height: 64px;
        border-radius: var(--radius-sm);
    }

    main.page {
        width: min(calc(100% - 140px), 900px);
        margin-inline: 124px auto;
        padding-bottom: 48px;
    }

    html[data-page="chat"] .bottom-nav {
        display: grid;
    }

    html[data-page="chat"] .page {
        padding-bottom: 48px;
    }
}

/* Desktop-only parts of the menu (logo, search, bell): the phone menu
   stays the three tabs. */
.bottom-nav .rm-desk-brand,
.bottom-nav .rm-desk-search,
.bottom-nav .rm-desk-bell,
.bottom-nav .rm-desk-login,
.bottom-nav .rm-desk-install,
.bottom-nav .rm-desk-only {
    display: none;
}

/* A guest's first screen: what GRABIT is, in one sentence (plan item
   333; on the phone too since plan item 360). */
.rm-guest-tagline {
    margin: 2px 0 12px;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--muted);
}

/* -----------------------------------------------------------
   DESKTOP (≥1024 px, docs/owner-requests/2026-10-12-desktop.md):
   the bottom menu becomes the top bar — logo, search, Рядом, Чаты,
   Профиль, bell. Nothing here reaches a phone.
----------------------------------------------------------- */
@media (min-width: 1024px) {
    .bottom-nav,
    html[data-page="chat"] .bottom-nav {
        inset-block: 0 auto;
        inset-inline: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        width: auto;
        height: 64px;
        padding-block: 0;
        padding-inline: max(24px, calc((100% - 1440px) / 2));
        border-top: 0;
        border-bottom: 1px solid var(--line);
        transform: none;
    }

    .bottom-nav .rm-desk-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-inline-end: 20px;
        color: var(--text);
        font-size: var(--text-lg);
        font-weight: 700;
        letter-spacing: .02em;
        text-decoration: none;
    }

    .rm-desk-brand img {
        width: 40px;
        height: 24px;
        object-fit: contain;
    }

    .bottom-nav .rm-desk-search {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        max-width: 520px;
        margin-inline-end: auto;
    }

    .rm-desk-search .icon {
        position: absolute;
        inset-inline-start: 14px;
        width: 18px;
        height: 18px;
        color: var(--muted);
    }

    .rm-desk-search input {
        width: 100%;
        height: 40px;
        padding-block: 0;
        padding-inline: 42px 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius-pill);
        background: var(--card);
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
    }

    .rm-desk-search input:focus-visible {
        border-color: var(--accent);
        outline: none;
    }

    .bottom-nav .nav-item {
        flex-direction: row;
        gap: 8px;
        min-height: 44px;
        padding-inline: 14px;
        border-radius: var(--radius-pill);
        font-size: var(--text-sm);
    }

    .bottom-nav .nav-item::before {
        inset: 0;
        width: auto;
        height: auto;
        margin: 0;
    }

    .bottom-nav .nav-item .icon {
        width: 22px;
        height: 22px;
    }

    /* The count follows the label on a desktop tab; on the bell (no label)
       it stays on the icon's corner. */
    .bottom-nav .nav-item > span:not(.nav-badge) {
        order: 1;
    }

    .bottom-nav .nav-badge {
        position: static;
        order: 2;
        margin: 0;
        box-shadow: none;
    }

    .bottom-nav .rm-desk-bell .nav-badge {
        position: absolute;
        top: 2px;
        inset-inline-start: 24px;
        box-shadow: 0 0 0 2px var(--surface);
    }

    .bottom-nav .rm-desk-only {
        display: flex;
    }

    .bottom-nav .rm-desk-bell {
        display: flex;
        padding-inline: 12px;
    }

    /* «Установить», while Chrome or Edge offers it (plan item 334). */
    .bottom-nav .rm-desk-install:not([hidden]) {
        display: flex;
        border: 0;
        background: none;
        font-family: inherit;
        cursor: pointer;
    }

    /* A guest: «Войти» in place of the bell (plan item 333). */
    .bottom-nav .rm-desk-login {
        display: inline-flex;
        min-height: 40px;
        margin-inline-start: 8px;
        padding-inline: 18px;
        text-decoration: none;
    }

    .rm-guest-tagline {
        margin: 4px 0 16px;
        font-size: 1.125rem;
    }

    /* The notifications count sits on the bell here, not on «Профиль». */
    .bottom-nav [data-nav-profile-link] .nav-badge {
        display: none;
    }

    main.page,
    html[data-page="chat"] .page {
        padding-top: 88px;
        padding-bottom: 48px;
    }

    .rm-legal-update {
        bottom: 16px;
    }
}

/* Desktop «Рядом», search, rubric (plan item 328; common.rs, desk_split;
   desk-split.js): filters on the left, cards in a grid, the open listing
   in a panel on the right. On a phone the wrappers are plain blocks. */
@media (min-width: 1024px) {
    main.page:has(> .rm-desk-split) {
        width: min(100% - 48px, 1440px);
    }

    .rm-desk-split {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        align-items: start;
        gap: 28px;
    }

    .rm-desk-split.is-panel-open {
        grid-template-columns: 300px minmax(0, 1fr) minmax(420px, 38%);
    }

    .rm-desk-side {
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 104px);
        padding-inline-end: 6px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    /* The top bar's search field is the search here (it carries this
       form's place and filters, desk-split.js). */
    .rm-desk-side .hero > form.search,
    .rm-desk-side .rm-search-row > form.search {
        display: none;
    }

    /* Filters always open on a desktop: no «Фильтры» button, no sheet
       title, and the area chip has nothing to open. */
    .rm-desk-side .rm-filters > summary,
    .rm-desk-side .rm-filters-head,
    .rm-desk-side .rm-radius-chip {
        display: none;
    }

    .rm-desk-side .rm-search-row {
        display: block;
        margin: 0;
    }

    .rm-desk-results > section:has(> .card--result) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        align-items: stretch;
        gap: 16px;
    }

    .rm-desk-results > section > .card--result {
        margin: 0;
    }

    .rm-desk-results .card--result.is-open {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .rm-desk-panel {
        position: sticky;
        top: 88px;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 104px);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .rm-desk-panel[hidden] {
        display: none;
    }

    .rm-desk-panel[aria-busy="true"] .rm-desk-panel-body {
        opacity: .45;
    }

    .rm-desk-panel-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-block: 8px;
        padding-inline: 16px 8px;
        border-bottom: 1px solid var(--line);
    }

    .rm-desk-panel-page {
        color: var(--accent);
        font-size: var(--text-sm);
        font-weight: 600;
    }

    .rm-desk-panel-close {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--muted);
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
    }

    .rm-desk-panel-close:hover {
        background: var(--accent-soft);
        color: var(--text);
    }

    .rm-desk-panel-body {
        flex: 1 1 auto;
        padding: 16px;
        overflow-y: auto;
        transition: opacity var(--transition-fast);
    }

    .rm-desk-panel-body:focus {
        outline: none;
    }

    .rm-desk-panel-body .rm-back-link {
        display: none;
    }

    .rm-desk-panel-body .hero h1 {
        font-size: var(--text-2xl);
    }

    /* The listing's action bar is fixed to the window on its own page;
       inside the panel it sits at the panel's bottom edge. */
    .rm-desk-panel-body .rm-resource-actionbar {
        position: sticky;
        inset: auto 0 -16px;
        width: auto;
        transform: none;
    }
}

/* Chats on a desktop (plan item 329): the list on the left, the chat or
   «choose a chat» on the right (communication.rs, desk_chats;
   desk-chats.js). A phone sees only the list or only the chat. */
.rm-desk-chats-pick {
    display: none;
}

/* Below 1024 px the two wrappers are not boxes: the chat's height chain
   (main → .chat-shell → #chat-messages) stays as before plan item 329.
   As plain blocks they let the history grow to its full length inside a
   fixed body — a chat that does not scroll on a phone (2026-10-12). */
@media (max-width: 1023.98px) {
    .rm-desk-chats,
    .rm-desk-chats-thread {
        display: contents;
    }
}

@media (min-width: 1024px) {
    main.page:has(> .rm-desk-chats) {
        width: min(100% - 48px, 1440px);
    }

    .rm-desk-chats {
        display: grid;
        grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
        height: calc(100dvh - 88px - 24px);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        overflow: hidden;
    }

    .rm-desk-chats-list {
        min-height: 0;
        padding: 12px;
        border-inline-end: 1px solid var(--line);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .rm-desk-chats-list[hidden] {
        display: block;
    }

    .rm-desk-chats-list a.chat-dialog-card[aria-current="page"] {
        background: var(--accent-soft);
    }

    .rm-desk-chats-pick {
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 12px;
        color: var(--muted);
        font-size: var(--text-base);
    }

    .rm-desk-chats-pick img {
        opacity: .75;
    }

    .rm-desk-chats-thread {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        padding-block: 8px 12px;
        padding-inline: 20px;
    }

    .rm-desk-chats-thread .chat-shell {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* The list is right there: no way back to it. */
    .rm-desk-chats-thread .chat-header-main > .rm-back-link {
        display: none;
    }
}

/* Profile, Workshop, settings, forms and the listing page on a desktop
   (plan item 331): a narrower centred column, and short fields side by
   side — two `.rm-half` fields in a row form a pair. */
@media (min-width: 1024px) {
    main.page:is(
        :has(> .rm-me-head),
        :has(> .rm-settings),
        :has(> .rm-profile-list),
        :has(> .rm-profile-block),
        :has(> .rm-settings-card),
        :has(> .rm-bcard-stage),
        :has(.rm-create-steps),
        :has(> .ui-form-stack),
        :has(> .rm-resource-actionbar)
    ) {
        width: min(100% - 48px, 760px);
    }

    .ui-form-stack:has(> .rm-half + .rm-half) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-4);
    }

    .ui-form-stack:has(> .rm-half + .rm-half) > * {
        grid-column: 1 / -1;
    }

    .ui-form-stack > .rm-half:has(+ .rm-half),
    .ui-form-stack > .rm-half + .rm-half {
        grid-column: auto;
    }

    /* The listing page's «Написать · Откликнуться» bar floats over the
       page on a phone; here it stands right under the description. */
    main.page:has(> .rm-resource-actionbar) {
        display: flex;
        flex-direction: column;
    }

    main.page:has(> .rm-resource-actionbar) > * {
        order: 2;
    }

    main.page > :is(.hero, .rm-resource-gallery, .rm-resource-section--plain) {
        order: 0;
    }

    main.page > .rm-resource-actionbar {
        position: static;
        order: 1;
        width: auto;
        margin-block: 0 var(--space-4);
        transform: none;
        box-shadow: none;
    }

    main.page > .rm-resource-actionbar-spacer {
        display: none;
    }
}

/* -----------------------------------------------------------
   MOBILE
----------------------------------------------------------- */

/* ============================================================
   RESURSMAP LUXURY LAYER
   ============================================================ */

.rm-guest-panel {
    display: block;
    padding: 22px 20px;
    margin-bottom: 18px;
}

.rm-guest-actions {
    display: grid;
    gap: 10px;
}

.rm-guest-line {
    margin: 0 0 16px;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.rm-session-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.rm-session-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.rm-session-current {
    font-size: var(--text-2xs);
    font-weight: 600;
}

.brand:hover {
    transform: translateY(-1px);
    opacity: .92;
}

.hero .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 16px;
    font-size: var(--text-xs);
}

.search:focus-within {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.rm-kind-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 16px;
}

.rm-search-suggest {
    display: block;
    padding: 18px;
}

.rm-search-suggest .rm-kind-chips {
    margin: 12px 0 0;
}

.hero .rm-kind-chips {
    margin: 10px 0 0;
}

.hero .rm-guest-hint {
    margin: 0 0 16px;
}

.rm-place-guess {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.rm-place-guess button {
    min-height: 32px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.rm-city-chat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 12px 0 0;
    padding: 0 4px;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.rm-city-chat-row > span {
    flex: 1;
}

.rm-city-chat-row svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--muted);
}

.rm-kind-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--text-rgb), .24);
    text-decoration: none;
    font-size: var(--text-xs);
}

/* «Недавние» under an empty search field (static/place-memory.js): typed
   searches, each with its own remove button, «Очистить всё» below. */
.rm-recent {
    flex: 1 0 100%;
    margin-block-start: 4px;
}

.rm-recent-title {
    margin: 0 0 4px;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--muted);
}

.rm-recent-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-recent-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-block-end: 1px solid rgba(var(--text-rgb), .08);
}

.rm-recent-link {
    flex: 1;
    min-width: 0;
    display: block;
    line-height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

.rm-recent-remove,
.rm-recent-clear {
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.rm-recent-remove {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.rm-recent-clear {
    min-height: 44px;
    padding: 0;
    font-size: var(--text-xs);
    text-decoration: underline;
}

.rm-kind-chip.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

/* «Нужен мастер · Все · Хочу работать» under the search box, the same on
   every list screen (docs/owner-requests/2026-10-11-intent-switch.md; the
   words — 2026-10-11-live-listings-go.md, block 2): three equal parts, one
   name each, two lines at most; one fixed height, so a longer word in some
   language never moves the page. A right-to-left page runs the row the
   other way by itself. */
.rm-intent {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 2px;
    margin: var(--space-2) 0;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--fill-soft);
}

.rm-intent-part {
    box-sizing: border-box;
    height: 44px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    text-align: center;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.rm-intent-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rm-intent-part.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
}

.rm-intent-part:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* The search row (plan item 364): the field, and at its end a square
   «Фильтры» button as tall as the field. */
.rm-search-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: 24px;
}

.rm-search-row > form.search {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

/* «Фильтры»: every other filter behind one button (block 2). */
.rm-filters {
    margin: 0 0 var(--space-3);
}

.rm-search-row > .rm-filters {
    flex: none;
    margin: 0;
}

.rm-filters-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 54px;
    height: 100%;
    min-height: 52px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.rm-filters-button::-webkit-details-marker {
    display: none;
}

.rm-filters-button .icon {
    width: 20px;
    height: 20px;
}

.rm-filters[open] > .rm-filters-button {
    border-color: var(--primary);
}

.rm-filters-count {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 12px;
    font-weight: 700;
}

.rm-filters-body {
    padding-block-start: var(--space-2);
}

.rm-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: 700;
}

.rm-filters-close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-inline-end: -10px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.rm-filters-close .icon {
    width: 20px;
    height: 20px;
}

/* On a phone the open filters are a sheet from the bottom over a dimmed
   page (global-search.js closes it on a tap outside, the cross, Esc). */
@media (max-width: 1023.98px) {
    .rm-filters[open]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(0, 0, 0, .45);
    }

    .rm-filters[open] > .rm-filters-body {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1101;
        max-height: 85vh;
        max-height: 85dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
        padding: var(--space-3) 16px calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        background: var(--surface);
        color: var(--text);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
    }
}

@media (min-width: 1024px) {
    .rm-filters-head {
        display: none;
    }
}

/* Under the search row: the area chip and the filters on (plan item 364). */
.rm-area-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-3);
}

.rm-area-line > .rm-filter-on {
    display: contents;
}

.rm-radius-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-height: 32px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rm-radius-chip > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rm-radius-chip .icon {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--primary);
}

.rm-filters-body > .rm-kind-chips {
    margin-block-end: var(--space-2);
}

.rm-filters-body > .rm-kind-chips:last-child {
    margin-block-end: 0;
}

/* The radius slider right under the switch (docs/owner-requests/
   2026-10-11-radius-empty-rubric.md, block 1): the value large above the
   track, the two ends small under it. Every line has its own fixed
   height, so the value changing under the thumb never moves the page. A
   right-to-left page runs the track the other way by itself. */
.rm-radius {
    margin: 0 0 var(--space-2);
}

.rm-radius-label {
    display: block;
}

.rm-radius-value {
    display: block;
    height: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    font-variant-numeric: tabular-nums;
}

.rm-radius-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* The end the value is at keeps its place (the other stays at its side). */
.rm-radius-ends > span[hidden] {
    display: block;
    visibility: hidden;
}

.rm-radius-ends {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    color: var(--muted);
}

/* «Увеличьте радиус» on an empty list (block 4). */
.rm-radius-more {
    margin: var(--space-2) 0 0;
}

.rm-radius-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--primary);
}

/* The filters on, small chips with a cross under «Фильтры» (block 6). */
.rm-filter-on {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}

.rm-filter-on-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-height: 32px;
    padding-inline: 11px 7px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: rgba(var(--primary-rgb), .12);
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.rm-filter-on-chip > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rm-filter-on-chip .icon {
    flex: none;
    width: 14px;
    height: 14px;
}

/* «Включён фильтр: … · сбросить» on an empty screen. */
.rm-filters-on-line {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--muted);
}

.rm-filters-on-line a {
    font-weight: 600;
    color: var(--primary);
}

.rm-card-travel {
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
}

.card::before {
    display: none;
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(0,0,0,.035) 50%,
            transparent 80%
        );
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    pointer-events: none;
}

.card:hover::before {
    transform: translateX(100%);
}

.card:hover .card-icon {
    transform: none;
    color: var(--text);
    filter: none;
}

.card:hover .card-arrow {
    transform: none;
    color: var(--text);
}

.ui-form {
    width: 100%;
    box-sizing: border-box;
}

.ui-form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ui-field {
    display: block;
}

.ui-field-label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    color: var(--text);
}

.ui-form-note {
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.5;
}

.rm-auth-wrap {
    /* Monochrome auth family (login/register/forgot/delete) — now just
       follows the sitewide --text/--muted/--line theme tokens, so it
       switches with the rest of the site. Color appears only for
       error/success/danger status. */
    width: min(100%, 420px);
    margin: 0 auto;
    padding: var(--space-5);
}

/* Doubled class so the shared `.card` rules can't reach the flat auth
   card: the mobile `.card { padding: 16px }` sits later in the sheet and
   used to win at rest, while `:hover` (switched on by a tap on phones)
   dropped it to 0 — the card jumped 16px up between the finger's release
   and the click, and the click landed on the next link down. */

/* Карточка входа — без рамки на любом состоянии (см. правило выше). */
.card.rm-auth-card,
.card.rm-auth-card:hover,
.card.rm-auth-card:active {
    display: block;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
    border: 0;
    border-radius: 0;
    background: none;
}

.rm-auth-brand {
    display: inline-flex;
    margin-bottom: var(--space-5);
}

/* The light-theme logo shadow draws a grey box around the transparent
   mascot on the plain auth background. */
.rm-auth-card .rm-auth-brand .brand-logo-img {
    box-shadow: none;
    filter: none;
}

.rm-auth-title {
    margin: 0 0 var(--space-2);
    color: var(--text);
    /* «Вход или регистрация» and «Как к вам обращаться?» take two lines on
       a phone; 40px made them a wall above the one field. */
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.1;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

/* No subtitle under the heading: keep the same gap before the form. */
.rm-auth-title + :not(.rm-auth-subtitle) {
    margin-top: var(--space-6);
}

.rm-auth-subtitle {
    margin: 0 0 var(--space-6);
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* The invite link: one line of what GRABIT is, above the button. */
.rm-auth-lead {
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: rgba(var(--text-rgb), .05);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.rm-auth-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}

.rm-auth-field {
    margin-bottom: var(--space-3);
}

.rm-auth-label + .rm-auth-input + .rm-auth-label,
.rm-auth-step .rm-auth-label {
    margin-top: var(--space-4);
}

.rm-auth-input {
    display: block;
    width: 100%;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast);
    border-radius: 0;
    background: transparent;
}

/* Settings fields: framed like .ui-input, but flat and transparent. */
.ui-input.rm-auth-input {
    border-radius: 0;
    background: transparent;
}

.rm-auth-input:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

.rm-auth-input::placeholder {
    /* var(--muted) is verified ≥4.5:1 against both pure #000 and #fff */
    color: var(--muted);
}

.rm-auth-input--code {
    text-align: center;
    letter-spacing: .24em;
    font-size: var(--text-xl);
}

.rm-auth-password-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: flex-end;
}

.rm-auth-password-toggle {
    flex: 0 0 auto;
    padding: 0 0 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.rm-auth-password-toggle .slash {
    opacity: 1;
    transition: opacity var(--transition-fast);
}

.rm-auth-password-toggle[aria-pressed="true"] .slash {
    opacity: 0;
}

.rm-auth-links {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--text-xs);
}

.rm-auth-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    color: var(--muted);
}

.rm-auth-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 52px;
    margin-top: var(--space-6);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.rm-auth-button:active {
    transform: translateY(1px);
}

.rm-auth-button:disabled {
    cursor: not-allowed;
    transform: none;
}

.rm-auth-button--compact {
    margin-top: var(--space-5);
}

/* Right under a field the error line already leaves room: the full
   32px left a hole between «Почта» and «Получить код». */
.rm-auth-field + .rm-auth-button {
    margin-top: var(--space-3);
}

/* Doubled class: the gold `.rm-auth-button` rule further down would
   otherwise win the cascade (same specificity, later) and paint the
   dangerous action like any other button. */

.rm-auth-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: rm-auth-spin .6s linear infinite;
}

.rm-auth-button[data-loading="true"] .rm-auth-spinner {
    display: inline-block;
}

.rm-auth-button[data-loading="true"] .rm-auth-button-label {
    opacity: .85;
}

@keyframes rm-auth-spin {
    to { transform: rotate(360deg); }
}

.rm-auth-status {
    min-height: 18px;
    margin: var(--space-4) 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
}

.rm-auth-status.is-error,
.ui-status.is-error {
    color: var(--danger);
}

.rm-auth-status.is-success {
    color: var(--success);
}

.rm-auth-field-error {
    display: block;
    min-height: 16px;
    margin-top: 6px;
    color: var(--danger);
    font-size: var(--text-xs);
}

.rm-auth-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    text-align: center;
    color: var(--muted);
    font-size: var(--text-xs);
}

/* Every link here is a full 44px tap target: small text links stacked
   close together are easy to miss with a thumb. */
.rm-auth-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    color: var(--muted);
    text-decoration: none;
}

/* The other way in (password ⇄ email code): a quiet full-width button. */
.rm-auth-footer .rm-auth-alt {
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* «Войти по ключу доступа» is a <button> among links (plan item 64);
   its display rule must not undo the hidden attribute passkeys.js
   clears only in browsers with WebAuthn. */
.rm-auth-footer button.rm-auth-alt {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-2);
    font-family: inherit;
    cursor: pointer;
}

.rm-auth-footer button.rm-auth-alt[hidden] {
    display: none;
}

/* Same test as passkeys.js, made in <head> (the rm-webauthn class): the
   button takes its place in the first paint instead of pushing the other
   links down when the deferred script unhides it. */
.rm-webauthn .rm-auth-footer button.rm-auth-passkey[hidden] {
    display: inline-flex;
}

.rm-auth-footer button.rm-auth-alt[aria-busy="true"] {
    opacity: .6;
}

.rm-passkey-status.is-error {
    color: var(--danger);
}

/* Settings → passkeys: «confirm it's you» before adding a key. The form
   is a grid (.rm-danger-zone-form), so `hidden` needs saying here. */
.rm-passkey-reauth[hidden],
.rm-passkey-reauth [hidden] {
    display: none;
}

.rm-passkey-reauth-code {
    display: grid;
    gap: var(--space-2);
}

/* «Сообщать о новых объявлениях» on the search screen (plan item 58). */
.rm-follow-search {
    margin-top: 12px;
}

.rm-follow-search .rm-menu-row-action {
    flex-shrink: 0;
}

/* «Saved searches»: one row per search — the bell and the name open it,
   the bin deletes it. */
.rm-saved-search-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    border-block-end: 1px solid var(--line);
}

.rm-saved-search-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 48px;
    padding-block: 6px;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.rm-saved-search-link bdi {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rm-saved-search-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--accent);
    background: rgba(var(--text-rgb), .06);
}

.rm-saved-search-icon .icon,
.rm-saved-search-arrow .icon {
    width: 18px;
    height: 18px;
}

.rm-saved-search-arrow {
    display: inline-flex;
    color: var(--muted);
}

html[dir="rtl"] .rm-saved-search-arrow .icon {
    transform: scaleX(-1);
}

.rm-saved-search-delete-form {
    margin: 0;
}

.rm-saved-search-delete {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.rm-saved-search-delete:hover,
.rm-saved-search-delete:focus-visible {
    color: var(--danger);
    background: rgba(var(--text-rgb), .07);
}

.rm-saved-search-delete .icon {
    width: 20px;
    height: 20px;
}

.rm-saved-searches .rm-saved-search-email {
    border-block-end: 0;
}

/* Empty city, «Здесь пока пусто» (plan item 59): the follow form sits among the
   action buttons; the share status line is empty until a tap. */
.rm-city-cold-follow {
    display: contents;
}

.rm-city-share-status:empty,
.rm-city-cold-following:empty {
    display: none;
}

.rm-auth-back {
    margin-top: var(--space-3);
    text-align: center;
}

.rm-auth-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--text-sm);
}

.rm-auth-step {
    margin-top: var(--space-6);
    padding-top: 0;
    border-top: 0;
}

.rm-auth-warn {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--danger);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-size: var(--text-xs);
    line-height: 1.55;
}

.rm-auth-warn strong {
    display: block;
    margin-bottom: 6px;
    color: var(--danger);
    font-size: var(--text-xs);
    font-weight: 600;
}

.rm-auth-delete-list {
    margin: 0 0 var(--space-5);
    padding-inline-start: 18px;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.7;
}

.rm-auth-legal {
    margin: var(--space-3) 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.5;
    text-align: center;
}

.rm-auth-legal a {
    color: var(--muted);
}

.rm-auth-hint {
    margin: 0 0 var(--space-4);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rm-auth-link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}

.rm-auth-link-button:disabled {
    cursor: default;
    opacity: .7;
}

/* «Войти как… (dev)» (dev server only, web::handlers::dev_login): a
   dashed full-width button under the form, and the list of accounts as
   the same quiet buttons as «Войти по паролю». */
.rm-dev-login-as {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-4);
    border: 1px dashed var(--line);
}

.rm-dev-login-as-list {
    display: grid;
    gap: var(--space-2);
}

.rm-dev-login-as-account {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-xs);
    background: rgba(var(--text-rgb), .07);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.rm-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--text-rgb), .45);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .08em;
    border-color: transparent;
    background: var(--emphasis-soft);
    color: var(--emphasis);
}

.rm-premium-badge--compact {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--text-2xs);
}

.rm-premium-badge--admin {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: inherit;
    letter-spacing: normal;
}

.rm-empty-state {
    display: block;
    margin-top: 18px;
    padding: 28px 24px;
    text-align: center;
}

.rm-empty-mascot {
    display: block;
    width: 88px;
    height: auto;
    margin: 0 auto 12px;
}

/* Ночью тёмный маскот тонет в плашке --bg-soft: подсветка, как у
   иконок рубрик. */
:root:not([data-theme="light"]) .rm-empty-mascot {
    filter: brightness(1.7) contrast(1.05);
}

.rm-empty-state .card-title {
    font-size: var(--text-base);
    margin-bottom: 8px;
}

.rm-empty-state .card-meta {
    margin-top: 5px;
    line-height: 1.6;
}

.rm-empty-state-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 16px;
}

.rm-city-add {
    margin: 4px 0 16px;
}

.rm-city-add .rm-empty-action {
    width: 100%;
}

.rm-guest-hint {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--text-rgb), .24);
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    border-color: transparent;
    background: rgba(var(--text-rgb), .06);
}

.rm-guest-hint a {
    color: var(--emphasis-light);
}

.rm-verified-badge {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--status-ok);
}

.rm-verified-badge .icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.4;
}

.rm-verified-badge--compact .icon {
    width: 16px;
    height: 16px;
}

.rm-notif-card {
    display: block;
    padding: 18px;
    margin-bottom: 14px;
    border-inline-start: 3px solid var(--emphasis-light);
    color: inherit;
    text-decoration: none;
}

.rm-notif-card--approved,
.rm-notif-card--contact {
    border-inline-start-color: var(--status-ok);
}

.rm-notif-card--rejected {
    border-inline-start-color: var(--status-bad);
}

.rm-notif-layout {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

/* The same plate and 3D icon as a profile menu row (owner, 2026-10-10). */
.rm-notif-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border: 0;
    background: var(--i3-tile-bg);
    box-shadow: var(--i3-tile-shadow);
}

.rm-notif-icon .i3d {
    width: 34px;
    height: 34px;
}

.rm-notif-icon .icon {
    width: 18px;
    height: 18px;
    filter: var(--i3-emboss);
}

.rm-notif-icon--approved,
.rm-notif-icon--contact {
    color: var(--status-ok);
}

.rm-notif-icon--rejected {
    color: var(--status-bad);
}

.rm-notif-icon--default {
    color: var(--emphasis-light);
}

.rm-notif-body {
    min-width: 0;
    flex: 1;
}

.rm-notif-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.rm-notif-message {
    margin-top: 7px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.rm-notif-new {
    font-size: var(--text-2xs);
    font-weight: 600;
}

.rm-notif-time {
    margin-top: 4px;
    font-size: var(--text-2xs);
    color: var(--muted);
}

.rm-notif-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0;
}

.rm-notif-read-all {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    /* Служебное действие — плашка, не заливка: залитой на экране нет. */
    background: rgba(var(--text-rgb), .07);
}

.ui-button:active {
    transform: scale(.985);
}

.ui-button:disabled {
    cursor: not-allowed;
}

.ui-input,
.ui-textarea,
.ui-select {
    font-family: inherit;
    padding: 13px 16px;
    font-size: var(--text-sm);
    transition:
        border-color var(--transition-base),
        background var(--transition-base),
        box-shadow var(--transition-base);
    box-sizing: border-box;
    max-width: 100%;
}

.ui-input:not([type="checkbox"]):not([type="radio"]),
.ui-textarea,
.ui-select {
    width: 100%;
}

.ui-input:not([type="checkbox"]):not([type="radio"]),
.ui-select {
    min-height: var(--control-h);
}

.ui-textarea {
    min-height: 96px;
}

.ui-input:focus-visible,
.ui-textarea:focus-visible,
.ui-select:focus-visible {
    outline: none;
}

.ui-button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.ui-status {
    min-height: 18px;
    overflow-wrap: anywhere;
}

.rm-session-form {
    margin: 0;
}

.rm-session-revoke-btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--text-2xs);
}

.rm-session-ip {
    margin-top: 4px;
}

.rm-sessions-revoke-all {
    margin-top: 14px;
}

.rm-sessions-revoke-all-btn {
    width: 100%;
    min-height: 42px;
}

.rm-me-avatar {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(var(--text-rgb), .07);
    border: 0;
    overflow: hidden;
}
.rm-me-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rm-me-avatar--upload {
    cursor: pointer;
    width: 72px;
    height: 72px;
}

/* The completeness ring (plan item 247(9)): a thin arc around the photo,
   drawn as far as the profile is filled; nothing written next to it. */
.rm-me-avatar-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 84px;
    block-size: 84px;
}

.rm-me-ring {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.rm-me-ring circle {
    fill: none;
    stroke-width: 5;
}

.rm-me-ring-track {
    stroke: rgba(var(--text-rgb), .12);
}

.rm-me-ring-fill {
    stroke: var(--primary);
    stroke-linecap: round;
    transition: stroke-dasharray var(--transition-base);
}

.rm-me-ring[data-completeness="0"] .rm-me-ring-fill {
    display: none;
}
.chat-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.rm-group-create {
    display: grid;
    gap: var(--space-4) !important;
    margin-bottom: 12px;
    padding: 18px 20px !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
}
.rm-group-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.rm-group-invite-actions form {
    flex: 1 1 190px;
}
.rm-group-invite-actions .ui-button {
    width: 100%;
}
.rm-group-invite-ready {
    display: grid;
    gap: var(--space-3);
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.rm-group-invite-ready[hidden] {
    display: none;
}

.card.rm-group-danger-zone {
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: color-mix(in srgb, var(--danger) 6%, var(--card));
}
.rm-group-avatar-preview {
    width: 82px !important;
    height: 82px !important;
    border: 1px solid var(--line);
    border-radius: 50% !important;
    overflow: hidden;
    background: var(--surface);
}
.rm-group-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rm-group-members {
    display: grid;
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: var(--radius-sm);
}
.rm-group-member {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px !important;
    padding: 8px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
/* A managed row is a plain list row inside .rm-group-members' frame. */
.rm-group-member--managed {
    justify-content: space-between;
    align-items: flex-start;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.rm-group-member-copy {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.rm-group-member-copy strong {
    overflow-wrap: anywhere;
}
.rm-group-member-meta,
.rm-group-section-head,
.rm-group-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.rm-group-section-head {
    justify-content: space-between;
}
.rm-group-role,
.rm-group-you,
.rm-group-count {
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    background: var(--surface);
    font-size: var(--text-xs);
    font-weight: 400;
}
.rm-group-role--owner {
    color: var(--accent);
}
.rm-group-role--admin {
    color: var(--success);
}
.rm-group-actions {
    justify-content: flex-end;
    max-width: 52%;
}
.rm-group-action {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
/* The group's photos, videos and files (group_media.rs). */
.rm-group-media-tabs {
    display: flex;
    gap: var(--space-2);
    margin: 0 0 12px;
}
.rm-group-media-tabs a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}
.rm-group-media-tabs a[aria-current="page"] {
    border-color: var(--accent);
    color: var(--accent);
}
.rm-group-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 4px;
    margin-bottom: 12px;
}
.rm-group-media-tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.rm-group-media-tile img,
.rm-group-media-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rm-group-media-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, .18);
}
.rm-group-media-play .icon {
    width: 28px;
    height: 28px;
}
.rm-group-files {
    display: grid;
    gap: 2px;
    padding: 8px !important;
}
.rm-group-file {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
}
.rm-group-file:hover {
    background: var(--surface);
}
.rm-group-file-icon {
    flex: 0 0 auto;
    color: var(--accent);
}
.rm-group-file-copy {
    display: grid;
    min-width: 0;
}
.rm-group-file-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.rm-group-file-copy small {
    color: var(--muted);
    font-size: var(--text-xs);
}
.rm-group-media-more {
    width: 100%;
    margin-bottom: 12px;
}
/* Adding people would pass the member cap. */
.rm-group-notice {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    color: var(--danger);
    background: var(--danger-soft);
    font-size: var(--text-sm);
}
/* «About the group»: description, then label/value rows. */
.rm-group-about-description {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.rm-group-facts {
    display: grid;
    grid-template-columns: minmax(88px, 38%) minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    margin: 0;
    font-size: var(--text-sm);
}
.rm-group-facts dt {
    color: var(--muted);
}
.rm-group-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}
.rm-group-roles summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}
.rm-group-roles[open] summary {
    margin-bottom: var(--space-2);
}
/* Card titles read like the settings cards; field labels stay small. */
.rm-group-create > .rm-profile-field-label,
.rm-group-section-head > .rm-profile-field-label {
    margin: 0;
    font-size: var(--text-base) !important;
    font-weight: 600;
    letter-spacing: 0 !important;
}
.rm-group-create .card-meta {
    margin: 0;
}
label.rm-profile-field-label {
    display: block;
}
/* A field and its button on one row: slow mode, member search, mute. */
.rm-group-inline-form,
.rm-group-mute-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
}
.rm-group-inline-form .ui-input,
.rm-group-mute-form .ui-input {
    width: 100%;
    min-width: 0;
}
.rm-group-mute-form .ui-input {
    min-height: 40px;
    font-size: var(--text-sm);
}
.rm-group-search-reset {
    justify-self: start;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
}
.rm-group-member-search {
    display: grid;
    gap: var(--space-2);
}
[data-group-avatar-form].is-busy .rm-listing-photo-pick {
    opacity: .6;
    pointer-events: none;
}
/* A member's initial in a round badge, like the chat list's avatars. */
.rm-group-member-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
    font-weight: 600;
    line-height: 1;
}
.rm-group-member--managed > .rm-group-member-copy {
    flex: 1 1 0;
}
/* «Manage» at the row's end; opened, its actions take the full width. */
.rm-group-member--managed {
    flex-wrap: wrap;
    align-items: center;
}
.rm-group-member-manage {
    margin-inline-start: auto;
}
.rm-group-member-manage[open] {
    display: grid;
    flex-basis: 100%;
    gap: var(--space-2);
}
.rm-group-member-manage > summary {
    justify-self: end;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(var(--text-rgb), .07);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.rm-group-member-manage > summary::-webkit-details-marker {
    display: none;
}
.rm-group-member-manage > summary::after {
    content: " ▾";
}
.rm-group-member-manage[open] > summary::after {
    content: " ▴";
}
.rm-group-member-manage > .rm-group-actions {
    max-width: none;
    justify-content: flex-start;
}
/* The group photo sits over its initial; no photo — the initial shows. */
.rm-group-avatar-preview {
    position: relative;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 14%, var(--card));
}
.rm-group-avatar-initial {
    color: var(--accent);
    font-size: 1.9rem;
    font-weight: 600;
}
.rm-group-avatar-preview img {
    position: absolute;
    inset: 0;
}
.rm-group-invited-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.rm-group-invited-list li {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}
.rm-group-empty {
    margin: 0;
    padding: var(--space-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-align: center;
}
/* The invite link's page: the group as a centred card. */
.rm-group-invite-card {
    justify-items: center;
    text-align: center;
}
.rm-group-invite-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    font-size: 1.6rem;
}
.rm-group-invite-name {
    margin: 0;
    font-size: var(--text-lg);
    overflow-wrap: anywhere;
}
.rm-group-invite-card > .ui-button {
    justify-self: stretch;
}
/* «Join» and «Decline» on the invitation page, side by side. */
.rm-group-invitation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.rm-group-invitation-actions form {
    flex: 1 1 140px;
}
.rm-group-invitation-actions .ui-button {
    width: 100%;
}
@media (max-width: 560px) {
    /* Two equal columns; the mute row and the danger action take the full width. */
    .rm-group-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
    .rm-group-actions > form,
    .rm-group-actions .rm-group-action {
        width: 100%;
    }
    .rm-group-actions > .rm-group-mute-form,
    .rm-group-actions > form:has(.rm-group-action--danger),
    .rm-group-actions > form:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.rm-me-name-wrap {
    min-width: 0;
}

.rm-me-name {
    font-size: var(--text-xl);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.rm-account-id-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.rm-account-id-copy-btn .icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rm-account-id-copy-btn.is-copied {
    color: var(--success);
}

.rm-me-logout-form {
    margin-bottom: 20px;
}

.rm-me-logout-btn {
    width: 100%;
    min-height: 44px;
}

.rm-danger-zone {
    padding: 14px 16px;
}

/* Profile: photo, name, profession and status edited in place. */
.rm-me-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 14px;
    padding: 18px;
}
.rm-me-head .rm-me-name {
    margin: 2px 0 4px;
}
.rm-me-name-wrap {
    flex: 1;
}
.rm-me-inline {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 6px;
    margin-inline-start: -6px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.4;
    resize: none;
    overflow: hidden;
}
.rm-me-inline--profession {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
}
/* The name is the heading itself, edited in place (plan item 171). */
.rm-me-head .rm-me-name {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rm-me-inline--name {
    flex: 1;
    min-width: 0;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.2;
}
.rm-me-inline::placeholder {
    font-weight: 500;
    color: var(--muted);
    opacity: 1;
}
/* Пустое поле — мягкая плашка с «+»: «Профессия» и «Статус не указан»
   читаются как место для ввода, а не как значения (раньше — пунктир, похоже
   на незаполненную форму). Отступы те же, что у заполненного, чтобы строка
   не прыгала при вводе. */
.rm-me-inline:placeholder-shown {
    margin-block: 2px;
    background: rgba(var(--text-rgb), .05);
}
.rm-me-inline:placeholder-shown::placeholder {
    font-weight: 600;
}
.rm-me-inline:hover {
    border-color: var(--line);
}
.rm-me-inline:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}
/* The header's name line (owner, 2026-10-10): the name and the trust
   mark beside it; the mark opens what is proven in a panel over the
   page, so opening it moves nothing. */
.rm-me-name-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.rm-me-name-row .rm-me-name {
    flex: 1 1 9em;
    min-width: 0;
}
.rm-trust-badge {
    flex: 0 0 auto;
}
.rm-trust-badge-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    margin: -10px;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
}
.rm-trust-badge-mark::-webkit-details-marker {
    display: none;
}
.rm-trust-badge.is-verified .rm-trust-badge-mark {
    color: var(--status-ok);
}
.rm-trust-badge-mark .icon {
    inline-size: 22px;
    block-size: 22px;
    stroke-width: 2.4;
}
.rm-trust-pop {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 5;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.rm-trust-pop-title {
    display: block;
    font-size: var(--text-sm);
}
.rm-trust-pop .rm-trust-steps {
    margin-top: var(--space-2);
}

/* The offer of a company page to those who had «It's a company» ticked
   (owner, 2026-10-10). */
.rm-company-offer {
    display: grid;
    gap: var(--space-2);
    margin-bottom: 14px;
    padding: 14px 16px;
}
.rm-company-offer .card-meta {
    margin: 0;
}
.rm-company-offer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.rm-company-offer-actions form {
    margin: 0;
}

/* «Available / Not available» (owner, 2026-10-10): a pill switch under the
   about line and a dot on the photo's edge while it is on. Both states
   keep the same size — switching moves nothing. */
.rm-me-presence {
    position: absolute;
    inset-block-end: 6px;
    inset-inline-end: 6px;
    inline-size: 18px;
    block-size: 18px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: rgba(var(--text-rgb), .35);
    pointer-events: none;
}
.rm-me-presence.is-on {
    background: var(--status-ok);
}
.rm-presence-form {
    margin: var(--space-2) 0 0;
}
.rm-presence-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 36px;
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.rm-presence-dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: rgba(var(--text-rgb), .35);
}
.rm-presence-toggle.is-on {
    border-color: var(--status-ok);
}
.rm-presence-toggle.is-on .rm-presence-dot {
    background: var(--status-ok);
}
.rm-me-save-status {
    min-height: 18px;
    color: var(--muted);
    font-size: var(--text-xs);
}
.rm-me-guest {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding: 28px 18px;
}
.rm-me-guest-login {
    min-width: 180px;
}
.rm-profile-list {
    padding: 4px 16px;
}
a.rm-profile-row,
button.rm-profile-row {
    text-decoration: none;
    font: inherit;
}
.rm-profile-row-arrow {
    display: inline-flex;
}
.rm-profile-row-arrow .icon {
    width: 16px;
    height: 16px;
}
html[dir="rtl"] .rm-profile-row-arrow .icon {
    transform: scaleX(-1);
}
.rm-command-badge {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    /* white on the dark theme's --danger (#fb7185) is 2.7:1; --on-danger is
       near-black there and white in the light theme. */
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--badge-bg);
    color: var(--badge-text);
}
.rm-settings-card + .rm-profile-block {
    margin-top: 12px;
}

/* Shared row style for a collapsible <summary> that should look like any
   other navigation row (e.g. "Официальная группа") — plain card-title
   weight/size, chevron on the right, no native browser triangle marker. */
.rm-profile-row-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.rm-profile-row-summary::-webkit-details-marker {
    display: none;
}

.rm-profile-row-summary::marker {
    content: "";
}

details[open] > .rm-profile-row-summary .card-arrow {
    transform: rotate(90deg);
}

.rm-danger-zone-summary {
    color: var(--danger);
}

/* A collapsible settings block is a card too, but `.card` is a flex row:
   since Chrome 131 <details> honours display:flex and lays the summary and
   the opened body out side by side. Stack them. */
details.card {
    display: block;
}

.rm-danger-zone-body {
    margin-top: 12px;
}

.rm-danger-zone-form {
    margin-top: 10px;
    display: grid;
    gap: var(--space-2);
}

/* Settings → notifications: a tick with its label on one line, the two
   clock fields side by side under "quiet hours". */
.rm-notify-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-size: var(--text-sm);
}
.rm-notify-check input {
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 auto;
    accent-color: var(--text);
}

/* «Мой профиль» → «Говорю на» (plan item 162): a tile and a heading, then
   one row of language chips that scrolls sideways (flex follows the page
   direction, so RTL starts from the right). The tick sits in a fixed
   circle on every chip, so ticking changes colour, never width. */
/* A tap on a chip or a link is not a press of the whole card. */
.rm-languages:active,
.rm-documents:active {
    transform: none;
}
.rm-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    --tile-size: 48px;
}
.rm-card-head-copy {
    min-inline-size: 0;
}
.rm-card-head-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.3;
}
.rm-card-head-copy .card-meta {
    margin: 2px 0 0;
}
.rm-languages-submit[hidden] {
    display: none;
}
.rm-languages-form {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.rm-lang-chips {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    padding: 4px;
    margin: -4px;
}
/* The listing form's languages (п. 185): a plain field, not a framed box;
   min-width 0 — a fieldset is as wide as its content by default, and the
   row of 32 chips would push the whole page sideways. */
/* The price fields of the listing form (plan item 182): two amounts and
   the currency on one row, unit and «Negotiable» on the next; they wrap
   on a narrow phone. */
.rm-listing-price {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rm-listing-price > legend {
    padding: 0;
    margin-block-end: var(--space-2);
}

.rm-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
}

.rm-price-row + .rm-price-row {
    margin-block-start: var(--space-2);
}

.rm-price-part {
    display: flex;
    flex: 1 1 6.5rem;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rm-price-part--currency {
    flex: 0 1 6.5rem;
}

.rm-price-part--unit {
    flex: 1 1 9rem;
}

.rm-price-sub {
    font-size: var(--text-xs);
    color: var(--muted);
}

/* «Negotiable» sits beside the unit and takes the rest of the row; on a
   narrow phone it gets a row of its own (plan item 244г). */
.rm-price-negotiable {
    flex: 1 1 8rem;
    align-self: flex-end;
    min-height: 44px;
    align-items: center;
}

.rm-price-note {
    margin: var(--space-2) 0 0;
}

.rm-listing-languages {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rm-listing-languages > legend {
    padding: 0;
    margin-block-end: var(--space-2);
}

/* In the listing form the chips wrap (plan item 244г): a row scrolling
   sideways hid «Русский» behind the edge with nothing to say so. */
.rm-listing-languages .rm-lang-chips {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
}
/* Plan item 363: the other site languages fold under one line. */
.rm-lang-more {
    flex-basis: 100%;
}
.rm-lang-more > summary {
    cursor: pointer;
    min-block-size: 36px;
    display: flex;
    align-items: center;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 600;
}
.rm-lang-more-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block-start: var(--space-2);
}

.rm-lang-chips::-webkit-scrollbar {
    display: none;
}
.rm-lang-chip {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.rm-lang-chip input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.rm-lang-chip-face {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding-block: 0;
    padding-inline: 10px 16px;
    border: 1px solid rgba(var(--text-rgb), .3);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
/* A tick box, not a radio circle (owner, 2026-10-08): several languages
   are chosen at once and each tick saves on its own. */
.rm-lang-chip-check {
    display: inline-grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 auto;
    border: 1.5px solid rgba(var(--text-rgb), .5);
    border-radius: 5px;
}

.rm-languages-status {
    margin-inline-start: 4px;
}
/* Plan item 252: the name in the interface language after the endonym. */
.rm-lang-chip-sub {
    font-weight: 400;
}

.rm-languages-status:empty {
    display: none;
}
.rm-lang-chip-check .icon {
    inline-size: 14px;
    block-size: 14px;
    stroke-width: 3;
    opacity: 0;
}
.rm-lang-chip input:checked + .rm-lang-chip-face {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}
.rm-lang-chip input:checked + .rm-lang-chip-face .rm-lang-chip-check {
    border-color: var(--on-primary);
    background: var(--on-primary);
    color: var(--primary);
}
.rm-lang-chip input:checked + .rm-lang-chip-face .rm-lang-chip-check .icon {
    opacity: 1;
}
.rm-lang-chip input:focus-visible + .rm-lang-chip-face {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.rm-lang-chip input:disabled {
    cursor: not-allowed;
}
.rm-lang-chip input:disabled + .rm-lang-chip-face {
    opacity: .5;
}

/* «Подтверждение личности»: a step per line — a mark (filled when done),
   the text with its detail, and what to do next on the inline end. */
.rm-trust-steps {
    display: grid;
    gap: 0;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}
.rm-trust-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 52px;
    padding-block: 6px;
    border-top: 1px solid var(--line);
}
.rm-trust-step:first-child {
    border-top: 0;
}
.rm-trust-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    flex: 0 0 auto;
    border: 1.5px solid rgba(var(--text-rgb), .5);
    border-radius: 50%;
}
.rm-trust-step.is-done .rm-trust-mark {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}
.rm-trust-mark .icon {
    inline-size: 15px;
    block-size: 15px;
    stroke-width: 3;
}
.rm-trust-text {
    display: grid;
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}
.rm-trust-text small {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-trust-action {
    flex: 0 0 auto;
    min-block-size: 44px;
}

/* «Документы о работе» (plan item 240): a row per document kind — its 3D
   tile, the country's name for it with the file under it, and the actions
   on the inline end; on a narrow screen the actions wrap under the text.
   The file input hides inside its button label (the label is the button). */
.rm-doc-list {
    display: grid;
    gap: 0;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}
.rm-doc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-block-size: 64px;
    padding-block: 10px;
    border-top: 1px solid var(--line);
    --tile-size: 44px;
}
.rm-doc-row:first-child {
    border-top: 0;
}
.rm-doc-text {
    display: grid;
    flex: 1 1 140px;
    min-inline-size: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}
.rm-doc-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-doc-text small {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-doc-row:not(.is-set) .rm-doc-tile {
    opacity: .7;
}
.rm-doc-title-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
}
.rm-doc-remove {
    min-width: 44px;
    padding-inline: 10px;
}
.rm-doc-remove .icon {
    width: 16px;
    height: 16px;
}
.rm-doc-actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-inline-start: auto;
}
.rm-doc-action {
    min-block-size: 40px;
    padding-inline: 12px;
    font-size: var(--text-xs);
}
.rm-doc-delete,
.rm-doc-upload {
    display: contents;
}
.rm-doc-pick {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.rm-doc-pick input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
/* The button class sets display, so the `hidden` the script puts on the
   «Send» button needs this to win. */
.rm-doc-send[hidden] {
    display: none;
}
.rm-doc-upload.is-sending .rm-doc-pick {
    opacity: .6;
    pointer-events: none;
}
.rm-doc-status {
    margin: var(--space-2) 0 0;
    color: var(--primary);
}
/* The public profile: each document is one link row with its tile. */
.rm-doc-list--public .rm-doc-row {
    display: block;
    padding-block: 0;
}
.rm-doc-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 64px;
    padding-block: 8px;
    color: inherit;
    text-decoration: none;
    --tile-size: 44px;
}
.rm-doc-link .icon {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
    color: var(--muted);
}
[dir="rtl"] .rm-doc-link .icon {
    transform: scaleX(-1);
}
.rm-doc-locked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    --tile-size: 36px;
}
.rm-doc-locked .card-meta {
    flex: 1 1 100%;
    margin: var(--space-2) 0 0;
}

/* One canonical gap between every top-level block on the profile page
   (account card, invite, sessions, password, stats, danger zone, …) —
   they used to mix 12/14/18/20/24px, and a couple had no bottom margin
   at all so the next block touched them with zero gap. */
.rm-profile-block {
    margin-bottom: 20px;
}

.rm-profile-field {
    display: block;
}

.rm-profile-field--spaced {
    margin-top: 15px;
}

.rm-profile-field-label {
    margin-bottom: 7px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.rm-public-section {
    display: block;
    padding: 20px;
    margin-bottom: 18px;
}

.rm-public-section--intent {
    border: 1px solid rgba(var(--text-rgb), .24);
}

.rm-public-kicker {
    font-size: var(--text-2xs);
    color: var(--muted);
    font-weight: 400;
    margin-bottom: 8px;
}

.rm-public-chat-link {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 0;
    background: var(--gold-fill);
    color: var(--on-gold-fill);
    text-decoration: none;
    font-weight: 700;
}

.rm-public-profile-card {
    display: block;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid rgba(var(--text-rgb), .22);
}

.rm-public-profile-card .rm-back-link {
    margin-bottom: 14px;
}

/* «Написать» и «Поделиться» — один ряд в карточке профиля, одной ширины. */
.rm-public-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.rm-public-actions > * {
    flex: 1 1 0;
    min-width: 0;
}

.rm-public-profile-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rm-public-name {
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rm-public-name .rm-verified-badge {
    margin-inline-start: 6px;
    vertical-align: -2px;
}

/* One's own public page: one quiet line above the card. */
.rm-public-owner-note {
    margin: 0 4px 10px;
    color: var(--muted);
    font-size: var(--text-sm);
}

/* The trade under the name on a public profile. */
.rm-public-trade {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-base);
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* A public profile without a photo: initials on the person's tone, as in
   the chat list (item 374). */
.rm-public-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.rm-public-avatar--initials {
    --tone-1: var(--tone-slate-1);
    --tone-2: var(--tone-slate-2);
    background: linear-gradient(180deg, var(--tone-1), var(--tone-2));
    color: var(--text);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .02em;
}
.rm-public-avatar[data-tone="amber"] { --tone-1: var(--tone-amber-1); --tone-2: var(--tone-amber-2); }
.rm-public-avatar[data-tone="blue"] { --tone-1: var(--tone-blue-1); --tone-2: var(--tone-blue-2); }
.rm-public-avatar[data-tone="teal"] { --tone-1: var(--tone-teal-1); --tone-2: var(--tone-teal-2); }
.rm-public-avatar[data-tone="green"] { --tone-1: var(--tone-green-1); --tone-2: var(--tone-green-2); }
.rm-public-avatar[data-tone="coral"] { --tone-1: var(--tone-coral-1); --tone-2: var(--tone-coral-2); }
.rm-public-avatar[data-tone="violet"] { --tone-1: var(--tone-violet-1); --tone-2: var(--tone-violet-2); }

.rm-public-resource-meta {
    margin-top: 5px;
}

.rm-public-intent-body {
    font-size: var(--text-base);
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.rm-mod-nav {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.rm-mod-chip {
    padding: 9px 12px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .14);
}

.rm-mod-chip--reports-alert {
    border-color: rgba(220, 38, 38, .38);
    background: rgba(220, 38, 38, .08);
    font-weight: 600;
}

.rm-mod-card {
    border: 1px solid rgba(var(--text-rgb), .22);
    padding: 18px;
    margin-bottom: 16px;
}

.rm-mod-card--resource {
    margin: 0 0 16px;
    box-shadow: var(--shadow-md);
}

.rm-mod-card-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: flex-start;
}

.rm-mod-card-head--resource {
    gap: 14px;
}

.rm-mod-card-kicker {
    font-size: var(--text-2xs);
    color: var(--muted);
    margin-bottom: 6px;
}

.rm-mod-card-title {
    margin: 0 0 6px;
    font-size: var(--text-xl);
}

.rm-mod-card-title--resource {
    margin: 0 0 8px;
}

.rm-mod-card-category {
    color: var(--muted);
    font-size: var(--text-xs);
}

.rm-mod-card-desc {
    color: var(--muted);
    line-height: 1.5;
    max-width: 620px;
}

.rm-mod-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--text-xs);
}

.rm-mod-badges--resource {
    gap: var(--space-3);
    margin-top: 14px;
}

.rm-mod-photo {
    max-width: 360px;
    margin-top: 14px;
    border-radius: var(--radius-sm);
}

.rm-mod-badge--pending {
    color: var(--warning);
    font-weight: 600;
}

.rm-mod-badge--ok {
    color: var(--status-ok);
    font-weight: 600;
}

.rm-mod-badge--bad {
    color: var(--status-bad);
    font-weight: 600;
}

.rm-mod-badge--active {
    color: var(--status-ok);
}

.rm-mod-badge--hidden {
    color: var(--status-bad);
}

.rm-mod-rating {
    font-weight: 600;
    white-space: nowrap;
}

.rm-mod-reason {
    margin-top: 16px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: rgba(217, 119, 6, .07);
    border: 1px solid rgba(217, 119, 6, .20);
    line-height: 1.5;
}

.rm-mod-rejection {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(220, 38, 38, .22);
    background: rgba(220, 38, 38, .07);
    color: var(--status-bad);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.rm-mod-meta {
    margin-top: 10px;
    font-size: var(--text-2xs);
    color: var(--muted);
}

.rm-mod-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.rm-mod-actions--bulk {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2);
}

.rm-mod-btn {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.rm-mod-btn--ok {
    border: 1px solid rgba(22, 163, 74, .35);
    border-color: transparent;
    background: color-mix(in srgb, var(--status-ok) 14%, transparent);
    color: var(--status-ok);
}

.rm-mod-btn--warn {
    border: 1px solid rgba(217, 119, 6, .35);
    border-color: transparent;
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
}

.rm-mod-btn--danger {
    border: 1px solid rgba(220, 38, 38, .30);
}

.rm-mod-btn--danger-strong {
    border: 1px solid rgba(220, 38, 38, .40);
}

.rm-mod-btn--gold {
    border: 1px solid rgba(var(--text-rgb), .42);
    border-color: transparent;
    background: var(--primary);
    color: var(--on-primary);
}

.rm-mod-btn--neutral {
    border: 1px solid rgba(220, 38, 38, .28);
}

.rm-mod-link {
    min-height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
}

.rm-mod-search {
    display: flex;
    gap: var(--space-2);
    margin-bottom: 16px;
}

.rm-mod-search-input {
    flex: 1;
    min-width: 0;
    padding: 13px 14px;
    font-size: var(--text-sm);
    font-family: inherit;
}

.rm-mod-search-btn {
    min-width: 92px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--text-rgb), .35);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.rm-mod-reject-form {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

.rm-mod-reject-input {
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 13px;
    font-size: var(--text-sm);
    font-family: inherit;
}

.rm-mod-reject-btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(220, 38, 38, .38);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.rm-mod-bulk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.rm-mod-bulk-note {
    font-size: var(--text-xs);
    color: var(--muted);
}

.rm-mod-result.card {
    display: block;
    padding: 20px;
}

.rm-mod-result-meta {
    margin-top: 8px;
}

.rm-pwa-install-btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 14px;
    white-space: nowrap;
}

.rm-pwa-hint {
    margin-top: 5px;
    line-height: 1.45;
    font-size: var(--text-xs);
}

.rm-pwa-prompt {
    position: fixed;
    z-index: 1200;
    inset-inline: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    width: auto;
    max-width: 460px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid rgba(var(--text-rgb), .28);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.rm-pwa-prompt[hidden] {
    display: none;
}

.rm-pwa-prompt-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.rm-pwa-prompt-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.rm-pwa-prompt-copy {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--space-1);
}

.rm-pwa-prompt-title {
    font-size: var(--text-sm);
    line-height: 1.25;
}

.rm-pwa-prompt-description {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.rm-pwa-prompt-close {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--muted);
    font: inherit;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    place-items: center;
}

.rm-pwa-prompt-close:hover,
.rm-pwa-prompt-close:focus-visible {
    color: var(--text);
    background: rgba(var(--text-rgb), .08);
}

.rm-pwa-prompt-action {
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
}

@media (prefers-reduced-motion: no-preference) {
    .rm-pwa-prompt:not([hidden]) {
        animation: rm-pwa-prompt-in 180ms ease-out;
    }
}

@keyframes rm-pwa-prompt-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rm-settings-card {
    display: block;
    padding: 20px;
}

.rm-settings-title {
    margin-bottom: 12px;
}

.rm-menu-list {
    display: grid;
    gap: 0;
}

/* A form row (Settings switches that post) lays out like its siblings. */
.rm-menu-form {
    display: contents;
}

.rm-menu-row,
.rm-settings-toggle-btn {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: 10px 4px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.rm-menu-row:last-child {
    border-bottom: 0;
}

.rm-menu-row-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-xs);
    background: rgba(var(--text-rgb), .07);
    color: var(--text);
    flex: 0 0 36px;
}

.rm-menu-row-icon .icon {
    width: 18px;
    height: 18px;
}

/* Лёгкий объём (п. 108): плоские иконки в плашках меню и карточек —
   те же свет и тень, что у 3D-иконок рубрик. */
.rm-menu-row-icon,
.card-icon:not(.card-icon--3d) {
    background: var(--i3-tile-bg);
    box-shadow: var(--i3-tile-shadow);
}

.rm-menu-row-icon .icon,
.card-icon:not(.card-icon--3d) > .icon {
    filter: var(--i3-emboss);
}

/* 3D icons on rows (plan item 113): almost the whole plate of the menu
   row and the place card; the metal is bright enough by itself at night. */
.rm-menu-row-icon .i3d {
    width: 34px;
    height: 34px;
}

.card-icon:not(.card-icon--3d) > .i3d {
    width: 44px;
    height: 44px;
}

:root:not([data-theme="light"]) :is(.rm-menu-row-icon, .card-icon, .admin-row, .rm-notif-icon) > .i3d {
    filter: contrast(1.05);
}

.rm-menu-row.is-off .rm-menu-row-icon .i3d {
    filter: grayscale(1) opacity(.55);
}

.rm-menu-row-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.rm-menu-row-copy strong,
.rm-menu-row-state {
    display: block;
}

.rm-menu-row-copy strong {
    font-size: var(--text-sm);
    font-weight: 600;
}

.rm-menu-row-state {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}

.rm-menu-row-state:empty {
    display: none;
}

/* A profile row's state line stays one line (the «Résumé» row lists what
   is filled; the tail is cut, not wrapped — owner, 2026-10-09). */
.rm-profile-row .rm-menu-row-state {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Пояснение под состоянием (верификация): обычным начертанием, иначе
   абзац в 600 при 12px читался как второй жирный заголовок. */
.rm-menu-row-hint {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
}

.rm-settings-title {
    margin: 4px 0 12px;
    font-size: clamp(22px, 6vw, 28px);
    letter-spacing: -.025em;
}

.rm-settings > .rm-settings-card + .rm-settings-card {
    margin-top: 12px;
}

/* «Check camera and microphone» (settings, media-check.js) */
.rm-media-check-lead {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: var(--text-sm);
}

.rm-media-check-stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    max-height: 52vh;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: rgba(var(--text-rgb), .07);
}

.rm-media-check-stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A mirror, as people expect to see themselves. */
    transform: scaleX(-1);
}

.rm-media-check-placeholder {
    margin: 0;
    padding: 16px;
    color: var(--muted);
    font-size: var(--text-sm);
    text-align: center;
}

.rm-media-check-meter {
    height: 10px;
    margin: 12px 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--text-rgb), .1);
}

.rm-media-check-meter span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 80ms linear;
}

.rm-media-check-devices {
    display: grid;
    gap: 10px;
}

@media (min-width: 640px) {
    .rm-media-check-devices {
        grid-template-columns: 1fr 1fr;
    }
}

.rm-media-check-field {
    display: grid;
    gap: 4px;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.rm-media-check-field select {
    width: 100%;
    min-height: 44px;
}

.rm-media-check-status {
    min-height: 1.4em;
    margin: 12px 0;
    font-size: var(--text-sm);
}

.rm-media-check-actions .ui-button {
    width: 100%;
}

.rm-media-check-actions [hidden],
.rm-media-check-help[hidden] {
    display: none;
}

.rm-media-check-help h2 {
    margin: 0 0 6px;
    font-size: var(--text-lg, 18px);
}

.rm-media-check-help p {
    margin: 0;
    font-size: var(--text-sm);
}

.rm-media-check-how {
    margin-top: 14px;
}

.rm-media-check-how h3 {
    margin: 0 0 4px;
    font-size: var(--text-sm);
}

.rm-theme-row {
    border-bottom: 0;
    cursor: default;
}

.rm-theme-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    padding: 4px;
    margin: 0 0 10px;
    border: 1px solid var(--line);
    border-color: transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}

.rm-theme-option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 54px;
    padding: 6px 4px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
}

/* Кружок-образец режима: бумага/чернила — «Авто», бумага — «День»,
   чернила — «Ночь» (цвета --bg палитры). */
.rm-theme-option::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(var(--text-rgb), .35);
    background: var(--text);
}

.rm-theme-option[data-theme-choice="system"]::before {
    background: linear-gradient(135deg, #f5f4f2 50%, #0e0d0c 50%);
}

.rm-theme-option[data-theme-choice="light"]::before {
    background: #f5f4f2;
}

.rm-theme-option[data-theme-choice="dark"]::before {
    background: #0e0d0c;
}

.rm-theme-option[aria-checked="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.rm-install-row {
    cursor: default;
}

.rm-install-row[hidden] {
    display: none;
}

.rm-menu-row.is-off .rm-menu-row-icon {
    background: rgba(var(--text-rgb), .05);
    color: var(--muted);
}

.rm-settings-toggle-btn.is-off {
    color: var(--muted);
}

/* Тумблер справа у переключателей настроек: включён — заливка --primary,
   выключен — серая дорожка. Состояние — класс .is-off (ставят
   menu-settings.js и push-subscribe.js). */
.rm-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    margin-inline-start: auto;
    border-radius: var(--radius-pill);
    background: var(--primary);
    transition: background-color var(--transition-fast);
}

.rm-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 21px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: inset-inline-start var(--transition-fast);
}

.rm-settings-toggle-btn.is-off .rm-switch {
    background: rgba(var(--text-rgb), .18);
}

.rm-settings-toggle-btn.is-off .rm-switch::after {
    inset-inline-start: 3px;
}

.rm-settings-toggle-btn:disabled .rm-switch {
    opacity: .5;
}

/* Выключенный переключатель: серые иконка и состояние, но не заголовок —
   иначе строка выглядит недоступной. */
.rm-settings-toggle-btn.is-off .rm-menu-row-copy strong {
    color: var(--text);
}

/* «Language» is one more settings row (owner, 2026-10-10), first in the
   «App» group: the same icon plate, a divider before the rows under it. */
.rm-lang-summary {
    border-bottom: 1px solid var(--line);
}

.rm-lang-summary-row {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 4px;
    cursor: pointer;
    list-style: none;
    font-size: var(--text-sm);
    font-weight: 600;
}

.rm-lang-summary-label {
    flex: 1;
    min-width: 0;
}
.rm-lang-summary-row::-webkit-details-marker {
    display: none;
}

.rm-lang-summary-value {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}
.rm-lang-summary-value .icon {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}
.rm-lang-summary[open] .rm-lang-summary-value .icon {
    transform: rotate(90deg);
}

.rm-lang-summary .rm-lang-picker {
    margin-top: 0;
    border-top: 0;
}

.rm-lang-picker {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(var(--text-rgb), .18);
}

.rm-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

@media (min-width: 560px) {
    .rm-lang-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.rm-lang-btn {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.rm-lang-btn:hover {
    transform: none;
    border-color: var(--line-strong);
}

.rm-lang-btn:active {
    transform: translateY(0);
}

.rm-lang-btn span {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.25;
}

.rm-lang-btn small {
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.rm-lang-btn.is-selected,
.rm-lang-btn[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--emphasis-soft);
    box-shadow: none;
}

html[dir="rtl"] .rm-lang-btn {
    align-items: flex-end;
}

.hero.chat-header-premium {
    overflow: visible;
}

.nav-item .nav-badge {
    animation: rm-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes rm-badge-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(232, 92, 92, .35);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(232, 92, 92, 0);
    }
}

.rm-search-intent-box {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--text-rgb), .20);
    font-size: var(--text-xs);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.rm-presence-badge {
    font-size: var(--text-2xs);
    font-weight: 700;
}

.rm-presence-badge--online {
    color: var(--success);
}

/* The one page-wide reduced-motion rule: every animation and transition
   off (chat-v2.css and the other screen sheets add none of their own). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Значки в строке заголовка: галочка «проверен» и «продвижение» сразу
   после названия, по центру строки. */
.rm-hero-title-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
    margin-inline-start: 4px;
}

.rm-hero-title-badges .rm-verified-badge .icon {
    width: 22px;
    height: 22px;
}

.rm-resource-rating-summary {
    display: block;
}

/* Автор — одна строка-ссылка: иконка, подпись, стрелка. */
.rm-resource-owner-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.rm-resource-owner-icon {
    flex: 0 0 auto;
}

.rm-resource-owner-content {
    flex: 1 1 160px;
    min-width: 0;
}

.rm-resource-owner-kicker {
    font-size: var(--text-2xs);
    color: var(--muted);
    font-weight: 400;
    margin-bottom: 5px;
}

.rm-resource-owner-meta {
    margin-top: 4px;
}

/* «Welding · confirmed works: 12» (plan item 346) in place of the author's
   generic line on a listing. */
.rm-confirmed-skill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--success, inherit);
}
.rm-confirmed-skill svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* «Поделиться» on the listing page is one menu (plan item 244в): the link
   outward and «Переслать в чат». A <details>, so it needs no script. */
.rm-share-menu {
    position: relative;
}

.rm-share-menu-summary {
    list-style: none;
    cursor: pointer;
}

.rm-share-menu-summary::-webkit-details-marker,
.rm-share-menu-summary::marker {
    display: none;
    content: "";
}

.rm-share-menu-list {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 6px);
    z-index: 5;
    display: grid;
    min-width: 100%;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.rm-share-menu-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.rm-share-menu-item:hover,
.rm-share-menu-item:focus-visible {
    background: var(--card-hover);
}

/* Listing head (plan item 365): «Back» at the start, favorite and share
   as round icon buttons at the end of the same line. */
.rm-resource-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: 20px;
}

.rm-resource-head .rm-back-link {
    margin-bottom: 0;
    min-width: 0;
}

.rm-resource-head-actions {
    display: flex;
    flex: none;
    gap: var(--space-2);
}

.rm-resource-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(var(--text-rgb), .06);
    color: var(--text);
    cursor: pointer;
}

.rm-resource-head-btn:hover,
.rm-resource-head-btn:focus-visible {
    background: rgba(var(--text-rgb), .11);
}

.rm-resource-head-btn .icon {
    width: 20px;
    height: 20px;
}

.rm-resource-favorite-btn[aria-pressed="true"] {
    color: var(--primary);
}

.rm-resource-favorite-btn[aria-pressed="true"] .icon {
    fill: currentColor;
}

.rm-resource-head-status {
    font-size: var(--text-xs);
    color: var(--muted);
}

.rm-resource-head-status:empty {
    display: none;
}

.rm-resource-feedback {
    margin-bottom: 16px;
}

.rm-resource-report-inline {
    margin-top: 18px;
}

.rm-resource-report-label {
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: 8px;
}

.rm-report-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rm-report-chip {
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--text-rgb), .24);
    font-size: var(--text-xs);
}

.rm-resource-report-status {
    margin-top: 9px;
    font-size: var(--text-xs);
    color: var(--muted);
}

.rm-resource-rating-block {
    margin-top: 4px;
}

.rm-resource-rating-kicker {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 400;
    letter-spacing: .05em;
}

.rm-resource-stars {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.rm-resource-star-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--emphasis);
    font-size: var(--text-xl);
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
}

.rm-resource-vote-status {
    margin-top: 7px;
    font-size: var(--text-xs);
    color: var(--muted);
}

.rm-resource-section {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.rm-resource-section--premium {
    border: 1px solid rgba(var(--text-rgb), .55);
    background: transparent;
    border-color: rgba(var(--primary-rgb), .45);
}


.rm-resource-section-kicker {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 400;
}

.rm-resource-section-kicker--contacts {
    margin-bottom: 12px;
}

.rm-resource-price {
    margin: 0 0 10px;
    font-size: var(--text-lg);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The price right under the listing's title (plan item 365). */
.hero .rm-resource-price {
    margin: 6px 0 4px;
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -.02em;
}

.rm-resource-description {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 17px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rm-resource-contact-line {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rm-resource-contact-line:last-child {
    margin-bottom: 0;
}

/* «Where»: the place in body text with «On the map» at the row's end. */
.rm-resource-place {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    color: var(--text);
    font-size: var(--text-base);
    font-weight: 600;
}

.rm-resource-place > .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--muted);
}

.rm-resource-place-text {
    flex: 1 1 auto;
    min-width: 0;
}

.rm-resource-map-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -12px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.rm-resource-map-link:hover,
.rm-resource-map-link:focus-visible {
    text-decoration: underline;
}

.rm-resource-contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 10px;
    margin-top: 18px;
}

/* Панель «Написать · На карте» закреплена над нижним меню (sticky не
   работает: у предков страницы overflow). Ширина — как у .page; место под
   неё в конце страницы — .rm-resource-actionbar-spacer. */
.rm-resource-actionbar {
    position: fixed;
    z-index: 15;
    left: 50%; /* stylelint-disable-line csstools/use-logical -- centred with translateX(-50%), direction-neutral */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: min(100% - 20px, 540px);
    transform: translateX(-50%);
    box-sizing: border-box;
    margin-top: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    /* Opaque like the bottom menu: the page scrolls under both. */
    background: var(--surface);
    box-shadow: var(--shadow-md);
    border-color: var(--line);
}

.rm-resource-actionbar-spacer {
    height: 76px;
}

.rm-resource-actionbar-spacer--two-rows {
    height: 132px;
}

.rm-resource-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: 46px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: 600;
    color: var(--text);
}

/* Нечётная последняя кнопка занимает обе колонки — иначе в сетке 2×N
   третья кнопка стоит одна в левой колонке и ряд выглядит рваным. */
.rm-resource-contact-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.rm-resource-contact-btn--gold {
    background: var(--gold-fill);
    border-color: transparent;
    color: var(--on-gold-fill);
}

.rm-resource-id-line {
    margin: 16px 0 0;
    font-size: var(--text-xs);
    color: var(--muted);
    text-align: center;
}

/* «You usually reply within 2 h · to 90% of people» (plan item 323) above
   the author's listings. */
.rm-my-resources-reply {
    margin: 0 0 12px;
}

.rm-my-resource-card {
    display: block;
    margin-bottom: 16px;
    padding: 18px;
}

.rm-my-resource-layout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rm-my-resource-icon {
    flex: 0 0 auto;
}

.rm-my-resource-body {
    flex: 1;
    min-width: 0;
}

.rm-my-resource-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: flex-start;
}

.rm-my-resource-title-wrap {
    min-width: 0;
}

/* Заголовок — ссылка на объявление (кнопки «Открыть» больше нет). */
.rm-my-resource-title {
    display: block;
    font-size: var(--text-lg);
    line-height: 1.25;
    margin-bottom: 4px;
    color: var(--text);
    text-decoration: none;
}

.rm-my-resource-title:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rm-my-resource-category {
    font-size: var(--text-xs);
}

.rm-my-resource-rating {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
}

.rm-my-resource-desc {
    margin-top: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rm-my-resource-badges {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}

/* One row while the labels fit, otherwise each button takes its own row
   (at 360px «Редактировать» did not fit half of the body column):
   «Редактировать» is the main one, «Продвинуть» a plate. */
.rm-my-resource-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.rm-my-resource-action {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 12px;
    text-align: center;
    line-height: 1.25;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text);
}

.rm-my-resource-action--gold {
    border: 1px solid var(--line);
}

.rm-my-resource-action--edit {
    border: 1px solid transparent;
    background: rgba(var(--text-rgb), .07);
}

/* «Продлить» (listing_expiry.rs): a form with one button among the links. */
.rm-my-resource-renew {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.rm-my-resource-action--renew {
    width: 100%;
    border: 1px solid var(--primary);
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* «Закрыть» (finding B.2): a quiet button on its own row under the other
   actions (three in one row overflowed at 390px); on the edit page it
   stands under the form. */
.rm-listing-close {
    display: flex;
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
}

.rm-my-resource-action--close {
    width: 100%;
    border: 1px solid var(--line);
    background: none;
    font-family: inherit;
    cursor: pointer;
    color: var(--muted);
}

.ui-form-stack + .rm-listing-close {
    margin-top: 16px;
}

.rm-my-resource-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* #dc2626 on the tinted card is 4.47:1 (light) and 4.25:1 (dark) — below AA;
   --status-bad is darker in the light theme and lighter in the dark one. */
.rm-my-resource-note--hidden {
    border: 1px solid rgba(220, 38, 38, .18);
    background: rgba(220, 38, 38, .05);
    color: var(--status-bad, #dc2626);
}

.rm-my-resource-note--rejected {
    border: 1px solid rgba(220, 38, 38, .22);
    background: rgba(220, 38, 38, .07);
    color: var(--status-bad, #dc2626);
}

/* The appeal against a Jev «повтор» hide: a note and one button under the
   banner on the listing page; a link to it from «Мои объявления». */
.rm-dispute-form {
    display: grid;
    gap: var(--space-2);
    margin-top: 12px;
}
.rm-my-resource-dispute {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rm-resource-mod-badge {
    font-size: var(--text-2xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rm-resource-mod-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.rm-resource-mod-badge--hidden {
    color: var(--status-bad, #dc2626);
}

/* #16a34a on the light card background is 3.3:1 — below AA; the token is
   darker in the light theme and unchanged in the dark one. */
.rm-resource-mod-badge--approved {
    color: var(--status-ok, #16a34a);
}

.rm-resource-mod-badge--rejected {
    color: var(--status-bad, #dc2626);
}

.rm-resource-mod-badge--pending {
    color: var(--warning);
}

.rm-promo-pending {
    display: block;
    padding: 18px;
    margin-top: 16px;
    border: 1px solid rgba(var(--text-rgb), .32);
}

.rm-promo-pending-copy {
    margin-top: 6px;
}

.rm-promo-form {
    margin-top: 16px;
}

.rm-promo-submit {
    width: 100%;
    min-height: 52px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--text-rgb), .55);
    background: linear-gradient(135deg, rgba(var(--text-rgb), .20), rgba(var(--text-rgb), .08));
    color: var(--text);
    font-weight: 600;
}

.rm-promo-preview {
    display: block;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(var(--text-rgb), .52);
}

.rm-promo-preview-head {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(var(--text-rgb), .24);
    color: var(--emphasis-light);
    font-size: var(--text-xs);
    font-weight: 600;
}

.rm-promo-preview-body {
    padding: 22px 20px;
}

.rm-promo-preview-category {
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: 400;
}

.rm-promo-preview-title {
    margin: 8px 0 12px;
    font-size: 24px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.rm-promo-preview-text {
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rm-promo-preview-address {
    margin-top: 16px;
    color: var(--muted);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.rm-promo-preview-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(var(--text-rgb), .18);
    color: var(--emphasis-light);
    font-size: var(--text-xs);
    font-weight: 700;
}

.rm-promo-preview-domain {
    margin-top: 7px;
    color: var(--muted);
    font-size: var(--text-2xs);
}

.rm-promo-target-card {
    display: block;
    padding: 18px;
    margin-top: 16px;
}

.rm-promo-target-note {
    margin-top: 10px;
    line-height: 1.5;
}

@media (max-width: 620px) {
    .page {
        width: min(100% - 20px, 900px);
    }

    .hero {
        padding: 24px 20px;
        border-radius: var(--radius-lg);
    }

    .hero h1 {
        font-size: var(--text-3xl);
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }
}

/* Doubled class: the later mobile `.card { padding: 16px }` must not add
   a second padding around .rm-person-main's own. */
.card.card--person,
.card.card--listing {
    display: flex;
    flex-direction: column;
    /* .card centres its (row) children; in this column layout that would
       shrink the content and the action row to their own width. */
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.rm-person-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 14px 16px 10px;
    color: inherit;
    text-decoration: none;
}

/* A listing card has no button row under it (plan item 364). */
.card--listing > .rm-person-main:last-child {
    padding-bottom: 14px;
}

.rm-person-write {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 14px 14px;
    min-height: 40px;
    border: 0;
    border-radius: var(--radius-sm);
    background: rgba(var(--text-rgb), .07);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
}

/* Action row under a listing card: "Написать" + "Поделиться" share the row,
   same height/width, aligned to the card content's own left edge (16px) —
   they used to be stacked full-width blocks with mismatched insets. */
.rm-card-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 0 16px 14px;
}

.rm-card-actions .rm-person-write,
.rm-card-actions .rm-share-button {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    min-height: 44px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

/* Фото-обложка объявления: над карточкой во всю ширину, 16:9; без фото
   карточка прежняя — иконка рубрики. Та же пропорция у фото на странице
   объявления, в редактировании и в модерации — кадр не прыгает при
   загрузке (width/height у <img>). */
.rm-card-cover {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.rm-card-cover img,
.rm-resource-photo img,
.rm-mod-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-2);
}

.rm-resource-photo {
    margin: 0 0 var(--space-3);
    overflow: hidden;
    border-radius: var(--radius);
}

/* «На проверке» / «Скрыто» on the listing page: title above the text.
   As a row (.card is flex) the title shrank to a column and broke
   mid-word («На пров / ерке»). */
.rm-resource-moderation-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* «Уже нашли?» (plan item 320) for the author: the question and two
   buttons side by side — on the listing page a card, on «Мои объявления» a
   tinted block inside the listing. */
.rm-found-question {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.rm-found-question--compact {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--primary-rgb), .3);
    border-radius: var(--radius-sm);
    background: rgba(var(--primary-rgb), .08);
}

.rm-found-question-title {
    font-weight: 600;
}

.rm-found-question-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rm-found-question-actions form,
.rm-found-question-actions .ui-button {
    width: 100%;
    margin: 0;
}

/* Two or three photos — on the listing page and on a feed card (plan
   item 190): a row swiped with a finger at the cover's own 16:9 height
   (no jump while the photos load), dots under it (listing-gallery.js);
   on the page «2 / 3» in each corner too. */
.rm-resource-gallery,
.rm-card-gallery {
    position: relative;
}

.rm-resource-gallery {
    margin: 0 0 var(--space-3);
}

.rm-gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: var(--radius-sm);
}

.rm-resource-gallery .rm-gallery-track {
    border-radius: var(--radius);
}

/* On a feed card the cover is the card's top edge: the card's own corners
   clip it, a radius of its own left notches where the photo meets the
   text. */
.card--listing > .rm-card-cover,
.card--listing > .rm-card-gallery .rm-gallery-track {
    border-radius: 0;
}

.rm-gallery-track::-webkit-scrollbar {
    display: none;
}

.rm-gallery-track:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.rm-gallery-track > .rm-card-cover,
.rm-gallery-track > .rm-resource-photo {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    border-radius: 0;
    scroll-snap-align: start;
}

.rm-gallery-dots {
    position: absolute;
    inset-block-end: 8px;
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

.rm-gallery-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.rm-gallery-dots span.is-active {
    background: #fff;
}

/* «Previous / next photo» for a mouse (listing-gallery.js shows them only
   where the pointer can hover, plan item 337). In RTL the row runs the
   other way: the arrows swap sides and turn. */
.rm-gallery-arrow {
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--transition-fast);
}

.rm-gallery-arrow[hidden] {
    display: none;
}

.rm-gallery-arrow--prev {
    inset-inline-start: 8px;
}

.rm-gallery-arrow--next {
    inset-inline-end: 8px;
}

html[dir="rtl"] .rm-gallery-arrow .icon {
    transform: scaleX(-1);
}

[data-gallery]:hover .rm-gallery-arrow:not(:disabled),
.rm-gallery-arrow:focus-visible {
    opacity: 1;
}

.rm-gallery-arrow:disabled {
    cursor: default;
}

.rm-gallery-count {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Up to three photos on the edit and create forms (п. 191): ряд квадратных
   миниатюр, первая — обложка (заполненная звёздочка и рамка), у каждой
   крестик «Убрать», звёздочка на остальных — «Сделать главным»; плитка «+»
   последней, пока есть место. Кнопки на фото — белый значок на 60 % чёрного:
   на самом светлом снимке фон не светлее #666, контраст значка ≥ 5:1. */
.rm-photo-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 420px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-photo-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
}

.rm-photo-tile[hidden] {
    display: none;
}

.rm-photo-tile .rm-photo-tile-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.rm-photo-tile.is-main::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--primary);
    border-radius: inherit;
    pointer-events: none;
}

.rm-photo-tile form {
    margin: 0;
}

.rm-photo-tile-star,
.rm-photo-tile-remove {
    position: absolute;
    inset-block-start: 6px;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    cursor: pointer;
}

.rm-photo-tile-star {
    inset-inline-start: 6px;
}

.rm-photo-tile-remove {
    inset-inline-end: 6px;
}

.rm-photo-tile-star .icon,
.rm-photo-tile-remove .icon {
    width: 20px;
    height: 20px;
}

.rm-photo-tile-star.is-main {
    background: var(--primary);
    color: var(--on-primary);
    cursor: default;
}

.rm-photo-tile-star.is-main .icon {
    fill: currentColor;
}

.rm-photo-tile-star:focus-visible,
.rm-photo-tile-remove:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--primary);
}

.rm-photo-tile--add form {
    height: 100%;
}

.rm-photo-add {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2, transparent);
    color: var(--text-muted);
    cursor: pointer;
}

.rm-photo-add .icon {
    width: 32px;
    height: 32px;
}

.rm-photo-add:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.rm-photo-add:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.rm-listing-photo-form.is-busy .rm-photo-add {
    opacity: .6;
    pointer-events: none;
}

.rm-listing-photo {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.rm-listing-photo-form {
    margin: 0;
}

/* No result yet — no empty line under the buttons. */
.rm-listing-photo .ui-status:empty {
    display: none;
}

.rm-listing-photo-pick {
    position: relative;
    cursor: pointer;
}

/* The picker is the whole button; the input stays reachable by keyboard
   and to a screen reader, just invisible. */
.rm-listing-photo-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.rm-listing-photo-pick:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.rm-listing-photo-form.is-busy .rm-listing-photo-pick {
    opacity: .6;
    pointer-events: none;
}

.chat-dialog-card {
    border-radius: var(--radius);
}

/* GRABIT · единый слой */
.ui-button {
    appearance: none;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-h);
    padding: 0 16px;
    border: 1px solid transparent;
    font-size: var(--text-sm);
    cursor: pointer;
    text-decoration: none;
    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    box-shadow: none;
    letter-spacing: -.005em;
}

/* Button hierarchy: .ui-button — the one filled action of a screen;
   .ui-button--secondary — every other action, a --fill-soft plate;
   .ui-button--danger — a destructive one, a --danger-soft plate. Their
   colours sit in «Общие группы» below (declared after .ui-button, so the
   same specificity wins). */

/* "It wasn't me" page: device / place / time of the sign-in. */
.login-alert-facts {
    list-style: none;
    margin: 14px 0 18px;
    font-size: 0.95rem;
    padding: 0;
    display: grid;
    gap: 6px;
}

.login-alert-facts span {
    color: var(--text-muted);
}

[data-status-page] p + .ui-button,
[data-status-page] form + .ui-button,
[data-status-page] .ui-button + .ui-button {
    margin-top: 10px;
}

/* «Home» and «Back» side by side: keep them apart when they share a line. */
[data-status-page] .ui-button + .ui-button {
    margin-inline-start: 8px;
}

/* 404/500/…: the mascot and the lines centred in the upper third, not
   glued to the top-left corner. */
[data-status-page][data-status-mascot] {
    max-width: 420px;
    margin: clamp(32px, 14vh, 120px) auto 0;
    text-align: center;
}

[data-status-page][data-status-mascot] .rm-empty-mascot {
    width: 112px;
    margin-bottom: 20px;
}

[data-status-page][data-status-mascot] p {
    margin-inline: auto;
}

/* Поиск по страницам: «Показать ещё» под выдачей (п. 197). */
.rm-search-more {
    display: flex;
    justify-content: center;
    margin: 16px 0 8px;
}

/* «Сервер занят»: отсчёт до автоповтора под кнопкой (src/web/busy.rs). */
[data-status-page] .ui-button + [data-busy-auto] {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.9em;
}

.rm-auth-button,
.rm-promo-submit {
    border: 0;
    background: var(--gold-fill);
    color: var(--on-gold-fill);
}

.rm-empty-action {
    border: 0;
    background: var(--gold-fill);
    color: var(--on-gold-fill);
    text-decoration: none;
}

.rm-version-footer {
    width: 100%;
    /* Room for the bottom nav and the system navigation bar. */
    margin: 18px auto calc(84px + env(safe-area-inset-bottom));
    padding: 8px 16px;
    color: var(--muted);
    font-size: var(--text-2xs);
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    letter-spacing: .04em;
}

.card.rm-document-card {
    display: grid;
    gap: var(--space-3);
    padding: 18px 16px;
}

.rm-document-card--prose {
    line-height: 1.5;
}

/* Long legal texts: normal flow with tight, even spacing instead of the
   card grid gap on top of paragraph margins. */
.card.rm-document-card--prose {
    display: block;
}

.rm-document-card--prose > p,
.rm-document-card--prose > ul {
    margin: 0 0 10px;
}

.rm-document-card--prose > ul {
    padding-inline-start: 20px;
}

.rm-document-card--prose > ul li + li {
    margin-top: 6px;
}

.rm-document-card--prose > h2 {
    margin: 22px 0 8px;
    font-size: var(--text-lg);
    line-height: 1.3;
}

.rm-document-card--prose a {
    color: var(--accent);
    text-underline-offset: 2px;
}

/* «Contents» of a long legal text: one folded line, open — the sections. */
.rm-legal-contents {
    margin: 4px 0 6px;
    border-radius: var(--radius-sm);
    background: rgba(var(--text-rgb), .05);
}

.rm-legal-contents summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    font-weight: 600;
    cursor: pointer;
}

.rm-legal-contents ol {
    margin: 0;
    padding: 0 14px 12px;
    padding-inline-start: 34px;
}

.rm-legal-contents li + li {
    margin-top: 6px;
}

.rm-legal-contents a {
    text-decoration: none;
}

/* A jump from the contents lands below the sticky top bar. */
.rm-document-card--prose > h2[id] {
    scroll-margin-top: 72px;
}

/* Links between the legal documents, under each of them. */
.rm-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 16px auto calc(84px + env(safe-area-inset-bottom));
    padding: 0 16px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}

.rm-legal-links a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rm-invite-status-message:empty {
    display: none;
}

.rm-version-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* «Режим осмотра» (dev only, web::inspect): the element itself carries
   `data-inspect` — a dashed outline drawn over it and a small label above
   its top edge, both out of the flow, so sizes and positions stay exactly
   as without the mode (owner, 2026-10-12). `:where` keeps the element's
   own position (fixed, sticky, absolute) when it has one; otherwise
   `relative` only anchors the label. A strip at the top switches it off. */
:where([data-inspect]) {
    position: relative;
}

[data-inspect] {
    outline: 2px dashed #d946ef !important;
    outline-offset: 2px;
}

.rm-inspect-caption {
    position: absolute;
    inset-block-end: calc(100% + 2px);
    inset-inline-start: -2px;
    /* Under the bottom menu and floating bars, above neighbouring rows. */
    z-index: 2;
    inline-size: max-content;
    /* As wide as the element (never a letter per line on a narrow one). */
    max-inline-size: max(100% + 4px, 160px);
    margin: 0;
    padding: 1px 6px;
    border-radius: 4px 4px 0 0;
    background: #d946ef;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
    line-height: 15px;
    letter-spacing: normal;
    text-align: start;
    text-transform: none;
    white-space: normal;
    pointer-events: none;
}

.rm-inspect-clipped > .rm-inspect-caption,
.rm-inspect-clipped > summary > .rm-inspect-caption {
    inset-block: 0 auto;
    inset-inline-start: 0;
    border-radius: 0 0 4px 0;
}

.rm-inspect-strip {
    display: block;
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    padding: 4px 12px;
    background: #d946ef;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

/* Settings: the version and the account number, small, at the very
   bottom (owner, 2026-10-12). */
.rm-settings-fineprint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 0 var(--space-4);
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.rm-fineprint-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.rm-settings-fineprint .rm-account-id-copy-btn {
    width: 32px;
    height: 32px;
}

.rm-settings-fineprint .rm-account-id-copy-btn .icon {
    width: 14px;
    height: 14px;
}

/* «Download my data» page: two buttons side by side. */
.rm-account-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* «Download my data» as a page (plan item 259): a card per section, a
   label/value grid per record; printing drops the app chrome. */
.rm-export-head.card,
.rm-export-section.card {
    display: block;
    margin-bottom: 12px;
}
.rm-export-head .card-meta {
    margin-top: 0;
}
.rm-export-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
}

.rm-export-title small {
    color: var(--muted);
    font-weight: 400;
}

.rm-export-record {
    margin: 0;
    padding: var(--space-2) 0;
    display: grid;
    gap: 2px;
    border-top: 1px solid var(--line);
}

.rm-export-field {
    display: grid;
    grid-template-columns: minmax(96px, 34%) 1fr;
    gap: var(--space-2);
}

.rm-export-field dt {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}

.rm-export-field dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

@media print {
    .topbar,
    .bottom-nav,
    .rm-account-export-actions,
    .back-link {
        display: none !important;
    }
    .rm-export-section {
        break-inside: auto;
        box-shadow: none;
    }
    .rm-export-record {
        break-inside: avoid;
    }
}

/* Settings → "Connection to the server" (plan item 47): shown only while
   the link is down, folded, a few lines when open. */
.rm-link-diag {
    margin: 12px 0 0;
    padding: 0 16px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.4;
}

.rm-link-diag summary {
    cursor: pointer;
    text-align: center;
    padding: 6px 0;
}

.rm-link-diag-state {
    font-size: inherit;
}

.rm-link-diag-state.is-on {
    color: var(--accent, #62e0ad);
}

.rm-link-diag-state.is-off {
    color: var(--warning, #d97706);
}

.rm-link-diag-rows {
    margin: 4px 0 0;
    display: grid;
    gap: var(--space-1);
}

.rm-link-diag-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

.rm-link-diag-row dt {
    font-weight: 600;
}

.rm-link-diag-row dd {
    margin: 0;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: end;
    overflow-wrap: anywhere;
}

/* «Рядом»: the title with the quiet «Beta» mark beside it. */
.rm-hero-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-2);

    margin-block-end: 10px;
}

.rm-hero-title-row h1 {
    min-width: 0;
    margin: 0;
}

.rm-testers > h2:first-child {
    margin-block-start: 0;
}

.rm-beta-badge {
    display: inline-flex;
    align-items: center;
    flex: none;

    min-height: 24px;
    padding-inline: 8px;

    border: 1px solid var(--line);
    border-radius: 999px;

    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: .02em;
    text-decoration: none;
}

.rm-place-title-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.rm-place-title-btn .icon {
    width: .6em;
    height: .6em;
    flex: none;
    color: var(--accent);
}

.rm-place-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-place-dialog {
    width: min(100% - 24px, 420px);
    padding: 0;
    border: 0;
    background: transparent;
}

.rm-place-sheet {
    display: grid;
    gap: var(--space-3);
    padding: 16px;
    border: 1px solid var(--line);
}

.rm-place-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.rm-place-head h2 {
    margin: 0;
    font-size: var(--text-lg);
}

/* «Report a problem» sheet (static/problem-report.js, plan item 227):
   the place dialog's frame, its own fields. */
.rm-problem-label {
    font-weight: 600;
}

.rm-problem-sheet .rm-problem-text {
    inline-size: 100%;
    min-block-size: 96px;
    resize: vertical;
}

.rm-problem-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.rm-problem-check input {
    inline-size: 20px;
    block-size: 20px;
    margin: 0;
    accent-color: var(--accent);
}

.rm-problem-note,
.rm-problem-status {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.rm-problem-preview {
    display: block;
    max-inline-size: 100%;
    max-block-size: 220px;
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.rm-problem-preview[hidden] {
    display: none;
}

.rm-problem-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.rm-problem-chat {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--space-2);
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.rm-place-actions,
.rm-place-recent ul,
.rm-place-results ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-place-actions button,
.rm-place-option {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-align: start;
    text-decoration: none;
    font: inherit;
}

.rm-place-status {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
}

@media (max-width: 620px) {
    .hero {
        padding: 22px 18px;
        border-radius: var(--radius);
    }

    .hero h1 {
        font-size: var(--text-2xl);
    }

    .card {
        min-height: 84px;
        padding: 16px;
    }
}

/* «К содержимому»: первая остановка Tab, видна только в фокусе. */
.skip-link {
    position: absolute;
    inset-inline-start: 8px;
    inset-block-start: -100px;
    z-index: 10000;
    padding: 10px 16px;
    border-radius: var(--radius);
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    inset-block-start: 8px;
}

main.page:focus {
    outline: none;
}

/* ============================================================
   ОБЩИЕ ГРУППЫ — одно оформление на несколько компонентов (кнопки,
   карточки, поля, листы). Свойства одиночных компонентов — в их базовых
   правилах выше; группы стоят в конце, чтобы перекрыть их раскладку той же
   специфичности. !important — только там, где его ставят листы экранов.
   ============================================================ */

/* --- Шапка и заголовки ---------------------------------------------- */

/* Шапка экрана — заголовок прямо на странице, без рамки и заливки. Шапка
   чата (.chat-header-premium) — своя, в слое чата. Листы экранов ставят
   на .hero !important (communication-polish.css). */
.hero:not(.chat-header-premium) {
    padding: 4px 0 2px !important;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
    overflow: visible;
}

.eyebrow,
.hero .eyebrow {
    color: var(--muted);
    font-weight: 400;
    letter-spacing: .08em;
}

.rm-auth-title,
.rm-settings-title,
.rm-me-name,
.rm-public-name,
.rm-mod-card-title,
.rm-promo-preview-title {
    font-weight: 600;
}

/* --- Поиск и чипы --------------------------------------------------- */

.rm-kind-chip,
.rm-report-chip,
.rm-mod-chip {
    border-color: transparent;
    background: var(--fill-soft);
    color: var(--text);
    font-weight: 600;
}

.rm-city-chat-row svg:first-child {
    color: var(--accent);
}

/* --- Карточки и панели ---------------------------------------------- */
.card,
.rm-settings-card,
.rm-mod-card,
.rm-resource-section,
.rm-my-resource-card,
.rm-sessions-panel,
.rm-public-profile-card,
.rm-public-section--intent,
.rm-lang-picker,
.rm-promo-preview,
.rm-promo-pending,
.rm-guest-panel,
.rm-search-intent-box {
    border-color: var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.rm-me-avatar,
.rm-group-avatar-preview {
    border-radius: 50%;
}

.card-arrow,
.rm-profile-row-arrow {
    color: var(--muted);
}

/* --- Кнопки: заливка коралл, второстепенные — нейтральная плашка ------ */

.ui-button--secondary,
.rm-resource-contact-btn--neutral,
.rm-my-resource-action--gold,
.rm-group-action,
.rm-mod-btn,
.rm-mod-link,
.rm-mod-search-btn,
.rm-auth-footer .rm-auth-alt,
.rm-confirm-actions button,
.rm-place-actions button,
.rm-place-option,
.rm-lang-btn,
.rm-global-search-close {
    border-color: transparent;
    background: var(--fill-soft);
    color: var(--text);
    box-shadow: none;
}

.ui-button--danger,
.rm-group-action--danger,
.rm-mod-btn--danger,
.rm-mod-btn--danger-strong,
.rm-mod-btn--neutral,
.rm-mod-reject-btn {
    border-color: transparent;
    background: var(--danger-soft);
    color: var(--danger);
    box-shadow: none;
}

.rm-auth-button:active {
    background: var(--primary-light);
}

.rm-person-write:hover {
    background: var(--fill-soft-hover);
}

.rm-auth-button.rm-auth-button--danger,
.rm-auth-button.rm-auth-button--danger:active {
    background: var(--danger);
    color: var(--on-danger);
}

@media (hover: hover) {
    .ui-button:hover {
        opacity: 1;
        background: var(--primary-light);
    }

    .ui-button--secondary:hover {
        background: var(--fill-soft-hover);
    }

    .ui-button--danger:hover {
        background: var(--danger-soft-hover);
    }
}

/* --- Поля: мягкая заливка, коралловый фокус --------------------------- */
.ui-input,
.ui-textarea,
.ui-select,
.rm-mod-search-input,
.rm-mod-reject-input {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--bg-soft);
}

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus,
.rm-mod-search-input:focus,
.rm-mod-reject-input:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: var(--field-focus-halo);
    outline: none;
}

/* --- Бейджи и статусы ------------------------------------------------- */

.rm-notif-new {
    color: var(--emphasis);
}

/* «This device» is a label, not a link (owner, 2026-10-10): plain text
   colour, a hairline pill. */
.rm-session-current {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--text);
}

/* --- Диалоги, листы, всплывающее -------------------------------------- */
.rm-place-sheet,
.rm-confirm-dialog,
.rm-global-search-sheet,
.rm-pwa-prompt {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    color: var(--text);
    background: var(--surface-2);
    box-shadow: var(--shadow-lg);
}

.rm-global-search-dialog::backdrop,
.rm-place-dialog::backdrop,
.rm-confirm-dialog::backdrop {
    background: var(--backdrop);
}

/* --- Админка и модерация — те же цвета, что и у остального экрана ----- */
:root[data-palette="system"] .rm-admin-ops {
    --ops-gold: var(--accent);
    --ops-blue: var(--teal);
    --ops-line: var(--line);
    --ops-muted: var(--muted);
}

/* ============================================================
   СОСТОЯНИЯ — ОДНИ ДЛЯ ВСЕХ ТЕМ (этап 5, 2026-09-28)
   ------------------------------------------------------------
   Пустое, ошибка, недоступное, загрузка, фокус с клавиатуры, выделение и
   прокрутка выглядят одинаково в «Как в системе» и в монохромных
   «Светлой»/«Тёмной»; цвета — из токенов темы: --accent (коралл или
   зелёный маркер), --primary (коралл или чёрный/белый), --danger, --muted.
   Блок стоит последним в листе, каждый селектор начинается с :root —
   так он перебивает правила тем той же специфичности
   (:root[data-theme="light"] …, :root[data-palette="system"] …), которые
   выше. Часть чата — в конце chat-v2.css.
   ============================================================ */

/* Empty states sit on the page itself: no grey plate, border or shadow (item 374).
   Title in text colour, hint --muted, one filled action, the rest neutral.
   Hover/active do nothing here.
   .card.rm-empty-state — to outweigh :root[data-palette="system"] .card. */
:root .card.rm-empty-state,
:root .card.rm-empty-state:hover,
:root .card.rm-empty-state:active,
:root .rm-admin-ops .empty,
:root .rm-admin-ops--geo .empty-state {
    transform: none;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: none;
    color: var(--muted);
}

:root .rm-empty-state .card-title,
:root .rm-admin-ops--geo .empty-state h2 {
    color: var(--text);
    font-weight: 600;
}

:root .rm-empty-state .card-meta {
    color: var(--muted);
}

:root .rm-empty-state-actions > :not(:first-child) {
    border-color: transparent;
    background: var(--fill-soft);
    color: var(--text);
    box-shadow: none;
}

@media (hover: hover) {
    :root .rm-empty-state-actions > :not(:first-child):hover {
        background: var(--fill-soft-hover);
    }
}

/* Ошибки и статусы: подпись у поля и строка статуса — просто текст цветом
   --danger/--success (правило выше). Сообщение на весь блок (role="alert")
   — мягкая плашка на 12 % --danger с обычным цветом текста: читается как
   состояние, а не как крик. Поле, которое браузер пометил невалидным после
   ввода, — красная рамка и красное кольцо; поле, которое отверг сервер
   (aria-invalid), — красная рамка. */
:root .ui-status.is-error[role="alert"],
:root .rm-auth-status.is-error[role="alert"] {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Заголовок ошибки формы объявления — своей строкой: без точки после
   него строки ниже не сливаются с ним в одно предложение (п. 189). */
[data-listing-form-error] > strong {
    display: block;
}

:root .ui-input:user-invalid,
:root .ui-textarea:user-invalid,
:root .ui-input[aria-invalid="true"],
:root .ui-textarea[aria-invalid="true"] {
    border-color: var(--danger);
}

:root .ui-input:user-invalid:focus-visible,
:root .ui-textarea:user-invalid:focus-visible {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft-hover);
}

/* Недоступное и загрузка: недоступная кнопка — нейтральная плашка и
   --muted, а не выцветшая заливка: «нельзя» читается без угадывания. Пока
   форма отправляется (aria-busy / data-loading) — та же кнопка чуть
   темнее со спиннером currentColor. */
:root .ui-button:disabled,
:root .rm-auth-button:disabled {
    opacity: 1;
    border-color: transparent;
    background: var(--fill-disabled);
    color: var(--muted);
    box-shadow: none;
}

:root .rm-auth-button[data-loading="true"],
:root form[aria-busy="true"] .is-submitting {
    opacity: 1;
    color: var(--on-primary);
    background: color-mix(in srgb, var(--primary) 78%, var(--card));
}

/* Фокус с клавиатуры: одно кольцо на всём, что не поле и не кнопка (у них
   своё): 2px --accent с отступом, только :focus-visible — касание его не
   показывает. Выделение текста — --accent 30 %, полоса прокрутки —
   --line-strong. */
:root .card:focus-visible,
:root .nav-item:focus-visible,
:root .rm-kind-chip:focus-visible,
:root .rm-report-chip:focus-visible,
:root .rm-mod-chip:focus-visible,
:root .rm-menu-row:focus-visible,
:root .rm-profile-row:focus-visible,
:root .rm-place-option:focus-visible,
:root .rm-lang-btn:focus-visible,
:root .card-arrow:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Экран объявления: звезда оценки — глиф на карточке, а не кнопка; «В
   избранное» — второстепенная плашка, нажатая — с подсветкой акцента. Оба
   с .ui-button в селекторе: правило .ui-button стоит в листе позже их
   собственных и заливало их как главную кнопку (чёрным/коралловым). */
:root .ui-button.rm-resource-star-btn {
    border-color: transparent;
    background: transparent;
    color: var(--emphasis);
    box-shadow: none;
}

:root ::selection {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--text);
}

:root body {
    scrollbar-color: var(--line-strong) transparent;
}

/* ============================================================
   Мобильная основа: доступность, safe-area, узкие экраны, вьюпорт чата
   (бывший mobile-foundation.css, п. 94).
   ============================================================ */

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

.rm-connectivity-status {
    position: fixed;
    z-index: 10050;
    left: 50%; /* stylelint-disable-line csstools/use-logical -- centred with translateX(-50%), direction-neutral */
    bottom: calc(var(--rm-bottom-nav-height, 84px) + max(12px, env(safe-area-inset-bottom)));
    max-width: min(92vw, 420px);
    transform: translateX(-50%);
    padding: 10px 16px;
    border: 1px solid rgba(129, 220, 179, .55);
    border-radius: var(--radius-pill);
    background: #18372d;
    color: #d9ffec;
    box-shadow: var(--shadow-md);
    font-weight: 600;
    text-align: center;
}

.rm-connectivity-status.is-offline {
    border-color: rgba(255, 151, 164, .62);
    background: #3c2027;
    color: #ffe3e7;
}

form[aria-busy="true"] .is-submitting {
    cursor: wait;
    opacity: .72;
    pointer-events: none;
}

main,
section,
header,
footer,
nav,
.topbar,
.page,
.card,
.card-content,
.hero,
.section-head,
article {
    min-width: 0;
    max-width: 100%;
}

img,
video,
audio,
canvas,
svg {
    max-width: 100%;
}

h1,
h2,
h3,
p,
.card-title,
.card-meta,
.section-title,
.section-caption,
.rm-menu-row-copy,
.chat-dialog-preview {
    overflow-wrap: anywhere;
}

a,
button,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Below 16px iOS Safari zooms the page when a field gets focus — a
   phone turned sideways is wider than 600px but still a touch screen. */
@media (pointer: coarse) {
    input,
    select,
    textarea {
        font-size: var(--text-base) !important;
    }
}

@media (max-width: 600px) {
    input,
    select,
    textarea {
        font-size: var(--text-base) !important;
    }

    .page {
        width: 100%;
        padding-inline: 16px !important;
    }

    .topbar {
        gap: var(--space-3);
    }

    .topbar > *,
    .hero > *,
    .section-head > * {
        min-width: 0;
    }

    .grid,
    .rm-map-grid {
        gap: 10px !important;
    }

    .grid .card,
    .rm-map-grid .card {
        min-height: 72px !important;
        padding: 12px 14px !important;
        gap: var(--space-3) !important;
        border-radius: var(--radius) !important;
    }

    .grid .card-icon,
    .rm-map-grid .card-icon {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
        border-radius: var(--radius-sm) !important;
    }

    .grid .card-title,
    .rm-map-grid .card-title {
        font-size: var(--text-sm) !important;
        line-height: 1.25 !important;
    }

    .grid .card-meta,
    .rm-map-grid .card-meta {
        margin-top: 3px !important;
        font-size: var(--text-xs) !important;
        line-height: 1.35 !important;
    }

    .rm-kind-chips {
        gap: 7px !important;
    }

    .rm-kind-chip {
        min-height: 34px !important;
        padding: 0 11px !important;
        font-size: var(--text-xs) !important;
    }

    .rm-settings-card {
        padding: 14px !important;
    }

    .rm-menu-row,
    .rm-settings-toggle-btn {
        min-height: 52px !important;
        padding: 8px 2px !important;
    }

    .rm-lang-picker {
        margin-top: 12px !important;
        padding: 12px !important;
        border-radius: var(--radius-sm) !important;
    }

    .rm-lang-grid {
        gap: 7px !important;
    }

    .rm-lang-search {
        display: block;
        margin-bottom: 8px;
    }

    .rm-lang-search input {
        width: 100%;
        min-height: 44px;
        padding: 9px 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        background: rgba(0, 0, 0, .14);
        color: var(--text);
        font: inherit;
    }

    .rm-lang-search input:focus {
        border-color: rgba(var(--text-rgb), .58);
        box-shadow: 0 0 0 3px rgba(var(--text-rgb), .10);
    }

    .rm-lang-search-status {
        min-height: 0;
        color: var(--muted);
        font-size: var(--text-2xs);
    }

    .rm-lang-search-status:not(:empty) {
        margin: -2px 0 8px;
    }

    .rm-lang-btn[hidden] {
        display: none !important;
    }

    .rm-lang-btn {
        min-height: 50px !important;
        padding: 7px 10px !important;
        border-radius: var(--radius-sm) !important;
    }

    .rm-lang-btn span {
        font-size: var(--text-xs) !important;
    }

    .rm-lang-btn small {
        font-size: var(--text-2xs) !important;
    }

    .rm-empty-state {
        padding: 20px 16px !important;
    }

    .rm-empty-state-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px !important;
    }

    .rm-empty-state-actions > :only-child {
        grid-column: 1 / -1;
    }

    .rm-empty-state-actions > * {
        min-width: 0;
        white-space: normal !important;
        text-align: center;
    }

    .chat-dialog-preview {
        max-width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 390px) {
    .page {
        padding-inline: 12px !important;
    }

    .rm-empty-state-actions {
        grid-template-columns: 1fr;
    }

    .rm-lang-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* v7.13: one measured mobile viewport for browser chrome and system navigation. */
html[data-page="chat"],
html[data-page="chat"] body {
    height: var(--chat-viewport-height, 100dvh) !important;
    max-height: var(--chat-viewport-height, 100dvh) !important;
}

html[data-page="chat"] main.page {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

html[data-page="chat"] #chat-form.chat-composer {
    margin-bottom: max(4px, env(safe-area-inset-bottom)) !important;
}

html[data-page="chat"] .chat-toolbar-status,
html[data-page="chat"] .chat-connection-state {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    #rm-continue-menu .rm-kind-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    #rm-continue-menu .rm-kind-chips::-webkit-scrollbar {
        display: none;
    }

    html[data-page="chat"] .chat-header-menu {
        width: min(218px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        padding: 5px !important;
    }

    /* Two columns (chat-v2.css, short screen) need the room of two. */
    html[data-page="chat"] .chat-header-menu.is-compact {
        width: min(372px, calc(100vw - 16px)) !important;
    }

    html[data-page="chat"] .chat-header-menu a.chat-header-menu-item,
    html[data-page="chat"] .chat-header-menu button {
        min-height: 42px !important;
        padding-inline: 9px !important;
        font-size: var(--text-xs) !important;
    }
}

/* ============================================================
   Группы: каталог официальных групп, создание и участники, жалобы,
   список чатов (бывший communication-polish.css, п. 94).
   Правила на всю страницу (.hero, main.page, .topbar, поля формы)
   действуют только там, где раньше подключался тот лист:
   html[data-page="inbox"|"group"] (communication.rs, page_marker).
   ============================================================ */

/* Каталог официальных групп: один читаемый поток, не три сжатые колонки. */
.official-group-current {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "badge action"
        "title action"
        "meta action" !important;
    align-items: center !important;
    gap: 5px 20px !important;
    padding: 20px 22px !important;
}

.official-group-current .chat-official-group {
    grid-area: badge !important;
}

.official-group-current h2 {
    grid-area: title !important;
    font-size: clamp(22px, 5vw, 28px) !important;
    line-height: 1.12;
}

.official-group-current .card-meta {
    grid-area: meta !important;
    max-width: 46ch;
    line-height: 1.42;
}

.official-group-current .ui-button {
    grid-area: action !important;
    align-self: center;
    white-space: nowrap;
}

.official-group-note {
    display: grid !important;
    grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr) !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 18px 22px !important;
}

.official-group-note strong {
    line-height: 1.18;
}

.official-group-note strong,
.official-group-note span {
    min-width: 0;
}
/* The note's text reads like the other cards' secondary lines. */
.official-group-note span {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.42;
}

.official-group-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px;
    margin-bottom: 12px;
}

.official-group-home,
.official-group-current,
.official-group-note {
    margin-bottom: 12px;
}

.official-group-grid {
    display: grid;
    gap: 10px;
}

.official-group-place {
    min-height: 68px !important;
    padding: 11px 14px !important;
}

.official-group-place .card-content {
    display: grid !important;
    gap: var(--space-1) !important;
    min-width: 0;
}

.official-group-place .card-content strong,
.official-group-place .card-content .card-meta {
    display: block !important;
    margin: 0 !important;
    min-width: 0;
}

.official-group-place .card-content strong,
.official-group-place .card-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.official-group-place .card-content .card-meta {
    font-size: var(--text-xs);
}

.official-group-place .card-content .official-group-preview {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
    font-weight: 500;
}

.official-group-more { grid-column: 1 / -1; }
.official-group-more > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}
.official-group-more > summary::-webkit-details-marker { display: none; }
.official-group-more > summary::before { content: "▸ "; }
.official-group-more[open] > summary::before { content: "▾ "; }
.official-group-more .official-group-grid { margin-top: var(--space-2); }
.official-group-home .card-icon { color: var(--accent); }

@media (max-width: 540px) {
    .official-group-place {
        grid-template-columns: 44px minmax(0, 1fr) 20px !important;
        gap: 10px !important;
    }
}

/* Подтверждение действия над участником (диалог из JS страницы участников). */
.rm-confirm-dialog {
    width: min(calc(100% - 32px), 420px);
    padding: 0;
    border: 1px solid var(--line);
}
.rm-confirm-dialog::backdrop { backdrop-filter: blur(5px); }
.rm-confirm-dialog form { display: grid; gap: var(--space-3); padding: 20px; }
.rm-confirm-dialog h2 { margin: 0; font-size: var(--text-xl); }
.rm-confirm-dialog p { margin: 0; color: var(--muted); line-height: 1.45; }
.rm-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.rm-confirm-actions button {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
}
.rm-confirm-actions .is-danger { border-color: rgba(255, 143, 152, .42); color: var(--danger); }

/* Список чатов и страницы групп: компактный заголовок вместо героя лендинга. */
:where(html[data-page="inbox"], html[data-page="group"]) .hero {
    padding: 20px 22px !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
}

:where(html[data-page="inbox"], html[data-page="group"]) .hero::before,
:where(html[data-page="inbox"], html[data-page="group"]) .hero::after {
    opacity: .42 !important;
}

:where(html[data-page="inbox"], html[data-page="group"]) .hero .eyebrow {
    margin-bottom: 10px !important;
    font-size: var(--text-2xs) !important;
}

:where(html[data-page="inbox"], html[data-page="group"]) .hero h1 {
    margin-bottom: 7px !important;
    font-size: clamp(25px, 6vw, 34px) !important;
    line-height: 1.08 !important;
}

:where(html[data-page="inbox"], html[data-page="group"]) .hero p {
    margin: 0 !important;
    font-size: var(--text-sm) !important;
    line-height: 1.42 !important;
}

/* Создание группы и управление ею: спокойные секции настроек. */
.rm-group-create:hover {
    transform: none !important;
}

:where(html[data-page="inbox"], html[data-page="group"]) .rm-profile-field {
    gap: var(--space-2) !important;
}

:where(html[data-page="inbox"], html[data-page="group"]) .rm-profile-field-label {
    font-size: var(--text-xs) !important;
    letter-spacing: .01em;
}

.rm-group-create .ui-input {
    min-height: 48px;
    border-radius: var(--radius-sm) !important;
}

.rm-group-create textarea.ui-input {
    min-height: 112px;
    resize: vertical;
}

.rm-group-member:last-child {
    border-bottom: 0;
}

.rm-group-member input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    accent-color: var(--emphasis);
}

.rm-group-create > .ui-button,
.rm-group-create > button.ui-button {
    justify-self: start;
}

@media (max-width: 600px) {
    :where(html[data-page="inbox"], html[data-page="group"]) main.page {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    :where(html[data-page="inbox"], html[data-page="group"]) .topbar {
        margin-bottom: 18px !important;
    }

    :where(html[data-page="inbox"], html[data-page="group"]) .hero {
        padding: 14px 15px !important;
        border-radius: var(--radius) !important;
    }

    :where(html[data-page="inbox"], html[data-page="group"]) .hero h1 {
        margin-bottom: 5px !important;
        font-size: 24px !important;
    }

    :where(html[data-page="inbox"], html[data-page="group"]) .hero .eyebrow {
        margin-bottom: 7px !important;
    }

    :where(html[data-page="inbox"], html[data-page="group"]) .hero p {
        font-size: var(--text-xs) !important;
    }

    .official-group-current {
        grid-template-columns: 1fr !important;
        grid-template-areas: "badge" "title" "meta" "action" !important;
        gap: 7px !important;
        padding: 17px !important;
    }

    .official-group-current .ui-button {
        width: 100%;
        margin-top: 5px;
    }

    .official-group-note {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        padding: 17px !important;
    }

    /* The place search keeps field and «Find» on one row, like the
       member search; the name sits right under the badge. */
    .official-group-current h2 {
        margin: 0;
    }

    .rm-group-create {
        padding: 16px !important;
    }

    .rm-group-create > .ui-button,
    .rm-group-create > button.ui-button,
    .rm-group-create form > .ui-button {
        width: 100%;
    }

    .rm-group-avatar-preview {
        width: 72px !important;
        height: 72px !important;
    }

    .rm-group-actions {
        width: 100%;
        max-width: none !important;
    }

    .rm-group-action {
        flex: 1 1 auto;
    }
}

/* Очередь жалоб модератора (п. 33) и «Решённые» под ней (п. 40). */
.rm-report-list {
    display: grid;
    gap: var(--space-3);
}
.rm-report-item,
.rm-report-history {
    display: block;
}
.rm-report-item .card-meta a {
    color: inherit;
}
.rm-report-excerpt {
    margin: 10px 0 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.rm-report-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
}
.rm-report-reason {
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    background: var(--surface);
    font-size: var(--text-xs);
    font-weight: 400;
}
.rm-report-history-row {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.rm-report-history-row .card-meta a {
    color: inherit;
}
.rm-report-history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
}
.rm-report-history-excerpt {
    display: -webkit-box;
    margin: 6px 0 4px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.45;
}
.rm-report-evidence {
    display: inline-block;
    margin: 0 0 4px;
    font-size: var(--text-sm);
}
.rm-report-decision {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    color: var(--muted);
    background: var(--surface);
    font-size: var(--text-xs);
    font-weight: 400;
    white-space: nowrap;
}
.rm-report-decision--removed,
.rm-report-decision--banned {
    color: var(--danger);
}
.rm-group-reports-end {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* The chevron points along the reading direction. */
[dir="rtl"] .rm-group-reports-end .card-arrow {
    transform: scaleX(-1);
}
.rm-group-reports-link {
    color: inherit;
    text-decoration: none;
}

/* Скелетоны (п. 95): app-reliability.js ставит их в <main>, если лента или
   список чатов не пришли за 300 мс после тапа. */
.rm-skeleton {
    display: grid;
    gap: 12px;
    padding-block: 12px;
}
.rm-skeleton--chats {
    gap: 0;
}
.rm-skeleton-card,
.rm-skeleton-chat {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rm-skeleton-card {
    min-height: 92px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.rm-skeleton-chat {
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
}
.rm-skeleton-icon,
.rm-skeleton-avatar,
.rm-skeleton-line {
    display: block;
    flex: 0 0 auto;
    background: rgba(var(--text-rgb), .08);
}
.rm-skeleton-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
}
.rm-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.rm-skeleton-lines {
    display: grid;
    flex: 1 1 auto;
    gap: 9px;
    min-width: 0;
}
.rm-skeleton-line {
    width: 100%;
    height: 12px;
    border-radius: var(--radius-pill);
}
.rm-skeleton-line:first-child {
    width: 70%;
    height: 15px;
}
.rm-skeleton-line--short {
    width: 40%;
}
.rm-skeleton-card--bare {
    min-height: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
}
.rm-skeleton-line.rm-skeleton-line--title {
    height: 22px;
}
.rm-skeleton-photo,
.rm-skeleton-bubble {
    display: block;
    background: rgba(var(--text-rgb), .08);
}
.rm-skeleton-photo {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
}
.rm-skeleton--chat {
    gap: 10px;
    padding-block: 24px;
}
.rm-skeleton-bubble {
    width: var(--w, 50%);
    height: 44px;
    border-radius: 18px;
}
.rm-skeleton-bubble--mine {
    justify-self: end;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
    .rm-skeleton-icon,
    .rm-skeleton-avatar,
    .rm-skeleton-line,
    .rm-skeleton-photo,
    .rm-skeleton-bubble {
        animation: rm-skeleton-pulse 1.2s ease-in-out infinite alternate;
    }
}
@keyframes rm-skeleton-pulse {
    to { opacity: .45; }
}

/* Публикация объявления: шаги над заголовком (город → назначение →
   рубрика → объявление) и превью карточки ленты перед отправкой. */
/* Plan item 324: the first step — two big purposes, the rest folded
   under «Other», the title and its rubric chips. */
.rm-create-goals {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}
.rm-create-goals-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.rm-create-goals-other {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 10px;
}
.rm-create-goals-more > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: var(--text-sm);
}
.rm-create-goal,
.rm-create-rubric-chip {
    position: relative;
    display: block;
    cursor: pointer;
}
.rm-create-goal input,
.rm-create-rubric-chip input {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
}
.rm-create-goal span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 56px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
}
.rm-create-goal--other span {
    min-block-size: 0;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
}
.rm-create-rubric-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-block-size: 34px;
    align-items: center;
}
.rm-create-rubric-chip span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
}
.rm-create-goal input:checked + span,
.rm-create-rubric-chip input:checked + span {
    border-color: var(--primary);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.rm-create-goal input:focus-visible + span,
.rm-create-rubric-chip input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.rm-create-all-rubrics {
    justify-self: start;
    margin-block-start: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}
.rm-create-place {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.rm-create-place a.rm-create-place-change {
    color: var(--primary);
    text-decoration: none;
}
fieldset.rm-create-goals > legend {
    padding: 0;
    margin-block-end: 10px;
}
.rm-create-place .icon {
    inline-size: 16px;
    block-size: 16px;
}
.rm-resource-description:empty {
    display: none;
}

.rm-create-steps {
    display: grid;
    gap: 8px;
    margin-block-end: var(--space-3);
}
.rm-create-steps-count {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}
.rm-create-steps ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Plan item 244г: a step name wraps onto a second line («Назначение»)
   instead of ending in an ellipsis. */
.rm-create-step {
    overflow: hidden;
    padding-block-start: 8px;
    border-block-start: 4px solid var(--line);
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
}
/* Plan item 201а: a done step — ✓ and the brand colour, the current one
   bold, the next ones --muted. Terracotta against grey is easy to tell apart
   (7.4:1 by day, 9:1 at night on --bg); the blue of the old grey-blue
   accent went with plan item 361. */
.rm-create-step.is-done {
    border-block-start-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.rm-create-step-check {
    margin-inline-end: 3px;
}
.rm-create-step.is-current {
    border-block-start-color: var(--primary);
    color: var(--text);
    font-weight: 600;
}
/* Шаги — ссылки на свои страницы (п. 201): вся ячейка нажимается,
   вид тот же, что у текста шага. */
.rm-create-step a {
    display: block;
    margin-block-start: -8px;
    padding-block: 8px 6px;
    color: inherit;
    text-decoration: none;
}
.rm-create-step a:hover,
.rm-create-step a:focus-visible {
    text-decoration: underline;
}
form[data-listing-create] {
    margin-block-start: var(--space-4);
}
.rm-create-photo [hidden],
.rm-draft-preview [hidden] {
    display: none;
}
.rm-create-photo .ui-status:empty {
    display: none;
}
.rm-draft-preview .rm-card-title.is-placeholder {
    color: var(--muted);
}
/* «Мои объявления»: фото объявления на месте иконки рубрики. */
.rm-my-resource-photo {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-2);
}

/* «Поделиться в GRABIT» (/app/share, templates/share_target.rs). */
.share-target {
    display: grid;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
}

.share-title {
    margin: 0;
    font-size: var(--text-xl);
}

.share-subtitle {
    margin: var(--space-2) 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
}

.share-lead {
    margin: 0;
    color: var(--muted);
}

.share-preview {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.share-thumbs {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
}

.share-thumb {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.share-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.share-thumb--video {
    gap: 4px;
    align-content: center;
    padding: 6px;
    color: var(--muted);
    font-size: var(--text-xs);
    text-align: center;
}

.share-thumb--video .icon {
    width: 28px;
    height: 28px;
}

.share-text {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.share-notices {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    color: var(--warning);
    font-size: var(--text-sm);
    list-style: none;
}

.share-listing,
.share-cancel {
    margin: 0;
}

.share-listing-card {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

/* Spans inside a <button> (a <div> is not allowed there): one per line. */
.share-listing-card .card-content,
.share-listing-card .card-title,
.share-listing-card .card-meta {
    display: block;
}

.share-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-soft);
}

.share-search-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2;
}

/* The input drops its outline: the box shows the focus instead (plan
   item 400), as `.search:focus-within` does. */
.share-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.share-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.share-chats {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    list-style: none;
}

.share-chats li + li {
    border-block-start: 1px solid var(--line);
}

.share-chat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: 8px var(--space-3);
    color: var(--text);
    text-decoration: none;
}

.share-chat:hover,
.share-chat:focus-visible {
    background: var(--card-hover);
}

.share-chat-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-chat-kind {
    color: var(--muted);
    font-size: var(--text-xs);
}

.share-avatar {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(var(--text-rgb), .08);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.share-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.share-empty-line {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.share-to {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.share-to-label {
    color: var(--muted);
}

.share-send-button,
.share-login {
    width: 100%;
}

/* Signed out: «Отменить» under the full-width «Войти» as wide as it,
   not a stub at the left edge. */
.share-guest-actions + .share-cancel .ui-button {
    width: 100%;
}

.share-change {
    justify-self: center;
    color: var(--muted);
    font-size: var(--text-sm);
}

/* The photo shared into GRABIT on the listing form (listing_create.rs). */
.rm-create-shared {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
    cursor: pointer;
}

.rm-create-shared-img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-2);
}

.rm-create-shared-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Fewer panels (plan 111): settings rows grouped in one panel each, the
   cards inside flattened into rows with a hairline between them. Last in
   the file so it wins over the cards' own margins and borders. */
.rm-settings-group {
    margin: 20px 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.rm-settings-group > .card {
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.rm-settings-group > .card + .card {
    border-top: 1px solid var(--line);
}

/* Settings: a short label above each group (Notifications, App, Sign-in
   and security); the group right under it, the next label after a gap. */
.rm-settings-group-label {
    margin: 24px 4px 8px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: .01em;
}

.rm-settings > .rm-settings-group-label:first-child,
.rm-settings > .rm-settings-notice + .rm-settings-group-label {
    margin-top: 4px;
}

/* The legal links and the fine print under them read as one footer: the
   room for the bottom nav goes under the fine print, not between them. */
.rm-settings > .rm-version-footer {
    margin-bottom: 0;
}

.rm-settings > .rm-version-footer + .rm-settings-fineprint {
    margin-bottom: calc(84px + env(safe-area-inset-bottom));
}

.rm-settings > .rm-settings-group-label + .rm-settings-card,
.rm-settings > .rm-settings-group-label + .rm-settings-group {
    margin-top: 0;
}

/* Tap targets of at least 44×44 px for small icon buttons, without
   growing what is drawn: an invisible ::after centred on the button. */
.chat-dialog-controls summary,
.chat-dialog-controls button,
.chat-call-btn,
.chat-share-notice > a,
.chat-block-toggle,
.rm-account-id-copy-btn,
.rm-pwa-prompt-close,
.rm-global-search-close,
.rm-voice-search,
.rm-session-revoke-btn {
    position: relative;
}
.chat-dialog-controls summary::after,
.chat-dialog-controls button::after,
.chat-call-btn::after,
.chat-share-notice > a::after,
.chat-block-toggle::after,
.rm-account-id-copy-btn::after,
.rm-pwa-prompt-close::after,
.rm-global-search-close::after,
.rm-voice-search::after,
.rm-session-revoke-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%; /* stylelint-disable-line csstools/use-logical -- centred with translate(-50%, -50%), direction-neutral */
    width: max(100%, var(--tap-min));
    height: max(100%, var(--tap-min));
    transform: translate(-50%, -50%);
}

/* dir="auto" on people's own text fixes the order of mixed-script
   words; the line still aligns with the page, not with the text. A chat
   bubble keeps the alignment of its own language. */
html[dir="ltr"] [dir="auto"]:not(.chat-message-body) {
    text-align: left; /* stylelint-disable-line csstools/use-logical -- `start` would follow the element's own auto-detected direction; the page's side is wanted */
}
html[dir="rtl"] [dir="auto"]:not(.chat-message-body) {
    text-align: right; /* stylelint-disable-line csstools/use-logical -- same */
}

/* With scripts a tick saves at once: the no-script buttons are gone from
   the first frame, not hidden later (no jump). */
@media (scripting: enabled) {
    .rm-languages-submit {
        display: none;
    }
}
/* «I speak» in the profile header (owner, 2026-10-10): a language icon and
   the codes as small chips on a line of their own; a tap opens the choice. */
.rm-me-head {
    flex-wrap: wrap;
    row-gap: 4px;
}
/* No room kept for the save note while it is silent. */
.rm-me-save-status:empty {
    min-height: 0;
}
/* «Filled N of M» beside the trust mark (plan item 366): small, muted,
   wraps under the name when the line is short. */
.rm-me-fill-state {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
}
.rm-me-fill-state:hover {
    color: var(--text);
}
/* «Others see: Амир А.» under the name (plan item 419). */
.rm-me-shown-as {
    align-self: flex-start;
    color: var(--muted);
    font-size: var(--text-xs);
    text-decoration: none;
}
.rm-me-shown-as:hover {
    color: var(--text);
}
.rm-me-langs-pick {
    flex-basis: 100%;
    min-width: 0;
}
.rm-me-langs-sum {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    max-width: 100%;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.rm-me-langs-sum::-webkit-details-marker {
    display: none;
}
.rm-me-langs-icon,
.rm-me-langs-empty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rm-me-langs-icon .icon,
.rm-me-langs-empty .icon {
    width: 18px;
    height: 18px;
}
.rm-me-langs-codes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rm-me-langs-codes[hidden],
.rm-me-langs-empty[hidden] {
    display: none;
}
.rm-me-lang-code {
    padding: 2px 8px;
    border: 1px solid rgba(var(--text-rgb), .3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    letter-spacing: .02em;
}
/* Opened: the choice itself, without its own heading (the chips are it). */
.rm-me-langs-pick .rm-resume-static-head {
    display: none;
}
.rm-me-langs-body {
    padding-top: 6px;
}

/* The Workshop's «First step» while every tool is empty: one larger row
   above the list, the kicker in the accent colour. */
.rm-atelier-start {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 12px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--primary);
    color: var(--text);
    text-decoration: none;
}

.rm-atelier-start-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.rm-atelier-start-icon .i3d {
    width: 44px;
    height: 44px;
}

.rm-atelier-start-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rm-atelier-start-kicker {
    color: var(--primary);
    font-size: var(--text-2xs);
    font-weight: 600;
}

.rm-atelier-start-copy > strong {
    font-size: var(--text-base);
}

.rm-atelier-start > .rm-profile-row-arrow {
    margin-inline-start: auto;
}

/* The Workshop: «More tools» folds the tools of other goals. */
.rm-atelier-more {
    margin-top: 12px;
}
.rm-atelier-more:not([open]) > .rm-atelier-more-head {
    border-bottom: 0;
}
/* «My profile»: the listings card and the tail card keep the usual gap. */
.rm-profile-list + .rm-profile-list--tail {
    margin-top: 14px;
}
.rm-atelier-more-head {
    list-style: none;
    cursor: pointer;
}
.rm-atelier-more-head::-webkit-details-marker,
.rm-atelier-more-head::marker {
    display: none;
    content: "";
}
.rm-atelier-more-head .rm-profile-row-arrow {
    margin-inline-start: auto;
    transition: transform .15s ease;
}
.rm-atelier-more[open] > .rm-atelier-more-head .rm-profile-row-arrow {
    transform: rotate(90deg);
}

/* «Show on profile» (plan item 255; owner 2026-10-10: compact, inside
   each part): the label, then everyone / written to / nobody as one
   segmented pill — the checked one filled. Same size in every state. */
.rm-show-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding-block: var(--space-2);
}
.rm-show-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    flex: 1 1 100%;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.rm-show-label {
    float: inline-start;
    padding: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 400;
}
.rm-seg {
    display: inline-flex;
    max-inline-size: 100%;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: rgba(var(--text-rgb), .04);
}
.rm-seg-option {
    position: relative;
    display: inline-flex;
}
.rm-seg-option input {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
}
.rm-seg-option span {
    display: inline-flex;
    align-items: center;
    min-block-size: 32px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.rm-seg-option input:checked + span {
    background: var(--primary);
    color: var(--on-primary);
}
.rm-seg-option input:focus-visible + span {
    outline: 2px solid var(--emphasis-light);
    outline-offset: 1px;
}
.rm-show-status {
    flex-basis: 100%;
}
.rm-show-status:empty {
    display: none;
}
.rm-show-submit[hidden] {
    display: none;
}
@media (scripting: enabled) {
    .rm-show-submit {
        display: none;
    }
}
/* Last in a résumé block, under what the block holds (owner, 2026-10-10). */
.rm-resume-block-body > .rm-show-switch {
    border-block-start: 1px solid var(--line);
    margin-block-start: var(--space-3);
}
.rm-public-section .rm-show-switch {
    margin-block-end: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
}

/* The business card: white paper in every theme — a camera must read the
   code — 85 × 55 and laid out like the printed one: sizes in container
   units, one millimetre of the card = 100cqw / 85. */
.rm-bcard-stage {
    display: flex;
    justify-content: center;
    padding-block: var(--space-2);
}
.rm-bcard {
    container-type: inline-size;
    inline-size: 100%;
    max-inline-size: 460px;
}
.rm-bcard-face {
    --mm: calc(100cqw / 85);
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(24 * var(--mm));
    gap: calc(4 * var(--mm));
    aspect-ratio: 85 / 55;
    padding: calc(5 * var(--mm));
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .08), 0 10px 30px rgba(17, 24, 39, .16);
}
:root[data-theme="dark"] .rm-bcard-face {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rm-bcard-face {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .5);
    }
}
.rm-bcard-copy {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}
.rm-bcard-bar {
    inline-size: calc(7 * var(--mm));
    block-size: max(2px, calc(.9 * var(--mm)));
    margin-block: calc(.6 * var(--mm)) calc(2.2 * var(--mm));
    border-radius: 999px;
    /* Brand terracotta: the card is white in both themes, like the print. */
    background: #9c4226;
}
.rm-bcard-name {
    font-size: max(15px, calc(4.6 * var(--mm)));
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.rm-bcard-profession {
    margin-block-start: calc(1.2 * var(--mm));
    color: #9c4226;
    font-size: max(12px, calc(3.1 * var(--mm)));
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.rm-bcard-contacts {
    display: flex;
    flex-direction: column;
    gap: calc(.8 * var(--mm));
    margin-block-start: auto;
    font-size: max(11px, calc(2.8 * var(--mm)));
    line-height: 1.2;
}
.rm-bcard-contacts > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-bcard-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(1.2 * var(--mm));
    min-inline-size: 0;
}
.rm-bcard .rm-card-qr {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
}
.rm-bcard-url {
    max-inline-size: 100%;
    overflow: hidden;
    color: #4b5563;
    font-size: max(12px, calc(2.3 * var(--mm)));
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-bcard-more {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    text-align: center;
}
.rm-bcard-more a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.rm-bcard-more a:hover {
    text-decoration: underline;
}
.rm-bcard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    max-inline-size: 460px;
    margin: var(--space-3) auto var(--space-3);
}
.rm-bcard-actions .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Halves lined up with the card's edges; a label that does not fit
       its half takes the whole row instead of wrapping. */
    flex: 1 1 auto;
    min-width: 140px;
    white-space: nowrap;
}
.rm-bcard-actions .rm-menu-row-state:empty {
    display: none;
}

/* Company pages (plan item 257): «Owner at X» under the name on a public
   profile, the page's card and the edit screen's buttons. */
.rm-company-lines {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}
.rm-company-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.rm-company-line svg,
.rm-company-website svg {
    flex: none;
    width: 16px;
    height: 16px;
}
.rm-company-line span,
.rm-company-website a {
    min-width: 0;
    overflow-wrap: anywhere;
}
.rm-company-card {
    display: grid;
    align-items: start;
    gap: 10px;
    min-height: 0;
    margin-bottom: 16px;
    padding: 14px 16px;
}
.rm-company-website {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rm-profile-list + .rm-company-form {
    margin-top: 16px;
}
.rm-company-form {
    margin-bottom: 16px;
    padding: 14px 16px;
}
/* The edit screen: «Open page» and «Share» above the form, «Delete page»
   alone under it, away from «Save». */
.rm-company-top-actions {
    margin: 0 0 12px;
}
.rm-company-delete {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
}
/* A second page opens from a button; the form shows under it. */
.rm-company-new > summary {
    list-style: none;
    cursor: pointer;
    inline-size: 100%;
}
.rm-company-new > summary::-webkit-details-marker {
    display: none;
}
.rm-company-new > summary::marker {
    content: "";
}
.rm-company-new:not([open]) {
    min-height: 0;
    overflow: visible;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.rm-company-new[open] > summary {
    display: none;
}
.rm-company-page-actions {
    margin-top: 4px;
}
.rm-company-line a,
.rm-company-owner a,
.rm-company-website a {
    color: var(--accent);
    font-weight: 600;
}

/* «Add» buttons carry a plus before the words (owner, 2026-10-10). */
.ui-button--add {
    gap: 6px;
}

.ui-button--add > .icon {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Listing page (owner, 2026-10-10): the author's photo over the person
   icon when there is one; drawn stars; the complaint behind one button. */
.rm-resource-owner-icon {
    position: relative;
    overflow: hidden;
}

.rm-resource-owner-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rm-resource-stars {
    gap: 2px;
}

.rm-resource-star-btn .rm-star {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.rm-resource-star-btn.is-on .rm-star {
    fill: currentColor;
}

.rm-resource-report-inline > summary {
    list-style: none;
    display: inline-flex;
    gap: 8px;
    min-height: 40px;
    font-size: var(--text-xs);
}

.rm-resource-report-inline > summary::-webkit-details-marker {
    display: none;
}

.rm-resource-report-open .icon {
    width: 16px;
    height: 16px;
}

.rm-resource-report-hint {
    margin: 10px 0 8px;
}

/* «Рядом» without a city (owner, 2026-10-10): the recent cities as chips
   under the two buttons, not a dialog over the screen. */
.rm-nearby-recent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.rm-nearby-recent > p {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-xs);
}

.rm-nearby-recent .rm-nearby-recent-chip {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 40px;
    border-radius: var(--radius-pill);
}

/* New listing, step 1 (owner, 2026-10-10): the suggested city first, then
   «Другой город» over the continents. */
.rm-create-other-place {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 400;
}

/* «Find a city» above the continents: the field and its button in one row. */
.rm-create-city-search {
    margin-block-end: var(--space-3);
}

.rm-create-city-search-row {
    display: flex;
    gap: var(--space-2);
}

.rm-create-city-search-row .ui-input {
    flex: 1 1 auto;
    min-width: 0;
}

.rm-create-city-search-row .ui-button {
    flex: 0 0 auto;
    width: auto;
}

.rm-letter-pdf {
    gap: 6px;
}

.rm-letter-pdf > .icon {
    width: 16px;
    height: 16px;
}

/* Company form (owner, 2026-10-10): no gap above its heading. */
.rm-company-form .section-head {
    margin-top: 0;
}

/* «My profile» header (owner, 2026-10-10): an empty field is an invitation
   in the accent colour, not a grey box; no photo — a camera, large enough
   to read as «add a photo». */
.rm-me-inline:placeholder-shown {
    background: transparent;
}

.rm-me-inline:placeholder-shown::placeholder {
    color: var(--accent);
}

.rm-me-avatar--upload > .icon {
    width: 30px;
    height: 30px;
    color: var(--muted);
}

/* Responses to a listing (plan item 274): the send form with «what the
   author will see», the author's list with filters, «My responses». */
.rm-respond-card,
.rm-respond-preview,
.rm-responses-head {
    display: grid;
    gap: 12px;
}

.rm-respond-form {
    display: grid;
    gap: 12px;
}

.rm-respond-listing {
    margin: 0;
    font-weight: 600;
}

.rm-respond-listing a,
.rm-response-name a {
    color: var(--text);
    text-decoration: none;
}

.rm-respond-resume a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.rm-respond-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.4;
}

.rm-respond-check input {
    margin-top: 3px;
    flex: none;
}

.rm-respond-letter summary,
.rm-response-letter summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
}

.rm-respond-letter[open] {
    display: grid;
    gap: 10px;
}

.rm-respond-letter-text {
    min-height: 200px;
}

.rm-respond-offer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rm-respond-preview-title {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}

.rm-respond-resume {
    margin: 0;
    color: var(--muted);
}

.rm-responses-intake {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.rm-responses-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.rm-responses-filters .rm-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

.rm-responses-filters .rm-chip.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--emphasis);
    font-weight: 600;
}

.rm-responses-list {
    display: grid;
    gap: 12px;
}

.rm-response-card {
    display: grid;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.rm-response-card.is-starred {
    border-color: var(--accent);
}

.rm-response-card-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.rm-response-person {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}

.rm-response-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--surface-2);
}

.rm-response-person-text {
    min-width: 0;
}

.rm-response-name,
.rm-response-meta,
.rm-response-experience,
.rm-response-message,
.rm-response-offer,
.rm-response-answer {
    margin: 0;
    overflow-wrap: anywhere;
}

.rm-response-meta,
.rm-response-experience {
    color: var(--muted);
    font-size: 14px;
}

.rm-response-online {
    color: var(--success);
    font-size: 13px;
    font-weight: 600;
    margin-inline-start: 6px;
}

/* Price and time of an offer: the figures an author compares, large. */
.rm-response-offer {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}

.rm-response-offer-part {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.rm-response-offer-label {
    color: var(--muted);
    font-size: var(--text-2xs);
}

.rm-response-offer-part strong {
    font-size: 17px;
    overflow-wrap: anywhere;
}

/* The candidate's own words, set off as a quote. */
.rm-response-message {
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--accent-soft);
    line-height: 1.45;
    white-space: pre-line;
}

/* «Work book · 3 · ★ 4.7»: finished work, the strongest trust signal. */
.rm-response-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 4px 0 0;
    font-size: var(--text-sm);
}

.rm-response-trust a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success);
    font-weight: 600;
    text-decoration: none;
}

.rm-response-trust .icon {
    width: 16px;
    height: 16px;
}

.rm-response-rating {
    color: var(--warning);
    font-weight: 600;
}

.rm-response-letter-text {
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.5;
}

.rm-response-chip {
    justify-self: start;
}

.rm-response-chip--invited {
    background: rgba(34, 197, 94, .16);
    color: var(--success);
}

.rm-response-chip--declined,
.rm-response-chip--withdrawn {
    background: rgba(239, 68, 68, .12);
    color: var(--danger);
}

/* One or two buttons, always the full width between them. */
.rm-response-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}

/* Résumé and the quiet actions (decline, withdraw) under the buttons. */
.rm-response-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}

.rm-response-foot form {
    margin: 0;
    margin-inline-start: auto;
}

.rm-response-quiet {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
}

a.rm-response-quiet {
    color: var(--accent);
    font-weight: 600;
}

.rm-response-date {
    color: var(--muted);
    font-size: var(--text-xs);
}

/* «My responses»: the listing and its status on one line. */
.rm-response-sent-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.rm-response-sent-top .rm-response-chip {
    flex: none;
}

.rm-response-mine {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* «To my listings»: one row per listing, the unanswered count as a badge. */
.rm-response-received {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rm-response-received-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rm-response-received.is-waiting {
    border-color: var(--accent);
}

.rm-response-waiting {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--emphasis);
    font-size: var(--text-xs);
    font-weight: 600;
}

.rm-respond-submit {
    width: 100%;
}

.rm-response-actions form {
    margin: 0;
    display: grid;
}

.rm-response-actions .ui-button {
    width: 100%;
}

.rm-response-chip--sent,
.rm-response-chip--viewed {
    background: var(--surface-2);
    color: var(--muted);
}

.rm-response-star-form {
    margin: 0;
}

.rm-response-star {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
}

.rm-response-star.is-on {
    color: var(--accent);
    border-color: var(--accent);
}

.rm-response-closed {
    opacity: .6;
    cursor: default;
}

/* The trades showcase on «Рядом» (plan items 298, 304; scene slides —
   docs/owner-requests/2026-10-11-showcase-scene-slides.md): one slide per
   trade, swiped with scroll-snap (showcase.js adds autoplay, the endless
   circle and the dots).
   Each slide: the trade's name and what it does beside a scene of the
   work, two buttons below. One fixed height — no jump. */
.rm-showcase {
    position: relative;
    margin: var(--space-2) 0 var(--space-3);
}

/* «Все» in the corner: every trade, whichever slide is showing
   (docs/owner-requests/2026-10-11-showcase-rotation.md, block 2). */
.rm-showcase-all {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 1;
    min-height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.rm-showcase[data-on-all] .rm-showcase-all {
    visibility: hidden;
}

.rm-showcase-all:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 1px;
}

.rm-showcase-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.rm-showcase-track::-webkit-scrollbar {
    display: none;
}

.rm-showcase-slide {
    --sc-a: #c2410c;
    --sc-b: #9a3412;
    --sc-tint: #fff7ed;
    flex: 0 0 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 184px;
    padding: 12px;
    scroll-snap-align: start;
    color: #fff;
    background: var(--sc-a);
}

/* White text on every pair stays at 4.5:1 or more (AA). */
.rm-showcase--warehouse { --sc-a: #c2410c; --sc-b: #9a3412; --sc-tint: #fff7ed; }
.rm-showcase--electrician { --sc-a: #1d4ed8; --sc-b: #1e3a8a; --sc-tint: #eff6ff; }
.rm-showcase--caregiver { --sc-a: #be185d; --sc-b: #9d174d; --sc-tint: #fdf2f8; }
.rm-showcase--plumber { --sc-a: #0e7490; --sc-b: #155e75; --sc-tint: #ecfeff; }
.rm-showcase--cleaner { --sc-a: #15803d; --sc-b: #166534; --sc-tint: #f0fdf4; }
.rm-showcase--builder { --sc-a: #b45309; --sc-b: #92400e; --sc-tint: #fffbeb; }
.rm-showcase--driver { --sc-a: #4338ca; --sc-b: #3730a3; --sc-tint: #eef2ff; }
.rm-showcase--cook { --sc-a: #b91c1c; --sc-b: #991b1b; --sc-tint: #fee2e2; }
.rm-showcase--beauty { --sc-a: #a21caf; --sc-b: #86198f; --sc-tint: #fdf4ff; }
.rm-showcase--handyman { --sc-a: #4d7c0f; --sc-b: #3f6212; --sc-tint: #f7fee7; }
.rm-showcase--security { --sc-a: #1e293b; --sc-b: #0f172a; --sc-tint: #f1f5f9; }
.rm-showcase--welder { --sc-a: #44403c; --sc-b: #292524; --sc-tint: #fafaf9; }
.rm-showcase--tiler { --sc-a: #0e7490; --sc-b: #164e63; --sc-tint: #ecfeff; }
.rm-showcase--carpenter { --sc-a: #92400e; --sc-b: #78350f; --sc-tint: #fef3c7; }
.rm-showcase--mechanic { --sc-a: #0369a1; --sc-b: #075985; --sc-tint: #f0f9ff; }
.rm-showcase--waiter { --sc-a: #9f1239; --sc-b: #881337; --sc-tint: #fff1f2; }
.rm-showcase--sales { --sc-a: #a16207; --sc-b: #854d0e; --sc-tint: #fefce8; }
.rm-showcase--office-admin { --sc-a: #475569; --sc-b: #334155; --sc-tint: #f8fafc; }
.rm-showcase--accountant { --sc-a: #047857; --sc-b: #065f46; --sc-tint: #ecfdf5; }
.rm-showcase--it { --sc-a: #312e81; --sc-b: #1e1b4b; --sc-tint: #eef2ff; }
.rm-showcase--medical { --sc-a: #2563eb; --sc-b: #1e40af; --sc-tint: #eff6ff; }
.rm-showcase--legal { --sc-a: #1e3a8a; --sc-b: #172554; --sc-tint: #eef2ff; }
.rm-showcase--teacher { --sc-a: #9333ea; --sc-b: #7e22ce; --sc-tint: #faf5ff; }
.rm-showcase--translator { --sc-a: #0f766e; --sc-b: #115e59; --sc-tint: #f0fdfa; }
.rm-showcase--photographer { --sc-a: #e11d48; --sc-b: #be123c; --sc-tint: #fff1f2; }
.rm-showcase--trainer { --sc-a: #dc2626; --sc-b: #991b1b; --sc-tint: #fef2f2; }
.rm-showcase--gardener { --sc-a: #166534; --sc-b: #14532d; --sc-tint: #f0fdf4; }
.rm-showcase--tailor { --sc-a: #9d174d; --sc-b: #831843; --sc-tint: #fdf2f8; }

.rm-showcase-top {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* The picture opens the rubric (intent-switch request, block 3). */
.rm-showcase-top:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    border-radius: 12px;
}

.rm-showcase-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.rm-showcase-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

/* A long name («Разнорабочий», «Bébiszitter és gondozás») would not fit
   a 360 px phone in 24 px: smaller, up to two lines. */
.rm-showcase-name--long {
    font-size: 19px;
}

.rm-showcase-what {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.3;
    opacity: 1;
}

.rm-showcase-art {
    flex: 0 0 auto;
    /* Nearly half the slide: the scene has detail worth seeing on a
       phone; wider, «what it does» stops fitting in some languages. */
    width: 48%;
    max-width: 190px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--sc-tint);
}

.rm-scene {
    display: block;
    width: 100%;
    height: 100%;
}

.rm-showcase-actions {
    display: flex;
    gap: 8px;
}

/* The last slide: every trade (block 2), the whole slide one link. */
.rm-showcase-slide--all {
    --sc-a: #4338ca;
    --sc-b: #7e22ce;
    padding: 0;
}

.rm-showcase-all-link {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    color: inherit;
    text-decoration: none;
    background:
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .22) 0 34px, transparent 35px),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .14) 0 22px, transparent 23px);
}

.rm-showcase-all-link .rm-showcase-text {
    flex: 1 1 auto;
}

.rm-showcase-all-link .rm-showcase-btn {
    flex: 0 0 auto;
}

.rm-showcase-all-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -4px;
}

.rm-showcase-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.rm-showcase-btn--need {
    background: #fff;
    color: var(--sc-b);
    box-shadow: none;
}

.rm-showcase-btn--work {
    border: 2px solid rgba(255, 255, 255, .85);
    color: #fff;
    border-width: 1.5px;
}

.rm-showcase-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.rm-showcase-dots {
    display: flex;
    justify-content: center;
    height: 20px;
}

.rm-showcase-dot {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.rm-showcase-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--muted);
    opacity: .55;
}

.rm-showcase-dot[aria-current="true"]::before {
    width: 14px;
    background: var(--accent);
    opacity: 1;
}

/* A window of seven dots moves with the slide (showcase.js): the far
   ones are hidden, the window's ends smaller when more lie beyond. */
.rm-showcase-dot[data-far] {
    display: none;
}

.rm-showcase-dot[data-edge]::before {
    width: 4px;
    height: 4px;
}

.rm-showcase-dot:focus-visible {
    outline: 2px solid var(--primary);
    border-radius: 50%;
}

/* /app/trades: every trade of the showcase as a grid of its scenes. */
.rm-trades-title {
    margin: var(--space-2) 0 var(--space-3);
}

.rm-trades-page > .rm-intent {
    margin-block-end: var(--space-3);
}

.rm-trades {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-block-end: var(--space-4);
}

.rm-trade-tile {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--sc-a), var(--sc-b));
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.rm-trade-art {
    display: block;
    aspect-ratio: 160 / 112;
    background: var(--sc-tint);
}

.rm-trade-art img {
    display: block;
    width: 100%;
    height: 100%;
}

.rm-trade-name {
    padding: 8px 10px;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
}

.rm-trade-tile:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .rm-showcase-dot::before {
        transition: width .2s ease, background-color .2s ease;
    }

    /* Life inside a scene (showcase_scenes.rs): the sofa sways, the
       movers and the walkers step, the lamp flickers, the spark twinkles,
       the balloon floats. Only the slide in view moves (`data-current`,
       set by showcase.js; until it runs — the first one). */
    .rm-scene .sc-sway,
    .rm-scene .sc-step,
    .rm-scene .sc-spark,
    .rm-scene .sc-float,
    .rm-scene .sc-rise {
        transform-box: fill-box;
    }

    .rm-scene .sc-sway {
        transform-origin: center;
        animation: sc-sway 2.2s ease-in-out infinite alternate;
    }

    .rm-scene .sc-step {
        animation: sc-step .55s ease-in-out infinite alternate;
    }

    .rm-scene .sc-step--late {
        animation-delay: -.275s;
    }

    .rm-scene .sc-blink {
        animation: sc-blink 3.2s linear infinite;
    }

    .rm-scene .sc-spark {
        transform-origin: center;
        animation: sc-spark 1.1s ease-in-out infinite alternate;
    }

    .rm-scene .sc-float {
        transform-origin: 0 100%;
        animation: sc-float 2.6s ease-in-out infinite alternate;
    }

    /* Steam, bubbles, notes: drift up and fade, then start again. */
    .rm-scene .sc-rise {
        animation: sc-rise 2.4s ease-out infinite;
    }

    .rm-scene .sc-rise--late {
        animation-delay: -1.2s;
    }

    .rm-showcase-slide:not([data-current]) .rm-scene * {
        animation-play-state: paused;
    }

    .rm-showcase-track:not(.is-ready) > .rm-showcase-slide:first-child .rm-scene * {
        animation-play-state: running;
    }
}

@keyframes sc-sway {
    from { transform: rotate(-2.5deg); }
    to { transform: rotate(2deg) translateY(-1px); }
}

@keyframes sc-step {
    from { transform: translateY(0); }
    to { transform: translateY(-1.2px); }
}

@keyframes sc-blink {
    0%, 62%, 70%, 78%, 100% { opacity: 1; }
    66%, 74% { opacity: .15; }
}

@keyframes sc-spark {
    from { transform: scale(.65) rotate(0deg); opacity: .6; }
    to { transform: scale(1.1) rotate(20deg); opacity: 1; }
}

@keyframes sc-rise {
    0% { transform: translateY(2px); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-5px); opacity: 0; }
}

@keyframes sc-float {
    from { transform: rotate(-3deg) translateY(0); }
    to { transform: rotate(3deg) translateY(-2px); }
}

/* The work book page (plan item 345): the totals as figures, then one
   card per confirmed work; the book itself is plan item 350. */
.rm-work-book-summary {
    display: grid;
    gap: 12px;
}

.rm-work-book-stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}

.rm-work-book-stat {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.rm-work-book-stat strong {
    font-size: 24px;
    line-height: 1.15;
}

.rm-work-book-stat span {
    color: var(--muted);
    font-size: var(--text-xs);
}

.rm-work-book-rubrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-work-book-rubrics li {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--emphasis);
    font-size: var(--text-xs);
    font-weight: 600;
}

.rm-work-book {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-work-book-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.rm-work-book-mark {
    flex: none;
    color: var(--success);
}

.rm-work-book-mark .icon {
    width: 20px;
    height: 20px;
}

.rm-work-book-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.rm-work-book-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.rm-work-book-what {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rm-work-book-stars {
    flex: none;
    color: var(--warning);
    font-size: var(--text-sm);
    letter-spacing: 1px;
}

.rm-work-book-stars-off {
    color: var(--line-strong);
}

/* Smooth moves between pages (plan item 403): the browser cross-fades one
   page into the next; a listing card's photo grows into the listing page's
   photo (VIEW_TRANSITION_JS in document.rs names the pair). The bottom menu
   stays in place. Off for people who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
    .bottom-nav {
        view-transition-name: rm-bottom-nav;
    }
    ::view-transition-group(*) {
        animation-duration: 220ms;
        animation-timing-function: cubic-bezier(.2, 0, 0, 1);
    }
    ::view-transition-image-pair(listing-photo) {
        overflow: hidden;
        border-radius: var(--radius-md, 12px);
    }
}

/* «Demand nearby» in the Workshop (plan item 411): a big number and a line
   per trade. */
.rm-demand-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
}

.rm-demand-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-demand-list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.rm-demand-count {
    min-inline-size: 2ch;
    color: var(--primary);
    font-size: var(--text-xl, 22px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The video card (plan item 412): a phone video, usually upright — no
   taller than most of the screen, centred on dark. */
.rm-video-card {
    margin: 0 0 var(--space-3);
}

.rm-video-card-frame {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
}

.rm-video-card-frame.is-processing {
    padding: var(--space-4) var(--space-3);
    background: var(--surface);
}

.rm-video-card-frame .rm-resume-delete {
    position: absolute;
    inset-inline-end: 4px;
    inset-block-start: 4px;
}

.rm-video-card-player {
    display: block;
    inline-size: 100%;
    max-block-size: 70vh;
    margin-inline: auto;
    background: #000;
}

.rm-public-video {
    padding: 0;
    overflow: hidden;
    background: #000;
}

/* Booking by time (plan item 409): the worker's week — a day per row with
   two clock fields — and the client's free slots as chips per day. */
.rm-book-card {
    display: grid;
    gap: var(--space-3);
}

.rm-book-form {
    display: grid;
    gap: var(--space-3);
}

.rm-book-intro {
    margin: 0;
}

.rm-book-heading {
    margin: 0;
    padding: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.rm-book-week {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.rm-book-day {
    display: grid;
    /* The day a fixed column, the clocks share the rest: a 12-hour
       «09:00 AM» fits on a phone. */
    grid-template-columns: 4.75em minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
}

.rm-book-time {
    min-inline-size: 0;
    padding-inline: 8px;
    font-variant-numeric: tabular-nums;
}

.rm-book-day:has(input[type="checkbox"]:not(:checked)) .rm-book-time {
    opacity: .45;
}

.rm-book-offs {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-book-off {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.rm-book-off form {
    margin: 0;
}

.rm-book-off-add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rm-book-off-add .ui-input {
    flex: 1 1 10em;
    min-inline-size: 0;
}

/* A day per row; open, its chips under it. */
.rm-book-slot-day {
    margin: 0;
    padding: 0;
    border-block-end: 1px solid rgba(var(--text-rgb), .12);
}

.rm-book-slot-day[open] {
    padding-block-end: var(--space-3);
}

.rm-book-day-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 48px;
    cursor: pointer;
    list-style: none;
}

.rm-book-day-row::-webkit-details-marker {
    display: none;
}

.rm-book-day-row::marker {
    content: "";
}

.rm-book-day-span {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: var(--text-sm, .875rem);
    font-variant-numeric: tabular-nums;
}

.rm-book-day-row svg {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    transform: rotate(90deg);
    transition: transform .15s;
}

.rm-book-slot-day[open] .rm-book-day-row svg {
    transform: rotate(-90deg);
}

.rm-book-slots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rm-book-slot {
    position: relative;
}

.rm-book-slot input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.rm-book-slot span {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 14px;
    border: 1px solid rgba(var(--text-rgb), .3);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rm-book-slot input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

.rm-book-slot input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.rm-book-empty {
    margin: 0;
}

/* Bookings work: a line saying so and the way to the client's view. */
.rm-book-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.rm-book-live-text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
}

.rm-book-live-text svg {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    color: var(--success, var(--primary));
}

/* The worker's own page: the chips are a picture, not a choice. */
.rm-book-preview .rm-book-slot span {
    cursor: default;
}

.rm-public-book {
    display: flex;
    justify-content: center;
    gap: 8px;
    inline-size: 100%;
    margin-top: 10px;
}

/* -----------------------------------------------------------
   MODERN LAYER (owner, 2026-10-19: "the most modern app, not an attempt
   at modern"). Where a rule has one canonical place (tests_public_entry)
   the change is made there; what is here overrides shared groups, so it
   stays last in the file. Principles:
   · surfaces separate by tone, not by outlines — cards carry no border;
   · buttons are pills: the one filled action of a screen, every other
     action an outline on the page's own colour;
   · a 3D icon stands on its own, without a white plate; a line icon
     sits on a quiet tonal plate, no gradient, no emboss.
----------------------------------------------------------- */

.card,
.rm-settings-card,
.rm-mod-card,
.rm-resource-section,
.rm-my-resource-card,
.rm-sessions-panel,
.rm-public-profile-card,
.rm-public-section--intent,
.rm-lang-picker,
.rm-promo-preview,
.rm-promo-pending,
.rm-guest-panel,
.rm-search-intent-box,
.rm-skeleton-card {
    border-color: transparent;
}

.ui-button--secondary,
.rm-resource-contact-btn--neutral {
    border: 1.5px solid var(--line-strong);
    background: transparent;
}

@media (hover: hover) {
    .ui-button--secondary:hover,
    .rm-resource-contact-btn--neutral:hover {
        background: var(--fill-soft);
    }
}

.rm-menu-row-icon,
.card-icon:not(.card-icon--3d),
.rm-notif-icon {
    background: var(--fill-soft);
    box-shadow: none;
    border-radius: var(--radius-sm);
}

.rm-menu-row-icon .icon,
.card-icon:not(.card-icon--3d) > .icon {
    filter: none;
}

.rm-menu-row-icon:has(> .i3d),
.card-icon:not(.card-icon--3d):has(> .i3d),
.rm-notif-icon:has(> .i3d) {
    background: transparent;
}

:root:not([data-theme="light"]) .rm-intent-part.is-active {
    background: rgba(var(--text-rgb), .16);
}

.rm-intent-part.is-active .rm-intent-name {
    font-weight: 600;
}

/* Bars the page scrolls under: translucent, the content behind blurred.
   Without backdrop-filter they stay opaque (plan item 234: text showed
   through a plain 94% fill). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bottom-nav,
    .rm-resource-actionbar {
        background: color-mix(in srgb, var(--surface) 86%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }
}

/* A tap answers at once: what is pressed sinks a little. */
.card,
.nav-item,
.rm-kind-chip,
.rm-resource-contact-btn,
.rm-menu-row,
.rm-intent-part:not(.is-active) {
    transition-property: transform, background, color, opacity;
    transition-duration: .12s;
    transition-timing-function: ease;
}

.card:active,
a.rm-menu-row:active,
a.rm-profile-row:active,
.rm-resource-contact-btn:active,
.rm-kind-chip:active {
    transform: scale(.98);
}

.nav-item:active .icon {
    transform: scale(.9);
}

@media (prefers-reduced-motion: reduce) {
    .card:active,
    a.rm-menu-row:active,
    a.rm-profile-row:active,
    .rm-resource-contact-btn:active,
    .rm-kind-chip:active,
    .ui-button:active,
    .nav-item:active .icon {
        transform: none;
    }
}

/* The listing page (plan item 425): the text of the listing is the page,
   not a card on it — a small heading, the text, a hairline before the
   next part. The price is the largest figure; «Report» is a quiet link,
   not a second button. Two classes on the section: it wins over the
   shared card rule («Карточки и панели»). */
.rm-resource-section.rm-resource-section--plain {
    padding: 18px 2px 4px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.rm-resource-section--plain .rm-resource-section-kicker {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.01em;
}

.hero .rm-resource-listing-label {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--fill-soft);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 500;
}

.rm-resource-report-open.ui-button--secondary {
    min-height: 36px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
}

@media (hover: hover) {
    .rm-resource-report-open.ui-button--secondary:hover {
        background: transparent;
        color: var(--text);
    }
}

.hero p:has(> .rm-resource-listing-label) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.hero p:has(> .rm-resource-listing-label) .rm-resource-rating-summary {
    margin: 0;
}

/* Тема по системе для страниц без скриптов (п. 193), из :root[data-theme="light"]. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
    --bg: #f5f4f2;
    --bg-soft: #ebe9e6;
    --surface: #ffffff;
    --card: #ffffff;
    --card-hover: #faf9f7;
    --surface-2: #ffffff;
    --line: rgba(28, 25, 23, .09);
    --line-strong: rgba(28, 25, 23, .2);
    --text-rgb: 28, 25, 23;

    --text: #1c1917;
    --muted: #5c5650;
    --text-muted: #5c5650;

    /* Terracotta by day: white on it 6.5:1, as text on --bg 5.8:1. */
    --accent: #9c4226;
    --accent-rgb: 156, 66, 38;
    --accent-soft: rgba(156, 66, 38, .10);
    --on-accent: #ffffff;
    --emphasis: #85371f;
    --emphasis-light: #9c4226;
    --emphasis-soft: rgba(156, 66, 38, .10);
    --on-gold: #ffffff;
    --gold-fill: var(--primary);
    --on-gold-fill: #ffffff;

    --primary: var(--accent);
    --primary-light: #b04d2c;
    --primary-rgb: 156, 66, 38;
    --on-primary: #ffffff;

    --teal: #0f766e;
    --teal-rgb: 15, 118, 110;
    --info: #0f766e;

    /* Day status inks: ≥ 4.5:1 on --bg, --bg-soft and on their own 12 %
       plate (--danger-soft) — the earlier #c73a47/#976d00/#15803d fell to
       3.9–4.3:1 there (2026-10-18). */
    --success: #137337;
    --status-ok: #137337;
    --warning: #7f5c00;
    --on-warning: #ffffff;
    --danger: #b02a37;
    --on-danger: #ffffff;
    --status-bad: #b91c1c;
    --badge-bg: #dc2626;
    --badge-text: #ffffff;

    --bubble-mine: color-mix(in srgb, var(--accent) 12%, #ffffff);
    --bubble-peer: #ffffff;
    --chat-peer-bg: #ffffff;
    --chat-peer-text: var(--text);
    --chat-composer-bg: var(--surface);
    --chat-input-bg: var(--bg);
    --chat-input-text: var(--text);
    --chat-input-placeholder: var(--muted);
    --chat-listing-bg: #ffffff;
    --chat-listing-text: var(--text);

    --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06);
    --shadow-md: 0 4px 14px rgba(28, 25, 23, .08);
    --shadow-lg: 0 12px 32px rgba(28, 25, 23, .12);
    --backdrop: rgba(28, 25, 23, .4);

    --theme-color: #f5f4f2;
    color-scheme: light;

    /* 3D icons by day: warm graphite clay with terracotta details — dark
       enough to read on pastel tiles and white plates without a darkening filter
       (og_image.rs copies these values; a test keeps them in step). */
    --i3-m1: #a39d97; --i3-m2: #7d7671; --i3-m3: #57514c;
    --i3-d1: #5a5450; --i3-d2: #403b38; --i3-d3: #2a2624;
    --i3-a1: #f6a980; --i3-a2: #e47b52; --i3-a3: #b9532f;
    /* Tile-tone accents (icons3d::tinted). */
    --i3-amber1: #ffd27a; --i3-amber2: #f2a93b; --i3-amber3: #c27a17;
    --i3-blue1: #8fc1f5; --i3-blue2: #4f8fdc; --i3-blue3: #2f62a8;
    --i3-teal1: #7fdccb; --i3-teal2: #2fb39e; --i3-teal3: #1d7f70;
    --i3-green1: #a6dc84; --i3-green2: #67b545; --i3-green3: #3f8429;
    --i3-violet1: #c6a8f5; --i3-violet2: #9670e0; --i3-violet3: #6646b0;
    --i3-p1: #fffaf4; --i3-p2: #efe4d8; --i3-p3: #c9b8a6;
    --i3-g1: #3d4a5c; --i3-g2: #1f2632;
    --i3-shine: .18; --i3-floor: .22; --i3-side: #2a1c14;
    --i3-rim: .55; --i3-shadow: .28; --i3-inner: .32; --i3-shadow-col: #4a2c1c;
    --i3-plate: linear-gradient(160deg, #f6f7f9, #e6e9ed);
    --i3-tile-bg: linear-gradient(180deg, #ffffff, #e9ecf0);
    --i3-tile-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(28, 25, 23, .08), 0 1px 2px rgba(28, 25, 23, .12);
    --i3-emboss: drop-shadow(0 1px 0 rgba(255, 255, 255, .95));
    /* Rubric tiles by day: pastel; the steel is medium-dark by itself. */
    --tone-amber-1: #fdf0d9; --tone-amber-2: #f3dcb3;
    --tone-blue-1: #e4eefb; --tone-blue-2: #cadcf2;
    --tone-teal-1: #ddf3f0; --tone-teal-2: #bfe4df;
    --tone-green-1: #e5f3e2; --tone-green-2: #cae5c4;
    --tone-coral-1: #feeeeb; --tone-coral-2: #f8d9d4;
    --tone-violet-1: #ede7fb; --tone-violet-2: #d8cef3;
    --tone-slate-1: #eff2f5; --tone-slate-2: #d9dee4;
    --tile-gloss: rgba(255, 255, 255, .75);
    --tile-rim: rgba(255, 255, 255, .95);
    --tile-shadow: 0 1px 2px rgba(28, 25, 23, .16), 0 4px 10px -3px rgba(28, 25, 23, .26);
    --tile-icon-filter: contrast(1.05);
}
}