/* ===========================================================
   ARCHER SOLAR — interactive widgets
   =========================================================== */
.wx{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;
  box-shadow:var(--shadow-sm);}
.wx-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.wx-head b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.wx-head span{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);}
.wx svg{width:100%;height:auto;display:block;}
.wx-note{font-size:12.4px;line-height:1.6;color:var(--ink-faint);margin:14px 0 0;}
.on-dark .wx{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);}
.on-dark .wx-head{border-bottom-color:rgba(255,255,255,.18);}
.on-dark .wx-head b{color:#fff;}
.on-dark .wx-head span,.on-dark .wx-note{color:rgba(255,255,255,.58);}

/* shared range input ------------------------------------------------ */
.wx input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:99px;
  outline:none;background:linear-gradient(90deg,var(--brand) var(--sp-fill,50%),var(--line) var(--sp-fill,50%));}
.wx input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);cursor:pointer;box-shadow:0 4px 14px -4px rgba(33,178,255,.9);}
.wx input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;
  border:3px solid var(--brand);cursor:pointer;}

/* 1 · sun path ------------------------------------------------------ */
.sunpath .wx-read{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:16px 0 12px;}
.sunpath .wx-read b{font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:700;color:var(--ink);}
.sunpath .wx-read span{font-size:16px;font-weight:800;color:var(--brand-2);}
.sunpath .wx-read em{font-style:normal;font-size:13.4px;color:var(--ink-soft);flex:1 1 240px;}
.sunpath input[type=range]{background:linear-gradient(90deg,var(--brand) var(--sp-fill,50%),var(--line) var(--sp-fill,50%));}

/* 2 · orientation --------------------------------------------------- */
.orient-grid{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:start;}
@media(max-width:720px){.orient-grid{grid-template-columns:1fr;gap:24px;}}
.compass{position:relative;}
.compass svg{max-width:200px;margin:0 auto;}
.or-rose{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px;}
.or-btn{padding:9px 0;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:700;color:var(--ink-soft);
  cursor:pointer;transition:all .15s ease;}
.or-btn:hover{border-color:var(--brand);}
.or-btn.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.or-field{margin-bottom:20px;}
.or-field label{display:flex;align-items:baseline;justify-content:space-between;
  font-size:12.6px;font-weight:700;color:var(--ink-soft);margin-bottom:10px;}
.or-field label b{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--ink);}
.or-shades{display:flex;gap:8px;flex-wrap:wrap;}
.or-shade{padding:9px 15px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  font-size:12.8px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:all .15s ease;
  font-family:inherit;}
.or-shade:hover{border-color:var(--brand);}
.or-shade.on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-2);}
.or-out{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-top:6px;}
.or-out .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;}
.or-out .v{font-family:"IBM Plex Mono",monospace;font-size:38px;font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.or-track{height:9px;border-radius:99px;background:var(--line);margin:14px 0 12px;overflow:hidden;}
.or-track i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width .5s cubic-bezier(.2,.7,.3,1);}
.or-out p{font-size:13.2px;line-height:1.65;color:var(--ink-soft);margin:0;}

/* 3 · day / night --------------------------------------------------- */
.daynight{position:relative;overflow:hidden;}
.dn-toggle{display:inline-flex;gap:4px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-bottom:18px;}
.dn-toggle button{padding:9px 20px;border-radius:9px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:13.2px;font-weight:700;color:var(--ink-soft);transition:all .18s ease;}
.dn-toggle button.on{background:var(--brand);color:#fff;box-shadow:0 6px 16px -8px rgba(33,178,255,.9);}
.on-dark .dn-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);}
.on-dark .dn-toggle button{color:rgba(255,255,255,.72);}
.daynight .dn-day,.daynight .dn-night{transition:opacity .7s ease;}
.daynight[data-mode="day"]   .dn-night{opacity:0;}
.daynight[data-mode="night"] .dn-day{opacity:0;}
.daynight .dn-sky{transition:opacity .7s ease;}
.daynight[data-mode="day"]   .dn-sky-night{opacity:0;}
.daynight[data-mode="night"] .dn-sky-day{opacity:0;}
.dn-cap{font-size:13.6px;line-height:1.65;color:var(--ink-soft);margin:14px 0 0;min-height:42px;}
.daynight[data-mode="day"]   .dn-cap-night{display:none;}
.daynight[data-mode="night"] .dn-cap-day{display:none;}

