/* The Field Guide's Details panel: a property list (label left, value right), popovers for the choices that need room. Ported from the validated mockup (design/details.html). */



/* Panel */
.dp-head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 10px 0 20px; border-bottom: 1px solid var(--line); flex: none; }
.dp-head b { font-size: 14px; }
.dp-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 4px calc(20px - var(--sb)) 20px 20px; }
.dp-group { padding: 10px 0; }
.dp-group + .dp-group { border-top: 1px solid var(--line); }

.dp-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.dp-label { padding: 9px 0; color: var(--muted); font-size: 12.5px; line-height: 18px; white-space: nowrap; }
.dp-value { min-width: 0; display: flex; align-items: center; min-height: 36px; padding: 5px 0; font-size: 13px; line-height: 18px; }
.dp-text { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); white-space: nowrap; }
.dp-text .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.dp-text b { font-weight: 500; }
.dp-dim { color: var(--muted); }
.dp-line { display: flex; align-items: center; gap: 8px; width: 100%; }
.dp-line > .dp-text { flex: 1; }
.dp-stack { display: grid; gap: 3px; justify-items: start; width: 100%; }
.dp-two { display: grid; min-width: 0; }
.dp-two small { color: var(--muted); font-size: 12px; line-height: 16px; }
.dp-who { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.dp-who > .ico { width: 15px; height: 15px; margin-top: 2px; color: var(--muted); flex: none; }

/* Shared with: chips; the whole value opens the popover */
.dp-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dp-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 8px 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--text); font-size: 12.5px; font-weight: 500; }
.dp-chip .ico { width: 14px; height: 14px; color: var(--c); flex: none; }
.dp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-edit { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; width: calc(100% + 12px); margin: -1px -6px; padding: 1px 6px; min-height: 26px; border-radius: var(--r-btn); text-align: left; transition: background-color .15s; }
.dp-edit:hover, .dp-row.is-active .dp-edit { background: var(--hover); }

