/* ----------------------------------------------------------------------------
   Sumarhús — widgets.css (F2). app.css (F1) already carries the mockup's card internals (hero, tiles, strip, rows,
   hold, event list, edit controls, editbar, ghost). This file adds only what the real grid needs on top:
   explicit 12-column placement (inline grid-column/grid-row per card), the phone stack by phone_order, page tabs,
   the picker + config sheet, and the new widgets (trap rows, number tile, text tile). Load it AFTER app.css.
   ---------------------------------------------------------------------------- */

/* ---- the generalised grid: no named areas, explicit placement set inline by grid.js ---- */
.grid.g12{grid-template-areas:none;grid-auto-flow:row;grid-template-columns:1fr 1fr;align-content:start}
.grid.g12>.card{grid-area:auto;grid-column:1/-1}
.grid.g12>.card.half{grid-column:span 1}
.grid.g12>.ghost,.grid.g12>.editEntry{grid-area:auto;grid-column:1/-1}
.grid.g12>.ghost[hidden],.grid.g12>.editEntry[hidden]{display:none!important}
.grid.g12.editing>.card.ghost{display:grid}
.grid.g12>.card.ghost.hid-ghost{border-color:rgb(var(--text-rgb)/.3);color:var(--dim)}
.grid.g12>.card.hid{display:none!important}
.grid.g12:not(.editing)>.card.vacant{display:none!important}
.grid.g12.empty{min-height:0;flex:0 0 auto}
.page.overview .emptymsg{color:var(--dim);font-size:13px;padding:24px 4px;text-align:center}
.page.overview .emptymsg[hidden]{display:none}
/* the handle's six dots, without an <svg> (see widgets/index.js HANDLE) */
.grid.g12 .handle::before{content:"";width:12px;height:18px;background:radial-gradient(circle at center,currentColor 1.5px,transparent 1.9px) 0 0/6px 6px}
/* edit mode lives on the grid (and body for F1's header), not on #app */
.grid.g12.editing .handle{display:none}
.grid.g12.editing .editctl{display:flex;flex-wrap:wrap}
.grid.g12.editing .card{outline:1px dashed rgb(var(--text-rgb)/.45);outline-offset:3px}
.grid.g12.editing .card.drop{outline:2px solid var(--accent);outline-offset:3px}
.grid.g12.editing .card.src{opacity:.6}
.grid.g12.editing .card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.grid.g12.editing .ctitle{padding-right:36px}
.grid.g12.editing>.editEntry{display:none}
.page.overview .editbar[hidden]{display:none!important}
.page.overview.editing .editbar{display:flex}
.editctl button[data-cfg],.editctl button[data-del]{padding:0}

/* ---- page tabs: desktop a tab row above the grid, phones a segmented strip ---- */
.pagetabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.pagetabs[hidden]{display:none}
.pagetabs .tabs.ptabs{display:flex;gap:4px}
.pagetabs .seg.ptabs{max-width:100%;overflow:auto;scrollbar-width:none}
.pagetabs .seg.ptabs button[aria-selected="true"]{background:rgb(var(--panel-rgb));color:var(--text);box-shadow:0 1px 2px rgb(var(--shadow-rgb)/.18)}
.pagetabs .seg.ptabs button{white-space:nowrap}
.pagetabs .addpage,.pagetabs .delpage{margin-left:auto}
.pagetabs .addpage+.delpage{margin-left:0}

/* ---- the alarm banner is shown by the page, not by a .fault ancestor ---- */
.page.overview>.card.alarm{display:none;grid-template-columns:auto 1fr}
.page.overview.fault>.card.alarm{display:grid}

