.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Workspace layout. Existing controls and technical views remain in ourgrove.css. */
:root { --overview-positive: #e7ecd9; --overview-positive-text: #40532b; }
[data-theme="dark"] { --overview-positive: #2a3523; --overview-positive-text: #cfe1b5; }
.eyebrow { font-size: .65rem; font-weight: 600; letter-spacing: .16em; margin-bottom: .65rem; }
.masthead::after { position: absolute; content: ''; bottom: -3px; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--avocado-500) 0 33%, var(--harvest-500) 33% 66%, var(--persimmon-600) 66%); }
.masthead .logo { font-size: 1.75rem; }
.masthead .nav-links a { border-radius: 999px; min-height: 44px; }
.masthead .nav-icon { display: none; }
.masthead .logo-icon { width: 2rem; height: 2rem; }
[data-theme="dark"] .masthead { background: var(--moss-900); }
button, input, select, textarea { font-family: var(--font-primary); }
.btn-secondary, .btn-danger, .btn-update { min-height: 44px; border-radius: 999px; }
.link-button { min-height: 44px; color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }
.login-box .btn-primary { width: 100%; }
.view-header { gap: 1rem; }
.view-header > .btn-primary { flex-shrink: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h3 { font-size: 1.5rem; }
.section-heading > .muted { font-size: .75rem; }
.workspace-disclosure { margin-top: 1rem; border-top: 1px solid var(--border-color); }
.workspace-disclosure > summary, .installed-app-details > summary, .backup-row-details > summary { min-height: 48px; padding: .75rem 0; cursor: pointer; color: var(--text-primary); font-size: .85rem; font-weight: 600; }
.workspace-disclosure > summary span, .installed-app-details > summary span, .backup-row-details > summary span { float: right; margin-left: 1rem; color: var(--text-secondary); font-size: .75rem; font-weight: 400; }
summary:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; }
.workspace-disclosure[open] > summary { margin-bottom: .75rem; }
.settings-panel-disclosure > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; cursor: pointer; font-size: 1rem; }
.settings-panel-disclosure > summary strong { font-weight: 700; }
.settings-panel-disclosure > summary span { color: var(--text-secondary); font-size: .8rem; font-weight: 400; }
.settings-panel-disclosure[open] > summary { padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.settings-reference { margin: .75rem 0; }
.settings-reference p { margin: .6rem 0; }
@media (max-width: 600px) { .settings-panel-disclosure > summary { flex-direction: column; gap: .25rem; } }
.overview-host { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; font-size: .8rem; overflow-wrap: anywhere; }
.overview-host .timestamp { font-size: .7rem; }
.overview-health { display: flex; align-items: center; gap: 1.1rem; padding: 1.2rem 1.5rem; background: var(--overview-positive); border-radius: var(--radius); margin-bottom: 1.5rem; color: var(--overview-positive-text); }
.overview-health h3 { font-size: 1.6rem; line-height: 1.3; }
.overview-health p { margin-top: .3rem; font-size: .85rem; }
.overview-health > .link-button { margin-left: auto; white-space: nowrap; color: inherit; }
.overview-health-symbol { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 1.5rem; }
.overview-health[data-state="unknown"] { background: var(--card-bg); color: var(--text-secondary); border: 1px solid var(--border-color); }
.overview-health[data-state="error"] { background: color-mix(in srgb, var(--error-color) 12%, var(--card-bg)); color: var(--error-color); }
.overview-health[data-state="warning"] { background: color-mix(in srgb, var(--warning-color) 12%, var(--card-bg)); color: var(--text-primary); }
.overview-issues:empty { display: none; }
.overview-issues { margin-bottom: 1.5rem; }
.overview-issue, .overview-setup { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-left: 3px solid var(--warning-color); border-radius: 8px; background: var(--card-bg); margin-bottom: .6rem; }
.overview-issue[data-state="error"] { border-color: var(--error-color); }
.overview-issue[data-state="unknown"] { border-color: var(--text-muted); }
.overview-issue p, .overview-setup p { font-size: .8rem; color: var(--text-secondary); }
.overview-issue button, .overview-setup button { flex-shrink: 0; }
.overview-setup { border-color: var(--success-color); margin-bottom: 1.5rem; }
.overview-setup h3 { font-size: 1.1rem; }
.overview-glance { margin: 0 0 1.7rem; }
.overview-glance .section-heading { margin-bottom: .75rem; }
.overview-glance .eyebrow { margin-bottom: .25rem; }
.overview-glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; }
.overview-glance-grid > .muted { grid-column: 1 / -1; }
.overview-glance-card { --glance-color: var(--success-color); min-width: 0; min-height: 172px; display: flex; flex-direction: column; padding: .9rem; border: 1px solid var(--border-color); border-top: 3px solid var(--glance-color); border-radius: var(--radius-sm); background: linear-gradient(155deg, color-mix(in srgb, var(--glance-color) 8%, var(--card-bg)), var(--card-bg) 62%); overflow-wrap: break-word; hyphens: auto; }
.overview-glance-card[data-state="warning"] { --glance-color: var(--warning-color); }
.overview-glance-card[data-state="error"] { --glance-color: var(--error-color); }
.overview-glance-card[data-state="unknown"] { --glance-color: var(--text-muted); }
.overview-glance-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .35rem; font-size: .72rem; font-weight: 700; }
.overview-glance-top strong { padding: .15rem .4rem; border-radius: 999px; background: color-mix(in srgb, var(--glance-color) 14%, var(--card-bg)); color: var(--text-primary); font-size: .65rem; white-space: nowrap; }
.overview-glance-middle { display: flex; align-items: center; gap: .7rem; margin: auto 0; padding: .65rem 0; min-width: 0; }
.overview-glance-middle > div { min-width: 0; }
.overview-glance-middle > div > strong { display: block; font-size: .96rem; line-height: 1.2; }
.overview-glance-middle p { margin: .3rem 0 0; color: var(--text-secondary); font-size: .69rem; line-height: 1.35; }
.overview-glance-ring, .overview-glance-icon { position: relative; display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; color: var(--text-primary); font-size: .72rem; font-weight: 800; }
.overview-glance-ring { background: conic-gradient(var(--glance-color) var(--glance-fill), var(--border-color) 0); }
.overview-glance-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--card-bg); }
.overview-glance-ring > span { z-index: 1; }
.overview-glance-icon { border: 2px solid var(--glance-color); background: color-mix(in srgb, var(--glance-color) 12%, var(--card-bg)); color: var(--glance-color); font-size: 1.4rem; }
.overview-glance-link { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; font-size: .7rem; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.overview-glance-link:hover { color: var(--accent-color); }
.overview-glance-link:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.overview-columns { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 2.25rem; }
.overview-main, .overview-side { min-width: 0; }
.overview-count { font-family: var(--font-primary); font-size: .75rem; color: var(--text-secondary); vertical-align: middle; margin-left: .4rem; }
.overview-app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.strata-overview { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--card-bg); }
.strata-overview .section-heading { margin-bottom: .4rem; }
.strata-overview[data-state="ready"] { border-color: color-mix(in srgb, var(--success-color) 45%, var(--border-color)); }
.strata-overview[data-state="starting"] { border-color: color-mix(in srgb, var(--warning-color) 45%, var(--border-color)); }
.strata-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.strata-metrics > div { min-width: 0; padding: .7rem; border-radius: .65rem; background: color-mix(in srgb, var(--overview-positive) 45%, var(--card-bg)); }
.strata-metrics span, .strata-metrics small { display: block; color: var(--text-secondary); font-size: .7rem; }
.strata-metrics strong { display: block; font-size: clamp(1rem, 2vw, 1.5rem); overflow-wrap: anywhere; }
.strata-overview-model { margin: .8rem 0 0; font-size: .75rem; overflow-wrap: anywhere; }
.overview-app { position: relative; min-height: 124px; min-width: 0; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--card-bg); color: var(--text-primary); display: flex; flex-direction: column; align-items: flex-start; text-align: left; text-decoration: none; cursor: pointer; }
.overview-app:hover { border-color: var(--success-color); background: color-mix(in srgb, var(--overview-positive) 45%, var(--card-bg)); }
.overview-app .app-logo, .overview-app .app-logo-badge { width: 32px; height: 32px; margin-bottom: .65rem; }
.overview-app .app-logo { object-fit: contain; background: var(--cream-50); border-radius: 5px; padding: 2px; }
.overview-app strong { font-size: .95rem; overflow-wrap: anywhere; }
.overview-app small { font-size: .7rem; color: var(--text-secondary); }
.overview-app-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: var(--text-muted); }
.overview-app-status[data-state="running"]::before, .overview-app-status[data-state="completed"]::before { background: var(--success-color); }
.overview-app-status[data-state="unhealthy"]::before, .overview-app-status[data-state="stopped"]::before, .overview-app-status[data-state="partial"]::before, .overview-app-status[data-state="missing"]::before { background: var(--error-color); }
.overview-app-arrow { position: absolute; top: .7rem; right: 1rem; color: var(--text-secondary); font-size: .75rem; }
.overview-empty { grid-column: 1 / -1; padding: 1rem 0; color: var(--text-secondary); }
.overview-resources { margin-top: 1.5rem; }
.overview-resource-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.overview-resource-strip > div { min-width: 0; padding: 0 1rem; border-left: 1px solid var(--border-color); }
.overview-resource-strip > div:first-child { padding-left: 0; border: 0; }
.overview-resource-strip > div:last-child { padding-right: 0; }
.overview-resource-strip span { font-size: .75rem; color: var(--text-secondary); }
.overview-resource-strip strong { display: block; font-size: clamp(1rem, 2vw, 1.6rem); white-space: nowrap; }
.overview-resource-strip small { font-size: .65rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.overview-meter { height: 4px; background: var(--border-color); margin: .5rem 0; border-radius: 5px; overflow: hidden; }
.overview-meter i { height: 100%; width: 0; display: block; background: var(--success-color); }
#resource-history { margin-top: 0; border-top: 0; }
#resource-history .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
#resource-history .metric-card h3 { font-family: var(--font-primary); font-size: .9rem; }
#resource-history .panel-header { flex-wrap: wrap; }
#resource-history .metric-label { font-size: .75rem; }
#resource-history .dashboard-refresh-controls { flex-wrap: wrap; }
.overview-backup { background: var(--overview-positive); border-radius: var(--radius); padding: 1.5rem; }
.overview-backup h3 { font-size: 1.65rem; line-height: 1.3; color: var(--overview-positive-text); margin-bottom: 1.5rem; }
.overview-backup > strong { font-size: 1rem; }
.overview-backup > p:not(.eyebrow), #overview-backup-facts { font-size: .75rem; color: var(--text-secondary); margin-top: .4rem; }
#overview-backup-facts { margin: 1rem 0; }
#overview-backup-facts p + p { margin-top: .4rem; }
.overview-backup .btn-secondary { width: 100%; background: transparent; border-color: color-mix(in srgb, var(--overview-positive-text) 35%, transparent); font-size: .8rem; }

/* Additional internal disks */
.storage-view-header { align-items: flex-start; }
.storage-inline-status { margin: .7rem 0 1.2rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning-color) 11%, var(--card-bg)); color: var(--text-primary); }
.storage-section { margin: 0 0 1.35rem; padding: 1.3rem; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--card-bg); }
.storage-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .9rem; }
.storage-section-heading h3 { font-size: 1.3rem; }
.storage-section-heading > span { color: var(--text-secondary); font-size: .8rem; }
.storage-wizard-disclosure > summary, .storage-inventory-disclosure > summary { cursor: pointer; font-size: 1.05rem; font-weight: 700; }
.storage-wizard-disclosure > summary strong { font-size: 1.3rem; }
.storage-wizard-disclosure > summary span, .storage-inventory-disclosure > summary span { display: block; margin: .2rem 0 0 1.05rem; color: var(--text-secondary); font-size: .8rem; font-weight: 400; }
.storage-wizard-disclosure[open] > summary, .storage-inventory-disclosure[open] > summary { margin-bottom: 1rem; }
.storage-wizard-disclosure:focus-within > summary, .storage-inventory-disclosure:focus-within > summary { color: var(--text-primary); }
.storage-inventory-boot .storage-section-heading { margin-bottom: .3rem; }
.storage-other-disks { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border-color); }
.storage-other-disks > p { margin: .6rem 0 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }
.storage-placement-tips { margin-top: 1.1rem; padding-top: .85rem; border-top: 1px solid var(--border-color); }
.storage-placement-tips > summary { cursor: pointer; font-size: .86rem; font-weight: 700; }
.storage-placement-tips .storage-placement-grid { margin-top: .85rem; }
.storage-usage { --usage-used: var(--persimmon-500); --usage-reserved: var(--harvest-500); --usage-free: var(--success-color); background: radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--overview-positive) 42%, transparent), transparent 42%), var(--card-bg); }
.storage-usage > .storage-field-note { max-width: 68ch; margin: -.35rem 0 .95rem; }
.storage-usage-locations { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.storage-usage-choice { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; min-width: 145px; min-height: 54px; padding: .55rem .85rem; border: 1px solid var(--border-color); border-radius: .8rem; background: var(--card-bg); color: var(--text-primary); cursor: pointer; text-align: left; }
.storage-usage-choice span { font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
.storage-usage-choice strong { color: var(--text-secondary); font-size: .72rem; font-weight: 500; }
.storage-usage-choice:hover, .storage-usage-choice.selected { border-color: var(--success-color); background: color-mix(in srgb, var(--overview-positive) 42%, var(--card-bg)); }
.storage-usage-choice:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.storage-usage-detail { display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: center; min-height: 230px; }
.storage-usage-visual { display: grid; place-items: center; min-width: 0; }
.storage-usage-chart { position: relative; display: grid; place-items: center; width: min(100%, 250px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--usage-used) 0 var(--usage-occupied-end), var(--usage-reserved) var(--usage-occupied-end) var(--usage-unwritable-end), var(--usage-free) var(--usage-unwritable-end) 360deg); box-shadow: 0 16px 32px color-mix(in srgb, var(--moss-900) 12%, transparent); }
.storage-usage-chart::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: var(--card-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-color) 70%, transparent), 0 0 18px color-mix(in srgb, var(--moss-900) 9%, transparent); }
.storage-usage-center { z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 50%; text-align: center; }
.storage-usage-center strong { font-size: clamp(1.1rem, 3vw, 1.8rem); line-height: 1.05; overflow-wrap: anywhere; }
.storage-usage-center span { margin-top: .3rem; color: var(--text-secondary); font-size: .7rem; line-height: 1.2; }
.storage-usage-name { font-size: .8rem; font-weight: 700; }
.storage-usage-roles { margin-top: .2rem; color: var(--text-secondary); font-size: .75rem; }
.storage-usage-headline { display: block; margin: .85rem 0; font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.15; }
.storage-usage-legend { max-width: 440px; margin: 0 0 1rem; }
.storage-usage-legend > div { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .38rem 0; border-top: 1px solid var(--border-color); font-size: .82rem; }
.storage-usage-legend dt { display: flex; align-items: center; gap: .5rem; }
.storage-usage-legend dd { margin: 0; font-weight: 700; white-space: nowrap; }
.storage-usage-swatch { width: .75rem; height: .75rem; flex: 0 0 .75rem; border-radius: 50%; background: var(--usage-used); }
.storage-usage-swatch.reserved { background: var(--usage-reserved); }
.storage-usage-swatch.free { background: var(--usage-free); }
.storage-usage-alert { margin: 0 0 .8rem; color: var(--warning-color); font-size: .82rem; font-weight: 700; }
.storage-usage-facts > .storage-field-note { margin: 0; max-width: 60ch; }
.storage-usage-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 .45rem; }
@media (max-width: 650px) { .storage-usage-detail { grid-template-columns: 1fr; gap: 1.2rem; } .storage-usage-chart { width: min(70vw, 235px); } .storage-usage-choice { flex: 1 1 135px; } }
.storage-other-disks > summary { cursor: pointer; font-weight: 700; }
.storage-other-disks > summary span { float: right; color: var(--text-secondary); font-size: .8rem; font-weight: 400; }
.storage-disk-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--border-color); }
.storage-disk-row:first-of-type { border-top: 0; }
.storage-disk-row strong, .storage-disk-choice strong { display: block; overflow-wrap: anywhere; }
.storage-disk-row small, .storage-disk-choice small { display: block; color: var(--text-secondary); font-size: .78rem; overflow-wrap: anywhere; }
.storage-health-overview { margin: .8rem 0 1.1rem; padding: .9rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); font-size: .84rem; line-height: 1.45; }
.storage-health-overview strong { display: block; margin-bottom: .2rem; }
.storage-health-overview p { margin: .3rem 0 0; color: var(--text-secondary); }
.storage-health-overview.good { border-color: var(--success-color); background: color-mix(in srgb, var(--overview-positive) 35%, var(--card-bg)); }
.storage-health-overview.check-needed { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-soft) 45%, var(--card-bg)); }
.storage-health-overview.warning { border-color: var(--warning-color); }
.storage-health-overview.error { border-color: var(--error-color); }
.storage-disk-reason { max-width: 42ch; color: var(--text-secondary); font-size: .78rem; text-align: right; }
.storage-tag, .storage-health { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .2rem .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-color); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.storage-pool-grid, .storage-plan-grid, .storage-placement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: .85rem; }
.storage-pool-card, .storage-plan-card, .storage-placement-grid > div { min-width: 0; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-primary); }
.storage-pool-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.storage-pool-head strong { font-size: 1rem; overflow-wrap: anywhere; }
.storage-pool-card p { margin-top: .7rem; font-size: .86rem; }
.storage-pool-card small { display: block; margin-top: .35rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.storage-backup-pool-button { margin-top: .85rem; }
#storage-local-backup-status > p { margin: .5rem 0; font-size: .87rem; }
.storage-health.good { color: var(--overview-positive-text); background: var(--overview-positive); }
.storage-health.warning { color: var(--warning-color); background: color-mix(in srgb, var(--warning-color) 12%, var(--card-bg)); }
.storage-health.error { color: var(--error-color); background: color-mix(in srgb, var(--error-color) 12%, var(--card-bg)); }
.storage-pool-alert { color: var(--error-color); overflow-wrap: anywhere; }
.storage-pool-alert button { margin-top: .6rem; }
.storage-pool-alert [role="status"] { display: block; margin-top: .45rem; }
.storage-replacement { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border-color); }
.storage-replacement summary { cursor: pointer; font-size: .83rem; font-weight: 700; }
.storage-replacement p { color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.storage-replacement ol { margin: .7rem 0; padding-left: 1.3rem; color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.storage-replacement label { display: block; margin: .7rem 0; font-size: .78rem; font-weight: 700; }
.storage-replacement select { display: block; width: 100%; min-height: 44px; margin-top: .3rem; padding: .5rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); }
.storage-replacement [data-storage-replace-status] { overflow-wrap: anywhere; }
.storage-zfs-options { margin: 1rem 0; padding: .85rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); }
.storage-zfs-options h5 { margin: 0 0 .5rem; font-size: .9rem; }
.storage-zfs-options label { display: block; margin: .65rem 0 .25rem; font-size: .8rem; font-weight: 700; }
.storage-zfs-options select { display: block; width: 100%; min-height: 44px; padding: .5rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); }
.storage-zfs-options .storage-inline-check { display: flex; align-items: center; gap: .5rem; }
.storage-zfs-options .storage-inline-check input { width: auto; min-height: 0; margin: 0; }
.storage-zfs-options .storage-field-note { margin: .35rem 0; }
.storage-zfs-feature { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border-color); }
.storage-zfs-feature summary { cursor: pointer; font-size: .83rem; font-weight: 700; }
.storage-zfs-feature p, .storage-zfs-feature li { color: var(--text-secondary); font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; }
.storage-zfs-feature ul { margin: .55rem 0; padding-left: 1.3rem; }
.storage-zfs-feature button { margin: .45rem .35rem .25rem 0; }
.storage-zfs-feature [role="status"] { display: block; margin-top: .45rem; overflow-wrap: anywhere; }
.storage-pool-maintenance { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border-color); }
.storage-pool-maintenance > summary { cursor: pointer; font-size: .83rem; font-weight: 700; }
.storage-zfs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .4rem .7rem; margin-top: .8rem; }
.storage-zfs-facts > div { padding: .55rem; border-radius: var(--radius-sm); background: var(--card-bg); }
.storage-zfs-facts dt { color: var(--text-secondary); font-size: .72rem; }
.storage-zfs-facts dd { margin: .15rem 0 0; font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
.storage-step { margin: 1.4rem 0 .6rem; font-size: .88rem; font-weight: 700; }
.storage-goal-grid, .storage-disk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .65rem; }
.storage-disk-grid > .storage-field-note, .storage-usb-advice { grid-column: 1 / -1; }
.storage-usb-advice { margin: 0; padding: .85rem 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning-color) 11%, var(--card-bg)); color: var(--text-primary); font-size: .84rem; line-height: 1.5; }
.storage-goal-grid label, .storage-disk-choice { display: flex; align-items: flex-start; gap: .65rem; min-height: 74px; padding: .8rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; }
.storage-goal-grid label:has(input:checked), .storage-disk-choice:has(input:checked) { border-color: var(--success-color); background: color-mix(in srgb, var(--overview-positive) 44%, var(--card-bg)); }
.storage-goal-grid label:focus-within, .storage-disk-choice:focus-within { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.storage-goal-grid input, .storage-disk-choice input { flex: 0 0 auto; margin-top: .15rem; accent-color: var(--success-color); }
.storage-goal-grid strong { display: block; }
.storage-goal-grid small { display: block; margin-top: .25rem; color: var(--text-secondary); font-size: .78rem; }
.storage-field-note { color: var(--text-secondary); font-size: .82rem; line-height: 1.5; }
.storage-plan-card { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.storage-plan-card.recommended { border-color: var(--success-color); }
.storage-plan-card.unavailable { opacity: .75; }
.storage-plan-kicker { color: var(--success-color); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.storage-plan-card h4 { font-size: 1.1rem; }
.storage-plan-card > p { color: var(--text-secondary); font-size: .84rem; line-height: 1.45; }
.storage-plan-card dl { width: 100%; margin: auto 0 0; }
.storage-plan-card dl > div { display: flex; justify-content: space-between; gap: .7rem; padding: .45rem 0; border-top: 1px solid var(--border-color); }
.storage-plan-card dt { color: var(--text-secondary); font-size: .76rem; }
.storage-plan-card dd { max-width: 58%; margin: 0; font-size: .8rem; font-weight: 700; text-align: right; }
.storage-plan-card dd small { display: block; color: var(--text-secondary); font-weight: 400; }
.storage-plan-card .storage-plan-next { color: var(--text-primary); font-size: .78rem; }
.storage-plan-card > button { margin-top: auto; }
.storage-plan-footnote { grid-column: 1 / -1; padding: .55rem .75rem; }
.storage-backup-note { margin-top: 1.2rem; padding: .85rem 1rem; border-left: 3px solid var(--warning-color); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning-color) 10%, var(--card-bg)); font-size: .85rem; line-height: 1.5; }
.storage-plan-review { margin-top: 1rem; padding: 1.1rem; border: 1px solid var(--success-color); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--overview-positive) 24%, var(--card-bg)); }
.storage-plan-review h4 { margin-bottom: .4rem; font-size: 1.1rem; }
.storage-plan-review > p { margin: .45rem 0; font-size: .85rem; }
.storage-plan-review label { display: block; margin-top: .9rem; font-size: .83rem; font-weight: 700; }
.storage-plan-review input { display: block; width: min(100%, 340px); min-height: 44px; margin-top: .3rem; padding: .55rem .7rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); }
.storage-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: .8rem; }
#storage-preview-status { font-size: .82rem; }
.storage-create-progress { margin-top: .85rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); font-size: .83rem; }
.storage-create-progress strong { display: block; margin-bottom: .4rem; }
.storage-create-progress ol { margin: .6rem 0; padding-left: 1.4rem; }
.storage-create-progress li { padding: .22rem 0; color: var(--text-secondary); }
.storage-create-progress li.current { color: var(--text-primary); font-weight: 700; }
.storage-create-progress li.done { color: var(--overview-positive-text); }
.storage-create-progress p { margin: .5rem 0 0; color: var(--text-secondary); }
.storage-capacity-meter { height: .5rem; margin: .55rem 0 .25rem; border-radius: 999px; background: var(--border-color); overflow: hidden; }
.storage-capacity-meter span { display: block; height: 100%; background: var(--accent-color); }
.storage-capacity-meter.warning span { background: var(--warning-color); }
.storage-drive-health-list { padding-left: 1.2rem; }
.storage-drive-health-list li { margin: .55rem 0; }
.storage-drive-health-list small { display: block; }
#storage-preview-result { margin-top: .9rem; padding: .9rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); }
#storage-preview-result p { margin: .5rem 0; font-size: .83rem; }
#storage-preview-result .btn-danger { margin-top: .5rem; }
.storage-placement-grid > div p { margin-top: .4rem; color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.storage-placement-subtitle { margin: 1.3rem 0 .7rem; font-size: 1rem; }
.storage-placement-app { min-width: 0; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-primary); }
.storage-placement-app > strong { font-size: 1rem; }
.storage-placement-app > p { margin: .55rem 0; font-size: .83rem; color: var(--text-secondary); }
.storage-placement-app label { display: block; margin: .85rem 0 .6rem; font-size: .82rem; font-weight: 700; }
.storage-placement-app select, #install-storage-pool { display: block; width: 100%; min-height: 44px; margin-top: .3rem; padding: .5rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); }
.storage-placement-app button { margin-top: .3rem; }
@media (max-width: 600px) { .storage-view-header { flex-direction: column; align-items: stretch; } .storage-section-heading { flex-direction: column; } .storage-disk-row { align-items: flex-start; flex-direction: column; } .storage-disk-reason { max-width: none; text-align: left; } }
.overview-activity { margin-top: 1.5rem; }
.overview-activity h3 { font: 600 .95rem var(--font-primary); }
.overview-activity > .muted { font-size: .7rem; margin: .4rem 0 .8rem; }
.overview-activity-events { display: grid; gap: .6rem; }
.overview-activity .activity-event { padding: .4rem 0; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; min-height: 44px; }
.overview-activity .activity-event-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#advanced-diagnostics { margin-top: 2rem; }
/* Rich catalog cards explain the choice; setup details stay available. */
.catalog-intro { max-width: 780px; margin: 0 0 1.5rem; color: var(--text-secondary); }
#app-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
#app-catalog .app-card { padding: 1.5rem; background: var(--card-bg); box-shadow: none; min-width: 0; }
#app-catalog .app-card-header { align-items: flex-start; flex-wrap: wrap; }
#app-catalog .app-logo { background: var(--cream-50); padding: 3px; border-radius: 6px; }
#app-catalog .app-card h3 { font-size: 1.4rem; }
#app-catalog .catalog-description { font-size: .9rem; line-height: 1.65; margin-bottom: 1rem; }
.catalog-use-case { padding: .8rem 1rem; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 1rem; }
.catalog-use-case > strong { font-size: .7rem; color: var(--text-secondary); }
#app-catalog .catalog-use-case p { font-size: .8rem; margin: .4rem 0 0; }
.catalog-category { font-size: .75rem; color: var(--text-secondary); margin-bottom: .65rem; }
.catalog-details { margin: 0 0 1rem; }
.catalog-details summary { cursor: pointer; font-size: .8rem; min-height: 44px; padding: .6rem 0; }
.catalog-details .app-meta { display: flex; flex-wrap: wrap; }
#apps-view .apps-tab-nav { position: static; border: 0; box-shadow: none; padding: 0; background: transparent; margin-bottom: 1.5rem; }
#apps-view .apps-tab-nav button { border-radius: 0; border-bottom: 2px solid transparent; min-height: 44px; }
#apps-view .apps-tab-nav button.active { background: transparent; border-bottom-color: var(--text-primary); color: var(--text-primary); }
/* Installed app controls keep all existing handlers behind one disclosure. */
.installed-apps-panel { border: 0; background: transparent; }
.installed-apps-panel > .panel-content { padding: 0; }
.installed-apps-toolbar { justify-content: space-between; margin-bottom: 1rem; }
.installed-search input { max-width: 100%; padding: .7rem 1rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--card-bg); color: var(--text-primary); }
.app-tools { margin: 0; border: 0; }
.app-tools-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.installed-apps-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.installed-app-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; padding: 1.2rem; background: var(--card-bg); box-shadow: none; }
.installed-app-item .installed-app-card-header { padding: 0; background: transparent; border: 0; box-shadow: none; position: static; }
.installed-app-stack-name { font-size: .75rem; }
.installed-app-primary-action { align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.installed-app-credentials { grid-column: 1 / -1; margin-top: .75rem; }
.installed-app-item > .install-guide { grid-column: 1 / -1; min-width: 0; }
.installed-app-health-guidance { grid-column: 1 / -1; min-width: 0; margin: .75rem 0 0; }
.installed-app-credentials .credential-value { display: block; margin-top: .25rem; }
.installed-app-details { grid-column: 1 / -1; margin-top: .65rem; border-top: 1px solid var(--border-color); }
.installed-app-details .installed-app-card-body { padding: 1rem 0; }
.installed-app-details .installed-app-actions { padding: 1rem 0 0; background: transparent; flex-wrap: wrap; }
.installed-app-details .installed-app-actions button { white-space: normal; }
/* Settings use one readable content column beside local navigation. */
#settings-view { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 0 2rem; align-items: start; }
#settings-view, #settings-system-info, #settings-software-updates, #settings-local-ai-choice, #mcp-access-review-details { scroll-margin-top: 6rem; }
#settings-view > .view-header { grid-column: 1 / -1; }
#settings-view > .settings-nav { grid-column: 1; grid-row: 2 / span 4; display: flex; flex-direction: column; align-items: stretch; width: 100%; position: sticky; top: 6rem; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; overflow: visible; }
#settings-view > .settings-nav button { text-align: left; white-space: normal; min-height: 44px; font-size: .8rem; }
#settings-view > .settings-nav button.active { background: var(--overview-positive); color: var(--overview-positive-text); }
#settings-view > .settings-grid, #settings-view > .settings-viewer-notice, #settings-view > .reboot-detected-banner { grid-column: 2; }
#settings-view .settings-grid { columns: auto; min-width: 0; }
#settings-view .settings-section { box-shadow: none; padding: 1.5rem; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; background: transparent; }
#settings-view .settings-section h3 { font-size: 1.4rem; }
#settings-view .settings-section h3[tabindex="-1"]:focus, #backups-view .view-header h2[tabindex="-1"]:focus { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.ai-settings-grid { display: flex; flex-direction: column; max-width: 980px; }
.ai-settings-grid > * { min-width: 0; }
.ai-settings-grid.ai-configured #strata-settings-card, .ai-settings-grid.ai-configured #legacy-llama-management { order: 0; }
.ai-settings-grid.ai-configured #strata-harness-card { order: 1; }
.ai-settings-grid.ai-configured #ai-openclaw-command-panel { order: 2; }
.ai-settings-grid.ai-configured #legacy-ollama-notice { order: 3; }
.ai-settings-grid.ai-configured #ai-backend-choice { order: 4; }
#ai-view .settings-section { box-shadow: none; padding: 1.5rem; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; background: transparent; }
#ai-view .settings-section h3 { font-size: 1.4rem; }
#ai-view .settings-section h3[tabindex="-1"]:focus, #ai-view .view-header h2[tabindex="-1"]:focus { outline: 2px solid var(--accent-color); outline-offset: 3px; }
#ai-backend-details > summary { cursor: pointer; font-size: 1.15rem; font-weight: 700; min-height: 44px; padding: .6rem 0; }
#ai-backend-details[open] > summary { margin-bottom: .75rem; }
.ai-configuration-details { margin: 1rem 0; }
.ai-configuration-details > summary { color: var(--text-primary); font-size: 1rem; min-height: 44px; }
.ai-engine-status { display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; padding: .55rem .8rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--card-bg); font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.ai-engine-status::before { content: ''; flex: none; width: .65rem; height: .65rem; border-radius: 50%; background: var(--text-secondary); }
.ai-engine-status[data-state="ready"] { border-color: var(--success-color); color: var(--success-color); }
.ai-engine-status[data-state="ready"]::before { background: var(--success-color); box-shadow: 0 0 0 .25rem rgba(96, 125, 53, .13); }
.ai-engine-status[data-state="working"] { border-color: var(--warning-color); }
.ai-engine-status[data-state="working"]::before { background: var(--warning-color); }
.ai-engine-status[data-state="error"] { border-color: var(--danger-color); }
.ai-engine-status[data-state="error"]::before { background: var(--danger-color); }
.ai-openclaw-command-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
.ai-openclaw-command-row input { flex: 1 1 20rem; min-width: 0; }
.ai-openclaw-command .form-group { margin: 1rem 0; }
.ai-openclaw-command .form-group small { display: block; margin-top: .4rem; color: var(--text-secondary); }
.ai-openclaw-command-output { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow: auto; }
.ai-backend-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.ai-backend-option { display: flex; align-items: flex-start; gap: .75rem; min-height: 96px; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--card-bg); cursor: pointer; }
.ai-backend-option:has(input:checked) { border-color: var(--accent-color); box-shadow: inset 0 0 0 1px var(--accent-color); }
.ai-backend-option:focus-within { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.ai-backend-option input { flex: none; width: 1.15rem; height: 1.15rem; margin: .1rem 0 0; accent-color: var(--accent-color); }
.ai-backend-option span { display: grid; gap: .35rem; }
.ai-backend-option strong { color: var(--text-primary); }
.ai-backend-option small { color: var(--text-secondary); line-height: 1.45; }
.ollama-settings .setting-item { gap: .75rem; flex-wrap: wrap; }
.ollama-settings .setting-item input[type="text"] { min-width: min(100%, 16rem); flex: 1; }
.llama-download-panel { margin: 1rem 0; padding: 1rem; border: 1px solid var(--accent-color); border-radius: .75rem; background: var(--card-bg); }
.llama-download-panel[data-phase="failed"], .llama-download-panel[data-phase="unconfirmed"] { border-color: var(--warning-color); }
.llama-download-panel p { margin: .5rem 0 0; overflow-wrap: anywhere; }
.llama-download-panel progress { display: block; width: 100%; margin-top: .75rem; }
.llama-download-panel[hidden], .llama-download-panel progress[hidden] { display: none; }
#legacy-llama-management > summary, #legacy-ollama-notice > summary { cursor: pointer; font-size: 1rem; font-weight: 600; min-height: 44px; padding: .6rem 0; }
#legacy-llama-management[open] > summary, #legacy-ollama-notice[open] > summary { margin-bottom: .75rem; }
.strata-settings .strata-setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.strata-settings .form-group { min-width: 0; margin: 0; }
.strata-settings .form-group label, .strata-settings .form-group small { display: block; }
.strata-settings .form-group small { margin-top: .3rem; color: var(--text-secondary); }
.strata-settings input, .strata-settings select { width: 100%; min-width: 0; }
.strata-settings .strata-custom-input { margin-top: .4rem; }
.strata-catalog-choice-row { flex-wrap: wrap; }
.strata-catalog-choice, .strata-catalog-custom:not(.hidden) { flex: 1 1 100%; min-width: 0; }
.strata-catalog-custom:not(.hidden) { margin-top: .4rem; }
.strata-settings input[readonly] { background: var(--card-bg); }
.strata-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 1rem 0; }
.strata-actions .muted { flex-basis: 100%; margin: 0; }
.strata-copy-row { display: flex; align-items: stretch; gap: .4rem; }
.strata-copy-row input { flex: 1; }
.strata-copy-row button { flex: none; }
.strata-progress-panel, .strata-plan-panel, .strata-connections-panel { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border-color); border-radius: .7rem; background: var(--card-bg); }
#strata-hardware-recommendation { border-color: var(--accent-color); }
.strata-recovery-panel { border-color: var(--warning-color); }
#strata-recovery-error { white-space: pre-wrap; overflow-wrap: anywhere; }
#strata-model-choice-note { margin: .5rem 0 1rem; }
.strata-progress-panel p, .strata-plan-panel p, .strata-connections-panel p { margin: .4rem 0; }
.strata-progress-panel progress { display: block; width: 100%; margin-top: .7rem; }
#strata-plan-detail, #strata-connections-list, #strata-update-history-list { white-space: pre-line; }
#strata-update-history-list { margin-top: .6rem; color: var(--text-secondary); line-height: 1.7; }
.network-address-card .setting-item { gap: .75rem; flex-wrap: wrap; }
.network-address-card .setting-item select { min-width: min(100%, 15rem); }
.network-static-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin: 1rem 0; }
.network-static-grid.hidden { display: none; }
.network-static-grid .setting-item { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
.network-static-grid .setting-item input { width: 100%; }
.network-static-grid small { color: var(--text-secondary); }
.network-settings-pending { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: .75rem; }
.network-settings-pending a { display: inline-block; margin-bottom: .75rem; overflow-wrap: anywhere; }
.network-settings-result > summary { cursor: pointer; font-weight: 600; }
@media (max-width: 600px) { .network-static-grid { grid-template-columns: 1fr; } }
.mcp-connection-row { flex-wrap: wrap; gap: .75rem; }
.mcp-connection-row input[type="text"], .mcp-connection-row input[type="password"] { flex: 1; min-width: min(100%, 18rem); }
.settings-path-note { margin: 0 0 .75rem; color: var(--text-secondary); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.settings-path-note span { padding: 0 .35rem; }
.mcp-setup-steps { margin: .5rem 0 1rem; padding-left: 1.5rem; line-height: 1.6; }
.mcp-setup-steps li + li { margin-top: .35rem; }
.mcp-setup-steps code { overflow-wrap: anywhere; }
.mcp-request-card { border: 1px solid var(--border-color, #53636b); border-radius: .75rem; padding: 1rem; margin-top: 1rem; }
.mcp-request-card h5 { margin: 0 0 .5rem; font-size: 1rem; }
.mcp-request-card h5 small { font-weight: normal; }
.mcp-request-field { display: flex; flex-direction: column; gap: .35rem; margin: .75rem 0; max-width: 32rem; }
.mcp-request-field input, .mcp-request-field select { width: 100%; }
.mcp-request-field small { font-weight: normal; }
.mcp-request-risk { padding: .75rem; margin: .75rem 0; border: 1px solid var(--border-color, #53636b); border-radius: .5rem; }
.mcp-request-risk ul { margin: .5rem 0; padding-left: 1.4rem; }
.mcp-request-risk label { display: block; margin-top: .5rem; }
.mcp-request-warning { font-weight: 600; }
.mcp-request-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.settings-quick-links { column-span: all; }
.settings-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.settings-shortcut { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; width: 100%; min-height: 5.5rem; padding: 1rem; text-align: left; color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: .75rem; cursor: pointer; }
.settings-shortcut:hover, .settings-shortcut:focus-visible { border-color: var(--accent-color); }
.settings-shortcut span { color: var(--text-secondary); line-height: 1.4; }
.ollama-settings #ollama-pull-status progress { display: block; width: 100%; margin: .5rem 0 1rem; }
.ollama-model-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 1rem 0 1.25rem; }
.ollama-model-source { padding: 1rem; border: 1px solid var(--border-color); border-radius: .75rem; min-width: 0; }
.ollama-model-source h5 { margin: 0 0 .5rem; font-size: 1rem; }
.ollama-model-source p { margin: .5rem 0 0; line-height: 1.5; }
.ollama-model-source code { overflow-wrap: anywhere; }
.ollama-model-source .btn-compact { margin-left: .35rem; }
.ollama-model-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border-color); }
.ollama-model-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.ollama-model-row small { display: block; color: var(--text-muted); margin-top: .2rem; }
.ollama-model-row progress { display: block; width: min(100%, 24rem); margin-top: .5rem; }
.ollama-model-row > div:last-child { white-space: nowrap; }
.settings-category-picker { display: none; }
/* Recovery points precede configuration; existing restore safeguards remain. */
.backup-plan { margin-top: 2rem; }
.backup-recovery-panel { background: transparent; border: 0; }
.backup-recovery-panel > .panel-header, .backup-recovery-panel > .panel-content { padding-left: 0; padding-right: 0; }
.backup-health-panel { background: var(--overview-positive); box-shadow: none; }
.backup-retention-upgrade { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin: .7rem 0 1.2rem; padding: 1rem 1.15rem; border: 1px solid var(--border-color); border-left: 4px solid var(--warning-color); border-radius: var(--radius); background: color-mix(in srgb, var(--warning-color) 9%, var(--card-bg)); }
.backup-retention-upgrade[hidden] { display: none; }
.backup-retention-upgrade strong { display: block; margin-bottom: .2rem; }
.backup-retention-upgrade p { margin: 0; color: var(--text-secondary); font-size: .88rem; line-height: 1.45; }
@media (max-width: 650px) { .backup-retention-upgrade { grid-template-columns: 1fr; } .backup-retention-upgrade .btn-primary { justify-self: start; } }
.backup-item { display: grid; grid-template-columns: minmax(0, 1fr); padding: 1rem 1.25rem; background: var(--card-bg); }
.backup-info code { display: none; }
.backup-row-details > summary { font-size: .8rem; }
.backup-actions { display: flex; flex-wrap: wrap; }
.backup-roadmap { background: transparent; border: 0; box-shadow: none; }
#install-modal .install-grid { grid-template-columns: minmax(0, 1fr); }
#install-modal .install-grid > div:first-child { order: 2; }
#install-modal .install-grid > div:last-child { order: 1; }
@media (max-width: 900px) {
    .ai-backend-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
    .overview-columns { grid-template-columns: minmax(0, 1fr) 260px; gap: 1.5rem; }
    .overview-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-resource-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
    .overview-resource-strip > div:nth-child(3) { border: 0; padding-left: 0; }
    #app-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    main { padding: 1.5rem 1rem; }
    .masthead { padding: .75rem 1rem; }
    .masthead nav { gap: .75rem; flex-wrap: wrap; }
    .masthead .logo { font-size: 1.5rem; }
    .masthead .nav-links { position: static; width: 100%; order: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: .15rem; border: 0; background: transparent; padding: 0; box-shadow: none; }
    .masthead .nav-links.hidden { display: none; }
    .masthead .nav-links a { justify-content: center; font-size: .7rem; padding: .5rem .15rem; }
    .masthead .user-menu { margin-left: auto; }
    .overview-host { max-width: 48%; font-size: .65rem; }
    .overview-health { padding: 1rem; flex-wrap: wrap; gap: .75rem; }
    .overview-health > div { flex: 1; min-width: 0; }
    .overview-health h3 { font-size: 1.25rem; }
    .overview-health-symbol { width: 32px; height: 32px; font-size: 1.2rem; }
    .overview-health > .link-button { margin-left: 44px; }
    .overview-issue, .overview-setup { align-items: flex-start; flex-direction: column; }
    .overview-columns { grid-template-columns: minmax(0, 1fr); }
    .overview-resource-strip strong { font-size: 1.5rem; }
    .section-heading h3 { font-size: 1.3rem; }
    .workspace-disclosure > summary span, .installed-app-details > summary span, .backup-row-details > summary span { float: none; display: block; margin-left: 1rem; }
    #resource-history .resource-grid { grid-template-columns: minmax(0, 1fr); }
    #app-catalog { grid-template-columns: minmax(0, 1fr); }
    #apps-view > .view-header { flex-wrap: wrap; }
    .installed-app-item { padding: 1rem; grid-template-columns: minmax(0, 1fr); }
    .installed-app-primary-action { margin-top: .75rem; }
    .installed-apps-toolbar { flex-wrap: wrap; }
    .installed-app-identity, .installed-app-card-header { flex-wrap: wrap; }
    .installed-app-access-grid { grid-template-columns: minmax(0, 1fr); }
    #settings-view { grid-template-columns: minmax(0, 1fr); }
    #settings-view, #settings-system-info, #settings-software-updates, #settings-local-ai-choice, #mcp-access-review-details { scroll-margin-top: 8rem; }
    #settings-view > .settings-nav { display: none; }
    #settings-view > .settings-grid, #settings-view > .settings-viewer-notice, #settings-view > .reboot-detected-banner { grid-column: 1; }
    .settings-category-picker { display: grid; gap: .4rem; font-size: .8rem; margin-bottom: 1rem; }
    .settings-category-picker select { min-height: 44px; width: 100%; background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); padding: .6rem; border-radius: 8px; }
    .settings-shortcuts { grid-template-columns: minmax(0, 1fr); }
    #settings-view .settings-section { padding: 1rem 0; }
    #ai-view .settings-section { padding: 1rem 0; }
    .ai-backend-options { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .overview-app, .overview-meter i { transition: none; } }

.overview-gpus { margin-top: 1rem; }
.overview-gpu + .overview-gpu { margin-top: 1rem; }
.overview-gpu-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.overview-gpu-heading h4 { margin: 0; }
.overview-gpu-heading small { color: var(--text-secondary); overflow-wrap: anywhere; }
.overview-gpu-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .5rem; }
.overview-gpu-strip strong { font-size: clamp(.9rem, 1.5vw, 1.3rem); }
.overview-gpu-note { font-size: .75rem; margin: .4rem 0 0; }
@media (max-width: 600px) {
    .strata-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strata-settings .strata-setting-grid { grid-template-columns: minmax(0, 1fr); }
    .strata-copy-row { flex-wrap: wrap; }
    .strata-copy-row input { flex-basis: 100%; }
    .overview-gpu-strip { grid-template-columns: 1fr; gap: 1rem; }
    .overview-gpu-strip > div { border: 0; padding: 0; }
}
.bot-review-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border: 1px solid var(--warning-color, #ae741d);
    border-radius: 12px;
    background: color-mix(in srgb, var(--warning-color) 12%, var(--card-bg));
}
.bot-review-banner.hidden { display: none; }
.bot-review-banner p { margin: .3rem 0 0; }
.overview-notifications { margin-top: 1.5rem; }
#server-notification-list, #older-server-notification-list { display: grid; gap: .75rem; margin: 1rem 0; }
.server-notification { padding: .85rem 1rem; border: 1px solid var(--border-color, #ddd); border-radius: 10px; }
.server-notification div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.server-notification small { color: var(--text-muted, #666); }
.server-notification p { margin: .5rem 0 0; white-space: pre-wrap; }
@media (max-width: 600px) { .bot-review-banner { align-items: flex-start; flex-direction: column; } }

/* Keep the leading issue short, with its recorded evidence available on demand. */
.overview-health-content { min-width: 0; flex: 1; }
#status-detail:empty { display: none; }
.overview-health-explanation { margin-top: .6rem; color: var(--text-primary); }
.overview-health-explanation > summary { cursor: pointer; font-size: .8rem; padding: .4rem 0; }
.overview-health-facts { display: grid; gap: .65rem; margin-top: .5rem; font-size: .8rem; }
.overview-health-facts > div { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: .5rem 1rem; }
.overview-health-facts dt { color: var(--text-secondary); }
.overview-health-facts dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16rem; overflow-y: auto; }
#overview-primary-action:disabled { cursor: default; opacity: .75; }
.notification-details { margin-top: .65rem; }
.notification-details > summary,
.backup-job-status details > summary,
.backup-last-run-detail details > summary { cursor: pointer; padding: .4rem 0; }
.notification-details pre,
.backup-job-status pre,
.backup-last-run-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow-y: auto; }
.server-notification > .link-button { margin-top: .65rem; }
.backup-last-run-detail > div:first-child { min-width: 0; flex: 1; }
.backup-last-run-actions { max-width: 20rem; }
.backup-job-status, .backup-last-run-detail { scroll-margin-top: 1rem; overflow-wrap: anywhere; }
.backup-job-status:focus-visible, .backup-last-run-detail:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
@media (max-width: 600px) {
    .overview-health { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; }
    .overview-health > .link-button { grid-column: 2; margin-left: 0; justify-self: start; white-space: normal; text-align: left; }
    .overview-health-facts > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .backup-last-run-detail { flex-direction: column; }
    .backup-last-run-actions { max-width: none; justify-content: flex-start; }
}
.restore-pool-mapping {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.restore-pool-mapping.hidden {
    display: none;
}

.restore-pool-mapping h4,
.restore-pool-mapping p {
    margin: 0;
}

.restore-pool-mapping label {
    display: grid;
    gap: 0.35rem;
    font-weight: 600;
}

.restore-pool-mapping select {
    width: 100%;
}