/* care-a scenes (js/scenes/care-a.js): styles for this file only, every class prefixed ca-. */
.ca-hd { gap: 10px; margin-bottom: 12px; min-height: 30px; }
.ca-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.1); font-size: 17px; flex: none; }
.ca-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ca-tt .t1, .ca-tt .t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-sm { height: 28px; padding: 0 12px; flex: none; }
.nb[disabled] { pointer-events: none; }
.ca-l { display: grid; gap: 4px; }
.ca-r { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.05);
  transition: background var(--m-slow) var(--ease-out), opacity var(--m-slow) var(--ease-out); }
.ca-r .n { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-r .n small { margin-left: 8px; font-weight: 400; }
.ca-r.on { background: rgba(48,209,88,.14); }
.ca-r.off { opacity: .45; }
.ca-r.ca-in { animation: vin 280ms calc(var(--i) * 110ms) var(--ease-out) both; }
.ca-ai { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.1); font-size: 14px; flex: none; }
.ca-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 11px; font-weight: 600; flex: none; }
.ca-x { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 92px; flex: none; font-size: 12px; color: var(--notch-text-2); white-space: nowrap; }
.ca-x .meterbar { width: 84px; flex: none; }
.ca-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--notch-green); white-space: nowrap; animation: pop 400ms var(--sp-reward); }
.ca-am { font-size: 12px; font-weight: 600; color: var(--notch-amber); }
.ca-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; min-height: 28px; }
.ca-ft .t2 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 160ms linear; }

/* Range slider */
.ca-rng { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: none; cursor: pointer; --p: 50%; --c: var(--notch-text); }
.ca-rng::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--p), rgba(255,255,255,.14) var(--p)); }
.ca-rng::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--p), rgba(255,255,255,.14) var(--p)); }
.ca-rng::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.ca-rng::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }
.ca-rng:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; border-radius: 4px; }

/* Cleaning Mode */
.ca-kb { display: grid; gap: 4px; padding: 10px 0; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); transition: opacity var(--m-slow); }
.ca-kr { display: flex; justify-content: center; gap: 4px; }
.ca-kr i { display: grid; place-items: center; width: 28px; height: 20px; border-radius: 5px; background: rgba(255,255,255,.12); font: 600 10px/1 -apple-system, system-ui; text-transform: uppercase; color: var(--notch-text-2); transition: background var(--m-slow), color var(--m-slow); }
.ca-kr i.sp { width: 168px; }
.ca-kb.lock i { background: rgba(255,255,255,.05); color: rgba(255,255,255,.3); cursor: not-allowed; }
.ca-kb.lock { border-color: rgba(255,69,58,.5); }
.ca-kr i.x { animation: ca-nope 320ms var(--ease-out); }
@keyframes ca-nope { 20% { translate: -3px 0; background: rgba(255,69,58,.5); } 50% { translate: 3px 0; } 80% { translate: -2px 0; } }

/* Connected Devices */
.ca-cnt { font-size: 26px; font-weight: 600; min-width: 24px; text-align: right; }
.ca-dvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ca-dv { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 90px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.24); opacity: .55;
  transition: opacity var(--m-slow), background var(--m-slow), border-color var(--m-slow); }
.ca-dvi { font-size: 26px; color: var(--notch-text-2); display: flex; }
.ca-dv.on { opacity: 1; border-style: solid; border-color: rgba(48,209,88,.5); background: rgba(48,209,88,.1); animation: pop 420ms var(--sp-reward); }
.ca-dv.on .ca-dvi { color: var(--notch-text); }

