/* Expanded runtime CSS entrypoint. Keep this file import-free for WebView route transitions. */

/* brigade-profile-desktop/01-brigade-profile-desktop.css */
/* Source: 3.2 Стройбан - Профиль рабочего (десктоп).html
   Extracted from v3 mock on 2026-07-13. */

.brigade-profile-page-shell { font-size: 16px; color: var(--foreground); }

.brigade-profile-page-shell .wrap { max-width: 1344px; margin: 0 auto; padding: 0 24px; }

.brigade-profile-page-shell a { color: inherit; text-decoration: none; }

/* ===== header (утверждён, из проекта «Заказы») ===== */

.sb-header { position: sticky; top: 0; z-index: 40; }

.brigade-profile-page-shell .hdr-inner { display: flex; align-items: center; gap: 28px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ===== breadcrumb ===== */

.brigade-profile-page-shell .crumb { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--foreground); padding: 18px 0 14px; flex-wrap: wrap; }

.brigade-profile-page-shell .crumb a:hover { color: var(--foreground); }

.brigade-profile-page-shell .crumb i, .brigade-profile-page-shell .crumb svg.lucide { width: 13px; height: 13px; }

.brigade-profile-page-shell .crumb .here { color: var(--foreground); }

/* ===== hero (dark) ===== */

.brigade-profile-page-shell .phero { background: #111; color: #fff; border-radius: 20px; padding: 30px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }

.brigade-profile-page-shell .phero .pic { width: 132px; height: 132px; border-radius: 22px; background: #1d1d1d; flex: none; display: grid; place-items: center; color: var(--on-surface-inverse); overflow: hidden; border: 2px solid #2a2a2a; font-size: 40px; font-weight: 800; letter-spacing: -.02em; }

.brigade-profile-page-shell .phero-main { flex: 1; min-width: 260px; }

.brigade-profile-page-shell .phero-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.brigade-profile-page-shell .phero-name h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }

.brigade-profile-page-shell .phero-badges { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/*
  Only the «Демо» badge wears this now. It used to be hidden here and re-shown through a
  page class that every profile carried: the «Проверен» badge it drew was true of
  nobody, because nothing in the product checks a performer's documents. The badge and the class
  are gone until such a check exists; the demo badge must not depend on either.
*/
.brigade-profile-page-shell .ver-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,204,53,.16); color: var(--primary); font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }

.brigade-profile-page-shell .ver-badge i, .brigade-profile-page-shell .ver-badge svg.lucide { width: 15px; height: 15px; }

.brigade-profile-page-shell .status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }

.brigade-profile-page-shell .status-pill .dot { width: 8px; height: 8px; border-radius: 50%; }

.brigade-profile-page-shell .pill-free { background: rgba(64,180,120,.16); color: #5fd39a; }

.brigade-profile-page-shell .pill-free .dot { background: #5fd39a; }

.brigade-profile-page-shell .pill-busy { background: rgba(255,255,255,.1); color: var(--on-surface-inverse); }

.brigade-profile-page-shell .pill-busy .dot { background: #c9c9c9; }

/* Status and start date read as one answer, so they sit on one row under the speciality. */
.brigade-profile-page-shell .phero-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }

.brigade-profile-page-shell .phero-start { font-size: 15px; font-weight: 600; }

.brigade-profile-page-shell.is-free .phero-start { color: var(--success); }

.brigade-profile-page-shell:not(.is-free) .phero-start { color: var(--on-surface-inverse); }

.brigade-profile-page-shell .phero-spec { font-size: 17px; color: var(--on-surface-inverse); margin: 9px 0 16px; }

.brigade-profile-page-shell .phero-meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.brigade-profile-page-shell .phero-meta .m { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--on-surface-inverse); }

.brigade-profile-page-shell .phero-meta .m i, .brigade-profile-page-shell .phero-meta .m svg.lucide { width: 17px; height: 17px; color: #9a9a9a; }

.brigade-profile-page-shell .phero-meta .rate { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .phero-meta .rate i, .brigade-profile-page-shell .phero-meta .rate svg.lucide { color: var(--primary); }

.brigade-profile-page-shell .phero-meta .m a { color: var(--on-surface-inverse); text-decoration: underline; text-underline-offset: 3px; }

.brigade-profile-page-shell .new-meta { display: none; }

.brigade-profile-page-shell .is-new .new-meta { display: inline-flex; }

.brigade-profile-page-shell .is-new .exp-meta { display: none; }

/* ===== layout ===== */

.brigade-profile-page-shell .layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; padding: 24px 0 80px; align-items: start; }

/* The sidebar is two asides inside one column wrapper, so that the phone can lift the contacts
   out of the column without the cards the mockup keeps further down. The wrapper is what the
   grid places; the asides stack inside it. Placing the two asides directly in the grid instead
   put them in separate rows, which stranded the detail cards most of a page below the contacts. */
.brigade-profile-page-shell .layout > .rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

@media (max-width: 1024px){ .brigade-profile-page-shell .layout { grid-template-columns: 1fr; } }

.brigade-profile-page-shell main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ===== card section ===== */

.brigade-profile-page-shell .brigade-profile-section-card { padding: 26px; }

.brigade-profile-page-shell .brigade-profile-section-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }

.brigade-profile-page-shell .brigade-profile-section-card-header h2 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.brigade-profile-page-shell .brigade-profile-section-card-header .cnt { font-size: 14px; color: var(--foreground); font-weight: 500; }

.brigade-profile-page-shell .brigade-profile-section-card-header .all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--foreground); }

.brigade-profile-page-shell .brigade-profile-section-card-header .all i, .brigade-profile-page-shell .brigade-profile-section-card-header .all svg.lucide { width: 16px; height: 16px; }

.brigade-profile-page-shell .profile-empty { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; background: color-mix(in oklch, var(--muted) 72%, var(--card)); color: var(--foreground); }

.brigade-profile-page-shell .profile-empty-icon { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 12px; background: var(--card); color: var(--muted-foreground); box-shadow: var(--shadow-xs); }

.brigade-profile-page-shell .profile-empty-icon i, .brigade-profile-page-shell .profile-empty-icon svg { width: 22px; height: 22px; }

.brigade-profile-page-shell .profile-empty-title { color: var(--foreground); font-size: 16px; font-weight: 700; line-height: 1.25; }

.brigade-profile-page-shell .profile-empty p { max-width: 520px; margin: 4px 0 0; font-size: 14px; line-height: 1.45; }

.brigade-profile-page-shell .about-text { font-size: 17px; line-height: 1.62; color: var(--foreground); margin: 0; text-wrap: pretty; }

/* A bio runs as long as its author likes, and a full one pushed the price table and the reviews
   below the fold -- the two things a customer came to compare. Six lines, then a toggle. */
.brigade-profile-page-shell .about-text[data-clamped="true"] { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

.brigade-profile-page-shell .about-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; height: auto; padding: 0; font-size: 15px; font-weight: 600; color: var(--foreground); }

