/* Responsive shell (phone bottom sheet, tablet sizing, header menu) and motion. Loaded last on every page; ui.js drives it.
   Tokens only (base.css). Every animation here is decoration: prefers-reduced-motion turns it all off at the bottom. */

/* ---------- motion (brief 6): six moves, each something a drafter does ----------
   1 press  2 draw (a stroke)  3 pop (place a symbol)  4 count (read a measurement)  5 grow  6 settle.
   Animate arrivals, never updates. Only transform, opacity and stroke-dashoffset move. Nothing loops except the
   drafting state; nothing runs longer than 600 ms except the layout draw and the drafting state. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-draw: cubic-bezier(.4, 0, .2, 1); --ease-pop: cubic-bezier(.3, 1.4, .5, 1);
  --t-press: .12s; --t-fast: .2s; --t-reveal: .3s; --t-pop: .35s; --t-fade: .4s; --t-count: 600ms;
  --sheet-peek: 148px; }

@keyframes settle { from { transform: translateY(8px); } to { transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes march { from { transform: translateX(-30px); } to { transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes menuIn { from { transform: translateY(-8px); } to { transform: none; } }

/* 6 settle: a panel's screen really changed (ui.js adds .enter; not on re-renders). First six only, 40 ms apart.
   It starts from a visible state: only the position moves. */
.enter > *, .enter .gbody > *, .enter .rcard { animation: settle var(--t-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.enter > :nth-child(n+7), .enter .gbody > :nth-child(n+7), .enter .rcard:nth-of-type(n+7) { animation: none; }
/* 5 grow: the current stepper segment and score bars */
.enter .gprog span.cur { transform-origin: left; animation: growX .5s var(--ease-out) both; }
.enter .bar i { transform-origin: bottom; animation: growUp .5s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 5) * 40ms); }
/* a disclosure or Pro section opening */
details[open] > :not(summary), .step.open .body { animation: fadeIn var(--t-fast) ease both; }
#toast:not(.hidden) { animation: toastIn var(--t-reveal) var(--ease-out) both; }

/* 3 pop: pins after a search (scout.js sets .pins-enter), 30 ms apart, 300 ms at most */
.pins-enter .pin { animation: pop var(--t-pop) var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 30ms); }

/* drafting state (ui.js): every wait over ~400 ms. A pen run marching under the strip, a lettered status and a real
   elapsed clock. No stages unless the server reports one, no percentage, no spinner. Under 400 ms: nothing. */
.drafting { display: block; padding: 0; gap: 0; border: 1px solid var(--ink); background: var(--sheet); }
.drafting.pre { visibility: hidden; }  /* under ~400 ms a wait shows nothing (ui.js) */
.drafting .run { height: 5px; overflow: hidden; border-bottom: 1px solid var(--ink); background: var(--paper); }
.drafting .run i { display: block; height: 100%; width: calc(100% + 30px);
  background: repeating-linear-gradient(90deg, var(--pen-fill) 0 18px, transparent 18px 30px); animation: march 1s linear infinite; }
.drafting .msg { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px 0; color: var(--muted);
  font: 400 10.5px/1.4 var(--letter); letter-spacing: .09em; text-transform: uppercase; }
.drafting .msg b { font-weight: 400; color: var(--ink); }
.drafting .clock { font-variant-numeric: tabular-nums; }
.drafting > p, .drafting .hint { margin: 6px 12px 10px; color: var(--muted); font-size: 13px; text-transform: none; letter-spacing: 0; }
.drafting .spin, .drafting .bdoc, .drafting .gp-bar, .drafting .gp-top { display: none; }
/* a small wait inside a line (loading a list, the handoff note): the same run, no box */
.spin { position: relative; display: inline-block; width: 30px; height: 5px; flex: none; overflow: hidden; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); animation: none; }
.spin::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: calc(100% + 10px);
  background: repeating-linear-gradient(90deg, var(--pen-fill) 0 6px, transparent 6px 10px); animation: spinMarch 1s linear infinite; }