/* 4 · before / after ------------------------------------------------ */
.ba-frame{position:relative;border-radius:18px;overflow:hidden;cursor:ew-resize;
  touch-action:none;user-select:none;min-height:320px;}
.ba-frame > div{position:absolute;inset:0;}
.ba-top{overflow:hidden;z-index:2;
  clip-path:inset(0 calc(100% - var(--ba-w,50%)) 0 0);}
.ba-pane{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:26px;}
.ba-pane.a{background:linear-gradient(150deg,#dce7ef,#eef4f8);}
.ba-pane.b{background:linear-gradient(150deg,var(--brand-tint),var(--brand-tint-2));}
.ba-pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ba-grip{position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:3;
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 14px rgba(6,44,71,.35);}
.ba-grip::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 6px 20px -6px rgba(6,44,71,.5);}
.ba-grip::before{content:"";position:absolute;top:50%;left:50%;z-index:1;width:16px;height:10px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(90deg,var(--brand-2) 0 2px,transparent 2px 6px,var(--brand-2) 6px 8px) center/8px 10px no-repeat,
    linear-gradient(90deg,var(--brand-2) 0 2px,transparent 2px 6px,var(--brand-2) 6px 8px) center/8px 10px no-repeat;}
.ba-tag{position:absolute;top:14px;z-index:4;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  font-weight:700;letter-spacing:.12em;padding:6px 12px;border-radius:99px;background:rgba(10,31,46,.72);color:#fff;}
.ba-tag.l{left:14px;} .ba-tag.r{right:14px;}

/* 5 · journey rail -------------------------------------------------- */
.journey{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;
  display:none;flex-direction:column;gap:2px;padding:14px 12px;border-radius:16px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:0 12px 40px -18px rgba(6,44,71,.4);
  opacity:0;transition:opacity .3s ease;}
@media(min-width:1360px){.journey{display:flex;}}
.journey.show{opacity:1;}
.journey a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;
  text-decoration:none;font-size:12.2px;font-weight:700;color:var(--ink-faint);
  white-space:nowrap;transition:color .2s ease,background .2s ease;}
.journey a i{width:7px;height:7px;border-radius:50%;background:var(--line);flex:0 0 auto;
  transition:all .25s ease;font-style:normal;}
.journey a:hover{color:var(--ink-soft);}
.journey a.on{color:var(--brand-2);background:var(--brand-tint);}
.journey a.on i{background:var(--brand);box-shadow:0 0 0 4px var(--brand-tint);}
.journey::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  width:var(--jp,0%);transition:width .12s linear;}

@media(prefers-reduced-motion:reduce){
  .daynight .dn-day,.daynight .dn-night,.daynight .dn-sky{transition:none;}
}

/* month chart bars rise with the section */
.monthchart .ig-bar-v{transform:scaleY(0);transform-origin:bottom center;transform-box:fill-box;
  transition:transform .8s cubic-bezier(.2,.75,.3,1);}
.reveal.in .monthchart .ig-bar-v{transform:scaleY(1);}
@media(prefers-reduced-motion:reduce){.monthchart .ig-bar-v{transform:scaleY(1);}}

/* ---------------- shared tool chrome ---------------- */
.tool-out{display:none;margin-top:20px;}
.tool-out.show{display:block;animation:toolIn .45s cubic-bezier(.2,.7,.3,1);}
@keyframes toolIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.tool-pick{display:flex;gap:9px;flex-wrap:wrap;}
.tool-pick button{padding:11px 17px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  font-family:inherit;font-size:13.4px;font-weight:700;color:var(--ink-soft);cursor:pointer;
  transition:all .16s ease;}