.brigade-profile-page-shell .about-toggle i, .brigade-profile-page-shell .about-toggle svg { width: 16px; height: 16px; transition: transform 0.15s ease; }

.brigade-profile-page-shell .about-toggle[aria-expanded="true"] i, .brigade-profile-page-shell .about-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce){ .brigade-profile-page-shell .about-toggle i, .brigade-profile-page-shell .about-toggle svg { transition: none; } }

.brigade-profile-page-shell .tag-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

.brigade-profile-page-shell .tag { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px; background: var(--muted); font-size: 14px; font-weight: 600; }

.brigade-profile-page-shell .tag i, .brigade-profile-page-shell .tag svg.lucide { width: 15px; height: 15px; color: var(--primary-hover); }

/* ===== specialties (skills) ===== */

.brigade-profile-page-shell .skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 640px){ .brigade-profile-page-shell .skill-grid { grid-template-columns: 1fr; } }

.brigade-profile-page-shell .skill { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; }

.brigade-profile-page-shell .skill .sk-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--muted); display: grid; place-items: center; flex: none; }

.brigade-profile-page-shell .skill .sk-ic i, .brigade-profile-page-shell .skill .sk-ic svg.lucide { width: 21px; height: 21px; color: var(--foreground); }

.brigade-profile-page-shell .skill .sk-nm { font-size: 16px; font-weight: 600; }

.brigade-profile-page-shell .skill .sk-lv { font-size: 13px; color: var(--foreground); margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; }

/* Same: years of experience are read, not clicked, and sit on the light card. */
.brigade-profile-page-shell .skill .sk-lv .yr { color: var(--foreground); font-weight: 600; }

/* ===== rates ===== */

.brigade-profile-page-shell .rate-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }

@media (max-width: 640px){ .brigade-profile-page-shell .rate-top { grid-template-columns: 1fr; } }

.brigade-profile-page-shell .rate-box { border: 1px solid var(--border); border-radius: 14px; padding: 18px; }

.brigade-profile-page-shell .rate-box .rb-lbl { font-size: 13px; color: var(--foreground); display: inline-flex; align-items: center; gap: 7px; }

.brigade-profile-page-shell .rate-box .rb-lbl i, .brigade-profile-page-shell .rate-box .rb-lbl svg.lucide { width: 15px; height: 15px; color: var(--primary-hover); }

.brigade-profile-page-shell .rate-box .rb-v { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .rate-box .rb-v .u { font-size: 15px; font-weight: 600; color: var(--foreground); }

.brigade-profile-page-shell .rate-box .rb-mkt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }

.brigade-profile-page-shell .rate-box .rb-mkt-l { font-size: 12.5px; color: var(--foreground); }

.brigade-profile-page-shell .rate-box .rb-mkt-v { font-size: 15px; font-weight: 700; color: var(--text-success); font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .svc-note { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--foreground); line-height: 1.5; margin: 20px 0 6px; }

.brigade-profile-page-shell .svc-note i, .brigade-profile-page-shell .svc-note svg.lucide { width: 16px; height: 16px; color: var(--primary-hover); flex: none; margin-top: 1px; }

/* brigade-profile-desktop/02-brigade-profile-desktop.css */
.brigade-profile-page-shell .svc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 22px; align-items: center; padding: 15px 0; border-top: 1px solid var(--border); }

.brigade-profile-page-shell .svc-row:first-of-type { border-top: none; }

@media (max-width: 640px){ .brigade-profile-page-shell .svc-row { grid-template-columns: 1fr auto; } .brigade-profile-page-shell .svc-row .svc-market { display: none; } }

.brigade-profile-page-shell .svc-work .nm { font-size: 16px; font-weight: 600; }

.brigade-profile-page-shell .svc-work .un { font-size: 13px; color: var(--foreground); margin-top: 2px; }

.brigade-profile-page-shell .svc-market { text-align: right; }

.brigade-profile-page-shell .svc-market .lbl { font-size: 11px; color: var(--foreground); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }

.brigade-profile-page-shell .svc-market .v { font-size: 14px; color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }

.brigade-profile-page-shell .svc-price { text-align: right; min-width: 130px; }

/* How far this rate is from the market median, shown only when the gap reaches a fifth. Red above
   the market and green below it reads from the customer's side: dearer is what gives them pause.
   The colours are the price-movement tokens, which already carry that meaning in the rate
   directory, rather than destructive/success, which mean "error" and "done" elsewhere. */
