/*
 * CrewPoint v7 (spec 2026-10-31 §3): the «Ночная смена» structure in the «Плакат» palette. Concrete and graphite, lime only
 * as a signal and never the only one (text or an icon beside it), square corners, 1 px lines, flat cards. Oswald for page
 * titles, names, numbers and primary buttons (upper case), Archivo for text; Archivo has no Cyrillic, so Cyrillic text falls
 * back to Geologica. Two themes: light by default, dark when the system prefers it, either one when chosen on the device
 * (html[data-theme], src/theme.js and src/theme-boot.js). The hero bands stay dark in both. Busy days are hatched, a missing
 * item has a dashed lime outline, a row that waits for an answer a lime bar on the left.
 */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/oswald-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/oswald-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/oswald-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/oswald-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:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/archivo-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/archivo-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:'Geologica';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/geologica-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/geologica-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/geologica-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}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/geologica-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}

:root{
  /* «Плакат», light: concrete paper, graphite ink, lime only as a signal */
  --bg:#e8e5df;--card:#f6f4ef;--ink:#161616;--muted:#5b5853;--line:#cbc5ba;--strong:#161616;--head:#f6f4ef;--chip:#dfdbd3;
  --btn:#161616;--btn-ink:#f6f4ef;--lime:#c8f31d;--lime-ink:#161616;--img:#d6d1c8;
  color-scheme:light;
  /* the same in both themes: the dark hero bands, the hatching of a busy day (in the theme's line colour), the typefaces */
  --band-bg:#111314;--band-ink:#f4f1ea;--band-accent:#c8f31d;
  --hatch:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 5px);
  --font-head:'Oswald','Geologica',sans-serif;--font-text:'Archivo','Geologica',system-ui,sans-serif;
  /* the tint of the statue pictures that stand in for a missing photo */
  --statue-filter:grayscale(1) sepia(.12) contrast(1.05);
  --hover:color-mix(in srgb,var(--ink) 6%,transparent);--shade:rgba(17,19,20,.6);--lift:0 12px 32px rgba(0,0,0,.25);
  --topbar:64px;--tabbar:60px;--gutter:24px;--content:1200px;
}
/* dark: the system's preference unless light was chosen, or dark chosen on this device; the two blocks stay the same */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111314;--card:#1a1d1f;--ink:#eeebe5;--muted:#9aa1a4;--line:#2c3134;--strong:#eeebe5;--head:#111314;--chip:#24282b;
  --btn:#eeebe5;--btn-ink:#111314;--lime:#c8f31d;--lime-ink:#111314;--img:#202427;
  color-scheme:dark;
  --statue-filter:grayscale(1) brightness(.78) contrast(1.1);
}}
:root[data-theme="dark"]{
  --bg:#111314;--card:#1a1d1f;--ink:#eeebe5;--muted:#9aa1a4;--line:#2c3134;--strong:#eeebe5;--head:#111314;--chip:#24282b;
  --btn:#eeebe5;--btn-ink:#111314;--lime:#c8f31d;--lime-ink:#111314;--img:#202427;
  color-scheme:dark;
  --statue-filter:grayscale(1) brightness(.78) contrast(1.1);
}
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--font-text);overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink);text-decoration-thickness:2px}
h1,h2,h3{margin:0;font-family:var(--font-head);font-weight:600;line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
h1{font-weight:700;font-size:34px}h2{font-size:21px}h3{font-size:17px}
/* src/fit-words.js measures a heading's words unbroken for a moment, then steps its font down until the longest one fits */
:is(h1,h2,h3).is-fitting,:is(h1,h2,h3).is-fitting *{overflow-wrap:normal!important;word-break:normal!important}
p{margin:0}
::selection{background:var(--ink);color:var(--card)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
main:focus,h1:focus{outline:none}
.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,.public-skip{position:absolute;left:8px;top:-60px;z-index:50;padding:8px 12px;background:var(--card);border:1px solid var(--ink)}
.skip-link:focus,.public-skip:focus{top:8px}
.muted{color:var(--muted)}
.stack{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}

/* ---------- v7 shared parts: titles, labels, cards, chips, the dark band, the signals ---------- */
.page-title{font:700 clamp(32px,4.2vw,46px)/1 var(--font-head);text-transform:uppercase}
.label{font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card,.panel{background:var(--card);border:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);background:var(--chip);color:var(--ink);font-size:14px;line-height:1.4}
/* the hero bands: dark in both themes, a photo (.band-photo) under a gradient from the left; the accent only on them */
.band-dark{position:relative;isolation:isolate;overflow:hidden;background:var(--band-bg);color:var(--band-ink)}
.band-dark::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,19,20,.96) 0%,rgba(17,19,20,.8) 42%,rgba(17,19,20,.12) 100%);pointer-events:none}
.band-dark .band-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.band-dark a{color:var(--band-ink)}
.band-dark .label,.band-dark .band-accent{color:var(--band-accent)}
.band-dark :focus-visible{outline-color:var(--band-accent)}
/* a row that waits for your answer; the active item of a side list; a busy day; something still missing */
.needs-answer{box-shadow:inset 4px 0 0 var(--lime);padding-left:16px}
.side-item.is-active,.side-item[aria-current=true]{box-shadow:inset 3px 0 0 var(--lime);background:var(--card);color:var(--ink);font-weight:700}
.is-busy{background-image:var(--hatch)}
.is-missing{outline:2px dashed var(--lime);outline-offset:-2px}

/* ---------- brand (official artwork, cropped to the wordmark without its old tagline); the theme picks dark or white ---------- */
.crewpoint-brand{--brand-width:168px;--brand-symbol:32px;display:inline-flex;align-items:center;gap:8px;width:var(--brand-width);max-width:100%;flex-shrink:0;color:inherit;text-decoration:none}
.crewpoint-brand-symbol{width:var(--brand-symbol);height:var(--brand-symbol);object-fit:contain;flex:0 0 var(--brand-symbol)}
.crewpoint-brand-text{flex:1;min-width:0}
.crewpoint-brand-wordmark{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:1930/176}
.crewpoint-brand-wordmark img{position:absolute;width:144.870467%;max-width:none;height:auto;left:-39.585492%;top:-126.136364%}
.crewpoint-brand-tagline{display:none}
.brand-on-dark{display:none}
:root[data-theme="dark"] .brand-on-light{display:none}
:root[data-theme="dark"] .brand-on-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand-on-light{display:none}
  :root:not([data-theme="light"]) .brand-on-dark{display:block}
}

/* ---------- buttons: outlined; the primary one graphite (paper in the dark theme), Oswald in upper case ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--strong);background:transparent;color:var(--ink);font:600 15px/1.2 var(--font-text);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--hover);text-decoration:none}
.btn.primary,.btn-primary{border-color:var(--btn);background:var(--btn);color:var(--btn-ink);font:700 16px/1.1 var(--font-head);letter-spacing:.02em;text-transform:uppercase}
.btn.primary:hover,.btn-primary:hover{background:var(--btn);opacity:.86}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:default}
.btn-link{padding:0;border:0;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;text-decoration:none}
.icon-btn:hover{background:var(--hover)}
.count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;background:var(--lime);color:var(--lime-ink);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- shell (spec §3–4): the 64 px header on --head with the logo, the role's sections and their counts, «+ Новый проект»,
   the bell, the language and the account menu (with the theme); a guest's theme button; on a phone the sections, «Профиль» and
   «Ещё» in a bar at the bottom and the account menu as a sheet above it ---------- */
.app{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;height:var(--topbar);padding:0 40px;background:var(--head);border-bottom:1px solid var(--line)}
/* the bar is a stacking context (sticky, z-index 20), so the account menu inside it counts only as high as the bar: while the
   menu is open the bar rises above the phone's filter sheet (25) */
.topbar:has(#account-menu:not([hidden])){z-index:30}
.topbar>*,.topbar-end>*{flex-shrink:0}
/* the sections take what the brand and the buttons leave: when that is too little (a long name in some language, a wider
   fallback font) a name wraps onto a second line instead of pushing the bar past the screen; nothing is tuned to a width */
.topbar>.topnav{flex-shrink:1;min-width:0}
.topnav{display:flex;gap:26px;align-self:stretch}
.topnav a{display:flex;align-items:center;gap:8px;color:var(--muted);font:500 15px/1.2 var(--font-text);text-decoration:none;text-wrap:balance}
.topnav a:hover{color:var(--ink)}
/* the page shown: ink, heavier, and the 2 px lime underline (the lime is never the only sign) */
.topnav a[aria-current=page]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--lime)}
.nav-count{display:inline-grid;place-items:center;min-width:20px;padding:3px 6px;background:var(--lime);color:var(--lime-ink);font:700 11px/1 var(--font-text)}
.topbar-end{display:flex;align-items:center;gap:16px;margin-left:auto;font:600 14px/1 var(--font-text)}
.btn.topbar-create{min-height:38px;padding:0 14px;border-color:var(--line);font:600 14px/1 var(--font-text)}
.topbar-login{color:var(--muted);font:600 15px/1 var(--font-text);text-decoration:none;white-space:nowrap}
.topbar-login:hover{color:var(--ink)}
.btn.topbar-register{min-height:40px;padding:0 18px;font:600 15px/1 var(--font-text)}
.icon-btn.bell{width:36px;height:36px}
/* unread: a lime dot with a dark rim (seen on the light header too) and the words for a screen reader */
.bell-dot{position:absolute;top:5px;right:4px;width:8px;height:8px;background:var(--lime);box-shadow:0 0 0 1px var(--lime-ink)}
/* a section with a short name (src/menu.js) shows it in the bottom bar and on a top bar too narrow for the full names */
.nav-short{display:none}
@media (max-width:1199px){.topnav .nav-full{display:none}.topnav .nav-short{display:inline}}
@media (min-width:900px) and (max-width:1099px){
  .topbar{gap:20px;padding:0 24px}
  .topnav{gap:20px}
  .topbar-end{gap:12px}
  .topbar .crewpoint-brand{--brand-width:var(--brand-symbol)}
  .topbar .crewpoint-brand-text,.topbar-create span,.account-short{display:none}
}
.menu-toggle{display:none;gap:6px;width:auto;padding:0 10px;font-weight:600}
.locale-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:36px;padding:0 10px;border:1px solid var(--line);background:transparent;font-weight:600;font-size:14px;cursor:pointer}
.locale-switch:hover{background:var(--hover)}
.locale-switch:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.locale-switch select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.account{position:relative}
.account-button{display:inline-flex;align-items:center;gap:10px;height:40px;max-width:240px;padding:0 6px 0 2px;border:0;background:none;color:var(--ink);font:600 14px/1 var(--font-text);cursor:pointer}
.account-button:hover,.account-button[aria-expanded=true]{background:var(--hover)}
.account-button .photo,.account-who .photo{border:0;object-position:50% 25%}
.account-button .photo-initials,.account-who .photo-initials{border:0;background:var(--chip);color:var(--ink);font:700 14px/1 var(--font-head)}
.account-short{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu{position:absolute;right:0;top:calc(100% + 12px);z-index:30;width:300px;max-height:calc(100vh - var(--topbar) - 24px);overflow-y:auto;padding:8px 0;background:var(--card);border:1px solid var(--line);box-shadow:var(--lift);font:400 16px/1.45 var(--font-text)}
.account-menu[hidden]{display:none}
.account-who{display:flex;gap:12px;align-items:center;padding:8px 16px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.account-who-text{display:grid;min-width:0}
.account-who-text>b,.account-who-text>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-who-text>span{color:var(--muted);font-size:14px}
.account-menu a,.account-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;border:0;background:none;color:var(--ink);font-size:16px;text-align:left;text-decoration:none;cursor:pointer}
.account-menu .icon{flex:none;color:var(--muted)}
.account-menu a:hover,.account-menu button:hover{background:var(--hover)}
.account-menu a[aria-current=page]{font-weight:700;box-shadow:inset 3px 0 0 var(--lime)}
.account-menu hr{margin:6px 0;border:0;border-top:1px solid var(--line)}
/* «Тема»: three choices side by side, the chosen one filled; each column is as wide as its words plus an equal share of the
   rest, so «Как в системе» stays on one line in every language */
.account-theme{min-width:0;margin:0;padding:6px 16px 10px;border:0}
.account-theme legend{float:left;width:100%;margin-bottom:8px;padding:0}
.theme-choices{clear:both;display:grid;grid-template-columns:repeat(3,auto);border:1px solid var(--line)}
.theme-choices label{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;padding:6px 4px;font-size:13px;font-weight:600;line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer}
.theme-choices label+label{border-left:1px solid var(--line)}
.theme-choices input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.theme-choices label:hover{background:var(--hover)}
.theme-choices label:has(input:checked){background:var(--btn);color:var(--btn-ink)}
.theme-choices label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.guest-menu{display:grid;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.guest-menu a{padding:10px 0;text-decoration:none}
.guest-menu a[aria-current=page]{font-weight:700}
.tabbar{display:none}
/* the page: content at most 1200 px wide; a band, banner or portrait runs to the edges with margin: 0 calc(-1 * var(--pad)) */
.main{--pad:max(var(--gutter),calc((100vw - var(--content)) / 2));flex:1;min-width:0;width:100%;padding:32px var(--pad) 48px}
.main[aria-busy=true]{cursor:progress}
.main[aria-busy=true]::before{content:'';position:fixed;left:0;right:0;top:var(--topbar);height:2px;background:var(--ink);animation:busy 1.2s ease-in-out infinite;transform-origin:left}
@keyframes busy{0%{transform:scaleX(0)}60%{transform:scaleX(.8)}100%{transform:scaleX(1);opacity:0}}
.profile-page,.editor,.notif-list{max-width:960px}
.notice-bar{padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);text-align:center;font-size:15px}
.notice-bar .btn-link{margin-left:6px}
.footer{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;padding:20px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.footer a{color:var(--muted)}

/* ---------- page parts ---------- */
.page-header{margin-bottom:24px}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;color:var(--muted);text-decoration:none;font-size:15px}
.back-link:hover{color:var(--ink)}
.page-header-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.lead{margin-top:12px;max-width:65ch;color:var(--muted);font-size:17px}
.page-actions{display:flex;flex-wrap:wrap;gap:8px}
.card{display:flex;gap:16px;padding:16px}
.card-body{min-width:0;flex:1}
.card-title a{text-decoration:none}
.card-title a:hover{text-decoration:underline}
.card-meta{margin-top:4px;color:var(--muted);font-size:15px}
.panel{padding:22px 24px}
.panel+.panel{margin-top:16px}
.panel>h2{margin-bottom:10px;font-size:20px}
.panel>.field{max-width:560px}
.panel>.muted{margin-bottom:16px}
.empty-state{padding:40px 24px;text-align:center;background:var(--card);border:1px dashed var(--muted)}
.empty-state h2{font:700 22px/1.15 var(--font-head);text-transform:uppercase}
.empty-state p{margin:8px auto 16px;max-width:50ch;color:var(--muted)}
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rows+.form-actions{margin-top:16px}
.rows>li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.photo{width:var(--size,40px);height:var(--size,40px);flex:0 0 auto;object-fit:cover;background:var(--bg)}
.photo-initials{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:calc(var(--size,40px) * .38);line-height:1}

/* ---------- forms ---------- */
form{display:grid;gap:16px;max-width:560px}
.field{display:grid;gap:6px}
label,legend{font-weight:600;font-size:15px}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--muted);border-radius:0;background:var(--card);font-size:16px}
textarea{min-height:96px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
input[readonly]{background:var(--bg);color:var(--muted)}
/* the browser's own placeholder grey is about 2.1:1 on the light card; the muted text of the place (also on the dark query bars) */
::placeholder{color:var(--muted);opacity:1}
.hint{color:var(--muted);font-size:14px;font-weight:400}
.form-error:empty{display:none}
.form-error{padding:10px 12px;border-left:3px solid var(--lime);background:var(--chip);font-weight:600}
fieldset{margin:0;padding:0;border:0;min-width:0}
.choices{display:grid;gap:8px}
.choices legend{margin-bottom:8px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);background:var(--card);font-weight:400;cursor:pointer}
.choice:has(input[type=radio]:checked){border-color:var(--ink);background:var(--chip);box-shadow:inset 0 0 0 1px var(--ink)}
.choice-label{display:block;font-weight:600}
.choice small{display:block;color:var(--muted);font-size:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:3px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.form-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* the place picker (src/components/place-picker.js): the suggestions hang under the city field */
.place-box{position:relative}
.place-list{position:absolute;left:0;right:0;top:100%;z-index:10;margin:0;padding:0;list-style:none;max-height:min(296px,50vh);overflow-y:auto;background:var(--card);border:1px solid var(--strong);border-top:0;box-shadow:var(--lift)}
.place-list>li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-height:44px;padding:10px 12px;border-top:1px solid var(--line);cursor:pointer;overflow-wrap:anywhere}
.place-list>li:first-child{border-top:0}
.place-list>li>span{font-weight:600}
.place-list>li>small{color:var(--muted);font-size:14px}
.place-list>li:hover,.place-list>li[aria-selected=true]{background:var(--chip);box-shadow:inset 3px 0 0 var(--lime)}
details>summary{cursor:pointer;font-weight:600}
details>.stack{margin-top:12px}
.secret{padding:12px;border:1px dashed var(--line);background:var(--bg);font:600 16px/1.6 var(--font-text);letter-spacing:.05em;word-break:break-all}

