/* Atlas — the visual system of mock 2 (docs/VIEW-DESIGN.md), light + dark. Colours and sizes are tokens here, nowhere else. */
/* Inter, served from this site (no Google Fonts: it can hang the first paint for many seconds). */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2-variations"); 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 {
  /* ---- the type scale, radii and motion of every screen (Vlad, 09.11.2026): change them here, nowhere else ---- */
  --fs-micro: 11px;    /* labels, keys */
  --fs-caption: 12px;  /* dates, counters, captions */
  --fs-body: 13px;     /* rows, buttons, chips, fields, menus */
  --fs-read: 15px;     /* text to read: descriptions, record texts, the agent's chat */
  --fs-title-s: 15px;  /* a section */
  --fs-title-m: 18px;  /* a page */
  --fs-title-w: 20px;  /* the title typed in a window («Новая запись»; mock 2: 20, a phone 18) */
  --fs-title-l: 24px;  /* a record */
  --r-xs: 6px;         /* small labels, keys */
  --r-sm: 10px;        /* fields, menu items */
  --r-md: 14px;        /* cards, sections, menus, popovers */
  --r-lg: 20px;        /* dialogs, sheets */
  --r-fab: 24px;       /* the round «Спросить AI» (48 px): half its size, so it grows into --r-lg without a jump */
  --glass-edge: color-mix(in srgb, #fff 55%, transparent); /* the thin light edge of the glass buttons */
  --r-full: 999px;     /* buttons, chips, toggles, «Спросить AI» */
}
@media (max-width: 860px) {
  :root { --fs-caption: 13px; --fs-body: 15px; --fs-read: 16px; --fs-title-s: 17px; --fs-title-m: 20px; --fs-title-w: 18px; --fs-title-l: 26px; }
}
:root {
  /* light */
  --frame: #EEEEF1;          /* app frame & sidebar */
  --base: #FAFAFB;            /* content card */
  --elev: #FFFFFF;                       /* popovers, modals */
  --elev2: #F3F3F5;
  --hover: rgb(120 120 135 / .12);
  --active: rgb(120 120 135 / .2);
  --group: #F3F3F5;           /* group header strip */
  --border: #DDDDE1;
  --border-soft: #E8E8EB;
  --text: #17171A;
  --text-2: #46464C;
  --text-3: #6A6A72;
  --text-4: #9A9AA3;
  --icon: #5A5A62;
  /* The brand colour is three numbers — LCH hue, chroma, lightness. An app sets its own in config.js (APP.accent,
     applied by core.js before the first paint); every accent shade below and further down derives from them. */
  --accent-h: 288; --accent-c: 59; --accent-l: 48;
  --accent: lch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-hover: lch(calc(var(--accent-l) + 6) var(--accent-c) var(--accent-h));
  --accent-soft: lch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.13);
  --accent-text: lch(calc(var(--accent-l) - 6) var(--accent-c) var(--accent-h));
  --accent-soft-2: lch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.24);
  --on-accent: #FFFFFF;
  --scrim: rgb(0 0 0 / .32);
  --scrim-modal: rgb(0 0 0 / .22); /* behind a window (mock 2 #modal-back) */
  /* colours of meaning are as soft as the brand colour (Vlad, 11.11.2026); dates keep their own contrast tokens */
  --red: lch(57% 46 28);
  --orange: lch(68% 46 62);
  --date-soon: var(--accent-text);
  --date-overdue: var(--accent-text);
  --yellow: lch(74% 50 88);
  --green: lch(62% 36 152);
  --blue: lch(62% 36 250);
  --purple: lch(60% 36 300);
  /* avatars: one lightness and chroma, the hue tells people apart (--ah from .av0….av7) */
  --av-bl: 89; --av-bc: 13; --av-tl: 38; --av-tc: 32;
  --row-h: 40px;
  --shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .08);
  --mono: "Berkeley Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --toast-shadow: 0 0 0 1px lch(85% 0 282 / .6), 0 6px 16px lch(0% 0 0 / .06), 0 18px 40px lch(0% 0 0 / .08);
  --border-focus: lch(80% 1 282); --focus-shadow: 0 1px 2px lch(0% 0 0 / .05), 0 2px 6px lch(0% 0 0 / .04);
  --focus-ring: lch(62% 1 282);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --frame: #070708; --base: #161619; --elev: #202024; --elev2: #222227;
    --hover: rgb(160 160 180 / .12); --active: rgb(160 160 180 / .2); --group: #222227;
    --border: #34343B; --border-soft: #29292E;
    --text: #F3F3F5; --text-2: #CDCDD3; --text-3: #9A9AA3; --text-4: #6C6C75; --icon: #9A9AA3;
    --date-soon: var(--accent-text); --date-overdue: var(--accent-text);
    --accent-soft: lch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.2); --accent-text: lch(calc(var(--accent-l) + 22) calc(var(--accent-c) * 0.76) var(--accent-h));
    --shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 8px 24px rgb(0 0 0 / .5);
    --red: lch(68% 42 28); --orange: lch(74% 42 62); --yellow: lch(80% 46 88); --green: lch(70% 34 152); --blue: lch(70% 34 250); --purple: lch(70% 34 300);
    --av-bl: 29; --av-bc: 15; --av-tl: 84; --av-tc: 22;
    --toast-shadow: 0 0 0 1px lch(100% 0 0 / .07), 0 8px 24px lch(0% 0 0 / .5);
    --border-focus: lch(24% 1 282); --focus-shadow: 0 1px 2px lch(0% 0 0 / .4), 0 2px 8px lch(0% 0 0 / .3); --focus-ring: lch(55% 1 282);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --red: lch(68% 42 28); --orange: lch(74% 42 62); --yellow: lch(80% 46 88); --green: lch(70% 34 152); --blue: lch(70% 34 250); --purple: lch(70% 34 300);
  --av-bl: 29; --av-bc: 15; --av-tl: 84; --av-tc: 22;
    --toast-shadow: 0 0 0 1px lch(100% 0 0 / .07), 0 8px 24px lch(0% 0 0 / .5);
    --border-focus: lch(24% 1 282); --focus-shadow: 0 1px 2px lch(0% 0 0 / .4), 0 2px 8px lch(0% 0 0 / .3); --focus-ring: lch(55% 1 282);
  --frame: #070708; --base: #161619; --elev: #202024; --elev2: #222227;
  --hover: rgb(160 160 180 / .12); --active: rgb(160 160 180 / .2); --group: #222227;
  --border: #34343B; --border-soft: #29292E;
  --text: #F3F3F5; --text-2: #CDCDD3; --text-3: #9A9AA3; --text-4: #6C6C75; --icon: #9A9AA3;
  --accent-soft: lch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.2); --accent-text: lch(calc(var(--accent-l) + 22) calc(var(--accent-c) * 0.76) var(--accent-h));
  --date-soon: var(--accent-text); --date-overdue: var(--accent-text);
  --shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 8px 24px rgb(0 0 0 / .5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* the document itself never scrolls or bounces: only #content and the panels scroll. Otherwise on iOS a swipe past
   the edge of the content goes to the document, the whole app bounces, and the next swipes stay with it until it settles. */
html, body { overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--frame);
  color: var(--text);
  font: 450 var(--fs-body)/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); }
