/* The setup walkthrough (setup-tour.js; Louis, 7 Oct 2026): setup's own
   screens inside a page's panel, filled in with the example home's values,
   that Back and Continue step through. Drawn as the app draws them
   (web/src/app/systems/new), at the panel's size. Every screen sits in the
   same grid cell, so the panel is as tall as its tallest screen and the two
   buttons never move under the pointer. */

.tour{--cut:#fff; display:grid}
.tour > .slide{grid-area:1/1; display:flex; flex-direction:column; min-width:0}
.tour > .slide.off{visibility:hidden}
.tour > .slide.in{animation:tour-in .26s var(--ease)}
@keyframes tour-in{from{opacity:0; transform:translateX(var(--from, 14px))}}
/* On a phone the panel is one column and the screens differ most in height:
   each screen takes only its own, rather than the tallest's. */
@media (max-width:900px){ .tour > .slide.off{display:none} }
.tour .s-foot{margin-top:auto; padding-top:1.3rem; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.tour .s-foot .first{visibility:hidden}
.tour .s-foot svg{width:.85rem; height:.85rem}
.tour button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.tour .sr{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* headings */
.tour .t-title{margin-top:.8rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em; line-height:1.3}
.tour .t-title .tag{margin-left:.45rem; height:1.3rem; font-size:.72rem; vertical-align:2px}
.tour .t-lead{margin-top:.2rem; font-size:.8125rem; line-height:1.5; color:var(--ink-3)}
.tour .t-q{margin-top:1.1rem; font-size:.875rem; font-weight:500}
.tour .t-note{margin-top:.9rem; font-size:.8125rem; color:var(--ink-3)}
.tour .mk{display:block; align-self:flex-start; height:1.4rem; width:auto; margin-top:1.1rem; color:#3b3e43}
.tour .mk text{font-family:var(--sans)}
/* the app's "Early access" badge (web/src/components/ui.tsx, Badge, plum) */
.tour .tag{display:inline-flex; align-items:center; height:1.5rem; margin-left:.6rem; padding:0 .625rem; border-radius:99px;
  background:var(--plum-wash); box-shadow:inset 0 0 0 1px rgba(102,53,104,.16); color:var(--plum-strong);
  font-size:.78rem; font-weight:500; white-space:nowrap; vertical-align:middle}

/* What do you have at home? */
.tour .t-opts{display:grid; gap:.45rem; margin-top:.6rem}
.tour .t-opts > div{display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border:1px solid var(--rule-strong); border-radius:10px}
.tour .t-opts > div.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.tour .t-opts i{flex:none; display:grid; place-items:center; width:2rem; height:2rem; border-radius:7px; background:var(--fill); color:var(--ink-2)}
.tour .t-opts i svg{width:1rem; height:1rem}
.tour .t-opts b{display:block; font-size:.875rem; font-weight:600}
.tour .t-opts span{display:block; font-size:.78rem; color:var(--ink-3)}
.tour .t-opts .go{margin-left:auto; color:var(--ink-3)}

/* the make and supplier tiles */
.tour .t-tiles{display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:1rem}
.tour .t-tiles.four{grid-template-columns:repeat(4,1fr)}
.tour .t-tiles.four > div{padding:0 .55rem}
.tour .t-tiles.four svg{height:15px}
.tour .t-tiles > div{display:flex; align-items:center; justify-content:space-between; gap:.4rem; height:2.55rem; padding:0 .7rem; border:1px solid var(--rule-strong); border-radius:9px; color:#3b3e43; min-width:0}
.tour .t-tiles > div.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.tour .t-tiles svg{flex:none; height:17px; width:auto; max-width:100%}
.tour .t-tiles svg text{font-family:var(--sans)}
.tour .t-tiles .tag{margin:0; height:1.2rem; padding:0 .45rem; font-size:.66rem}
.tour .t-tiles .word{font-size:.8125rem; font-weight:500; color:var(--ink)}
.tour .t-chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.45rem}
.tour .t-chips span{padding:.3rem .65rem; border:1px solid var(--rule-strong); border-radius:99px; font-size:.78rem; color:var(--ink-2)}

/* fields, as setup's inputs: filled in, not typed into */
.tour .t-fields{display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem; margin-top:.9rem}
.tour .t-fields.one{grid-template-columns:minmax(0,1fr); max-width:22rem}
.tour .f b{display:block; font-size:.8125rem; font-weight:500; color:var(--ink-2)}
.tour .f b em{font-style:normal; font-weight:400; color:var(--ink-3)}
.tour .f small{display:block; margin-top:.25rem; font-size:.75rem; color:var(--ink-3)}
.tour .box{display:flex; align-items:center; justify-content:flex-start; gap:.5rem; height:2.25rem; margin-top:.28rem; padding:0 .75rem;
  border:1px solid var(--rule-strong); border-radius:8px; background:var(--panel); font-size:.875rem; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden}
.tour .box .u{margin-left:auto; color:var(--ink-3)}
.tour .box .ph{color:var(--ink-3)}
.tour .box svg{flex:none; width:.95rem; height:.95rem; color:var(--ink-3)}
.tour .box .dots{letter-spacing:.12em}
.tour .box.sel{justify-content:space-between}
.tour .t-promise{display:flex; align-items:center; gap:.45rem; margin-top:1rem; font-size:.78rem; color:var(--ink-3)}
.tour .t-promise svg{flex:none; width:.85rem; height:.85rem}
.tour .t-link{margin-top:.8rem; font-size:.78rem; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px}

/* connected, and what was found (web/src/app/systems/new/parts.tsx) */
.tour .connected{display:flex; gap:.75rem; margin-top:1rem; padding:.7rem .95rem; border-radius:8px; background:var(--measured-wash); font-size:.875rem; line-height:1.55; color:var(--ink-2)}
.tour .connected > i{flex:none; display:grid; place-items:center; width:1.2rem; height:1.2rem; margin-top:.12rem; border-radius:50%; background:var(--measured); color:#fff}
.tour .connected > i svg{width:.75rem; height:.75rem}
.tour .connected b{display:block; font-weight:500; color:var(--ink)}
.tour .connected .num{font-weight:500; color:var(--ink); white-space:nowrap}
.tour .connected + .connected{margin-top:.55rem}
.tour .found{margin:.9rem 0 0}
.tour .found > div{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.1rem 1.5rem; padding:.55rem 0; border-top:1px solid var(--rule)}
.tour .found > div:first-child{border-top:0}
.tour .found dt{font-size:.875rem; color:var(--ink-3)}
.tour .found dd{margin:0; text-align:right; font-size:.875rem; font-weight:500}
.tour .found dd small{display:block; font-size:.75rem; font-weight:400; color:var(--ink-3)}

/* the tariff's shape and its hours (SupplierStep.tsx) */
.tour .t-line{margin-top:1rem; font-size:.8125rem; color:var(--ink-2)}
.tour .kinds{display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.6rem}
.tour .kinds span{display:block; padding:.5rem .75rem; border:1px solid var(--rule-strong); border-radius:8px; font-size:.875rem; font-weight:500; line-height:1.35}
.tour .kinds span small{display:block; font-size:.75rem; font-weight:400; color:var(--ink-3)}
.tour .kinds span.on{border-color:var(--ink); background:var(--panel-2)}
.tour .hours{display:flex; align-items:center; gap:.5rem}
.tour .hours .box{flex:1; margin-top:0}
.tour .hours > span{color:var(--ink-3); font-size:.8125rem}

/* panels: one roof, its size, which way it faces and how steep (PanelsStep.tsx) */
.tour .t-seg{display:inline-flex; gap:2px; margin-top:1rem; padding:3px; border-radius:9px; background:var(--fill)}
.tour .t-seg span{padding:.3rem .65rem; border-radius:7px; font-size:.78rem; color:var(--ink-2)}
.tour .t-seg span.on{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(15,16,17,.1)}
.tour .t-range{position:relative; height:4px; margin:.85rem .4rem .35rem; border-radius:99px; background:var(--fill-strong)}
.tour .t-range i{position:absolute; inset:0 auto 0 0; width:58.3%; border-radius:inherit; background:var(--ink)}
.tour .t-range b{position:absolute; left:58.3%; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:var(--ink)}
.tour .t-roof{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:.25rem .75rem; margin-top:.9rem; padding:.6rem .8rem .55rem; border:1px solid var(--rule-strong); border-radius:10px; background:var(--panel-2)}
.tour .t-roof svg{display:block; width:100%; height:6.6rem}
.tour .t-roof p{grid-column:1/-1; display:flex; justify-content:space-between; padding-top:.45rem; border-top:1px solid var(--rule); font-size:.8125rem}
.tour .t-roof p span{font-variant-numeric:tabular-nums}

/* usage history's tag, and the finish list (HistoryStep.tsx, FinishStep.tsx) */
.tour .t-opt{display:inline-flex; align-items:center; height:1.3rem; margin-left:.45rem; padding:0 .5rem; border-radius:99px; background:var(--fill); font-size:.72rem; font-weight:500; color:var(--ink-2); vertical-align:2px}
.tour .t-btn2{display:inline-flex; align-items:center; height:2.1rem; margin-top:.8rem; padding:0 .85rem; border-radius:8px; background:var(--fill); font-size:.8125rem; font-weight:500}
.tour .t-list{margin-top:1rem; border-top:1px solid var(--rule)}
.tour .t-list > div{display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--rule)}
.tour .t-list i{flex:none; display:grid; place-items:center; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--measured); color:#fff}
.tour .t-list i svg{width:.7rem; height:.7rem}
.tour .t-list b{font-size:.8125rem; font-weight:500}
.tour .t-list span{font-size:.75rem; color:var(--ink-3)}
.tour .t-list .ch{margin-left:auto; font-size:.75rem; color:var(--ink-3)}
.tour .t-list-h{margin-top:1rem; font-size:.8125rem; font-weight:600}

/* after Finish (web/src/app/systems/[id]/SettingUp.tsx): the three things it
   waits for, each ticked in turn */
.tour .t-wait{display:grid; gap:.7rem; margin-top:1.2rem}
.tour .t-wait > div{display:flex; align-items:center; gap:.7rem; font-size:.875rem; color:var(--ink-2)}
.tour .t-wait i{position:relative; flex:none; width:1.25rem; height:1.25rem; border-radius:50%; border:2px solid var(--fill-strong)}
.tour .t-wait i::after{content:""; position:absolute; inset:-2px; border-radius:50%; background:var(--measured) no-repeat center/62%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  opacity:0; transform:scale(.6); transition:opacity .25s var(--ease), transform .25s var(--ease)}
.tour .slide:not(.off) .t-wait i::after{opacity:1; transform:none}
.tour .slide:not(.off) .t-wait > div:nth-child(1) i::after{transition-delay:.5s}
.tour .slide:not(.off) .t-wait > div:nth-child(2) i::after{transition-delay:1.1s}
.tour .slide:not(.off) .t-wait > div:nth-child(3) i::after{transition-delay:1.7s}

@media (max-width:600px){
  .tour .t-fields{grid-template-columns:1fr}
  .tour .t-tiles.four{grid-template-columns:1fr 1fr}
  /* two tiles to a row leaves no room for the badge; the make's own screen shows it */
  .tour .t-tiles .tag{display:none}
}
@media (prefers-reduced-motion: reduce){
  .tour > .slide.in{animation:none}
  .tour .t-wait i::after{transition:none}
}