/* Type: the name, then five icon chips with a sliding marker */
.dp-type { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.dp-type-name { font-weight: 500; white-space: nowrap; }
.dp-types { position: relative; display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: 8px; background: var(--seg); }
.dp-types button { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 24px; border-radius: 6px; color: var(--muted); transition: color .18s; }
.dp-types button:hover { color: var(--text); }
.dp-types button.is-on { color: var(--accent-text); }
.dp-types .ico { width: 15px; height: 15px; }
.dp-types-marker { position: absolute; top: 2px; left: 0; height: 24px; border-radius: 6px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .26s var(--ease), width .26s var(--ease); }

/* Checked and Check again */
.dp-ib { display: grid; place-items: center; width: 28px; height: 28px; margin: -5px -6px -5px 0; border-radius: var(--r-btn); color: var(--muted); transition: background-color .15s, color .15s; flex: none; }
.dp-ib:hover:not(:disabled) { background: var(--hover); color: var(--accent-text); }
.dp-ib .ico { width: 17px; height: 17px; }
.dp-ib.is-done { color: #4ac578; cursor: default; }
.dp-date { display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: -4px 0; padding: 0 10px 0 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text); font-size: 12.5px; font-weight: 500; transition: border-color .15s, background-color .15s, color .15s; }
.dp-date .ico { width: 15px; height: 15px; color: var(--muted); }
.dp-date.is-empty { color: var(--muted); border-style: dashed; }
.dp-date:hover, .dp-row.is-active .dp-date { border-color: var(--line-3); background: var(--hover); color: var(--text); }

/* Small text links (what agents get, all changes) */
.dp-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-size: 12.5px; font-weight: 600; transition: color .15s; }
.dp-link:hover { color: var(--text); }
.dp-link .ico { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.dp-link .ico:first-child:not(:last-child) { color: var(--muted); }
.dp-link:hover .ico[data-ico="arrow-right"] { transform: translateX(2px); }

/* Links: a count that unfolds the list under the row */
.dp-fold { display: inline-flex; align-items: center; gap: 4px; height: 26px; margin: -4px 0 -4px -6px; padding: 0 6px; border-radius: 6px; color: var(--text); transition: background-color .15s; }
.dp-fold:hover:not(:disabled) { background: var(--hover); }
.dp-fold:disabled { color: var(--muted); cursor: default; }
.dp-fold .ico { width: 14px; height: 14px; color: var(--muted); transition: transform .2s var(--ease); }
.dp-fold.is-open .ico { transform: rotate(180deg); }
.dp-fold-body { display: grid; gap: 1px; padding: 0 0 6px 92px; }
.dp-fold-body[hidden] { display: none; }
.dp-doc { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 6px; margin-left: -6px; border-radius: 6px; color: var(--text-2); font-size: 12.5px; text-align: left; transition: background-color .15s, color .15s; }
.dp-doc:hover { background: var(--hover); color: var(--text); }
.dp-doc .ico { width: 14px; height: 14px; color: var(--muted); flex: none; }
.dp-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-doc.is-ghost { color: var(--muted); cursor: default; }
.dp-doc.is-ghost:hover { background: none; }

.dp-switch { width: 34px; height: 20px; }
.dp-switch span { top: 3px; left: 3px; width: 14px; height: 14px; }
.dp-switch[aria-checked="true"] span { transform: translateX(14px); }
.dp-switch:disabled { opacity: .5; cursor: default; }

.dp-danger { display: inline-flex; align-items: center; gap: 7px; height: 30px; margin-left: -8px; padding: 0 8px; border-radius: var(--r-btn); color: var(--danger); font-size: 12.5px; font-weight: 600; transition: background-color .15s; }
.dp-danger .ico { width: 15px; height: 15px; }
.dp-danger:hover, .dp-danger.is-armed { background: var(--danger-soft); }

/* Popovers */
.pop { position: fixed; z-index: 80; width: 300px; max-height: min(520px, calc(100vh - 16px)); display: flex; flex-direction: column; border-radius: var(--r-dlg); border: 1px solid var(--line-2); background: var(--menu); box-shadow: var(--shadow); outline: none; }
.pop[hidden] { display: none; }
.pop-head { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.pop-head b { font-size: 13px; }
.pop-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 6px calc(8px - var(--sb)) 6px 8px; }
.pop-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 0 8px 0 calc(8px + var(--d) * 20px); border-radius: 6px; text-align: left; transition: background-color .15s; }
.pop-pick:hover { background: var(--hover); }
.pop-pick > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pop-pick > span:first-child .ico { width: 15px; height: 15px; color: var(--c); flex: none; }
.pop-pick b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); transition: color .15s; }
.pop-pick.is-on b { color: var(--text); }
.pop-pick .switch { width: 30px; height: 18px; }
.pop-pick .switch span { top: 3px; left: 3px; width: 12px; height: 12px; }
.pop-pick .switch[aria-checked="true"] span { transform: translateX(12px); }
.pop-sum { display: flex; gap: 8px; align-items: flex-start; min-height: 58px; padding: 11px 16px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; line-height: 18px; flex: none; }
.pop-sum .ico { width: 15px; height: 15px; margin-top: 1px; color: var(--accent-text); flex: none; }
.pop-sum.is-bad .ico { color: var(--warn); }
.pop-sum b { color: var(--text); font-weight: 600; }
.pop-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); flex: none; }