b, strong { font-weight: 600; }
code { font-family: var(--mono); font-size: var(--fs-caption); background: var(--elev2); border-radius: var(--r-xs); padding: 1px 4px; }
/* ---------- frame ---------- */
/* side menu: the name + search / create on top and the person at the bottom stay; only the list between them scrolls */
/* Peek panel: own scroll, never taller than the window */
#peek-slot { display: flex; min-height: 0; }
#peek-slot:empty { display: none; }
/* ---------- controls ---------- */
.btn {
  /* round ends: the sides get half the height. The icon and the text stand on the button's middle as the line puts
     them: the 1.5px pushed down at the top set them ~1px low on a Mac (Vlad, 13.11.2026, «Детали») */
  height: 28px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--base); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: var(--fs-body); white-space: nowrap; box-shadow: 0 1px 1px lch(0% 0 0 / 0.03);
}
@media (hover: hover) {
  .btn:hover { background: var(--hover); }
}
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; box-shadow: none; }
@media (hover: hover) {
  .btn.primary:hover { background: var(--accent-hover); }
}
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-3); box-shadow: none; }
@media (hover: hover) {
  .btn.ghost:hover { background: var(--hover); color: var(--text); }
}
.btn.danger { color: var(--red); }
.btn svg, .btn .i { width: 15px; height: 15px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.kbd { font: 500 11px var(--mono); color: var(--text-4); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 0 4px; line-height: 16px; background: var(--base); }
.input, .textarea, .select {
  width: 100%; background: var(--base); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 9px; outline: none; transition: border-color 0.12s, box-shadow 0.12s;
}
/* focus: the same border a little darker (lighter in the dark), a light short shadow — no colour, no halo (Vlad, 09.11.2026) */
.input:focus, .textarea:focus, .select:focus { border-color: var(--border-focus); box-shadow: var(--focus-shadow); }
.textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
/* ---------- list ---------- */
.indent-1 { padding-left: 46px; }
.indent-2 { padding-left: 70px; }
.indent-3 { padding-left: 94px; }
.muted { color: var(--text-3); }
.faint { color: var(--text-4); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-full);
  border: 1px solid transparent; color: var(--text-2); font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; background: var(--elev2);
}
/* a round mark of a value (temperature, sharpness): the same 8 px dot in a chip, a menu, a group's head */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip.ball-us { color: var(--red); border-color: lch(50% 80 29 / 0.35); }
.chip.accent { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
/* A leading avatar always sits flush against the left edge of the chip */
.chip:has(> .avatar:first-child) { padding-left: 0; gap: 6px; }
.chip > .avatar:first-child { width: 22px; height: 22px; font-size: 10px; margin: 0; }
.avatar {
  width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0;
  background: lch(var(--av-bl) var(--av-bc) var(--ah, 282)); color: lch(var(--av-tl) var(--av-tc) var(--ah, 282));
}
/* Avatar colours (class from colorFor): pastel, the same lightness and chroma, eight hues */
.av0 { --ah: 288; }
.av1 { --ah: 152; }
.av2 { --ah: 62; }
.av3 { --ah: 28; }
.av4 { --ah: 318; }
.av5 { --ah: 240; }
.av6 { --ah: 92; }
.av7 { --ah: 205; }
/* Palette colours by name (class from tone()): set --c, which dots, SWOT marks and file badges paint with */
.t-red { --c: var(--red); }
.t-orange { --c: var(--orange); }
.t-yellow { --c: var(--yellow); }
.t-green { --c: var(--green); }
.t-blue { --c: var(--blue); }
.t-purple { --c: var(--purple); }
.t-text-3 { --c: var(--text-3); }
.t-text-4 { --c: var(--text-4); }
.dot[class*="t-"], .swot-mark { background: var(--c, var(--text-4)); }
/* Small helpers instead of style="" */
.spacer { flex: 1; }
.contents { display: contents; }
.note.mb { margin-bottom: 10px; }
.note.mt { margin-top: 8px; }
.warn.strong { font-weight: 500; }
.btn.ws-btn { padding: 0 6px; }
.btn.ws-new { border: 1px solid var(--border); background: var(--base); }
.fthumb.big { width: 64px; height: 64px; font-size: 14px; margin: 0 auto 12px; }
.login-alt { margin-top: 18px; font-size: var(--fs-caption); }
.login-card p b { color: var(--text); }
.login-card .input { font-family: inherit; }
.login-card .input.code-input { font-size: 20px; letter-spacing: 8px; height: 46px; }
.ico { width: 15px; height: 15px; flex: none; display: inline-block; vertical-align: -3px; }
.empty { padding: 90px 20px; text-align: center; color: var(--text-3); }
.empty h3 { color: var(--text); font-weight: 550; margin: 14px 0 4px; font-size: var(--fs-title-s); }
.empty svg, .empty .i { width: 32px; height: 32px; color: var(--text-4); }
/* ---------- case header ---------- */
.case-head { padding: 26px 30px 18px; border-bottom: 1px solid var(--border-soft); }
.case-head h1 { font-size: var(--fs-title-l); font-weight: 600; margin: 0 0 12px; letter-spacing: -0.012em; }
.props { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.goal { margin-top: 16px; display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; font-size: var(--fs-body); }
.goal .k { color: var(--text-3); }
.goal .v { color: var(--text-2); white-space: pre-wrap; }
/* ---------- peek panel ---------- */
.peek { width: 460px; flex: none; border-left: 1px solid var(--border-soft); background: var(--base); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; min-height: 0; }
.peek-head { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--border-soft); flex: none; }
.peek-body { padding: 18px; }
.peek-title { font-size: var(--fs-title-m); font-weight: 600; margin: 2px 0 16px; letter-spacing: -0.01em; outline: none; border-radius: var(--r-xs); }
@media (hover: hover) {
  .peek-title[contenteditable="true"]:hover { background: var(--hover); }
}
.fields { display: grid; grid-template-columns: 130px 1fr; gap: 2px 8px; align-items: center; margin-bottom: 18px; }
.fields .k { color: var(--text-3); font-size: var(--fs-body); padding: 4px 0; align-self: start; line-height: 22px; }
.fields .v { min-width: 0; }
.prop { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; flex-wrap: nowrap; }
.prop:has(.chip) { flex-wrap: wrap; }
@media (hover: hover) {
  .prop:hover { background: var(--hover); }
}
.prop.ro { cursor: default; }
@media (hover: hover) {
  .prop.ro:hover { background: transparent; }
}
.prop .placeholder { color: var(--text-4); }
.prop select, .prop input[type="date"], .prop input[type="text"], .prop input[type="email"] {
  background: transparent; border: none; outline: none; flex: 1; min-width: 0; width: auto; padding: 0; cursor: pointer;
}
.prop select option { background: var(--elev); color: var(--text); }
.prop textarea { background: transparent; border: none; outline: none; width: 100%; resize: none; padding: 0; line-height: 1.5; min-height: 22px; }
.body-md { color: var(--text-2); line-height: 1.5; font-size: var(--fs-read); }
.body-md h1, .body-md h2, .body-md h3 { color: var(--text); font-size: var(--fs-read); margin: 20px 0 8px; font-weight: 600; }
.body-md hr { border: none; border-top: 1px solid var(--border-soft); margin: 20px 0; }
.body-md p { margin: 0 0 12px; }
.body-md ul { margin: 0 0 8px; padding-left: 18px; }
.comment { display: flex; gap: 10px; padding: 8px 0; }
.comment .c-body { flex: 1; }
.comment .c-meta { color: var(--text-4); font-size: var(--fs-caption); }
.comment-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--base); box-shadow: 0 1px 2px lch(0% 0 0 / 0.03); }
.comment-box textarea { background: transparent; border: none; outline: none; resize: none; min-height: 40px; }
.comment-box .actions { display: flex; justify-content: flex-end; }
/* ---------- overlays ---------- */
/* A dialog never leaves the screen: head and buttons stay, the body scrolls. */
/* Shortcut keys: grey caps, per OS (kbdHtml) */
.keys { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.keys .kbd { min-width: 18px; text-align: center; }
.keys .then { font-size: var(--fs-micro); color: var(--text-4); margin: 0 3px; }
.keys-help { width: min(480px, calc(100vw - 32px)); }
.keys-help .modal-body { max-height: min(70vh, 560px); overflow-y: auto; }
.kh-group { font-size: var(--fs-micro); font-weight: 500; color: var(--text-4); margin: 14px 0 4px; }
.kh-group:first-child { margin-top: 0; }
.kh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; font-size: var(--fs-body); color: var(--text-2); }
/* Phones and tablets without a keyboard: no key hints */
@media (hover: none) and (pointer: coarse) {
  .popover.menu .m-kbd { display: none; }
}
/* notices: views/overlays.css (one style on the glass of the theme; the kind told by the icon's shape) */
@media (max-width: 860px) {
  /* a phone: from the top, under the camera cut-out, like the Dynamic Island; a swipe up closes */
}
/* ---------- login ---------- */
/* 100dvh: on a phone 100vh is taller than the visible screen, and the sign-in screen must never scroll */
.login { position: relative; overflow: hidden; height: 100vh; height: 100dvh; display: grid; place-items: center; align-content: center; padding: 16px; background: var(--frame); }
.login-card { position: relative; z-index: 1; width: min(360px, 100%); text-align: center; }
/* the sign-in animation (login-anim.js) stands where the logo and the app name were: either one object above the card
   or a background behind it. Its colours come from the theme: three hidden probes carry them to the canvas. */
.login-anim { display: block; }
.login-anim.obj { width: min(300px, 72vw); height: min(300px, 72vw); margin-bottom: 8px; touch-action: none; cursor: grab; }
.login-anim.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-probe { display: none; }
.login-probe.p-text { color: var(--text); }
.login-probe.p-accent { color: var(--accent); }
.login-probe.p-frame { color: var(--frame); }
.login-card .ws-logo { width: 44px; height: 44px; font-size: 24px; border-radius: var(--r-xs); margin: 0 auto 20px; }
.login-card h1 { font-size: var(--fs-title-m); font-weight: 600; margin: 0 0 6px; letter-spacing: -0.012em; }
.login-card p { color: var(--text-3); margin: 0 0 24px; }
.login-card .input { height: 40px; margin-bottom: 10px; text-align: center; font-size: var(--fs-body); }
.login-card .btn { width: 100%; height: 40px; justify-content: center; font-size: var(--fs-body); }
/* ---------- tables ---------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { text-align: left; font-weight: 500; color: var(--text-4); font-size: var(--fs-caption); padding: 0 18px; height: 36px; border-bottom: 1px solid var(--border-soft); }
.table td { padding: 0 18px; height: 48px; border-bottom: 1px solid var(--border-soft); }
@media (hover: hover) {
  .table tr:hover td { background: var(--hover); }
}
.token-box { font: 500 12.5px var(--mono); background: var(--elev2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; word-break: break-all; margin: 10px 0; user-select: all; }
.note { color: var(--text-3); font-size: var(--fs-body); line-height: 1.5; }
.warn { color: var(--orange); }
.spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--text-3); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
.loading { display: flex; justify-content: center; padding: 60px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(0.985); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  /* the menu icon on the same left line as the text of the page (16pt from the edge), the page name close after it;
     the touch area stays 44pt through an invisible frame */
  .peek { position: fixed; inset: 0; width: 100%; z-index: 45; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  /* iPhone notch / home bar when installed as an app */
  .case-head { padding: 20px 16px 14px; }
  .goal { grid-template-columns: 1fr; gap: 2px; }
  .goal .v { margin-bottom: 8px; }
  .indent-1 { padding-left: 30px; }
  .indent-2 { padding-left: 48px; }
  .indent-3 { padding-left: 66px; }
  .table .hide-m { display: none; }
  .table th, .table td { padding: 0 12px; }
}
/* ---------- full record page (Linear issue layout) ---------- */
/* «Детали»: its baseline on the baseline of the first line of the record's title (the panel and the page start at
 * the same height; 22px is measured for the title's 24px / 1.3 and this 12.5px / 16px), a little to the right of
 * the values under it, with a thin line under it — what follows is additional content (Vlad, 07.11.2026) */
