/* parent panel: layout on the "Podwórko" tokens (/assets/tp/tokens.css, light and dark theme by the system);
   denser than the child screens, no colour values of its own */
* { box-sizing: border-box; }
body { margin: 0; background: var(--tp-color-bg); color: var(--tp-color-text);
  font: var(--tp-font-size-md)/var(--tp-line-height-normal) var(--tp-font-body);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
h1, h2, h3, .big, .brand-name { font-family: var(--tp-font-display); line-height: var(--tp-line-height-snug); }
header { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-3);
  max-width: 680px; margin: 0 auto; padding: var(--tp-space-4) var(--tp-space-4) 0; }
.brand { display: flex; flex-direction: column; }
.brand-name { font-size: var(--tp-font-size-xl); font-weight: var(--tp-font-weight-extrabold); color: var(--tp-color-primary); }
.brand-sub { font-size: var(--tp-font-size-sm); color: var(--tp-color-text-muted); font-weight: var(--tp-font-weight-semibold); }
main { max-width: 680px; margin: 0 auto; padding: var(--tp-space-2) var(--tp-space-4) var(--tp-space-7); }
.card { background: var(--tp-color-surface); border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow-card);
  padding: var(--tp-space-4); margin: var(--tp-space-3) 0; }
.card > h3:first-child { margin-top: 0; }
.card h2 { margin: 0 0 var(--tp-space-1); font-size: var(--tp-font-size-2xl); font-weight: var(--tp-font-weight-extrabold); }
.card h3 { margin: var(--tp-space-5) 0 var(--tp-space-2); font-size: var(--tp-font-size-sm); color: var(--tp-color-text-muted);
  text-transform: uppercase; letter-spacing: .05em; font-weight: var(--tp-font-weight-bold); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-3); flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.big { font-family: var(--tp-font-numeric); font-size: var(--tp-font-size-4xl); font-weight: var(--tp-font-weight-extrabold);
  line-height: var(--tp-line-height-tight); font-variant-numeric: tabular-nums; }
.muted { color: var(--tp-color-text-muted); font-size: var(--tp-font-size-sm); }
.bar { height: var(--tp-size-progress-bar); background: var(--tp-color-track); border-radius: var(--tp-radius-pill);
  overflow: hidden; margin: var(--tp-space-3) 0 var(--tp-space-1); }
.bar > div { height: 100%; border-radius: var(--tp-radius-pill); background: var(--tp-color-ok); }
.bar.low > div { background: var(--tp-color-low); }
.bar.off > div { background: var(--tp-color-off); }
.row { display: flex; gap: var(--tp-space-2); flex-wrap: wrap; margin: var(--tp-space-2) 0; }
.row > * { flex: 1 1 0; min-width: 0; }
button, select, input { font: inherit; border-radius: var(--tp-radius-pill); min-height: var(--tp-size-touch-min); }
button { background: var(--tp-color-surface-variant); color: var(--tp-color-text); font-weight: var(--tp-font-weight-bold);
  padding: var(--tp-space-2) var(--tp-space-4); cursor: pointer; border: var(--tp-size-border-width) solid transparent; }
button.primary { background: var(--tp-color-primary); color: var(--tp-color-on-primary); }
button.quiet { background: transparent; border-color: var(--tp-color-border-strong); }
button.danger { background: var(--tp-color-error); color: var(--tp-color-on-error); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: var(--tp-size-focus-width) solid var(--tp-color-focus); outline-offset: var(--tp-size-focus-offset); }
select, input { background: var(--tp-color-surface); color: var(--tp-color-text); padding: var(--tp-space-2) var(--tp-space-4);
  width: 100%; border: var(--tp-size-border-width) solid var(--tp-color-border-strong); }
