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

/* brigade-cabinet-mobile/01-brigade-cabinet-mobile.css */
/* Brigade cabinet responsive owner. */

.brigade-mobile-appbar,
.brigade-cabinet-page-shell .brigade-mobile-tabbar,
.brigade-cabinet-page-shell .brigade-mobile-fab {
  display: none;
}


/* brigade-cabinet-mobile/02-brigade-cabinet-mobile.css */
@media (max-width: 1180px) {
.brigade-cabinet-page-shell .sb-mobile-appbar__main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

.brigade-cabinet-page-shell {
    --cab-mobile-header: 60px;
    --cab-mobile-nav: 81px;
    --cab-title-size: 22px;
    /*
     * What sits ABOVE the cabinet's appbar, which is the site's own phone header -- not the
     * appbar's height, which is `--cab-mobile-header` and a different number.
     *
     * These were the same value, so the appbar stuck 47px too high and slid under the header, and
     * the tab strip below it went with it: the profile heading disappeared behind the tabs. The
     * header has been two rows since July (48px of controls, a 10px gap, a 36px city row, 12px of
     * padding and its border) and the 60px was written a week after that, never measured.
     *
     * It is stated rather than measured because nothing here measures: `--sb-chrome-header-height`
     * is a constant too. A guard pins this against the header's own rules so the two move together.
     */
    --sb-mobile-header: 107px;
    /*
     * What the site header holds right now, for the bars that stick under it.
     *
     * The header slides away while the reader scrolls down, and `--sb-mobile-header` above is its
     * height at rest: a bar stuck at that figure stayed 107px down an empty strip with the page
     * showing through above it. The header publishes its measured height -- zero once hidden --
     * and the stated one is only the value before that script has run.
     */
    --cab-site-header-now: var(--sb-public-mobile-header-offset, var(--sb-mobile-header));
    --sb-mobile-nav: var(--cab-mobile-nav);
    background: var(--background);
  }

.brigade-cabinet-page-shell .sb-header,
  .brigade-cabinet-page-shell .sb-mobile-bottom-nav,
  .brigade-cabinet-page-shell .cab-nav,
  .brigade-cabinet-page-shell .resp-head {
    display: none !important;
  }

.brigade-cabinet-page-shell .sb-mobile-appbar,
  /*
    The cabinet's own bar sticks BELOW the site header, not on top of it.

    Both were `sticky; top: 0`, and two elements cannot hold the same line: the site header, being
    earlier in the document, scrolled away underneath while this one took the top. Mid-scroll both
    were on screen and overlapping, which is what the screenshot caught.

    `--sb-mobile-header` is the header's own measured height, so the two stay in step if it
    changes; without a header (the cabinet at wider widths hides it) the variable is 0 and this
    bar sits at the top as before.
  */
  .brigade-cabinet-page-shell .brigade-mobile-appbar {
    position: sticky;
    top: var(--cab-site-header-now, 0px);
    /* Under 50, where the kit's dialogs live. At 60-70 the cabinet's own bars sat on top of any
       dialog opened from the cabinet: the availability dialog's "Сохранить" was behind the tab bar. */
    z-index: 40;
    display: flex;
    min-height: calc(var(--cab-mobile-header) + env(safe-area-inset-top, 0px));
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 6px;
    border-bottom: 1px solid var(--border);
    /* Solid: a title bar, not glass. At 96% the row scrolling under it read through the title. */
    background: var(--background);
  }

.brigade-cabinet-page-shell .sb-mobile-appbar__title {
    min-width: 0;
    overflow: hidden;
    color: var(--foreground);
    font-size: var(--cab-title-size);
    font-weight: 700;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.brigade-cabinet-page-shell .sb-mobile-appbar__back,
  .brigade-cabinet-page-shell .sb-mobile-iconbtn {
    display: grid;
    width: 38px;
    height: 38px;
    flex: none;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--foreground);
  }

.brigade-cabinet-page-shell .sb-mobile-appbar__back svg,
  .brigade-cabinet-page-shell .sb-mobile-iconbtn svg,
  .brigade-cabinet-page-shell .sb-mobile-iconbtn i {
    width: 24px;
    height: 24px;
  }

.brigade-cabinet-page-shell .wrap {
    padding: 0;
  }

.brigade-cabinet-page-shell .layout {
    display: block;
    padding: 0 0 calc(var(--cab-mobile-nav) + 18px + env(safe-area-inset-bottom, 0px));
  }

.brigade-cabinet-page-shell main {
    width: 100%;
    max-width: none;
    gap: 12px;
    padding: 0;
  }

/*
  One phone layout for every cabinet section: a single gutter, then a card.

  The gutter is the page container's own (16px below 768, 24px up to 1180) -- the same one every
  public page has. Inside it a section is a whole card: border on four sides, one radius, 16px of
  padding.

  This block used to square the cards off and strip their side borders, which is the look of a
  section running edge to edge. It was written for a container with no padding, and the `.wrap`
  rule below that zeroes it never applied: the shared sheet sets the gutter with `!important`. So the
  page drew an edge-to-edge section inside a gutter -- two horizontal rules with white on both
  sides -- and anything framed inside it (a project card, the message list) sat in a frame, in a
  frame, in a gutter. Found by the owner on a phone, on every screen at once.
*/
.brigade-cabinet-page-shell .phero,
  .brigade-cabinet-page-shell .complete,
  .brigade-cabinet-page-shell .cabinet-section-card,
  .brigade-cabinet-page-shell .side-card {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    border-radius: 14px;
    box-shadow: none;
  }

.brigade-cabinet-page-shell .cabinet-section-card {
    padding: 16px;
  }

/*
  The hero stacks, and everything in it shares one centre line.

  `stretch` is right for the two blocks that fill the width -- the text and the buttons -- but the
  avatar has a fixed size, so stretch left it against the left edge while the centred text sat at
  the middle of the card: avatar centre x=92 against name centre x=195.

  Before the phone sheets were loaded last, this rule lost to the desktop sheet's `center`, which
  centred the avatar by accident and left `.phero-main` pinned to the start instead. Both halves
  are stated here now rather than depending on which sheet wins.
*/
.brigade-cabinet-page-shell .phero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 18px;
  }

