/* Battery packs and their tools, bridges, adding a bridge over USB or Bluetooth. */

.assetpage { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.assetpage > .phead { margin-bottom: -4px; }
.assetpage > .phead > div:first-child { flex: 1 1 360px; }
#bForm:empty, #oemCard:empty, #bQueuedNote:empty { display: none; }

.ptags { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptitle h1 { overflow-wrap: anywhere; }
.phead .lede a { color: var(--ink-2); }
.phead .lede a:hover { color: var(--link); }
.badges { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hint { font: 400 13px/18px var(--f-body); color: var(--ink-2); }
.pad { padding: 12px 20px; margin: 0; }
.subhead { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); }
.card h3.subhead { margin: 16px 0 8px; font: var(--label); }

details.menu { display: inline-block; position: relative; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary > .ic:last-child:not(:first-child) { margin-right: -4px; }
details.menu[open] > summary { background: var(--hover); }
details.menu[open] > summary.primary { filter: brightness(.95); background: var(--accent); }
.menupop > button > .ic, .menupop > a > .ic { color: var(--link); margin-top: 0; }
.menupop > button.danger, .menupop > button.danger > .ic { color: var(--bad-fg); }
.menupop small { display: block; font: 400 12px/16px var(--f-body); }

.tabrow { display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--line); }
.tabrow > .tabs { border-bottom: 0; flex: 1; min-width: 0; }
.tabrow > .info { margin-bottom: 12px; }
.tabs > button[role="tab"] { min-height: 44px; }
.tabs > a .count, .tabs > button .count { margin-left: 2px; }

.cardbody.flush { padding: 0; }
.cardbody.flush .tablewrap, .cardbody.flush .tablewrap:only-child { border: 0; border-radius: 0 0 8px 8px; margin: 0; }
.cardbody.flush .versions { padding: 4px 20px 8px; }
.cardbody.flush .tfoot { border-top: 1px solid var(--line); }
.tiles + .notice, .tiles + .hint { margin-top: 16px; }
.remoteacts + .hint { margin-top: 12px; }
.notice + .tablewrap, .notice + .rows { margin-top: 8px; }
.card .tfoot { border-top: 1px solid var(--line); }
.table .sub { margin-top: 2px; }
.table td a.main { color: var(--ink); text-decoration: none; }
.table td .mono, .table td a.main, .table td[data-label="Built"] { white-space: nowrap; }
@media (min-width: 1400px) { .assetpage > .split { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 1399px) {
  .assetpage > .split { grid-template-columns: minmax(0, 1fr); }
  .assetpage > .split > .sidepanel { order: -1; position: static; max-height: none; max-width: 560px; }
}
.table td a.main:hover { color: var(--link); text-decoration: underline; }
.table td.acts { text-align: right; white-space: nowrap; }
.table td.acts button + button { margin-left: 4px; }
.sidepanel .cardhead { flex-wrap: nowrap; }

.objrow { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.objrow > .ic { color: var(--ink-2); width: 24px; height: 24px; }
.objrow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.objrow .main { font-weight: 600; }
.objrow .sub { font: 400 13px/18px var(--f-body); color: var(--ink-2); }

a.placecard {
  flex-direction: row; align-items: center; gap: 12px; padding: 14px 20px; color: var(--ink); text-decoration: none;
}
a.placecard:hover { border-color: var(--field); color: var(--ink); }
a.placecard > .ic:first-child { color: var(--link); width: 24px; height: 24px; }
a.placecard > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
a.placecard b { font: 600 15px/22px var(--f-head); }
a.placecard .sub { font: 400 13px/18px var(--f-body); color: var(--ink-2); }
a.placecard > .ic:last-child { color: var(--ink-2); }

.events, .versions, .reports, .needs, .nextsteps { list-style: none; margin: 0; padding: 0; }
.events > li, .needs > li {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.events > li:last-child, .needs > li:last-child { border-bottom: 0; }
.events > li > .ic, .needs > li > .ic { color: var(--ink-2); margin-top: 1px; }
.events > li > div, .needs > li > div { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.events b, .needs b, .versions b, .nextsteps b { font: 500 14px/20px var(--f-body); }
.events .sub, .needs .sub, .versions .sub, .nextsteps .sub { font: 400 12px/16px var(--f-body); color: var(--ink-2); }
.events > li > .ic.alarmglyph { color: var(--bad); }
.needs > li > .ic { color: var(--link); }

.versions > li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.versions > li:last-child { border-bottom: 0; }
.versions .ver { width: 36px; flex: none; color: var(--ink-2); font-size: 13px; line-height: 20px; }
.versions > li > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }

.reports > li { border-bottom: 1px solid var(--line); }
.reports > li:last-child { border-bottom: 0; }
button.report {
  width: 100%; min-height: 0; padding: 12px 20px; border: 0; border-radius: 0; justify-content: flex-start;
  align-items: flex-start; gap: 12px; background: transparent; text-align: left; white-space: normal; font: inherit;
}
button.report:hover { background: var(--hover); }
button.report[aria-pressed="true"] { background: var(--tint); border: 0; }
button.report > .ic { color: var(--link); margin-top: 2px; }
button.report > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
button.report b { font: 500 14px/20px var(--f-body); }
button.report small { font: 400 12px/16px var(--f-body); color: var(--ink-2); }
.cols.diag { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr); }
.diaglog pre.log { max-height: 560px; margin: 0 0 12px; border: 1px solid var(--line); background: var(--bg); padding: 12px 14px; }
.diaglog .kv { margin-bottom: 8px; }

.packtools { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.card .packtools h3 { margin: 12px 0 8px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); }
.packlink { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linkstate { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.packconn { padding: 12px 20px; }
.packconn > .notice { margin-bottom: 10px; }
.tools { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tool { padding: 10px 12px; border-radius: 4px; background: var(--bg); border-color: var(--line); gap: 2px; }
.tool strong { font: 600 14px/20px var(--f-head); }
a.tool:hover { border-color: var(--accent); background: var(--tint); color: var(--ink); }
.tool.off { opacity: 1; background: var(--tile); color: var(--ink-2); }
.tool.off strong { color: var(--ink-2); }

.livebar {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px;
  background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.livebar > .dot { width: 8px; height: 8px; }
.livebar > div { flex: 1; min-width: 0; }
.livebar b { font: 600 14px/20px var(--f-body); color: var(--link); margin-right: 8px; }
.livebar > .info { margin: 0; }
.remoteslot:empty { display: none; }
.remoteslot > .notice + .rows, .cardbody > .notice + .rows { margin-top: 8px; }
.remoteacts { gap: 8px; }
.sampleline { margin-top: 8px; }
.tiles.now { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tiles .tile { background: var(--bg); }
.tile.hot { border-color: var(--accent); }
.tile.hot .tnote { color: var(--link); }
.assetpage .tile > .tvalue small { margin-left: 4px; }
.tile .tlabel .info { margin-left: 0; }
.tiles.temps { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

.cellsum { margin: 0 0 4px; font: 400 13px/18px var(--f-body); color: var(--ink-2); }
.cellkey { margin: 0 0 12px; }
.card .module h4 { margin: 12px 0 6px; font: 600 13px/18px var(--f-body); }
.cells { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cell { border-radius: 4px; padding: 6px 10px; background: var(--bg); border-color: var(--line); }
.cell .ci { font: 500 11px/14px var(--f-mono); color: var(--ink-2); }
.cell .cv { font: 600 15px/20px var(--f-data); }
.cell .cx { display: block; font: 600 10px/14px var(--f-label); letter-spacing: var(--label-track); text-transform: uppercase; }
.cell.max .cx { color: var(--warn-fg); }
.cell.min, .cell.max { outline-width: 1.5px; }
.cell.max { outline-color: var(--warn); }
.cell.min { outline-color: var(--ink); }
.cell.lo2 { background: color-mix(in srgb, var(--info) 22%, var(--bg)); }
.cell.lo1 { background: color-mix(in srgb, var(--info) 9%, var(--bg)); }
.cell.hi1 { background: color-mix(in srgb, var(--warn) 12%, var(--bg)); }
.cell.hi2 { background: color-mix(in srgb, var(--warn) 30%, var(--bg)); }
.cellmap.compact .cell .cx { display: none; }

.histbar { gap: 12px; }
.rangecustom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rangecustom label.inline { font: 400 13px/18px var(--f-body); color: var(--ink-2); }
.rangecustom input[type="datetime-local"] { width: auto; min-height: 32px; padding: 0 8px; }
.charts { gap: 24px; }
.chartbox figcaption { font: 600 14px/20px var(--f-head); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chart .line { stroke: var(--accent); }
.chart .line.alt { stroke: var(--ink-2); }
.tip { background: var(--bg); border-radius: 4px; box-shadow: var(--shadow); }
details.values summary { color: var(--link); font-weight: 600; padding: 4px 0; }
details.values .tablewrap { margin-top: 8px; }
.card .cardbody > .hint.pad:first-child { padding: 0 0 12px; }

.setgroup { margin: 0; }
.setgroup .cardhead h3, details.setgroup > summary h3 {
  display: block; margin: 0; font: var(--h2); text-transform: none; letter-spacing: 0; color: var(--ink);
}
details.setgroup > summary { cursor: pointer; list-style: none; justify-content: flex-start; }
details.setgroup > summary::-webkit-details-marker { display: none; }
details.setgroup:not([open]) > summary { border-bottom: 0; }
.settings { display: flex; flex-direction: column; gap: 0; margin: 0; background: none; border: 0; border-radius: 0; padding: 0 20px; }
.setting {
  grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1.3fr) minmax(9rem, 1.2fr) auto; gap: 12px;
  padding: 14px 0; background: none; border-bottom: 1px solid var(--line);
}
.setting:last-child { border-bottom: 0; }
.setname { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; row-gap: 2px; min-width: 0; }
.setname > b { font: 500 14px/20px var(--f-body); }
.setname .sub { flex-basis: 100%; font: 400 12px/16px var(--f-body); color: var(--ink-2); }
.setvalue { font: 500 14px/20px var(--f-data); overflow-wrap: anywhere; }
.setvalue s { color: var(--muted); }
.setact { text-align: right; }
.setact button.link { color: var(--link); }
.stack > .notice { margin: 0; }
details.engineering { margin: 0; }
details.engineering > summary { cursor: pointer; justify-content: flex-start; border-bottom: 0; font: 600 14px/20px var(--f-head); color: var(--ink); }
details.engineering[open] > summary { border-bottom: 1px solid var(--line); }
details.engineering .formacts { margin-top: 12px; }
.setapply { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin: 0; }

dialog.dlg { max-height: calc(100vh - 32px); }
dialog.dlg .dlghead .iconbtn { margin: -8px -12px 0 0; }
dialog.dlg .dlghead p .badge { margin-right: 6px; }
dialog.dlg .form { margin: 0; padding: 0; background: none; border: 0; }
dialog.dlg .form .fields { grid-template-columns: minmax(0, 1fr); }
dialog.dlg .form .formacts {
  margin: 16px -24px -16px; padding: 16px 24px 20px; border-top: 1px solid var(--line);
  flex-direction: row-reverse; justify-content: flex-start; gap: 8px;
}
dialog.dlg .form .hint.mono { margin-top: 6px; }
dialog.dlg .form button.destroy, .dlg .form button.destroy { background: var(--bad); border-color: var(--bad); color: #FFFFFF; }
form.setdialog { display: flex; flex-direction: column; }
form.setdialog .tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
form.setdialog .tile .tvalue { font-size: 20px; line-height: 26px; }
form.setdialog .dlgfoot button.primary { order: 2; }
form.setdialog table.changes { margin-top: 4px; }
.unitbox { position: relative; display: flex; align-items: center; }
.unitbox > .unit { position: absolute; right: 12px; color: var(--ink-2); font: 500 13px/18px var(--f-body); pointer-events: none; }
.unitbox > input { padding-right: 48px !important; }
.notice.happens ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.notice.happens .eyebrow { color: var(--warn-fg); }

.steps.assetsteps { flex-wrap: nowrap; gap: 10px; margin: 0; counter-reset: none; }
.steps.assetsteps > li { font: 500 14px/20px var(--f-body); color: var(--ink-2); gap: 10px; }
.steps.assetsteps > li::before { content: none; display: none; }
.steps.assetsteps > li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.steps.assetsteps > li.done { color: var(--ink); }
.card .steps.assetsteps { margin-bottom: 16px; }

.flowfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.card .flowfoot { margin-top: 16px; }
.usbfoot { border-top: 1px solid var(--line); padding-top: 16px; }
.usbfoot > [data-act="usb-close"] { order: -1; margin-right: auto; }
.usbfoot > .hint { margin-right: auto; }
.usbdrop { flex-direction: column; justify-content: center; padding: 48px 20px; gap: 16px; min-height: 220px; }
.usbdrop > .ic { width: 32px; height: 32px; }
.usbpct { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.usbpct b { font: 600 32px/40px var(--f-data); }
.usbpct b small { font-size: 20px; margin-left: 4px; }
.usbpct span { color: var(--ink-2); }
progress.usbprogress {
  display: block; width: 100%; height: 8px; margin: 0 0 16px; border: 0; border-radius: 2px;
  background: var(--track); appearance: none; -webkit-appearance: none; accent-color: var(--accent);
}
progress.usbprogress::-webkit-progress-bar { background: var(--track); border-radius: 2px; }
progress.usbprogress::-webkit-progress-value { background: var(--accent); border-radius: 2px; }
progress.usbprogress::-moz-progress-bar { background: var(--accent); }
.notice.usbdone { align-items: center; padding: 20px 24px; }
.notice.usbdone > .ic { color: var(--ok); }
.notice.usbdone b { display: block; font: 600 20px/28px var(--f-head); }
.notice.usbdone span { color: var(--ink-2); font: 400 13px/18px var(--f-body); }
.nextsteps > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nextsteps > li:last-child { border-bottom: 0; }
.nextsteps > li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nextsteps .n {
  width: 26px; height: 26px; border-radius: 9999px; border: 1.5px solid var(--line-2); flex: none;
  display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--f-head); color: var(--ink-2);
}
.cols > .stack > div > h2 + .lede { margin-top: 4px; }

.serialshape {
  display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 12px 14px; border-radius: 4px;
  background: var(--tile); border: 1px solid var(--line);
}
.serialshape b { font-size: 15px; }
.sidepanel .form { margin: 0; padding: 0; background: none; border: 0; }
.sidepanel .form .fields { grid-template-columns: minmax(0, 1fr); }
.sidepanel .form .formacts {
  margin: 16px -20px -16px; padding: 14px 20px; border-top: 1px solid var(--line);
  flex-direction: row-reverse; justify-content: space-between;
}

.connrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.formcard .form { margin: 0; padding: 0; background: none; border: 0; }
.formcard .form .formacts { justify-content: flex-start; }
.importresult .cardhead h2 { font: var(--h2); }
.generated .table td { padding-top: 8px; padding-bottom: 8px; }
.secretbox code.secret { background: var(--bg); margin: 8px 0; }
.secretbox p { margin: 0; }
.buildtest { margin-top: 12px; }
.buildtest > summary { cursor: pointer; color: var(--link); font-weight: 600; }
.importresult, .generated { margin: 0; }
.detach select { width: auto; min-height: 32px; padding: 0 8px; }
.detach .fault { min-height: 32px; }

@media (max-width: 900px) {
  .assetpage { gap: 16px; }
  .cols.diag { grid-template-columns: minmax(0, 1fr); }
  .setting { grid-template-columns: minmax(0, 1fr) auto; }
  .setting .setvalue { grid-column: 1; }
  .setting .setstate { grid-column: 1; }
  .setting .setact { grid-row: 1; grid-column: 2; }
  .steps.assetsteps > li > span:not(.n) { display: none; }
  .tabrow > .info { display: none; }
  .livebar { flex-wrap: wrap; }
  .usbdrop { padding: 32px 16px; min-height: 0; }
  .phead > .actions { width: 100%; }
  .cells { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .detach { justify-content: flex-start; }
  .table.cards td .badges { display: inline-flex; }
  .table.cards td:first-child::before { display: none; }
  .table.cards td:first-child { padding-bottom: 6px; }
  .sidepanel .form .formacts { margin: 16px -20px -16px; }
}