.pop-date { width: 280px; }
.pop-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px 14px 4px; }
.pop-q { height: 30px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; font-weight: 500; transition: border-color .15s, background-color .15s, color .15s; }
.pop-q:hover { background: var(--hover); color: var(--text); }
.pop-q.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--accent-text); }
.cal { padding: 8px 14px 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-head b { font-size: 13px; font-weight: 600; }
.cal-head .icon-btn { width: 28px; height: 28px; }
.cal-head .icon-btn .ico { width: 16px; height: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grid i { font-style: normal; color: var(--muted); font-size: 11px; line-height: 24px; }
.cal-day { height: 30px; border-radius: 6px; color: var(--text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s; }
.cal-day:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.cal-day:disabled { color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: default; }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--line-3); }
.cal-day.is-on { background: var(--primary); color: #fff; }


/* Breathing room: 44px rows on a 20px line, more space between groups and inside stacked values */
.dp-head { height: 56px; }
.dp-body { padding-top: 6px; padding-bottom: 24px; }
.dp-group { padding: 14px 0; }
.dp-label { padding: 12px 0; line-height: 20px; }
.dp-value { min-height: 44px; padding: 12px 0; line-height: 20px; }
.dp-stack { gap: 8px; }
.dp-two { gap: 2px; }
.dp-two small { line-height: 18px; }
.dp-who > .ico { margin-top: 3px; }
.dp-chips { gap: 12px 6px; }
.dp-chip { height: 26px; margin: -3px 0; }
.dp-edit { margin: -4px -6px; padding: 4px 6px; }
.dp-types { margin: -4px 0; }
.dp-date { height: 28px; margin: -4px 0; }
.dp-fold { height: 28px; margin: -4px 0 -4px -6px; }
.dp-ib { margin: -4px -6px -4px 0; }
.dp-fold-body { gap: 2px; padding: 0 0 10px 92px; }
.dp-doc { min-height: 32px; }
.dp-danger { height: 32px; }

/* The switch sized to the 13px text around it */
.dp-switch { width: 28px; height: 16px; border-radius: 8px; }
.dp-switch span { top: 2px; left: 2px; width: 12px; height: 12px; }
.dp-switch[aria-checked="true"] span { transform: translateX(12px); }
.dp-line .dp-switch + .dp-text { margin-left: 2px; }
.pop-pick .switch { width: 28px; height: 16px; border-radius: 8px; }
.pop-pick .switch span { top: 2px; left: 2px; width: 12px; height: 12px; }
.pop-pick .switch[aria-checked="true"] span { transform: translateX(12px); }

/* Shared with: no box on hover; the chips brighten */
.dp-edit, .dp-edit:hover, .dp-row.is-active .dp-edit { background: none; }
.dp-edit { justify-content: flex-start; align-items: center; width: auto; max-width: 100%; margin: -4px 0; padding: 4px 0; }
.dp-edit .dp-chip { transition: background-color .15s; }
.dp-edit:hover .dp-chip, .dp-row.is-active .dp-edit .dp-chip { background: color-mix(in srgb, var(--c) 24%, transparent); }

/* Links: two count chips, arrow in and arrow out */
.dp-lchips { display: flex; gap: 6px; }
.dp-lchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin: -4px 0; padding: 0 10px 0 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text); transition: border-color .15s, background-color .15s; }
.dp-lchip .ico { width: 15px; height: 15px; color: var(--muted); transition: color .15s; }
.dp-lchip b { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.dp-lchip:hover:not(:disabled) { border-color: var(--line-3); background: var(--hover); }
.dp-lchip.is-open { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.dp-lchip.is-open .ico { color: var(--accent-text); }
.dp-lchip:disabled { color: var(--muted); cursor: default; }
.dp-fold-body small { display: block; margin: 2px 0 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.dp-fold-body + .dp-fold-body:not([hidden]) { padding-top: 4px; }
.dp-fold-body { grid-template-columns: minmax(0, 1fr); }
.dp-doc { min-width: 0; max-width: 100%; }
.dp-lchip { gap: 5px; padding: 0 8px 0 7px; }
.dp-lchip span { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.dp-lchip b { min-width: 18px; height: 18px; margin-left: 2px; padding: 0 5px; border-radius: 9px; background: var(--hover-strong); color: var(--text); font-size: 11.5px; line-height: 18px; text-align: center; }
.dp-lchip.is-open span { color: var(--text); }

/* Next review: the date chip says when it is automatic */
.dp-date .dp-auto { margin-left: 2px; padding: 0 5px; border-radius: 4px; background: var(--hover-strong); color: var(--accent-text); font: 600 10.5px/16px "Noto Sans", sans-serif; font-style: normal; }
.dp-date.is-static { border-color: transparent; padding-left: 0; }
.pop-auto { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: calc(100% - 28px); margin: 12px 14px 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line-2); text-align: left; transition: border-color .15s, background-color .15s; }
.pop-auto:hover { background: var(--hover); }
.pop-auto b { display: block; font-size: 13px; font-weight: 600; }
.pop-auto small { color: var(--muted); font-size: 12px; }
.pop-auto > .ico { width: 16px; height: 16px; color: var(--accent-text); opacity: 0; transition: opacity .15s; flex: none; }
.pop-auto.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.pop-auto.is-on > .ico { opacity: 1; }

/* In the app: the panel column, the scroll body, a due review, the space's own fields and actions */
.guide { grid-template-columns: 270px minmax(0, 1fr) 340px; }
.gi-head { height: 56px; padding: 0 10px 0 20px; }
.gi-scroll.dp-body { padding: 4px calc(20px - var(--sb)) 24px 20px; }
.dp-date.is-due { border-color: color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn); }
.dp-date.is-due .ico { color: var(--warn); }
.dp-input { width: 100%; height: 30px; margin: -5px 0; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--input); color: var(--text); font-size: 13px; transition: border-color .15s; }
.dp-input:hover { border-color: var(--line-3); }
.dp-input:focus { border-color: var(--accent); outline: none; }
.dp-plain { display: inline-flex; align-items: center; gap: 7px; height: 32px; margin-left: -8px; padding: 0 8px; border-radius: var(--r-btn); color: var(--text); font-size: 12.5px; font-weight: 600; transition: background-color .15s; }
.dp-plain .ico { width: 15px; height: 15px; color: var(--muted); }
.dp-plain:hover { background: var(--hover); }
.dp-danger:disabled { opacity: .45; cursor: default; background: none; }
.dp-stack > .dp-doc { width: 100%; margin: 0 0 0 -6px; }
.dp-doc b { margin-left: auto; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.pop-line { display: flex; gap: 8px; align-items: flex-start; }
.pop-line + .pop-line, .pop-line + .v2-fold { margin-top: 8px; }
.pop-line .ico { width: 15px; height: 15px; margin-top: 1px; color: var(--accent-text); flex: none; }
.pop-line.is-bad .ico { color: var(--warn); }
.pop-sum { display: block; }
.pop-sum .v2-disclose { margin-top: 8px; }
.pop-sum .v2-moves { max-height: 160px; overflow-y: auto; }

/* The tree: a mark on documents agents cannot read, and a toggle to show only those */
.gf-find { display: flex; gap: 6px; margin: 0 12px 8px; }
.gf-find .gf-search { flex: 1; margin: 0; }
.gf-toggle { width: 34px; height: 34px; border: 1px solid var(--line-2); transition: background-color .15s, color .15s, border-color .15s; }
.gf-toggle .ico { width: 16px; height: 16px; }
.gf-toggle.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--accent-text); }

