/* ============================================================
   IP & DATA — capability-page-only styles.
   Layered on shared sample-panel chrome from bento.css.
   Scoped via body.vita-service--ip-data + .vita-cap-ipd-* ns.
   Rules: .claude/Rules/responsive-bento-page-rules.md
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   PROMISE-TILE GLYPHS — folder / book / db (new for IP & Data)
   Reuse .vita-cap-promise__glyph wrapper from bento.css.
   Tint via colour inheritance so the glyph reads on any tile bg.
   ──────────────────────────────────────────────────────────── */

/* ── Folder glyph (--folder) — tabbed folder + 3 file slips ───── */
.vita-cap-promise__glyph--folder {
	height: 84px;
	display: flex;
	align-items: flex-end;
}
.vita-cap-ipd-folder {
	position: relative;
	display: block;
	width: 92px;
	height: 76px;
}
.vita-cap-ipd-folder__tab {
	position: absolute;
	left: 0;
	top: 0;
	width: 42px;
	height: 12px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 4px 4px 0 0;
}
.vita-cap-ipd-folder__body {
	position: absolute;
	left: 0;
	top: 8px;
	width: 92px;
	height: 60px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 0 4px 6px 6px;
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 4px;
}
.vita-cap-ipd-folder__body span {
	display: block;
	height: 4px;
	background: rgba(255, 136, 71, 0.55); /* darker stripe — tinted to tile bg */
	border-radius: 2px;
}
.vita-cap-ipd-folder__body span:nth-child(1) { width: 80%; }
.vita-cap-ipd-folder__body span:nth-child(2) { width: 60%; }
.vita-cap-ipd-folder__body span:nth-child(3) { width: 72%; }

/* ── Book glyph (--book) — stacked horizontal lines (page rules) — */
.vita-cap-promise__glyph--book {
	height: 84px;
	display: flex;
	align-items: flex-end;
}
.vita-cap-ipd-book {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100px;
	height: 76px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.85);
	border-left: 3px solid rgba(255, 255, 255, 1);
	border-radius: 2px 6px 6px 2px;
	justify-content: space-around;
}
.vita-cap-ipd-book span {
	display: block;
	height: 3px;
	background: rgba(107, 157, 255, 0.55); /* tinted to scheduling tile bg */
	border-radius: 2px;
}
.vita-cap-ipd-book span:nth-child(1) { width: 100%; }
.vita-cap-ipd-book span:nth-child(2) { width: 75%; }
.vita-cap-ipd-book span:nth-child(3) { width: 85%; }
.vita-cap-ipd-book span:nth-child(4) { width: 65%; }
.vita-cap-ipd-book span:nth-child(5) { width: 90%; }

/* ── DB cylinder glyph (--db) — 3 stacked disks ──────────────── */
.vita-cap-promise__glyph--db {
	height: 84px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}
.vita-cap-ipd-db-glyph {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 72px;
}
.vita-cap-ipd-db-glyph span {
	display: block;
	width: 100%;
	height: 16px;
	background: rgba(15, 27, 45, 0.16);
	border: 1px solid rgba(15, 27, 45, 0.55);
	border-radius: 50%;
	box-shadow: inset 0 2px 0 rgba(15, 27, 45, 0.1);
}
.vita-cap-ipd-db-glyph span:nth-child(1) { background: rgba(15, 27, 45, 0.32); }
.vita-cap-ipd-db-glyph span:nth-child(2) { background: rgba(15, 27, 45, 0.24); }
.vita-cap-ipd-db-glyph span:nth-child(3) { background: rgba(15, 27, 45, 0.16); }


/* ────────────────────────────────────────────────────────────
   SAMPLE PANEL — main column padding/scroll already handled by
   bento.css. Below: per-view content.
   ──────────────────────────────────────────────────────────── */

body.vita-service--ip-data .vita-cap-sample__main {
	gap: 12px;
}