.role-chip { font: 500 var(--fs-micro) Inter, sans-serif; color: var(--accent-text); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--r-full); }
.desc { font-size: var(--fs-read); line-height: 1.5; color: var(--text); }
.desc.empty { font-size: var(--fs-body); }
.desc p { margin: 0 0 12px; }
.desc-edit { margin: 6px 0 0 -8px; color: var(--text-3); }
.desc-editor { display: grid; gap: 8px; }
.desc-editor textarea { width: 100%; box-sizing: border-box; min-height: 160px; font: inherit; font-size: var(--fs-read); line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--base); color: var(--text); resize: vertical; }
.desc-editor .input { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--base); color: var(--text); font: inherit; }
.desc-editor .actions { display: flex; justify-content: flex-end; gap: 6px; }
.tblock { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.tblock:first-child { margin-top: 18px; }
.tblock-k { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-weight: 500; font-size: var(--fs-body); padding-top: 3px; }
.tblock-v { font-size: var(--fs-read); line-height: 1.5; }
.tblock-v textarea { width: 100%; border: none; outline: none; background: transparent; color: var(--text); font: inherit; resize: none; padding: 3px 6px; margin-left: -6px; border-radius: var(--r-sm); line-height: 1.5; }
/* text is edited in place: no background while the cursor is in it either (Vlad, 08.11.2026) */
.tblock-v textarea:focus { background: transparent; }
@media (hover: hover) {
  .tblock-v textarea:hover { background: var(--hover); }
}
.subs { border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: hidden; }
.subs .row { margin: 0; border-radius: 0; }
.sub-add { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 38px; color: var(--text-3); }
.sub-add input { flex: 1; border: none; outline: none; background: transparent; color: var(--text); font: inherit; }
.approve { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 16px 0 0; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.activity-title { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.composer-bar .spacer, .approve .spacer, .section-title .spacer { flex: 1; }
.page-foot { max-width: 900px; padding: 0 30px 40px; box-sizing: border-box; }
@media (max-width: 860px) {
  .tblock { grid-template-columns: 1fr; gap: 2px; }
  .page-foot { padding: 0 16px 30px; }
  .hide-m { display: none; }
}
.sub-add > svg, .sub-add > .i { width: 15px; height: 15px; flex: none; }
.desc, .tblock-v, .cm-body { overflow-wrap: anywhere; }
.warn-chip { color: var(--orange); border-style: dashed; }
/* ---------- task page v2 ---------- */
.rich { position: relative; }
.rich-body { font-size: var(--fs-read); line-height: 1.5; outline: none; min-height: 28px; border-radius: var(--r-sm); padding: 4px 8px; margin: 0 -8px; }
@media (hover: hover) {
  .rich.editable .rich-body:hover { background: var(--hover); }
}
.rich.editable .rich-body:focus { background: transparent; }
.rich-body:empty::before { content: attr(data-placeholder); color: var(--text-4); }
.rich-body p { margin: 0 0 12px; }
.rich-body ul, .rich-body ol { margin: 0 0 12px; padding-left: 22px; }
.rich-body h2 { font-size: var(--fs-title-s); margin: 20px 0 8px; }
.rich-body h3 { font-size: var(--fs-read); margin: 20px 0 8px; }
.rich-body blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-2); }
.rich-body a { color: var(--accent-text); }
.rich.saving .rich-body { opacity: .6; }
.tblock { display: block; padding: 10px 0 2px; border-top: none; }
.tblock:first-child { margin-top: 10px; }
.tblock-k { padding: 0; margin-bottom: 2px; font-size: var(--fs-caption); }
.tblock-v { font-size: var(--fs-read); }
.tblock-v textarea { display: block; width: calc(100% + 16px); box-sizing: border-box; margin: 0 -8px; padding: 4px 8px; font-size: var(--fs-read); line-height: 1.5; overflow: hidden; }
.tblock-v p { margin: 0 0 12px; }
.tblock-v > :last-child { margin-bottom: 0; }
.file-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--text-3); }
.history { margin-top: 6px; }
.history > .btn { color: var(--text-3); padding-left: 6px; }
.hist-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sev { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--text-4); }
.sev.critical { background: var(--red); }
.sev.important { background: var(--orange); }
.reject { width: 100%; display: grid; gap: 6px; }
.reject textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; background: var(--base); color: var(--text); }
.criteria { display: flex; gap: 8px; padding: 8px 10px; background: var(--frame); border-radius: var(--r-sm); margin-bottom: 10px; font-size: var(--fs-body); }
.hours { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.hours input { width: 80px; height: 28px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 8px; background: var(--base); color: var(--text); font: inherit; }
.goal .short { outline: none; border-radius: var(--r-xs); }
@media (hover: hover) {
  .goal .short[contenteditable]:hover { background: var(--hover); }
}
.goal .more { height: 22px; padding: 0 6px; color: var(--text-3); font-size: var(--fs-caption); }
.goal .full { margin-top: 6px; color: var(--text-2); }
[hidden] { display: none !important; }
.chip.ball-us { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 8%, var(--base)); font-weight: 550; }
.chip.ball-them, .chip.ball-court, .chip.ball-authority { color: var(--text-3); }
.chip.ball-none { color: var(--text-4); border-style: dashed; }
.chip.ok-chip { color: var(--green); }
.dir-row { padding-left: 22px; }
.date.soon { color: var(--orange); }
.mv { display: flex; }
.mv.theirs { justify-content: flex-end; }
.mv.internal { justify-content: center; }
.mv { flex-direction: column; }
.mv.ours { align-items: flex-start; }
.mv.theirs { align-items: flex-end; }
.mv.internal { align-items: center; }
.outcome { margin: 4px 0 16px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--orange) 9%, var(--base)); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); }
.outcome-q { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; color: var(--orange); }
.outcome-a { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px; align-items: start; }
.outcome-a textarea { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 10px; font: inherit; background: var(--base); color: var(--text); resize: vertical; }
@media (max-width: 860px) {
  .outcome-a { grid-template-columns: 1fr; }
}
/* files */
.files-box { margin-top: 14px; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.fcard { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--base); cursor: pointer; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) {
  .fcard:hover { border-color: var(--text-4); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
}
.fcard.just { animation: pop .25s ease-out; }
.fthumb { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; font: 700 10px Inter, sans-serif; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--base)); background-size: cover; background-position: center; }
.fthumb.mini { width: 26px; height: 26px; font-size: 8px; }
.fmeta { min-width: 0; flex: 1; }
.fname { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsub { font-size: var(--fs-caption); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdel { opacity: 0; border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: var(--r-full); }
.fdel svg, .fdel .i { width: 14px; height: 14px; }
@media (hover: hover) {
  .fcard:hover .fdel { opacity: 1; }
}
@media (hover: hover) {
  .fdel:hover { background: var(--hover); color: var(--red); }
}
.fbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; display: none; }
.fbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.fcard.uploading { cursor: default; }
.fcard.uploading .fbar { display: block; background: var(--border-soft); }
.fcard.uploading .fmeta { opacity: .7; }
.fcard.failed { border-color: var(--red); }
.fcard.failed .fsub { color: var(--red); }
#drop-overlay { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--accent) 10%, transparent); backdrop-filter: blur(2px); display: grid; place-items: center; pointer-events: none; }
.drop-box { border: 2px dashed var(--accent); border-radius: var(--r-lg); background: var(--elev); padding: 34px 44px; text-align: center; box-shadow: var(--shadow); color: var(--accent-text); }
.drop-box svg, .drop-box .i { width: 28px; height: 28px; }
.drop-t { font-weight: 600; font-size: var(--fs-title-s); margin: 8px 0 4px; color: var(--text); }
/* text size (profile setting): scales the content, not the window */
/* text size: applyTextSize() (core.js) scales the --fs-* tokens; the layout does not change */
/* no double-tap zoom; pinch zoom stays */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 860px) {
  /* mobile menu: everything behind it is dimmed and blurred; tap outside closes */
  /* behind the open side menu the page is dimmed and softly blurred — the same as behind a sheet from the bottom */
  /* iOS zooms into fields with text smaller than 16px — keep every field at 16px */
  /* (fields meant to be larger — titles — keep their own size) */
  /* fields have the size of the text around them; iPhone does not zoom in on them: the page asks it not to (core.js) */
  input, select, textarea { font-size: var(--fs-body); }
}
/* settings page */
.set-act { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ok-text { color: var(--green); font-weight: 500; }
.switch { appearance: none; width: 28px; height: 16px; border-radius: var(--r-full); background: var(--border); position: relative; cursor: pointer; flex: none; transition: background-color var(--t-fast) var(--ease); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform var(--t-fast) var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(12px); }
.btn.active-foot { background: var(--active); }
/* Icons never grow: every svg and .i in headers, rows, chips and sections has a fixed size */
.group-head svg, .group-head .i, .section-title svg, .section-title .i, .row svg, .row .i, .chip svg, .chip .i, .who svg, .who .i, .tblock-k svg, .tblock-k .i, .file-strip svg, .file-strip .i, .thread-head svg, .thread-head .i, .btn svg, .btn .i { width: 15px; height: 15px; flex: none; }
@media (max-width: 860px) {
  /* long group titles wrap instead of being cut */
}
@media (max-width: 860px) {
  /* the title takes the free space; the spacer next to it does not split it in half */
  /* top bar: buttons show only icons, the path gets the room */
}
/* ---------- file viewer ---------- */
body.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 100; --viewer-ground: #111114; background: var(--viewer-ground); color: #eee; display: flex; flex-direction: column; animation: fade .12s; --text: #ececf1; --text-2: #c9c9d1; --text-3: #9a9aa5; }
.vw-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid rgba(255,255,255,.08); }
.vw-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vw-title { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; color: #fff; }
.vw-name .faint { color: #9a9aa5; font-size: var(--fs-caption); }
.vw-top .spacer { flex: 1; }
.vw-top .btn { color: #eee; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.vw-top .btn.ghost { background: transparent; border-color: transparent; }
.vw-body { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vw-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: none; border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.vw-nav .i, .vw-nav svg { width: 22px; height: 22px; }
.vw-nav[hidden] { display: none; }
@media (hover: hover) {
  .vw-nav:hover { background: rgba(255,255,255,.16); }
}
.vw-nav.prev { left: 12px; }
.vw-nav.next { right: 12px; }
.vw-loading { display: grid; place-items: center; }
.vw-msg { color: #c9c9d1; text-align: center; max-width: 420px; padding: 20px; line-height: 1.5; }
.vw-img { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.vw-img.zoomed { cursor: grab; }
.vw-img img { max-width: 94%; max-height: 94%; object-fit: contain; transform-origin: center; transition: transform .05s; user-select: none; -webkit-user-drag: none; }
.vw-pdf { width: 100%; height: 100%; display: flex; flex-direction: column; }
.vw-pdf-bar { display: flex; align-items: center; gap: 6px; padding: 6px 14px; color: #c9c9d1; }
.vw-pdf-bar .btn { color: #eee; min-width: 32px; font-size: 18px; }
.vw-zoom { min-width: 48px; text-align: center; }
.vw-pages { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 12px 40px; }
.vw-pg { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.4); flex: none; }
.vw-pg canvas { display: block; }
.vw-audio { width: min(640px, 92vw); }
.au-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 18px; }
.au-wave { width: 100%; height: 90px; cursor: pointer; display: block; }
.au-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.au-play { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 16px; cursor: pointer; }
.au-time { font-variant-numeric: tabular-nums; color: #c9c9d1; }
.au-ctrl .spacer { flex: 1; }
.au-rate { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #c9c9d1; border-radius: var(--r-sm); padding: 4px 9px; cursor: pointer; }
.au-rate.on { background: rgba(255,255,255,.14); color: #fff; }
.vw-video { max-width: 94%; max-height: 92%; border-radius: var(--r-sm); background: #000; }
.vw-text, .vw-doc, .vw-sheet-wrap { width: 100%; height: 100%; overflow: auto; }
.vw-text pre { margin: 0 auto; max-width: 980px; padding: 20px 24px 60px; white-space: pre-wrap; word-break: break-word; font: 13px/1.6 var(--mono); color: #e6e6ea; }
.vw-doc { padding: 20px 12px 60px; }
.paper { max-width: 820px; margin: 0 auto; background: #fff; color: #1b1c1f; padding: 48px 56px; border-radius: var(--r-xs); box-shadow: 0 2px 16px rgba(0,0,0,.4); line-height: 1.5; font-size: var(--fs-read); --text: #1b1c1f; --text-2: #3b3c40; }
.paper table { border-collapse: collapse; margin: 10px 0; }
.paper td, .paper th { border: 1px solid #ccc; padding: 4px 8px; }
.paper img { max-width: 100%; }
.vw-sheet-wrap { display: flex; flex-direction: column; }
.vw-tabs { display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto; flex: none; }
.vw-tabs button { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #c9c9d1; border-radius: var(--r-full); padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.vw-tabs button.on { background: rgba(255,255,255,.14); color: #fff; }
.vw-sheet { flex: 1; overflow: auto; padding: 8px 12px 40px; width: 100%; box-sizing: border-box; }
.vw-sheet table { border-collapse: collapse; background: #fff; color: #1b1c1f; font-size: var(--fs-body); }
.vw-sheet td, .vw-sheet th { border: 1px solid #d5d5da; padding: 4px 8px; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.vw-sheet th { background: #f2f2f5; position: sticky; top: 0; }
@media (max-width: 860px) {
  .vw-nav { display: none; }
  .paper { padding: 22px 18px; }
}
/* ---------- lists on phones: a small card of up to 3 lines ---------- */
@media (max-width: 860px) {
  .audit-row .ip { display: none; }
  /* parts opened under their parent («2/5»): one step to the right per level */
}
/* ---------- motion (Linear-like: short, eased, never in the way) ---------- */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.4, 0, .2, 1); --t-fast: 120ms; --t: 180ms; --t-slow: 240ms;
  /* a spring for sheets: out quickly, a touch past the end, settles (CSS linear() — Safari 17.2+, Chrome 113+) */
  --spring: linear(0, .0122 1.2%, .0499 2.5%, .1928 5.2%, .7158 13.3%, .8768 17%, .9634 20.6%, 1.0091 24.6%, 1.0257 28.9%, 1.0234 34.2%, 1.0049 44.6%, .9995 59.8%, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes fade-out { to { opacity: 0; transform: translateY(4px); } }
/* page change: the content rises in */
#content.enter > * { animation: rise var(--t-slow) var(--ease) both; }
/* a record whose title came from the row (core.js morphTitle): the rest only fades in, nothing else moves */
#content.enter.morph > * { animation-name: fade; }
/* list rows appear one after another (first 16 rows) */
#content.enter > .row, #content.enter > .group-head { animation: rise var(--t-slow) var(--ease) both; }
#content.enter > :nth-child(1) { animation-delay: 0ms; }
#content.enter > :nth-child(2) { animation-delay: 14ms; }
#content.enter > :nth-child(3) { animation-delay: 28ms; }
#content.enter > :nth-child(4) { animation-delay: 42ms; }
#content.enter > :nth-child(5) { animation-delay: 56ms; }
#content.enter > :nth-child(6) { animation-delay: 70ms; }
#content.enter > :nth-child(7) { animation-delay: 84ms; }
#content.enter > :nth-child(8) { animation-delay: 98ms; }
#content.enter > :nth-child(9) { animation-delay: 112ms; }
#content.enter > :nth-child(10) { animation-delay: 126ms; }
#content.enter > :nth-child(11) { animation-delay: 140ms; }
#content.enter > :nth-child(12) { animation-delay: 154ms; }
#content.enter > :nth-child(13) { animation-delay: 168ms; }
#content.enter > :nth-child(14) { animation-delay: 182ms; }
#content.enter > :nth-child(15) { animation-delay: 196ms; }
#content.enter > :nth-child(16) { animation-delay: 210ms; }
.row, .btn, .tab, .chip, .nav-item, .fcard, .opt { transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 860px) {
  @keyframes toast-drop { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
}
.popover { animation: pop-in var(--t) var(--ease); }
/* out of its button (transform-origin, core.js placePop) */
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } }
.viewer { animation: fade var(--t) var(--ease); }
.vw-body > * { animation: rise var(--t) var(--ease); }
@media (max-width: 860px) {
  /* dialogs open as bottom sheets on phones */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* log entry details */
.log-d { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; font-size: var(--fs-body); }
.log-d .k { color: var(--text-3); }
.log-d .v { min-width: 0; overflow-wrap: anywhere; }
.log-ch { display: grid; gap: 4px; }
.log-ch div { padding: 6px 8px; background: var(--frame); border-radius: var(--r-xs); }
.log-ch s { color: var(--text-3); }
/* ======================================================================
   Shared parts (ui.js) — rows, sections, views, AI badge, details, tooltip.
   See admin/UI-RULES.md before adding anything page-specific.
   ====================================================================== */
/* AI check badge: «AI» + a drawn status icon in a circle */
.ai { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 4px 0 7px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--base); flex: none; cursor: default; }
.ai b { font: 650 10.5px/1 Inter, sans-serif; letter-spacing: .02em; color: var(--text-2); }
.ai svg, .ai .i { width: 15px !important; height: 15px !important; flex: none; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
/* tooltip (hover on a computer, tap on a phone) */
#tip { position: fixed; z-index: 1000; max-width: 280px; padding: 6px 9px; border-radius: var(--r-xs); background: var(--text); color: var(--base); font-size: var(--fs-caption); line-height: 1.35; pointer-events: none; box-shadow: var(--shadow); animation: tip-in .12s var(--ease); }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } }
/* section: title, count, view switch, actions, fold */
/* record page: «Детали» panel */
.details-btn.on { background: var(--active); color: var(--text); }
.person-extras > div { margin-top: 14px; }
@media (max-width: 860px) {
  .details-sheet .fields { grid-template-columns: 110px 1fr; }
}
/* computer: one line — the title always keeps at least ~40% of the row, extra chips give way first */
/* a row that does not fit (fitRows in ui.js): less important chips become icons, then step aside */
/* only the top-level heading of a block sticks while scrolling; sub-headings (status groups, directions) scroll away */
/* ---- icons: a CSS mask painted with the text colour (sizes are set next to the svg rules above) */
.i { display: inline-block; width: 15px; height: 15px; flex: none; vertical-align: -2px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
/* one icon family (Vlad, 11.11.2026): the shape says which status it is; the brand colour marks «in work», «checked» and
   «done», everything else is grey. Red is kept for alarm only: an urgent priority, a critical check, an error */
.st-todo, .st-wait, .st-cancel { color: var(--text-4); }
.st-progress, .st-review, .st-done { color: var(--accent); }
.st-later, .st-think, .st-pause, .st-moved, .st-warn, .st-info { color: var(--text-4); }
.st-quarter, .st-picked, .st-failed, .st-sent, .st-got, .st-ours { color: var(--accent); }
.st-theirs, .st-common { color: var(--text-4); }
.prio-u, .lvl-red { color: var(--red); }
.ai .i { width: 15px; height: 15px; }
/* activity: «Добавить» on the right */
/* menus: a name and a hint under it — nothing is cut */
/* record header: «X создал задачу для Y», then the value chips */
.chip.editable { cursor: pointer; }
@media (hover: hover) {
  .chip.editable:hover { background: var(--hover); border-color: var(--border); }
}
/* A chip with only an icon is a circle (repeat, thought type, key event, temperature, priority) */
.chip.round { width: 24px; height: 24px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; flex: none; font-size: 0; }
.chip.round .dot { width: 9px; height: 9px; }
.date-pick { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip[data-field] { position: relative; }
.pay { margin-top: 14px; }
.pay a { color: var(--accent-text); text-decoration: none; }
/* «Детали»: rare fields folded */
/* create dialog: title length hint */
.title-count { text-align: right; font-size: var(--fs-micro); color: var(--text-4); margin: -6px 2px 6px; min-height: 14px; }
.title-count.over { color: var(--orange); }
/* ---- moves: the side is visible in a list too (ours — blue, theirs — grey) */
/* chat: no steps — every bubble of a side sits at the same edge; the sender is named once per run */
.mv.cont { margin-top: -6px; }
/* ---- sub-tasks inline (like Linear «+ Add sub-issues») */
.subs-inline { margin-top: 14px; }
.subs-head { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 550; font-size: var(--fs-body); margin-bottom: 4px; }
.subs-rows .row { margin: 0; border-radius: var(--r-sm); }
.sub-add-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-body); padding: 6px 4px; cursor: pointer; border-radius: var(--r-full); }
@media (hover: hover) {
  .sub-add-btn:hover { color: var(--text); background: var(--hover); }
}
.sub-add-btn .i { width: 13px !important; height: 13px !important; }
.sub-add { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: var(--r-sm); background: var(--hover); }
/* ---- comment threads (one level of replies, like Linear) */
/* an app's action on a comment (Family Office: mark it «Решение»): quiet on the right, shown on hover; always on touch */
/* a comment being changed: the same editor as a new comment, «Отмена» / «Сохранить» under it */
/* with a chip and an action the head may not fit a phone line: the name and the time never break, the chip goes under */
/* ---- file card: «⋮» menu instead of a delete cross */
.fmenu { border: none; background: transparent; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: var(--r-sm); flex: none; align-self: center; }
.fmenu .i { width: 15px !important; height: 15px !important; }
@media (hover: hover) {
  .fmenu:hover { background: var(--hover); color: var(--text); }
}
/* ---- formatting bar on selection (like Linear) */
.rich-bar { position: fixed; z-index: 900; display: flex; align-items: center; gap: 1px; padding: 4px; background: var(--elev); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); animation: tip-in .12s var(--ease); }
.rich-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 30px; height: 30px; padding: 0 6px; border: none; background: transparent; color: var(--text-2); border-radius: var(--r-full); cursor: pointer; }
@media (hover: hover) {
  .rich-bar button:hover { background: var(--hover); color: var(--text); }
}
.rich-bar button.on { background: var(--active); color: var(--text); }
.rich-bar .i { width: 16px; height: 16px; }
.rich-bar button.wide .i:last-child { width: 11px; height: 11px; opacity: .6; }
.rich-bar .aa { font: 500 14px Inter, sans-serif; color: var(--text-3); }
.rich-bar button[data-c="text"] { border-right: 1px solid var(--border-soft); border-radius: 7px 0 0 7px; margin-right: 3px; padding-right: 8px; }
.rich-body h1 { font-size: var(--fs-title-m); margin: 24px 0 8px; }
.rich-body code { font: 12.5px var(--mono); background: var(--hover); padding: 1px 4px; border-radius: var(--r-xs); }
.rich-body pre { font: 12.5px/1.55 var(--mono); background: var(--frame); padding: 10px 12px; border-radius: var(--r-sm); white-space: pre-wrap; margin: 0 0 12px; }
/* comment box = the same editor */
/* ---- own dropdown (instead of <select>) and switch (instead of a checkbox) — made by enhanceControls() in ui.js */
.sbox { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; height: 30px; padding: 0 8px 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--base); color: var(--text); font: inherit; font-size: var(--fs-body); cursor: pointer; min-width: 0; max-width: 100%; text-align: left; }
@media (hover: hover) {
  .sbox:hover { background: var(--hover); }
}
.sbox.wide { width: 100%; }
.sbox:disabled { cursor: default; opacity: .6; }
.sbox-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sbox > .i { width: 12px !important; height: 12px !important; opacity: .55; flex: none; }
.prop .sbox { border-color: transparent; background: transparent; width: 100%; padding-left: 2px; height: 26px; }
@media (hover: hover) {
  .prop .sbox:hover { background: var(--hover); }
}
/* Safari draws a <button> its own way (appearance, margins, line height): the switch resets all of it */
.tgl { -webkit-appearance: none; appearance: none; display: inline-block; vertical-align: middle; position: relative; box-sizing: border-box; width: 34px; height: 20px; min-width: 34px; min-height: 20px; margin: 0; flex: none; padding: 0; border: none; border-radius: var(--r-full); font-size: 0; line-height: 0; background: var(--border); cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.tgl i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-fast) var(--ease); }
.tgl.on { background: var(--accent); }
.tgl.on i { transform: translateX(14px); }
.tgl:disabled { opacity: .5; cursor: default; }
/* a small switch inside a chip or a row of «Детали» (a yes/no field): the chip itself is what is pressed */
.tgl.sm { width: 26px; height: 16px; min-width: 26px; min-height: 16px; pointer-events: none; }
.tgl.sm i { width: 12px; height: 12px; }
.tgl.sm.on i { transform: translateX(10px); }
.flag-chip .tgl.sm { margin-left: 2px; }
/* ---- user menu (avatar in the left menu) */
/* ---------- menu (Linear style): icon · label · shortcut, one line per item ---------- */
/* the calendar: views/controls.css */
.sbox.date-box > .i { width: 13px !important; height: 13px !important; }
/* ---------- header chips: always one line; what does not fit scrolls sideways ---------- */
/* ---------- «Детали»: labels take only what they need, values get the rest ---------- */
.issue-side .fields, .more-fields > .fields, .details-sheet .fields, .modal .fields { grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; }
.issue-side .fields .k, .more-fields .fields .k, .details-sheet .fields .k, .modal .fields .k { max-width: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- comments as cards (Linear): a comment and its replies in one lighter card, reply box at the bottom ---------- */
/* reply box: avatar · text · (clip, send) — the buttons stay on the right and go down as the text grows */
.send-btn { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; border: 0; background: var(--elev2); color: var(--text-2); }
.cf-grid { display: grid; grid-template-columns: max-content 1fr 1fr; gap: 6px 14px; font-size: var(--fs-body); }
.cf-grid b { font-weight: 550; color: var(--text-3); font-size: var(--fs-caption); }
.cf-grid .k { color: var(--text-3); }
/* focus ring only for the keyboard, never after a mouse click or tap */
button:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; }
/* nothing that is pressed or only explains is selected as text (Vlad, 12.11.2026): buttons, links, menu items and their
   hints, tabs, plates, headings of parts, tooltips. The text a person writes or reads (records, comments, the agent's
   answers, fields) stays selectable — links inside it too. */
button, a, [role^="menuitem"], [role="tab"], .opt, .opt *, .nav-item, .nav-section, .tab, .vbtn, .seg, .chip, .pchip, .plate,
.sec-head, .group-head, .dsec, .dcap, .m-head, .m-kbd, .hint, #tip, .toast, .crumbs, .set-row > div:first-child, .agent-section, .agent-row {
  -webkit-user-select: none; user-select: none;
}
.rich-body a, .body-md a, .agent-md a, .desc a, .cm-body a, input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.btn.pop-open { background: var(--hover); }
/* ---------- new sub-task: a card like Linear (title, description, chips, files, Отмена / Создать) ---------- */
.sub-new { margin: 8px 0 4px; padding: 10px 12px 8px; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--elev); box-shadow: 0 1px 2px lch(0% 0 0 / 0.04); }
.sub-new-top { display: flex; align-items: center; gap: 8px; }
.sub-new-title { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-body); font-weight: 550; padding: 4px 0; }
.sub-new .rich { padding: 2px 0 0 23px; }
.sub-new .rich-body { min-height: 24px; font-size: var(--fs-read); }
.sub-new .rich.editable .rich-body:focus { background: transparent; box-shadow: none; }
@media (hover: hover) {
  .sub-new .rich.editable .rich-body:hover { background: transparent; box-shadow: none; }
}
.sub-new .composer-files { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 0 23px; }
.sub-new .composer-files:empty { display: none; }
.sub-new-bar { display: flex; align-items: center; gap: 6px; padding-top: 8px; }
.sub-new-bar .who { margin: 0; flex: 1 1 auto; min-width: 0; }
.sub-new-bar .spacer { display: none; }
.sub-new-bar .btn.ic { width: 30px; padding: 0; justify-content: center; color: var(--text-3); }
@media (max-width: 860px) {
  .sub-new-bar { flex-wrap: wrap; }
  .sub-new-bar .who { flex-basis: 100%; }
  .sub-new-bar [data-attach] { margin-left: auto; }
}
/* «+ Файл» at the end of the files */
.file-grid:not(:has(.fcard)) { display: flex; }
.fadd { display: inline-flex; align-items: center; justify-content: center; align-self: center; justify-self: start; gap: 6px; min-height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-full); background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-body); cursor: pointer; }
@media (hover: hover) {
  .fadd:hover { background: var(--hover); color: var(--text-2); }
}
/* the avatar always sits flush against the left edge of its chip — also in list rows on a phone, where row chips
   get their own (smaller) padding; an avatar-only chip hugs the avatar */
/* ---------- create dialog: compact ↔ big (like Linear) ---------- */
/* the big form sits in the middle: the same gap above and below */
/* ---------- priority first (like Linear): a small icon before the number and the status ---------- */
/* priority and status icons sit on one line: no text line box or baseline shift around either icon */
/* ---------- long texts on a phone: cut softly, never run off the screen ---------- */
/* a long word (a file name, a link) wraps instead of pushing the page wider */
.feed, .ev, .cm-body, .body-md, .rich-body, .note, .tblock-v { overflow-wrap: anywhere; }
/* chips never grow wider than their place; the name inside ends with «…» */
.chip { max-width: 100%; }
.chip > span:not(.avatar):not(.dot), .fields .v .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  /* top bar: the parent and the current page only; each keeps a readable part and ends with «…» */
  .chip { max-width: min(240px, 72vw); }
}
/* section heads on a phone: the title stays one line («…» if long), buttons become icons (their names are in the tooltip) */
/* list tabs on a phone: one line that scrolls, the cut edge fades */
@media (max-width: 860px) {
  /* the edge that has more tabs fades into the page (darker on the dark theme, lighter on the light one) */
}
/* ---------- «Распределение» ---------- */
/* ---- Atlas additions ---- */
.chip.empty-chip { color: var(--text-3); }
/* «Сегодня»: what waits to be sorted — a tap opens that list */
/* the head and the foot of the side menu never shrink; the list between them scrolls */
/* «- [ ] дело» inside a text: a plain small checkbox, not a switch */
/* «- [ ] дело» inside a text: a small box drawn by the app itself (not the system checkbox — iPhone and Android draw
   theirs differently, so it sat crooked on one of them). Sized in em: it follows the size of the text and sits on the
   middle of the first line. A loose list wraps the item in <p> — the box is found there too, and no bullet is shown. */
.rich-body li:has(> input.task-cb), .body-md li:has(> input.task-cb),
.rich-body li:has(> p:first-child > input.task-cb), .body-md li:has(> p:first-child > input.task-cb) { list-style: none; margin-left: -20px;
  /* a long item wraps under its text, not under the box */
  padding-left: 1.2em; text-indent: -1.2em; }
input.task-cb {
  -webkit-appearance: none; appearance: none; display: inline-block; box-sizing: border-box; flex: none;
  width: 0.9em; height: 0.9em; margin: 0 0.3em 0 0; padding: 0; vertical-align: -0.1em; text-indent: 0;
  border: 1.5px solid var(--text-4); border-radius: 0.22em; background: transparent no-repeat center / 80% 80%;
  font-size: inherit !important; cursor: pointer;
}
input.task-cb:checked {
  border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input.task-cb:checked { animation: cb-check var(--t) var(--ease); }
/* the tick lands: colour fills in, the mark grows in */
@keyframes cb-check { from { background-color: transparent; background-size: 0% 0%; } }
input.task-cb:disabled { cursor: default; }
input.task-cb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* a deadline chip on a record page has the same colour as the date in its row */
.chip.overdue { color: var(--date-overdue); }
.chip.soon { color: var(--date-soon); }
/* «Ещё» at the end of a section / group and the end of a list that loads the next page */
/* ---- row parts (Brain rows, variant A): who it concerns, the executor, sums, own leads ---- */
.exec-mark { position: relative; display: inline-flex; flex: none; padding-right: 3px; }
/* the arrow stays inside the box: otherwise the row «overflows» and loses its chips */
.exec-mark > .avatar { width: 20px; height: 20px; font-size: 8.5px; }
.exec-arrow { position: absolute; right: 0; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--base); color: var(--accent); display: grid; place-items: center; }
.exec-arrow svg { width: 8px; height: 8px; }
.lead-ic { display: inline-flex; color: var(--text-3); }
.lead-ic.in { color: var(--green); }
.lead-ic svg { width: 15px; height: 15px; display: block; }
.swot-mark { width: 16px; height: 16px; border-radius: var(--r-xs); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex: none; }
/* phone: a long press on a chip shows its hint, not the system text menu */
/* «2/5» of a task with steps: a tap opens the steps under the row (no size change when open) */
.chip.parts-chip { cursor: pointer; background: var(--base); font: inherit; font-size: var(--fs-caption); }
.chip.parts-chip.on { background: var(--active); color: var(--text); }
@media (max-width: 860px) {
  /* parts opened under their parent («2/5»): one step to the right per level (also beats the priority-column padding) */
}
/* ---- touch: swipes on rows, long press, pull to refresh, sheets (touch.js) ---- */
/* the button a swipe reveals: no coloured fill — a round icon on the page's own background, a small label under it */
.swipe-act { position: absolute; top: 0; bottom: 0; width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: none; background: transparent; color: var(--text-2); font: 500 11.5px Inter, sans-serif; padding: 0 6px; cursor: pointer; }
.swipe-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--elev); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.swipe-act .i { width: 18px; height: 18px; }
.swipe-act.done .swipe-ic { color: var(--green); }
.swipe-act.move .swipe-ic { color: var(--accent-text); }
.swipe-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swipe-act.left { left: -96px; }
.swipe-act.right { right: -96px; }
.swipe-act:active .swipe-ic { background: var(--hover); }
.haptic { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; left: -10px; top: 0; }
.sheet-opt { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-title-s); text-align: left; cursor: pointer; }
.sheet-opt > span:first-of-type { flex: 1; }
.sheet-opt .i { width: 17px; height: 17px; color: var(--text-3); }
.sheet-opt.primary { font-weight: 600; }
.sheet-opt:active { background: var(--hover); }
.sheet-opt.cancel { justify-content: center; color: var(--text-3); margin-top: 6px; border-top: 1px solid var(--border-soft); border-radius: 0; }
.sheet-opt.cancel > span { flex: none; }
.sheet-preview { padding: 2px 4px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.sheet-title { font-size: var(--fs-title-s); font-weight: 600; margin: 4px 0 8px; overflow-wrap: anywhere; }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sheet-chips .date { font-size: var(--fs-caption); color: var(--text-3); }
.sheet-text { margin-top: 8px; font-size: var(--fs-body); line-height: 1.5; }
.sheet-text:empty { display: none; }
.pull-tip { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 56px); left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: var(--elev); box-shadow: var(--shadow); display: grid; place-items: center; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .12s; }
.pull-tip.show { opacity: .55; }
.pull-tip.ready, .pull-tip.busy { opacity: 1; }
.pull-tip .spinner { width: 16px; height: 16px; }
.pull-tip:not(.busy) .spinner { animation-play-state: paused; }
@media (max-width: 860px) {
  /* a sheet from the bottom: the page behind it is dimmed and softly blurred */
}
/* Touch targets may grow without enlarging the icon itself. */
@media (pointer: coarse) {
  /* the tabs and the view switch of a list keep their size (Vlad, 07.11.2026) */
  .btn.ghost[data-theme], .menu-btn, .topbar .btn { min-width: 44px; min-height: 44px; }
  /* a filled button keeps its normal size (no huge square stuck to the top edge); an invisible frame around it
     gives the finger the same 44px */
}
/* ---- touch: no «stuck» highlight. Hover styles exist only for a mouse (@media (hover: hover) above); a finger gets the
   highlight only while it is down (:active), and nothing stays after it is lifted. */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .row:active, .nav-item:active, .opt:active, .tab:active, .btn:active, .btn.ghost:active, .chip.editable:active, .prop:active, .pchip:active, .vbtn:active { background: var(--hover); }
  .btn.primary:active { background: var(--accent-hover); }
}
/* ---- on / off flags («Активен», «Активно»): a switch, never a task status */
.flag-on { color: var(--green); }
.flag-off { color: var(--text-4); }
/* ---- Settings: profile, own rules, digests (me.js) ---- */
.me-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.me-chips:empty { display: none; }
.chip-x { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; padding: 0; border: none; background: transparent; color: var(--text-4); cursor: pointer; }
.chip-x .i { width: 11px; height: 11px; }
.me-kv { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--fs-body); }
.me-k { color: var(--text-3); flex: none; min-width: 110px; }
.me-v, .me-rule-t { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: pointer; border-radius: var(--r-xs); padding: 4px 6px; margin: -4px -6px; }
.me-rule { display: flex; align-items: flex-start; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-body); line-height: 1.5; }
.me-rule .btn { flex: none; }
.me-hist { padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-body); }
.me-hist > div { margin-top: 2px; overflow-wrap: anywhere; }
.me-form { display: grid; gap: 12px; }
.me-form > label { display: grid; gap: 6px; font-size: var(--fs-body); color: var(--text-3); }
.me-form .seg { justify-self: start; }
.me-sec { display: flex; margin-top: 6px; color: var(--text); font-size: var(--fs-body); }
.me-pre { white-space: pre-wrap; font: inherit; font-size: var(--fs-body); line-height: 1.5; margin: 0; }
@media (hover: hover) {
  .me-v:hover, .me-rule-t:hover { background: var(--hover); }
}
@media (hover: none) {
  .me-v:active, .me-rule-t:active { background: var(--hover); }
}
/* ---- text of records, comments, descriptions: a paragraph gap (12px) clearly larger than the gap between lines
   (line height 1.5); list items a little apart; no gap after the last block */