input { border-radius: var(--tp-radius-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--tp-space-2); margin: var(--tp-space-2) 0 0; }
.chip { display: inline-block; padding: 2px var(--tp-space-3); border-radius: var(--tp-radius-pill); font-size: var(--tp-font-size-xs);
  font-weight: var(--tp-font-weight-extrabold); white-space: nowrap; background: var(--tp-color-surface-variant); color: var(--tp-color-text-muted); }
.chip.ok { background: var(--tp-color-ok-bg); color: var(--tp-color-ok-fg); }
.chip.low { background: var(--tp-color-low-bg); color: var(--tp-color-low-fg); }
.chip.off { background: var(--tp-color-off-bg); color: var(--tp-color-off-fg); }
.chip.free { background: var(--tp-color-free-bg); color: var(--tp-color-free-fg); }
.chip.error { background: var(--tp-color-error-bg); color: var(--tp-color-error-fg); }
.list { background: var(--tp-color-surface-subtle); border-radius: var(--tp-radius-md); padding: var(--tp-space-1) var(--tp-space-3); }
.cat, .dev { display: flex; justify-content: space-between; align-items: center; gap: var(--tp-space-2);
  padding: var(--tp-space-2) 0; border-top: var(--tp-size-border-width) solid var(--tp-color-border-subtle); }
.cat:first-child, .dev:first-child { border-top: 0; }
.cat { flex-wrap: wrap; }
.cat .sub { padding-left: var(--tp-space-4); }
.cat-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--tp-space-2);
  margin-left: auto; font-variant-numeric: tabular-nums; }
.dev { display: block; padding: var(--tp-space-3) 0; }
.dev-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tp-space-2); }
.dev-name { font-weight: var(--tp-font-weight-bold); overflow-wrap: anywhere; }
.dot { display: inline-block; width: var(--tp-size-status-dot); height: var(--tp-size-status-dot); border-radius: 50%;
  background: var(--tp-color-border-strong); margin-right: var(--tp-space-1); vertical-align: baseline; }
.dot.on { background: var(--tp-color-ok); }
.cmds { font-size: var(--tp-font-size-sm); color: var(--tp-color-text-muted); margin-top: var(--tp-space-2); }
.invite { margin-top: var(--tp-space-3); }
.invite-code { font: var(--tp-font-weight-bold) var(--tp-font-size-xl)/var(--tp-line-height-snug) var(--tp-font-display);
  text-align: center; padding: var(--tp-space-3); border-radius: var(--tp-radius-md); background: var(--tp-color-surface-variant);
  user-select: all; overflow-wrap: anywhere; }
.qr { display: block; width: 220px; max-width: 100%; height: auto; margin: var(--tp-space-3) auto;
  border-radius: var(--tp-radius-md); background: var(--tp-color-surface); }
#offline { background: var(--tp-color-error-bg); color: var(--tp-color-error-fg); border-radius: var(--tp-radius-md);
  padding: var(--tp-space-3) var(--tp-space-4); margin: var(--tp-space-3) 0 0; font-weight: var(--tp-font-weight-semibold); }
#toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--tp-color-text); color: var(--tp-color-bg); padding: var(--tp-space-3) var(--tp-space-5); border-radius: var(--tp-radius-pill);
  font-weight: var(--tp-font-weight-bold); max-width: calc(100% - 32px); opacity: 0; transition: opacity .2s; pointer-events: none; }
#toast.show { opacity: 1; }
#login { max-width: 420px; margin: 8vh auto 0; }
.tabs { display: flex; gap: var(--tp-space-1); background: var(--tp-color-surface-variant); border-radius: var(--tp-radius-pill);
  padding: var(--tp-space-1); margin: var(--tp-space-3) 0; }
.tabs button { flex: 1 1 0; min-height: 44px; background: transparent; color: var(--tp-color-text-muted); font-size: var(--tp-font-size-sm); }
.tabs button[aria-selected="true"] { background: var(--tp-color-surface); color: var(--tp-color-text); box-shadow: var(--tp-shadow-card); }
.choice { display: flex; gap: var(--tp-space-3); align-items: center; padding: var(--tp-space-3); margin: var(--tp-space-2) 0;
  border: var(--tp-size-border-width) solid var(--tp-color-border-strong); border-radius: var(--tp-radius-sm); cursor: pointer; }