.brigade-cabinet-page-shell .phero .pic {
    align-self: center;
  }

/*
  The name and its badge sit on the same centre line as everything else.

  `.phero-name` is a flex row holding the name and the "Проверен" badge; its `align-items: center`
  lines them up vertically, which is a different axis. Without `justify-content` the row starts at
  the left, so "Иван" measured a centre of x=74 inside a 322px block whose own centre is x=195 --
  and the subtitle under it, being a plain block with `text-align: center`, sat correctly at 195.
*/
.brigade-cabinet-page-shell .phero-name {
    justify-content: center;
  }

/*
  The name sits under the middle of the avatar, not to the left of it.

  `.phero` stacks and centres its children on a phone, but this kept the row layout's
  `align-items: flex-start`: the avatar centred at x=137 while "Иван" began at x=75 -- a block
  centred as a box with its contents pinned to one edge.
*/
.brigade-cabinet-page-shell .phero-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }

.brigade-cabinet-page-shell .phero-act,
  .brigade-cabinet-page-shell .profile-form-actions,
  .brigade-cabinet-page-shell .settings-actions,
  .brigade-cabinet-page-shell .conditions-editor-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

.brigade-cabinet-page-shell .phero-act [data-slot="button"],
  .brigade-cabinet-page-shell .profile-form-actions [data-slot="button"],
  .brigade-cabinet-page-shell .settings-actions .sb-btn,
  .brigade-cabinet-page-shell .conditions-editor-actions .sb-btn {
    width: 100%;
    justify-content: center;
  }

.brigade-cabinet-page-shell .phero h1 {
    font-size: 32px;
    line-height: 1.06;
  }

.brigade-cabinet-page-shell .phero-meta,
  .brigade-cabinet-page-shell .resp-meta {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

.brigade-cabinet-page-shell .complete {
    padding: 16px;
  }

.brigade-cabinet-page-shell .checklist,
  .brigade-cabinet-page-shell .cond-grid,
  .brigade-cabinet-page-shell .profile-form,
  .brigade-cabinet-page-shell .conditions-form,
  .brigade-cabinet-page-shell .settings-grid,
  .brigade-cabinet-page-shell .portfolio-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The projects grid is not in this list. Its own sheet folds it into one column at 640px;
     folding it here, at 1180, made each card as wide as a tablet -- a 4:3 photo in a 723px card
     -- where three cards of the usual width fit side by side. */

.brigade-cabinet-page-shell .todo,
  .brigade-cabinet-page-shell .price-row,
  .brigade-cabinet-page-shell .svc-item,
  .brigade-cabinet-page-shell .resp-item,
  .brigade-cabinet-page-shell .settings-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
  }

.brigade-cabinet-page-shell .todo,
  .brigade-cabinet-page-shell .settings-row {
    display: flex;
    align-items: flex-start;
  }

.brigade-cabinet-page-shell .settings-row {
    flex-wrap: wrap;
  }
}


/* brigade-cabinet-mobile/03-brigade-cabinet-mobile.css */
@media (max-width: 1180px) {
.brigade-cabinet-page-shell .settings-copy {
    min-width: 0;
    flex: 1 1 220px;
  }

.brigade-cabinet-page-shell .settings-segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

.brigade-cabinet-page-shell .settings-segmented button {
    padding: 0 8px;
    font-size: 13px;
  }

.brigade-cabinet-page-shell .price-row,
  .brigade-cabinet-page-shell .svc-item,
  .brigade-cabinet-page-shell .resp-item {
    display: grid;
  }

.brigade-cabinet-page-shell .resp-empty {
    min-height: 280px;
    padding: 36px 20px;
    border-radius: 22px;
  }

.brigade-cabinet-page-shell .resp-empty h2 {
    font-size: 24px;
  }

.brigade-cabinet-page-shell .resp-empty [data-slot="button"] {
    width: 100%;
    justify-content: center;
  }

.brigade-cabinet-page-shell .svc-market,
  .brigade-cabinet-page-shell .svc-price,
  .brigade-cabinet-page-shell .svc-del {
    width: 100%;
  }

.brigade-cabinet-page-shell .svc-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

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

.brigade-cabinet-page-shell .svc-del {
    justify-content: center;
  }

.brigade-cabinet-page-shell .filters {
    overflow-x: auto;
    padding-bottom: 2px;
  }

.brigade-cabinet-page-shell .filter-chip {
    flex: 0 0 auto;
  }

.drawer-overlay {
    align-items: flex-end;
    justify-content: stretch;
  }

.drawer {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 72px);
    min-height: 0;
    border-radius: 28px 28px 0 0;
    overflow: hidden;
  }

.drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    gap: 14px;
    padding: 22px 18px 16px;
    background: var(--card);
  }

.drawer-title {
    font-size: 26px;
    line-height: 1.08;
  }

.cat-work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    text-align: left;
  }

.cw-main {
    min-width: 0;
  }

.cw-market {
    text-align: left;
  }

.cw-add {
    justify-self: end;
    align-self: center;
  }

/* 44px is the touch target; the "+" is what a thumb aims at even though the whole row answers. */
.cat-work .cw-add {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

.drawer-close {
    width: 44px;
    height: 44px;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] {
    height: calc(100svh - var(--cab-mobile-header) - var(--cab-mobile-nav) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--card);
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .stroyban-order-chat,
  .brigade-cabinet-page-shell main[data-cab="messages"] .rchat {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--card);
    box-shadow: none;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-list {
    border-right: 0;
    border-bottom: 0;
    background: var(--card);
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-list-h {
    display: none;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-threads {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100%;
    padding: 0;
    scrollbar-width: none;
    overscroll-behavior-y: contain;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-threads::-webkit-scrollbar {
    display: none;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-thread {
    width: 100%;
    flex: none;
    gap: 10px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--card);
  }
}


/* brigade-cabinet-mobile/04-brigade-cabinet-mobile.css */
@media (max-width: 1180px) {
/* Mixed in oklab: white has no hue, so `in oklch` swung the yellow through pink on its way to the
   card colour, and the open thread read as an error row. */
.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-thread.on {
    border-color: color-mix(in oklab, var(--primary) 65%, var(--border));
    background: color-mix(in oklab, var(--primary) 12%, var(--card));
    box-shadow: none;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat.is-mobile-thread-list .rchat-conv {
    display: none;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat.is-mobile-chat-open .rchat-list {
    display: none;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat.is-mobile-chat-open .rchat-conv,
  .brigade-cabinet-page-shell main[data-cab="messages"] .rchat.is-mobile-thread-list .rchat-list {
    display: flex;
    min-height: 0;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-mobile-back {
    display: inline-flex;
    width: auto;
    min-width: 34px;
    height: 34px;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--foreground);
    font-size: 13px;
    font-weight: 700;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-mobile-back i,
  .brigade-cabinet-page-shell main[data-cab="messages"] .rchat-mobile-back svg {
    width: 21px;
    height: 21px;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-offer {
    gap: 10px;
    min-height: 62px;
    padding: 8px 12px;
    background: var(--card);
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-tav,
  .brigade-cabinet-page-shell main[data-cab="messages"] .oav {
    width: 36px;
    height: 36px;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-tname {
    font-size: 15px;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-tsub {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-scroll {
    min-height: 0;
    /* The message field is fixed over the foot of this box; it says how tall it is
       (`useChatComposerClearance`). A written-down 74px was 4px short of the bare field and
       far short of one with an attached file above it. */
    padding: 14px 12px calc(var(--rchat-composer-height, 78px) + 12px);
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    background-color: var(--stroyban-chat-surface);
    background-image: var(--stroyban-chat-pattern);
    background-size: var(--stroyban-chat-pattern-size);
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .support-chat-bubble {
    max-width: min(82%, 300px);
    padding: 7px 12px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .support-chat-message.is-system .support-chat-bubble {
    max-width: calc(100% - 24px);
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .support-chat-separator {
    margin: 0 auto;
    font-size: 11px;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-input {
    position: fixed;
    right: 0;
    bottom: calc(var(--cab-mobile-nav) + env(safe-area-inset-bottom, 0px));
    left: 0;
    z-index: 43;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--stroyban-chat-pane-border);
    border-radius: 0;
    background: var(--card);
    box-shadow: none;
    backdrop-filter: none;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-input input:not([type="file"]) {
    min-width: 0;
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: var(--muted);
    font-size: 16px;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .order-chat-drafts {
    grid-column: 1 / -1;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-send {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--primary-foreground);
  }

.brigade-cabinet-page-shell .brigade-mobile-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(var(--sb-mobile-tab-count, 5), minmax(0, 1fr));
    min-height: calc(var(--sb-mobile-nav) + env(safe-area-inset-bottom, 0px));
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    /* Solid, like the appbar: card text scrolling under the labels read through them. */
    background: var(--background);
    box-shadow: 0 -12px 28px oklch(0.145 0 0 / 0.08);
  }

.brigade-cabinet-page-shell .brigade-mobile-tabbar .sb-mobile-tabbar__item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 62px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
  }

.brigade-cabinet-page-shell .brigade-mobile-tabbar .sb-mobile-tabbar__item.is-active {
    background: transparent;
    color: var(--foreground);
  }

.brigade-cabinet-page-shell .brigade-mobile-tabbar .sb-mobile-tabbar__item.is-active .sb-mobile-tabbar__icon {
    min-width: 64px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
  }

.brigade-cabinet-page-shell .brigade-mobile-tabbar .sb-mobile-tabbar__icon {
    position: relative;
    display: inline-grid;
    min-height: 34px;
    place-items: center;
    padding: 0 12px;
  }
}


/* brigade-cabinet-mobile/05-brigade-cabinet-mobile.css */
@media (max-width: 1180px) {
.brigade-cabinet-page-shell .brigade-mobile-tabbar svg,
  .brigade-cabinet-page-shell .brigade-mobile-tabbar i {
    width: 26px;
    height: 26px;
  }

.brigade-cabinet-page-shell .brigade-mobile-tabbar .sb-mobile-tabbar__icon b {
    position: absolute;
    top: -8px;
    right: -10px;
    display: grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 999px;
    /* White on #f00 read 4.0:1. The red of the «Срочно» badge, fixed in both themes: 4.77:1. */
    background: oklch(0.577 0.245 27.325);
    color: #fff;
    font-size: 12px;
    line-height: 1;
  }

.brigade-cabinet-page-shell .brigade-mobile-fab {
    position: fixed;
    right: 20px;
    bottom: calc(var(--cab-mobile-nav) + env(safe-area-inset-bottom, 0px) + 18px);
    z-index: 44;
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: none;
    border-radius: 22px;
    background: var(--primary);
    color: #111;
    box-shadow: 0 12px 28px oklch(0.145 0 0 / 0.18);
  }

.brigade-cabinet-page-shell .brigade-mobile-fab svg,
  .brigade-cabinet-page-shell .brigade-mobile-fab i {
    width: 28px;
    height: 28px;
  }

.brigade-cabinet-page-shell .svc-empty {
    min-height: 250px;
    padding: 36px 20px;
  }

.brigade-cabinet-page-shell .conditions-editor {
    display: none;
  }

.conditions-mobile-sheet-body {
    padding-bottom: 18px;
  }

.conditions-mobile-sheet .conditions-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

.conditions-mobile-sheet .conditions-readonly {
    min-height: 0;
  }

.conditions-mobile-sheet .conditions-form-wide {
    grid-column: auto;
  }

/* Неактивный шаг радиуса чёрный и в шторке. Десктопное правило заскоуплено на page-shell, а
   шторка рендерится порталом снаружи него, поэтому до неё не достаёт — её собственный класс и
   есть скоуп. Запрет на серый текст наш, кит приносит `text-muted-foreground` дефолтом. */
.conditions-mobile-sheet .conditions-form-wide [data-slot="segmented-control-item"] {
    color: var(--foreground);
  }


.conditions-mobile-sheet .conditions-form .sb-textarea {
    min-height: 120px;
  }

/* The save button is a kit Button (`data-slot`), not the mockup's `.sb-btn` this rule named: it
   never matched, and the sheet's one action sat at half width against the left edge. */
.conditions-mobile-sheet-foot .sb-btn,
  .conditions-mobile-sheet-foot [data-slot="button"] {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

/*
  The promotion card keeps its border and radius on a phone.

  It carries `cabinet-section-card` for its padding, which also enrols it in the full-bleed rule
  above -- the one that squares off section cards so they run edge to edge. Right for a plain
  section, wrong here: this is a bordered yellow callout inside the page, and squared off with its
  side borders stripped it reads as a background rather than a card.
*/
.brigade-cabinet-page-shell .profile-promotion-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    border-inline: 2px solid oklch(0.84 0.16 85);
    border-radius: 14px;
  }

.brigade-cabinet-page-shell .profile-promotion-card__main {
    flex-direction: column;
  }

.brigade-cabinet-page-shell .profile-promotion-card ul {
    display: grid;
  }

.brigade-cabinet-page-shell .profile-promotion-card__side {
    justify-items: stretch;
  }

.brigade-cabinet-page-shell .profile-promotion-card__price {
    text-align: left;
  }

.brigade-cabinet-page-shell .profile-promotion-card__side [data-slot="button"] {
    width: 100%;
    min-width: 0;
  }
}

/*
 * Between 768 and 1180 the cabinet runs its phone layout with no site header at all: the desktop
 * header is hidden for the cabinet below 1181 and the phone header exists only below 768. The
 * offset reserved for that header still said 107px, so the appbar stuck 107px down the page, on
 * top of the profile's hero. Nothing is above the appbar here, so nothing is reserved.
 */
@media (min-width: 768px) and (max-width: 1180px) {
  .brigade-cabinet-page-shell {
    --sb-mobile-header: 0px;
  }
}

@media (max-width: 1180px) {
/*
  The tab strip, then 16px, then the first block -- on every screen.

  It was 34px: the strip's own 18px bottom margin plus the 16px row gap the shared sheet gives any
  `.layout` grid. Both come from the shared sheet at a weight this one has to match, hence the
  `body.sb` prefix and the `!important` answering an `!important`.
*/
body.sb .brigade-cabinet-page-shell .layout {
    gap: 0;
  }

body.sb .brigade-cabinet-page-shell .cab-nav {
    margin-bottom: 16px !important;
  }

/*
  A screen whose content is already a list of cards does not get a card around the list.

  The projects screen wrapped its project cards in a section card: card, in a frame, in a gutter.
  The frame goes; the cards keep the single gutter.
*/
.brigade-cabinet-page-shell .portfolio-screen-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

/*
  The message list runs edge to edge: rows separated by rules, no box around them.

  It sat in the page gutter with a fixed height taken from the wrong bars (the appbar and the
  bottom nav, but not the site header or the tab strip above it), so the list was a white box
  208px taller than the space it had, most of it empty. The height now subtracts every bar that is
  actually above and below it.
*/
body.sb .brigade-cabinet-page-shell .layout[data-active-screen="messages"] {
    padding-bottom: 0;
  }

body.sb .brigade-cabinet-page-shell .layout[data-active-screen="messages"] .cab-nav {
    margin-bottom: 0 !important;
  }

/* An open conversation takes the row of cabinet sections' place: on a phone the conversation had
   about 150px of a 660px screen left, and «← Диалоги» already leads back to the list, where the
   row returns. The height below gives the row's 60px to the conversation. */
body.sb .brigade-cabinet-page-shell .layout[data-active-screen="messages"]:has(.rchat.is-mobile-chat-open) {
    --cab-section-tabs: 0px;
  }

body.sb .brigade-cabinet-page-shell .layout[data-active-screen="messages"]:has(.rchat.is-mobile-chat-open) .cab-nav {
    /* `!important` because the shared sheet draws the row with `display: flex !important`. */
    display: none !important;
  }

.brigade-cabinet-page-shell main[data-cab="messages"] {
    width: auto;
    height: calc(100svh - var(--sb-mobile-header, 0px) - var(--cab-site-header-rest-pad, 0px) - var(--cab-mobile-header) - var(--cab-section-tabs, 60px) - var(--cab-mobile-nav) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin-inline: calc(-1 * var(--cab-page-gutter, 16px));
  }

/* `--cab-site-header-rest-pad` is the 10px the site header pads itself with while it is on
   screen, on top of the 107px `--sb-mobile-header` counts. This screen does not scroll, so the
   header is always at rest and the list has to clear all 117. */
.brigade-cabinet-page-shell {
    --cab-page-gutter: 16px;
    --cab-section-tabs: 60px;
    --cab-site-header-rest-pad: 0.625rem;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .brigade-cabinet-page-shell {
    --cab-page-gutter: 24px;
    --cab-site-header-rest-pad: 0px;
  }
}

@media (max-width: 1180px) {
/*
  One step between blocks: the 12px `main` already puts between its children.

  The kit card is a flex column with a 24px gap, and the section header under it brings 18px of
  its own, so a heading stood 42px above its first row; the category list added 22px to the 12
  below it. Measured, not felt: "Условия работы" to its first condition was 60px.
*/
.brigade-cabinet-page-shell .cabinet-section-card {
    gap: 0;
  }

.brigade-cabinet-page-shell .cabinet-section-card-header {
    margin-bottom: 12px;
  }

.brigade-cabinet-page-shell .svc-cats,
  .brigade-cabinet-page-shell .svc-cat-head {
    margin-bottom: 4px;
  }

.brigade-cabinet-page-shell .own-rates,
  .brigade-cabinet-page-shell main[data-cab="services"] > .cabinet-section-card {
    margin-top: 0 !important;
  }

/* The catalogue sheet: group titles start where the rows' text starts. */
.cat-group-title {
    padding-inline: 18px;
  }
}

@media (max-width: 767px) {
/*
  The response card on a phone.

  The term is a sentence ("Старт — 13 декабря 2026 г."), and `nowrap` -- right for the desktop
  column it sits in -- ran it 6px past the card and the screen: the one screen of the cabinet
  that scrolled sideways. The two figures now wrap, and a long one takes its own line.

  The buttons keep the desktop row's 340px cap and 10px right margin, which on a phone left them
  narrower than the card and off its centre line. They fill the card here.
*/
.brigade-cabinet-page-shell .resp-item {
    padding: 16px;
  }

.brigade-cabinet-page-shell .resp-bid {
    flex-wrap: wrap;
    gap: 10px 24px;
  }

.brigade-cabinet-page-shell .resp-bid .bid {
    min-width: 0;
  }

.brigade-cabinet-page-shell .resp-bid .bid b {
    white-space: normal;
    overflow-wrap: anywhere;
  }

.brigade-cabinet-page-shell .resp-actions {
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }

.brigade-cabinet-page-shell .resp-actions [data-slot="button"] {
    flex: none;
    width: 100%;
    min-width: 0;
    margin-right: 0;
  }

/*
  The status filters are one row that scrolls, edge to edge.

  Wrapped, seven chips took four rows -- 200px of the first screen before the first response.
*/
.brigade-cabinet-page-shell .resp-filters {
    flex-wrap: nowrap;
    margin: 0 calc(-1 * var(--cab-page-gutter, 16px));
    padding: 0 var(--cab-page-gutter, 16px);
    overflow-x: auto;
    scrollbar-width: none;
  }

.brigade-cabinet-page-shell .resp-filters::-webkit-scrollbar {
    display: none;
  }

.brigade-cabinet-page-shell .resp-filters [data-slot="button"] {
    flex: none;
  }

/*
  A rate on the profile: icon and name on one line, the price under the name.

  The row folded to a single column, which gave the 44px icon a line of its own and pushed the
  price to the far right two lines down -- three rows of air for one rate.
*/
.brigade-cabinet-page-shell .price-row {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 4px 12px;
    padding: 12px 0;
  }

.brigade-cabinet-page-shell .price-row .pp {
    grid-column: 2;
    margin-left: 0;
    white-space: normal;
  }
}

@media (max-width: 767px) {
/* A screen shorter than the phone stays white to the bottom bar; the page behind the shell is
   grey, and it showed as a grey slab under a screen with one card on it. */
.brigade-cabinet-page-shell {
    min-height: 100svh;
  }

/* The availability dialog's two buttons share the bottom row, each a full thumb's width. */
.avail-actions[data-slot="dialog-footer"] {
    flex-direction: row;
    margin-top: 0;
  }

.avail-actions[data-slot="dialog-footer"] [data-slot="button"] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
  }

.avail-dialog .avail-form {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

@media (max-width: 1180px) {
/*
  The hidden file input behind "Загрузить фото" stays 1px wide.

  It is hidden by size, and the shared phone sheet sizes every input to the full width of its
  row, with `!important`: the invisible input came out 393px wide, absolutely positioned 49px in,
  and the page grew to 442px -- opening the profile editor made the whole screen scroll sideways
  and pushed the bottom bar's last tab off the edge.
*/
.brigade-cabinet-page-shell .profile-avatar-input {
    width: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
  }
}

@media (max-width: 1180px) {
/* The shared sheet caps the public chat's thread list at 260px on a phone. Here the list is the
   screen: with more than three threads it scrolled inside a 260px window above empty space. */
.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-list {
    max-height: none;
  }
}

@media (max-width: 1180px) {
/* The message field is the bottom edge of the chat, not a card floating 12px above the tab bar
   with a gutter either side -- the customer's cabinet already draws it flush. */
.brigade-cabinet-page-shell main[data-cab="messages"] .rchat-input {
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}

@media (max-width: 640px) {
/* «Избранные бригады» on a phone. A row's buttons go under its text: side by side, three 44px
   icon buttons and «В папку» left a name about 100px, and every name broke over several lines. */
.brigade-cabinet-page-shell .ctb-saved-item,
  .brigade-cabinet-page-shell .ctb-row {
    flex-wrap: wrap;
  }

.brigade-cabinet-page-shell .ctb-saved-item .ctb-who,
  .brigade-cabinet-page-shell .ctb-row .ctb-who {
    flex-basis: calc(100% - 56px);
  }

/* A folder row keeps its buttons beside the name: a folder has one line to show, and the name
   wraps between words in what is left. */
.brigade-cabinet-page-shell .ctb-row-folder {
    flex-wrap: nowrap;
  }

.brigade-cabinet-page-shell .ctb-row-folder .ctb-row-actions {
    width: auto;
  }

.brigade-cabinet-page-shell .ctb-saved-actions,
  .brigade-cabinet-page-shell .ctb-row-actions {
    width: 100%;
    justify-content: flex-end;
  }

.brigade-cabinet-page-shell .ctb-toolbar-actions {
    width: 100%;
  }

.brigade-cabinet-page-shell .ctb-toolbar-actions [data-slot="button"] {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 1180px) {
/* The contact book's dialogs, like the availability one: two buttons share the bottom row. */
.ctb-actions[data-slot="dialog-footer"] {
    flex-direction: row;
    margin-top: 0;
  }

.ctb-actions[data-slot="dialog-footer"] [data-slot="button"] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    white-space: normal;
  }

.ctb-dialog .ctb-form,
  .ctb-dialog .ctb-dest-list {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}