.tool-pick button:hover{border-color:var(--brand);color:var(--brand-2);}
.tool-pick button.on{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 8px 20px -10px rgba(33,178,255,.9);}
.on-dark .tool-pick button{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.82);}
.on-dark .tool-pick button.on{background:#fff;color:var(--brand-2);border-color:#fff;}
.tool-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 24px;}
.tool-card .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;}
.tool-card .v{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.015em;margin-bottom:10px;}
.tool-card p{font-size:14.2px;line-height:1.66;color:var(--ink-soft);margin:0 0 14px;}
.tool-card ul{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:9px;}
.tool-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink);}
.tool-card li svg{flex:0 0 auto;margin-top:3px;color:var(--green);}
.on-dark .tool-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);}
.on-dark .tool-card .v{color:#fff;} .on-dark .tool-card p{color:rgba(255,255,255,.76);}
.on-dark .tool-card li{color:rgba(255,255,255,.88);}

/* 1 · PIN finder ----------------------------------------------------- */
.pinfind .pin-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.pinfind input{width:190px;padding:15px 20px;border-radius:14px;border:1.5px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:700;letter-spacing:.14em;
  color:var(--ink);background:#fff;text-align:center;}
.pinfind input::placeholder{letter-spacing:.1em;color:var(--ink-faint);font-weight:500;}
.pinfind .pin-msg{font-size:13.2px;color:var(--ink-soft);flex:1 1 220px;}
.pin-office{display:flex;gap:16px;align-items:flex-start;}
.pin-office .pin-ico{width:46px;height:46px;border-radius:14px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-tint),var(--brand-tint-2));color:var(--brand-2);
  display:flex;align-items:center;justify-content:center;}
.pin-office b{display:block;font-size:19px;color:var(--ink);margin-bottom:5px;letter-spacing:-.015em;}
.pin-office span{display:block;font-size:13.8px;line-height:1.6;color:var(--ink-soft);margin-bottom:12px;}

/* 3 · readiness ------------------------------------------------------ */
.readiness .rd-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px;}
@media(max-width:700px){.readiness .rd-list{grid-template-columns:1fr;}}
.rd-item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:13px;
  border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:all .16s ease;}
.rd-item:hover{border-color:var(--brand-tint-2);}
.rd-item input{appearance:none;-webkit-appearance:none;width:21px;height:21px;flex:0 0 auto;margin:1px 0 0;
  border:2px solid var(--line);border-radius:7px;cursor:pointer;position:relative;transition:all .16s ease;}
.rd-item input:checked{background:var(--green);border-color:var(--green);}
.rd-item input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.rd-item input:checked ~ .rd-txt b{color:var(--green);}
.rd-txt b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;transition:color .16s ease;}
.rd-txt span{display:block;font-size:12.4px;color:var(--ink-faint);margin-top:3px;line-height:1.5;}
.rd-meter{display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.rd-meter .rd-track{flex:1;height:10px;border-radius:99px;background:var(--line);overflow:hidden;}
.rd-meter .rd-track i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width .45s cubic-bezier(.2,.7,.3,1);}
.rd-meter b{font-family:"IBM Plex Mono",monospace;font-size:24px;font-weight:700;color:var(--brand-2);min-width:64px;}
.readiness.complete .rd-meter .rd-track i{background:linear-gradient(90deg,var(--green),#5fe3b0);}
.readiness.complete .rd-meter b{color:var(--green);}
.rd-msg{font-size:14.4px;font-weight:700;color:var(--ink);margin:0 0 8px;}
.rd-todo{font-size:13px;line-height:1.65;color:var(--ink-soft);margin:0;}
.rd-todo b{color:var(--ink);}