/* The frame of the app: the menu on the left, the top line, the working area (docs/VIEW-DESIGN.md §4, mock 2). */
.shell { display: grid; grid-template-columns: 244px 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--frame); }
.side { display: flex; flex-direction: column; padding: 8px 10px 10px; min-width: 0; min-height: 0; overflow: hidden; }
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; margin: 0 -10px; padding: 0 10px 8px; -webkit-overflow-scrolling: touch; }
.side-nav > * { flex-shrink: 0; }
.ws { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px; margin-bottom: 6px; }
.ws-logo {
  width: 20px; height: 20px; border-radius: var(--r-xs); background: linear-gradient(135deg, lch(calc(var(--accent-l) + 14) calc(var(--accent-c) * 0.85) calc(var(--accent-h) + 12)), lch(calc(var(--accent-l) + 4) var(--accent-c) calc(var(--accent-h) - 8)));
  display: grid; place-items: center; color: var(--on-accent); font: 600 12px Georgia, serif; flex: none;
}
.ws-name { font-weight: 550; font-size: var(--fs-body); }
.ws-user { margin-left: auto; color: var(--text-4); font-size: var(--fs-caption); }
.nav-item {
  display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: var(--r-sm);
  color: var(--text-2); cursor: pointer; user-select: none; white-space: nowrap; font-weight: 450; font-size: var(--fs-body);
}
@media (hover: hover) {
  .nav-item:hover { background: var(--hover); color: var(--text); }
}
.nav-item.active { background: var(--hover); color: var(--text); font-weight: 500; }
.nav-item svg, .nav-item .i { width: 16px; height: 16px; flex: none; color: var(--icon); }
.nav-item .count { margin-left: auto; color: var(--text-4); font-size: var(--fs-caption); font-weight: 450; }
.nav-section { color: var(--text-3); font-size: var(--fs-caption); font-weight: 450; padding: 16px 8px 6px; display: flex; align-items: center; gap: 5px; }
.nav-section::after { content: ""; width: 10px; height: 10px; background: var(--text-4); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav-sub { font-weight: 450; padding-left: 10px; }
.nav-sub .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: none; margin: 0 4px 0 3px; }
.side-foot { margin-top: auto; padding-top: 8px; display: flex; gap: 2px; align-items: center; }
.side-foot .btn.ghost { color: var(--text-3); }
.main {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  margin: 6px 6px 6px 0; background: var(--base); border: 0; border-radius: var(--r-lg);
}
/* nothing in the top bar is selected by a press (a long press on a phone does not pick its words) */
.topbar { height: 54px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 20px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* the head of every screen in one style (Vlad, 13.11.2026): a list's name and the way to a record are the same size —
   the parts of the way grey, the screen or record itself bold; between them a chevron icon */
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--text-3); min-width: 0; font-size: var(--fs-read); }
.crumbs b { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { flex: none; display: inline-flex; color: var(--text-4); }
.crumbs .sep .i, .crumbs .sep svg { width: 14px; height: 14px; }
.topbar .spacer { flex: 1; }
.btn.menu-btn { display: none; }
.content { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: 12px; }
.split { display: flex; flex: 1; min-height: 0; }
.split > .content { flex: 1; min-width: 0; }
#actions { display: flex; gap: 6px; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 40; transform: translateX(-100%); transition: transform 0.18s; background: var(--frame); }
  .shell.nav-open .side { transform: none; box-shadow: var(--shadow); }
  .main { margin: 0; border-radius: 0; border: none; }
  .btn.menu-btn { display: inline-flex; }
  .topbar { padding-left: 16px; gap: 12px; }
  .topbar .btn.menu-btn { position: relative; min-width: 0; width: 18px; padding: 0; justify-content: flex-start; border: 0; background: none; }
  .topbar .btn.menu-btn .i { width: 18px; height: 18px; }
  .topbar .btn.menu-btn::after { content: ""; position: absolute; inset: -13px -8px -13px -16px; }
  .topbar { height: calc(46px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .side { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .content { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.crumbs a.crumb { color: var(--text-3); font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
@media (hover: hover) {
  .crumbs a.crumb:hover { color: var(--text); }
}
.nav-backdrop { display: none; }
@media (max-width: 860px) {
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .18s; }
  .shell.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width: 860px) {
  #actions .btn > span { display: none; }
  #actions .btn { padding: 0 8px; }
}
.side .nav-item.active { transition: background-color var(--t) var(--ease); }
/* the person at the foot: the same rectangle with soft corners as the menu items above it, a chevron — it opens a menu */
.me-btn { flex: 1; justify-content: flex-start; min-width: 0; height: 32px; padding: 0 8px 0 6px; border-radius: var(--r-sm); }
.me-btn .me-chev { display: inline-flex; margin-left: auto; color: var(--text-4); font-style: normal; }
.me-btn .me-chev svg, .me-btn .me-chev .i { width: 14px; height: 14px; }
.me-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
  .crumbs > :not(:nth-last-child(-n+3)) { display: none; }
  .crumbs a.crumb, .crumbs > span:not(.sep) { flex: 0 1 auto; min-width: 0; max-width: none; }
  .crumbs b { flex: 0 1 auto; min-width: 0; }
  /* the way to a record on a phone: the parent by its number, «PR-1 › Действие AC-1» — the record itself stays whole */
  .crumbs a.crumb .ck { display: none; }
}
.side > .ws, .side > .side-foot { flex-shrink: 0; }
.side-foot { margin: 0 -10px; padding: 8px 10px 0; background: transparent; }
@media (pointer: coarse) {
  .content { overflow-x: hidden; }
}
@media (pointer: coarse) {
  .topbar .btn.primary { position: relative; min-width: 0; min-height: 0; }
  .topbar .btn.primary::after { content: ""; position: absolute; inset: -7px; }
}
.shell {
  background:
    radial-gradient(1100px 620px at 0% 0%, color-mix(in lch, var(--accent) 9%, transparent), transparent 62%),
    radial-gradient(900px 560px at 100% 100%, color-mix(in lch, var(--accent) 6%, transparent), transparent 60%),
    var(--frame);
}
.main { background: color-mix(in lch, var(--base) 84%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.15); backdrop-filter: blur(28px) saturate(1.15); }
/* A phone: the top bar is pinned to the top edge on a solid ground. iOS (26 and later) draws its own blur over the top of
   the page unless a pinned full-width element stands there — as the chats panel does, and the blur goes while it is open.
   The ground is the colour the frosted card showed (the card 84 % over the frame), without the frost: on a phone the card
   fills the screen and there is nothing under it to blur. The content starts below the bar. */
@media (max-width: 860px) {
  .main { padding-top: calc(46px + env(safe-area-inset-top)); background: color-mix(in lch, var(--base) 84%, var(--frame)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; background: color-mix(in lch, var(--base) 84%, var(--frame)); }
}
@media (max-width: 860px) {
  .side { background: color-mix(in lch, var(--frame) 90%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
}
@media (max-width: 860px) {
  #actions .btn.add-fab { width: 36px; height: 36px; min-height: 36px; padding: 0; }
}
@media (pointer: coarse) {
  .topbar .btn.add-fab { min-width: 36px; min-height: 36px; }
}
.nav-progress { position: fixed; z-index: 70; left: 0; top: 0; height: 2px; width: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-soft-2), var(--accent), var(--accent-soft-2)); border-radius: 0 2px 2px 0; }
.nav-progress.run { opacity: 1; animation: nav-run 1.6s var(--ease-io) forwards; }
.nav-progress.done { width: 100%; opacity: 0; transition: width 160ms var(--ease), opacity 220ms 160ms; }
/* the soft edges of a scrolling box (mock 2; views/edges.js; Vlad, 13.11.2026: a mask, not a blur): the edge with more
   behind it fades to transparent; at the top the fade starts under a head stuck there (--edge-skip). The step of the
   mask is hard where it must be (the head ends, the fade begins): no line of half-seen text between them. */
.edge-t, .edge-b { --edge: 32px; }
.modal > .modal-body, .popover .opts, .cmdk .opts { --edge: 22px; }
.edge-t { -webkit-mask-image: linear-gradient(to bottom, #000 var(--edge-skip, 0px), transparent var(--edge-skip, 0px), #000 calc(var(--edge-skip, 0px) + var(--edge)));
  mask-image: linear-gradient(to bottom, #000 var(--edge-skip, 0px), transparent var(--edge-skip, 0px), #000 calc(var(--edge-skip, 0px) + var(--edge))); }
.edge-b { -webkit-mask-image: linear-gradient(to top, transparent, #000 var(--edge)); mask-image: linear-gradient(to top, transparent, #000 var(--edge)); }
.edge-t.edge-b {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--edge-skip, 0px), transparent var(--edge-skip, 0px), #000 calc(var(--edge-skip, 0px) + var(--edge)), #000 calc(100% - var(--edge)), transparent);
  mask-image: linear-gradient(to bottom, #000 var(--edge-skip, 0px), transparent var(--edge-skip, 0px), #000 calc(var(--edge-skip, 0px) + var(--edge)), #000 calc(100% - var(--edge)), transparent); }
/* a layer fixed over the screen lives inside the page (the sheet of «Детали» on a phone): while it is open the page has
   no mask, or the sheet would fade with it */
.edge-t:has(.issue.sheet), .edge-b:has(.issue.sheet) { -webkit-mask-image: none; mask-image: none; }
/* a computer: «Детали» stand beside the page, outside its box — a mask would cut them away whole (Vlad, 13.11.2026:
   the button pressed, the panel not there); while they are shown the page has no mask */
@media (min-width: 861px) { .edge-t:has(> .issue:not(.no-side)), .edge-b:has(> .issue:not(.no-side)) { -webkit-mask-image: none; mask-image: none; } }