@keyframes spinMarch { from { transform: none; } to { transform: translateX(10px); } }
/* a page waiting for its first data: the run, centered */
.j-wrap > .spin { display: block; }
/* on a phone the panel is folded while Scout searches: the map carries a small drafting chip */
.map-drafting { position: absolute; z-index: 600; top: 10px; left: 50%; transform: translateX(-50%); min-width: 200px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink); pointer-events: none; display: none; }
@media (max-width: 760px) { body.scanning .map-drafting { display: block; } }
.map-drafting .msg { padding-bottom: 8px; }

/* ---------- tactile controls ---------- */
button, .gchoice, .rcard { -webkit-tap-highlight-color: transparent; }
/* hover changes color only: no lifts, no shadows */
/* switching the theme is an update, not an arrival: nothing transitions while it happens */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* ---------- Site Scout hero (start screen, tablet and desktop) ---------- */
/* framed like a detail on the sheet */
.s-hero { margin: 0 0 12px; border: 1px solid var(--ink); background: var(--paper);
  overflow: hidden; line-height: 0; }
.s-hero svg { width: 100%; height: auto; display: block; }
.s-hero .car { animation: carIn 7s var(--ease-out) .6 both; animation-delay: var(--t, 0ms); }
.s-hero .car2 { animation: carIn2 7s var(--ease-out) .6 both; animation-delay: var(--t, 0ms); }
.s-hero .glow { animation: glow 7s ease-in-out .6 both; animation-delay: var(--t, 0ms); transform-box: fill-box; transform-origin: center; }
.s-hero .glow2 { animation: glow2 7s ease-in-out .6 both; animation-delay: var(--t, 0ms); transform-box: fill-box; transform-origin: center; }
.s-hero .flow { stroke-dasharray: 4 6; animation: flow 1.2s linear 3; }
.s-hero .ping { transform-box: fill-box; transform-origin: center; animation: ping 3.5s var(--ease-out) 1 both; animation-delay: var(--t, 0ms); }
@keyframes carIn { 0%, 6% { transform: translate(-150px, 0); } 26%, 78% { transform: none; } 96%, 100% { transform: translate(360px, 0); } }
@keyframes carIn2 { 0%, 30% { transform: translate(-260px, 0); } 50%, 88% { transform: none; } 100% { transform: translate(260px, 0); } }
@keyframes glow { 0%, 24% { opacity: 0; transform: scale(.6); } 30%, 74% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; } }
@keyframes glow2 { 0%, 48% { opacity: 0; transform: scale(.6); } 54%, 84% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -20; } }
@keyframes ping { 0% { transform: scale(.4); opacity: .8; } 60%, 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- header menu (ui.js moves nav and header actions into it on narrow screens) ---------- */
.menubtn { display: none; margin: 0; padding: 0; width: 38px; height: 38px; align-items: center; justify-content: center;
  background: var(--sheet); border: 1px solid var(--ink); color: var(--ink); border-radius: 0; flex: none; }
.menubtn:hover { color: var(--ink); background: var(--pen-soft); }
.menubtn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.menubtn line { transition: transform .25s var(--ease-out), opacity .2s; transform-origin: center; transform-box: fill-box; }
header.menu-open .menubtn line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
header.menu-open .menubtn line:nth-child(2) { opacity: 0; }
header.menu-open .menubtn line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.navdrawer { display: none; position: fixed; z-index: 1090; top: var(--hdr); left: 0; right: 0; background: var(--sheet);
  padding: 8px 12px 16px; border-top: 1px solid var(--hair); border-bottom: 1.5px solid var(--ink); }
header.menu-open + .navdrawer, .navdrawer.open { display: block; animation: menuIn .22s var(--ease-out) both; }
.navdrawer .navlinks { flex-direction: column; align-items: stretch; gap: 2px; }
.navdrawer .navlinks { align-self: auto; }
.navdrawer .navlinks a { display: block !important; font-size: 12px; padding: 14px 12px; border: 0; border-bottom: 1px solid var(--hair); }
.navdrawer .navlinks a.on { background: var(--pen-soft); box-shadow: inset 4px 0 0 var(--pen-fill); }
.navdrawer .hdr-actions { flex-wrap: wrap; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ink); }
.navdrawer .hdr-actions select { max-width: none; flex: 1; min-width: 0; }
.navdrawer .hdr-actions label { flex: 1; }
.navdrawer .hdr-actions label select { width: 100% !important; }
.hdr-account:empty { display: none; }
.hdr-account .who { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.hdr-account button.ghost { margin: 0; padding: 6px 10px; font-size: 13px; min-height: 0; }
.hdr-account .beta-meter { font-size: 12px; white-space: nowrap; padding: 3px 8px; border: 1px solid var(--pen); color: var(--ink); background: var(--pen-soft); cursor: help; font-variant-numeric: tabular-nums; }
.hdr-account .beta-meter.low { border-color: var(--warn); color: var(--warn-ink); background: var(--warn-soft); }
.hdr-account a.beta-meter[href] { color: var(--ink); font-size: 12px; cursor: pointer; }
.hdr-account a.beta-meter.low[href] { color: var(--warn); }
.hdr-account a.beta-meter[href]:hover { text-decoration: none; border-color: var(--ink); }
/* the upgrade offer (ui.js UI.upgrade): a sheet with the hard offset, centred over a paper scrim */
/* above a running tour (.tour 1500) and the design page's work bars (2100): the offer answers the click just made */
.upgrade-scrim { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--paper) 75%, transparent); }
.upgrade { width: min(460px, 100%); background: var(--sheet); border: 1px solid var(--ink); box-shadow: var(--lift) var(--lift) 0 var(--ink); padding: 20px 22px; }
.upgrade h3 { margin: 0 0 8px; font: 500 12px/1.4 var(--letter); letter-spacing: .08em; text-transform: uppercase; }
.upgrade p { margin: 0 0 14px; color: var(--ink); line-height: 1.5; }
.upgrade .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.upgrade .actions .ghostlink { margin-right: auto; color: var(--pen); font-size: 13px; }
.upgrade .actions button { margin: 0; }
.upgrade .up-err { color: var(--neg-ink); font-size: 13px; margin: -6px 0 10px; }
.upgrade .up-err:empty { display: none; }
.upgrade .actions a.btn { margin: 0; text-decoration: none; }
.upgrade .up-seats { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.upgrade .up-seats input { width: 64px; margin: 0; }
.hdr-account a { color: var(--pen); font-size: 13px; text-decoration: none; }
.hdr-account a:hover { text-decoration: underline; }
.navdrawer .hdr-account { justify-content: space-between; }
.navdrawer .hdr-account .who { max-width: none; flex: 1; }
.scrim { display: none; position: fixed; inset: 0; z-index: 1080; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.navdrawer.open ~ .scrim { display: block; animation: fadeIn var(--t-fast) both; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  aside, #guide { width: 380px; min-width: 320px; }
  #scout { width: 400px; min-width: 340px; }
  header { gap: 12px; padding: 0 14px; }
  .navlinks a { padding: 0 7px; }
  .hdr-actions select { max-width: 170px; }
}
/* wider screens whose header contents don't fit get the same menu (ui.js adds .collapsed) */
header.collapsed .menubtn { display: inline-flex; margin-left: auto; }
/* the header's actions keep their size, so a crowded header overflows and ui.js folds them into the menu; squeezed,
   the project picker shrank to three letters and the save state ran under the Share button (1100 px, 2026-10-19) */
header > .hdr-actions, header > .hdr-actions > * { flex-shrink: 0; }
/* the project picker at its set width (max-width still caps it): sized only by max-width, Chrome measured the
   actions without the New button, which then sat on the account chip (design page, 1100-1440 px, 2026-10-19) */
header > .hdr-actions select { width: 220px; }
@media (min-width: 901px) { .navdrawer { left: auto; width: 360px; border-left: 1.5px solid var(--ink); } }
@media (max-width: 900px) {
  .menubtn { display: inline-flex; margin-left: auto; }
  header > .navlinks, header > .hdr-actions { display: none; }
  header .beta { display: none; }
  aside, #guide { width: 340px; min-width: 0; }
  #scout { width: 360px; min-width: 0; padding: 16px 16px 24px; }
  .s-hero { display: none; }
}
@media (pointer: coarse) {
  button, .chips button, select, input:not([type=checkbox]):not([type=radio]):not([type=range]) { min-height: 40px; }
  .rowcard button { min-height: 34px; }
  .gnote a, #exportOut a { padding: 6px 0; }
  input[type=checkbox], input[type=radio] { width: 20px !important; height: 20px; accent-color: var(--pen-fill); }
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
  /* page rules set min-height: 0 on these; on a phone they still need a finger-sized target */
  .modeswitch button, .b-sites button, .b-iv button, .hdr-account button.ghost, .acct-pop > a, .acct-pop > button { min-height: 40px; }
}

/* skip link (ui.js): the first Tab stop on every page with a header, shown only while it has focus */
.skip { position: absolute; left: 8px; top: 8px; z-index: 4000; transform: translateY(calc(-100% - 16px));
  background: var(--sheet); color: var(--pen); border: 1px solid var(--ink); padding: 8px 14px; font: 600 14px/1.3 var(--display);
  text-decoration: none; box-shadow: var(--lift) var(--lift) 0 var(--ink); }
.skip:focus { transform: none; }

/* a map tool started from the keyboard (ui.js UI.mapPick): a crosshair at the map centre and a bar of keys at the top,
   between the zoom and layer buttons, above the map's controls (legend, scale). pointer-events: none on the
   crosshair, so a mouse still clicks the map through it */
.mappick { position: absolute; inset: 0; z-index: 1001; pointer-events: none; }
.mp-cross { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.mp-cross::before, .mp-cross::after { content: ""; position: absolute; background: var(--pen-fill); box-shadow: 0 0 0 1px var(--sheet); }
.mp-cross::before { left: 16px; top: 0; width: 2px; height: 34px; }
.mp-cross::after { top: 16px; left: 0; height: 2px; width: 34px; }
.mp-bar { pointer-events: auto; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: max-content;
  max-width: min(640px, calc(100% - 120px)); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; background: var(--sheet); color: var(--ink);
  border: 1px solid var(--ink); box-shadow: var(--lift) var(--lift) 0 var(--ink); padding: 8px 10px; font-size: 13px; }
.mp-bar .mp-txt { flex: 1 1 220px; }
.leaflet-container.picking:focus-visible { outline-offset: -3px; }

/* a whole panel that takes focus after a re-render (ui.js) draws its ring inside its own border */
main > aside:focus-visible, .j-wrap:focus-visible, main.doc:focus-visible { outline-offset: -3px; }

/* ---------- phone: full-width map with a draggable bottom sheet ---------- */
.sheet-grip { display: none; }  /* phone only: wider screens have no sheet, so no empty, invisible Tab stop */
@media (max-width: 760px) {
  html, body { height: 100%; height: 100dvh; overflow: hidden; }
  body.page-doc { overflow: auto; height: auto; }
  input, select, textarea { font-size: 16px; }  /* below 16px iOS zooms the page on focus */
  header { gap: 8px; padding: 0 10px; }
  main { flex-direction: column; position: relative; overflow: hidden; }
  main > #map { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: calc(100% - var(--sheet-snap, 52%) + 18px) !important; flex: none;
 }
  main > aside { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000; width: 100% !important; min-width: 0 !important;
    height: var(--sheet-h, 52%) !important; border: 0 !important; border-radius: 0;
    border-top: 1.5px solid var(--ink) !important; padding-top: 26px !important; padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain; overflow-anchor: none; }
  main.sheet-anim > aside { transition: height .32s var(--ease-out); }
  .sheet-grip { position: absolute; left: 0; right: 0; z-index: 1001; height: 28px; bottom: calc(var(--sheet-h, 52%) - 28px);
    display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; border-radius: 0; }
  main.sheet-anim .sheet-grip { transition: bottom .32s var(--ease-out); }
  .sheet-grip::before { content: ""; width: 40px; height: 5px; border-radius: 0; background: var(--hair); transition: background .2s, width .2s; }
  .sheet-grip:active::before { background: var(--ink); width: 52px; }
  .sheet-grip { background: var(--sheet); }
  /* guided Back/Next stay reachable at any sheet height */
  #guide .gnav { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); background: var(--sheet);
    margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  #guide .gnav button { flex: 1; }
  main.is-peek #guide .gnav { display: none; }
  #gOut, #exportOut { scroll-margin-bottom: 90px; }  /* clear the pinned Back/Next bar */
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { font-size: 9px; }
  /* the map runs 18px under the sheet's top edge: lift the bottom controls (scale bar, credits) clear of it (QA J9) */
  main > #map .leaflet-bottom { bottom: 18px; }
  .step h2 { padding: 14px 16px; }
  .grid2 { grid-template-columns: 1fr; }
  .gcard { grid-template-columns: 110px 1fr; }
  #scoutbar { gap: 10px; }
  #scoutbar details > div { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
  .bars, .barlab { gap: 2px; }
  .handoffwait { top: 90px; }
}

/* ---------- document pages (engineer workspace, coverage) ---------- */
.panel, .card { overflow-x: auto; }
/* design's summary cards (chargers, switchboards, transformer...) wrap a long value instead of scrolling it: a
   scroll box nobody can reach from the keyboard hid the end of "800A / 400A" at 820 px */
.cards .card { overflow-x: visible; }
.cards .card .v { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .wrap { padding: 14px 12px 40px !important; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs button { flex: none; }
  .panel { padding: 14px 12px !important; }
  main.cov { padding: 16px 14px 32px !important; }
  #usmap path.st { stroke-width: .6; }
}
#usmap path.st { animation: stateIn var(--t-reveal) var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 25) * 12ms); transform-box: fill-box; transform-origin: center; }
@keyframes stateIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- reduced motion: every move off, final values at once; the drafting run is a still dashed line and its
   clock still ticks ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .drafting .run i, .spin::before { animation: none !important; }
}

/* ---------- in-app tours (tour.js): a dashed pen spotlight on the real control, a keyed-note card beside it ---------- */
.tour { position: fixed; inset: 0; z-index: 1500; display: none; }
.tour.on { display: block; }
.tour-spot { position: fixed; border: 2px dashed var(--pen); box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--paper) 72%, transparent);
  pointer-events: none; transition: left .25s var(--ease-out), top .25s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out); }