.brigade-profile-page-shell .svc-dev { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* `color-mix` darkens the token itself rather than replacing it with a hand-picked hex: the badge
   stays tied to the design system, and a change there carries through. Needed because the tokens
   are tuned for larger figures -- on this 11.5px pill they measured 4.07:1 and 2.97:1 against
   their own tints, below the 4.5:1 floor. Mixed with black they reach 5.4:1 and 4.6:1. */
.brigade-profile-page-shell .svc-dev[data-direction="above"] { color: color-mix(in oklab, var(--price-up) 88%, var(--foreground)); background: var(--surface-danger-subtle); }

.brigade-profile-page-shell .svc-dev[data-direction="below"] { color: color-mix(in oklab, var(--price-down) 84%, var(--foreground)); background: var(--surface-success-subtle); }

.brigade-profile-page-shell .svc-price .lbl { font-size: 11px; color: var(--foreground); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }

.brigade-profile-page-shell .svc-price .pp { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* locked pattern */

.brigade-profile-page-shell .lockable { position: relative; display: inline-flex; align-items: center; gap: 7px; }

.brigade-profile-page-shell .lockable .lk { display: none; width: 15px; height: 15px; color: var(--foreground); }

.brigade-profile-page-shell.is-guest .lockable .lv { filter: blur(6px); user-select: none; }

.brigade-profile-page-shell.is-guest .lockable .lk { display: inline-block; }

/* A rate the server withheld is drawn locked because of what it is, not because of who the header
   says is reading: the value under it is a placeholder, and showing dots un-blurred would read as
   a broken price. */
.brigade-profile-page-shell .lockable[data-locked] .lv { filter: blur(6px); user-select: none; }

.brigade-profile-page-shell .lockable[data-locked] .lk { display: inline-block; }

.brigade-profile-page-shell .svc-unlock { margin-top: 18px; display: none; align-items: center; gap: 11px; background: var(--surface-accent-subtle); border: 1px solid var(--primary); border-radius: 12px; padding: 13px 16px; font-size: 14px; color: var(--foreground); }

.brigade-profile-page-shell.is-guest .svc-unlock { display: flex; }

.brigade-profile-page-shell .svc-unlock i, .brigade-profile-page-shell .svc-unlock svg.lucide { width: 18px; height: 18px; color: var(--text-accent); flex: none; }

.brigade-profile-page-shell .svc-unlock b { font-weight: 700; }

.brigade-profile-page-shell .svc-unlock .lnk { margin-left: auto; }

/* ===== experience timeline ===== */

.brigade-profile-page-shell .xp { display: flex; flex-direction: column; }

.brigade-profile-page-shell .xp-row { display: flex; gap: 16px; padding: 4px 0; }

.brigade-profile-page-shell .xp-rail { display: flex; flex-direction: column; align-items: center; flex: none; }

.brigade-profile-page-shell .xp-dot { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--primary); background: var(--card); margin-top: 5px; }

.brigade-profile-page-shell .xp-line { width: 2px; flex: 1; background: var(--border); margin: 4px 0; }

.brigade-profile-page-shell .xp-row:last-child .xp-line { display: none; }

.brigade-profile-page-shell .xp-body { padding-bottom: 22px; }

.brigade-profile-page-shell .xp-row:last-child .xp-body { padding-bottom: 0; }

.brigade-profile-page-shell .xp-period { font-size: 13px; color: var(--foreground); font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .xp-role { font-size: 16px; font-weight: 600; margin-top: 2px; }

.brigade-profile-page-shell .xp-where { font-size: 14px; color: var(--foreground); margin-top: 2px; }

/* `--foreground`: the accent measures 1.65:1 on the light card, against a 4.5:1 floor for body
   text. The underline already marks this as a link, so the colour was carrying no meaning. */
.brigade-profile-page-shell .xp-where a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

/* ===== brigades ===== */

.brigade-profile-page-shell .brig-grid { display: flex; flex-direction: column; gap: 12px; }

.brigade-profile-page-shell .brig { display: flex; align-items: flex-start; gap: 14px; padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; transition: box-shadow .15s ease; }

.brigade-profile-page-shell .brig:hover { box-shadow: var(--shadow-sm); }

.brigade-profile-page-shell .brig .bav { width: 50px; height: 50px; border-radius: 13px; background: var(--secondary); color: var(--secondary-foreground); display: grid; place-items: center; flex: none; }

.brigade-profile-page-shell .brig .bav i, .brigade-profile-page-shell .brig .bav svg.lucide { width: 22px; height: 22px; }

.brigade-profile-page-shell .brig .bbody { flex: 1; min-width: 0; }

.brigade-profile-page-shell .brig .bn { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.brigade-profile-page-shell .brig .bn > i, .brigade-profile-page-shell .brig .bn > [data-slot="icon-anchor"] > i, .brigade-profile-page-shell .brig .bn > svg.lucide, .brigade-profile-page-shell .brig .bn > [data-slot="icon-anchor"] > svg.lucide { width: 15px; height: 15px; color: var(--primary); }

.brigade-profile-page-shell .brig-role { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--muted); color: var(--foreground); }

.brigade-profile-page-shell .brig-role.lead { background: rgba(255,204,53,.2); color: var(--text-accent); }

.brigade-profile-page-shell .brig-role i, .brigade-profile-page-shell .brig-role svg.lucide { width: 12px; height: 12px; }

.brigade-profile-page-shell .brig .bper { font-size: 12.5px; color: var(--foreground); margin-top: 4px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }

.brigade-profile-page-shell .brig .bper i, .brigade-profile-page-shell .brig .bper svg.lucide { width: 13px; height: 13px; }

.brigade-profile-page-shell .brig .bm { font-size: 13.5px; color: var(--foreground); margin-top: 6px; }

/* ===== portfolio ===== */

.brigade-profile-page-shell .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

@media (max-width: 640px){ .brigade-profile-page-shell .pf-grid { grid-template-columns: 1fr 1fr; } }

.brigade-profile-page-shell .pf { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; background: var(--card); transition: box-shadow .15s ease, transform .12s ease; }

.brigade-profile-page-shell .pf:hover { box-shadow: var(--shadow-md); }

.brigade-profile-page-shell .pf:hover .pf-img { color: var(--foreground); }

.brigade-profile-page-shell .pf-img { position: relative; height: 156px; background: var(--muted); display: grid; place-items: center; color: oklch(0.78 0 0); }

.brigade-profile-page-shell .pf-img i, .brigade-profile-page-shell .pf-img svg.lucide { width: 30px; height: 30px; }

.brigade-profile-page-shell .pf-cap .t { font-size: 15px; font-weight: 600; }

.brigade-profile-page-shell .pf-cap .s { font-size: 13px; color: var(--foreground); margin-top: 2px; }

/* The cards are Buttons, so the primitive's centring and nowrap have to be undone: its child
   would otherwise sit in the middle of the card and refuse to wrap. Learned on the order card,
   where the same nesting silently shrank a 312px photo to 89px. */
.brigade-profile-page-shell .pf, .brigade-profile-page-shell .pf-hero { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; white-space: normal; text-align: left; font-weight: inherit; }

.brigade-profile-page-shell .pf-head-actions { display: flex; align-items: center; gap: 14px; }

/* The performer's own pick, shown large above the grid: a wall of equal thumbnails gave the
   reader no way in. */
.brigade-profile-page-shell .pf-hero { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; background: var(--card); margin-bottom: 14px; transition: box-shadow .15s ease; }

.brigade-profile-page-shell .pf-hero:hover { box-shadow: var(--shadow-md); }

.brigade-profile-page-shell .pfh-img { position: relative; height: 300px; background: var(--muted); display: grid; place-items: center; color: oklch(0.78 0 0); }

.brigade-profile-page-shell .pfh-img i, .brigade-profile-page-shell .pfh-img svg { width: 42px; height: 42px; }

.brigade-profile-page-shell .pfh-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; background: var(--primary); color: var(--primary-foreground); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }

.brigade-profile-page-shell .pfh-cap { display: flex; flex-direction: column; gap: 5px; padding: 14px 18px 16px; }

.brigade-profile-page-shell .pfh-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.brigade-profile-page-shell .pfh-t { font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.brigade-profile-page-shell .pfh-s { font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Volume and term: read, not clicked, and lined up so several cards compare at a glance. */
.brigade-profile-page-shell .pf-facts { font-size: 13.5px; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .pf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.brigade-profile-page-shell .pf-cap { display: flex; flex-direction: column; gap: 4px; padding: 12px 15px 14px; min-width: 0; }

/* Only shown when there is more than the cover to see. */
.brigade-profile-page-shell .pf-photos { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,.42); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .pfh-img .pf-photos { bottom: 14px; left: 14px; font-size: 12.5px; padding: 4px 10px; }

@media (max-width: 640px){ .brigade-profile-page-shell .pfh-img { height: 200px; } }

/* lightbox */

.brigade-profile-page-shell .lb-overlay { position: fixed; inset: 0; background: oklch(0.145 0 0 / 0.78); backdrop-filter: blur(2px); z-index: 90; display: grid; place-items: center; padding: 32px; }

.brigade-profile-page-shell .lb { width: min(820px, 92vw); }

.brigade-profile-page-shell .lb-stage { aspect-ratio: 16/10; background: #1a1a1a; border-radius: 16px; display: grid; place-items: center; color: var(--on-surface-inverse); position: relative; overflow: hidden; }

.brigade-profile-page-shell .lb-stage i, .brigade-profile-page-shell .lb-stage svg.lucide { width: 56px; height: 56px; }

.brigade-profile-page-shell .lb-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; color: #fff; }

.brigade-profile-page-shell .lb-cap .t { font-size: 18px; font-weight: 700; }

.brigade-profile-page-shell .lb-cap .s { font-size: 14px; color: var(--on-surface-inverse); margin-top: 2px; }

.brigade-profile-page-shell .lb-count { font-size: 14px; color: var(--on-surface-inverse); font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .15s ease; }

.brigade-profile-page-shell .lb-nav:hover { background: rgba(255,255,255,.22); }

.brigade-profile-page-shell .lb-nav i, .brigade-profile-page-shell .lb-nav svg.lucide { width: 22px; height: 22px; }

.brigade-profile-page-shell .lb-prev { left: 14px; }

.brigade-profile-page-shell .lb-next { right: 14px; }

.brigade-profile-page-shell .lb-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff; color: #111; display: grid; place-items: center; cursor: pointer; }

.brigade-profile-page-shell .lb-close i, .brigade-profile-page-shell .lb-close svg.lucide { width: 20px; height: 20px; }

/* ===== availability ===== */

.brigade-profile-page-shell .av-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.brigade-profile-page-shell .av-ic { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; flex: none; }

.brigade-profile-page-shell .av-free .av-ic { background: var(--surface-success-subtle); color: var(--text-success); }

.brigade-profile-page-shell .av-busy .av-ic { background: var(--muted); color: var(--foreground); }

.brigade-profile-page-shell .av-ic i, .brigade-profile-page-shell .av-ic svg.lucide { width: 24px; height: 24px; }

.brigade-profile-page-shell .av-main { flex: 1; min-width: 200px; }

.brigade-profile-page-shell .av-main .at { font-size: 17px; font-weight: 700; }

.brigade-profile-page-shell .av-main .as { font-size: 14px; color: var(--foreground); margin-top: 3px; }

.brigade-profile-page-shell .av-cond { display: flex; gap: 26px; flex-wrap: wrap; }

.brigade-profile-page-shell .av-cond .c .cl { font-size: 12px; color: var(--foreground); }

.brigade-profile-page-shell .av-cond .c .cv { font-size: 15px; font-weight: 600; margin-top: 2px; }

.brigade-profile-page-shell .av-free-only { display: none; }

/* brigade-profile-desktop/03-brigade-profile-desktop.css */
.brigade-profile-page-shell.is-free .av-free-only { display: flex; }

.brigade-profile-page-shell.is-free .av-busy-only { display: none; }

/* ===== documents ===== */

.brigade-profile-page-shell .doc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 640px){ .brigade-profile-page-shell .doc-list { grid-template-columns: 1fr; } }

.brigade-profile-page-shell .doc { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px; }

.brigade-profile-page-shell .doc .di { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-success-subtle); }

.brigade-profile-page-shell .doc .di i, .brigade-profile-page-shell .doc .di svg.lucide { width: 19px; height: 19px; color: var(--text-success); }

.brigade-profile-page-shell .doc.pending .di { background: var(--muted); }

.brigade-profile-page-shell .doc.pending .di i, .brigade-profile-page-shell .doc.pending .di svg.lucide { color: var(--muted-foreground); }

.brigade-profile-page-shell .doc .dn { font-size: 15px; font-weight: 600; }

.brigade-profile-page-shell .doc .ds { font-size: 12.5px; color: var(--foreground); margin-top: 2px; }

.brigade-profile-page-shell .doc-unver { display: none; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--foreground); margin-top: 14px; line-height: 1.5; }

.brigade-profile-page-shell .doc-unver i, .brigade-profile-page-shell .doc-unver svg.lucide { width: 16px; height: 16px; color: var(--muted-foreground); flex: none; margin-top: 1px; }

/* ===== reviews ===== */

.brigade-profile-page-shell .rev-sum { display: flex; align-items: center; gap: 26px; padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }

.brigade-profile-page-shell .rev-score { text-align: center; }

.brigade-profile-page-shell .rev-score .big { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .rev-score .stars { display: inline-flex; gap: 2px; color: var(--primary); margin-top: 7px; }

.brigade-profile-page-shell .rev-score .stars i, .brigade-profile-page-shell .rev-score .stars svg.lucide { width: 16px; height: 16px; }

.brigade-profile-page-shell .rev-score .cnt { font-size: 13px; color: var(--foreground); margin-top: 6px; }

.brigade-profile-page-shell .rev-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }

.brigade-profile-page-shell .rev-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--foreground); }

