@import url('../vendor/ui/button-base.css');
@import url('../vendor/ui/button.css');
@import url('../vendor/ui/button-primary.css');
@import url('../vendor/ui/field.css');
@import url('../vendor/ui/search.css');
/* Golos Text 2.004 (OFL, apps/web/public/fonts/golos/OFL.txt), Google Fonts woff2 subsets with the
   wght axis 400-900; the design system uses 400, 500 and 600. The cabinet loads the copy made by
   scripts/vendor-fonts.mjs; the site stylesheet names the same files under fonts/golos/. Nothing comes from another
   origin. */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url('../vendor/fonts/golos/golos-text-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url('../vendor/fonts/golos/golos-text-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url('../vendor/fonts/golos/golos-text-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Base and components of the cabinet (v2/ui). Only the design-token variables of tokens.css: colours --color-*,
   text --text-*, spacing --space-*, radii --radius-*, sizes --control, --row, --card-pad, --tap. The theme, density
   and text size follow data-theme, data-density and data-text. Breakpoints 480, 768, 1024, 1280. */
*{box-sizing:border-box}
html{scrollbar-gutter:stable;scrollbar-color:var(--color-muted) var(--color-canvas);scrollbar-width:thin;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-ui-size);line-height:var(--text-ui-line);color:var(--color-text);background:var(--color-canvas)}
h1,h2,h3,h4{color:var(--color-ink);font-weight:600}
h1{font-size:var(--text-h1-size);line-height:var(--text-h1-line);letter-spacing:var(--text-h1-tracking)}
h2{font-size:var(--text-h2-size);line-height:var(--text-h2-line)}
h3{font-size:var(--text-h3-size);line-height:var(--text-h3-line)}
h4{font-size:var(--text-h4-size);line-height:var(--text-h4-line)}
.hero :is(h1,h2,h3,h4){color:var(--color-ink-on-navy)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--color-link);text-decoration:none}
a:hover{text-decoration:underline}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
code{font-size:var(--text-caption-size);background:var(--color-canvas);border:1px solid var(--color-line);border-radius:var(--radius-field);padding:0 var(--space-1);overflow-wrap:anywhere}
.hidden,[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--space-4);top:-100px;z-index:200;background:var(--color-paper);color:var(--color-link);border:1px solid var(--color-line);border-radius:var(--radius-field);padding:var(--space-3) var(--space-4)}
.skip-link:focus{top:var(--space-3)}
.ico{width:20px;height:20px;flex:0 0 auto;vertical-align:middle;display:inline-block}
.ico.large{width:36px;height:36px}
.muted{color:var(--color-muted)}
.hint{color:var(--color-muted);font-size:var(--text-caption-size);line-height:var(--text-caption-line)}
.card{background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--card-pad);min-width:0}
:where(.card) h2{font-size:var(--text-h4-size);line-height:var(--text-h4-line);margin:0 0 var(--space-3)}
:where(.card) h3{font-size:var(--text-ui-strong-size);line-height:var(--text-ui-strong-line);margin:0 0 var(--space-2)}
:where(.card) p{color:var(--color-muted)}
.spinner{display:inline-block;width:16px;height:16px;flex:0 0 auto;border:2px solid var(--color-line);border-top-color:var(--color-focus);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Button */
.iconbutton{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:var(--control-dense);min-height:var(--control-dense);padding:0 var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-field);background:var(--color-paper);color:var(--color-ink);text-decoration:none}
.iconbutton:hover{background:var(--color-selected);text-decoration:none}

/* Link */
.link{color:var(--color-link);text-decoration:none;border-radius:4px}
.link:hover{text-decoration:underline}

/* State chip: the state in words on its own background, with a dot */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--radius-field);background:var(--color-canvas);color:var(--color-muted);font-size:var(--text-caption-size);font-weight:500;line-height:var(--text-caption-line);white-space:nowrap}
.chip:before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:currentColor}
.chip-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.chip-ok{background:var(--color-success-bg);color:var(--color-success)}
.chip-warn{background:var(--color-warning-bg);color:var(--color-warning)}
.chip-err{background:var(--color-danger-bg);color:var(--color-danger)}
.chip-off{background:var(--color-canvas);color:var(--color-muted)}
.state-icon{display:inline-flex;vertical-align:middle}
.state-icon .ico{width:18px;height:18px}
.state-icon-ok{color:var(--color-success)}
.state-icon-warn{color:var(--color-warning)}
.state-icon-err{color:var(--color-danger)}
.state-icon-off{color:var(--color-muted)}

/* ListRow */
.list-rows{background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.list-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);min-height:var(--row);padding:var(--space-2) var(--space-4);background:var(--color-paper);border-bottom:1px solid var(--color-line)}
.list-row:first-child{border-radius:calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0}
.list-row:last-child{border-bottom:0;border-radius:0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px)}
.list-row:only-child{border-radius:calc(var(--radius-card) - 1px)}
.list-row.linked:hover{background:var(--color-canvas)}
.list-row.selected{background:var(--color-selected)}
.list-row-main{flex:1 1 12rem;min-width:0;display:flex;flex-direction:column}
.list-row-name{color:var(--color-ink);font-weight:500;overflow-wrap:anywhere}
a.list-row-name{text-decoration:none}
a.list-row-name:after{content:"";position:absolute;inset:0}
a.list-row-name:focus-visible{outline:0}
a.list-row-name:focus-visible:after{outline:2px solid var(--color-focus);outline-offset:-2px;border-radius:var(--radius-field)}
.list-row-meta{color:var(--color-muted);font-size:var(--text-caption-size);line-height:var(--text-caption-line)}
.list-row.selected .list-row-meta{color:var(--color-text)}
.list-row>.btn,.list-row>.chip,.list-row>.row-menu,.list-row>.delete-anchor{position:relative;z-index:1;flex:0 0 auto}
.list-row>.delete-anchor:has([aria-expanded=true]){z-index:70}
.row-menu{position:relative}
.row-menu:has(.row-menu-button[aria-expanded=true]){z-index:70}
.row-menu-button{min-width:var(--control-dense);padding:0 var(--space-2);font-size:var(--text-h4-size)}
.row-menu-list{position:absolute;right:0;top:calc(100% + var(--space-1));z-index:60;min-width:160px;width:max-content;padding:var(--space-1);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-pop)}
.row-menu-list.up{top:auto;bottom:calc(100% + var(--space-1))}
.row-menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:var(--control-dense);padding:0 var(--space-3);border:0;border-radius:var(--radius-field);background:transparent;color:var(--color-ink);text-align:left;white-space:nowrap;text-decoration:none}
.row-menu-item .ico{width:18px;height:18px;color:var(--color-muted)}
.row-menu-item.danger .ico{color:inherit}
.row-menu-item:hover,.row-menu-item:focus-visible{background:var(--color-selected)}
.row-menu-item.danger{color:var(--color-danger)}
.row-menu-item.danger:hover,.row-menu-item.danger:focus-visible{background:var(--color-danger-bg)}

/* ChoiceCard */
.choice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);margin:0;padding:0;border:0;min-width:0}
.choice-legend{grid-column:1/-1;padding:0;margin-bottom:var(--space-2);color:var(--color-ink);font-weight:500}
.choice-card{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);color:var(--color-text);cursor:pointer}
.choice-card:hover{border-color:var(--color-accent)}
.choice-card input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--color-ink)}
.choice-card:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
.choice-card input:focus-visible{outline:0}
.choice-card:has(input:checked){border:2px solid var(--color-accent);padding:calc(var(--space-4) - 1px);background:var(--color-selected)}
.choice-card:has(input:disabled){opacity:.5;cursor:default}
.choice-card-text{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.choice-card-title{color:var(--color-ink);font-size:var(--text-h4-size);line-height:var(--text-h4-line);font-weight:600}
.choice-card-hint{color:var(--color-muted);font-size:var(--text-caption-size);line-height:var(--text-caption-line)}
.choice-card:has(input:checked) .choice-card-hint{color:var(--color-text)}

/* Field */

/* State */
.state{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6);text-align:center;color:var(--color-text)}
.state>.ico{color:var(--color-muted)}
.state-title{margin:0;font-size:var(--text-h4-size);line-height:var(--text-h4-line)}
.state-text{margin:0;max-width:var(--measure);color:var(--color-muted)}
.state-action{margin-top:var(--space-2)}
.state-error{align-items:flex-start;text-align:left;background:var(--color-danger-bg);border:1px solid var(--color-danger);border-radius:var(--radius-card)}
.state-error .state-title{color:var(--color-danger)}
.state-error .state-text{color:var(--color-text)}

/* NextStep */
.next-step{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;padding:var(--card-pad);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.next-step-body{flex:1 1 320px;min-width:0}
.next-step-label{margin:0 0 var(--space-1);color:var(--color-muted);font-size:var(--text-caption-size);line-height:var(--text-caption-line)}
.next-step-title{margin:0;font-size:var(--text-h3-size);line-height:var(--text-h3-line)}
.next-step-text{margin:var(--space-1) 0 0}

/* Confirm */
.delete-anchor{position:relative;display:inline-block}
.confirm-popover{position:absolute;right:0;top:calc(100% + var(--space-2));z-index:60;width:min(360px,calc(100vw - 2 * var(--space-4)));padding:var(--space-4);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-pop);color:var(--color-text);text-align:left;white-space:normal;transform:translateX(var(--confirm-shift,0px));animation:pop-in var(--duration-base) ease-out}
.confirm-popover.above{top:auto;bottom:calc(100% + var(--space-2))}
.confirm-title{margin:0 0 var(--space-2);font-size:var(--text-ui-strong-size);line-height:var(--text-ui-strong-line)}
.confirm-name{display:block;color:var(--color-ink);font-weight:500;overflow-wrap:anywhere}
.confirm-text{margin:var(--space-2) 0 var(--space-4)}
.confirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}
@keyframes pop-in{from{opacity:0}}

/* Toast */
/* A toast only tells; a press goes through it to the «⋯» or the button under it. */
.toast{pointer-events:none;position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:150;max-width:380px;padding:var(--space-3) var(--space-4);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);box-shadow:var(--shadow-pop);color:var(--color-text);font-size:var(--text-ui-size)}

