/* The record page: title, the three lines under it (values, where it belongs, who) — docs/VIEW-DESIGN.md §4, mock 2. Markup: views/record.js. */
.issue { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 100%; }
.issue-main { padding: 28px 48px 40px; max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.issue-ident { color: var(--text-3); font: 500 var(--fs-caption) var(--mono); display: flex; align-items: center; gap: 10px; }
.issue-title { font-size: var(--fs-title-l); font-weight: 600; letter-spacing: -0.012em; margin: 6px 0 12px; outline: none; line-height: 1.3; }
@media (max-width: 860px) {
  .issue { grid-template-columns: minmax(0, 1fr); }
  .issue-main { padding: 18px 16px 30px; order: 1; }
}
.issue-main, .issue-side { min-width: 0; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.who-k { color: var(--text-3); font-size: var(--fs-caption); margin-left: 4px; }
.who-k:first-child { margin-left: 0; }
.who[hidden] { display: none; }
.who .chip { height: 26px; padding: 0 9px; gap: 6px; border: 0; border-radius: var(--r-full); background: var(--hover); color: var(--text-2); font-size: var(--fs-body); font-weight: 450; }
.who .chip svg, .who .chip .i { width: 16px; height: 16px; }
.who .chip:active { background: var(--active); }
.record-context { gap: 4px 12px; margin-bottom: 12px; }
.record-context .chip { height: auto; min-height: 26px; max-width: 100%; padding: 0 4px; border-radius: 0; background: transparent; color: var(--text-2); white-space: normal; overflow-wrap: anywhere; }
.record-context .chip-label { color: var(--text-3); font-weight: 450; flex: none; }
.who .chip > .avatar:first-child { width: 22px; height: 22px; }
.issue-main .sec { margin-top: 22px; }
.issue-main .sec .group-head { margin-left: 0; margin-right: 0; }
.issue-main .sec-empty { margin-top: 12px; }
.issue.no-side { grid-template-columns: minmax(0, 1fr); }
.issue.no-side .issue-side { display: none; }
.record-more { display: inline-flex; }
.record-menuonly { display: none; }
@media (min-width: 861px) and (max-width: 1199px) {
  .issue-main { padding: 28px 32px 40px; }
}
@media (max-width: 860px) {
  .record-secondary { display: none; }
  .record-more { display: inline-flex; }
}
.who { cursor: default; }
@media (max-width: 860px) {
  .who { cursor: pointer; }
  .issue-main .sec { margin-top: 16px; }
}
.who .kv { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; max-width: 100%; }
.who-line { margin-bottom: 8px; }
.who[data-chips] { flex-wrap: wrap; margin-bottom: 12px; }
.who[data-chips] .chip { max-width: 100%; }
.issue .issue-side { padding-left: 4px; }
.warn-note { display: flex; gap: 8px; align-items: flex-start; color: var(--orange); margin: 6px 0 2px; font-size: var(--fs-caption); }
.warn-note .i { flex: none; margin-top: 2px; }
/* a hint with what to do (FO «Задач нет»): grey line, small plates as buttons; on a phone the plates go under the text */
.head-line { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
.head-line::-webkit-scrollbar { display: none; }
.head-line > * { flex: none; }
.head-line.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.head-line.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.head-line.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.who[data-chips].head-line { flex-wrap: nowrap; }
.head-line .chip { max-width: none; white-space: nowrap; }
.record-context.head-line .chip { white-space: nowrap; overflow-wrap: normal; }
.head-chip > .i, .head-chip > svg { color: var(--icon); }
.head-chip.wait-chip.go > .i { color: var(--green); }
.plate { gap: 6px; }
.plate-av { position: relative; display: inline-flex; flex: none; }
.plate-av .exec-arrow { right: -3px; }
.who .plate .plate-av > .avatar { width: 22px; height: 22px; }
.plate-role { color: var(--text-3); font-weight: 450; }
.plate-sep { color: var(--text-3); font-size: var(--fs-body); padding: 0 2px; }
.nm-short { display: none; }
@media (max-width: 860px) {
  .head-line .nm-full { display: none; }
  .head-line .nm-short { display: inline; }
}
.chip.plate { overflow: visible; }
/* a plate with an avatar hugs it on the left (mock 2 .plate.who: 0 10px 0 2px); without one — 9 px on both sides */
.chip.plate { padding: 0 9px; }
.chip.plate:has(> .plate-av > .avatar), .who .chip.plate:has(> .plate-av > .avatar) { padding-left: 2px; padding-right: 10px; }
@media (min-width: 861px) {
  .issue.no-side { grid-template-columns: minmax(0, 1fr) 300px; }
  .issue .issue-side { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
  .issue.no-side .issue-side { display: block; visibility: hidden; opacity: 0; transform: translateX(12px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t); }
}
/* a computer (mock 2, at every width from 861 px): the record is a card — the top line and the page — and «Детали» lie
   beside it on the frame, 300 px, 6 px apart, with their own scroll; hidden, their place stays empty (the page does not move) */
@media (min-width: 861px) {
  /* the card's frosted ground is a layer under the top line and the page (a blur on them would hold the panel inside) */
  .main:has(#content > .issue) { position: relative; isolation: isolate; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .main:has(#content > .issue)::before { content: ""; position: absolute; z-index: -1; inset: 0 306px 0 0; border-radius: var(--r-lg); background: color-mix(in lch, var(--base) 84%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.15); backdrop-filter: blur(28px) saturate(1.15); pointer-events: none; }
  .main:has(#content > .issue) > .topbar, .main:has(#content > .issue) > .split { margin-right: 306px; }
  .split:has(> #content > .issue), .content:has(> .issue) { position: static; }
  .issue, .issue.no-side { display: block; }
  /* no transform on the page while it comes in: it would carry the panel with it */
  #content.enter > .issue { animation-name: fade; }
  #content.enter > .issue > .issue-side { animation: slide-in var(--t-slow) var(--ease) 40ms both; }
  .issue-main { max-width: calc(860px * var(--z, 1)); margin: 0 auto; }
  .main:has(#content > .issue) > .topbar, .main:has(#content > .issue) > .split { transition: margin-right var(--t) var(--ease); }
  .main:has(#content > .issue)::before { transition: right var(--t) var(--ease); }
  .issue > .issue-side { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 16px 8px; }
}

/* a phone (mock 2): «Детали» are a sheet from below over a dimmed page — rises on a spring, lowers back */
@media (max-width: 860px) {
  .issue .issue-side, .issue.no-side .issue-side { display: block; position: fixed; z-index: 46; left: 0; right: 0; bottom: 0; max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--elev); box-shadow: var(--shadow);
    transform: translateY(105%); visibility: hidden; opacity: 1; transition: transform 420ms var(--spring), visibility 0s linear 420ms; }
  .issue.sheet .issue-side { transform: none; visibility: visible; transition: transform 420ms var(--spring); }
  .issue-side .dhead:has(> .dmodes) { position: sticky; top: 0; z-index: 1; min-height: 60px; background: var(--elev); }
  .sheet-scrim { position: fixed; inset: 0; z-index: 45; background: var(--scrim-modal); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade var(--t) var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .issue .issue-side { transition: none; } }

/* a computer where the page is narrower than its own width (a smaller or zoomed window): hidden «Детали» give their
   place to the page — the card widens; shown, it narrows again. From 1520 px the page is at its full width already,
   and the panel's place stays empty (the page does not move) */
@media (min-width: 861px) and (max-width: 1519px) {
  .main:has(#content > .issue.no-side) > .topbar, .main:has(#content > .issue.no-side) > .split { margin-right: 0; }
  .main:has(#content > .issue.no-side)::before { right: 0; }
}

/* A long text of a record is folded by default (Vlad, 13.11.2026): about ten lines, fading out at the bottom; «Развернуть»
   unfolds it, a click into the text to edit it too. Opening and closing is short and smooth. */
[data-desc].foldable { overflow: clip; interpolate-size: allow-keywords; }
[data-desc].foldable.anim { transition: height .15s ease; } /* only a press animates: the page opens folded at once */
[data-desc].foldable.folded { height: calc(16 * var(--fs-read)); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3 * var(--fs-read)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3 * var(--fs-read)), transparent); }
.desc-more { margin: 6px 0 6px -14px; gap: 4px; }
.desc-chev { display: inline-flex; transition: transform .15s ease; }
.desc-more .desc-chev .i { width: 13px; height: 13px; }
.desc-more.open .desc-chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { [data-desc].foldable.anim { transition: none; } }