.tour-card { position: fixed; width: 360px; max-width: calc(100vw - 32px); background: var(--sheet); color: var(--ink); border: 1px solid var(--ink);
  box-shadow: var(--lift) var(--lift) 0 var(--ink); padding: 14px 16px 12px; animation: settle var(--t-reveal) var(--ease-out) both; }
.tour-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tour-head b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; flex: 1; }
.tour-n { color: var(--muted); white-space: nowrap; }
.tour-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.tour-card p b { font-weight: 600; }
.tour-nav { display: flex; align-items: center; gap: 8px; }
.tour-nav .spacer { flex: 1; }
.tour-nav button { margin: 0; }
.tour-card[data-side="dock-bottom"], .tour-card[data-side="dock-top"] { left: 12px !important; right: 12px; width: auto !important; max-width: none; }
.tour-card[data-side="dock-bottom"] { bottom: calc(12px + env(safe-area-inset-bottom)); top: auto !important; }
.tour-card[data-side="dock-top"] { top: calc(var(--hdr) + 12px) !important; }
.tourbtn { width: 32px; height: 32px; padding: 0; margin: 0; display: inline-grid; place-items: center; flex: none;
  border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); }
.tourbtn:hover { background: var(--pen-soft); color: var(--ink); }
.tourbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.tourrow { display: block; width: 100%; text-align: left; margin: 10px 0 0; padding: 12px; border: 1px solid var(--ink); background: var(--sheet);
  font: 400 12px/1 var(--letter); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.tourrow:hover { background: var(--pen-soft); }

/* ---------- info tips (ui.js): a small ⓘ beside a question; its card is the tour card, smaller ---------- */
.itip { display: inline-block; vertical-align: middle; position: relative; }
.itip-b { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0 0 0 4px; display: inline-grid; place-items: center; border: 0;
  background: none; color: var(--muted); cursor: help; }
.itip-b:hover, .itip-b[aria-expanded="true"] { color: var(--pen); background: none; }
.itip-b:focus-visible { outline: 2px solid var(--pen); outline-offset: 1px; }
.itip-b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.itip-pop { position: fixed; z-index: 1450; display: block; background: var(--sheet); color: var(--ink); border: 1px solid var(--ink);
  box-shadow: var(--lift) var(--lift) 0 var(--ink); padding: 10px 12px; font-size: 13px; font-weight: 400; line-height: 1.5;
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; }
.itip-pop[hidden] { display: none; }
.itip-pop b { font-weight: 600; }
.itip-pop .tip-p { display: block; margin: 0 0 6px; }
.itip-pop .tip-p:last-child { margin-bottom: 0; }
.itip-pop a { color: var(--pen); font-weight: 600; }
@media (hover: none) { .itip-b { width: 32px; height: 32px; } }  /* a finger-sized target on touch */

/* "More in Pro": one quiet link at the foot of a guided step */
.gpro { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.gpro a { color: var(--pen); font-weight: 600; text-decoration: none; }
.gpro a:hover { text-decoration: underline; }
.gpro .tag { margin-right: 6px; }
/* "(optional)" disclosures in a guided step (base.css draws the details) */
details.gmore { margin-top: 12px; }
details.gmore > summary small { font-weight: 400; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }

/* account menu (ui.js accountMenu): the signed-in address opens plan, billing, team and sign out */
.acct-menu { position: relative; }
.acct-menu > summary { display: block; list-style: none; cursor: pointer; padding: 6px 22px 6px 10px; border: 1px solid transparent; position: relative; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu > summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.acct-menu > summary:hover, .acct-menu[open] > summary { border-color: var(--ink); color: var(--ink); }
.acct-menu > summary:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.acct-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; background: var(--sheet);
  border: 1px solid var(--ink); display: flex; flex-direction: column; }
.acct-pop .acct-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.acct-pop .acct-head b { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-pop .acct-head span { font-size: 12px; color: var(--muted); }
/* the Founding Engineer badge under the name (base.css .tag.pen; this rule's specificity would otherwise grey it) */
.acct-pop .acct-head .tag.founding { align-self: flex-start; font-size: 10px; color: var(--pen); margin: 2px 0; }
.acct-pop > a, .acct-pop > button { display: block; text-align: left; padding: 9px 12px; font-size: 13px; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--hair); margin: 0; min-height: 0; text-decoration: none; cursor: pointer; font-family: inherit; }
.acct-pop > :last-child { border-bottom: 0; }
.acct-pop > a:hover, .acct-pop > button:hover, .acct-pop > a:focus-visible, .acct-pop > button:focus-visible { background: var(--pen-soft); outline: none; }
.acct-pop > a:focus-visible, .acct-pop > button:focus-visible { outline: 2px solid var(--pen); outline-offset: -2px; }
.navdrawer .acct-menu { flex: 1; }
.navdrawer .acct-pop { position: static; margin-top: 6px; }
.hdr-account details.acct-menu:not(.sb-c):not(.inputs) > summary { display: block; padding: 6px 22px 6px 10px; }
.hdr-account details.acct-menu:not(.sb-c):not(.inputs) > summary::before { content: none; display: none; }
.hdr-account .acct-pop { animation: none; }