/* Branch 05 polish (site/src/portal/). One grey family, cool graphite, darkest first, and one
   accent, ice cyan; the same values are PALETTE in site/src/portal/palette.js. Rules apply under
   #visit.polish only (?polish=1 or the list flag "polish": true). */
:root {
  --pt-grey-0: #08090A; --pt-grey-1: #111315; --pt-grey-2: #1C1F22; --pt-grey-3: #2C3034;
  --pt-grey-4: #4A5056; --pt-grey-5: #7D848B; --pt-grey-6: #B4BAC0; --pt-grey-7: #E4E8EB;
  --pt-grey-8: #F7F9FA;
  --pt-accent: #86E1FF;
  --pt-ease: cubic-bezier(.65, 0, .35, 1); /* cubicInOut, as the GL side */
  --pt-open: 500ms;
  --pt-line: rgba(228, 232, 235, .62);   /* grey-7, thin lines */
  --pt-faint: rgba(180, 186, 192, .34);  /* grey-6, tracks and outlines */
  --pt-back: rgba(17, 19, 21, .58);      /* grey-1, backings */
  --pt-shadow: 0 0 2px rgba(8, 9, 10, .95), 0 0 8px rgba(8, 9, 10, .7), 0 1px 18px rgba(8, 9, 10, .5);
}
#visit.polish, #visit.polish #stage { background: var(--pt-grey-1); }

/* ── the HUD (site/src/portal/hud.js) ── */
#stage .pt-hud { pointer-events: none; opacity: 0; transition: opacity var(--pt-open) var(--pt-ease); }
#stage .pt-hud.on { opacity: 1; }
.pt-hud > * { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.pt-brackets { perspective: 900px; perspective-origin: 960px 540px; }
.pt-br { position: absolute; width: 0; height: 0; transition: opacity 150ms var(--pt-ease); }
.pt-br.pt-off { opacity: 0; } /* under the control card */ /* parallax is eased per frame (portal/index.js) */
.pt-br svg { position: absolute; left: -2px; top: -2px; overflow: visible; }
.pt-br-halo { fill: none; stroke: rgba(8, 9, 10, .62); stroke-width: 9; stroke-linecap: square; filter: blur(2.5px); }
.pt-br-arm { fill: none; stroke: var(--pt-line); stroke-width: 1.6; stroke-linecap: square; filter: drop-shadow(0 0 1.5px rgba(8, 9, 10, .95)) drop-shadow(0 0 6px rgba(8, 9, 10, .8)); }
.pt-br-dot { fill: var(--pt-accent); }
.pt-flat { overflow: visible; }
.pt-reticle circle, .pt-reticle line { fill: none; stroke: var(--pt-line); stroke-width: 1.25; filter: drop-shadow(0 0 2px rgba(8, 9, 10, .8)); }
.pt-ticks, .pt-track, .pt-fill { filter: drop-shadow(0 0 1.5px rgba(8, 9, 10, .9)) drop-shadow(0 0 6px rgba(8, 9, 10, .45)); }
.pt-ticks line { stroke: rgba(180, 186, 192, .55); stroke-width: 2; }
.pt-ticks line.past { stroke: var(--pt-line); }
.pt-ticks line.on { stroke: var(--pt-accent); }
.pt-ticks.pt-off { display: none; } /* a shot with the contact link: the link takes the place */
.pt-track { stroke: var(--pt-faint); stroke-width: 1; opacity: .6; }
.pt-fill { stroke: var(--pt-accent); stroke-width: 1.5; }

/* ── foundation HUD and labels ── */
#visit.polish .label { color: var(--pt-grey-7) !important; font-weight: 300 !important; letter-spacing: .02em; text-shadow: var(--pt-shadow); }
#visit.polish .label.pt-gone, #visit.polish .hud-marks { display: none !important; }
#visit.polish a.label { color: var(--pt-accent) !important; border-bottom: 1px solid currentColor; padding-bottom: 6px; letter-spacing: .06em; }
#visit.polish .hud button:focus-visible { outline: 1px solid var(--pt-accent); outline-offset: 6px; }
#visit.polish .hud .hud-next {
  right: 64px; bottom: 44px; height: 64px; min-width: 184px; padding: 0 40px; overflow: hidden;
  background: rgba(17, 19, 21, .92); color: var(--pt-grey-8); border: 1px solid var(--pt-faint); /* one fill on every shot, whatever is behind it */
  font-size: 30px; font-weight: 300; letter-spacing: .1em;
  /* leaving (Next tapped, or the shot changed): a short fade drifting left */
  opacity: 0; visibility: hidden; transform: translateX(-14px);
  transition: opacity 280ms var(--pt-ease), transform 280ms var(--pt-ease), visibility 0s linear 300ms, scale 90ms ease-out, background-color 90ms;
}
/* arriving at hold: a wipe in from the right led by a scan line, the underline drawing after it */
#visit.polish .hud .hud-next.on {
  opacity: 1; visibility: visible; transform: none;
  transition: scale 90ms ease-out, background-color 90ms;
  animation: pt-next-in 520ms cubic-bezier(.2, .8, .2, 1) backwards;
}
#visit.polish .hud .hud-next::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--pt-grey-8);
  box-shadow: 0 0 6px 2px var(--pt-accent), 0 0 18px 4px rgba(134, 225, 255, .55); opacity: 0; pointer-events: none;
}
#visit.polish .hud .hud-next.on::before { animation: pt-next-scan 520ms cubic-bezier(.2, .8, .2, 1) backwards; }
#visit.polish .hud .hud-next::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pt-accent);
  transform-origin: 100% 50%; pointer-events: none;
}
#visit.polish .hud .hud-next.on::after { animation: pt-line-in 340ms 200ms cubic-bezier(.2, .8, .2, 1) backwards; }
#visit.polish .hud .hud-next:active { background: rgba(28, 31, 34, .92); border-color: var(--pt-accent); scale: .965; }
@keyframes pt-next-in { 0% { opacity: 0; transform: translateX(28px); clip-path: inset(0 0 0 100%); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes pt-next-scan { 0% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-182px); } }
@keyframes pt-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* the press: a ripple from the pointer, inside the button (controls.js) */
#visit.polish .hud .pt-press {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--pt-accent); box-sizing: border-box;
  background: radial-gradient(circle, rgba(134, 225, 255, .32), rgba(134, 225, 255, .08) 60%, rgba(134, 225, 255, 0) 71%);
  animation: pt-press 460ms cubic-bezier(.25, .6, .35, 1) forwards;
}
@keyframes pt-press { from { transform: scale(.3); opacity: 1; } 70% { opacity: .8; } to { transform: scale(9); opacity: 0; border-width: .4px; } }
#visit.polish #stage .hud .hud-back .pt-press { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
#visit.polish #stage.tk-surface .hud .hud-next { right: 64px; left: auto; } /* Next stays bottom right on every shot (touch moves it left) */
#visit.polish #stage .hud .hud-back, #visit.polish #stage .hud .hud-full { background: none; border-radius: 0; color: var(--pt-grey-7); }
#visit.polish #stage .hud .hud-back { transform: translateX(10px); transition: opacity 260ms var(--pt-ease), transform 260ms var(--pt-ease), visibility 0s linear 280ms, scale 90ms ease-out; }
#visit.polish #stage .hud .hud-back.on { transform: none; transition: scale 90ms ease-out; animation: pt-back-in 460ms cubic-bezier(.2, .8, .2, 1) backwards; }
#visit.polish #stage .hud .hud-back:active { scale: .9; color: var(--pt-accent); }
@keyframes pt-back-in { from { opacity: 0; transform: translateX(18px); } }
#visit.polish .hud .hud-back svg path, #visit.polish .hud .hud-full svg path { stroke-width: 1.5; }
#visit.polish .hud .hud-control {
  height: 60px; padding: 0 28px; font-size: 28px; font-weight: 300; letter-spacing: .04em;
  background: var(--pt-back); color: var(--pt-grey-7); border: 1px solid var(--pt-faint);
}
#visit.polish .hud .hud-control:active { background: rgba(134, 225, 255, .16); border-color: var(--pt-accent); }