.choice input { width: auto; min-height: 0; margin: 0; }
#login form > * + * { margin-top: var(--tp-space-2); }
#login-error { color: var(--tp-color-error); font-weight: var(--tp-font-weight-semibold); }
.donate p { margin: 0 0 var(--tp-space-1); }
.donate h2 { font-size: var(--tp-font-size-xl); }
a.button { display: flex; text-align: center; align-items: center; justify-content: center; min-height: var(--tp-size-touch-min); border-radius: var(--tp-radius-pill);
  font-weight: var(--tp-font-weight-bold); text-decoration: none; padding: var(--tp-space-2) var(--tp-space-4); }
a.button.primary { background: var(--tp-color-primary); color: var(--tp-color-on-primary); }
a.button.accent { background: var(--tp-color-accent); color: var(--tp-color-on-accent); }
a { color: var(--tp-color-primary); }
.source { text-align: center; }
.source a { color: inherit; }
.vault-warn { background: var(--tp-color-low-bg); color: var(--tp-color-low-fg); border-radius: var(--tp-radius-md);
  padding: var(--tp-space-3) var(--tp-space-4); font-weight: var(--tp-font-weight-semibold); }
.vault-file { overflow-wrap: anywhere; }
button.small { min-height: 36px; padding: var(--tp-space-1) var(--tp-space-3); font-size: var(--tp-font-size-sm); }
.vault-versions { margin-top: var(--tp-space-2); padding-left: var(--tp-space-3); border-left: var(--tp-size-border-width) solid var(--tp-color-border-subtle); }
.vault-version { display: flex; justify-content: space-between; align-items: center; gap: var(--tp-space-2);
  font-size: var(--tp-font-size-sm); padding: var(--tp-space-1) 0; font-variant-numeric: tabular-nums; }
.vault-form > * + *, .vault-created > * + * { margin-top: var(--tp-space-2); }
.vault-form { margin-top: var(--tp-space-3); }
.vault-created { background: var(--tp-color-surface-variant); border-radius: var(--tp-radius-md); padding: var(--tp-space-4); margin-top: var(--tp-space-3); }
.vault-created p { margin: 0; font-weight: var(--tp-font-weight-semibold); }
.vault-secret input { font-family: var(--tp-font-numeric); font-weight: var(--tp-font-weight-bold); font-size: var(--tp-font-size-sm); padding-left: var(--tp-space-3); padding-right: var(--tp-space-3); }
.vault-help { border-top: var(--tp-size-border-width) solid var(--tp-color-border-subtle); padding: var(--tp-space-2) 0; }
.vault-help summary { cursor: pointer; font-weight: var(--tp-font-weight-bold); padding: var(--tp-space-3) 0; }
.vault-steps { margin: var(--tp-space-1) 0 var(--tp-space-2); padding-left: var(--tp-space-5); }
.vault-steps li { margin: var(--tp-space-1) 0; overflow-wrap: anywhere; }
/* views (panel-views.js): bottom navigation on a phone, tabs under the header on a wide screen */
#nav { display: none; }
body.signed-in #nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--tp-color-surface);
  box-shadow: var(--tp-shadow-card); padding: 0 0 env(safe-area-inset-bottom); justify-content: center; }
body.signed-in main { padding-bottom: calc(var(--tp-size-touch-min) + var(--tp-space-8)); }
body.signed-in #toast { bottom: calc(var(--tp-size-touch-min) + var(--tp-space-6) + env(safe-area-inset-bottom)); }
.nav-item { flex: 1 1 0; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--tp-space-2) var(--tp-space-1); min-height: var(--tp-size-touch-min); text-decoration: none;
  color: var(--tp-color-text-muted); font-size: var(--tp-font-size-xs); font-weight: var(--tp-font-weight-bold); }
.nav-icon { font-size: var(--tp-font-size-lg); line-height: 1; }
.nav-item[aria-current="page"] { color: var(--tp-color-primary); }
@media (min-width: 720px) {
  body.signed-in #nav { position: static; max-width: 648px; margin: var(--tp-space-3) auto 0; padding: var(--tp-space-1);
    border-radius: var(--tp-radius-pill); background: var(--tp-color-surface-variant); box-shadow: none; gap: var(--tp-space-1); }
  body.signed-in main { padding-bottom: var(--tp-space-7); }
  body.signed-in #toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .nav-item { flex-direction: row; justify-content: center; gap: var(--tp-space-2); max-width: none; border-radius: var(--tp-radius-pill);
    font-size: var(--tp-font-size-sm); min-height: 44px; }
  .nav-icon { font-size: var(--tp-font-size-md); }
  .nav-item[aria-current="page"] { background: var(--tp-color-surface); color: var(--tp-color-text); box-shadow: var(--tp-shadow-card); }
}
/* one child: name, state, czas ekranowy and quick actions (panel-child-card.js, panel-child-actions.js) */
.child-link { color: inherit; text-decoration: none; }
.pool { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--tp-space-3); margin-top: var(--tp-space-2); }
.pool .big { font-size: var(--tp-font-size-4xl); }
.child .bar { margin: var(--tp-space-2) 0 var(--tp-space-3); }
.actions .row { margin: var(--tp-space-2) 0 0; }
.actions .row button { padding-left: var(--tp-space-2); padding-right: var(--tp-space-2); }
.dev .row button, .actions .row.more-actions button { font-size: var(--tp-font-size-sm); line-height: var(--tp-line-height-snug); }
.sheet { background: var(--tp-color-surface-subtle); border-radius: var(--tp-radius-md); padding: var(--tp-space-3); margin-top: var(--tp-space-2); }
.sheet p { margin: 0 0 var(--tp-space-2); }
/* "Usuń z listy…" of a device that still works: a quiet "Więcej" under it (panel-devices.js) */
details.more.dev-more { margin-top: var(--tp-space-2); }
details.dev-more > summary { font-weight: var(--tp-font-weight-normal); font-size: var(--tp-font-size-sm); color: var(--tp-color-text-muted); }
details.dev-more p { margin: 0 0 var(--tp-space-2); }
.dev-remove { margin-top: var(--tp-space-2); }
.details-link, .back { display: inline-block; margin-top: var(--tp-space-3); font-size: var(--tp-font-size-sm); font-weight: var(--tp-font-weight-bold);
  text-decoration: none; padding: var(--tp-space-1) 0; }
.back { margin: var(--tp-space-3) 0 0; }
.stamp { text-align: center; }
details.more > summary { cursor: pointer; font-weight: var(--tp-font-weight-bold); padding: var(--tp-space-2) 0; min-height: 36px; }
details.more { border-top: var(--tp-size-border-width) solid var(--tp-color-border-subtle); margin-top: var(--tp-space-3); padding-top: var(--tp-space-1); }
.card > details.more:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.setting-line { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-space-3); flex-wrap: wrap;
  border-top: var(--tp-size-border-width) solid var(--tp-color-border-subtle); margin-top: var(--tp-space-3); padding-top: var(--tp-space-3);
  font-weight: var(--tp-font-weight-bold); }
a.button.small { min-height: 36px; padding: var(--tp-space-1) var(--tp-space-4); font-size: var(--tp-font-size-sm); }
/* faza 2: requests, notes on the child's card, device state, category settings, modes (panel-requests.js,
   panel-child-notes.js, panel-device-health.js, panel-category-edit.js, panel-modes.js, panel-mode-editor.js) */
.note { display: block; border-radius: var(--tp-radius-md); padding: var(--tp-space-2) var(--tp-space-3); margin: var(--tp-space-2) 0 0;
  font-size: var(--tp-font-size-sm); background: var(--tp-color-surface-subtle); text-decoration: none; color: var(--tp-color-text); }
.note p, .note.request p { margin: 0; }
.note.request { background: var(--tp-color-primary-container); color: var(--tp-color-on-primary-container); margin: var(--tp-space-3) 0; }
.note.request .muted { color: inherit; }
.note.low, .note.warn { background: var(--tp-color-low-bg); color: var(--tp-color-low-fg); }
.note.attention { font-weight: var(--tp-font-weight-bold); }
.now { margin: var(--tp-space-1) 0 0; font-size: var(--tp-font-size-sm); font-weight: var(--tp-font-weight-semibold); }
.health-line { font-size: var(--tp-font-size-sm); }
.health-line .health-status { font-weight: var(--tp-font-weight-bold); }
.health-line.warn .health-status { color: var(--tp-color-low-fg); }
.problems { list-style: none; margin: var(--tp-space-2) 0 0; padding: var(--tp-space-2) var(--tp-space-3); border-radius: var(--tp-radius-md);
  background: var(--tp-color-low-bg); color: var(--tp-color-low-fg); font-size: var(--tp-font-size-sm); }
.problems li + li { margin-top: var(--tp-space-2); }
.problems li span { display: block; }
.problems .hint { color: inherit; opacity: .85; font-weight: var(--tp-font-weight-normal); }
.problems li.update:only-child { background: none; }
details.cat-more { margin-top: 0; padding-top: 0; }
details.cat-more:first-child { border-top: 0; }
details.cat-more > summary { list-style: none; cursor: pointer; padding: 0; min-height: 0; }
details.cat-more > summary::-webkit-details-marker { display: none; }
details.cat-more > summary .cat { border-top: 0; }
details.cat-more > summary .cat-right::after { content: '⌄'; color: var(--tp-color-text-muted); margin-left: var(--tp-space-1); }
details.cat-more[open] > summary .cat-right::after { content: '⌃'; }
.cat-edit { padding: 0 0 var(--tp-space-3); }
.edit-part { display: block; padding: var(--tp-space-2) 0; }
.edit-part + .edit-part { border-top: var(--tp-size-border-width) dashed var(--tp-color-border-subtle); }
.edit-title { font-weight: var(--tp-font-weight-bold); font-size: var(--tp-font-size-sm); margin: var(--tp-space-2) 0 var(--tp-space-1); }
.switch { display: flex; gap: var(--tp-space-3); align-items: flex-start; cursor: pointer; }
.switch > span > span { display: block; }
.switch .edit-title { margin-top: 0; }
.switch input, .check input, .day input { width: auto; min-height: 0; margin: 4px 0 0; accent-color: var(--tp-color-primary); }
.chip.domain { display: inline-flex; align-items: center; gap: var(--tp-space-1); font-weight: var(--tp-font-weight-bold); padding-right: 2px; }
.chip-x { min-height: 0; padding: 0 var(--tp-space-1); background: transparent; color: inherit; font-size: var(--tp-font-size-xs); line-height: 1.6; }
.add-row > input { flex: 1 1 auto; }
.add-row > button { flex: 0 0 auto; }
.presets { align-items: center; }
.presets > * { flex: 0 0 auto; }
.mode-state { font-size: var(--tp-font-size-sm); font-weight: var(--tp-font-weight-bold); color: var(--tp-color-text-muted); }
.mode-state.on { color: var(--tp-color-off-fg); }
.mode-quick { font-weight: var(--tp-font-weight-bold); }
.note.request .row button { font-size: var(--tp-font-size-sm); padding-left: var(--tp-space-2); padding-right: var(--tp-space-2); }
.mode-quick { flex-wrap: nowrap; }
.mode-quick button { flex: 0 0 auto; font-size: var(--tp-font-size-sm); min-height: 36px; padding: var(--tp-space-1) var(--tp-space-3); }
.mode-editor { padding: var(--tp-space-3) 0; }
.range { border-left: 3px solid var(--tp-color-border-subtle); padding-left: var(--tp-space-3); margin: var(--tp-space-2) 0; }
.range p { margin: 0; }
.days { display: flex; flex-wrap: wrap; gap: var(--tp-space-1); }
.day, .check { display: inline-flex; align-items: center; gap: var(--tp-space-1); font-size: var(--tp-font-size-sm); cursor: pointer; }
.day { padding: var(--tp-space-1) var(--tp-space-2); border-radius: var(--tp-radius-pill); background: var(--tp-color-surface-variant); }
.day input { margin: 0; }
.range-hours { align-items: center; }
.range-hours label { display: flex; align-items: center; gap: var(--tp-space-1); font-size: var(--tp-font-size-sm); }
.range-hours > button { flex: 0 0 auto; }
.range-hours input { flex: 1 1 auto; min-width: 0; padding-left: var(--tp-space-2); padding-right: var(--tp-space-2); }
.mode .row button, .mode-editor .row button { font-size: var(--tp-font-size-sm); padding-left: var(--tp-space-2); padding-right: var(--tp-space-2); }
.except { display: flex; flex-wrap: wrap; gap: var(--tp-space-1) var(--tp-space-3); }
.mode-editor > .check { margin: var(--tp-space-3) 0 0; font-weight: var(--tp-font-weight-bold); }
.form-error { color: var(--tp-color-error); font-weight: var(--tp-font-weight-semibold); }
.hidden { display: none !important; }
/* na-zywo */
.live-mark { display: inline-flex; align-items: center; gap: var(--tp-space-1); font-size: var(--tp-font-size-xs);
  font-weight: var(--tp-font-weight-bold); color: var(--tp-color-ok-fg); white-space: nowrap; }
.live-dot { width: var(--tp-size-status-dot); height: var(--tp-size-status-dot); border-radius: 50%; background: var(--tp-color-ok); }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: live-pulse 2s ease-in-out infinite; } }
@keyframes live-pulse { 50% { opacity: 0.35; } }
/* nowe-urzadzenie */
.chip.new-device-badge { background: var(--tp-color-low-bg); color: var(--tp-color-low-fg); font-weight: var(--tp-font-weight-bold); }
.new-device-actions p { margin: var(--tp-space-2) 0 0; }
.note.new-device .row button, .new-device-actions .row button { font-size: var(--tp-font-size-sm); padding-left: var(--tp-space-2); padding-right: var(--tp-space-2); }
.dev-name .chip { margin-left: var(--tp-space-2); vertical-align: middle; }
/* passkey */
.passkey-button { width: 100%; margin-top: var(--tp-space-3); }
.login-or { display: flex; align-items: center; gap: var(--tp-space-3); margin: var(--tp-space-3) 0 0; }
.login-or::before, .login-or::after { content: ''; flex: 1 1 0; border-top: var(--tp-size-border-width) solid var(--tp-color-border-subtle); }
.passkey .dev-head { align-items: center; }
/* mcp */
.agent { display: flex; gap: var(--tp-space-3); align-items: flex-start; justify-content: space-between; padding: var(--tp-space-3) 0; border-top: var(--tp-size-border-width) dashed var(--tp-color-border-subtle); }
.agent-text { flex: 1 1 auto; min-width: 0; }
.agent-text .edit-title { margin: 0 0 var(--tp-space-1); font-size: var(--tp-font-size-md); }
.agent > button { flex: 0 0 auto; }
.agent-url { word-break: break-all; }
.agent-log { margin: 0; padding-left: var(--tp-space-4); font-size: var(--tp-font-size-sm); }