/* ---- picker + config sheet (F1's .dlg card) ---- */
.dlg .dlg-body{display:grid;gap:8px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.pick{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:12px;border:1px solid rgb(var(--text-rgb)/.14);color:var(--text);text-align:left;font-weight:500;transition:border-color .12s,background-color .12s}
.pick:hover{border-color:var(--accent);background:rgb(var(--accent-rgb)/.08)}
.pick-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--accent);background:rgb(var(--accent-rgb)/.12)}
.cfg .field{padding:10px 0}
.cfg .field.col{flex-direction:column;align-items:stretch}
.cfg .field>label{display:block}
.cfg .lab small{display:block;color:var(--dim);font-size:12px}
.cfg textarea.input{min-height:96px;padding:10px 12px;resize:vertical;font:inherit}
.cfg select.input{min-width:160px;max-width:100%}
.cfg .rng{display:inline-flex;align-items:center;gap:10px;min-width:200px}
.cfg .rng input[type=range]{flex:1}
.cfg .rng output{min-width:2ch;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.cfg .ranges{max-width:100%}
.form>span{display:block;color:var(--dim);font-size:12.5px;margin-bottom:6px}

/* ---- trap widget ---- */
.trow{grid-template-columns:1fr auto;align-items:center}
.trow .treset{grid-column:1/-1;margin-top:6px;width:100%;min-height:40px;font-size:13px}
.trow .tstate{font:600 15px/1 var(--font-display);letter-spacing:.01em}
.trow .tstate.bad{color:var(--bad)}
.trow.caught .tname{font-weight:600}
.traps.bad{box-shadow:inset 0 2px 0 0 var(--bad)}

/* ---- number tile ---- */
.num-tile .figure.small{font-size:48px;margin:4px 0 2px}
.num-tile .figure.small .deg{font-size:.5em;top:.1em}
.num-tile .foot{margin-top:6px}

/* ---- text tile ---- */
.text-tile .note{margin:4px 0 0;color:var(--text);font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.text-tile .note.empty{color:var(--dim);font-style:italic}

/* ---- the alarm card's queued button: no sweep while a command is pending ---- */
.armBtn.pendingBtn{border:1px dashed rgb(var(--warn-rgb)/.7)}

/* ---- hero companions: the "pick automatically" chip ---- */
.comp.auto{grid-template-columns:1fr auto;border-style:dashed}
.comp.auto .n{grid-column:1;font-size:12.5px;color:var(--text)}
.comp.auto .go{grid-column:2}

@media (min-width:900px){
  .grid.g12,.grid.g12.custom{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:none;grid-template-rows:none;grid-auto-rows:auto;grid-auto-flow:row;align-content:start}
  .grid.g12>.card,.grid.g12>.card.half{grid-area:auto;grid-column:auto}
  .grid.g12>.card.ghost{grid-column:1/-1;min-height:72px}
  .grid.g12>.card.ghost.hid-ghost,.grid.g12>.card.ghost.slot{min-height:0;height:100%}
  .grid.g12>.editEntry{display:none!important}
  .grid.g12.editing .handle{display:grid}
  .grid.g12>.card.door,.grid.g12>.card.batt,.grid.g12>.card.traps,.grid.g12>.card.num-tile,.grid.g12>.card.text-tile{display:flex;flex-direction:column}
  .grid.g12>.card.door .armHint{margin-top:auto;padding-top:6px}
  .grid.g12>.card.hero .editctl,.grid.g12>.card.events .editctl{flex:0 0 auto}
  .num-tile .figure.small{font-size:56px}
  .pagetabs .seg.ptabs{display:none}
  .page.overview>.card.alarm{grid-template-columns:auto 1fr auto}
  .page.overview.fault .grid.g12{gap:10px}
  /* a short desktop (the mockup's wk-fold): the tiles tighten too, so a fourth battery row still fits at 1280×720 */
  .wk-fold .tile .ctitle{margin-bottom:4px}
  .wk-fold .tile .state{margin:2px 0 4px}
  .wk-fold .tile .sub{font-size:12.5px}
  .wk-fold .tile .ibtn{margin-top:6px}
  .wk-fold .rows{gap:5px}
  .wk-fold .row small{line-height:1.2}
  .wk-fold .meter{height:3px}
  .wk-fold .companions{padding-top:4px}
  .wk-fold .week{margin-top:8px}
}
@media (max-width:899px){
  .pagetabs{position:relative;z-index:1}
  .pagetabs .tabs.ptabs{display:none}
}
@media (prefers-reduced-motion: reduce){ .pick,.pagetabs button{transition:none} }