.brigade-profile-page-shell .rev-bar .n { width: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .rev-bar .track { flex: 1; height: 8px; border-radius: 999px; background: var(--muted); overflow: hidden; }

.brigade-profile-page-shell .rev-bar .track > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

.brigade-profile-page-shell .rev-bar .c { width: 26px; text-align: right; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .rev-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }

.brigade-profile-page-shell .rev-filters [data-slot="button"] { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--foreground); cursor: pointer; transition: all .12s ease; }

.brigade-profile-page-shell .rev-filters [data-slot="button"] span { color: var(--foreground); font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .rev-filters [data-slot="button"] i, .brigade-profile-page-shell .rev-filters [data-slot="button"] svg.lucide { width: 14px; height: 14px; color: var(--primary); }

.brigade-profile-page-shell .rev-filters [data-slot="button"][data-active="true"] { background: var(--selected); color: var(--on-selected); border-color: var(--selected); }

.brigade-profile-page-shell .rev-filters [data-slot="button"][data-active="true"] span { color: var(--on-selected); }

.brigade-profile-page-shell .review { padding: 18px 0; border-top: 1px solid var(--border); display: flex; gap: 14px; }

.brigade-profile-page-shell .rev-body { flex: 1; min-width: 0; }

.brigade-profile-page-shell .review .rav { width: 46px; height: 46px; border-radius: 50%; background: var(--secondary); color: var(--secondary-foreground); display: grid; place-items: center; font-weight: 700; flex: none; overflow: hidden; }

.brigade-profile-page-shell .review .rav.brig { background: var(--primary); color: #000; }

/* The avatar fills the same circle the initials sit in, so a list of reviews keeps one rhythm
   whether or not the reviewer has a picture. */
.brigade-profile-page-shell .review .rav-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.brigade-profile-page-shell .review .rtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.brigade-profile-page-shell .review .rn { font-size: 16px; font-weight: 600; }

.brigade-profile-page-shell .review .who-tag { font-size: 11px; font-weight: 700; color: var(--foreground); background: var(--muted); padding: 2px 8px; border-radius: 999px; }

.brigade-profile-page-shell .review .stars { display: inline-flex; gap: 2px; color: var(--primary); }

.brigade-profile-page-shell .review .stars i, .brigade-profile-page-shell .review .stars svg.lucide { width: 15px; height: 15px; }

.brigade-profile-page-shell .review .rd { font-size: 13px; color: var(--foreground); margin-left: auto; }

.brigade-profile-page-shell .review .rp { font-size: 13px; color: var(--foreground); margin: 5px 0 7px; display: flex; align-items: flex-start; gap: 6px; }
.brigade-profile-page-shell .review .rp i, .brigade-profile-page-shell .review .rp svg.lucide { flex: none; margin-top: 3px; }
/* On a phone the date does not fit beside the name and the stars; pushed right, it hung on a
   line of its own at the far edge. It takes the line under the name instead. */
@media (max-width: 767px) { .brigade-profile-page-shell .review .rtop { row-gap: 2px; } .brigade-profile-page-shell .review .rtop .rd { flex-basis: 100%; margin-left: 0; } }

.brigade-profile-page-shell .review .rp i, .brigade-profile-page-shell .review .rp svg.lucide { width: 13px; height: 13px; }

.brigade-profile-page-shell .review .rtext { font-size: 16px; line-height: 1.55; margin: 0; text-wrap: pretty; }

/* Was this review useful? The pressed state is carried by the border rather than a fill: the
   counts sit on a card, and a filled pill at this size reads as a warning. */
.brigade-profile-page-shell .rvotes { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

.brigade-profile-page-shell .rvote { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .rvote i, .brigade-profile-page-shell .rvote svg { width: 15px; height: 15px; }

.brigade-profile-page-shell .rvote[data-active="true"] { border-color: var(--foreground); }

.brigade-profile-page-shell .rvote[data-active="true"] i, .brigade-profile-page-shell .rvote[data-active="true"] svg { fill: currentColor; }

.brigade-profile-page-shell .rev-sort { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--foreground); position: relative; }

.brigade-profile-page-shell .rev-sort .sb-select-trigger { height: 2.25rem; min-width: 210px; font-size: 13px; }

.brigade-profile-page-shell .rev-sort .sb-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 220px; }

.brigade-profile-page-shell .rev-sort .sb-menu[hidden] { display: none; }

.brigade-profile-page-shell .rev-sort select { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); padding: 7px 10px; background: var(--card); cursor: pointer; }

.brigade-profile-page-shell .rev-all { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--foreground); padding: 11px 16px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); transition: background-color .12s ease; }