.rich-body li + li, .desc li + li, .body-md li + li { margin-top: 3px; }
.desc ul, .desc ol, .body-md ul, .body-md ol { margin: 0 0 12px; padding-left: 22px; }
.rich-body > :last-child, .desc > :last-child, .body-md > :last-child { margin-bottom: 0; }
/* ---- forms in dialogs (me.js): label on the left, control on the right; every control 34px high; on a phone the
   label sits above its control and the controls take the full width */
.form-modal { width: min(640px, calc(100vw - 32px)); }
.form { display: grid; gap: 18px; padding-block: 4px; }
.f-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.f-k { font-size: var(--fs-body); color: var(--text-3); line-height: 34px; }
.f-k:has(> .i) { display: flex; align-items: center; gap: 8px; }
.f-k > .i { flex: none; width: 15px; height: 15px; color: var(--text-4); }
.f-v { min-width: 0; display: grid; gap: 8px; justify-items: stretch; }
.form .input, .form .sbox, .form .seg button { box-sizing: border-box; height: 34px; }
.form .input { padding-top: 0; padding-bottom: 0; }
.form .sbox { width: 100%; }
.form .input.f-short { width: 140px; }
.form .input.f-num { width: 76px; text-align: center; }
.f-hint { font-size: var(--fs-caption); color: var(--text-4); line-height: 1.45; }
.f-hint:empty { display: none; }
.f-days { display: flex; gap: 6px; flex-wrap: wrap; }
.f-days[hidden] { display: none; }
.f-days button { width: 38px; height: 34px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--base); color: var(--text-2); font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.f-days button.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); font-weight: 600; }
.f-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.f-check { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: var(--fs-body); line-height: 1.35; color: var(--text); cursor: pointer; }
.f-check > span { min-width: 0; }
.f-inline { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-body); color: var(--text-2); }
@media (max-width: 860px) {
  .f-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .f-k { line-height: 1.4; font-weight: 500; color: var(--text-2); }
  .f-checks { grid-template-columns: minmax(0, 1fr); }
}
/* a heading is closer to its own text than to the text above it; the first block of a text has no gap on top */
.rich-body > :first-child, .desc > :first-child, .body-md > :first-child, .tblock-v > :first-child { margin-top: 0; }
.desc h1, .desc h2, .desc h3 { margin: 20px 0 8px; }
.desc blockquote, .body-md blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text-2); }
/* Child records: quiet heading and single-line rows; only the chosen properties take space. */
/* the arrow points down while the section is open and turns smoothly (Vlad, 07.11.2026) */
.btn.subtasks-action { position: relative; width: 32px; height: 32px; min-height: 32px; flex: none; justify-content: center; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text-3); }
.btn.subtasks-action::before { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; }
.btn.subtasks-action > .i { position: relative; width: 14px; height: 14px; }
/* a block that slides open or closed (slideOpen / slideClose): the content is clipped while it moves */
.sliding { overflow: hidden; }
.chip.overdue > span, .subtask-date.overdue { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* «Записей нет», «Загружаю…» of a section: in line with its title (head padding 12 + arrow 12 + gap 6), not under the arrow */
.compact-select { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 34px; border: 1px solid var(--border-soft); border-radius: var(--r-full); background: var(--base); padding: 0 10px; font: inherit; font-size: var(--fs-body); color: var(--text-2); }
.compact-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-select > .i { width: 12px; height: 12px; flex: none; color: var(--text-3); }
.compact-select select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.compact-select.disabled { opacity: .5; }
@media (hover: hover) {
  .subtask-row:hover, .btn.subtasks-action:hover::before { background: var(--hover); }
}
@media (pointer: coarse) {
  .btn.subtasks-action { width: 44px; height: 44px; }
}
/* access of a person (Family Office «Доступы»): what was given, one line each, with «забрать» */
/* the access card (Доступы): who it is and whether the access is on — in the head; the form below; the switch at the foot */
.access-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 2px; }
.access-head > .avatar { width: 40px; height: 40px; font-size: 15px; }
.access-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.access-head b { font-size: var(--fs-read); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.access-head div > span { font-size: var(--fs-body); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.access-state { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-full); background: var(--hover); color: var(--text-3); font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; }
.access-state.on { background: var(--accent-soft); color: var(--accent-text); }
.access-state .i { width: 13px; height: 13px; }
.access-sec { font-size: var(--fs-body); font-weight: 600; }
.access-empty { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--elev2); color: var(--text-3); font-size: var(--fs-body); }
.access-empty .i { flex: none; width: 15px; height: 15px; color: var(--text-4); }
.access-add { display: flex; gap: 8px; align-items: center; }
.access-add > .sbox, .access-add > select { flex: 1; min-width: 0; }
.access-switch { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-body); white-space: nowrap; cursor: pointer; }
@media (max-width: 860px) {
  .access-switch { flex-basis: 100%; margin-bottom: 6px; }
}
.access-grants { display: flex; flex-direction: column; gap: 4px; }
.access-grant { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.access-grant > span { flex: 1; min-width: 0; }
/* ---- light glass, as in Linear: a faint tint of the accent behind the app shows through the content card and the
   floating surfaces (menus, dialogs, ⌘K), softly blurred. Kept subtle on purpose: text contrast does not change. */
/* ---- the head of a record page: three lines, each one line that scrolls sideways (Vlad, 07.11.2026) ---- */
/* «Ждёт»: open blockers in orange; all of them closed → «Можно продолжать» in green */
.head-chip.wait-chip > .i, .wait-row > .i { color: var(--red); }
.head-chip.wait-chip.idle > .i, .wait-row.idle > .i { color: var(--text-3); }
.wait-chip, .wait-row { cursor: pointer; }
/* the list of a blocker chip: two groups, a line opens the record */
.wait-pop .wait-head { display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 2px 4px 2px 8px; color: var(--text-3); font-size: var(--fs-caption); font-weight: 550; }
.wait-pop .wait-head:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border-soft); padding-top: 6px; }
.wait-pop .wait-num { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.wait-pop .opt-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.wait-pop .wait-opt.done .opt-l { color: var(--text-3); text-decoration: line-through; }
.wait-pop .btn.wait-add, .wait-pop .btn.wait-x { width: 26px; height: 26px; padding: 0; flex: none; }
@media (hover: hover) {
  .wait-pop .btn.wait-x { opacity: 0; }
  .wait-pop .wait-opt:hover .btn.wait-x { opacity: 1; }
}
/* a person / company: avatar + name (+ «/ role»); on a phone the head shows the short name */
/* «Детали»: captions and plates — no table, no background */
.dtext { font-size: var(--fs-body); line-height: 1.45; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.dtext.editable { cursor: pointer; }
.dempty { color: var(--text-3); font-size: var(--fs-caption); }
.btn.ghost.dadd { height: 28px; padding: 0 8px; margin-left: -8px; color: var(--text-3); font-size: var(--fs-body); }
/* the options of a choice carry the icons of the chips */
/* «Дополнительно» in «Детали»: a quiet block with its own background; inside — compact rows «field — value» (Vlad, 07.11.2026) */
/* a plate that starts with an avatar: the circle sits close to the left edge, as in Linear */
/* a click focuses without a ring; the ring is for the keyboard only (Tab) */
:focus:not(:focus-visible) { outline: none; }
/* ---- «Детали» (Vlad, 07.11.2026) ----
 * wide computer: the panel's place is kept when it is hidden, so the page never moves; it fades and slides away;
 * narrow computer: the panel slides in from the right over the page, inside the app's frame (.main is the frame of
 * fixed children: it has a backdrop filter), under the top bar. */
/* text is edited in place: no background under the mouse (it looked like a button) */
@media (hover: hover) {
  .peek-title[contenteditable="true"]:hover, .tblock-v textarea:hover, .rich.editable .rich-body:hover, .goal .short[contenteditable]:hover { background: transparent; }
}
/* a section without data: the same insets as real content, quiet and clearly «nothing here yet» (Vlad, 08.11.2026) */
/* the record page on a wide screen, as in Linear: the text and «Детали» are one group — the panel stands right next to
 * the text (28px apart), and the group is in the middle of the page; the panel's place is kept when it is hidden, so
 * nothing moves (Vlad, 08.11.2026) */
/* AI entries in «Активность» (Кратко / Итог / Следующий шаг): their own card, not a comment — the AI icon, what it did,
   the label of the entry, three lines and «Показать полностью»; «Запросить изменение» for whom the server allows */
.chip.ai-stale { height: 20px; font-size: var(--fs-micro); font-weight: 500; color: var(--orange); background: transparent; border: 1px solid var(--border-soft); }
/* a circle of a section head that is switched on (a filter is set) */
.btn.subtasks-action.on { color: var(--accent-text); }
.btn.subtasks-action.on::before { background: var(--accent-soft); }
/* help «?» — the general description of a kind */
.help-t { font-size: var(--fs-body); font-weight: 600; }
.help-x { font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
/* a previous version of an AI entry: one line of the feed; a tap opens the text it had then */
/* the one «Создать» of a screen: a round glass button in the top-right corner — a soft gradient of the brand colour that the
   background shows through blurred, a light edge on top, a coloured shadow; white «+». No size change on press. */
.btn.add-fab {
  position: relative; width: 34px; height: 34px; min-height: 34px; padding: 0; flex: none; justify-content: center;
  border-radius: 50%; border: 1px solid lch(100% 0 0 / 0.38); color: #fff;
  background: linear-gradient(150deg, lch(calc(var(--accent-l) + 20) calc(var(--accent-c) * 0.88) calc(var(--accent-h) + 4) / 0.82) 0%, lch(calc(var(--accent-l) + 4) calc(var(--accent-c) * 1.05) var(--accent-h) / 0.78) 55%, lch(calc(var(--accent-l) - 6) calc(var(--accent-c) * 1.08) calc(var(--accent-h) - 8) / 0.86) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 lch(100% 0 0 / 0.45), inset 0 -1px 0 lch(calc(var(--accent-l) - 18) calc(var(--accent-c) * 0.68) calc(var(--accent-h) - 3) / 0.25), 0 4px 14px lch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.32);
}
.btn.add-fab > .i { width: 15px; height: 15px; }
.btn.add-fab > .i svg, .btn.add-fab > svg { stroke-width: 1.9; }
.btn.add-fab:active { background: linear-gradient(150deg, lch(calc(var(--accent-l) + 14) calc(var(--accent-c) * 0.88) calc(var(--accent-h) + 4) / 0.9) 0%, lch(calc(var(--accent-l) - 2) calc(var(--accent-c) * 1.05) var(--accent-h) / 0.88) 55%, lch(calc(var(--accent-l) - 10) calc(var(--accent-c) * 1.08) calc(var(--accent-h) - 8) / 0.92) 100%); }
@media (hover: hover) {
  .btn.add-fab:hover { background: linear-gradient(150deg, lch(calc(var(--accent-l) + 24) calc(var(--accent-c) * 0.88) calc(var(--accent-h) + 4) / 0.86) 0%, lch(calc(var(--accent-l) + 8) calc(var(--accent-c) * 1.05) var(--accent-h) / 0.82) 55%, lch(calc(var(--accent-l) - 3) calc(var(--accent-c) * 1.08) calc(var(--accent-h) - 8) / 0.9) 100%); }
}
:root[data-theme="dark"] .btn.add-fab { border-color: lch(100% 0 0 / 0.22); box-shadow: inset 0 1px 0 lch(100% 0 0 / 0.28), 0 4px 14px lch(calc(var(--accent-l) - 18) calc(var(--accent-c) * 0.85) var(--accent-h) / 0.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.add-fab { border-color: lch(100% 0 0 / 0.22); box-shadow: inset 0 1px 0 lch(100% 0 0 / 0.28), 0 4px 14px lch(calc(var(--accent-l) - 18) calc(var(--accent-c) * 0.85) var(--accent-h) / 0.45); }
}
@media (pointer: coarse) {
  .btn.add-fab::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
}
/* «+» with nothing to do now: the same round button in grey tones — the ground of a pressed row, a quiet icon, no glass,
   no glow, no shadow; it does not react to the pointer (:root lifts it over the dark-theme rules above) */
:root .btn.add-fab:disabled, :root .btn.add-fab:disabled:hover, :root .btn.add-fab:disabled:active {
  opacity: 1; cursor: default; color: var(--text-4); background: var(--hover); border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* a «+» circle in a section head keeps the circle's own size */
/* a value typed in a popover (sum, number, short text) — the chip keeps the size of its neighbours */
.value-pop-t { padding: 10px 12px 0; font-size: var(--fs-caption); font-weight: 500; color: var(--text-3); }
/* one typographic rule for «label: value» in chips — the label and its value are one phrase (a space, not a gap) */
.chip .chip-label, .pchip > .muted { margin-right: -2px; }
@media (max-width: 860px) {
  /* the title of a new record stays the largest line of the dialog; the hint about dashed chips is not needed on a
     phone (the dashed frame speaks for itself) — it squeezed the buttons into two lines */
}
/* ---- focus of every field with a border: the same border a little darker (lighter in the dark) and a light short
   shadow — no colour, no halo (Vlad, 09.11.2026). Borderless editable text (titles, texts, «Детали») gets none. ---- */
.composer, .reject textarea, .hours input, .outcome-a textarea, .desc-editor textarea, .compact-select { transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease); }
.composer:not(.reply):focus-within, .reject textarea:focus, .hours input:focus, .outcome-a textarea:focus, .desc-editor textarea:focus,
.compact-select:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-shadow); outline: none; }
.reject textarea:focus, .hours input:focus, .outcome-a textarea:focus, .desc-editor textarea:focus { outline: none; }
/* a reply in a thread is a line, not a box: only that line gets a little darker */
/* ---- moving between pages (core.js navStart / navEnd): a thin bar at the top, the page dims a little, and past
   300 ms the outline of the coming page (skeleton) with a soft shimmer ---- */
@keyframes nav-run { 0% { width: 0; } 60% { width: 70%; } 100% { width: 88%; } }
#content { transition: opacity var(--t-fast) var(--ease); }
html.navigating #content { opacity: .6; }
.skel { padding: 24px 28px; animation: fade var(--t) var(--ease) both; }
.skel-record { max-width: 760px; }
.sk { display: block; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--elev2) 0%, var(--hover) 40%, var(--elev2) 80%); background-size: 300% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.sk-title { height: 26px; width: 58%; margin: 6px 0 16px; }
.sk-chips { display: flex; gap: 6px; margin-bottom: 22px; }
.sk-chip { width: 92px; height: 24px; border-radius: var(--r-full); }
.sk-line { height: 12px; margin: 12px 0; width: 92%; }
.sk-line:nth-of-type(2n) { width: 78%; }
.sk-line:nth-of-type(3n) { width: 86%; }
.sk-line:last-child { width: 54%; }
.skel-list { padding: 8px 12px; }
.sk-row { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 8px; }
.sk-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.sk-text { height: 12px; flex: 1; max-width: 46%; }
.sk-row:nth-child(2n) .sk-text { max-width: 34%; }
.sk-row:nth-child(3n) .sk-text { max-width: 52%; }
.sk-meta { height: 12px; width: 64px; margin-left: auto; }
@media (max-width: 860px) {
  .skel { padding: 16px; }
  .sk-title { height: 30px; width: 76%; }
}
/* a header plate whose value changed (record.js): the new value comes in softly in place */
.swapped { animation: value-in var(--t) var(--ease); }
@keyframes value-in { from { opacity: 0; transform: translateY(3px); } }
/* a phone: buttons with text are a finger's size and fit its 15px text with air around it */
@media (max-width: 860px) {
  .btn:not(.ghost):not(.add-fab):not(.subtasks-action) { height: 34px; padding: 1px 16px 0; }
}
/* ---- the phone dock sits low (Vlad, 10.11.2026): on an iPhone the home-indicator zone is 34px; the dock (and the box
   «Спросить AI» grows into) stands 24px from the edge — above the indicator line, not on it; elsewhere 14px */
:root { --dock-gap: max(14px, calc(env(safe-area-inset-bottom, 0px) - 10px)); }
/* ---- a press lights the button, as the glass of iOS 26 (touch.js; Vlad, 10.11.2026): a soft light from the touch
   point inside the button — darker glass in the light theme, lit glass in the dark one; nothing else changes; it fades
   in 0.25 s after the finger lifts */
:root { --press-flat: lch(0% 0 0 / .06); --press-spot: lch(0% 0 0 / .07); }
:root[data-theme="dark"] { --glass-edge: lch(100% 0 0 / .12); --press-flat: lch(100% 0 0 / .10); --press-spot: lch(100% 0 0 / .14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glass-edge: lch(100% 0 0 / .12); --press-flat: lch(100% 0 0 / .10); --press-spot: lch(100% 0 0 / .14); }
}
.press-host { position: relative; }
press-glow { display: block; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), var(--press-spot) 0, transparent 70%), var(--press-flat);
  animation: press-in 90ms var(--ease-io); }