/* ────────────────────────────────────────────────────────────
   FILES VIEW — VS Code-style file tree
   ──────────────────────────────────────────────────────────── */

.vita-cap-ipd-tree {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	padding: 8px 0;
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.78);
}

.vita-cap-ipd-tree__row {
	display: grid;
	grid-template-columns: 14px 16px minmax(0, 1fr) auto;
	gap: 6px;
	align-items: center;
	padding: 4px 12px;
	min-height: 22px;
	border-radius: 4px;
	margin: 0 6px;
}
.vita-cap-ipd-tree__row:hover {
	background: rgba(255, 255, 255, 0.04);
}

.vita-cap-ipd-tree__chev {
	color: rgba(255, 255, 255, 0.4);
	font-size: 10px;
	width: 14px;
	text-align: center;
	line-height: 1;
}
.vita-cap-ipd-tree__chev--blank { color: transparent; }

.vita-cap-ipd-tree__icon {
	position: relative;
	display: inline-flex;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	font-size: 0; /* hide any text fallback; brand glyph is rendered via ::after mask */
}
/* Real brand / file-format SVGs from Simple Icons (CC0) live in
   themes/vitasiti/assets/img/brands/. The pseudo-element renders the masked
   glyph in white (or a brand-specific colour where the parent bg is light). */