@media (max-width: 1180px) {
	.guide { grid-template-columns: 230px minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
	.guide { grid-template-columns: minmax(0, 1fr); }
	.g-info { width: min(380px, 100vw); }
	.gi-head { padding-left: 16px; }
	.gi-scroll.dp-body { padding-left: 16px; padding-right: calc(16px - var(--sb)); }
}
@media (max-width: 480px) {
	.pop, .pop-date { width: calc(100vw - 16px); }
}
.dp-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The tree's filter and its toggle share the row without either being cut */
.gf-find .gf-search { width: auto; min-width: 0; }

/* A repaint of what is already on screen (a refresh, an action) never replays the entrances */
.guide.is-still .pv-tile, .guide.is-still .g-card, .guide.is-still .domino > *, .guide.is-still .g-trow { animation: none; }

/* The first property sits close under the panel's title */
.dp-body > .dp-group:first-child { padding-top: 0; }

/* Tooltips open in the top layer (above dialogs): no popover defaults, a short fade in */
.tip { inset: auto; top: 0; left: 0; margin: 0; overflow: visible; }
@starting-style { .tip.is-on { opacity: 0; } }

/* A document agents cannot read: a small amber tag at the end of its row */
.ft-noagents { display: inline-flex; align-items: center; gap: 3px; height: 18px; margin-left: auto; padding: 0 6px; border-radius: 4px; background: var(--warn-soft); color: var(--warn); font: 600 10.5px/18px "Noto Sans", sans-serif; font-style: normal; white-space: nowrap; flex: none; }
.ft-noagents .ico { width: 12px; height: 12px; }
.ft-item:has(.ft-noagents) > span:not(.dico) { min-width: 0; }

/* Space details: name and about edited in place, kind chips, where it sits, counts, people, actions */
.dp-edit-text { display: block; width: 100%; margin: -3px -6px; padding: 3px 6px; border-radius: 6px; color: var(--text); font-weight: 500; outline: none; overflow-wrap: anywhere; cursor: text; transition: background-color .15s, box-shadow .15s; }
.dp-edit-text.is-long { font-weight: 400; }
.dp-edit-text:hover, .dp-edit-text:focus { background: var(--hover); }
.dp-edit-text:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
.dp-edit-text:empty::before { content: attr(data-placeholder); color: var(--muted); }
.dp-long { white-space: normal; }
.dp-kinds { display: inline-flex; gap: 2px; margin: -4px 0; padding: 2px; border-radius: 8px; background: var(--seg); }
.dp-kinds button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; transition: color .15s, background-color .15s; }
.dp-kinds button .ico { width: 14px; height: 14px; }
.dp-kinds button:hover { color: var(--text); }
.dp-kinds button.is-on { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.dp-chipbtn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; margin: -4px 0; padding: 0 10px 0 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text); font-size: 12.5px; font-weight: 500; transition: border-color .15s, background-color .15s; }
.dp-chipbtn .ico { width: 14px; height: 14px; color: var(--muted); flex: none; }
.dp-chipbtn:hover { border-color: var(--line-3); background: var(--hover); }
.dp-counts { display: flex; flex-wrap: wrap; gap: 8px 6px; margin: -4px 0; }
.dp-counts button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 10px 0 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; white-space: nowrap; transition: border-color .15s, background-color .15s, color .15s; }
.dp-counts button:hover { border-color: var(--line-3); background: var(--hover); color: var(--text); }
.dp-counts .ico { width: 14px; height: 14px; color: var(--muted); flex: none; }
.dp-counts b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-text.is-warn, .dp-text.is-warn .ico { color: var(--warn); }
.dp-people { display: inline-flex; align-items: center; }
.dp-people .avatar + .avatar { margin-left: -6px; }
.dp-people .avatar { box-shadow: 0 0 0 2px var(--panel); }
.dp-people small { margin-left: 10px; color: var(--muted); font-size: 12.5px; }
.dp-actions { display: grid; justify-items: start; gap: 2px; }

