/* CHIKARA Island (Standards 16): shown only when something true needs saying */
:root { --safe-top: env(safe-area-inset-top, 0px); --island-h: 40px; --island-gap: 8px; --island-top: max(10px, var(--safe-top)); --island-strip: calc(var(--island-top) + var(--island-h) + var(--island-gap)); --island-bg: #1A1208; --island-ink: #FBF5EA; --island-ok: #4ADE80; --island-warn: #FBBF24; --island-off: #F87171; --z-island: 200; }
html.has-island body { padding-top: var(--island-strip); }
html.has-island::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--island-strip); background: var(--ivory); z-index: 199; pointer-events: none; }
html.has-island .topbar { top: var(--island-strip); }
.island { box-sizing: border-box; position: fixed; top: var(--island-top); left: 50%; transform: translateX(-50%); z-index: var(--z-island); width: max-content; max-width: min(440px, calc(100vw - 2rem)); min-height: var(--island-h); background: var(--island-bg); color: var(--island-ink); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; box-shadow: 0 8px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); transition: border-radius .35s cubic-bezier(.175, .885, .32, 1.275), padding .35s ease; }
.island[hidden] { display: none; }
.island.expanded { border-radius: 22px; }
.island-toggle { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: calc(var(--island-h) - 2px); padding: 8px 18px; background: none; border: 0; color: inherit; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; }
.island-toggle::after { content: ''; position: absolute; inset: -2px 0; }
.island-toggle[aria-disabled="true"] { cursor: default; }
.island-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 999px; }
.island-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.island.expanded .island-text { white-space: normal; }
.island-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; animation: island-pulse 2s ease-in-out infinite; }
.island-dot[data-state="ok"] { background: var(--island-ok); box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.island-dot[data-state="warn"] { background: var(--island-warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, .25); }
.island-dot[data-state="off"] { background: var(--island-off); box-shadow: 0 0 0 3px rgba(248, 113, 113, .25); animation: none; }
.island-detail { padding: 0 18px 12px 37px; font-size: 12px; font-weight: 500; color: #C3BCB2; }
@keyframes island-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .island, .island-dot { animation: none !important; transition: none !important; } }