press-glow.out { opacity: 0; transition: opacity .25s var(--ease-io); }
@keyframes press-in { from { opacity: 0; } }
/* ---- the sign-in screen: a large button with the sign-in arrow, the other way as a link */
.login .login-card h1 { margin-bottom: 28px; }
.login .login-card .btn.primary { height: 48px; gap: 8px; border-radius: var(--r-full); font-size: var(--fs-read); font-weight: 550; padding: 1px 20px 0; }
.login .login-card .btn.primary svg { width: 18px; height: 18px; }
.login .login-card .input { height: 48px; border-radius: var(--r-md); }
.login-alt { margin-top: 20px; font-size: var(--fs-body); }
.login-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; }
.login-link svg { width: 15px; height: 15px; flex: none; }
.login-link span { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
@media (hover: hover) {
  .login-link:hover span { text-decoration-color: currentColor; }
}
/* ---- Brain's sign-in (Vlad, 10.11.2026): the galaxy fills the screen with the word in stars in its middle; «Войти с
   ключом» and the e-mail link stand low — in reach of the thumb on a phone, the same on a computer (login-anim.js) */
.login:has(.login-anim.bg) { align-content: end; padding-bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 28px); }
@media (min-width: 861px) {
  .login:has(.login-anim.bg) { padding-bottom: 12vh; }
}
/* ---- Family Office: the stack of papers larger on a computer (the phone keeps its size) */
@media (min-width: 861px) {
  .login-anim.obj { width: min(440px, 46vh); height: min(440px, 46vh); }
}
/* ---- the row, in one order for every list (Vlad, 11.11.2026): who it concerns stands right after the title; the counter,
   the executor, the date and the type icon keep their own columns; a burning date is in the app's colour, underlined */
.hz { display: inline-grid; place-items: center; width: 24px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-3); font-size: 10px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
/* ---- «Детали»: the whole record as rows «caption — plates» under headings (Vlad, 11.11.2026) */
/* ---- a group of a list folds by its heading; the comment field is one line until it has text */
/* ---- a list's tabs and view switch in the top line, after its title (computer) */
/* ---- the columns of a row take room only when some row of the list has a value there; tighter right side */