/* ── branch 01 viewfinder: brackets and centre mark give way to the HUD; label and readout stay ── */
#visit.polish .lens-brackets, #visit.polish .lens-centre { display: none !important; }
#visit.polish .lens-label { color: var(--pt-grey-7) !important; font-size: 34px !important; letter-spacing: .04em; left: 136px !important; top: 52px !important; text-shadow: var(--pt-shadow) !important; }
#visit.polish .lens-readout { color: var(--pt-grey-7) !important; font-size: 28px !important; letter-spacing: .06em; left: 136px !important; top: 958px !important; text-shadow: var(--pt-shadow) !important; }
#visit.polish .lens-circle { border: 1.5px solid var(--pt-accent) !important; box-shadow: 0 0 14px rgba(134, 225, 255, .35) !important; }

/* ── branch 02 drawing chrome ── */
#visit.polish .dh-key > div { color: var(--pt-grey-7) !important; font-weight: 300; text-shadow: var(--pt-shadow) !important; letter-spacing: .03em; } /* one tone */
#visit.polish .dh-bar { right: 252px !important; bottom: 196px !important; } /* inside the bracket frame, clear of the corner bracket */
#visit.polish .dh-bar-line { border-width: 1.5px !important; border-color: var(--pt-line) !important; }
#visit.polish .dh-bar-text { color: var(--pt-grey-6); text-shadow: var(--pt-shadow) !important; }
#visit.polish .dh-panel, #visit.polish .dh-inset { box-shadow: 0 0 0 1px var(--pt-line) !important; }
#visit.polish .drawing-over .dh-ring, #visit.polish .dh-panel circle { stroke: var(--pt-accent) !important; }
#visit.polish .drawing-over .dh-case { stroke: rgba(8, 9, 10, .45) !important; }
#visit.polish .drawing-hud svg [stroke="#34d399"] { stroke: var(--pt-accent) !important; }
#visit.polish .drawing-hud svg [fill="#34d399"] { fill: var(--pt-accent) !important; }
#visit.polish .drawing-hud svg [fill="rgba(52,211,153,.5)"] { fill: rgba(134, 225, 255, .35) !important; }
#visit.polish .plate-word { background: var(--pt-back) !important; border: 1px solid var(--pt-faint); border-radius: 0 !important; color: var(--pt-grey-7); font-weight: 300 !important; letter-spacing: .03em; }