/* ---------- sign-in pages ---------- */
.auth{max-width:480px;margin:0 auto}
.auth .page-title{font-size:clamp(30px,4vw,40px)}
.auth .panel{padding:28px}
.auth .panel>h2{margin-bottom:8px;font:700 22px/1.15 var(--font-head);text-transform:uppercase}
.auth form{max-width:none}
.auth-alt{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px;justify-items:start}
.auth-alt a{display:inline-block}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.or::before,.or::after{content:'';flex:1;border-top:1px solid var(--line)}
.links{display:flex;flex-wrap:wrap;gap:8px 20px}

/* ---------- modal, confirmation, form guard, toast ---------- */
/* The modal dialog covers the viewport around its panel: a click beside the panel lands on the dialog, never on a backdrop,
   so nothing closes on an outside click. */
dialog{color:var(--ink)}
dialog.modal{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px 16px;border:0;background:transparent;overflow:auto}
dialog.modal[open]{display:grid;place-items:center}
dialog::backdrop{background:var(--shade)}
.modal-panel{width:min(560px,100%);background:var(--card);border:1px solid var(--line);box-shadow:var(--lift)}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 0 24px}
.modal-header h2,dialog.modal-small h2{font:700 22px/1.15 var(--font-head);text-transform:uppercase}
.modal-body{padding:16px 24px 24px}
.modal-body form{max-width:none}
.modal-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 24px}
#form-guard,dialog.modal-small{width:min(440px,calc(100% - 32px));padding:24px;border:1px solid var(--line);background:var(--card);box-shadow:var(--lift)}
dialog.modal-small h2{margin-bottom:8px}
dialog.modal-small .modal-actions,#form-guard .account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0}
#form-guard .modal-header{padding:0 0 8px}
#form-guard .modal-body{padding:0}
.toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:min(520px,calc(100% - 32px));padding:12px 18px;background:var(--btn);color:var(--btn-ink);font-weight:600;box-shadow:var(--lift);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- legal pages (src/legal-views.js) ---------- */
.legal-page{max-width:880px}
.legal-head{margin-bottom:24px}
.eyebrow{color:var(--muted);font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.legal-head h1{margin-top:8px;font:700 clamp(32px,4.2vw,46px)/1 var(--font-head);text-transform:uppercase}
.legal-meta{margin-top:6px;color:var(--muted)}
.legal-switch{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px}
.legal-switch a[aria-current=page]{font-weight:700;text-decoration:none;box-shadow:inset 0 -2px 0 var(--lime)}
.legal-layout.has-toc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.legal-toc{position:sticky;top:calc(var(--topbar) + 16px);font-size:14px}
.legal-toc>p{color:var(--muted);font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.legal-toc ol{margin:8px 0 0;padding-left:18px}
.legal-toc button{vertical-align:top;padding:3px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--muted)}
.legal-toc button:hover{color:var(--ink);text-decoration:underline}
.legal-body{background:var(--card);border:1px solid var(--line);padding:24px 28px}
.legal-body section+section{margin-top:24px}
.legal-body h2 span{color:var(--muted)}
.legal-body p,.legal-body ul{margin:10px 0 0}
.legal-table{overflow-x:auto;margin-top:12px}
.legal-table table{border-collapse:collapse;width:100%;font-size:15px}
.legal-table caption{text-align:left;font-weight:600;padding-bottom:6px}
.legal-table th,.legal-table td{padding:8px;border:1px solid var(--line);text-align:left;vertical-align:top}
.legal-details{display:grid;gap:8px;margin:0}
.legal-details div{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:12px}
.legal-details dt{color:var(--muted)}
.legal-details dd{margin:0}
.legal-placeholder{margin-bottom:16px;padding:16px;border:1px dashed var(--strong);background:var(--card)}
.legal-placeholder h2{font-size:17px}
.legal-missing{color:var(--muted);font-style:italic}
.legal-state{font-weight:600}

/* ---------- pages the server writes (first paint of index.html, /en/… public pages) ---------- */
.workspace-header,.public-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:var(--topbar);padding:8px 16px;background:var(--head);border-bottom:1px solid var(--line)}
.workspace-switcher,.public-verticals{display:flex;flex-wrap:wrap;gap:4px 16px}
.workspace-switcher a,.public-verticals a{color:var(--muted);text-decoration:none}
.ws-short,.first-paint-language{display:none}
.workspace-header-actions,.public-actions{display:flex;gap:12px;align-items:center;margin-left:auto}
.public-home,.public-document main{max-width:880px;margin:0 auto;padding:32px 16px;display:grid;gap:16px}
.public-language{position:relative}
.public-language summary{cursor:pointer;font-weight:600}
.public-languages{position:absolute;right:0;display:grid;padding:6px 12px;background:var(--card);border:1px solid var(--line)}
/* public landing pages (/en/event-crew …): what search visitors read first, plain like the app */
.public-hero{display:grid;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.public-hero h1{font-size:clamp(28px,5vw,36px)}
.public-lead{margin:0;max-width:640px;color:var(--muted);font-size:18px}
.public-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.public-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.public-sections section{padding:20px;background:var(--card);border:1px solid var(--line)}
.public-sections h2{margin:4px 0 8px}
.public-sections p{margin:0}
.public-sections .eyebrow{margin:0}
.public-related{padding-top:8px}
.public-related ul{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.public-footer{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:20px 16px;border-top:1px solid var(--line)}
.public-footer nav{display:flex;flex-wrap:wrap;gap:8px 16px}

/* ---------- «Профессии» (#/roles): professions grouped by department ---------- */
.roles-note{margin:20px 0 0;font-size:14px}
.role-group{margin-top:28px}
.role-group h2{margin-bottom:12px;font:700 22px/1.1 var(--font-head);text-transform:uppercase}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px}
.role-card{display:grid;grid-template-rows:auto auto 1fr auto auto;gap:6px;padding:18px 20px;border:1px solid var(--line);background:var(--card)}
.role-card h3{font:700 19px/1.15 var(--font-head);text-transform:uppercase;hyphens:auto}
.role-en{margin:0;color:var(--muted);font-size:14px}
.role-card>p{margin:0}
.role-phases{color:var(--muted);font-size:13px}
.role-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.role-links a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:700}

