/* Olympus GUI: the installable-app surfaces (PWA brief): install card, update toast, Settings → Notifications,
   the alert opened from a notification, and safe areas for the iOS Home Screen app (black-translucent status bar).
   Roles from design/tokens.css and parts from design/components.css only; no raw colour. */

/* ================================================================ safe areas (viewport-fit=cover) */
.sidebar { padding-top: calc(var(--sp-4) + env(safe-area-inset-top)); padding-left: calc(var(--sp-3) + env(safe-area-inset-left)); }
@media (max-width: 1099px) { .sidebar { padding-top: calc(var(--sp-3) + env(safe-area-inset-top)); padding-left: calc(var(--sp-2) + env(safe-area-inset-left)); } }
@media (max-width: 719px) {
  .topbar { height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
    padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--sp-2), env(safe-area-inset-right)); }
  .view { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}
.auth { padding-top: env(safe-area-inset-top); }

/* ================================================================ install card (Fleet, from the second visit) */
.install-slot:empty { display: none; }
.install-slot { margin-bottom: var(--sp-4); }
.install-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
.install-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-lg);
  background: var(--accent-wash); color: var(--accent); }
.install-icon .icon { width: 20px; height: 20px; }
.install-text { flex: 1; min-width: 0; color: var(--ink-2); }
.install-text b { color: var(--ink-1); font-weight: 600; }
.install-title { font: var(--text-title-3); color: var(--ink-1); margin-bottom: 2px; }
.install-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.install-close { flex: none; color: var(--ink-3); }
@media (max-width: 559px) {
  .install-card { flex-wrap: wrap; align-items: flex-start; padding: var(--sp-4); }
  .install-card:not(.install-ios) .install-actions { width: 100%; padding-left: calc(40px + var(--sp-4)); }
  .install-ios .install-close { margin-left: auto; }
}

/* ================================================================ update toast (waits for the user) */
.toast-host-action { z-index: 71; pointer-events: none; }
.toast-action { pointer-events: auto; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); }
.toast-action > .icon { color: var(--accent); }
.toast-action .toast-text { margin-right: var(--sp-2); }
.toast-action .btn-ghost { color: var(--ink-2); }
@media (max-width: 719px) { .toast-host-action { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-3)); } }

/* ================================================================ settings */
.settings { max-width: 760px; }
.settings-card .section-head { margin-bottom: var(--sp-2); }
.settings-intro { color: var(--ink-2); max-width: 62ch; margin-bottom: var(--sp-4); }
.set-rows { display: grid; border-top: 1px solid var(--line); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.set-text { min-width: 0; display: grid; gap: 2px; }
.set-label { display: flex; align-items: center; gap: var(--sp-2); font-weight: 500; color: var(--ink-1); }
.set-label .icon { color: var(--ink-3); }
.set-row > .switch, .set-row > .btn, .set-row > .chip { flex: none; }
.settings-card > .status-msg { margin-top: var(--sp-2); }
.settings-foot { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-4); }
.settings-foot .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.settings .banner-info p { color: var(--ink-2); margin-top: 2px; }

.unblock { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.unblock-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); padding: 0; list-style: none; }
.unblock-list li { display: grid; gap: 2px; padding-left: var(--sp-3); border-left: 2px solid var(--line-strong); color: var(--ink-2); }
.unblock-list li b { color: var(--ink-1); font-weight: 600; }
.unblock-list li.is-here { border-left-color: var(--accent); }
.unblock-list .chip { justify-self: start; }

.device-list { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.device-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.device-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-3); }
.device-text { flex: 1; min-width: 0; }
.device-name { font-weight: 500; color: var(--ink-1); }
@media (max-width: 559px) { .device-row { flex-wrap: wrap; } .device-row > .btn { margin-left: calc(32px + var(--sp-3)); } }

/* ================================================================ the alert a notification opened (agent screen) */
.alert-focus { margin-bottom: var(--sp-5); }
.alert-focus-card { border-color: var(--line-strong); }
.alert-focus-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) 0 var(--sp-5); }
.alert-focus-head .section-title { margin: 0 auto 0 0; }

@media (forced-colors: active) {
  .install-icon, .device-icon { border: 1px solid CanvasText; }
  .unblock-list li.is-here { border-left-color: Highlight; }
}
.set-text .status-msg { min-height: 0; }
.set-text .status-msg:empty { display: none; }
.settings-card > .status-msg:empty { display: none; }