/* Monitors */
.ca-mg { display: grid; grid-template-columns: 1fr 104px; gap: 12px; margin-bottom: 12px; }
.ca-g { height: 92px; overflow: hidden; }
.ca-g svg { display: block; width: 100%; height: 100%; }
.ca-ln { fill: none; stroke: var(--notch-green); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ca-ar { fill: rgba(100,210,255,.2); stroke: none; }
.ca-g.gpu .ca-ln { stroke: var(--notch-teal); }
.ca-st { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ca-cb { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.ca-cb i { flex: 1; height: 12%; border-radius: 3px; background: var(--notch-green); opacity: .85; transition: height 160ms linear; }
.ca-gr { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ca-bk { flex: 1; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; height: 14px; }
.ca-bk i { border-radius: 2px; background: rgba(255,255,255,.1); transition: background 160ms; }
.ca-bk i.on { background: var(--notch-teal); } .ca-bk i.on.hot { background: var(--notch-amber); }
.ca-dk { grid-template-columns: 96px 1fr; margin-bottom: 0; }
.ca-rl { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.ca-rl .ring { position: absolute; inset: 6px; width: 84px; height: 84px; }
.ca-rl .ring circle { stroke-width: 2; }
.ca-rl b { font-size: 20px; font-weight: 600; }
.ca-ac { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ca-ac > div { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; }
.ca-ac .meterbar i { transition: width 160ms linear; }

/* Displays */
.ca-dr { display: grid; grid-template-columns: 118px 1fr 40px; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.ca-dr .n { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ca-dr .ca-v { text-align: right; }

/* Extra brightness */
.ca-rw { position: relative; margin-top: 18px; padding: 0 2px 22px; }
.ca-mk { position: absolute; left: calc(9px + .8333 * (100% - 22px)); top: 22px; width: 2px; height: 8px; margin-left: 1px; background: rgba(255,255,255,.4); }
.ca-zl { position: absolute; left: calc(9px + .8333 * (100% - 22px)); top: 32px; font-size: 11px; font-weight: 600; color: var(--notch-text-2); transition: color var(--m-slow); }
.xon .ca-zl { color: var(--notch-amber); }
.ca-xdr { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity 160ms linear;
  background: radial-gradient(55% 55% at 50% 72%, rgba(255,246,222,.95), rgba(255,246,222,0) 72%); }

/* Fan Control */
.ca-seg { display: flex; gap: 2px; padding: 2px; border-radius: 15px; background: rgba(255,255,255,.07); flex: none; }
.ca-seg button { height: 24px; padding: 0 11px; border-radius: 12px; font: 600 11px/1 -apple-system, system-ui; color: var(--notch-text-2); position: relative; transition: background var(--m-base), color var(--m-base); }
.ca-seg button::after { content: ""; position: absolute; inset: -8px -2px; }
.ca-seg button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: var(--notch-text); }
.ca-fb { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.ca-fan { width: 96px; height: 96px; }
.ca-fr { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; }
.ca-bl { transform-origin: 50px 50px; }
.ca-bl path { fill: rgba(255,255,255,.85); }
.ca-hub { fill: #2a2b31; stroke: rgba(255,255,255,.5); stroke-width: 2; }
.ca-fc { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ca-ctl { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ca-ctl .ca-rng { flex: 1; }
.ca-ctl:has(.ca-cv) { flex-wrap: wrap; gap: 2px; }
.ca-cv { width: 150px; height: 34px; }
.ca-cl { fill: none; stroke: var(--notch-teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-cd { fill: #fff; }

/* Homebrew */
.ca-pks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ca-pk { display: flex; flex-direction: column; gap: 4px; justify-content: center; height: 46px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.ca-log { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08);
  font: 500 11px/16px ui-monospace, Menlo, Consolas, monospace; color: var(--notch-text-2); }
.ca-log p { min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-log p:first-child { color: var(--notch-text); }

@media (prefers-reduced-motion: reduce) {
  .ca-r, .ca-r.ca-in, .ca-ok, .ca-dv, .ca-dv.on, .ca-kr i.x, .ca-dim, .ca-xdr, .ca-cb i, .ca-bk i, .ca-ac .meterbar i, .ca-kb { animation: none; transition: none; }
}