/* ---------- narrow screens: the sections move to a bar at the bottom, a guest's catalogues into the «Меню» button ---------- */
@media (max-width:899px){
  :root{--gutter:16px}
  .topbar{gap:8px;padding:0 16px}
  .topnav,.topbar-create{display:none}
  .menu-toggle{display:inline-flex}
  .tabbar:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--head);border-top:1px solid var(--line)}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:0;border:0;background:none;color:var(--muted);font:500 12px/1.2 var(--font-text);text-align:center;text-decoration:none;cursor:pointer}
  .tabbar span:not(.nav-count):not(.sr-only){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
  .tabbar .nav-full{display:none}
  .tabbar .nav-short{display:inline}
  .tabbar a[aria-current=page]{color:var(--ink);font-weight:700;box-shadow:inset 0 2px 0 var(--lime)}
  .tabbar button[aria-expanded=true]{color:var(--ink);font-weight:700}
  .tabbar .nav-count{position:absolute;top:6px;left:calc(50% + 8px);min-width:18px;padding:2px 4px;font-size:10px}
  /* the account menu is a sheet above the bottom bar */
  .account-menu{position:fixed;left:0;right:0;top:auto;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - var(--topbar) - var(--tabbar) - env(safe-area-inset-bottom));border-width:1px 0 0}
  body.has-tabbar .app{padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  body.has-tabbar .toast{bottom:calc(var(--tabbar) + 16px)}
  .main{padding-top:24px}
  .legal-layout.has-toc{grid-template-columns:minmax(0,1fr)}
  .legal-toc{position:static}
}
@media (min-width:900px){.guest-menu{display:none!important}}
@media (max-width:560px){
  /* a label longer than the screen wraps inside its button instead of widening the page */
  .btn{max-width:100%;white-space:normal;text-align:center}
  .topbar-register{display:none}
  h1{font-size:24px}
  .topbar{gap:2px;padding:0 8px}
  .crewpoint-brand{--brand-width:32px;margin-right:auto}
  .crewpoint-brand-text{display:none}
  .topbar-end{margin-left:0;gap:4px}
  .account-short{display:none}
  .account-button{padding-right:6px;gap:4px}
  .panel,.auth .panel{padding:20px 16px}
  .legal-body{padding:20px 16px}
  .legal-body ul{padding-left:22px}
  .legal-head h1{font-size:28px}
  .legal-details div{grid-template-columns:minmax(0,1fr);gap:0}
  .modal-header{padding-left:16px}.modal-body{padding:16px}.modal-actions{padding:0 16px 16px}
  .page-actions,.page-actions .btn{width:100%}
}
/* ---------- specialists: catalogue, page, profile editor, portfolio, availability strip ---------- */
[hidden]{display:none!important}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:16px;margin-top:12px}
/* cards with the picture beside the text need room for their buttons */
.grid.is-wide{grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr))}
/* a role, a date, a country, a phase or a short «· …» note moves to the next line whole; it still wraps inside when longer than the line */
.role-name,.meta-part,.place-country,.switch .muted,.member-name .muted,.card-meta [translate="no"],.role-phases span{display:inline-block}
.filters{max-width:none;margin-bottom:24px;padding:16px;background:var(--card);border:1px solid var(--line)}
.filter-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:16px}
.tag{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:1px 10px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600;line-height:1.6;white-space:nowrap}
/* free, open, accepted: a lime dot with its words; partly free: a quiet outline; waiting for an answer: lime with its words */
.tag.is-open,.tag.is-free{border-color:var(--line);background:var(--chip);color:var(--ink)}
.tag.is-open::before,.tag.is-free::before{content:'';width:7px;height:7px;flex:none;background:var(--lime);box-shadow:0 0 0 1px var(--lime-ink)}
.tag.is-part{border-color:var(--line);color:var(--muted);font-weight:400}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags .tag{margin-top:0}
.pager{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:24px}
.person-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:24px}
.person-head .page-header{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip.is-main{border-color:var(--strong);font-weight:600}
.chip-more-item{display:flex}
.chip-more{padding:4px 12px;border:1px dashed var(--muted);background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.chip-more:hover{border-color:var(--strong)}
.facts{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);gap:8px 12px;margin:0}
.facts>div{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
.facts dt{color:var(--muted)}.facts dd{margin:0}
.pf-text{white-space:pre-line}
.row-meta{gap:8px;margin-top:8px}
.profile-page .rows>li{padding:10px 0}
.editor{display:grid;gap:16px;max-width:720px}
.editor .panel,.editor .panel+.panel{margin-top:0}
.editor form{max-width:none}
.photo-edit{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.photo-edit .field{max-width:none}
.role-picker{display:grid;gap:12px}
.role-groups{display:grid;gap:12px;max-height:340px;overflow:auto;padding:12px;border:1px solid var(--line);background:var(--bg)}
.role-group{display:grid;gap:6px}
.role-group legend{padding:0 0 4px;color:var(--muted);font-size:14px}
.role-group .check input:disabled+span{color:var(--muted)}
.lang-rows{display:grid;gap:8px}
.lang-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;max-width:420px}
.lang-row select{width:auto;min-width:140px}
.contact-row{display:grid;gap:12px}
.contact-row{margin-bottom:12px}
.missing{margin:6px 0 0;padding-left:20px}
.pf-list{margin-bottom:16px}
.pf-row{display:flex;gap:12px;align-items:center;min-width:0;flex:1 1 260px}
.pf-row-text{display:grid;min-width:0}
.pf-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pf-actions .btn{min-height:40px;padding:0 12px}
.pf-actions .icon-btn{border-color:var(--line)}
.pf-actions .icon-btn:disabled{opacity:.4}
.pf-photos-edit{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.pf-photo-rows>li{flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start}
.pf-caption{flex:1;min-width:0;max-width:none;gap:8px}
.pf-view{display:grid;gap:24px}
.pf-item{display:grid;gap:8px}
.pf-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:8px}
.pf-photo{margin:0}
.pf-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.pf-photo figcaption{margin-top:4px;color:var(--muted);font-size:14px}
.avail-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px}
.avail-month h3{margin-bottom:8px;font-size:16px}
.avail-month h3::first-letter{text-transform:uppercase}
.avail-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:14px}
.avail-wd{color:var(--muted);font-size:12px}
.day{padding:4px 0}
.day.is-past{color:var(--muted)}
.day.is-busy{background-color:var(--chip);background-image:var(--hatch);color:var(--muted)}
.avail-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14px}
.avail-legend li{display:flex;align-items:center;gap:8px}
.avail-key{width:16px;height:16px;border:1px solid var(--line);background:var(--card)}
.avail-key.is-busy{background-color:var(--chip);background-image:var(--hatch)}
.avail-part{display:grid;gap:4px;margin:12px 0 0;padding:0;list-style:none;font-size:14px}
.avail-part b{font-weight:600}
.avail-key.is-selected{display:inline-flex;align-items:center;justify-content:center;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);font-size:12px;font-weight:700;line-height:1}
/* the schedule: «Неделя | Месяц», «Отметить занятые дни», then ‹ the week or month › */
.cal-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
/* «Неделя | Месяц»: one frame, the view shown filled graphite (aria-pressed says it too) */
.seg{display:inline-flex;border:1px solid var(--line);background:var(--card)}
.seg button{min-height:40px;padding:0 16px;border:0;background:none;color:var(--ink);font:600 14px/1 var(--font-text);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{background:var(--hover)}
.seg button[aria-pressed=true]{background:var(--btn);color:var(--btn-ink)}
.cal-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cal-nav>.btn[aria-label]{min-width:44px;padding:0;font-size:22px;line-height:1}
.cal-nav h2{flex:1 1 140px;min-width:0;text-align:center;font:700 26px/1.1 var(--font-head);text-transform:uppercase}
.cal-wd,.cal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.cal-wd{margin-bottom:4px;color:var(--muted);font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.cal.is-marking :is(.cal-days,.wk-days){touch-action:none;-webkit-user-select:none;user-select:none}
.cal-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-width:0;min-height:56px;padding:4px 0;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.cal-num{font:600 18px/1.15 var(--font-head)}
.cal-mark{font-size:11px;font-weight:600;line-height:1.1;white-space:nowrap}
/* the project of a work or invitation day, under the number */
.cal-what{max-width:100%;padding:0 4px;overflow:hidden;font-size:11px;font-weight:600;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.cal-day:hover{border-color:var(--ink)}
.cal-day.is-today .cal-num{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cal-day.is-busy{background-color:var(--chip);background-image:var(--hatch);border-color:var(--muted);color:var(--ink)}
/* partly busy (a team with some of its people free): the lower half hatched */
.day.is-part,.avail-key.is-part,.cal-day.is-part{background-image:var(--hatch),linear-gradient(to top,var(--chip) 50%,transparent 50%);background-size:100% 50%,auto;background-position:bottom;background-repeat:no-repeat}
.cal-day.is-part{border-color:var(--muted)}
.cal-day.is-part .cal-mark{font-size:12px;font-weight:700}
.cal-day.is-past{border-style:dashed;background-color:transparent;color:var(--muted)}
/* dimmed text over the hatching (a past busy day, a busy day of the small month, «занят» in the invitation's days): a step
   darker than --muted, so it keeps 4.5:1 against the hatch stripe in the light theme too */
.cal-day.is-past:is(.is-busy,.is-part),.day:is(.is-busy,.is-past.is-part),.invite-day:is(.is-busy,.is-part) small{color:color-mix(in srgb,var(--muted) 75%,var(--ink))}
.cal.is-marking .cal-day.is-past{cursor:default}
/* a day an invitation waiting for an answer asks for: lime with a dashed frame (the legend and the project name say it in
   words); a day of work: graphite; a chosen day: an ink frame and a tick, over whatever the day shows */
.cal-day.is-invited,.avail-key.is-invited{border:2px dashed var(--lime-ink);background:var(--lime);color:var(--lime-ink)}
.cal-day.is-work,.avail-key.is-work{border-color:var(--btn);background:var(--btn);color:var(--btn-ink)}
.cal-day.is-past:hover{border-color:var(--line)}
.cal-day.is-selected{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.cal-day.is-work.is-selected{box-shadow:inset 0 0 0 2px var(--btn-ink)}
.cal-day:focus-visible{outline-offset:1px}
/* the week: seven columns, a head button per day and the blocks of the day */
.wk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wk-col{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:200px;padding:6px;border:1px solid var(--line);background:var(--card)}
.wk-col.is-past{border-style:dashed;background:transparent}
.wk-col.is-selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wk-head{display:grid;justify-items:start;padding:4px 8px;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.wk-head:hover{background:var(--hover)}
.wk-wd{color:var(--muted);font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.wk-date{font:700 20px/1.15 var(--font-head)}
.wk-col.is-today .wk-date{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.wk-col.is-selected .wk-head{background:var(--btn);color:var(--btn-ink)}
.wk-col.is-selected .wk-wd{color:var(--btn-ink)}
.wk-blocks{display:grid;align-content:start;gap:6px;min-width:0}
.wk-block{display:grid;gap:2px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:0;background:none;color:inherit;font:inherit;font-size:13px;line-height:1.3;text-align:left;overflow-wrap:break-word}
button.wk-block{cursor:pointer}
.wk-block b{font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.wk-block.is-work{background:var(--btn);color:var(--btn-ink)}
button.wk-block.is-work:hover{opacity:.86}
.wk-block.is-invited{border:1px dashed var(--lime-ink);background:var(--lime);color:var(--lime-ink)}
button.wk-block.is-invited:hover{border-style:solid}
.wk-block.is-busy,.wk-block.is-part{border-color:var(--line);background-color:var(--chip);background-image:var(--hatch)}
.wk-free{margin:0;padding:4px 8px;color:var(--muted);font-size:13px}
@media (max-width:1024px){
  .wk-days{grid-template-columns:minmax(0,1fr)}
  .wk-col{flex-direction:row;flex-wrap:wrap;align-items:flex-start;min-height:0}
  .wk-head{flex:0 0 92px}
  .wk-blocks{flex:1 1 180px}
}
/* the details panel of the schedule: a dialog docked to the right, the whole screen on a phone */
dialog.modal.is-side{padding:0}
dialog.modal.is-side[open]{place-items:stretch end}
.is-side .modal-panel{display:flex;flex-direction:column;width:min(480px,100%);height:100%;overflow:auto;border-width:0 0 0 1px}
@media (max-width:560px){.is-side .modal-panel{border:0}}
.invite-panel{gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.invite-panel:first-child{padding-top:0;border-top:0}
.invite-panel h3{display:inline;margin-right:8px}
.invite-panel h4{margin:0 0 4px;font-size:14px}
.invite-panel .facts{margin:0}
/* the side panel is narrow: the labels get up to half of it */
.invite-panel .facts{grid-template-columns:fit-content(50%) minmax(0,1fr)}
.day-state{margin:0 0 12px}
.cal>section>h2{margin-bottom:6px;font:700 20px/1.15 var(--font-head);text-transform:uppercase}
.cal-bar{max-width:none}
.cal-bar .hint{margin:0}
@media (max-width:480px){.cal-day{min-height:48px}.cal-bar{padding:16px}}
.org-banner{width:100%;max-height:200px;aspect-ratio:4/1;object-fit:cover;margin-bottom:16px;border:1px solid var(--line)}
.field-note{font-weight:600}
.media-preview{display:block;max-width:100%}
.media-preview .org-banner{width:320px;margin:0}
.member-list>li{flex-wrap:wrap;gap:8px 16px}
.member-name{display:flex;gap:12px;align-items:center;min-width:0}
.member-name .photo-initials{border:0;background:var(--chip);color:var(--ink);font-family:var(--font-head);font-weight:700}
.member-state{color:var(--muted);font-size:14px}
.member-state.is-shown{color:var(--ink);font-weight:600}
[data-members]>.panel>h2{font:700 24px/1.1 var(--font-head);text-transform:uppercase}
[data-lists]>h3{margin:20px 0 4px;font:700 18px/1.15 var(--font-head);text-transform:uppercase}
.invite-form{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:560px){
  .facts,.invite-panel .facts{grid-template-columns:minmax(0,1fr)}
  .person-head{flex-direction:column;gap:12px}
  .facts>div{grid-template-columns:minmax(0,1fr);gap:0}
  .pf-photo-rows>li{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.group-title{font:700 21px/1.1 var(--font-head);text-transform:uppercase}
.group-title a{text-decoration:none}
.group-title a:hover{text-decoration:underline}
.stack>.btn-link{justify-self:start}
.card-body .pf-text{margin:8px 0}
.is-clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ---------- personal messages (src/views/messages.js, design CP7F «msg»): one frame, the conversations on the left (the open one
   on the chip with the lime bar), the conversation on the right; one of the two at a time under 900 px ---------- */
.dm{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);align-items:stretch;min-height:420px;background:var(--card);border:1px solid var(--line)}
.dm-list{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.dm-from{padding:14px 20px;border-bottom:1px solid var(--line)}
.dm-threads-box>.muted{padding:16px 20px}
.dm-threads{display:grid;margin:0;padding:0;list-style:none;max-height:70vh;overflow-y:auto}
.dm-item{display:flex;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.dm-item:hover{background:var(--hover)}
.dm-item.is-active{background:var(--chip);box-shadow:inset 3px 0 0 var(--lime)}
.dm-item .photo-initials,.dm-who .photo-initials{border:0;background:var(--chip);color:var(--ink);font-family:var(--font-head);font-weight:700}
.dm-item.is-active .photo-initials{background:var(--card)}
.dm-item-text{display:grid;gap:3px;flex:1;min-width:0}
.dm-item-row{display:flex;gap:8px;align-items:center;min-width:0}
.dm-item-row b,.dm-excerpt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-item-row b{font-size:15px}
.dm-excerpt,.dm-time{color:var(--muted);font-size:13px}
.dm-time{white-space:nowrap}
.dm-item .tag{margin-top:0}
/* unread: the number on lime, its words for a screen reader */
.dm-unread{display:inline-grid;place-items:center;min-width:20px;padding:3px 6px;background:var(--lime);color:var(--lime-ink);font:700 11px/1 var(--font-text)}
.dm-list>.dm-more{align-self:flex-start;margin:12px 20px}
.dm-pane{display:grid;gap:12px;align-content:start;min-width:0;padding:16px 24px 20px}
.dm-head:has(.dm-who){padding-bottom:14px;border-bottom:1px solid var(--line)}
.dm-who{display:flex;gap:12px;align-items:center}
.dm-who-text{flex:1;min-width:0}
.dm-name{font:700 22px/1.1 var(--font-head);text-transform:uppercase}
.dm-name a{color:var(--ink);text-decoration:none}
.dm-name a:hover{text-decoration:underline}
.dm-kind{color:var(--muted);font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.dm-meta,.dm-meta .btn-link{color:var(--muted);font-size:12px}
.dm-scroll{max-height:min(60vh,560px);min-height:200px;overflow-y:auto;border-bottom:1px solid var(--line)}
.dm-older{margin-top:8px;text-align:center}
.dm-log{display:grid;gap:12px;margin:0;padding:12px 0;list-style:none}
.dm-msg{display:flex}
.dm-msg.is-mine{justify-content:flex-end}
/* theirs framed on the page ground, mine graphite */
.dm-bubble{max-width:min(78%,560px);padding:10px 14px;border:1px solid var(--line);background:var(--bg);overflow-wrap:anywhere}
/* inside my graphite bubble the ink and the muted text turn to the button's ink, so the time, «Удалить» and a focus ring read */
.dm-msg.is-mine .dm-bubble{--ink:var(--btn-ink);--muted:color-mix(in srgb,var(--btn-ink) 75%,var(--btn));border-color:var(--btn);background:var(--btn);color:var(--btn-ink)}
.dm-body{white-space:pre-wrap}
.dm-meta{margin-top:4px}
.dm-status{display:grid;gap:8px;padding:10px 12px;border-left:3px solid var(--strong);background:var(--bg)}
.dm-status:empty{display:none}
.dm-composer{max-width:none;gap:8px}
.dm-composer textarea{border-color:var(--strong)}
.dm-composer textarea[readonly]{background:var(--bg);color:var(--muted)}
.dm-composer-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.dm-composer-row .btn{margin-left:auto}
/* «Отправить» on lime with its word (design CP7F) */
.dm-composer .btn.primary{border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
.dm-count.is-over{color:var(--ink);font-weight:700}
.dm-back{display:none}
@media (max-width:899px){
  .dm{grid-template-columns:minmax(0,1fr);min-height:0}
  .dm-list{border-right:0}
  .dm.is-open .dm-list,.dm:not(.is-open) .dm-pane{display:none}
  .dm-back{display:inline-flex;margin-bottom:0}
  .dm-keys{display:none}
  .dm-threads{max-height:none}
  .dm-item{padding:14px 16px}
  .dm-pane{padding:14px 16px 16px}
}

/* notifications: one row each; an unread one on the card ground with a lime dot, a bold title and the hidden word «Новое» */
.notif-list>li{display:block;padding:0}
.notif{display:flex;gap:14px;align-items:flex-start;width:100%;padding:14px 12px;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.notif:hover{background:var(--hover)}
.is-unread>.notif{background:var(--card)}
.is-unread>.notif:hover{background:var(--chip)}
.notif-mark{flex:0 0 12px;padding-top:6px}
.notif-dot{display:block;width:10px;height:10px;background:var(--lime);box-shadow:0 0 0 1px var(--lime-ink)}
.notif-text{display:grid;gap:3px;flex:1;min-width:0;overflow-wrap:anywhere}
.notif-kind{color:var(--muted);font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.notif-time{font-size:13px;color:var(--muted)}
.notif-title{font-weight:500}
.notif-body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.notif-user,.notif-fixed{display:block}
.notif-user{white-space:pre-line}
.is-unread .notif-title{font-weight:700}
.tabs{display:flex;flex-wrap:wrap;gap:4px 28px;margin-bottom:24px;border-bottom:1px solid var(--line);font-size:16px}
.tabs a,.tabs button{padding:8px 0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);font:inherit;text-decoration:none;cursor:pointer}
/* the tab shown: ink, heavier and the lime underline (design CP7B; the lime is never the only sign) */
.tabs a[aria-current],.tabs [aria-selected=true]{color:var(--ink);border-bottom-color:var(--lime);font-weight:600}
.tabs a:hover,.tabs button:hover{color:var(--ink)}
.tab-count{color:var(--muted);font-weight:400}
.own-line{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 16px;color:var(--muted)}
.own-line .btn{min-height:36px}
.admin-item>.stack{flex:1;gap:6px;min-width:0;overflow-wrap:anywhere}
.admin-bar{margin-bottom:16px}
.admin-search .field{max-width:none}

/* ---------- catalogue tiles (card({cover})): the picture on top, the whole tile one link ---------- */
.card.tile{position:relative;flex-direction:column;gap:0;padding:0;overflow:hidden}
.card.tile:hover{border-color:var(--muted)}
.card.tile:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.tile .card-body{display:grid;gap:4px;align-content:start;padding:12px 14px 14px}
.tile .card-title{font:700 21px/1.05 var(--font-head);text-transform:uppercase}
.tile .card-title a{text-decoration:none}
.tile .card-title a::after{content:'';position:absolute;inset:0}
.tile .card-title a:focus-visible{outline:none}
/* the roles of a tile in 13 px, as on the search tiles: «Мониторный звукорежиссёр» keeps its line in a 220 px column */
.tile .card-meta{margin-top:0;font-size:13px}
.tile .tags{margin-top:5px}
.tile .tag{font-size:12px}
.card-fact{display:flex;gap:6px;align-items:flex-start;color:var(--muted);font-size:13px}
.card-fact .icon{flex:none;margin-top:2px}
.card-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.cover{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--chip);border-bottom:1px solid var(--line)}
.cover img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.cover.is-logo{background:var(--card)}
.cover.is-logo img{object-fit:contain;padding:20px}
/* no picture: hatching with the initials; a posting: a hatched stub with the kind and the dates, like a crew pass */
/* a person's picture: the photo, or a statue (decorative, tinted by --statue-filter) */
.person-picture{position:relative;overflow:hidden;background:var(--img);aspect-ratio:3/4}
.person-picture.is-thumb{aspect-ratio:1}
.person-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.person-picture img.is-statue{filter:var(--statue-filter)}
.tile>.person-picture{border-bottom:1px solid var(--line)}
/* the initials over the hatching: the dimmed step of the busy days, 4.5:1 against the stripe in the light theme too */
.cover.is-blank,.hatched{background-color:var(--chip);background-image:var(--hatch);color:color-mix(in srgb,var(--muted) 75%,var(--ink))}
.cover.is-blank{display:grid;place-items:center}
.cover.is-blank span{font-size:36px;font-weight:700}
.cover.stub{display:grid;align-content:space-between;gap:10px;aspect-ratio:auto;min-height:88px;padding:12px 16px 14px;background:var(--chip);border-bottom-color:var(--line);color:var(--ink)}
.cover.stub>.label{display:inline-flex;align-items:center;gap:6px}
.stub-dates{font:600 20px/1.15 var(--font-head)}
/* a project photo: the dates sit on a white plate in its corner */
.cover-plate{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:4px 10px;background:var(--card);color:var(--ink);font-size:14px;font-weight:700;line-height:1.3}

/* ---------- find: the white search band, its tabs, the results ---------- */
/* the catalogue band (design v7): dark in both themes, our backstage photo under the gradient (wider than 960 px only). The
   search bar keeps the dark tokens, so its fields, the place list, «Ещё условия» and a refusal read on the band; the band stays
   above the results, so the place list hangs over them. Also the band of «Профессии» */
.cat-hero{--card:#1a1d1f;--ink:#eeebe5;--muted:#9aa1a4;--line:#2c3134;--strong:#eeebe5;--chip:#24282b;--hover:color-mix(in srgb,var(--ink) 8%,transparent);color-scheme:dark;
  z-index:2;overflow:visible;margin:-32px calc(-1 * var(--pad)) 0;padding:40px var(--pad) 26px}
.cat-hero .band-photo{object-position:70% 45%}
.cat-hero>.page-title{max-width:min(860px,100%)}
.cat-hero>.page-title,.cat-hero>.lead{text-shadow:0 1px 3px rgba(17,19,20,.6)}
.cat-hero>.lead{margin-top:10px;color:#d4d1ca}
.cat-hero .search{margin-top:20px}
.cat-hero .search-bar{border-color:#4a5155;color:var(--ink);box-shadow:none}
.cat-hero .search-cell label,.cat-hero .search-cell .search-label{color:var(--muted)}
.cat-hero select option,.cat-hero select optgroup{background:var(--card);color:var(--ink)}
.cat-hero input[type=checkbox],.cat-hero input[type=radio]{accent-color:var(--band-accent)}
.cat-hero .search-bar>.btn.primary,.cat-hero .search-bar>.btn.primary:hover{border-color:var(--band-accent);background:var(--band-accent);color:var(--band-bg)}
.cat-hero .search-bar>.btn.primary:hover{opacity:.88}
.cat-hero .form-error{background:var(--chip);color:var(--ink);border-left-color:var(--band-accent)}
@media (max-width:960px){.cat-hero .band-photo{display:none}}
@media (max-width:899px){.cat-hero{margin-top:-24px;padding:28px var(--pad) 22px}}
/* «Город» and «Радиус» side by side in one cell of the bar; the place list a little wider than the city field */
.search-place{grid-template-columns:minmax(0,1fr) minmax(0,6.5em);gap:2px 14px;align-items:end}
.search-place .place-list{right:auto;width:max(100%,260px)}
.search{display:grid;gap:10px;max-width:1040px;margin-top:16px}
.search-bar{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.3fr) auto;border:1px solid var(--line);background:var(--card);box-shadow:0 14px 34px rgba(22,23,31,.18)}
.search-bar.is-two{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto}
.search-cell{display:grid;gap:2px;align-content:center;min-width:0;padding:8px 18px;border-right:1px solid var(--line)}
.search-cell:nth-last-child(2){border-right:0}
.search-cell>.field{gap:2px}
.search-cell label,.search-cell .search-label{font-size:13px;font-weight:700}
.search-cell select,.search-cell input{min-height:30px!important;padding:0!important;border:0!important;background:transparent!important;font-size:17px!important}
.search-cell :focus-visible{outline-offset:2px}
.search-dates{display:flex;align-items:center;gap:6px;min-width:0}
.search-dates input{min-width:0;flex:1}
.search-bar>.btn{margin:6px;min-height:48px;padding:0 26px;font-size:16px}
.search-more>summary{display:inline-block;color:var(--muted);font-size:15px;font-weight:600}
.search-more[open]>summary{margin-bottom:10px}
.search-more .filter-row{max-width:760px}
.find-tabs{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin:18px 0 16px;border-bottom:1px solid var(--line)}
.find-tabs .tabs{margin:0;border:0}
.find-tabs-side{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;padding-bottom:9px;font-size:15px}
.find-tabs-side .check{align-items:center}
.find-tabs-side .check input{margin:0}
.find-tabs-side a{color:var(--muted)}
.results>.grid{margin-top:0}
.results>.muted[role=status]{margin-bottom:12px}

/* ---------- «Поиск людей» (#/specialists, design CP7A): filters on the left, the grid or the list, the selection bar ---------- */
.search-page{--select-bar:104px;display:grid;grid-template-columns:262px minmax(0,1fr);gap:32px;align-items:start}
.search-side .sheet-head,.search-sheet-open{display:none}
.search-filters{gap:20px;max-width:none}
.filter-group{display:grid;gap:10px;min-width:0}
.filter-group>legend.label{float:left;width:100%;margin-bottom:10px;padding:0}
.filter-group>legend+*{clear:both}
.filter-group .field{gap:4px}
.filter-group .field label{font-size:14px}
/* one date under the other in the narrow column; side by side in the phone sheet, which is wider */
.filter-dates{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.filter-dates .field{min-width:0}
.filter-dates input{width:100%;min-width:0}
.filter-group .check{align-items:center;font-size:15px}
.filter-group .check input{margin:0}
.filter-more>summary{color:var(--muted);font-size:14px}
.filter-more-list{display:grid;gap:10px;margin-top:10px;max-height:320px;overflow-y:auto}
.filter-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.filter-actions a{color:var(--muted)}
.search-main{display:grid;gap:16px;min-width:0}
.search-main>.tabs,.search-main>.own-line{margin:0}
.search-head{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}
.search-head>div:first-child{min-width:0}
.search-summary{margin-top:6px;color:var(--muted);font-size:14px;font-weight:500}
.search-tools{display:flex;flex-wrap:wrap;gap:8px}
.view-switch{display:flex;border:1px solid var(--line)}
.view-switch a{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.view-switch a[aria-current]{background:var(--btn);color:var(--btn-ink)}
.view-switch a:not([aria-current]):hover{background:var(--hover)}
.search-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:900px){.search-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1200px){.search-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.search-pic{position:relative;border-bottom:1px solid var(--line)}
.search-tile .search-pic>.person-picture,.search-tile .search-pic>.cover{aspect-ratio:5/4;border-bottom:0}
.search-facts{font-size:13px;font-weight:500;line-height:1.35}
.search-tile.is-selected{outline:2px solid var(--lime);outline-offset:-2px}
.team-badge{position:absolute;left:10px;top:10px;z-index:1;pointer-events:none;max-width:calc(100% - 20px);padding:5px 8px;background:var(--band-ink);color:var(--band-bg);font:700 11px/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase}
/* the bar of the chosen days: lime free, graphite busy, half and half part; its name says the same in words */
.avail-bar{display:grid;grid-template-columns:repeat(var(--segments),minmax(0,1fr));gap:2px}
.avail-seg{display:block;min-width:0}
.avail-seg.is-free{background:var(--lime)}
.avail-seg.is-busy{background:#3a4044}
.avail-seg.is-part{background:linear-gradient(90deg,var(--lime) 0 50%,#3a4044 50% 100%)}
.search-pic .avail-bar{position:absolute;left:0;right:0;bottom:0;height:6px}
.avail-bar.is-cells{display:flex;gap:3px;height:22px}
.avail-bar.is-cells .avail-seg{width:18px;flex:none}
.avail-bar.is-cells .avail-seg.is-busy{background:var(--hatch);border:1px solid var(--muted)}
.avail-bar.is-cells .avail-seg.is-part{background:linear-gradient(90deg,var(--lime) 0 50%,transparent 50% 100%);border:1px solid var(--muted)}
/* the square checkbox of a person: a real checkbox over a drawn box, ticked when chosen (lime is not the only sign) */
.pick{position:absolute;left:2px;top:2px;z-index:2;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick-box{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--band-ink);background:rgba(17,19,20,.45);color:var(--lime-ink)}
.pick-box .icon{visibility:hidden}
.pick input:checked+.pick-box{border-color:var(--lime);background:var(--lime)}
.pick input:checked+.pick-box .icon{visibility:visible}
.pick input:focus-visible+.pick-box{outline:2px solid var(--ink);outline-offset:2px}
.row-pick .pick{position:relative;left:auto;top:auto}
.row-pick .pick-box{width:24px;height:24px;border:1px solid var(--muted);background:var(--card)}
/* the list: one row per person; the days column is as wide as its cells */
.search-list{--days:calc(var(--day-count,4) * 21px);margin:0;padding:0;list-style:none}
.search-row{display:grid;grid-template-columns:44px 64px minmax(0,1.5fr) var(--days) minmax(0,1fr) minmax(0,.6fr) 80px;gap:14px;align-items:center;min-height:84px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.search-list.no-pick .search-row{grid-template-columns:64px minmax(0,1.5fr) var(--days) minmax(0,1fr) minmax(0,.6fr) 80px}
.search-list.no-days .search-row{grid-template-columns:44px 64px minmax(0,1.5fr) minmax(0,1fr) minmax(0,.6fr) 80px}
.search-list.no-pick.no-days .search-row{grid-template-columns:64px minmax(0,1.5fr) minmax(0,1fr) minmax(0,.6fr) 80px}
.search-row.is-head{min-height:0;padding:0 0 9px;border-bottom-color:var(--strong);color:var(--muted);font:600 11px/1.2 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.search-row.is-selected{box-shadow:inset 3px 0 0 var(--lime)}
.row-pick{display:grid;place-items:center}
.row-pic .person-picture{width:64px}
.row-who{display:grid;gap:5px;min-width:0}
.row-name{font:700 22px/1 var(--font-head);text-transform:uppercase;text-decoration:none;overflow-wrap:anywhere}
.row-name:hover{text-decoration:underline}
.row-roles{color:var(--muted);font-size:13px}
.row-who .tags .tag{font-size:12px}
.row-certs{font-weight:600}
.row-reply{color:var(--muted)}
.row-label{color:var(--muted);font-size:13px;font-weight:400}
.row-daynums{display:flex;gap:3px}
.row-daynums i{width:18px;font-style:normal;text-align:center}
@media (min-width:1100px){.row-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:1099px){
  .search-row.is-head{display:none}
  .search-row,.search-list.no-pick .search-row,.search-list.no-days .search-row,.search-list.no-pick.no-days .search-row{grid-template-columns:auto 64px minmax(0,1fr);gap:4px 12px;align-items:start;padding:12px 0}
  .search-list.no-pick .search-row,.search-list.no-pick.no-days .search-row{grid-template-columns:64px minmax(0,1fr)}
  .search-row>.row-pick,.search-row>.row-pic{grid-row:1/span 5}
  .search-row>.row-who~*{grid-column:-2}
  .row-name{font-size:20px}
}
/* the teams row of «Команды целиком» */
.search-teams{display:grid;gap:12px}
.search-teams h2{font:600 20px/1.2 var(--font-head);text-transform:uppercase}
.search-teams-all{justify-self:start;font-weight:600}
/* the selection bar: under the results, held at the bottom of the screen while they scroll */
.select-slot{position:sticky;bottom:20px;z-index:5}
.select-slot:empty{display:none}
.select-bar{display:flex;align-items:center;gap:16px;min-height:70px;padding:10px 10px 10px 20px;background:var(--btn);color:var(--btn-ink);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.select-what{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;flex:1;min-width:0;font-size:15px}
.select-what>*+*::before{content:'·';margin:0 8px}
.select-count{font:700 24px/1 var(--font-head);text-transform:uppercase}
.select-names{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-bar .btn.select-clear{border-color:transparent;background:transparent;color:var(--btn-ink)}
.select-bar .btn.select-clear:hover{text-decoration:underline}
.select-bar .btn.select-invite{min-height:50px;border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
/* the global ring is --ink, the colour of the bar */
.select-bar :focus-visible{outline-color:var(--btn-ink)}
/* a phone: the filters are a full-screen sheet (above the tab bar and the selection bar), the bar sits above the tab bar */
@media (max-width:899px){
  .search-page{grid-template-columns:minmax(0,1fr);gap:0}
  .filter-dates{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .search-page.has-selection{padding-bottom:calc(var(--select-bar) + 8px)}
  .search-side{display:none}
  .search-side.is-open{position:fixed;left:0;right:0;top:0;bottom:0;z-index:25;display:block;overflow-y:auto;padding:0 16px 16px;background:var(--bg)}
  body.has-tabbar .search-side.is-open{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  .search-page.has-selection .search-side.is-open{bottom:var(--select-bar)}
  body.has-tabbar .search-page.has-selection .search-side.is-open{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + var(--select-bar))}
  body.has-sheet{overflow:hidden}
  .search-side .sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;min-height:var(--topbar);margin-bottom:8px;background:var(--bg);border-bottom:1px solid var(--line)}
  .search-side .filter-actions{position:sticky;bottom:0;padding:12px 0;background:var(--bg);border-top:1px solid var(--line)}
  .search-sheet-open{display:inline-flex}
  .search-tile .card-title{font-size:18px}
  .search-tile .card-body{padding:10px 10px 12px}
  .select-slot{position:fixed;left:0;right:0;bottom:0;z-index:15}
  body.has-tabbar .select-slot{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  .select-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;height:var(--select-bar);min-height:0;padding:8px 16px;border-top:1px solid var(--line);box-shadow:none}
  .select-what{flex-wrap:nowrap;overflow:hidden}
  .select-what>:not(.select-count){display:none}
  .select-count{font-size:20px;white-space:nowrap}
  .select-bar .btn.select-clear{min-height:36px;padding:0 8px}
  .select-bar .btn.select-invite{grid-column:1/-1;min-height:44px;white-space:nowrap;overflow:hidden}
  .select-invite span{overflow:hidden;text-overflow:ellipsis}
}

/* ---------- a specialist's page (spec §9.3, CP7B «profile»): the picture the whole height on the left with the badges, the
   name in two lines and the lead over it (dark in both themes); the tabs beside it; an organization's invite bar at the bottom ---------- */
.sp-page{display:grid;grid-template-columns:clamp(300px,38vw,520px) minmax(0,1fr);align-items:start;margin:-32px 0 0 calc(-1 * var(--pad))}
.sp-hero{position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));min-height:480px;overflow:hidden;background:var(--band-bg);color:var(--band-ink)}
.sp-pic,.sp-pic .person-picture{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.sp-pic img{object-position:50% 18%}
.sp-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,19,20,0) 34%,rgba(17,19,20,.94) 100%);pointer-events:none}
.sp-hero-text{position:absolute;left:34px;right:34px;bottom:32px;z-index:1;display:grid;gap:12px;text-shadow:0 1px 3px rgba(17,19,20,.6)}
.sp-badges{display:flex;flex-wrap:wrap;gap:8px;text-shadow:none}
.sp-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--band-ink);font:700 12px/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase}
.sp-badge.is-free{border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
.sp-name{margin:0;font:700 clamp(40px,4.6vw,88px)/.92 var(--font-head);text-transform:uppercase;hyphens:manual}
.sp-name>span{display:block}
.sp-lead{font-size:17px;line-height:1.4}
.sp-main{display:grid;gap:18px;align-content:start;min-width:0;padding:24px 0 0 40px}
.sp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.sp-back{color:var(--muted);font-size:15px;text-decoration:none}
.sp-back:hover{color:var(--ink);text-decoration:underline}
.sp-top .btn{min-height:40px;padding:0 14px}
.sp-main>.tabs{margin:0}
.sp-main .tab-panel{gap:26px}
.sp-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none}
.sp-figure{display:grid;gap:5px;align-content:start;min-width:0;padding:0 16px;border-left:1px solid var(--line)}
.sp-figure:first-child{padding-left:0;border-left:0}
.sp-figure b{font:700 44px/1 var(--font-head)}
.sp-figure.is-none b{font-size:26px;line-height:1.2;text-transform:uppercase;color:var(--muted)}
.sp-figure span{color:var(--muted);font-size:13px;line-height:1.35}
.sp-block{display:grid;gap:9px;align-content:start;min-width:0}
.sp-block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.sp-skills{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sp-skill{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;max-width:100%;padding:8px 11px;border:1px solid var(--strong);font-size:14px;font-weight:600;line-height:1.25}
.sp-skill small{color:var(--muted);font-size:13px;font-weight:400}
.sp-skill.is-main{border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
.sp-skill.is-main small{color:var(--lime-ink);font-weight:500}
.sp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 32px;align-items:start}
.sp-facts{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);column-gap:16px;margin:0;font-size:14px;line-height:1.4}
.sp-facts>div{display:grid;grid-column:1/-1;grid-template-columns:subgrid;padding:8px 0;border-bottom:1px solid var(--line)}
.sp-facts>div:last-child{border-bottom:0}
.sp-facts dt{color:var(--muted)}
.sp-facts dd{min-width:0;margin:0;font-weight:600}
.sp-certs{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.sp-certs .muted{font-weight:400}
.sp-cert-expired{display:inline-block;padding:0 6px;border:1px dashed var(--strong);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sp-works{display:grid;margin:0;padding:0;list-style:none}
.sp-work{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sp-work:last-child{border-bottom:0}
.sp-work>img,.sp-work-pic{width:84px;height:56px;object-fit:cover;background-color:var(--img)}
.sp-work-pic{background-image:var(--hatch)}
.sp-work.is-hidden>img{opacity:.5}
.sp-work-text{display:grid;gap:2px;min-width:0;font-size:13px;line-height:1.4}
.sp-work-title{font:700 17px/1.1 var(--font-head);text-transform:uppercase;overflow-wrap:anywhere}
.sp-work-meta{color:var(--muted)}
.sp-work-hidden{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sp-work-hidden[hidden]{display:none}
.sp-with-you{grid-column:3;padding:4px 7px;background:var(--lime);color:var(--lime-ink);font:700 10px/1 var(--font-text);letter-spacing:.06em;white-space:nowrap}
.sp-work .sp-hide{grid-column:2/-1;justify-self:start;min-height:36px;padding:0 12px;font-size:14px}
.sp-bar{position:sticky;bottom:16px;z-index:5;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;max-width:none;margin-top:8px;padding:12px 12px 12px 18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--lift)}
.sp-bar.is-plain,.sp-bar.is-empty{align-items:center}
.sp-bar.is-empty{position:static;box-shadow:none}
.sp-bar-title{align-self:center;margin-right:4px;font:700 21px/1 var(--font-head);text-transform:uppercase}
.sp-bar .field{flex:1 1 150px;min-width:0;gap:3px}
.sp-bar .field label{color:var(--muted);font-size:12px;line-height:1.2}
.sp-bar-note{flex:1 1 220px;color:var(--muted);font-size:14px}
.sp-bar-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-left:auto}
.sp-write{font-weight:600}
.sp-bar .btn.sp-send{min-height:48px;border-color:var(--lime);background:var(--lime);color:var(--lime-ink);font-size:18px}
.facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 16px;margin:0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.facts-row dt{color:var(--muted);font-size:13px}
.facts-row dd{margin:0}
.cert-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line);font-size:15px}
.cert-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.cert-list .muted{font-size:14px}
.pf-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pf-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tab-panel{display:grid;gap:16px;min-width:0;padding-bottom:16px}

/* ---------- the wide picture over a project or an invitation; the side cards of the editors ---------- */
.page-banner{position:relative;height:168px;margin:-32px calc(-1 * var(--pad)) 0;overflow:hidden;background-color:var(--chip);background-image:var(--hatch)}
.page-banner img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.page-banner.is-project{height:260px;margin-bottom:28px}
.aside-card{display:grid;gap:10px;padding:16px 22px;background:var(--card);border:1px solid var(--line)}
.aside-card h2{font-size:21px}
.aside-card .avail-months{grid-template-columns:minmax(0,1fr);gap:14px}
.aside-card .btn{width:100%}
@media (max-width:560px){.aside-card{padding:16px}}

/* ---------- the team page (spec §9.4, design CP7B «team»): the dark band, the figures, the people, the month card;
   the organization page (below) shares the band, the layout, the blocks and the foot ---------- */
.tp-page{display:grid;min-width:0}
.tp-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;min-height:300px;margin:-32px calc(-1 * var(--pad)) 0;padding:30px var(--pad);border-bottom:1px solid var(--line)}
.tp-hero-text{display:grid;gap:12px;flex:1 1 420px;min-width:0;max-width:820px;text-shadow:0 1px 3px rgba(17,19,20,.6)}
.tp-kicker{font:600 12px/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase}
.tp-name,.op-name{margin:0;font:700 clamp(40px,6vw,86px)/.92 var(--font-head);text-transform:uppercase;hyphens:manual}
.tp-lead{font-size:17px;line-height:1.4;color:color-mix(in srgb,var(--band-ink) 86%,transparent)}
.tp-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.tp-hero .btn{min-height:48px;border-color:var(--band-ink);color:var(--band-ink)}
.tp-hero .btn:hover{background:rgba(244,241,234,.12)}
.tp-hero .btn.tp-invite{gap:10px;border-color:var(--lime);background:var(--lime);color:var(--lime-ink);font:700 18px/1 var(--font-head);text-transform:uppercase}
.tp-hero .btn.tp-invite:hover{opacity:.88}
.tp-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 calc(-1 * var(--pad));padding:0 var(--pad);list-style:none;border-bottom:1px solid var(--line)}
.tp-figure{display:grid;gap:4px;align-content:start;min-width:0;padding:16px 20px;border-left:1px solid var(--line)}
.tp-figure:first-child{padding-left:0;border-left:0}
.tp-figure>b{font:700 38px/1 var(--font-head);overflow-wrap:anywhere}
.tp-figure.is-none>b,.tp-figure.is-text>b{font-size:26px;line-height:1.15}
.tp-figure.is-none>b{color:var(--muted);text-transform:uppercase}
.tp-figure>span{color:var(--muted);font-size:13px;line-height:1.35}
.tp-figure .tp-free{color:var(--ink);font-weight:600}
.tp-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px 36px;align-items:start;margin-top:20px}
.tp-main{display:grid;gap:22px;align-content:start;min-width:0}
.tp-aside{display:grid;gap:12px;min-width:0;position:sticky;top:calc(var(--topbar) + 16px)}
.tp-block{display:grid;gap:10px;align-content:start;min-width:0}
.tp-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.tp-person{display:grid;align-content:start;min-width:0}
.tp-person>a{display:grid;gap:2px;align-content:start;color:var(--ink);text-decoration:none}
.tp-person>a:hover .tp-person-name{text-decoration:underline}
.tp-person .person-picture{aspect-ratio:4/5}
.tp-person-name{display:block;margin-top:6px;font:700 15px/1.1 var(--font-head);text-transform:uppercase;overflow-wrap:anywhere}
.tp-person-meta{color:var(--muted);font-size:12px;line-height:1.3}
.tp-more{display:grid;place-items:center;aspect-ratio:4/5;border:1px dashed var(--muted);color:var(--muted);font:700 22px/1 var(--font-head)}
.tp-foot{margin-top:28px}
.tp-foot .btn{min-height:40px;padding:0 14px;font-size:15px}
.tp-month.card,.tp-contacts.card{display:grid;gap:10px;padding:16px 18px}
.tp-month-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tp-month-head h2{font:700 22px/1.1 var(--font-head);text-transform:uppercase}
.tp-steps{display:flex;gap:4px;flex:none}
.tp-step{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer}
.tp-step:hover{background:var(--hover)}
.tp-step[aria-disabled=true]{color:var(--muted);cursor:default;background:none}
.tp-month-note{color:var(--muted);font-size:13px}
.tp-cal{display:grid;gap:3px}
.tp-wds,.tp-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:0;padding:0;list-style:none;text-align:center}
.tp-wds{color:var(--muted);font:600 11px/1.2 var(--font-text);text-transform:uppercase}
.tp-day{position:relative;display:grid;justify-items:center;gap:3px;min-width:0;padding:6px 0;background:var(--chip);color:var(--muted);font:600 12px/1 var(--font-text)}
.tp-day>b{color:var(--ink);font:700 15px/1.2 var(--font-head)}
.tp-day.is-ok{background:var(--lime);color:var(--lime-ink)}
.tp-day.is-ok>b{color:var(--lime-ink)}
.tp-day.is-past,.tp-day.is-blank{background:none}
.tp-ok{position:absolute;top:2px;right:2px;line-height:0}
.tp-legend{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.tp-key{display:grid;place-items:center;width:18px;height:18px;flex:none;background:var(--lime);color:var(--lime-ink)}
.tp-owner{padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.45}
@media (max-width:1099px){
  .tp-layout{grid-template-columns:minmax(0,1fr)}
  .tp-aside{position:static;max-width:560px}
}
@media (max-width:899px){
  .tp-hero{min-height:240px;margin-top:-24px;padding:24px var(--pad)}
  .tp-hero-text{flex-basis:100%}
  .tp-lead{font-size:15px}
  .tp-people{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .tp-name,.op-name{font-size:clamp(32px,11vw,48px)}
  .tp-hero-actions,.tp-hero .btn{width:100%}
  .tp-figures{grid-template-columns:minmax(0,1fr)}
  .tp-figure,.tp-figure:first-child{padding:12px 0;border-left:0;border-top:1px solid var(--line)}
  .tp-figure:first-child{border-top:0}
  .tp-figure>b{font-size:32px}
  .tp-month.card{padding:14px 12px}
  .tp-month-head h2{font-size:19px}
  .tp-ok{top:1px;right:1px}
  .tp-ok .icon{width:9px;height:9px}
}

/* ---------- the organization page (spec §9.5, design CP7B «org»): the logo in the band, the rows of open projects and vacancies ---------- */
.op-hero-in{display:flex;align-items:flex-end;gap:16px 22px;flex:1 1 560px;min-width:0;max-width:980px}
.op-logo{display:grid;place-items:center;width:96px;height:96px;flex:none;overflow:hidden;background:var(--band-ink);color:var(--band-bg);font:700 38px/1 var(--font-head)}
.op-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.op-name{overflow-wrap:anywhere}
.op-layout.is-single{grid-template-columns:minmax(0,1fr)}
.op-rows{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.op-row{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;background:var(--card);border:1px solid var(--line)}
.op-date{display:grid;place-items:center;align-content:center;gap:4px;min-height:64px;padding:8px 6px;background:var(--chip);color:var(--ink);text-align:center}
.op-date>b{font:700 26px/1 var(--font-head);white-space:nowrap}
.op-date>small{font:600 11px/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase}
.op-date.is-staff>b{font-size:22px;text-transform:uppercase}
.op-row-text{display:grid;gap:4px;min-width:0}
.op-row-title{justify-self:start;color:var(--ink);font:700 21px/1.1 var(--font-head);text-transform:uppercase;text-decoration:none;overflow-wrap:anywhere}
.op-row-title:hover{text-decoration:underline}
.op-row-meta{font-size:14px;line-height:1.45}
.op-row-action{display:flex;justify-content:flex-end}
.op-row .btn{min-height:40px;padding:0 14px}
/* invited: lime with its words (the lime is never the only sign); sent: a plain frame with a check and its words */
.op-invited{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;background:var(--lime);color:var(--lime-ink);font:700 12px/1 var(--font-text);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.op-invited:hover{text-decoration:underline}
.op-sent{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line);color:var(--ink);font:600 14px/1.2 var(--font-text);white-space:nowrap}
@media (max-width:560px){
  /* a phone: the logo above the name, so the name has the band's whole width */
  .op-hero-in{flex-basis:100%;flex-wrap:wrap;align-items:flex-start;gap:14px}
  .op-logo{width:72px;height:72px;font-size:28px}
  .op-row{grid-template-columns:minmax(72px,max-content) minmax(0,1fr);gap:12px;padding:12px}
  .op-row-action{grid-column:1/-1}
  .op-row-action>*{flex:1 1 auto}
  .op-date>b{font-size:22px}
  .op-row-title{font-size:18px}
}

/* ---------- the settings (#/settings, design CP7D «settings»): the title and the list of sections on the left (the one in view
   with the lime bar), every section on one page on the right; the switch ---------- */
.settings-page{display:grid;grid-template-columns:230px minmax(0,780px);gap:24px 32px;align-items:start}
.settings-page form{max-width:none}
.settings-page .frame-side .lead{margin-top:0;font-size:15px}
.settings-page .panel{padding:20px 22px;scroll-margin-top:calc(var(--topbar) + 16px)}
.settings-page .panel>h2{font:700 24px/1.1 var(--font-head);text-transform:uppercase}
.settings-page .panel>h3,.settings-page .panel .stack>h3{font:700 18px/1.15 var(--font-head);text-transform:uppercase}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{position:relative;flex:none;width:40px;height:22px;background:var(--muted);transition:background .15s}
.switch-track::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:var(--card);transition:transform .15s}
.switch[aria-checked=true] .switch-track,.switch:has(input:checked) .switch-track{background:var(--btn)}
.switch[aria-checked=true] .switch-track::after,.switch:has(input:checked) .switch-track::after{transform:translateX(18px)}
.switch:has(input:focus-visible) .switch-track{outline:2px solid var(--ink);outline-offset:2px}
.switch:disabled{cursor:default;opacity:.55}
.photo-name{display:grid;grid-template-columns:minmax(140px,max-content) minmax(0,1fr);gap:24px;align-items:start}
.photo-name .photo{width:140px;height:140px}
.photo-name .photo-initials{border:0;background-color:var(--chip);background-image:var(--hatch);color:color-mix(in srgb,var(--muted) 75%,var(--ink));font-size:44px}
.photo-tools{position:relative;display:grid;gap:8px;justify-items:start;margin-top:8px;font-size:14px}
/* the file input stays focusable under its label, which looks like a button */
.photo-tools input[type=file]{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0}
.photo-tools input[type=file]:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.photo-tools .btn{min-height:40px;padding:0 14px;font-size:15px}
/* the photo panel of the project editor sits above the form and takes its width */
#posting-photo{max-width:560px;margin-bottom:16px}
.posting-photo .photo-tools{display:flex;flex-wrap:wrap}
.posting-photo-preview{width:min(100%,360px);aspect-ratio:3/2;overflow:hidden;border:1px solid var(--line)}
.posting-photo-preview img{display:block;width:100%;height:100%;object-fit:cover}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rate-amount{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.invite-time-fields{display:grid;grid-template-columns:repeat(2,minmax(0,9rem));gap:12px}

/* ---------- sectioned settings (#/profile, the team and organization editors): the list, one section, the aside ---------- */
.frame{display:grid;grid-template-columns:230px minmax(0,1fr) 340px;gap:24px 32px;align-items:start;max-width:none}
.frame-side{position:sticky;top:calc(var(--topbar) + 16px);display:grid;gap:16px;align-content:start;min-width:0}
.frame-side .page-title{font-size:30px;overflow-wrap:anywhere}
.side-nav{display:grid;gap:2px;font:500 15px/1.25 var(--font-text)}
.side-item{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 12px;border:0;background:none;color:var(--muted);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.side-item:hover{background:var(--hover);color:var(--ink)}
.side-item .icon{flex:none}
.side-text{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.side-note{color:var(--ink);font-size:13px;font-weight:600}
.side-count{flex:none;color:var(--muted);font-size:14px;font-weight:500}
.side-flag{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;background:var(--lime);color:var(--lime-ink);font:700 13px/1 var(--font-text)}
.frame-main,.frame-section{display:grid;gap:16px;min-width:0}
.frame-main>.form-error{scroll-margin-top:calc(var(--topbar) + 16px)}
.frame-section .panel,.frame-section .panel+.panel{margin:0}
.frame-aside{position:sticky;top:calc(var(--topbar) + 16px);display:grid;gap:14px;align-content:start;min-width:0}
.frame-aside .aside-card h2{font-size:18px}
.frame-save{width:100%;min-height:50px}
.fill-card{display:grid;gap:10px;padding:18px 20px;background:var(--btn);color:var(--btn-ink);font-size:14px}
.fill-card p{margin:0}
.fill-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;font-size:13px}
.fill-percent{font:700 28px/1 var(--font-head)}
.fill-bar{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.fill-bar i{height:8px;background:var(--btn-ink);opacity:.25}
.fill-bar i.is-on{background:var(--lime);opacity:1}
.fill-missing{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.fill-missing li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}
.fill-card .btn-link{color:var(--btn-ink);text-align:left}
.fill-card :focus-visible{outline-color:var(--btn-ink)}
.customer-rows{display:grid;gap:7px;margin:0;font-size:14px}
.customer-rows>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.customer-rows>div:last-child{padding-bottom:0;border-bottom:0}
.customer-rows dt{color:var(--muted)}
.customer-rows dd{margin:0;text-align:right}
.publish-card .switch{font-size:15px}
.photo-col{display:grid;gap:4px;align-content:start}
.photo-col .person-picture{width:150px}
.field-label{font-weight:600;font-size:15px}
.field-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:44px;padding:9px 12px;border:1px solid var(--muted);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.field-link:hover{background:var(--hover)}
.field-link-go{color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.statue-choice{display:grid;gap:8px}
.statue-choice .hint{margin:0}
.statue-options{display:flex;flex-wrap:wrap;gap:10px}
.statue-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);background:var(--card);font-weight:500;cursor:pointer}
.statue-option input{margin:0}
.statue-option:has(input:checked){border-color:var(--strong);box-shadow:inset 0 0 0 1px var(--strong)}
.statue-option img{width:40px;height:50px;object-fit:cover;background:var(--img);filter:var(--statue-filter)}
.skills-editor,.certs-editor{display:grid;gap:12px}
.skills-editor .hint{margin:0}
.skill-rows,.cert-rows{margin:0;padding:0;list-style:none}
.skill-rows:not(:empty){border-bottom:1px solid var(--line)}
/* a speciality: the name on the first line and the years under it, so a long name keeps its line; the grip, the moves and
   «Убрать» beside both lines */
.skill-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;grid-template-areas:'grip name moves remove' 'grip years moves remove';gap:6px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);background:var(--card)}
.skill-row>.skill-grip{grid-area:grip}
.skill-row>.skill-name{grid-area:name}
.skill-row>select{grid-area:years;justify-self:start}
.skill-row>.skill-moves{grid-area:moves}
.skill-row>[data-skill-remove]{grid-area:remove}
.skill-row.is-dragging{position:relative;z-index:1;box-shadow:inset 3px 0 0 var(--lime),var(--lift)}
.skill-grip{display:grid;place-items:center;width:24px;height:40px;color:var(--muted);cursor:grab;touch-action:none}
.skill-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;overflow-wrap:anywhere}
.skill-main{padding:5px 8px;background:var(--lime);color:var(--lime-ink);font:700 11px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.skill-row select{width:auto;max-width:16rem;min-height:40px;padding-block:6px}
.skill-moves{display:flex}
.skill-row .icon-btn:disabled{opacity:.35;cursor:default}
.cert-row{display:grid;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.cert-row:first-child{padding-top:0}
.cert-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.frame-section .two-col{align-items:start}
.cert-fields>.field:first-child,.cert-fields>[data-cert-title]{grid-column:1/-1}
.cert-scan{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cert-scan-name{overflow-wrap:anywhere}
.file-pick{position:relative}
.file-pick input[type=file]{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0}
.file-pick input[type=file]:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.cert-scan .btn{min-height:40px;padding:0 14px;font-size:15px}
.scan-error{flex-basis:100%;margin:0;padding:8px 12px;border-left:3px solid var(--lime);background:var(--chip);font-weight:600}
.scan-error:empty{display:none}
.gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 16px}
@media (max-width:1199px){
  /* 240 px: «Допуски и документы» with its count stays on one line in every language */
  .frame{grid-template-columns:240px minmax(0,1fr)}
  .frame-aside{grid-column:2;position:static}
}
@media (max-width:899px){
  .frame,.settings-page{grid-template-columns:minmax(0,1fr)}
  .frame-side{position:static}
  .side-nav{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px}
  .side-item{flex:none;white-space:nowrap}
  .side-item.is-active,.side-item[aria-current=true]{box-shadow:inset 0 -3px 0 var(--lime)}
  .frame-aside{grid-column:auto}
  .frame-save{order:-1}
}
@media (max-width:560px){
  /* a phone: the name across the row; «Убрать», the years and the moves under it */
  .skill-row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:'grip name name' 'remove years moves';gap:6px 8px}
  .skill-row>.skill-grip{justify-self:center}
  .skill-row>select{justify-self:stretch;width:100%;max-width:none}
  .cert-fields{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the organization's projects: one row per posting, what waits on the right ---------- */
.projects{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.project-row{display:grid;gap:12px;padding:18px 22px}
.project-main{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:18px;align-items:center}
.date-block{display:grid;place-items:center;align-content:center;gap:4px;min-height:64px;padding:8px 4px;background:var(--chip);color:var(--ink);text-align:center}
.date-block small{font:600 11px/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.date-block b{font:700 24px/1 var(--font-head);white-space:nowrap}
.project-title{display:grid;gap:4px;min-width:0}
.project-title a{color:var(--ink);font:700 21px/1.1 var(--font-head);text-transform:uppercase;text-decoration:none;overflow-wrap:anywhere}
.project-title a:hover{text-decoration:underline}
.project-title>span{color:var(--muted);font-size:14px}
.project-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding-top:10px;border-top:1px solid var(--line);font-size:15px}
.project-foot .tag{margin:0}
.project-foot>b{padding:1px 8px;background:var(--lime);color:var(--lime-ink);font-size:14px}
.project-foot .actions{margin-left:auto}
.project-foot .btn,.project-main .btn{min-height:40px;padding:0 14px}
.waiting{display:grid;gap:10px}
.wait-card{display:grid;gap:6px;padding:14px 18px;font-size:14px}
.wait-card b{font:700 20px/1.1 var(--font-head);text-transform:uppercase}
.wait-card a{font-weight:600}

/* ---------- the guest home (spec §9.1): the crew query on the backstage photo (dark in both themes), two ways in, the
   urgent card on lime, the strip of real people ---------- */
.home{display:grid;min-width:0}
/* like .cat-hero: the band stays above what follows and does not clip, so the place list of the query hangs out of it whole */
.home-hero{z-index:2;overflow:visible;display:grid;align-content:end;min-height:520px;margin:-32px calc(-1 * var(--pad)) 0;padding:54px var(--pad) 40px}
.home-hero::before{background:linear-gradient(90deg,rgba(17,19,20,.96) 0%,rgba(17,19,20,.86) 50%,rgba(17,19,20,.2) 100%)}
.home-hero .band-photo{object-position:65% 50%}
.home-hero-in{display:grid;gap:20px;min-width:0}
/* the title and the lead keep to the darker left of the gradient (WCAG AA over the brightest part of the photo) */
.home-hero-in>p,.home-title{text-shadow:0 1px 3px rgba(17,19,20,.6)}
.home-title{max-width:min(920px,60%);margin:0;font:700 clamp(44px,7vw,96px)/.92 var(--font-head);text-transform:uppercase;text-wrap:balance;hyphens:manual}
.home-lead{max-width:52ch;font-size:19px;line-height:1.5;color:#d4d1ca}
/* the query keeps the dark tokens in both themes, so its fields, the place list and a refusal read on the band */
.home-query{--card:#1a1d1f;--ink:#eeebe5;--muted:#9aa1a4;--line:#2c3134;--strong:#eeebe5;--chip:#24282b;color-scheme:dark;
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.4fr) auto;gap:0;max-width:none;margin-top:6px;border:1px solid #4a5155;background:var(--card);color:var(--ink)}
.home-cell{display:block;padding:12px 18px 14px;border-left:1px solid var(--line)}
.home-cell:first-child{border-left:0}
.home-cell>legend{float:left;width:100%;margin-bottom:8px;padding:0;color:var(--muted);font:600 11px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.home-cell>legend+*{clear:both}
/* «Сколько человек» as wide as its label (at least 4.5em), so the label stays on one line */
.home-pair{display:grid;grid-template-columns:minmax(4.5em,max-content) minmax(0,1fr);gap:12px;align-items:end}
.home-pair.is-dates{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-query .field{gap:2px;min-width:0}
.home-query label{color:var(--muted);font:500 12px/1.3 var(--font-text)}
.home-query input:not([type=hidden]),.home-query select{min-width:0;min-height:40px;padding:4px 0;border:0;border-bottom:1px solid #4a5155;background:transparent;color:var(--ink);font:500 17px/1.3 var(--font-text)}
.home-query select option,.home-query select optgroup{background:var(--card);color:var(--ink)}
.btn.home-go{gap:10px;align-self:stretch;min-height:56px;margin:8px;padding:0 22px;border-color:var(--band-accent);background:var(--band-accent);color:var(--band-bg);font:700 18px/1.1 var(--font-head);text-transform:uppercase}
.btn.home-go:hover{background:var(--band-accent);opacity:.88}
.home-query>.form-error{grid-column:1/-1;margin:0 8px 8px;background:var(--chip);color:var(--ink);border-left-color:var(--band-accent)}
.home-ways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,380px);border-bottom:1px solid var(--line)}
.home-way{display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px 32px 22px;border-right:1px solid var(--line)}
.home-way:first-child{padding-left:0}
.home-way-title{font:700 clamp(30px,3.2vw,36px)/1 var(--font-head);text-transform:uppercase}
.home-way-title a{color:var(--ink);text-decoration:none}
.home-way-title a:hover{text-decoration:underline;text-decoration-thickness:2px}
/* the arrow keeps to the last word: a no-break space glues it */
.home-way-title a>span::after{content:'\00a0'}
.home-way-title .icon{display:inline-block;vertical-align:-.08em}
.home-way-text{max-width:44ch;color:var(--muted)}
.home-fact{display:flex;gap:8px;align-items:flex-start;margin-top:auto;padding-top:8px;font:600 14px/1.4 var(--font-text)}
.home-fact .icon{flex:none;margin-top:2px}
.home-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.home-strip a{display:block;text-decoration:none}
.home-strip img{width:52px;height:52px;object-fit:cover;object-position:50% 25%;background:var(--img)}
.home-strip .home-more{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line);color:var(--ink);font:700 15px/1 var(--font-head)}
.home-strip .home-more:hover{background:var(--hover)}
.home-urgent{display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px 28px 22px;background:var(--lime);color:var(--lime-ink)}
.home-urgent-label{display:flex;align-items:center;gap:6px;font:600 12px/1 var(--font-text);letter-spacing:.1em;text-transform:uppercase}
.home-urgent h2{font:700 clamp(28px,3vw,40px)/1 var(--font-head);text-transform:uppercase}
.btn.home-urgent-go{align-self:flex-start;margin-top:auto;min-height:46px;border-color:var(--band-bg);background:var(--band-bg);color:var(--band-ink);font:700 16px/1.15 var(--font-head);text-transform:uppercase;white-space:normal;text-align:left}
.btn.home-urgent-go:hover{background:var(--band-bg);opacity:.88}
.home-urgent :focus-visible{outline-color:var(--lime-ink)}
@media (max-width:1199px){
  .home-query{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-cell.is-who{grid-column:1/-1}
  .home-cell.is-where,.home-cell.is-when{border-top:1px solid var(--line)}
  .home-cell.is-where{border-left:0}
  .btn.home-go{grid-column:1/-1}
}
@media (max-width:1099px){
  .home-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-way:nth-child(2){border-right:0}
  .home-urgent{grid-column:1/-1;margin-top:24px}
}
@media (max-width:899px){
  .home-hero{min-height:0;margin-top:-24px;padding:32px var(--pad) 24px}
  .home-title{max-width:none}
  .home-hero::before{background:linear-gradient(0deg,rgba(17,19,20,.96) 55%,rgba(17,19,20,.6) 100%)}
  .home-lead{font-size:16px}
}
@media (max-width:640px){
  .home-title{font-size:clamp(36px,11vw,56px)}
  .home-query{grid-template-columns:minmax(0,1fr)}
  .home-cell,.home-cell.is-where,.home-cell.is-when{border-left:0}
  .home-cell.is-who{grid-column:auto}
  .home-cell+.home-cell{border-top:1px solid var(--line)}
  .btn.home-go{grid-column:auto}
  .home-ways{grid-template-columns:minmax(0,1fr)}
  .home-way,.home-way:first-child{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
  .home-way:nth-child(2){border-bottom:0}
  .home-urgent{grid-column:auto;margin:0 calc(-1 * var(--pad));padding:22px var(--pad)}
}
@media (max-width:400px){.home-pair.is-dates{grid-template-columns:minmax(0,1fr)}}

/* ---------- «Как это работает» (spec §9.19): two columns of five numbered steps, the short FAQ ---------- */
.how{display:grid;gap:28px;min-width:0}
.how-head{display:grid;gap:12px;max-width:760px}
.how-lead{color:var(--muted);font-size:18px;line-height:1.5}
.how-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.how-col{display:grid;gap:14px;align-content:start;min-width:0;padding:24px 28px;background:var(--card);border:1px solid var(--line)}
.how-col>h2{font:700 26px/1.1 var(--font-head);text-transform:uppercase}
.how-col>.btn{justify-self:start;white-space:normal}
.how-steps{display:grid;margin:0;padding:0;list-style:none;counter-reset:how}
.how-steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 12px;padding:14px 0;border-top:1px solid var(--line);counter-increment:how}
.how-steps>li::before{content:counter(how,decimal-leading-zero);grid-row:span 2;font:700 24px/1 var(--font-head)}
.how-steps h3{font-size:18px}
.how-steps p{color:var(--muted)}
.how-faq{display:grid;gap:12px;max-width:860px}
.how-faq>h2{font:700 26px/1.1 var(--font-head);text-transform:uppercase}
.how-qa{display:grid;margin:0}
.how-qa>div{padding:14px 0;border-top:1px solid var(--line)}
.how-qa dt{font-weight:700}
.how-qa dd{margin:4px 0 0;color:var(--muted)}
@media (max-width:899px){
  .how-cols{grid-template-columns:minmax(0,1fr)}
  .how-col{padding:20px 18px}
}

@media (max-width:1099px){
  .search-bar,.search-bar.is-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .search-cell{border-right:0;border-bottom:1px solid var(--line)}
  .search-cell:nth-child(odd){border-right:1px solid var(--line)}
  .search-bar>.btn{grid-column:1/-1;justify-self:stretch}
  .projects{grid-template-columns:minmax(0,1fr)}
  .sp-main{padding-left:28px}
  .sp-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){
  /* the picture on top (the name over it), the page under it; the bar keeps «Написать» and «Отправить →» above the tab bar */
  .sp-page{grid-template-columns:minmax(0,1fr);margin:-24px calc(-1 * var(--pad)) 0}
  .sp-hero{position:relative;top:auto;height:auto;min-height:0;aspect-ratio:4/5;max-height:78vh}
  .sp-hero-text{left:var(--pad);right:var(--pad);bottom:20px}
  .sp-name{font-size:clamp(34px,10vw,56px)}
  .sp-lead{font-size:15px}
  .sp-main{padding:20px var(--pad) 0}
  .sp-work{grid-template-columns:64px minmax(0,1fr) auto}
  .sp-work>img,.sp-work-pic{width:64px;height:48px}
  .sp-bar{bottom:8px;padding:8px}
  body.has-tabbar .sp-bar{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px)}
  .sp-bar .field,.sp-bar:not(.is-empty) .sp-bar-title{display:none}
  .sp-bar-go{flex:1 1 auto;justify-content:space-between;margin-left:0}
  .sp-bar .btn.sp-send{flex:1 1 auto;font-size:16px}
}
@media (max-width:560px){
  .search-bar,.search-bar.is-two{grid-template-columns:minmax(0,1fr)}
  .search-cell,.search-cell:nth-child(odd){border-right:0}
  /* on a phone a picture tile turns into a row (picture left) so a catalogue is not one screen per person; posting stubs and project photos stay on top */
  .card.tile:has(>.cover:not(.stub):not(.is-project)){flex-direction:row}
  .card.tile>.cover:not(.stub):not(.is-project){flex:0 0 104px;aspect-ratio:auto;min-height:120px;border-bottom:0;border-right:1px solid var(--line)}
  .card.tile>.cover.is-blank span{font-size:26px}
  .card.tile>.cover.is-logo img{padding:12px}
  .page-banner{height:120px}
  .page-banner.is-project{height:180px;margin-bottom:20px}
  .photo-name,.two-col,.rate-amount{grid-template-columns:minmax(0,1fr)}
  /* two search tiles side by side: the longest certificate name («Roterende verreiker (MRT)») and role («Технический бригадир») still fit one line */
  .search-tile .card-body{padding-inline:8px}
  .search-tile .card-meta,.search-facts{font-size:12px}
  /* the figures of a specialist one under the other, so «время ответа на приглашения» keeps its line */
  .sp-figures{grid-template-columns:minmax(0,1fr);gap:12px}
  /* «Характеристики» and «О команде»: the name of a fact above its value, so «Zone de déplacement» keeps its line */
  .sp-facts{grid-template-columns:minmax(0,1fr)}
  .sp-facts>div{row-gap:2px}
  .sp-figure+.sp-figure{padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}
  .project-main{grid-template-columns:72px minmax(0,1fr)}
  .project-main>.actions{grid-column:1/-1}
  .project-foot .actions{margin-left:0}
  .page-header .page-title{font-size:28px}
  .date-block b{font-size:20px}
}

/* invitations: the day picker of the invite dialog, the rows of the lists */
.invite-month{margin:0 0 12px;padding:0;border:0}
.invite-month legend{padding:0;margin-bottom:6px}
.invite-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.invite-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border:1px solid var(--line);background:var(--card);cursor:pointer}
.invite-day>input+span{font:700 17px/1.1 var(--font-head)}
.invite-day input{margin:0}
.invite-day small{font-size:11px;color:var(--muted)}
.invite-day.is-busy{background-color:var(--chip);background-image:var(--hatch);border-color:var(--muted)}
.invite-day.is-part{background-image:var(--hatch),linear-gradient(to top,var(--chip) 50%,transparent 50%);background-size:100% 50%,auto;background-position:bottom;background-repeat:no-repeat}
.invite-day .invite-free{font-weight:600;color:var(--ink)}
/* a batch: how many of the people are busy that day, in words beside the hatch */
.invite-day .invite-count{padding:0 2px;text-align:center;line-height:1.15;color:var(--ink)}
.invite-names ul,.invite-skipped ul{margin:4px 0 12px;padding-left:20px}
.invite-skipped p{margin:0;font-weight:600}
.invite-day:has(input:checked){border-color:var(--ink);background-color:var(--chip);box-shadow:inset 0 0 0 1px var(--ink)}
/* the lists of invitations and responses: a card per row; a row that waits for your answer has the lime bar and «Ждёт ответа» */
.card-rows{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.card-rows>.card{align-items:flex-start;padding:14px 18px}
.card-rows>.needs-answer{padding-left:20px}
.card-rows>.response-row{display:block}
.invite-title,.response-title{color:var(--ink);font:700 19px/1.15 var(--font-head);text-transform:uppercase;text-decoration:none;overflow-wrap:anywhere}
.invite-title:hover,.response-title:hover{text-decoration:underline}
.invite-row .stack{flex:1;gap:4px;min-width:0}
.invite-row .facts{margin:4px 0 0}
.invite-row .actions{margin-top:6px}
.invite-row .actions .btn{min-height:34px;padding:4px 12px}
.stats-year{max-width:220px;margin-bottom:20px}
.stats-numbers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 12px}
.stats-numbers>div{padding:16px 18px;background:var(--card);border:1px solid var(--line)}
.stats-numbers dt{color:var(--muted);font:600 12px/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
.stats-numbers dd{margin:8px 0 0;font:700 36px/1 var(--font-head)}
.stats-money{display:block;overflow-wrap:normal}
.stats-money+.stats-money{font-size:20px}
.stats-notes,.stats-places{margin:0 0 16px;color:var(--muted)}
.stats-rows>li{flex-wrap:nowrap;align-items:flex-start}
.stats-rows .stack{gap:4px;min-width:0;flex:1}
.stats-title{color:var(--ink);font:700 19px/1.15 var(--font-head);text-transform:uppercase;text-decoration:none;overflow-wrap:anywhere}
.stats-title:hover{text-decoration:underline}
.stats-amount{font:700 20px/1.1 var(--font-head);white-space:nowrap}
/* the earnings tile takes two columns where five tiles do not fit in a row */
@media (max-width:1100px){.stats-numbers{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-numbers>div:last-child{grid-column:span 2}}
@media (max-width:820px){.stats-numbers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tag.is-waiting{border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
@media (max-width:640px){.invite-days{grid-template-columns:repeat(4,minmax(0,1fr))}}
.invite-page>.actions{margin-bottom:16px}
/* the invitee's answer on the invitation page: the lime bar beside «Ответить до» and the date, then the buttons */
.invite-answer{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.invite-answer>p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.invite-answer>p>b{font:700 22px/1.1 var(--font-head)}
.invite-panel.needs-answer{padding-left:16px}

/* ---------- #/welcome: the onboarding steps after sign-up (design CP7E signup) ---------- */
.welcome-line{margin:0 0 16px;color:var(--muted);font-size:14px}
.welcome{display:grid;grid-template-columns:220px minmax(0,1fr) 340px;gap:24px 32px;align-items:start}
.welcome-steps{position:sticky;top:calc(var(--topbar) + 16px);min-width:0}
.welcome-steps ol{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.welcome-steps li{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;color:var(--muted);font-weight:500;overflow-wrap:anywhere}
.welcome-steps li>span:last-child,.welcome-steps a{min-width:0}
.welcome-steps a{color:inherit}
.welcome-steps li.is-current{color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--lime)}
.welcome-num{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border:1px solid var(--line);font:700 13px/1 var(--font-text)}
.welcome-steps .is-current .welcome-num{border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
.welcome-steps .is-done .welcome-num{border-color:var(--btn);background:var(--btn);color:var(--btn-ink)}
.welcome-main{display:grid;gap:18px;min-width:0}
.welcome-main>.form-error{scroll-margin-top:calc(var(--topbar) + 16px)}
.welcome-main .page-title{font-size:clamp(28px,3.6vw,40px);overflow-wrap:anywhere}
.welcome-head .lead{margin-top:10px}
.welcome-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.welcome-actions .btn.primary{min-width:160px;border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
.welcome-later{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:15px}
.welcome-later a{color:var(--ink);text-underline-offset:3px}
.welcome-aside{position:sticky;top:calc(var(--topbar) + 16px);display:grid;gap:14px;align-content:start;min-width:0}
.welcome-aside h2{margin:0}
.welcome-empty{margin:0;padding:24px 18px;border:1px dashed var(--line)}
.welcome-jobs{display:grid;gap:6px;padding:16px 18px;background:var(--btn);color:var(--btn-ink);font-size:15px}
.welcome-jobs p{margin:0}
.welcome-note{display:grid;gap:12px;justify-items:start;padding:18px;border:1px dashed var(--line)}
.welcome-note p{margin:0}
.welcome-photo{display:flex;flex-wrap:wrap;gap:24px;align-items:start}
.welcome .two-col{align-items:start}
.welcome-publish{display:grid;gap:10px;justify-items:start;padding:16px 18px;border:1px solid var(--line);background:var(--card)}
.welcome-publish p{margin:0}
.welcome-publish .form-error{justify-self:stretch}
.welcome-after{margin:0;font-size:14px}
/* the specialities as chips: picked ones turn graphite with a check, the main one lime and says «основная» */
.chip-picker{display:grid;gap:16px}
.chip-hints{display:flex;flex-wrap:wrap;gap:4px 16px}
.chip-hints .hint{margin:0}
.chip-group{min-width:0;margin:0;padding:0;border:0}
.chip-group>legend{margin-bottom:8px;padding:0}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip-pick{position:relative;display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:40px;padding:6px 12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:15px;line-height:1.25;cursor:pointer;overflow-wrap:anywhere}
.chip-pick input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.chip-pick .icon{display:none;flex:none}
.chip-pick:hover{border-color:var(--strong)}
.chip-pick:has(input:checked){border-color:var(--btn);background:var(--btn);color:var(--btn-ink)}
.chip-pick:has(input:checked) .icon{display:inline-block}
.chip-pick.is-main:has(input:checked){border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
.chip-pick:has(input:disabled){opacity:.5;cursor:default}
.chip-pick:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.chip-main{font:700 11px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:1199px){
  .welcome{grid-template-columns:200px minmax(0,1fr)}
  .welcome-aside{grid-column:2;position:static}
}
@media (max-width:899px){
  .welcome{grid-template-columns:minmax(0,1fr)}
  .welcome-steps{position:static}
  .welcome-steps ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .welcome-aside{grid-column:auto}
}