/* ── branch 03 touch chrome: no credits; buttons in the skin ── */
#visit.polish .touchkit .tk-credits { display: none !important; }
#visit.polish .touchkit .tk-hud { color: var(--pt-grey-7); font-size: 28px; letter-spacing: .04em; left: 136px; top: 52px; text-shadow: var(--pt-shadow); }
#visit.polish .touchkit .tk-pin { color: var(--pt-grey-6); left: 136px; top: 96px; letter-spacing: .04em; text-shadow: var(--pt-shadow); }
#visit.polish .touchkit .tk-btn { border: 1px solid var(--pt-faint); background: var(--pt-back); color: var(--pt-grey-7); font-weight: 300; letter-spacing: .03em; }
#visit.polish .touchkit .tk-btn.on { background: rgba(134, 225, 255, .14); color: var(--pt-grey-8); border-color: var(--pt-accent); }
#visit.polish .touchkit .tk-swatch { border-width: 2px; }
#visit.polish .touchkit .tk-swatch.on { border-color: var(--pt-accent); box-shadow: 0 0 0 3px rgba(134, 225, 255, .25); }
#visit.polish .touchkit .tk-btn.ring, #visit.polish .touchkit .tk-chip.fresh { box-shadow: 0 0 0 2px var(--pt-accent), 0 0 16px rgba(134, 225, 255, .4); }
#visit.polish .touchkit .tk-ring circle { stroke: var(--pt-accent); stroke-width: 2; }

/* ── branch 04 walk chrome: brackets and ring give way to the HUD ── */
#visit.polish .walk-brackets path, #visit.polish .walk-ring { display: none; }
#visit.polish .walk-instruction { font-weight: 300; font-size: 28px; letter-spacing: .03em; color: var(--pt-grey-7); top: 880px; }
#visit.polish .walk-instruction span { background: var(--pt-back); border: 1px solid var(--pt-faint); border-radius: 0; padding: 12px 28px; text-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#visit.polish .walk-word { background: var(--pt-back); border: 1px solid var(--pt-faint); border-radius: 0; font-weight: 300; color: var(--pt-grey-7); letter-spacing: .03em; text-shadow: none; }
#visit.polish .walk-jack { border: 2px solid var(--pt-accent); box-shadow: 0 0 12px rgba(134, 225, 255, .45); }

/* ── controls (site/src/portal/controls.js) ── */
/* stage taps: a ring from the tap point */
#stage .pt-taps { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; pointer-events: none; }
/* a hairline ring that grows to about the tapped target's size (--pt-s, controls.js) and fades */
.pt-ripple {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none; box-sizing: border-box;
  border: 1px solid var(--pt-accent); background: radial-gradient(circle, rgba(134, 225, 255, .1), rgba(134, 225, 255, 0) 70%);
  animation: pt-ripple 540ms cubic-bezier(.2, .7, .3, 1) forwards;
}
.pt-taps .pt-clock { position: absolute; width: 0; height: 0; }
.pt-ripple.pt-ripple-floor { border-color: var(--pt-grey-7); background: none; }
@keyframes pt-ripple { from { transform: scale(.5); opacity: .85; } 60% { opacity: .55; } to { transform: scale(var(--pt-s, 4.5)); opacity: 0; } }