.brigade-profile-page-shell .rev-all:hover { background: var(--muted); }

.brigade-profile-page-shell .rev-all i, .brigade-profile-page-shell .rev-all svg.lucide { width: 16px; height: 16px; }

/* Both expand controls are the section's main action on a phone, and the kit's default button is
   40px. 44px is the documented minimum tap target in this project. */
@media (max-width: 640px){ .brigade-profile-page-shell .rev-all, .brigade-profile-page-shell .pf-head-actions .all { min-height: 44px; } }

/* The projects and reviews pages, offered once their list is open here. They are the addresses
   that can be shared and indexed, which an expanded section cannot be. */

.brigade-profile-page-shell .pf-page-link,
.brigade-profile-page-shell .rev-page-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

.brigade-profile-page-shell .pf-page-link i, .brigade-profile-page-shell .pf-page-link svg,
.brigade-profile-page-shell .rev-page-link i, .brigade-profile-page-shell .rev-page-link svg { width: 15px; height: 15px; }

/* footer */

.brigade-profile-page-shell .site-footer { background: #111; color: var(--on-surface-inverse); margin-top: 56px; padding: 76px 0 44px; }

.brigade-profile-page-shell .site-footer .wrap { padding: 0 24px; }

.brigade-profile-page-shell .ft-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-bottom: 56px; }

@media (max-width: 768px){ .brigade-profile-page-shell .ft-cols { grid-template-columns: 1fr 1fr; row-gap: 44px; } }

.brigade-profile-page-shell .ft-col { display: flex; flex-direction: column; gap: 16px; }

.brigade-profile-page-shell .ft-h { font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }

.brigade-profile-page-shell .ft-col a { font-size: 14px; color: var(--on-surface-inverse); width: fit-content; transition: color .12s ease; }

.brigade-profile-page-shell .ft-col a:hover { color: #fff; }

.brigade-profile-page-shell .ft-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.brigade-profile-page-shell .ft-social { display: flex; align-items: center; gap: 14px; }

.brigade-profile-page-shell .ft-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: #fff; font-size: 17px; margin-right: 8px; }

.brigade-profile-page-shell .ft-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: var(--on-surface-inverse); transition: background-color .12s ease, color .12s ease; }

.brigade-profile-page-shell .ft-social a:hover { background: rgba(255,255,255,.16); color: #fff; }

.brigade-profile-page-shell .ft-social a i, .brigade-profile-page-shell .ft-social a svg.lucide { width: 18px; height: 18px; }

.brigade-profile-page-shell .ft-legal { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--on-surface-inverse); }

.brigade-profile-page-shell .ft-legal a { color: var(--on-surface-inverse); transition: color .12s ease; }

.brigade-profile-page-shell .ft-legal a:hover { color: #fff; }

/* ===== sticky sidebar ===== */

.brigade-profile-page-shell .aside { position: static; display: flex; flex-direction: column; gap: 16px; }

/* Keep the contact and detail cards in one sticky flow: independent sticky siblings overlap. */
.brigade-profile-page-shell .layout > .rail { position: sticky; top: 88px; }

@media (max-width: 1024px){ .brigade-profile-page-shell .layout > .rail { position: static; } }

.brigade-profile-page-shell .contact-card { padding: 22px; }

/* brigade-profile-desktop/04-brigade-profile-desktop.css */
.brigade-profile-page-shell .cc-price { display: flex; align-items: baseline; gap: 8px; }

.brigade-profile-page-shell .cc-price .from { font-size: 14px; color: var(--foreground); }

.brigade-profile-page-shell .cc-price .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .cc-price .u { font-size: 14px; color: var(--foreground); }

.brigade-profile-page-shell .cc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.brigade-profile-page-shell .cc-actions [data-slot="button"] { height: 3.1rem; font-size: 16px; }

.brigade-profile-page-shell .cc-contact { margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.brigade-profile-page-shell .cc-locked .cl-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; }

.brigade-profile-page-shell .cc-locked .cl-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--muted); display: grid; place-items: center; flex: none; }

.brigade-profile-page-shell .cc-locked .cl-ic i, .brigade-profile-page-shell .cc-locked .cl-ic svg.lucide { width: 18px; height: 18px; color: var(--muted-foreground); }

.brigade-profile-page-shell .cc-locked .cl-t { font-size: 15px; font-weight: 700; }

.brigade-profile-page-shell .cc-locked .cl-s { font-size: 13px; color: var(--foreground); margin-top: 2px; line-height: 1.45; }

.brigade-profile-page-shell .cc-locked .buy { width: 100%; height: 3rem; font-size: 15px; }

.brigade-profile-page-shell .cc-locked .cl-note { font-size: 12px; color: var(--foreground); margin-top: 9px; text-align: center; }

