/* «Детали»: the panel beside a record and the sheet on a phone (docs/VIEW-DESIGN.md §4, mock 2). Markup: views/details.js.
   Every rule of these parts lives here and nowhere else. */

.issue-side { padding: 10px 14px 18px 6px; }


/* the head: the title on the left, «Добавить» on the right */
.dfields { display: flex; flex-direction: column; gap: 2px; }
.dhead { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 0 0 8px; }
.dtitle { color: var(--text); font-size: var(--fs-body); font-weight: 600; }
.dadd { height: 32px; padding: 0 12px; gap: 6px; border: 0; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.dadd svg, .dadd .i { width: 15px; height: 15px; }
@media (hover: hover) { .dadd:hover { background: var(--accent-soft-2); } }

/* a heading of a part: small capitals, its «+» on the right */
.dsec { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 12px 0 0 8px; color: var(--text-4); font-size: var(--fs-caption); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.dsec .round-btn { display: grid; place-items: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: var(--r-full); color: var(--icon); letter-spacing: 0; text-transform: none; }
.dsec .round-btn svg, .dsec .round-btn .i { width: 16px; height: 16px; }

/* a row: the caption (104 px) and the plates */
.dgroup { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 3px 8px; }
.dcap { width: 104px; flex: none; color: var(--text-3); font-size: var(--fs-body); line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvals { display: flex; flex: 1; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dvals .chip { height: 26px; min-height: 26px; max-width: 100%; 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; }
.dvals .chip svg, .dvals .chip .i { width: 16px; height: 16px; color: var(--icon); }
.dvals .chip:has(> .plate-av:first-child > .avatar), .dvals .chip:has(> .avatar:first-child) { padding-left: 2px; padding-right: 10px; }
.dvals .plate .avatar { width: 22px; height: 22px; }
.dvals .chip:active { background: var(--active); }

/* «Дополнительно»: a folded part with a count; inside — the same rows */
.more-fields { margin-top: 12px; }
.more-fields > summary { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: var(--r-sm); color: var(--text-3); font-size: var(--fs-body); cursor: pointer; list-style: none; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary:focus { outline: none; }
.more-fields > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
@media (hover: hover) { .more-fields > summary:hover { background: var(--hover); } }
.more-chev { display: inline-flex; color: var(--text-4); transition: transform var(--t-fast) var(--ease); }
.more-chev svg, .more-chev .i { width: 12px; height: 12px; }
.more-fields[open] .more-chev { transform: rotate(90deg); }
.more-fields.closing .more-chev { transform: none; }
.more-n { color: var(--text-4); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.more-rows { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.more-empty { color: var(--text-4); line-height: 26px; padding: 0 4px; }
.more-empty.editable { cursor: pointer; }
@media (hover: hover) { .more-empty.editable:hover { color: var(--text); } }

/* the head of the panel (mock 2): what it shows — the fields or the history — on the left, «Добавить» on the right */
.dmodes .vbtn { width: 34px; }
.dhead:has(> .dmodes) { min-height: 54px; padding-left: 0; }
/* the history of changes in the panel: lines that wrap, the avatar at the first line */
.dhist { display: none; flex-direction: column; gap: 2px; }
.issue-side.hist .dhist { display: flex; }
.issue-side.hist .record-fields > :not(.dhead) { display: none; }
.dhist-list { display: flex; flex-direction: column; gap: 12px; padding: 6px 8px 12px; }
.dhist-list .ev { padding-left: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--text-3); }
.dhist-list .ev > .avatar { width: 22px; height: 22px; font-size: 9px; }
.dhist-list .ev b { color: var(--text); font-weight: 550; }
.dhist-list .row.more-row { margin: 0; }
/* a link plate (mock 2): the kind's icon, the number in grey monospace, the name cut with «…» */
.dvals .rec-plate { max-width: 100%; }
.dvals .rec-plate .ref-num { flex: none; color: var(--text-4); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dvals .rec-plate .nm-full { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* plates without a caption (the field is named as its part): they take the whole width */
.dgroup.solo { padding-left: 8px; }
/* a yes/no field: a switch in place of the plates; pressed as a whole, it stays there on or off */
.dswitch { display: inline-flex; align-items: center; height: 26px; padding: 0 2px; border-radius: var(--r-full); }
.dswitch.editable { cursor: pointer; }