/* the control card: a hairline frame while it rises, lit with a soft glow when live, one scan down it */
#visit.polish .control-host iframe { background: var(--pt-grey-2); }
/* while it moves: an accent hairline with a dark keyline outside it, so it reads over a bright photograph */
#visit.polish .control-host .pt-card { position: absolute; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(134, 225, 255, .95), 0 0 0 4px rgba(8, 9, 10, .6), 0 0 14px 4px rgba(134, 225, 255, .22); transition: box-shadow 500ms var(--pt-ease); }
#visit.polish .control-host .pt-card::before {
  /* corner ticks just outside the page */
  content: ''; position: absolute; inset: -10px; pointer-events: none; opacity: .95; filter: drop-shadow(0 0 1.5px rgba(8, 9, 10, .95)) drop-shadow(0 0 5px rgba(8, 9, 10, .6)); transition: opacity 500ms var(--pt-ease), inset 500ms var(--pt-ease);
  background:
    linear-gradient(var(--pt-accent), var(--pt-accent)) left top / 34px 3px, linear-gradient(var(--pt-accent), var(--pt-accent)) left top / 3px 34px,
    linear-gradient(var(--pt-accent), var(--pt-accent)) right top / 34px 3px, linear-gradient(var(--pt-accent), var(--pt-accent)) right top / 3px 34px,
    linear-gradient(var(--pt-accent), var(--pt-accent)) left bottom / 34px 3px, linear-gradient(var(--pt-accent), var(--pt-accent)) left bottom / 3px 34px,
    linear-gradient(var(--pt-accent), var(--pt-accent)) right bottom / 34px 3px, linear-gradient(var(--pt-accent), var(--pt-accent)) right bottom / 3px 34px;
  background-repeat: no-repeat;
}
#visit.polish .control-host .pt-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 500ms var(--pt-ease);
  box-shadow: 0 0 6px 1px rgba(134, 225, 255, .55), 0 0 32px 6px rgba(134, 225, 255, .38), 0 0 120px 24px rgba(134, 225, 255, .16);
}
#visit.polish .control-host .pt-card.live { box-shadow: 0 0 0 1px rgba(134, 225, 255, .78), 0 0 0 4px rgba(8, 9, 10, 0), 0 0 14px 4px rgba(134, 225, 255, 0); }
#visit.polish .control-host .pt-card.live::before { opacity: 1; inset: -14px; }
#visit.polish .control-host .pt-card.live::after { opacity: 1; animation: pt-breathe 6s ease-in-out 600ms infinite alternate; }
@keyframes pt-breathe { from { opacity: 1; } to { opacity: .55; } } /* the one idle: a 12 s cycle */
#visit.polish .control-host .pt-card-sweep { position: absolute; pointer-events: none; overflow: hidden; }
#visit.polish .control-host .pt-card-sweep.go::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none;
  background: linear-gradient(rgba(134, 225, 255, 0), rgba(134, 225, 255, .16) 82%, rgba(134, 225, 255, .55) 98%, rgba(134, 225, 255, 0));
  animation: pt-sweep 600ms cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes pt-sweep { from { transform: translateY(-120px); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(var(--pt-sweep-to, 1200px)); opacity: 0; } }

/* affordances, once each per visit: in 500 ms, held, out 500 ms */
.pt-aff-svg { overflow: visible; }
.pt-aff { opacity: 0; pointer-events: none; }
.pt-aff.in { opacity: 1; animation: pt-aff-in 500ms cubic-bezier(.2, .8, .2, 1) backwards; }
.pt-aff.out { opacity: 0; transition: opacity 500ms var(--pt-ease); }
@keyframes pt-aff-in { from { opacity: 0; } }
.pt-aff-arc { fill: none; stroke: var(--pt-grey-7); stroke-width: 2; filter: drop-shadow(0 0 2px rgba(8, 9, 10, .95)) drop-shadow(0 0 8px rgba(8, 9, 10, .6)); }
.pt-aff-chev { fill: none; stroke: var(--pt-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(8, 9, 10, .95)) drop-shadow(0 0 8px rgba(8, 9, 10, .6)); }
.pt-aff-chev.c1 { opacity: .6; } .pt-aff-chev.c2 { opacity: .3; }
.pt-aff-look.in .pt-aff-side { animation: pt-aff-spread 500ms cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes pt-aff-spread { from { transform: translateX(calc(var(--s) * -40px)) scale(.7); opacity: 0; } }
.pt-aff-ring { fill: none; stroke: var(--pt-accent); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(8, 9, 10, .8)); opacity: 0; }
.pt-aff-tap.in .pt-aff-ring { animation: pt-aff-ring 560ms cubic-bezier(.2, .7, .3, 1) forwards; }
.pt-aff-tap.in .pt-aff-ring.r1 { animation-delay: 360ms; }
@keyframes pt-aff-ring { from { transform: scale(.25); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

/* list-level "nav": false (the console): the list is one surface, not a sequence */
#visit.pt-no-nav .hud .hud-next, #visit.pt-no-nav .hud .hud-back,
#visit.pt-no-nav .pt-ticks, #visit.pt-no-nav .pt-track, #visit.pt-no-nav .pt-fill { display: none !important; }
/* the review readout "<list> <id> n/N" is shot-list chrome: off on a nav-less list unless ?nums=1 */
#visit.pt-no-nav:not(.pt-nums) .hud-num { display: none !important; }