.brigade-profile-page-shell .cc-unlocked { display: none; }

.brigade-profile-page-shell .cc-unlocked .lbl { font-size: 13px; color: var(--text-success); margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.brigade-profile-page-shell .cc-unlocked .lbl i, .brigade-profile-page-shell .cc-unlocked .lbl svg.lucide { width: 14px; height: 14px; }

.brigade-profile-page-shell .cc-unlocked .num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }

.brigade-profile-page-shell .cc-unlocked .num i, .brigade-profile-page-shell .cc-unlocked .num svg.lucide { width: 18px; height: 18px; color: var(--muted-foreground); }

.brigade-profile-page-shell .cc-unlocked .call { width: 100%; }

/* `has-contact` is the shell's own class, so the selector is compound, not descendant. Written
   with a space it asked for a `.has-contact` element inside the shell, matched nothing, and a
   customer who had just paid for the number went on looking at the button that sells it. */
.brigade-profile-page-shell.has-contact .cc-locked { display: none; }

.brigade-profile-page-shell.has-contact .cc-unlocked { display: block; }

.brigade-profile-page-shell .cc-facts { display: flex; flex-direction: column; gap: 12px; }

.brigade-profile-page-shell .cc-fact { display: flex; align-items: center; gap: 11px; font-size: 14px; }

.brigade-profile-page-shell .cc-fact i, .brigade-profile-page-shell .cc-fact svg.lucide { width: 18px; height: 18px; color: var(--muted-foreground); flex: none; }

/* ===== geography card ===== */

/* One grid for the whole card, so every label shares a single track: a fixed 118px column (as
   the mockup draws it) wraps "Город проживания" onto a second line and knocks that row out of
   line with the others, and per-row grids would each size their label column differently. */
.brigade-profile-page-shell .geo-card { padding: 22px; display: grid; grid-template-columns: minmax(max-content, auto) minmax(0, 1fr); }

.brigade-profile-page-shell .geo-title { grid-column: 1 / -1; font-size: 16px; font-weight: 700; margin: 0; }

/* Label beside value, not above it: the labels are short and of similar length, so a fixed
   column lets the eye run down the answers instead of stepping over a heading each time. */
.brigade-profile-page-shell .geo-grid { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.45; }

.brigade-profile-page-shell .geo-card > .geo-grid { margin-top: 12px; }

.brigade-profile-page-shell .geo-label { font-weight: 700; }

/* The ruled rows run to the card's edges, so they pull back over its 22px padding. */
.brigade-profile-page-shell .geo-rows { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; margin: 14px -22px -8px; }

.brigade-profile-page-shell .geo-ruled { padding: 9px 22px; border-top: 1px solid var(--border); }

.brigade-profile-page-shell .geo-travel { min-width: 0; }

.brigade-profile-page-shell .geo-value { display: block; min-width: 0; }

/* Clamped rather than truncated: the tail of a travel policy often names the district the reader
   is looking for, so the toggle below restores it in place. */
.brigade-profile-page-shell .geo-value[data-clamped="true"] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The mockup paints this control in `--primary-hover`, which measures 1.73:1 on the card -- far
   under the 4.5:1 floor for 13.5px text, and the same yellow-on-white defect this project has
   shipped once already. Placement and weight follow the mockup; the colour stays readable and
   the underline keeps it reading as a control rather than a label. */
.brigade-profile-page-shell .geo-toggle { display: block; margin-top: 4px; height: auto; padding: 0; font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* On a phone the label column takes 40% of the width and clamps the travel policy after three
   words. Below the stylesheet-wide narrow breakpoint the label sits above its value instead, so
   the answer gets the full width. */
@media (max-width: 640px){
  .brigade-profile-page-shell .geo-card { display: flex; flex-direction: column; }
  .brigade-profile-page-shell .geo-grid { display: flex; flex-direction: column; gap: 2px; }
  .brigade-profile-page-shell .geo-rows { display: flex; flex-direction: column; }
}

.brigade-profile-page-shell .cc-fact b { font-weight: 600; }

.brigade-profile-page-shell .report-link { display: inline-flex; align-items: center; gap: 7px; height: auto; font-size: 13px; font-weight: 400; color: var(--foreground); padding: 4px; align-self: center; }

.brigade-profile-page-shell .report-link:hover { color: var(--foreground); }

.brigade-profile-page-shell .report-link i, .brigade-profile-page-shell .report-link svg.lucide { width: 14px; height: 14px; }

/* ===== similar performers ===== */

.brigade-profile-page-shell .sim-section { padding: 0 0 96px; }

.brigade-profile-page-shell .sim-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }

.brigade-profile-page-shell .sim-head h2 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.brigade-profile-page-shell .sim-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 1024px){ .brigade-profile-page-shell .sim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px){ .brigade-profile-page-shell .sim-grid { grid-template-columns: minmax(0, 1fr); } }

/* The card is a link, so the anchor carries the layout: a Card wrapping an <a> merges them and
   the anchor's own display would otherwise win. */
/* A row: the photo on the left, the facts beside it. The card is the kit's `Card`, which is a
   column (`flex flex-col`), and `display: flex` alone leaves that direction standing -- the photo
   then sat as a 38%-wide tile over an empty white strip with the text underneath, at every width. */
.brigade-profile-page-shell .sim-card { display: flex; flex-direction: row; align-items: stretch; min-width: 0; overflow: hidden; transition: box-shadow .15s ease; }

.brigade-profile-page-shell .sim-card:hover { box-shadow: var(--shadow-lg); }

.brigade-profile-page-shell .sim-photo { position: relative; width: 38%; flex: none; min-height: 168px; background: var(--secondary); display: grid; place-items: center; border-right: 1px solid var(--border); overflow: hidden; }

.brigade-profile-page-shell .sim-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }

.brigade-profile-page-shell .sim-initials { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--secondary-foreground); }

/* `min-width: 0` so a long name ellipsises inside the card instead of widening its grid track. */
.brigade-profile-page-shell .sim-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px 13px; }

.brigade-profile-page-shell .sim-name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }

.brigade-profile-page-shell .sim-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brigade-profile-page-shell .sim-name i, .brigade-profile-page-shell .sim-name svg { width: 16px; height: 16px; flex: none; color: var(--primary-hover); }