/* Compact dialogs (History, What agents get): a head the height of the panel heads, no footer */
.dlg.dlg-compact { width: min(560px, calc(100vw - 32px)); }
.cd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 10px 0 18px; border-bottom: 1px solid var(--line); flex: none; }
.cd-head > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cd-head > span > .ico { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
.cd-head b { font-size: 14px; white-space: nowrap; }
.cd-head small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.cd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; flex: none; }
.cd-seg { padding: 2px; }
.cd-seg button { height: 26px; padding: 0 10px; font-size: 12px; }
.cd-seg .seg-marker { top: 2px; height: 26px; }
.dlg-body.cd-body { padding: 8px calc(10px - var(--sb)) 12px 10px; }
.cd-record { padding: 0 8px; }
.cd-record .dp-label { font: 12px/20px var(--mono); }
.cd-val { font: 12.5px/20px var(--mono); color: var(--text); overflow-wrap: anywhere; }
.cd-json { margin: 4px 8px; padding: 12px 14px; border-radius: 8px; background: var(--code); color: var(--text-2); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-hrow { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 32px; border-radius: 8px; transition: background-color .15s; }
.cd-hrow:hover { background: var(--hover); }
.cd-hrow::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.cd-hrow:first-child::before { top: 50%; }
.cd-hrow:last-child::before { bottom: 50%; }
.cd-hrow:only-child::before { display: none; }
.cd-dot { position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2px var(--line-3); }
.cd-dot.is-now { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cd-hmain { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cd-hmain b { font-weight: 500; font-size: 13px; }
.cd-hmain b span { margin-left: 8px; color: var(--muted); font-weight: 400; font-size: 12.5px; }
.cd-hmain small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-hacts { display: flex; gap: 14px; opacity: 0; transition: opacity .15s; }
.cd-hrow:hover .cd-hacts, .cd-hrow:focus-within .cd-hacts { opacity: 1; }
.cd-now { padding: 0 7px; height: 20px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 600; line-height: 20px; }
.cd-version { padding: 4px 8px; }
.cd-vhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.cd-vbody { padding-top: 8px; font-size: 14px; }
@media (hover: none) { .cd-hacts { opacity: 1; } }

/* Top bar: 52px like the Field Guide's heads, full width; tabs left, search and settings right */
.top-in { height: 52px; max-width: none; padding: 0 16px; gap: 16px; }
.top .logo-mark { width: 30px; height: 30px; }
.top-nav { margin-left: 8px; }
.top-nav a { padding: 0 12px; font-size: 13px; }
.top-nav a .ico { width: 16px; height: 16px; }
.top-count { min-width: 18px; height: 18px; margin-left: 2px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.top-count[hidden] { display: none; }
.top-right { gap: 8px; }
.top .jump { height: 34px; min-width: 0; gap: 8px; padding: 0 8px 0 10px; }
.top .jump span { flex: none; }
.top .jump kbd { margin-left: 18px; }
.top .profile-chip { height: 34px; }
.top .profile-chip .avatar { width: 26px; height: 26px; font-size: 10px; }
@media (max-width: 640px) {
	.top-nav a span { display: none; }
	.top .jump kbd { display: none; }
}

/* Tree: each child carries its piece of the branch line; the last one ends in a rounded elbow into its row */
.ft-kids::before { display: none; }
.ft-kids > * { position: relative; }
.ft-kids > *::before { content: ""; position: absolute; left: -4px; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--c, var(--line-3)) 38%, transparent); pointer-events: none; }
.ft-kids > :last-child::before { bottom: auto; height: calc(var(--row) / 2); width: 9px; background: none; border-left: 1px solid color-mix(in srgb, var(--c, var(--line-3)) 38%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c, var(--line-3)) 38%, transparent); border-bottom-left-radius: 8px; }
.ft-kids > .ft-none::before { display: none; }
.ft-space-ico .ico { color: var(--c); }

/* Extensions' fields in Details: edited in place */
.dp-field-in { width: 100%; height: 32px; margin: -6px 0; padding: 0 10px; border-radius: 6px; border: 1px solid var(--accent); background: var(--input); color: var(--text); font-size: 13px; }
.dp-field-in:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.dp-text.is-muted { color: var(--muted); }

/* Scripts: their files in Details, and a file's text */
.dp-files { display: grid; gap: 4px; width: 100%; }
.dp-file { display: grid; gap: 1px; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; text-align: left; transition: background-color .15s; }
.dp-file:hover { background: var(--hover); }
.dp-file > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dp-file .ico { width: 15px; height: 15px; color: var(--muted); flex: none; }
.dp-file b { font: 500 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-file small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dp-file > span small { margin-left: auto; font-family: var(--mono); }
.dp-hint { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dlg.dlg-file { width: min(780px, calc(100vw - 32px)); }
.dp-code { white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.dp-code, .cu-file .cu-diff, .cd-json { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }