/* Sync Box page: only what the shared Sync look does not have */
.pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all }
td .pt { display: inline-block; margin: 2px 12px 2px 0; white-space: nowrap } td .pt span { color: var(--muted) }
.row .btn { min-height: 44px }
.row .open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.row .open:hover { color: var(--ink) }
@media (max-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr) } }
.logs { margin: 0 18px 12px; max-height: 70vh; overflow: auto; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; color: var(--ink2) }
.row .btn.sm { flex: none }
@media (max-width: 700px) { .panel .row { flex-wrap: wrap } .panel .row .main { flex-basis: 100% } }
td select { font: inherit; color: var(--ink); background: var(--inset); border: 0; border-radius: 10px; padding: 7px 10px; min-height: 36px }
/* panels that fold away */
.panel > h2 .chev { margin-left: auto; width: 44px; height: 32px; color: var(--muted); transition: transform .2s var(--ease, ease) }
.panel > h2 .chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.panel > h2 small + .chev, .panel > h2 .chev { flex: none }
.panel.folded > :not(h2) { display: none }
.panel.folded { padding-bottom: 8px } .panel.folded > h2 { margin-bottom: 0 } .panel.folded > h2 .chev { transform: rotate(-90deg) }
/* devices */
.dtools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.dtools input[type=search] { font: inherit; color: var(--ink); background: var(--inset); border: 0; border-radius: 999px; padding: 0 16px; height: 40px; min-width: 200px }
.cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0 18px 14px }
.cam { display: block; color: inherit; border-radius: 14px; overflow: hidden; background: var(--inset) } .cam:hover { text-decoration: none }
.cam img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--inset) }
.cam span { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px }
.live { margin: 0 18px 14px; border-radius: 14px; overflow: hidden; background: #111 }
.live { display: grid } .live video, .live img { grid-area: 1 / 1; display: block; width: 100%; max-height: 72vh; object-fit: contain }
.live video { opacity: 0; transition: opacity .2s } .live video.on { opacity: 1 } .live img.gone { visibility: hidden }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px }
.check input { width: 20px; height: 20px }
tr.go { cursor: pointer } tr.go a { color: inherit }
@keyframes flash { from { background: var(--inset) } to { background: transparent } }
.flash { animation: flash 1.2s ease-out; border-radius: 6px }
@media (max-width: 700px) { .dtools { width: 100% } .dtools input[type=search] { flex: 1; min-width: 0 } }
@media (max-width: 700px) { .dtools input[type=search] { flex: 1 1 100%; height: 44px } th.seen, td.seen { display: none } .cams { grid-template-columns: 1fr } }
.live [hidden] { display: none }
.mstate { display: none }
@media (max-width: 700px) { th.state, td.state { display: none } .mstate { display: block; margin: 4px 0 2px } }

select.enum { font: inherit; color: var(--ink); background: var(--inset); border: 0; border-radius: 10px; padding: 7px 10px; min-height: 36px }

/* automations */
.alist { margin: 0 10px 4px }
.arow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 8px; border-top: 1px solid var(--line) } .arow:first-child { border-top: 0 }
.anum { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--inset); color: var(--muted); font-size: 12.5px; display: grid; place-items: center; margin-top: 24px }
.afields { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; min-width: 0 }
.af { display: grid; gap: 5px; font-size: 13px; color: var(--muted); min-width: 0 }
.af input, .af select, .form textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--inset); border: 0; border-radius: 10px; padding: 9px 10px; min-height: 40px; width: 100%; min-width: 0 }
.form textarea { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical }
.dur { display: flex; gap: 6px } .dur input { width: 80px; flex: none } .dur select { flex: 1 }
.days { display: flex; flex-wrap: wrap; gap: 4px }
.days button { font: inherit; font-size: 12.5px; border: 0; border-radius: 999px; padding: 0 10px; min-height: 32px; background: var(--inset); color: var(--ink2); cursor: pointer }
.days button[aria-pressed=true] { background: var(--ink); color: var(--paper, var(--wash)) }
.arm { flex: none; margin-top: 18px; color: var(--muted) } .arm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
details.run > summary { list-style: none; cursor: pointer } details.run > summary::-webkit-details-marker { display: none }
.trace { margin: 0 18px 12px 34px; padding: 0; font-size: 13.5px; color: var(--ink2) } .trace li { padding: 3px 0 } .trace .bad, small.bad { color: var(--down) }
@media (max-width: 700px) { .afields { grid-template-columns: 1fr } .anum { margin-top: 4px } .arm { margin-top: 0 } }
.af.wide { grid-column: 1 / -1 }
.chips, .times { display: flex; flex-wrap: wrap; gap: 6px; align-items: center } .chips select { flex: 1; min-width: 180px; width: auto } .times input { width: 130px }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--inset); color: var(--ink); border-radius: 999px; padding: 0 4px 0 12px; min-height: 36px; font-size: 14px }
.chip button { border: 0; background: none; color: var(--muted); width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer } .chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2 }
.sub { grid-column: 1 / -1; border-left: 2px solid var(--line); padding-left: 12px; margin: 4px 0 }
.subh, .opth { font-size: 13px; font-weight: 650; color: var(--ink2); margin: 2px 0 2px; display: flex; justify-content: space-between; align-items: center }
.opt { grid-column: 1 / -1; background: var(--inset); border-radius: 14px; padding: 10px 12px; margin: 4px 0 } .opt .arow { border-color: var(--line) }
.sub .alist { margin: 0 } .sub .arow { padding: 10px 0 } .addrow { margin: 4px 0 10px } .alist + .addrow { margin-left: 10px } .panel > .addrow { margin: 4px 18px 14px }
details.more { grid-column: 1 / -1 } details.more > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; min-height: 32px; list-style: none } details.more > summary::before { content: '+ ' } details.more[open] > summary::before { content: '− ' }
details.more > .afields { margin-top: 6px }
input.numset { font: inherit; color: var(--ink); background: var(--inset); border: 0; border-radius: 10px; padding: 7px 10px; min-height: 36px; width: 120px }
.arm.sure { color: var(--down) }
.anum:empty { visibility: hidden }
.panel > h2 #lsound { margin-left: auto; font-size: 13px } .panel > h2 #lsound[aria-pressed=true] { background: var(--ink); color: var(--paper, var(--wash)) }
.livebtns { margin-left: auto; display: flex; gap: 8px } .panel > h2 .livebtns #lsound { margin-left: 0 }
.livebtns #ltalk[aria-pressed=true] { background: var(--ink); color: var(--paper, var(--wash)) }
/* how the box is doing, in the sidebar */
.health { margin: 8px 6px 10px; padding: 10px 4px 4px; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 12.5px }
.hrow { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline }
.hrow span { color: var(--muted) } .hrow b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink2); white-space: nowrap }
.hrow b.warn { color: var(--warn) } .hrow b.crit { color: var(--down) }
.hrow i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink2) var(--p), var(--track, var(--inset)) var(--p)); opacity: .75 }
body.side-min .health { display: none }
@media (max-width: 900px) { .health { display: none } }
.bgroup { margin: 14px 18px 2px; font-size: 13px; font-weight: 600; color: var(--muted) } .bgroup small { font-weight: 400 }
summary.bgroup { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px }
#pren { gap: 8px; align-items: center } #pren input { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid transparent; background: var(--inset); font-size: 15px; color: var(--ink) } #pren input:focus { outline: none; border-color: var(--hue); box-shadow: 0 0 0 4px var(--hue-soft) }
.near { font-size: 13px; color: var(--muted); min-width: 72px; text-align: right }
/* a reading's icon, its settings button and form (name, show as, icon) */
.picon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--inset); color: var(--ink2) }
.picon svg, .pedit svg, .icons svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.pedit { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer }
.pedit:hover { background: var(--inset); color: var(--ink) }
.pform { margin: 0 8px 10px; padding: 12px 14px 14px; border-radius: var(--r-in); background: var(--inset); max-width: 620px }
.pform .acts { display: flex; gap: 8px }
.icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.icons button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--glass-strong); color: var(--ink2); display: grid; place-items: center; cursor: pointer; font-size: 12px }
.icons button[aria-pressed=true] { background: var(--hue); color: var(--on-hue) }
@media (max-width: 700px) { .panel .row:has(.picon) .main { flex-basis: calc(100% - 46px) } .row > .picon + .main ~ .val, .row > .picon + .main ~ .tgl { margin-left: 46px } .row .pedit { margin-left: auto } }

.pcat { padding: 14px 8px 4px; font-size: 13px; font-weight: 600; color: var(--muted) }
[data-row] .main { cursor: pointer } [data-row].open { background: var(--inset); border-radius: 12px 12px 0 0 }
.phist { margin: 0 0 8px; padding: 12px 10px 4px; background: var(--inset); border-radius: 0 0 12px 12px }
/* modbus */
.mform { margin: 0 18px 14px; padding: 0 } .mform .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.mform .three, .mform .four { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)) } .mform .four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.mtabs { margin: 4px 18px 12px } .mprog { font-size: 13px }
.mregs td { padding: 4px 4px } .mregs input, .mregs select { width: 100%; min-width: 64px; height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink); font: inherit; font-size: 14px }
.mregs input[name=name] { min-width: 150px } .mregs select { min-width: 150px } .mregs input[name=address] { min-width: 90px } .mregs td.c { text-align: center } .mregs input[type=checkbox] { width: 20px; min-width: 0; height: 20px }
@media (max-width: 700px) { .mform .three, .mform .four { grid-template-columns: repeat(2, minmax(0, 1fr)) } }