.brigade-profile-page-shell .sim-spec { font-size: 13px; font-weight: 500; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brigade-profile-page-shell .sim-meta { display: flex; align-items: center; gap: 2px 16px; font-size: 14px; margin-top: 4px; flex-wrap: wrap; }

.brigade-profile-page-shell .sim-rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.brigade-profile-page-shell .sim-rating i, .brigade-profile-page-shell .sim-rating svg { width: 19px; height: 19px; color: #e0a800; flex: none; }

.brigade-profile-page-shell .sim-reviews { font-weight: 400; }

.brigade-profile-page-shell .sim-city { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; margin-top: 8px; min-width: 0; }

.brigade-profile-page-shell .sim-city i, .brigade-profile-page-shell .sim-city svg { width: 13px; height: 13px; flex: none; }

.brigade-profile-page-shell .sim-city span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 480px){ .brigade-profile-page-shell .sim-photo { width: 34%; min-height: 148px; } }

/* toast */

.brigade-profile-page-shell .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #111; color: #fff; font-size: 15px; padding: 13px 20px; border-radius: 12px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; display: flex; align-items: center; gap: 10px; z-index: 95; }

.brigade-profile-page-shell .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.brigade-profile-page-shell .toast i, .brigade-profile-page-shell .toast svg.lucide { width: 18px; height: 18px; color: var(--primary); }

.brigade-profile-page-shell #tweaks-root { position: fixed; z-index: 100; }

/* brigade-profile-desktop/05-brigade-profile-desktop.css */
@media (max-width: 767px) {
.brigade-profile-page-shell {
    --bp-mobile-card-radius: 18px;
    --bp-mobile-card-padding: 20px;
    overflow-x: clip;
  }

.brigade-profile-page-shell .crumb {
    display: none;
  }

.brigade-profile-page-shell .wrap {
    width: 100%;
    max-width: 100%;
    padding-right: 16px !important;
    padding-left: 16px !important;
    box-sizing: border-box;
  }

/*
   * The dark header, edge to edge.
   *
   * The 21.09 mockup runs it the full width of the screen with the avatar beside the name, where
   * this was a rounded card in the page gutter with the avatar stacked above it. The gutter is
   * undone for the width of the band and given back as padding inside, so the black reaches the
   * screen edges while the text keeps its 16px -- the same shape as the catalogue band below.
   */
.brigade-profile-page-shell .phero {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 0 14px;
    align-items: start;
    margin-top: 0;
    margin-left: -16px;
    margin-right: -16px;
    padding: 24px 16px 26px;
    border-radius: 0;
    overflow: hidden;
  }

/*
   * The avatar sits beside the name only.
   *
   * In the mockup the portrait is level with the name and specialisation, while the status line,
   * rating and counters run the full width beneath it. A plain flex row cannot do that: the
   * markup wraps all four in .phero-main, so a row either centres the avatar against the whole
   * stack -- which floated it down beside "Свободен" -- or leaves the lower rows indented under
   * the name. A grid places the pieces instead, without the markup having to change.
   */
.brigade-profile-page-shell .phero .pic {
    width: 78px;
    height: 78px;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    border-radius: 18px;
    font-size: 26px;
  }

.brigade-profile-page-shell .phero-name {
    grid-column: 2;
    grid-row: 1;
  }

/* Name and speciality both sit beside the portrait, as in the mockup; the avatar spans the two
   rows they occupy. Everything below answers a different question and runs the full width. */
.brigade-profile-page-shell .phero-spec {
    grid-column: 2;
    grid-row: 2;
    margin: 5px 0 0;
  }

.brigade-profile-page-shell .phero-status, .brigade-profile-page-shell .phero-meta {
    grid-column: 1 / -1;
    margin-top: 14px;
  }

/* Dissolved so its four children become grid items of .phero in their own right: the portrait
   sits beside the name and speciality, and the status and counters below run the full width.
   As a flex column it boxed all four into the second track, which indented every row under the
   name and left the counters at the avatar's right edge instead of the screen's. */
.brigade-profile-page-shell .phero-main {
    display: contents;
  }

.brigade-profile-page-shell .phero-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 12px;
  }

.brigade-profile-page-shell .phero-name h1 {
    width: 100%;
    min-width: 0;
    font-size: 28px;
    line-height: 1.06;
    overflow-wrap: anywhere;
    letter-spacing: 0;
  }

.brigade-profile-page-shell .phero-badges {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 10px;
  }

.brigade-profile-page-shell .phero-status {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 10px;
    flex-wrap: wrap;
  }

.brigade-profile-page-shell .ver-badge, .brigade-profile-page-shell .status-pill {
    max-width: 100%;
    min-height: 30px;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1;
  }

.brigade-profile-page-shell .phero-spec {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

.brigade-profile-page-shell .phero-meta {
    gap: 10px 14px;
  }

.brigade-profile-page-shell .phero-meta .m {
    min-width: 0;
    font-size: 14px;
  }

.brigade-profile-page-shell .layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 28px;
  }

.brigade-profile-page-shell main {
    gap: 16px;
    width: 100%;
  }

.brigade-profile-page-shell .aside {
    width: 100%;
    gap: 16px;
  }

/*
   * Contacts before the reading matter.
   *
   * Stacked, the sidebar landed after every review: the contact card -- the one thing a reader
   * on a phone is here to press -- began four screens down, measured at y=3385 on a 390px
   * screen. The 21.09 mobile mockup puts it directly under the header.
   *
   * The rail that keeps the two asides in one desktop column is dissolved here so its children
   * become flex items of .layout in their own right, and only the contacts are lifted. The
   * detail cards stay where they are: the mockup keeps geography down among the sections, so
   * hoisting the sidebar whole would carry the wrong cards to the top.
   */
.brigade-profile-page-shell .layout > .rail {
    display: contents;
  }

.brigade-profile-page-shell .layout > .rail > .aside-contact {
    order: -1;
  }

/*
   * Sections run to the screen edges.
   *
   * In the mockup a section is a band of card colour ruled off above and below, not a rounded
   * tile floating in the gutter: on a 390px screen the rounded version spends 32px of a narrow
   * screen on margins and draws six competing outlines down the page. The gutter is undone with
   * negative margins and given back as the card's own padding, so the rules reach the edges
   * while the text stays on the same 16px as everything else.
   */
.brigade-profile-page-shell .brigade-profile-section-card, .brigade-profile-page-shell .contact-card {
    width: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding: var(--bp-mobile-card-padding) 16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
  }

.brigade-profile-page-shell .brigade-profile-section-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

/*
   * The heading keeps its own width; whatever shares the row goes under it when it does not fit.
   *
   * The reviews header puts a sort control beside «Отзывы». That control also carries `obj-dd`,
   * and the phone sheet stretches every `.obj-dd` to `width: 100%` -- right for a filter field,
   * wrong here: it took the whole row and squeezed the heading to «Отзывь». Sized to its content
   * it fits beside the heading in Russian and wraps below it where a locale's word is longer.
   */
.brigade-profile-page-shell .brigade-profile-section-card-header h2 {
    flex: 0 0 auto;
    max-width: 100%;
  }

.brigade-profile-page-shell .brigade-profile-section-card-header .rev-sort.obj-dd {
    width: auto;
    max-width: 100%;
    margin-left: auto;
  }

.brigade-profile-page-shell .brigade-profile-section-card-header h2 {
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: 0;
  }

.brigade-profile-page-shell .profile-empty {
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

.brigade-profile-page-shell .profile-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

.brigade-profile-page-shell .profile-empty-title {
    font-size: 16px;
  }

.brigade-profile-page-shell .profile-empty p {
    font-size: 14px;
    line-height: 1.4;
  }

.brigade-profile-page-shell .about-text {
    font-size: 20px;
    line-height: 1.45;
  }

.brigade-profile-page-shell .skill-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

.brigade-profile-page-shell .skill {
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
  }

.brigade-profile-page-shell .skill > div {
    min-width: 0;
  }

.brigade-profile-page-shell .skill .sk-nm {
    font-size: 18px;
    line-height: 1.2;
  }
}

/* brigade-profile-desktop/06-brigade-profile-desktop.css */
@media (max-width: 767px) {
.brigade-profile-page-shell .skill .sk-lv {
    display: block;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

.brigade-profile-page-shell .rate-top, .brigade-profile-page-shell .doc-list {
    grid-template-columns: 1fr;
  }

.brigade-profile-page-shell .svc-note {
    font-size: 15px;
  }

/*
   * The rates read as one table, not a stack of rows each labelled again.
   *
   * The mockup heads the price column once and lets the rows line up under that heading. Ours
   * repeated "СТАВКА" above every price -- on a phone, the same word down a narrow column -- and
   * gave each row an `auto` track, so the column edge moved with the longest price in that row
   * instead of standing still down the table.
   *
   * A fixed second track is what holds the column steady: each .svc-row is its own grid, so
   * nothing makes one row's `auto` track agree with the next one's.
   *
   * The width has to fit the price *and* the padlock a signed-out reader sees beside it. A
   * six-figure price measures 90px at this size and the lock adds 22px, so 112px is the widest
   * a row can legitimately need; at 104px the longer prices pushed 6px past the column while
   * blurred, which is only visible to the readers who are not signed in.
   */
.brigade-profile-page-shell .svc-row {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 16px;
    align-items: baseline;
  }

.brigade-profile-page-shell .svc-work .nm {
    font-size: 18px;
    line-height: 1.22;
  }

.brigade-profile-page-shell .svc-price {
    min-width: 0;
  }

.brigade-profile-page-shell .svc-row ~ .svc-row .svc-price .lbl {
    display: none;
  }

.brigade-profile-page-shell .svc-price .pp {
    font-size: 16px;
  }

.brigade-profile-page-shell .svc-unlock {
    display: none;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    padding: 14px;
    font-size: 16px;
  }

.brigade-profile-page-shell.is-guest .svc-unlock {
    display: grid;
  }

.brigade-profile-page-shell .svc-unlock .lnk {
    grid-column: 1 / -1;
    width: 100%;
    margin-left: 0;
  }

.brigade-profile-page-shell .pf-grid {
    grid-template-columns: 1fr 1fr;
  }

.brigade-profile-page-shell .pf-img {
    height: 118px;
  }

.brigade-profile-page-shell .av-card {
    align-items: flex-start;
  }

.brigade-profile-page-shell .av-main {
    min-width: 0;
  }

.brigade-profile-page-shell .av-main .at {
    font-size: 20px;
    line-height: 1.25;
  }

.brigade-profile-page-shell .av-main .as {
    font-size: 16px;
    line-height: 1.4;
  }

.brigade-profile-page-shell .av-cond {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

.brigade-profile-page-shell .cc-price {
    flex-wrap: wrap;
  }

.brigade-profile-page-shell .cc-price .v {
    font-size: 26px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

.brigade-profile-page-shell .cc-actions [data-slot="button"], .brigade-profile-page-shell .cc-locked .buy {
    width: 100%;
    min-height: 54px;
    height: auto;
    white-space: normal;
  }

.brigade-profile-page-shell .cc-locked .cl-head {
    align-items: flex-start;
  }

.brigade-profile-page-shell .cc-locked .cl-t {
    font-size: 18px;
  }

.brigade-profile-page-shell .cc-locked .cl-s, .brigade-profile-page-shell .cc-locked .cl-note {
    font-size: 15px;
    line-height: 1.4;
  }

.brigade-profile-page-shell .cc-fact {
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.3;
  }

}

@media (max-width: 420px) {
  /* Tightens the band on a narrow phone without undoing its full-bleed geometry: this block
     used to set a plain `padding: 18px`, which put the side gutter back and cancelled the
     negative margins the 767px layer uses to reach the screen edges. */
  .brigade-profile-page-shell .phero {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 20px 16px 22px;
  }

  .brigade-profile-page-shell .phero .pic {
    width: 68px;
    height: 68px;
    font-size: 24px;
  }

  .brigade-profile-page-shell .phero-name h1 {
    font-size: 24px;
  }

  .brigade-profile-page-shell .about-text {
    font-size: 18px;
  }

  .brigade-profile-page-shell .av-cond, .brigade-profile-page-shell .pf-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== report dialog ===== */

.rep-form { display: flex; flex-direction: column; gap: 14px; }

.rep-field { display: flex; flex-direction: column; gap: 7px; }

/* brigade-profile-desktop/07-brigade-profile-desktop.css */
/* ===== ways back into the catalogue ===== */

/*
 * The band the workers board carries, under a performer's profile.
 *
 * Geometry is the board's, so the two read as the same footer rather than as two designs. The
 * link colour is not: the board paints these `--primary-hover`, which measures 1.73:1 on white
 * where body text needs 4.5:1. That is the same yellow-on-white defect this project has already
 * shipped twice, and `accent-text-contrast.test.ts` exists to stop a third. Here the links are
 * `--foreground` and earn their affordance from the hover underline instead of from hue.
 */

.brigade-profile-page-shell .seo-band {
  margin-top: 44px;
  border-top: 1px solid var(--border);
  background: var(--background);
}

.brigade-profile-page-shell .seo-block {
  padding: 40px 0 60px;
}

.brigade-profile-page-shell .seo-block h2 {
  margin: 0 0 22px;
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The second heading follows a column block rather than the band edge, so it needs its own room. */
.brigade-profile-page-shell .seo-block h2.seo-h2-next {
  margin-top: 40px;
}

.brigade-profile-page-shell .seo-catcols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 24px;
}

.brigade-profile-page-shell .seo-cat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brigade-profile-page-shell .seo-cat h3 {
  margin: 0 0 12px;
  font-size: var(--text-base);
  font-weight: 700;
}

.brigade-profile-page-shell .seo-cat a, .brigade-profile-page-shell .seo-cols a {
  padding: 4px 0;
  color: var(--foreground);
  font-size: var(--text-sm);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.brigade-profile-page-shell .seo-cat a:hover, .brigade-profile-page-shell .seo-cols a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brigade-profile-page-shell .seo-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 24px;
}

@media (max-width: 1024px) {
  .brigade-profile-page-shell .seo-cols, .brigade-profile-page-shell .seo-catcols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .brigade-profile-page-shell .seo-cols, .brigade-profile-page-shell .seo-catcols {
    grid-template-columns: minmax(0, 1fr);
  }

  .brigade-profile-page-shell .seo-block {
    padding: 28px 0 40px;
  }
}