.vita-cap-ipd-tree__icon::after {
	content: '';
	position: absolute;
	inset: 2px;
	background-color: #ffffff;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 11px 11px;
	mask-size: 11px 11px;
}
/* Folder icon stays a plain coloured swatch — no glyph mask. */
.vita-cap-ipd-tree__icon--folder { background: #F0C674; }
.vita-cap-ipd-tree__icon--folder::after { content: none; }
/* env + conf + dump aren't single-brand file types, so suppress the glyph
   and let the bg colour do the work. */
.vita-cap-ipd-tree__icon--conf { background: rgba(255, 255, 255, 0.3); }
.vita-cap-ipd-tree__icon--conf::after { content: none; }
.vita-cap-ipd-tree__icon--env  { background: rgba(255, 136, 71, 0.5); }
.vita-cap-ipd-tree__icon--env::after { content: none; }

/* Real-brand bg + masked glyph — file extension → its language icon. */
.vita-cap-ipd-tree__icon--ts   { background: #3178C6; }
.vita-cap-ipd-tree__icon--ts::after   { -webkit-mask-image: url('../../img/brands/typescript.svg'); mask-image: url('../../img/brands/typescript.svg'); }

.vita-cap-ipd-tree__icon--tsx  { background: #20232A; }
.vita-cap-ipd-tree__icon--tsx::after  { background-color: #61DAFB; -webkit-mask-image: url('../../img/brands/react.svg'); mask-image: url('../../img/brands/react.svg'); }

.vita-cap-ipd-tree__icon--sql  { background: #336791; }
.vita-cap-ipd-tree__icon--sql::after  { -webkit-mask-image: url('../../img/brands/postgresql.svg'); mask-image: url('../../img/brands/postgresql.svg'); }

.vita-cap-ipd-tree__icon--md   { background: #ffffff; }
.vita-cap-ipd-tree__icon--md::after   { background-color: #000000; -webkit-mask-image: url('../../img/brands/markdown.svg'); mask-image: url('../../img/brands/markdown.svg'); }

.vita-cap-ipd-tree__icon--sh   { background: #1F3933; }
.vita-cap-ipd-tree__icon--sh::after   { background-color: #6BE0B8; -webkit-mask-image: url('../../img/brands/gnubash.svg'); mask-image: url('../../img/brands/gnubash.svg'); }

.vita-cap-ipd-tree__icon--json { background: #F5F0E6; }
.vita-cap-ipd-tree__icon--json::after { background-color: #292929; -webkit-mask-image: url('../../img/brands/json.svg'); mask-image: url('../../img/brands/json.svg'); }

.vita-cap-ipd-tree__icon--dump { background: #336791; }
.vita-cap-ipd-tree__icon--dump::after { -webkit-mask-image: url('../../img/brands/postgresql.svg'); mask-image: url('../../img/brands/postgresql.svg'); }

.vita-cap-ipd-tree__name {
	color: #fff;
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.vita-cap-ipd-tree__row--folder .vita-cap-ipd-tree__name {
	font-weight: 600;
}

.vita-cap-ipd-tree__kind {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
}
.vita-cap-ipd-tree__kind--code   { background: color-mix(in srgb, var(--cap-accent) 14%, transparent); color: var(--cap-accent, #6BE0B8); }
.vita-cap-ipd-tree__kind--data   { background: rgba(255, 136, 71, 0.18);  color: #FF8847; }
.vita-cap-ipd-tree__kind--docs   { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); }
.vita-cap-ipd-tree__kind--infra  { background: rgba(107, 157, 255, 0.18); color: #9CB8FF; }
.vita-cap-ipd-tree__kind--script { background: rgba(255, 224, 130, 0.16); color: #F0C674; }


/* ────────────────────────────────────────────────────────────
   REPOS VIEW
   ──────────────────────────────────────────────────────────── */

.vita-cap-ipd-repos {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vita-cap-ipd-repo-row {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.vita-cap-ipd-repo-row:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

.vita-cap-ipd-repo-row__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.vita-cap-ipd-repo-row__name {
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 600;
}

.vita-cap-ipd-repo-row__branch {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--cap-accent, #6BE0B8);
	background: color-mix(in srgb, var(--cap-accent) 12%, transparent);
	border-radius: 999px;
	padding: 2px 8px;
	letter-spacing: 0.04em;
}

.vita-cap-ipd-repo-row__lic {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 2px 8px;
	border-radius: 999px;
}
.vita-cap-ipd-repo-row__lic--mit         { background: color-mix(in srgb, var(--cap-accent) 14%, transparent); color: var(--cap-accent, #6BE0B8); }
.vita-cap-ipd-repo-row__lic--proprietary { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }

.vita-cap-ipd-repo-row__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.vita-cap-ipd-repo-row__commit {
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.vita-cap-ipd-repo-row__author {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.04em;
}

.vita-cap-ipd-repo-row__foot {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.04em;
}


/* ────────────────────────────────────────────────────────────
   DATABASE VIEW
   ──────────────────────────────────────────────────────────── */

.vita-cap-ipd-db-banner {
	display: grid;
	grid-template-columns: auto auto auto 1fr;
	gap: 12px;
	align-items: center;
	background: linear-gradient(90deg, color-mix(in srgb, var(--cap-accent) 10%, transparent), color-mix(in srgb, var(--cap-accent) 2%, transparent));
	border: 1px solid color-mix(in srgb, var(--cap-accent) 22%, transparent);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
}
.vita-cap-ipd-db-banner__lbl   { color: #fff; font-weight: 600; }
.vita-cap-ipd-db-banner__sched { color: rgba(255, 255, 255, 0.6); }
.vita-cap-ipd-db-banner__last  { color: var(--cap-accent, #6BE0B8); }
.vita-cap-ipd-db-banner__pill  {
	justify-self: end;
	background: var(--cap-accent, #6BE0B8);
	color: var(--cap-bg, #0F1B2D);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.vita-cap-ipd-db {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vita-cap-ipd-db-row {
	display: grid;
	grid-template-columns: 18px minmax(0, 1.4fr) auto auto auto;
	gap: 12px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	padding: 8px 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
}

.vita-cap-ipd-db-row__ico {
	color: var(--cap-accent, #6BE0B8);
	font-size: 12px;
	line-height: 1;
}

.vita-cap-ipd-db-row__name {
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vita-cap-ipd-db-row__rows {
	color: rgba(255, 255, 255, 0.7);
	text-align: right;
	min-width: 90px;
}

.vita-cap-ipd-db-row__last {
	color: rgba(255, 255, 255, 0.45);
	font-size: 10px;
	letter-spacing: 0.04em;
}

.vita-cap-ipd-db-row__dl {
	background: color-mix(in srgb, var(--cap-accent) 12%, transparent);
	color: var(--cap-accent, #6BE0B8);
	border: 1px solid color-mix(in srgb, var(--cap-accent) 30%, transparent);
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}


/* ────────────────────────────────────────────────────────────
   DOCS VIEW
   ──────────────────────────────────────────────────────────── */

.vita-cap-ipd-docs {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vita-cap-ipd-doc-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 10px 14px;
}

.vita-cap-ipd-doc-row__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 700;
	border-radius: 4px;
}

.vita-cap-ipd-doc-row__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vita-cap-ipd-doc-row__name {
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
}

.vita-cap-ipd-doc-row__desc {
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vita-cap-ipd-doc-row__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-end;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.vita-cap-ipd-doc-row__len { color: rgba(255, 255, 255, 0.75); }
.vita-cap-ipd-doc-row__up  { color: rgba(255, 255, 255, 0.45); }


/* ────────────────────────────────────────────────────────────
   ACCESS VIEW
   ──────────────────────────────────────────────────────────── */

.vita-cap-ipd-access {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vita-cap-ipd-acc-row {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 0.9fr) auto auto;
	gap: 10px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
}

.vita-cap-ipd-acc-row__who {
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vita-cap-ipd-acc-pill {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}
.vita-cap-ipd-acc-pill--admin     { background: rgba(255, 80, 80, 0.18);   color: #FF7070; }
.vita-cap-ipd-acc-pill--deploy    { background: rgba(107, 157, 255, 0.18); color: #9CB8FF; }
.vita-cap-ipd-acc-pill--repo      { background: color-mix(in srgb, var(--cap-accent) 18%, transparent); color: var(--cap-accent, #6BE0B8); }
.vita-cap-ipd-acc-pill--hypercare { background: rgba(255, 136, 71, 0.18);  color: #FF8847; }

.vita-cap-ipd-acc-row__scope {
	color: rgba(255, 255, 255, 0.7);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vita-cap-ipd-acc-row__added {
	color: rgba(255, 255, 255, 0.45);
	font-size: 10px;
	white-space: nowrap;
}

.vita-cap-ipd-acc-row__rotate {
	color: rgba(255, 255, 255, 0.6);
	font-size: 10px;
	background: rgba(255, 255, 255, 0.05);
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.vita-cap-ipd-access-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 14px;
	background: rgba(255, 136, 71, 0.08);
	border: 1px dashed rgba(255, 136, 71, 0.32);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.04em;
}
.vita-cap-ipd-access-foot__dot {
	color: #FF8847;
	font-size: 12px;
	line-height: 1;
}


/* ────────────────────────────────────────────────────────────
   CHECKLIST (right activity panel)
   ──────────────────────────────────────────────────────────── */

.vita-cap-ipd-check-row {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 12px;
}
.vita-cap-ipd-check-row:last-child {
	border-bottom: 0;
}

.vita-cap-ipd-check-row__tick {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cap-accent) 18%, transparent);
	color: var(--cap-accent, #6BE0B8);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	margin-top: 2px;
	flex: 0 0 auto;
}

.vita-cap-ipd-check-row__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vita-cap-ipd-check-row__label {
	color: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	line-height: 1.3;
}

.vita-cap-ipd-check-row__sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.04em;
}

.vita-cap-ipd-check-row__when {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* ── Warranty footer (pinned to bottom of right panel) ──── */
.vita-cap-ipd-warranty {
	margin-top: auto;
	display: grid;
	grid-template-columns: 10px 1fr;
	gap: 10px;
	align-items: center;
	padding: 12px;
	background: color-mix(in srgb, var(--cap-accent) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--cap-accent) 22%, transparent);
	border-radius: 8px;
}
.vita-cap-ipd-warranty__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cap-accent, #6BE0B8);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cap-accent) 18%, transparent);
}
.vita-cap-ipd-warranty__msg {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.vita-cap-ipd-warranty__lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.55);
}
.vita-cap-ipd-warranty__date {
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: -0.01em;
}
.vita-cap-ipd-warranty__sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--cap-accent, #6BE0B8);
	letter-spacing: 0.04em;
}


/* ────────────────────────────────────────────────────────────
   RESPONSIVE — collapse density at narrower viewports.
   Rule 2 already governs the phone-app reimagining at <720px
   in bento.css; our content tweaks below align to those tiers.
   ──────────────────────────────────────────────────────────── */

/* ── Narrow desktop / tablet (720–1199): tighten rows ──── */
@media (min-width: 720px) and (max-width: 1199.98px) {
	.vita-cap-ipd-tree {
		font-size: 11px;
	}
	.vita-cap-ipd-db-banner {
		grid-template-columns: auto auto 1fr;
		gap: 8px;
	}
	.vita-cap-ipd-db-banner__last { display: none; }

	.vita-cap-ipd-db-row {
		grid-template-columns: 18px minmax(0, 1fr) auto auto;
	}
	.vita-cap-ipd-db-row__last { display: none; }

	.vita-cap-ipd-acc-row {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}
	.vita-cap-ipd-acc-row__scope,
	.vita-cap-ipd-acc-row__added { display: none; }
}

/* ── Mobile (<720) — phone-app reimagining ──────────────── */
@media (max-width: 719.98px) {
	/* Tree: shrink + reduce indent so deep paths still fit. */
	.vita-cap-ipd-tree {
		font-size: 11px;
		padding: 6px 0;
	}
	.vita-cap-ipd-tree__row {
		grid-template-columns: 12px 14px minmax(0, 1fr) auto;
		gap: 4px;
		min-height: 20px;
	}
	.vita-cap-ipd-tree__kind { display: none; }

	/* Repos: stack the head row chips. */
	.vita-cap-ipd-repo-row__head { gap: 6px; }
	.vita-cap-ipd-repo-row__lic { margin-left: 0; }
	.vita-cap-ipd-repo-row__meta { flex-direction: column; gap: 4px; align-items: stretch; }
	.vita-cap-ipd-repo-row__author { text-align: left; }

	/* DB banner: stack. */
	.vita-cap-ipd-db-banner {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.vita-cap-ipd-db-banner__pill { justify-self: start; }

	/* DB rows: drop the timestamp; keep name + rows + dl. */
	.vita-cap-ipd-db-row {
		grid-template-columns: 16px minmax(0, 1fr) auto auto;
		gap: 8px;
		padding: 8px 10px;
	}
	.vita-cap-ipd-db-row__last { display: none; }
	.vita-cap-ipd-db-row__rows { min-width: 0; font-size: 10px; }

	/* Docs: drop the meta column inline; restack as two rows. */
	.vita-cap-ipd-doc-row {
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 8px;
		padding: 8px 10px;
	}
	.vita-cap-ipd-doc-row__meta {
		grid-column: 2;
		flex-direction: row;
		gap: 8px;
		align-items: baseline;
	}

	/* Access: stack each row vertically. */
	.vita-cap-ipd-acc-row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"who   pill"
			"scope scope"
			"added rotate";
		gap: 4px 8px;
		padding: 10px;
	}
	.vita-cap-ipd-acc-row__who    { grid-area: who; }
	.vita-cap-ipd-acc-pill        { grid-area: pill; justify-self: end; }
	.vita-cap-ipd-acc-row__scope  { grid-area: scope; font-size: 10px; opacity: .7; }
	.vita-cap-ipd-acc-row__added  { grid-area: added; }
	.vita-cap-ipd-acc-row__rotate { grid-area: rotate; justify-self: end; }
}