/* View switch Обычный · Специалист */
.view-switch{display:inline-flex;margin:0;padding:3px;border:1px solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-paper);min-width:0}
.view-switch-option span{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:var(--radius-pill);color:var(--color-muted);font-size:var(--text-caption-size);font-weight:500;cursor:pointer}
.view-switch-option input:checked+span{background:var(--color-selected);color:var(--color-ink)}
.view-switch-option input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:1px}

/* Tabs */
.tablist{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-line);overflow-x:auto}
.tab{min-height:var(--control-dense);padding:0 var(--space-4);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--color-muted);font-weight:500;white-space:nowrap}
.tab:hover{color:var(--color-ink)}
.tab[aria-selected=true]{border-bottom-color:var(--color-ink);color:var(--color-ink)}
.tab:focus-visible{outline-offset:-2px}
.tab-panel{padding:var(--space-4) 0}
.tab-panel:focus-visible{outline-offset:2px}

/* Filter chips */
.filter-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.filter-chip{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control-dense);padding:0 var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-paper);color:var(--color-text);font-size:var(--text-ui-size);font-weight:500}
.filter-chip:hover{background:var(--color-selected)}
.filter-chip .filter-chip-check{display:none;width:16px;height:16px}
.filter-chip[aria-pressed=true]{background:var(--color-selected);border-color:var(--color-ink);color:var(--color-ink)}
.filter-chip[aria-pressed=true] .filter-chip-check{display:inline-block}

/* Pager */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-1);margin-top:var(--space-4)}
.pager-step{min-width:var(--control-dense);padding:0 var(--space-2)}
.pager-page{font-variant-numeric:tabular-nums}
.pager-page[aria-current=page]{border-color:var(--color-ink);color:var(--color-ink);font-weight:600}
.pager-gap{min-width:var(--space-4);color:var(--color-muted);text-align:center}

/* Search */

/* Navigation: side menu items with attention counters, bottom bar of phones */
.navitem-label{flex:1;min-width:0}
.nav-count{flex:0 0 auto;min-width:22px;padding:0 6px;border-radius:var(--radius-pill);background:var(--color-warning-bg);color:var(--color-warning);font-size:var(--text-caption-size);font-weight:600;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
.bottom-nav{display:none}

@media(max-width:767px){
  .iconbutton,.filter-chip,.tab,.row-menu-item,.pager-step{min-height:var(--tap)}
  .iconbutton,.row-menu-button,.pager-step{min-width:var(--tap)}
  .view-switch-option span{min-height:var(--tap)}
  .bases-group-head{padding-top:0;padding-bottom:0}
  .bases-group-head>a{min-height:var(--tap)}
  .toast{left:var(--space-4);right:var(--space-4);bottom:calc(56px + env(safe-area-inset-bottom) + var(--space-4));max-width:none}
  /* The fixed menu below keeps focus and opened «⋯» menus out from under it. */
  html{scroll-padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;background:var(--color-paper);border-top:1px solid var(--color-line);padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;color:var(--color-muted);font-size:var(--text-caption-size);text-decoration:none}
  .bottom-nav-item.active,.bottom-nav-item[aria-current=page]{color:var(--color-ink);font-weight:600}
  .bottom-nav-item .nav-count{position:absolute;top:var(--space-1);left:calc(50% + 6px);min-width:18px;line-height:18px;padding:0 4px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(forced-colors:active){
  .filter-chip,.chip,.choice-card,.view-switch,.toast,.confirm-popover,.row-menu-list{border:1px solid CanvasText}
  .filter-chip[aria-pressed=true],.view-switch-option input:checked+span,.tab[aria-selected=true]{outline:2px solid Highlight}
  .navitem.active:not(:focus-visible),.bottom-nav-item.active:not(:focus-visible),.bottom-nav-item[aria-current=page]:not(:focus-visible),.list-row.selected{outline:2px solid Highlight;outline-offset:-2px}
}

/* Screens of the cabinet and the shared site pages. Colours, text sizes, spacing and radii come from the tokens. */
.shell{min-height:100vh}
.brand{font-size:var(--text-h1-size);font-weight:600;color:var(--color-ink);padding:2px var(--space-4) var(--space-6);line-height:1.2}
.brand em{font-style:normal;color:var(--color-link)}
.brand.dark{color:var(--color-ink);padding:0}
.navitem{width:100%;background:transparent;color:var(--color-text);display:flex;align-items:center;gap:var(--space-3);text-align:left;padding:var(--space-3) var(--space-3);border:0;border-radius:var(--radius-field);font-size:var(--text-ui-size);font-weight:500}
.navitem:hover{background:var(--color-canvas);color:var(--color-ink)}
.navitem.active{background:var(--color-selected);color:var(--color-ink);font-weight:600}
.userface{display:flex;align-items:center;gap:var(--space-3)}
.avatar{width:33px;height:33px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--color-selected);color:var(--color-ink);font-weight:600;line-height:1;text-transform:uppercase}
.userface strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{min-width:0}
.content{max-width:1410px;margin:0 auto;padding:var(--space-8) var(--space-8) var(--space-16)}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-6);margin-bottom:var(--space-6)}
.eyebrow{color:var(--color-muted);font-size:var(--text-caption-size);font-weight:600;letter-spacing:1.15px;text-transform:uppercase;margin-bottom:var(--space-2)}
.pagehead h1{font-size:var(--text-h1-size);line-height:1.22;letter-spacing:var(--text-h1-tracking);font-weight:600;margin:0 0 var(--space-2)}
.pagehead p{margin:0;color:var(--color-muted);font-size:var(--text-ui-size);max-width:720px}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric{font-size:var(--text-h1-size);font-weight:600;margin:var(--space-2) 0 var(--space-1)}
.metriclabel{font-size:var(--text-caption-size);color:var(--color-muted)}
.sectionbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:var(--space-8) 0 var(--space-3)}
.sectionbar h2{margin:0;font-size:var(--text-body-size)}
.row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-line)}
.row:last-child{border-bottom:0;padding-bottom:0}
.symbol{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;background:var(--color-canvas);border-radius:var(--radius-card);color:var(--color-ink);font-size:var(--text-body-size)}
.rowmain{min-width:0;flex:1}
.detail-grid>.stack{min-width:0}
.connection-row{flex-wrap:wrap}
.connection-row .rowmain{min-width:160px}
.connection-row .actions{flex-wrap:wrap}
.connection-row .hint{margin:var(--space-1) 0}
.rowmeta{color:var(--color-muted);font-size:var(--text-caption-size);margin-top:2px}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.callout{background:var(--color-canvas);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);font-size:var(--text-caption-size);color:var(--color-text)}
.callout.warning{background:var(--color-warning-bg);border-color:var(--color-line);color:var(--color-warning)}
.callout.success{background:var(--color-success-bg);border-color:var(--color-line);color:var(--color-success)}
.separator{height:1px;background:var(--color-line);margin:var(--space-4) 0}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.hero{margin:var(--space-8) 0;padding:var(--space-12);border-radius:var(--radius-hero);background:var(--color-navy);color:var(--color-ink-on-navy);overflow:hidden}
.hero h1{font-size:clamp(var(--text-h1-size),3.6vw,var(--text-display-size));letter-spacing:var(--text-h1-tracking);line-height:1.11;max-width:730px;margin:var(--space-4) 0}
.hero p{font-size:var(--text-body-size);line-height:1.65;color:var(--color-muted-on-navy);max-width:610px}
.hero .eyebrow{color:var(--color-muted-on-navy)}
.hero .btn{min-height:var(--control)}
.cookie-note{position:fixed;left:12px;right:12px;bottom:12px;z-index:140;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);max-width:620px;margin-inline:auto;background:var(--color-paper);color:var(--color-text);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-pop);font-size:var(--text-ui-size);line-height:1.5}
.cookie-note p{margin:0;flex:1 1 260px}
.cookie-note .btn{min-height:var(--control-dense);padding:var(--space-2) var(--space-4)}
@media(max-width:1279px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.content{padding:var(--space-6)}
}
@media(max-width:1023px){.pagehead{flex-wrap:wrap}
.hero{padding:var(--space-8)}
}
@media(max-width:767px){.content{padding:var(--space-6) var(--space-4) var(--space-12)}
.grid,.grid.two,.formgrid{grid-template-columns:1fr}
.pagehead h1{font-size:var(--text-h1-size)}
.metric{font-size:var(--text-h2-size)}
.hero{padding:var(--space-6) var(--space-6)}
.hero h1{letter-spacing:var(--text-h1-tracking)}
.hero p{font-size:var(--text-ui-size)}
}
.pagehead p{font-size:var(--text-ui-size)}
.rowmeta{font-size:var(--text-caption-size)}
.brand{text-decoration:none;display:block}
.brand:hover{text-decoration:none}
.navitem{text-decoration:none;min-height:42px}
.navitem:hover{text-decoration:none}
.content{max-width:1410px}
#page-title:focus{outline:none}
.back-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-muted);font-size:var(--text-ui-size);margin-bottom:var(--space-6)}
.text-link{display:inline-block;margin-top:var(--space-2)}
.reading-card{max-width:840px}
.form-bottom{margin-top:var(--space-6)}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--space-12);align-items:center}
.hero{padding:var(--space-12)}
.hero h1{font-size:clamp(var(--text-h1-size),3.6vw,var(--text-display-size));letter-spacing:var(--text-h1-tracking)}
.hero p{font-size:var(--text-ui-size);line-height:1.7}
.hero small{display:block;margin-top:var(--space-4);color:var(--color-muted-on-navy);font-size:var(--text-caption-size)}
.white-outline{background:transparent;color:var(--color-ink-on-navy);border-color:var(--color-muted-on-navy)}
.white-outline:hover{background:var(--color-navy);border-color:var(--color-ink-on-navy)}
.hero-preview{background:var(--color-navy);border:1px solid var(--color-muted-on-navy);border-radius:var(--radius-card);padding:var(--space-6)}
.preview-caption{font-size:var(--text-caption-size);color:var(--color-muted-on-navy);margin-bottom:var(--space-4)}
.request-bubble{background:var(--color-selected);color:var(--color-ink);border-radius:var(--radius-card);padding:var(--space-4);font-weight:600;font-size:var(--text-ui-size);margin-bottom:var(--space-4)}
.preview-flow{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;font-size:var(--text-ui-size);color:var(--color-ink-on-navy)}
.preview-flow .ico{color:var(--color-accent)}
.preview-note{border-top:1px solid var(--color-muted-on-navy);padding-top:var(--space-4);margin-top:var(--space-2);font-size:var(--text-caption-size);color:var(--color-muted-on-navy);line-height:1.6}
.bottom-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-8) var(--space-8);margin-top:var(--space-8)}
.bottom-cta h2{font-size:var(--text-h3-size);margin:0 0 var(--space-2)}
.bottom-cta p{font-size:var(--text-ui-size);color:var(--color-muted);margin:0}
.split-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin:var(--space-8) 0}
.split-section>div:not(.card)>h2{font-size:var(--text-h2-size);line-height:1.35;margin-top:var(--space-2)}
.split-section>div:not(.card)>p{color:var(--color-muted);line-height:1.7}
.card h2>.ico{margin-right:var(--space-2);color:var(--color-muted)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:var(--space-6);align-items:start}
.architecture{display:flex;align-items:stretch;gap:var(--space-3);margin:var(--space-8) 0 0;border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-paper);padding:var(--space-6)}
.arch-zone{flex:1;min-width:0;padding-top:2px}
.zone-label{display:block;font-size:var(--text-caption-size);color:var(--color-muted);text-align:center;margin-bottom:var(--space-4)}
.arch-node{display:flex;flex-direction:column;gap:var(--space-2);align-items:center;text-align:center;padding:var(--space-6) var(--space-3);background:var(--color-canvas);border:1px solid var(--color-line);border-radius:var(--radius-card);height:calc(100% - 31px);min-height:154px}
.arch-node strong{font-size:var(--text-ui-size)}
.arch-node small{font-size:var(--text-caption-size);color:var(--color-muted);line-height:1.6}
.arch-node>.ico{color:var(--color-link);width:25px;height:25px}
.arch-node.core{background:var(--color-paper);border-color:var(--color-accent)}
.company-zone{flex:2.15}
.arch-internal{display:flex;align-items:stretch;gap:var(--space-3);height:calc(100% - 31px);border:1px dashed var(--color-muted);border-radius:var(--radius-card);padding:var(--space-2);margin-top:-8px}
.arch-internal .arch-node{flex:1;height:100%;padding-top:var(--space-4);border:0;background:var(--color-canvas)}
.flow-arrow{align-self:center;color:var(--color-muted);font-size:var(--text-h2-size);margin-top:var(--space-4)}
.arch-caption{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-3) var(--space-2);color:var(--color-muted);font-size:var(--text-caption-size)}
.arch-caption span{display:flex;gap:var(--space-2);align-items:flex-start}
.arch-caption .ico{width:16px}
.capability-list{border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-paper);margin-bottom:var(--space-6)}
.capability-list>div{display:grid;grid-template-columns:24px 200px 1fr;gap:var(--space-3);align-items:center;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-line)}
.capability-list>div:last-child{border:0}
.capability-list .ico{color:var(--color-success)}
.capability-list strong{font-size:var(--text-ui-size)}
.capability-list span{font-size:var(--text-ui-size);color:var(--color-muted)}
.scenario-card{display:flex;flex-direction:column;padding:var(--space-6);gap:0}
.scenario-card .labeltag{font-size:var(--text-caption-size);letter-spacing:.6px;color:var(--color-muted);font-weight:600;text-transform:uppercase;margin-bottom:var(--space-2)}
.scenario-card h2{font-size:var(--text-h3-size);line-height:1.35;min-height:52px;margin:0 0 var(--space-3)}
.scenario-card>p{margin:0 0 var(--space-4);min-height:62px;line-height:1.65}
.case-visual{min-height:136px;background:var(--color-canvas);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-4) var(--space-4);display:flex;flex-direction:column;justify-content:center;margin-bottom:var(--space-4);color:var(--color-text)}
.mini-row{display:flex;gap:var(--space-3);justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px solid var(--color-line);font-size:var(--text-caption-size)}
.mini-row:last-child{border:0}
.mini-row:first-child{color:var(--color-muted)}
.mini-row .mini-ok{color:var(--color-success)}
.mini-warn{color:var(--color-warning)}
.mini-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.mini-columns small{display:block;color:var(--color-muted);font-size:var(--text-caption-size)}
.mini-columns b{display:block;font-size:var(--text-caption-size);margin:var(--space-2) 0}
.mini-bar{display:block;height:10px;background:var(--color-accent);border-radius:var(--radius-field)}
.w80{width:80%}
.w55{width:55%;background:var(--color-line)}
.mini-foot{font-size:var(--text-caption-size);color:var(--color-muted);text-align:center;margin-top:var(--space-4)}
.mini-chain{display:flex;justify-content:space-between;gap:var(--space-2);align-items:center}
.mini-chain span{background:var(--color-paper);padding:var(--space-3) var(--space-2);font-size:var(--text-caption-size);border:1px solid var(--color-line);border-radius:var(--radius-field);text-align:center;flex:1;position:relative}
.mini-chain span+span:before{content:'›';position:absolute;left:-7px;color:var(--color-muted);font-size:var(--text-body-size);top:5px}
.mini-days{display:flex;gap:var(--space-3)}
.mini-days>div{flex:1;text-align:center}
.mini-days small{color:var(--color-muted)}
.mini-block{display:block;height:35px;margin-top:var(--space-2);border-radius:var(--radius-field);background:var(--color-accent-hover)}
.mini-block.gap{border:1px dashed var(--color-warning);background:var(--color-warning-bg)}
.case-result{margin:0 0 var(--space-4);flex:1}
.case-result>span{text-transform:uppercase;font-size:var(--text-caption-size);font-weight:600;color:var(--color-muted);letter-spacing:.8px}
.case-result p{color:var(--color-text);font-size:var(--text-ui-size);margin:var(--space-2) 0}
.case-link{font-size:var(--text-ui-size);font-weight:600;border-top:1px solid var(--color-line);padding-top:var(--space-3);display:flex;align-items:center;justify-content:space-between}
.three-cases .scenario-card h2{font-size:var(--text-body-size)}
.catalog-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between}
.catalog-toolbar .search{position:relative;flex:0 0 290px}
.request-box{white-space:pre-wrap;background:var(--color-canvas);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-6);font-size:var(--text-ui-size);line-height:1.8;margin:var(--space-4) 0;user-select:text}
.metric-card:hover{border-color:var(--color-accent);text-decoration:none}
.metric-card p{margin:var(--space-1) 0 0}
.metric-card .metric{color:var(--color-ink)}
.metric-card .metriclabel{display:flex;align-items:center;gap:var(--space-2);color:var(--color-muted)}
.metric-card p .ico{height:15px;width:15px}
.included{display:flex;gap:var(--space-4);flex-wrap:wrap;margin:var(--space-6) 0 var(--space-6);color:var(--color-text);font-size:var(--text-caption-size)}
.included .ico{width:17px;color:var(--color-success)}
.instruction-list{padding-left:var(--space-6);margin:var(--space-2) 0 var(--space-6);color:var(--color-text);font-size:var(--text-ui-size);line-height:1.75}
.instruction-list li{padding:var(--space-2) 0 var(--space-2) var(--space-1)}
.base-choice{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;padding:var(--space-4) 0;border-bottom:1px solid var(--color-line);font-size:var(--text-ui-size)}
.base-choice input{width:18px;height:18px;accent-color:var(--color-ink)}
.base-choice strong,.base-choice small{display:block}
.base-choice small{font-size:var(--text-caption-size);margin-top:var(--space-1);color:var(--color-muted)}
.disclosure{padding:var(--space-4);background:var(--color-canvas);border:1px solid var(--color-line);border-radius:var(--radius-card);margin:var(--space-2) 0 var(--space-4)}
.disclosure summary{cursor:pointer;font-size:var(--text-ui-size);font-weight:600;color:var(--color-ink)}
.disclosure[open] summary{margin-bottom:var(--space-4)}
.disclosure .btn{margin-top:var(--space-3)}
textarea{resize:none;min-height:85px}
.facts{margin:var(--space-4) 0}
.facts>div{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-3) 0;border-bottom:1px solid var(--color-line);font-size:var(--text-ui-size)}
.facts>div:last-child{border:0}
.facts dt{color:var(--color-muted)}
.facts dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere}
@media(min-width:1280px){.content{padding-top:var(--space-8)}
}
@media(max-width:1279px){.architecture{gap:var(--space-2);padding:var(--space-4)}
.arch-node{padding:var(--space-4) var(--space-2)}
.arch-node small{font-size:var(--text-caption-size)}
.hero-grid{gap:var(--space-6)}
.three-cases{grid-template-columns:repeat(3,minmax(0,1fr))}
.three-cases .scenario-card{padding:var(--space-4)}
.detail-grid{grid-template-columns:minmax(0,1.3fr) minmax(250px,1fr)}
.scenario-card>p{min-height:0}
.row{flex-wrap:wrap}
.rowmain{min-width:150px}
}
@media(max-width:1023px){
.hero-grid{grid-template-columns:1fr}
.hero-preview{display:none}
.hero h1{font-size:var(--text-h1-size)}
.detail-grid{grid-template-columns:1fr}
.detail-grid>aside{display:grid;grid-template-columns:1fr 1fr}
.architecture{flex-direction:column;max-width:620px;margin-left:auto;margin-right:auto;gap:var(--space-1)}
.arch-zone{width:100%}
.arch-node{height:auto;min-height:110px}
.zone-label{margin-bottom:var(--space-2)}
.architecture>.flow-arrow{transform:rotate(90deg);margin:2px 0}
.arch-internal{height:auto;margin-top:0}
.arch-internal .arch-node{min-height:120px}
.arch-caption{flex-direction:column;max-width:620px;margin:0 auto;gap:var(--space-3)}
.three-cases{grid-template-columns:1fr}
.three-cases .scenario-card h2{min-height:0;font-size:var(--text-h3-size)}
.three-cases .scenario-card{display:grid;grid-template-columns:1fr 220px;column-gap:var(--space-6)}
.three-cases .labeltag{grid-column:1}
.three-cases .scenario-card h2{grid-column:1}
.three-cases .scenario-card>p{grid-column:1}
.three-cases .case-visual{grid-column:2;grid-row:1 / 5;align-self:center;width:100%}
.three-cases .case-result{grid-column:1}
.three-cases .case-link{grid-column:1 / -1}
.split-section{gap:var(--space-4)}
.capability-list>div{grid-template-columns:24px 150px 1fr}
.capability-list span{font-size:var(--text-caption-size)}
}
@media(max-width:767px){.content{padding:var(--space-6) var(--space-4) var(--space-16)}
.pagehead h1{font-size:var(--text-h1-size);line-height:1.3}
.pagehead p{font-size:var(--text-ui-size);line-height:1.7}
.hero{padding:var(--space-8) var(--space-6);margin:var(--space-6) 0}
.hero h1{font-size:var(--text-h1-size)}
.hero p{font-size:var(--text-ui-size)}
.hero .actions{gap:var(--space-3)}
.hero .actions .btn{font-size:var(--text-caption-size)}
.hero small{font-size:var(--text-caption-size)}
.split-section{grid-template-columns:1fr}
.detail-grid>aside{display:flex}
.bottom-cta{flex-direction:column;align-items:flex-start;padding:var(--space-6)}
.bottom-cta h2{font-size:var(--text-h3-size)}
.bottom-cta p{font-size:var(--text-ui-size)}
.scenario-card h2{font-size:var(--text-h4-size);min-height:0}
.scenario-card>p{font-size:var(--text-ui-size)}
.scenario-card{padding:var(--space-6)}
.catalog-toolbar .search{flex:1 0 100%}
.catalog-toolbar{gap:var(--space-4)}
.three-cases .scenario-card{display:flex}
.three-cases .case-visual{margin:var(--space-3) 0 var(--space-4)}
.three-cases .scenario-card>p{margin-bottom:var(--space-2)}
.three-cases .scenario-card .labeltag{order:0}
.case-visual{min-height:125px}
.rowmain{min-width:130px}
.row .chip{margin-left:var(--space-12)}
.row .btn{margin-left:auto}
.row .delete-anchor .btn{margin-left:0}
.row .delete-anchor{margin-left:auto}
.row .delete-anchor+.chip{margin-left:0}
.metric-card .metriclabel{font-size:var(--text-ui-size)}
.metric-card .metric{font-size:var(--text-h1-size)}
.grid:has(>.metric-card){grid-template-columns:1fr}
.metric-card{display:grid;grid-template-columns:1fr 50px;align-items:center;padding:var(--space-4) var(--space-6)}
.metric-card .metriclabel{grid-column:1}
.metric-card .metric{grid-column:2;grid-row:1 / 3;text-align:right;margin:0}
.metric-card p{grid-column:1;font-size:var(--text-caption-size)}
.instruction-list{font-size:var(--text-ui-size)}
.base-choice{gap:var(--space-2);flex-wrap:wrap}
.base-choice .rowmain{min-width:180px;flex:1}
.base-choice .symbol{display:none}
.base-choice .chip{margin-left:var(--space-6)}
.capability-list>div{grid-template-columns:24px 1fr;padding:var(--space-4)}
.capability-list span{grid-column:2;font-size:var(--text-ui-size)}
.arch-caption{font-size:var(--text-caption-size)}
.arch-caption .ico{flex-shrink:0}
.arch-internal .arch-node{padding:var(--space-4) var(--space-2)}
.arch-node small{font-size:var(--text-caption-size)}
.arch-node strong{font-size:var(--text-ui-size)}
.facts dt{max-width:50%}
.facts dd{max-width:60%}
}
.eyebrow{color:var(--color-muted)}
.hero .eyebrow{color:var(--color-muted-on-navy)}
.rowmeta{color:var(--color-muted)}
.mini-foot,.mini-days small,.mini-columns small,.mini-row:first-child{color:var(--color-muted)}
.price-period{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-6) 0}
/* The period is a switch, not an action: the chosen one is marked, the screen keeps one primary button. */
.price-period .btn[aria-pressed=true]{background:var(--color-selected);border-color:var(--color-ink)}
.plan-price{display:flex;flex-direction:column;gap:var(--space-2)}
.plan-price small{font-size:var(--text-ui-size);font-weight:400;color:var(--color-muted)}
.pricing-builder{margin:var(--space-8) 0}
.purchase-cart{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr);gap:var(--space-8)}
.cart-config>.field{width:100%}
.pack-list{border-top:1px solid var(--color-line)}
.pack-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);border-bottom:1px solid var(--color-line);padding:var(--space-4) 0}
.pack-row label{display:flex;flex-direction:column;gap:var(--space-2)}
.pack-row small{color:var(--color-muted)}
.pack-quantity{display:flex;align-items:center;gap:var(--space-2)}
.pack-quantity input{width:64px;text-align:center;padding:var(--space-3) var(--space-1)}
.pack-quantity .btn{min-width:var(--tap);min-height:var(--tap)}
.cart-summary{border-left:1px solid var(--color-line);padding-left:var(--space-8)}
.cart-total strong{display:block;font-size:var(--text-h1-size);color:var(--color-ink)}
.cart-total span{display:block;color:var(--color-muted);margin-top:var(--space-1)}
/* ---- «Тариф и оплата» (purchase.js): the head with the tariff, gifts and a waiting payment, the counters, the tabs. */
.billing-head{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--measure);margin-bottom:var(--space-6)}
.billing-head>p{margin:0}
.billing-gifts h2{margin:0 0 var(--space-1);font-size:var(--text-h4-size);line-height:var(--text-h4-line)}
.billing-gifts ul{margin:0;padding-left:var(--space-6)}
.billing-gifts .hint{margin:var(--space-1) 0 0}
.billing-pending{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.billing-pending p{margin:0;flex:1 1 20rem}
.billing-pending .actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.billing-screen .billing-metrics{margin-bottom:var(--space-6)}
.billing-screen .metric-card p{margin:var(--space-1) 0 0}
.billing-screen .tab-panel{max-width:1040px}
.billing-screen .formgrid{max-width:var(--measure)}
.billing-screen .tab-panel h2{margin:var(--space-2) 0 var(--space-4);font-size:var(--text-h4-size);line-height:var(--text-h4-line)}
.billing-screen .list-rows+h2{margin-top:var(--space-6)}
.purchase-terms a{text-decoration:underline;text-underline-offset:3px}
.billing-screen .list-rows+.hint,.billing-screen .tab-panel>p.hint{margin:var(--space-4) 0}
.billing-renewal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-line)}
.billing-renewal p{margin:0}
.billing-status{margin:var(--space-3) 0}
.billing-status:empty{display:none}
.active-set label{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0}
.active-set .active-row{padding:0}
.active-set .active-hold{padding:2px 0 var(--space-3) var(--space-8);font-size:var(--text-ui-size);color:var(--color-muted)}
.active-set .active-row:has(.active-main:checked) .active-hold{display:none}
.active-set fieldset{border:0;padding:0;min-width:0}
.active-set legend{font-weight:600;margin-bottom:var(--space-3)}
.active-set .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.purchase-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.purchase-terms{font-size:var(--text-ui-size);color:var(--color-muted);line-height:1.7}
.purchase-accept{display:flex;align-items:flex-start;gap:var(--space-3);color:var(--color-text)}
.purchase-accept input{margin-top:var(--space-1)}
#receipt-email{width:min(100%,28rem)}
.billing-screen input[type="checkbox"]{width:18px;height:18px;flex-shrink:0}
.billing-screen .form-error{margin:var(--space-3) 0}
@media(max-width:767px){.purchase-cart{grid-template-columns:1fr;gap:var(--space-6)}
.cart-summary{border-left:0;border-top:1px solid var(--color-line);padding:var(--space-6) 0 0}
.pack-row{gap:var(--space-2)}
.pack-row strong{font-size:var(--text-ui-size)}
.pack-row small{font-size:var(--text-caption-size)}
.active-set .grid{grid-template-columns:1fr}
.billing-screen .formgrid{grid-template-columns:1fr}
.purchase-accept,.active-set label{min-height:var(--tap)}
.billing-screen .tablist{flex-wrap:wrap}
.billing-pending .actions,.billing-pending .btn{width:100%}
.purchase-actions>.btn{width:100%}
}
.request-box{white-space:pre-wrap;overflow-wrap:anywhere}
#security-dialog{max-width:560px;border:1px solid var(--color-line);border-radius:var(--radius-card);padding:var(--space-8);color:var(--color-ink);background:var(--color-paper)}
#security-dialog::backdrop{background:var(--color-navy);opacity:.4}
.scenario-role-links{display:flex;align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;margin:var(--space-6) 0 0;font-size:var(--text-caption-size)}
.scenario-role-links strong{color:var(--color-ink)}
.scenario-role-links a{color:var(--color-link)}
.billing-metrics .metric{white-space:nowrap}
@media(max-width:767px){.billing-metrics .metric-card{grid-template-columns:1fr auto}
}
.nav-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;overflow:hidden;pointer-events:none;opacity:0;animation:nav-progress-in .2s ease .2s forwards}
.nav-progress:before{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);animation:nav-progress 1.2s ease-in-out infinite}
@keyframes nav-progress-in{to{opacity:1}}
@keyframes nav-progress{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
#main-content[aria-busy=true]{opacity:.6;transition:opacity .2s ease .25s}
@media(prefers-reduced-motion:reduce){.nav-progress{opacity:1}
.nav-progress:before{width:100%;opacity:.5}
}
/* Cabinet frame. Desktop: the side menu of --sidebar width with names and counters. Tablet (768-1023 px): the
   same menu with icons only; the name shows beside the icon on hover and focus and stays the link's name for screen
   readers. Phone (767 px and below): the logo above, the bottom bar with Обзор, Базы, ИИ and Ещё, which opens the
   whole menu as a drawer. */
.shell:not(.public):not(.auth){display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr)}
.sidebar{background:var(--color-paper);border-right:1px solid var(--color-line);color:var(--color-text);padding:var(--space-6) var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
.sidebar .brand{padding:0 var(--space-3) var(--space-6)}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-separator{display:block;height:1px;background:var(--color-line);margin:var(--space-3) var(--space-3)}
.navitem{position:relative;min-height:var(--tap)}
.navitem .ico{flex:0 0 auto}
.userface{margin-top:auto;padding:var(--space-4) var(--space-2) 0;border-top:1px solid var(--color-line);display:flex;align-items:center;gap:var(--space-3)}
.userface-text{min-width:0;flex:1;display:flex;flex-direction:column}
.userface-text strong,.userface-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userface-text strong{color:var(--color-ink);font-size:var(--text-ui-size)}
.userface-text small{color:var(--color-muted);font-size:var(--text-caption-size)}
.userface .logout{flex-shrink:0;position:relative;min-width:var(--tap);min-height:var(--tap);border:0;background:transparent;color:var(--color-text)}
.logout-label{display:none}
.main{min-width:0}
.main>.content{max-width:var(--content-app)}
.topbar,.drawer-close,.drawer-backdrop{display:none}
.drawer-close .ico{width:18px;height:18px}
@media(min-width:768px) and (max-width:1023px){
  .shell:not(.public):not(.auth){grid-template-columns:72px minmax(0,1fr)}
  .sidebar{padding:var(--space-4) var(--space-2);align-items:stretch;overflow:visible}
  .sidebar .brand{padding:0 0 var(--space-4);font-size:var(--text-ui-size);text-align:center}
  .sidebar .navitem{justify-content:center;padding:var(--space-3) 0}
  .sidebar .navitem-label,.userface-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .sidebar .nav-count{position:absolute;top:2px;right:2px;min-width:18px;line-height:18px;padding:0 4px}
  .nav-separator{margin:var(--space-2) var(--space-1)}
  .userface{flex-direction:column;padding:var(--space-3) 0 0;gap:var(--space-2)}
  /* The name beside the icon. The generated text has an empty alternative, so a screen reader hears the name once. */
  .sidebar [data-tip]:hover:after,.sidebar [data-tip]:focus-visible:after{content:attr(data-tip);content:attr(data-tip) / "";position:absolute;left:calc(100% + var(--space-2));top:50%;transform:translateY(-50%);z-index:110;padding:var(--space-1) var(--space-3);border-radius:var(--radius-field);background:var(--color-ink);color:var(--color-paper);font-size:var(--text-caption-size);font-weight:600;line-height:var(--text-caption-line);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-pop)}
}
@media(min-width:768px) and (max-width:1023px) and (max-height:639px){
  .sidebar{position:static;height:auto;min-height:100vh}
}
@media(max-width:767px){
  .shell:not(.public):not(.auth){display:block;padding-bottom:calc(var(--space-16) + env(safe-area-inset-bottom))}
  .topbar{position:sticky;top:0;z-index:80;display:flex;align-items:center;min-height:56px;padding:0 var(--space-4);background:var(--color-paper);border-bottom:1px solid var(--color-line)}
  .topbar .brand{padding:var(--space-2) 0;font-size:var(--text-h3-size)}
  .sidebar{position:fixed;z-index:102;left:0;top:0;bottom:0;width:min(320px,calc(100vw - 56px));height:100dvh;padding:var(--space-3) var(--space-3) var(--space-4);transform:translateX(-105%);transition:transform .2s ease;visibility:hidden;box-shadow:var(--shadow-pop);overflow-y:auto}
  .shell.menu-open .sidebar{transform:translateX(0);visibility:visible}
  .drawer-close{display:flex;align-items:center;gap:var(--space-2);align-self:flex-end;min-height:var(--tap);background:transparent;color:var(--color-text);border:0;border-radius:var(--radius-field);padding:0 var(--space-3);font:inherit;cursor:pointer}
  .drawer-backdrop{position:fixed;inset:0;z-index:101;border:0;background:var(--color-navy);opacity:.4;cursor:pointer}
  .shell.menu-open .drawer-backdrop{display:block}
  .logout-label{display:inline}
  .userface .logout{display:inline-flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);border-radius:var(--radius-field);font:inherit;font-size:var(--text-caption-size);font-weight:600}
  .userface .logout:hover,.drawer-close:hover{background:var(--color-selected);color:var(--color-ink)}
  .main>.content{padding-bottom:var(--space-8)}
  .bottom-nav-item{min-height:var(--tap);font:inherit;font-size:var(--text-caption-size);background:transparent;border:0;cursor:pointer}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}
}

/* Sign-in frame: the logo, one card per step, nothing else. */
.shell.auth{display:block}
.authbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:var(--content-app);margin:0 auto;padding:var(--space-4) var(--space-6)}
.authbar .brand{padding:0}
.authbar .btn{gap:var(--space-2)}
.auth-main{max-width:var(--content-app);margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-16)}
.auth-card{max-width:460px;margin:var(--space-8) auto 0}
.auth-card h1{font-size:var(--text-h2-size);line-height:var(--text-h2-line);margin:0 0 var(--space-2)}
.auth-lead{color:var(--color-text);margin:0 0 var(--space-6)}
.auth-card form>.actions,.auth-card .form-bottom{margin-top:var(--space-6)}
.auth-social{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--color-line)}
.auth-or{color:var(--color-muted);font-size:var(--text-caption-size);margin:0 0 var(--space-3)}
.consent-list{display:grid;gap:var(--space-3);margin:0;padding:0;border:0;min-width:0}
.consent-choice{display:flex;align-items:flex-start;gap:var(--space-3);min-height:var(--tap);padding:var(--space-3) var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-card);cursor:pointer}
.consent-choice input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--color-ink)}
.consent-choice:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
.consent-choice input:focus-visible{outline:0}
.consent-choice>span{display:flex;flex-direction:column;gap:var(--space-1)}
.consent-choice small{color:var(--color-muted);font-size:var(--text-caption-size)}
@media(max-width:767px){
  .authbar{padding:var(--space-3) var(--space-4)}
  .auth-main{padding:var(--space-4) var(--space-4) var(--space-12)}
  .auth-card{margin-top:var(--space-2)}
}
/* ===== Подключение по шагам (screens/setup.js) ===== */
.setup-shell{min-height:100vh;background:var(--color-canvas)}
.setup-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:var(--content-app);margin:0 auto;padding:var(--space-4) var(--space-6)}
.setup-head .brand{padding:0}
.setup-head .btn{gap:var(--space-2)}
.setup-main{max-width:760px;margin:0 auto;padding:var(--space-4) var(--space-6) var(--space-16)}
.setup-steps ol{display:flex;gap:var(--space-2);list-style:none;margin:0 0 var(--space-8);padding:0;counter-reset:none}
.setup-steps li{flex:1;display:flex;flex-direction:column;gap:var(--space-2);min-width:0;color:var(--color-muted);font-size:var(--text-caption-size);line-height:var(--text-caption-line)}
.setup-steps li:before{content:"";display:block;height:4px;border-radius:var(--radius-pill);background:var(--color-line)}
.setup-steps li.done:before{background:var(--color-success)}
.setup-steps li.current:before{background:var(--color-accent)}
.setup-steps li.current{color:var(--color-ink);font-weight:600}
.setup-steps li.done{color:var(--color-text)}
.setup-step-label{display:block}
.setup-title{margin:0 0 var(--space-6)}
.setup-eyebrow{margin:0 0 var(--space-2);color:var(--color-muted);font-size:var(--text-caption-size)}
.setup-title h1{font-size:var(--text-h2-size);line-height:var(--text-h2-line);margin:0}
.setup-lead{margin:var(--space-2) 0 0;color:var(--color-text);max-width:var(--measure)}
.setup-main .back-link{display:inline-flex;align-items:center;gap:var(--space-1);margin:0 0 var(--space-4)}
.setup-card{margin:0 0 var(--space-6)}
.setup-card h2{font-size:var(--text-h3-size);line-height:var(--text-h3-line);margin:0 0 var(--space-3)}
.setup-card h3{font-size:var(--text-ui-strong-size);margin:var(--space-4) 0 var(--space-2)}
.setup-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:var(--space-4) 0 0}
.setup-note{margin:var(--space-2) 0 0;color:var(--color-muted);font-size:var(--text-caption-size);line-height:var(--text-caption-line)}
.setup-actions .setup-note{margin:0}
.setup-who{margin:0 0 var(--space-6)}
.setup-wait{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-6) 0 0;padding-top:var(--space-4);border-top:1px solid var(--color-line);color:var(--color-text);font-size:var(--text-ui-size)}
.setup-form .form-field{margin:0}
.setup-inline{display:flex;align-items:flex-start;gap:var(--space-3);margin:0 0 var(--space-4)}
.setup-inline .form-field{flex:1;min-width:0}
.setup-inline>.btn{margin-top:calc(var(--text-ui-line) + var(--space-2))}
.setup-search .filter-chips{margin:0 0 var(--space-4)}
.setup-block-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-2)}
.setup-block-head h2{margin:0}
.setup-where{list-style:none;margin:var(--space-4) 0 0;padding:0;border-top:1px solid var(--color-line)}
.setup-where-row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--row);padding:var(--space-2) 0;border-bottom:1px solid var(--color-line)}
.setup-where-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.setup-where-main strong{color:var(--color-ink);font-size:var(--text-ui-size);overflow-wrap:anywhere}
.setup-where-what,.setup-row-note{color:var(--color-muted);font-size:var(--text-caption-size)}
.setup-row-note{color:var(--color-text)}
.setup-report{min-height:var(--text-ui-line);margin:0 0 var(--space-4);color:var(--color-text);font-size:var(--text-ui-size)}
.setup-report:empty{display:none}
.setup-results-set{border:0;margin:0;padding:0;min-width:0}
.setup-group{margin:var(--space-4) 0 0}
.setup-group h3{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2);font-size:var(--text-ui-size)}
.setup-count{color:var(--color-muted);font-size:var(--text-caption-size);font-weight:400}
.setup-group-meta{color:var(--color-muted);font-size:var(--text-caption-size);font-weight:400;overflow-wrap:anywhere}
.setup-picks{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.setup-pick{display:flex;align-items:center;gap:var(--space-3);min-height:var(--row);border-bottom:1px solid var(--color-line)}
.setup-pick label{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);padding:var(--space-2) 0;cursor:pointer}
.setup-pick input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--color-ink)}
.setup-pick input:disabled{cursor:not-allowed}
.setup-pick input:disabled+.setup-pick-main{cursor:default}
.setup-pick-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.setup-pick-main strong{color:var(--color-ink);font-size:var(--text-ui-size);overflow-wrap:anywhere}
.setup-pick-meta{color:var(--color-muted);font-size:var(--text-caption-size);overflow-wrap:anywhere}
.setup-pick .delete-anchor{position:relative}
.setup-recovery .state{margin:0}
.setup-recovery-action{margin:var(--space-4) 0 0}
.setup-recovery-action .form-field{margin:0 0 var(--space-3)}
.setup-questions{list-style:none;margin:0;padding:0}
.setup-question{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-line)}
.setup-question:last-child{border-bottom:0}
.setup-question p{margin:0;color:var(--color-ink);font-size:var(--text-body-size)}
.setup-question .btn{flex:0 0 auto;gap:var(--space-2)}
@media(max-width:767px){
  .setup-head{padding:var(--space-3) var(--space-4)}
  .setup-head .brand,.setup-later{display:inline-flex;align-items:center;min-height:var(--tap)}
  .setup-main{padding:var(--space-2) var(--space-4) var(--space-12)}
  .setup-steps ol{margin-bottom:var(--space-6)}
  .setup-steps li:not(.current) .setup-step-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .setup-inline{flex-direction:column;align-items:stretch}
  .setup-inline>.btn{margin-top:0}
  .setup-actions>.btn,.setup-actions>.delete-anchor{width:100%}
  .setup-actions>.btn{justify-content:center}
  .setup-question{flex-direction:column;align-items:stretch}
  .setup-pick{flex-wrap:wrap;padding-bottom:var(--space-2)}
  .setup-pick label{flex-basis:100%}
  .setup-where-row{flex-wrap:wrap}
  .setup-main .back-link{min-height:var(--tap)}
}
/* ===== конец блока «Подключение по шагам» ===== */
/* The optional question after the first sign-in: a card at the top of the overview. */
.work-card{margin:0 0 var(--space-6)}
.work-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.work-card h2{margin:0}
.work-answers{margin-top:var(--space-4)}
/* Phone: every tap target outside running text is at least 44 px tall. */
@media(max-width:767px){
  .authbar .brand,.topbar .brand,.back-link,.form-bottom a,.sectionbar a{display:inline-flex;align-items:center;min-height:var(--tap)}
}

/* Базы 1С: the list in two views and the card of a base. The list picks its layout by the width of its own box (a
   container query), not by the window: the side menu takes 240 px on a desktop and 72 px on a tablet. Rows are grouped
   by computer: the computer's name once, in the head of its group, across all columns. Wide: every column in one line
   of 40 px. Medium: the company, the server and the name there go under the name. Narrow: each row stacks. The state
   and «⋯» take the width of their longest content (max-content tracks shared by all rows through subgrid), so state
   words are never cut and nothing scrolls sideways. */
.bases-pagehead{align-items:center}
.bases-pagehead h1{margin:0}
.bases-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}
.bases-toolbar .search{flex:1 1 18rem;max-width:28rem}
.bases-chip-count{color:var(--color-muted);font-variant-numeric:tabular-nums}
.filter-chip[aria-pressed=true] .bases-chip-count{color:var(--color-ink)}
.bases-table{container:bases-list/inline-size;background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);min-width:0}
.bases-head{display:none}
.bases-group-head{display:flex;align-items:center;min-height:var(--control-dense);padding:var(--space-1) var(--space-4);background:var(--color-canvas);border-bottom:1px solid var(--color-line);font-weight:500}
.bases-group-bar{display:flex;align-items:center;flex-wrap:wrap;background:var(--color-canvas);border-bottom:1px solid var(--color-line)}
.bases-group-bar>.bases-group-head{flex:1 1 12rem;min-width:0;border-bottom:0;background:transparent}
.bases-group-script{margin-left:auto;margin-right:var(--space-3);font-weight:400}
.bases-group-head>*{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-ink);overflow-wrap:anywhere}
.bases-group-head .ico{color:var(--color-muted)}
.bases-group-head .bases-group-meta{margin-left:var(--space-3);color:var(--color-muted);font-weight:400}
.bases-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-2) var(--space-3) var(--space-4);border-bottom:1px solid var(--color-line)}
.bases-rows>.bases-row:last-child,.bases-group:last-child .bases-row:last-child{border-bottom:0}
.bases-row:hover{background:var(--color-canvas)}
.bases-row>:not(.bases-menu){grid-column:1}
.bases-menu{grid-column:2;grid-row:1;justify-self:end;align-self:start}
.bases-cell-name{display:flex;flex-direction:column;min-width:0}
.bases-name{color:var(--color-ink);font-weight:500;overflow-wrap:anywhere}
.bases-meta{color:var(--color-muted);font-size:var(--text-caption-size);line-height:var(--text-caption-line);overflow-wrap:anywhere}
.bases-table:not(.specialist) :is(.bases-server,.bases-infobase){display:none}
.bases-cell{min-width:0;overflow-wrap:anywhere}
.bases-cell:empty{display:none}
.bases-state .chip{height:auto;min-height:24px;max-width:100%}
.bases-state .chip-text{overflow:visible;text-overflow:clip;white-space:normal}
/* Narrow specialist rows name each value. */
.bases-table.specialist .bases-cell>.sr-only:first-child{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;color:var(--color-muted)}
/* Narrow, yet wide enough for the state beside the name. */
@container bases-list (min-width:30rem){
  .bases-table:not(.specialist) .bases-row{grid-template-columns:minmax(0,1fr) auto auto}
  .bases-table:not(.specialist) .bases-state{grid-column:2;grid-row:1}
  .bases-table:not(.specialist) .bases-menu{grid-column:3}
}
/* Medium: one line per base, the server and the name there under the name. */
@container bases-list (min-width:44rem){
  .bases-table:not(.specialist) .bases-scroll{display:grid;grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:var(--space-3)}
  .bases-table:not(.specialist) :is(.bases-rows,.bases-group,.bases-group-rows,.bases-head,.bases-row){display:grid;grid-column:1/-1;grid-template-columns:subgrid}
  .bases-table:not(.specialist) :is(.bases-head,.bases-row){align-items:center;min-height:var(--row);padding:2px var(--space-2) 2px var(--space-4)}
  .bases-table:not(.specialist) .bases-head{min-height:var(--control-dense);border-bottom:1px solid var(--color-line);color:var(--color-muted);font-size:var(--text-caption-size);font-weight:500}
  .bases-table:not(.specialist) .bases-head :is(.bases-h-server,.bases-h-infobase){display:none}
  .bases-table:not(.specialist) .bases-row>*{grid-column:auto;grid-row:auto}
  .bases-table:not(.specialist) .bases-cell-name{overflow:hidden}
  .bases-table:not(.specialist) .bases-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bases-table:not(.specialist) .bases-state .chip-text{white-space:nowrap}
  .bases-table:not(.specialist) .bases-menu{align-self:center}
  .bases-group-head,.bases-group-bar{grid-column:1/-1}
}
/* Wide: the server and the name there in their own columns. */
@container bases-list (min-width:60rem){
  .bases-table:not(.specialist):not(.mine) .bases-scroll{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) max-content max-content}
  .bases-table.mine .bases-scroll{grid-template-columns:minmax(0,1fr) max-content max-content}
  .bases-table:not(.specialist) .bases-head :is(.bases-h-server,.bases-h-infobase),.bases-table:not(.specialist) :is(.bases-server,.bases-infobase){display:block}
  .bases-table:not(.specialist) :is(.bases-server,.bases-infobase){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bases-table:not(.specialist) .bases-meta-narrow{display:none}
}
/* The specialist view: columns once all six fit; long values wrap inside their column. */
@container bases-list (min-width:52rem){
  .bases-table.specialist .bases-scroll{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) max-content max-content;column-gap:var(--space-3)}
  .bases-table.specialist.one-method .bases-scroll{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) max-content max-content}
  .bases-table.specialist :is(.bases-rows,.bases-group,.bases-group-rows,.bases-head,.bases-row){display:grid;grid-column:1/-1;grid-template-columns:subgrid}
  .bases-table.specialist :is(.bases-head,.bases-row){align-items:center;min-height:var(--row);padding:var(--space-1) var(--space-2) var(--space-1) var(--space-4)}
  .bases-table.specialist .bases-head{min-height:var(--control-dense);border-bottom:1px solid var(--color-line);color:var(--color-muted);font-size:var(--text-caption-size);font-weight:500}
  .bases-table.specialist .bases-row>*{grid-column:auto;grid-row:auto}
  .bases-table.specialist .bases-cell>.sr-only:first-child{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .bases-table.specialist .bases-check{white-space:nowrap}
  .bases-table.specialist .bases-cell:empty{display:block}
  .bases-table.specialist .bases-menu{align-self:center}
}
.bases-foot{display:flex;justify-content:center;margin-top:var(--space-3)}
.bases-common{margin:0 0 var(--space-2);color:var(--color-muted);font-size:var(--text-caption-size)}
.base-capabilities-none{margin:0 0 var(--space-2)}
.bases-foot .pager{margin:0}
.bases-specialist{margin-top:var(--space-6)}
.bases-specialist code{font-size:var(--text-ui-size)}
.base-pagehead{align-items:flex-start;margin-bottom:var(--space-4)}
.base-pagehead h1{margin:0}
.base-meta{margin:var(--space-1) 0 0}
.base-actions{justify-content:flex-end}
.base-actions-do{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--space-2)}
.base-tabs{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-6);border-bottom:1px solid var(--color-line)}
.base-tab{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-dense);padding:0 var(--space-4);border-bottom:2px solid transparent;color:var(--color-muted);font-weight:500;white-space:nowrap}
.base-tab:hover{color:var(--color-ink);text-decoration:none}
.base-tab[aria-current=page]{border-bottom-color:var(--color-ink);color:var(--color-ink)}
.base-tab:focus-visible{outline-offset:-2px}
.base-mail{max-width:28rem;margin-top:var(--space-4)}
.base-visibility,.base-people{margin:0 0 var(--space-3);padding:0;border:0;min-width:0}
.base-visibility .base-choice,.base-people .base-choice{padding:var(--space-2) 0;border:0;min-height:var(--control-dense)}
.base-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 var(--space-4)}
.base-people legend{margin-bottom:var(--space-2)}
.base-facts{display:grid}
.base-fact{display:grid;grid-template-columns:minmax(8rem,12rem) minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-line)}
.base-fact:last-child{border-bottom:0}
.base-fact-label{color:var(--color-muted)}
.base-fact-value{min-width:0;overflow-wrap:anywhere;color:var(--color-ink)}
.base-spec-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-4);align-items:start}
.base-publish-list{margin:0 0 var(--space-3);padding-left:var(--space-6)}
.base-checks{display:grid;gap:var(--space-2);margin:0 0 var(--space-3);padding:0;list-style:none}
.base-checks li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-line)}
@media(max-width:1023px){
  .base-spec-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:767px){
  .bases-pagehead,.base-pagehead{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .base-actions{justify-content:flex-start}
  .base-tabs{flex-wrap:nowrap;gap:0;overflow-x:auto;contain:inline-size}
  .base-tab{padding:0 var(--space-3);flex:0 0 auto}
  .bases-toolbar .search{max-width:none}
  .bases-name{display:inline-flex;align-items:center;min-height:var(--tap)}
  .base-tab{min-height:var(--tap)}
  .base-fact{grid-template-columns:minmax(0,1fr)}
  .base-visibility .base-choice,.base-people .base-choice{min-height:var(--tap)}
  .bases-pagehead .view-switch-option span{min-height:calc(var(--tap) - 8px)}
}
/* Overview: the next step, the counters, «Нужно внимание» and «Сегодня». The same blocks with one base or hundreds. */
.overview{display:flex;flex-direction:column;gap:var(--space-6)}
.overview>h1{margin:0}
.overview>.work-card{margin:0}
.overview-counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.overview-counters:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.overview-counter{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;padding:var(--space-4);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);color:var(--color-text);text-decoration:none;transition:border-color var(--duration-fast)}
.overview-counter:hover{border-color:var(--color-accent);text-decoration:none}
.overview-counter-label,.overview-counter-note{font-size:var(--text-caption-size);line-height:var(--text-caption-line);color:var(--color-muted);overflow-wrap:anywhere}
.overview-counter-number{color:var(--color-ink);font-size:var(--text-h2-size);line-height:var(--text-h2-line);font-weight:600;font-variant-numeric:tabular-nums}
.overview-counter-note.warn{color:var(--color-warning)}
.overview-counter-note.err{color:var(--color-danger)}
.overview-section{display:flex;flex-direction:column;gap:var(--space-3)}
.overview-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.overview-section-head h2{margin:0;font-size:var(--text-h3-size);line-height:var(--text-h3-line)}
.overview-more{font-size:var(--text-caption-size)}
.overview-step{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--color-link);font-weight:500;white-space:nowrap}
.overview-step .ico{width:18px;height:18px}
.overview-today{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin:0}
.overview-today>div{min-width:0;padding:var(--space-4);background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.overview-today dt{font-size:var(--text-caption-size);line-height:var(--text-caption-line);color:var(--color-muted)}
.overview-today dd{margin:0;color:var(--color-ink);font-size:var(--text-h2-size);line-height:var(--text-h2-line);font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:1023px){.overview-counters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
  .overview{gap:var(--space-4)}
  .overview-more,.overview-attention a.list-row-name{display:inline-flex;align-items:center;min-height:var(--tap)}
  .overview-more{justify-content:center;min-width:var(--tap)}
  .overview-today{grid-template-columns:1fr;gap:var(--space-2)}
  .overview-today>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
}
@media(prefers-reduced-motion:reduce){.overview-counter{transition:none}}
/* Screen «Компьютеры» (screens/computers.js): the list, its «Специалист» table and the card of a computer. */
.computers-screen .pagehead .actions,.computer-head .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.computers-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.computers-toolbar .search{flex:1 1 240px}
.computers-list .list-row-main{flex-basis:10rem}
.computers-table-box{position:relative;overflow-x:auto;background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.computers-table{width:100%;min-width:760px;border-collapse:collapse;font-size:var(--text-ui-size)}
.computers-table th,.computers-table td{padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-line);text-align:left;vertical-align:middle}
.computers-table thead th{color:var(--color-muted);font-size:var(--text-caption-size);font-weight:500}
.computers-table tbody tr:last-child>*{border-bottom:0}
.computers-table tbody th{font-weight:500}
.computers-table a{color:var(--color-ink)}
.computers-table-action{text-align:right;white-space:nowrap}
.computers-menu{display:inline-flex;position:relative;z-index:1}
.computers-menu:has([aria-expanded=true]){z-index:70}
/* Where the table fits, its «⋯» menus and confirmations open over the rows below instead of scrolling the table. */
@media(min-width:1280px){.computers-table-box{overflow:visible}}
/* The result of a check sits under the name of its computer: a line while it runs, the error when it fails. The row of
   a failed check is marked by a bar in the danger colour as well as by the words. */
.computers-note{display:block}
.computers-note:empty{display:none}
.computers-note [role=status]{display:block;margin-top:var(--space-1);color:var(--color-muted);font-size:var(--text-caption-size)}
.computers-error{display:block;margin-top:var(--space-1);color:var(--color-danger);font-size:var(--text-ui-size);line-height:var(--text-ui-line);font-weight:500;white-space:normal}
.computer-note .computers-error{margin:0 0 var(--space-4)}
.list-row.computers-failed,.computers-table tr.computers-failed>th{box-shadow:inset 3px 0 0 var(--color-danger)}
.computers-table tbody th{white-space:normal;min-width:12rem}
.computer-head{align-items:center}
.computer-head h1{overflow-wrap:anywhere}
.computer-diagnosis h2{margin:0 0 var(--space-3);font-size:var(--text-h4-size)}
.computer-diagnosis p{margin:0 0 var(--space-2)}
.computer-bases h2,.computer-command h2{font-size:var(--text-h3-size);line-height:var(--text-h3-line);margin:0 0 var(--space-3)}
.computer-command h3{font-size:var(--text-ui-strong-size);margin:var(--space-3) 0 var(--space-2)}
.computer-command .request-box{overflow-wrap:anywhere;margin:0}
.computer-journal{list-style:none;margin:var(--space-3) 0;padding:0}
.computer-journal li{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) 0;border-bottom:1px solid var(--color-line);font-size:var(--text-ui-size)}
.computer-journal li:last-child{border-bottom:0}
.computer-report{overflow-wrap:anywhere;font-size:var(--text-ui-size)}
.computer-screen .facts code{overflow-wrap:anywhere}
.computer-rename{max-width:480px;margin-bottom:var(--space-6)}
.computer-rename .actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
@media(max-width:767px){
  .computers-screen .pagehead .actions,.computer-head .actions{width:100%}
  .computers-toolbar .search{flex-basis:100%}
  .computers-list .list-row-main{flex-basis:100%}
  .computers-screen .list-row-name,.computer-screen .list-row-name,.computers-table a{display:inline-flex;align-items:center;min-height:var(--tap)}
}

/* Screen «Подключения ИИ» (screens/connections.js): the list, its filters and «Специалист» table, the card of a
   connection and the screen that connects an AI. */
.connections-screen .pagehead .actions,.connection-head .actions,.connect-screen .pagehead .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.connections-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3);margin-bottom:var(--space-4)}
.connections-toolbar .search{flex:1 1 240px}
.connections-toolbar .filter-chips{flex:1 0 100%}
.connections-select{display:flex;flex-direction:column;gap:var(--space-1);flex:0 1 220px;min-width:0}
.connections-select .field{width:100%}
.connections-list .list-row-main{flex-basis:10rem}
.connections-revoke{display:inline-flex;position:relative;z-index:1}
/* A row without «⋯» (another person's connection) keeps its state in the column of the others. */
.connections-list .list-row:not(:has(.row-menu))>.chip{margin-right:calc(var(--control-dense) + var(--space-4))}
.connections-revoke:has([aria-expanded=true]){z-index:70}
.connections-table-box{position:relative;overflow-x:auto;background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.connections-table{width:100%;min-width:760px;border-collapse:collapse;font-size:var(--text-ui-size)}
.connections-table th,.connections-table td{padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-line);text-align:left;vertical-align:middle}
.connections-table thead th{color:var(--color-muted);font-size:var(--text-caption-size);font-weight:500}
.connections-table tbody tr:last-child>*{border-bottom:0}
.connections-table tbody th{font-weight:500}
.connections-table a{color:var(--color-ink)}
.connections-table-action{text-align:right;white-space:nowrap}
@media(min-width:1280px){.connections-table-box{overflow:visible}}
.connection-head{align-items:center}
.connection-head h1{overflow-wrap:anywhere}
.connection-diagnosis h2{margin:0 0 var(--space-3);font-size:var(--text-h4-size)}
.connection-diagnosis p{margin:0}
.connection-bases h2,.connect-spec h2,.connect-warning h2,.connect-done h2{font-size:var(--text-h3-size);line-height:var(--text-h3-line);margin:0 0 var(--space-3)}
.connection-screen .facts code,.connect-spec .request-box{overflow-wrap:anywhere}
.connect-choice{margin-bottom:var(--space-6)}
.connect-hint{margin:0 0 var(--space-4)}
.connect-warning{margin-bottom:var(--space-6);padding:var(--space-4);font-size:var(--text-ui-size)}
.connect-warning p,.connect-done p{margin:0}
.connect-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.connect-card{margin-bottom:var(--space-6)}
.connect-steps{margin-bottom:var(--space-2)}
.connect-steps .btn{margin-left:var(--space-2);vertical-align:middle}
.connect-done{padding:var(--space-4);font-size:var(--text-ui-size);margin-bottom:var(--space-6)}
.connect-done .actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.connect-wait{margin-bottom:var(--space-6)}
.connect-spec h3{font-size:var(--text-ui-strong-size);margin:var(--space-3) 0 var(--space-2)}
.connect-spec .request-box{margin:0 0 var(--space-3)}
@media(max-width:767px){
  .connections-screen .pagehead .actions,.connection-head .actions,.connect-screen .pagehead .actions{width:100%}
  .connections-toolbar .search,.connections-select{flex-basis:100%}
  .connections-list .list-row-main{flex-basis:100%}
  .connections-screen .list-row-name,.connection-screen .list-row-name,.connections-table a{display:inline-flex;align-items:center;min-height:var(--tap)}
  .connect-steps .btn{display:flex;margin:var(--space-2) 0 0}
  .connect-guide a{display:inline-flex;align-items:center;min-height:var(--tap)}
}
/* ---- Screen «Журнал» (journal.js): the filters, then rows that stack in a narrow box and stand in columns of one
   40 px line where they fit (a container query: the side menu takes its own width). */
.journal-screen{display:flex;flex-direction:column;gap:var(--space-4)}
.journal-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3)}
.journal-field{display:flex;flex-direction:column;gap:var(--space-1);flex:0 1 200px;min-width:0}
.journal-field[hidden]{display:none}
.journal-search{flex:1 1 240px}
.journal-field .field{width:100%}
.journal-rare{margin-top:var(--space-3)}
.journal-rare summary{width:max-content;cursor:pointer;color:var(--color-ink);font-weight:500}
.journal-rare>.journal-filters{margin-top:var(--space-3)}
.journal-toolbar>.btn{margin-top:var(--space-3)}
.journal-table{container:journal/inline-size;background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.journal-head{display:none}
.journal-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-line);font-size:var(--text-ui-size)}
.journal-rows>.journal-row:last-child{border-bottom:0}
.journal-what{order:-1;flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0}
.journal-summary{color:var(--color-ink);font-weight:500;overflow-wrap:anywhere}
.journal-row>:is(.journal-time,.journal-who,.journal-base,.journal-ai){color:var(--color-muted);font-size:var(--text-caption-size);overflow-wrap:anywhere}
.journal-time{font-variant-numeric:tabular-nums}
.journal-act{margin-left:auto}
.journal-act:empty{display:none}
.journal-error{flex:1 0 100%;margin:0;color:var(--color-danger);font-size:var(--text-caption-size)}
.journal-error .btn{margin-left:var(--space-2)}
@container journal (min-width:52rem){
  .journal-grid{display:grid;grid-template-columns:9.5rem minmax(0,8rem) minmax(0,2fr) minmax(0,1fr) max-content;column-gap:var(--space-3)}
  .journal-table.who .journal-grid{grid-template-columns:9.5rem minmax(0,1fr) minmax(0,8rem) minmax(0,2fr) minmax(0,1fr) max-content}
  .journal-head,.journal-rows,.journal-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
  .journal-head,.journal-row{align-items:center;min-height:var(--row);padding:2px var(--space-4)}
  .journal-head{min-height:var(--row-dense);border-bottom:1px solid var(--color-line);color:var(--color-muted);font-size:var(--text-caption-size);font-weight:500}
  .journal-what{order:0}
  .journal-row>:is(.journal-time,.journal-who,.journal-base,.journal-ai){color:var(--color-text);font-size:inherit}
  .journal-act,.journal-act:empty{display:block;margin:0;justify-self:end}
  .journal-error{grid-column:1/-1}
}
@media(max-width:767px){.journal-field{flex-basis:100%}.journal-rare summary{min-height:var(--tap);padding-block:var(--space-3);box-sizing:border-box}}
/* ---- «Вход в 1С» (screens/onec-signin.js): the form, «Ваш вход в 1С» in the card of a base. */
.signin-card{max-width:36rem}
.signin-password{display:flex;gap:var(--space-2)}
.signin-password .field{flex:1 1 auto;min-width:0}
.signin-password .btn{flex:0 0 auto}
.signin-keep{grid-template-columns:minmax(0,1fr);margin-bottom:var(--space-6)}
.signin-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.signin-mine-state{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
@media(max-width:767px){
  .signin-actions{flex-direction:column;align-items:stretch}
  .signin-actions .btn{width:100%}
}
/* ---- «Сотрудники» (screens/people.js): the list of people and invitations, the screen that invites. */
.people-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.people-toolbar .search{flex:1 1 240px}
.people-list .list-row-main{flex-basis:10rem}
.people-alone{margin-top:var(--space-6)}
.people-invite .tabs,.people-form{max-width:40rem}
.people-form{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.people-form>p,.people-form .form-field{margin:0;align-self:stretch}
.people-onec{align-self:stretch;margin:0;padding:0;border:0}
.people-onec ul{list-style:none;margin:0;padding:0;background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card)}
.people-onec li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-line)}
.people-onec li:last-child{border-bottom:0}
.people-onec .field{flex:1 1 14rem}
.people-pick{display:flex;align-items:center;gap:var(--space-3);flex:1 1 12rem;min-width:0;min-height:var(--control-dense)}
.people-pick>span{display:flex;flex-direction:column;min-width:0}
@media(max-width:767px){
  .people-screen .pagehead .actions{width:100%}
  .people-toolbar .search,.people-list .list-row-main{flex-basis:100%}
  .people-pick{min-height:var(--tap)}
}
/* ---- «Настройки» (screens/settings.js): the tabs, the choices of the look and the preview, the profile. */
.settings-screen .tabs{max-width:48rem}
.settings-screen .tab-panel>.stack>.card{margin:0}
.settings-paused{border-color:var(--color-warning)}
.settings-look{margin:0 0 var(--space-4);padding:0;border:0;min-width:0}
.settings-look legend{padding:0;margin-bottom:var(--space-2);color:var(--color-ink);font-weight:500}
.settings-look .view-switch{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%}
.settings-look .view-switch-option span{min-height:var(--control-dense);font-size:var(--text-ui-size)}
.settings-look-error{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.settings-look-error .form-error{margin:0}
.settings-preview{margin-top:var(--space-6)}
.settings-preview h2{font-size:var(--text-ui-strong-size);line-height:var(--text-ui-strong-line)}
.settings-facts{display:grid;gap:var(--space-4);margin:0}
.settings-facts dt{color:var(--color-muted);font-size:var(--text-caption-size);line-height:var(--text-caption-line)}
.settings-facts dd{margin:var(--space-1) 0 0;color:var(--color-ink);font-weight:500;overflow-wrap:anywhere}
.settings-facts ul{margin:0;padding-left:var(--space-6)}
@media(max-width:767px){
  /* On a phone the choices of the look stand in a column: «Как в системе» and the larger text never break the switch. */
  .settings-look .view-switch{flex-direction:column;flex-wrap:nowrap;width:100%;border-radius:var(--radius-field)}
  .settings-look .view-switch-option{display:block}
  .settings-look .view-switch-option span{display:flex;min-height:var(--tap);border-radius:var(--radius-field)}
  /* All three tabs stay in sight on a phone, the larger text wraps them to a second line. */
  .settings-screen .tablist{flex-wrap:wrap;overflow-x:visible}
  .settings-screen .tab{padding:0 var(--space-2)}
}
/* ---- «Помощь» (screens/help.js): the questions, then one button under them. */
@media(min-width:768px){.help-form>.btn{align-self:flex-start}}
/* ---- Карточка базы: a card without a heading of its own starts with its words, not with an empty line. */
.base-tab-panel>.base-section>p:first-child{margin-top:0}
@media(max-width:767px){.base-tab-panel a.list-row-name{display:inline-flex;align-items:center;min-height:var(--tap)}}
/* ---- «Плотность строк»: rows are --row high (data-density); a dense row of one or two lines is 40 px. */
[data-density=dense] .list-row{padding-block:2px}
[data-density=dense] :is(.list-row-name,.list-row-meta,.bases-name,.bases-meta){line-height:1.25}
@media(min-width:768px){
  [data-density=dense] :is(.list-row,.bases-row,.journal-row) .row-menu-button{min-width:calc(var(--row-dense) - var(--space-2));min-height:calc(var(--row-dense) - var(--space-2))}
}
/* Medium width: «⋯» of a journal row on the right. */
@container bases-list (min-width:30rem) and (max-width:43.99rem){
  .bases-table:not(.specialist) .bases-row{min-height:var(--row);padding-block:var(--space-2)}
  [data-density=dense] .bases-table:not(.specialist) .bases-row{padding-block:2px}
}
@container journal (min-width:30rem) and (max-width:51.99rem){
  .journal-row{position:relative;min-height:var(--row);padding-block:var(--space-1);row-gap:0;align-content:center}
  .journal-row:has(.journal-act:not(:empty)){padding-right:calc(2 * var(--space-4) + var(--control-roomy))}
  .journal-act{position:absolute;inset-block:0;right:var(--space-4);display:flex;align-items:center}
  .journal-row>:is(.journal-time,.journal-who,.journal-base,.journal-ai){line-height:var(--text-caption-line)}
  [data-density=dense] .journal-row{padding-block:2px}
  [data-density=dense] .journal-row :is(.journal-summary,.journal-time,.journal-who,.journal-base,.journal-ai){line-height:1.25}
}
/* ---- «Раскрывающиеся блоки на телефоне»: the line that opens a block is a 44 px target. */
@media(max-width:767px){
  .disclosure{padding-block:0}
  .disclosure summary{min-height:var(--tap);padding-block:var(--space-3);box-sizing:border-box}
  .disclosure[open]{padding-bottom:var(--space-4)}
}