/* ==========================================================
   PHFX 2026 - site.css
   Layout and components. Every adjustable value is a variable from theme.css.
   ----------------------------------------------------------
   |32| ............ 960 content ............ |32|
    ^ reserved (future)          scroll bar ^
   ========================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- buttons (same look as the live tools' EXPORT GUIDE / Reset) ---- */
.btn {
  background: color-mix(in srgb, var(--btnBg) calc(var(--btnFillOpacity) * 1%), transparent); border: var(--btnBorderW) solid var(--btnBorder); color: var(--btnText);
  font-family: var(--font); font-size: var(--btnSize); letter-spacing: calc(var(--btnTracking) * 0.01em);
  padding: var(--btnPadY) var(--btnPadX); border-radius: var(--btnRadius); cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

/* special buttons (Format Compare): Open-in-Shot-Prep boxes (.fmtLink) and Match buttons (.matchBtn), .one / .two */
.fmtLink {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; text-decoration: none;
  font-family: var(--font); font-size: var(--btnSize); letter-spacing: calc(var(--btnTracking) * 0.01em);
  background: color-mix(in srgb, var(--btnBg) calc(var(--fmtFillOpacity) * 1%), transparent); border: var(--btnBorderW) solid var(--btnBorder); padding: var(--btnPadY) 11px; border-radius: var(--btnRadius);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.fmtLink.one { color: var(--fmt1Text); }

.fmtLink.two { color: var(--fmt2Text); }

.fmtLink.one:hover, .fmtLink.one.hov { border-color: var(--fmt1HoverBorder); background: color-mix(in srgb, var(--fmt1HoverBg) calc(var(--fmtHoverFillOpacity) * 1%), transparent); }

.fmtLink.two:hover, .fmtLink.two.hov { border-color: var(--fmt2HoverBorder); background: color-mix(in srgb, var(--fmt2HoverBg) calc(var(--fmtHoverFillOpacity) * 1%), transparent); }

:is(.matchBtn, #ed .matchBtn) {
  flex: none; width: auto; height: 26px; padding: 0 10px; background: color-mix(in srgb, var(--btnBg) calc(var(--matchFillOpacity) * 1%), transparent); border: var(--btnBorderW) solid currentColor; border-radius: var(--btnRadius);
  font-family: var(--font); font-size: var(--btnSize); letter-spacing: calc(var(--btnTracking) * 0.01em); line-height: 1; cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

:is(.matchBtn, #ed .matchBtn).one { color: var(--match1Text); }

:is(.matchBtn, #ed .matchBtn).two { color: var(--match2Text); }

:is(.matchBtn, #ed .matchBtn).one:hover, :is(.matchBtn, #ed .matchBtn).one.hov { background: color-mix(in srgb, var(--match1HoverBg) calc(var(--matchHoverFillOpacity) * 1%), transparent); color: var(--match1HoverText); }

:is(.matchBtn, #ed .matchBtn).two:hover, :is(.matchBtn, #ed .matchBtn).two.hov { background: color-mix(in srgb, var(--match2HoverBg) calc(var(--matchHoverFillOpacity) * 1%), transparent); color: var(--match2HoverText); }

/* control slider (native range with an accent colour + value read-out) and drop down menu (select boxes) */
/* control sliders: custom track so the guide (background + border) and the fill are separately coloured.
   --pct (fill amount) is kept up to date by rnd.js. */
input[type=range].slider { --acc: var(--sliderAccent); --gBg: var(--sliderGuideBg); --gBd: var(--sliderGuideBorder); accent-color: var(--acc); cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; height: max(16px, calc(var(--sliderHandle) + 4px)); margin: 0; }

input[type=range].slider.two { --acc: var(--slider2Accent); --gBg: var(--slider2GuideBg); --gBd: var(--slider2GuideBorder); }

input[type=range].slider::-webkit-slider-runnable-track { height: var(--sliderGuideH); box-sizing: border-box; border: var(--sliderGuideBorderW) solid var(--gBd); border-radius: var(--sliderGuideRadius); background: linear-gradient(var(--acc), var(--acc)) 0 0 / var(--pct, 0%) 100% no-repeat, var(--gBg); }

input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--sliderHandle); height: var(--sliderHandle); border-radius: 50%; border: 0; background: var(--acc); margin-top: calc((var(--sliderGuideH) - 2 * var(--sliderGuideBorderW) - var(--sliderHandle)) / 2); }

input[type=range].slider::-moz-range-track { height: var(--sliderGuideH); box-sizing: border-box; border: var(--sliderGuideBorderW) solid var(--gBd); border-radius: var(--sliderGuideRadius); background: var(--gBg); }

input[type=range].slider::-moz-range-progress { height: calc(var(--sliderGuideH) - 2 * var(--sliderGuideBorderW)); border-radius: var(--sliderGuideRadius); background: var(--acc); }

input[type=range].slider::-moz-range-thumb { width: var(--sliderHandle); height: var(--sliderHandle); border-radius: 50%; border: 0; background: var(--acc); }

.sliderVal { font-family: var(--font); font-size: var(--sliderValSize); color: var(--sliderValue); }

.sliderVal.two { color: var(--slider2Value); }

:is(select.dd, #ed select.dd) {
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); color: var(--ddText);
  font-family: var(--font); font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX); border-radius: var(--ddRadius); cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

:is(select.dd, #ed select.dd):hover, :is(select.dd, #ed select.dd).hov { background: var(--ddHoverBg); border-color: var(--ddHoverBorder); color: var(--ddHoverText); }

select.dd option { background: var(--ddBg); color: var(--ddText); }

/* selected / highlighted item in the open list (Site Editor: Drop Down Menu > Selected Item Background).
   The gradient makes Chromium list boxes honour it; base-select browsers get a fully styled popup. */
/* the open list does not know what is selected (that shows in the closed box); only the item under the pointer / keyboard is styled
   (Site Editor: Drop Down Menu > Hover Item Background / Foreground) */
select.dd option:checked { background: var(--ddBg); color: var(--ddText); }

select.dd option:hover, select.dd option:focus-visible { background: var(--ddOptHoverBg) linear-gradient(0deg, var(--ddOptHoverBg), var(--ddOptHoverBg)); color: var(--ddOptHoverText); outline: none; }

@supports (appearance: base-select) {
  select.dd, select.dd::picker(select) { appearance: base-select; }
  select.dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  select.dd::picker(select) { background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); padding: 0; }
  select.dd option { padding: var(--ddPadY) var(--ddPadX); }
  select.dd option:checked { background: var(--ddBg); color: var(--ddText); }
  select.dd option:hover, select.dd option:focus-visible { background: var(--ddOptHoverBg); color: var(--ddOptHoverText); outline: none; }
  select.dd option::checkmark { display: none; }
}

   /* preview tile shows the hover item */

/* graphic button (Frame Guide icons): .gBtn, states :hover / .active */
:is(.gBtn, #ed .gBtn) {
  flex: none; width: auto; display: inline-flex; align-items: center; justify-content: center; line-height: 0; cursor: pointer;
  background: var(--gbBg); border: var(--gbBorderW) solid var(--gbBorder); color: var(--gbIcon);
  padding: var(--gbPad); border-radius: var(--gbRadius);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.gBtn svg { width: var(--gbIconSize); height: var(--gbIconSize); display: block; }

:is(.gBtn, #ed .gBtn):hover, :is(.gBtn, #ed .gBtn).hov { background: var(--gbHoverBg); border-color: var(--gbHoverBorder); color: var(--gbHoverIcon); }

:is(.gBtn, #ed .gBtn).active { background: var(--gbActiveBg); border-color: var(--gbActiveBorder); color: var(--gbActiveIcon); }

/* symbol button (Rotate and similar): .sBtn, states :hover / .active (Site Editor: Symbol Buttons) */
:is(.sBtn, #ed .sBtn) {
  flex: none; width: auto; display: inline-flex; align-items: center; justify-content: center; line-height: 0; cursor: pointer;
  background: var(--syBg); border: var(--syBorderW) solid var(--syBorder); color: var(--syIcon);
  padding: var(--syPad); border-radius: var(--syRadius);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.sBtn svg { width: var(--syIconSize); height: var(--syIconSize); display: block; }

:is(.sBtn, #ed .sBtn):hover, :is(.sBtn, #ed .sBtn).hov { background: var(--syHoverBg); border-color: var(--syHoverBorder); color: var(--syHoverIcon); }

:is(.sBtn, #ed .sBtn).active { background: var(--syActiveBg); border-color: var(--syActiveBorder); color: var(--syActiveIcon); }

.btn:hover, .btn.hov { background: color-mix(in srgb, var(--btnHoverBg) calc(var(--btnHoverFillOpacity) * 1%), transparent); border-color: var(--btnHoverBorder); color: var(--btnHoverText); }

.btn:active, .btn.act { background: color-mix(in srgb, var(--btnActiveBg) calc(var(--btnActiveFillOpacity) * 1%), transparent); border-color: var(--btnActiveBorder); color: var(--btnActiveText); }

      /* pressed: wins over hover */
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;              /* the page itself never scrolls */
}

/* ---------- canvas ---------- */
#canvas {
  width: var(--canvasW);
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.content {
  width: var(--contentW);
  margin-left: var(--gutter);
}

.rule { background: var(--ruleColor); }

/* ---------- site header ---------- */
#siteHeader { flex: 0 0 auto; position: relative; z-index: 200; }

   /* menu drops over the page */
#siteTitle {
  height: var(--hdrH);
  line-height: var(--hdrH);
  font-size: var(--hdrFontSize);
  color: var(--hdrTextColor);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-left: -2px;             /* optical alignment of the "M" */
  padding: 0 var(--hdrPadX);     /* edge padding (left + right) */
  user-select: none;
  white-space: nowrap;           /* (no overflow clip: the MENU dropdown hangs out of this row) */
}

#hdrRule {
  height: var(--hdrRuleH);
  margin-top: var(--hdrRuleTop);
  margin-bottom: var(--hdrRuleBottom);
}

/* ---------- site menu (MENU dropdown) ----------
   Same behaviour as the phfx.com compass menu: opens on hover, click / tap
   toggles it, Escape or a click elsewhere closes it, and Still / Tools carry
   a chevron that opens a flyout submenu.                                   */
#siteTitle .dot, #sectionBar h1 .dot { color: var(--dotColor); }

/* Site Header Spacing: the header's " \2022  " keeps its spaces in the HTML, so the span's own text is zeroed and the dot is redrawn
   with exact margins (no flash, no HTML edits). Breadcrumb dots are tidied by rnd.js and spaced the same way. */
#siteTitle .dot { font-size: 0; letter-spacing: 0; line-height: 0; display: inline-block; margin: 0 var(--hdrDotGapR) 0 var(--hdrDotGapL);
  /* line-height 0: a bigger dot never pushes the text; the second term keeps a scaled dot centred where the normal one sits (~.33em up) */
  transform: translateY(calc(var(--hdrDotNudge) + (var(--hdrDotScale) - 100) / 100 * var(--hdrFontSize) * .33)); }

#siteTitle .dot::before { content: "\2022"; font-size: calc(var(--hdrFontSize) * var(--hdrDotScale) / 100); letter-spacing: 0; }

#sectionBar h1 .dot { margin: 0 var(--secDotGapR) 0 var(--secDotGapL); }

#siteTitle .hdrName { color: var(--hdrTextColor); }

#siteTitle a.wordmark { color: var(--hdrPhfxColor); text-decoration: none; transition: color .18s ease; }

#siteTitle a.wordmark:hover { color: var(--linkHover); }

.menu-nav { position: relative; display: inline-block; }

.menu-btn {
  display: inline-block;
  height: var(--hdrH);
  line-height: var(--hdrH);
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--linkInactive);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .18s ease;
}

.menu-nav:hover .menu-btn { color: var(--linkHover); }

.menu-nav.open .menu-btn { color: var(--linkActive); }

.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu-panel {
  /* top edge lines up with the TOP edge of the header rule (it overlaps the rule); left edge lines up with the rule's left end */
  position: absolute;
  top:  calc(100% + var(--hdrRuleTop) + var(--menuGapY, 0px));   /* 0 = panel top on the top edge of the rule; + moves it down, - up */
  left: calc(2px - var(--hdrPadX));
  min-width: 240px;
  background: color-mix(in srgb, var(--menuBg) calc(var(--menuFillOpacity) * 1%), transparent);
  border: var(--menuBorderW) solid var(--menuBorderColor);
  padding: var(--menuPad) 0;
  border-radius: var(--menuRadius);
  /* grows down out of the header rule (and folds back up into it): a clip that opens from the top edge, see the keyframes below */
  visibility: hidden; transition: visibility 0s linear calc(var(--menuGrow, .25) * 1s), border-color calc(var(--layersSpeed, .6) * 1s) cubic-bezier(.65, 0, .35, 1);
  animation: menuShrink calc(var(--menuGrow, .25) * 1s) cubic-bezier(.4, 0, .6, 1) both;
  z-index: 50;
}

.menu-nav:hover .menu-panel,
.menu-nav.open .menu-panel { visibility: visible; transition-delay: 0s; animation: menuGrow calc(var(--menuGrow, .25) * 1s) cubic-bezier(.2, .7, .2, 1) both; }

.menu-nav.open .menu-panel { border-color: var(--menuBorderActive); }

   /* locked open by a click (fades with the menu icon) */

/* invisible hover bridge so moving from MENU down to the panel doesn't close it */
.menu-nav::after {
  content: "";
  position: absolute; left: 0; top: 100%;
  width: 240px;
  height: calc(var(--hdrRuleTop) + var(--hdrRuleH) + max(0px, var(--menuGapY, 0px)));
}

.menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 19px;
  width: 100%;
  padding: 10px 18px;
  font-family: var(--font); font-size: var(--menuLinkSize); font-weight: 400;
  line-height: 1.3;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--menuText); background: none; border: 0; text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.menu-link:hover, .menu-link:focus-visible { background: color-mix(in srgb, var(--menuHoverBg) calc(var(--menuHoverFillOpacity) * 1%), transparent); color: var(--menuHoverText); outline: none; }

/* Still / Tools: label navigates, chevron toggles the flyout */
.menu-group { position: relative; }

.menu-parent-row { display: flex; align-items: stretch; transition: background .15s ease; }

.menu-parent-row:hover { background: color-mix(in srgb, var(--menuHoverBg) calc(var(--menuHoverFillOpacity) * 1%), transparent); }

.menu-group.sub-open > .menu-parent-row { background: color-mix(in srgb, var(--menuActiveBg) calc(var(--menuHoverFillOpacity) * 1%), transparent); }

.menu-parent-link { flex: 1 1 auto; min-width: 0; }

.menu-parent-row:hover .menu-parent-link { background: none; color: var(--menuHoverText); }

.menu-group.sub-open > .menu-parent-row .menu-parent-link { background: none; color: var(--menuActiveText); }

.menu-chev-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  padding: 10px 18px 10px 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--menuText); font: inherit; font-size: var(--menuArrowSize); line-height: 1;
  transition: color .15s ease;
}

.menu-parent-row:hover .menu-chev-btn { color: var(--menuHoverText); }

.menu-group.sub-open > .menu-parent-row .menu-chev-btn { color: var(--menuActiveText); }

.menu-sub {
  position: absolute; left: 100%; top: calc(-1px - var(--subPad));
  margin-left: calc(var(--menuBorderW) + var(--subGapX, 0px));   /* 0 = the sub-menu's left edge meets the menu's outer right edge; negative overlaps the borders */
  min-width: 210px;
  background: color-mix(in srgb, var(--menuBg) calc(var(--menuFillOpacity) * 1%), transparent);
  border: var(--subBorderW) solid var(--subBorderColor);
  padding: var(--subPad) 0;
  border-radius: var(--menuRadius);
  /* grows out of the menu's right edge (and folds back into it) */
  visibility: hidden; transition: visibility 0s linear calc(var(--subGrow, .2) * 1s);
  animation: subShrink calc(var(--subGrow, .2) * 1s) cubic-bezier(.4, 0, .6, 1) both;
  z-index: 51;
}

/* first / last row follow the panel's rounded corners (matters when the padding is small) */
.menu-panel > :first-child, .menu-sub > :first-child { border-top-left-radius: max(0px, calc(var(--menuRadius) - var(--menuBorderW))); border-top-right-radius: max(0px, calc(var(--menuRadius) - var(--menuBorderW))); }

.menu-panel > :last-child, .menu-sub > :last-child { border-bottom-left-radius: max(0px, calc(var(--menuRadius) - var(--menuBorderW))); border-bottom-right-radius: max(0px, calc(var(--menuRadius) - var(--menuBorderW))); }

.menu-group:hover > .menu-sub,
.menu-group.sub-open > .menu-sub { visibility: visible; transition-delay: 0s; animation: subGrow calc(var(--subGrow, .2) * 1s) cubic-bezier(.2, .7, .2, 1) both; }

/* hit shields (rnd.js): invisible, unclipped copies of the menu / sub-menu boxes, shown while that menu shows, so the pointer
   stays "on the menu" over its whole area while the grow animation is still revealing it (a link behind can't take the hover) */
.menu-shield { position: absolute; visibility: hidden; background: transparent; }

.menu-shield-panel { z-index: 49; }

                                     /* just under the panel (50) */
.menu-shield-sub   { z-index: 50; }

                                     /* just under the sub-menu (51) */
.menu-nav:hover > .menu-shield-panel, .menu-nav.open > .menu-shield-panel,
.menu-group:hover > .menu-shield-sub, .menu-group.sub-open > .menu-shield-sub { visibility: visible; }

/* The clip reaches 60px past the sides (and bottom) so nothing at the edges is cut while it grows, then lets go entirely (none) so an open
   sub-menu is never clipped by its parent. Durations: Site Editor > Header Menu. */
@keyframes menuGrow   { from { clip-path: inset(0 -60px 100% -60px); } 99.9% { clip-path: inset(0 -60px -60px -60px); } to { clip-path: none; } }

@keyframes menuShrink { from { clip-path: inset(0 -60px -60px -60px); } to { clip-path: inset(0 -60px 100% -60px); } }

@keyframes subGrow    { from { clip-path: inset(-60px 100% -60px 0); } 99.9% { clip-path: inset(-60px -60px -60px 0); } to { clip-path: none; } }

@keyframes subShrink  { from { clip-path: inset(-60px -60px -60px 0); } to { clip-path: inset(-60px 100% -60px 0); } }

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-sub, .menu-nav:hover .menu-panel, .menu-nav.open .menu-panel, .menu-group:hover > .menu-sub, .menu-group.sub-open > .menu-sub { transition: none; animation: none; }
}

/* ---------- content header (section bar) ---------- */
#sectionBar {
  flex: 0 0 auto;
  height: var(--secH);
  background: var(--panel);
  border-left: var(--secRuleW) solid var(--ruleColor);
  border-radius: var(--secRadius);
  display: flex;
  align-items: center;
  padding: 0 var(--secPadX);     /* edge padding (left + right) */
  overflow: hidden;
}

/* Page tab > Content Header: Hide. The style query hides it before rnd.js runs (no flash); rnd.js also sets [hidden] + body.noSecBar */
#sectionBar[hidden] { display: none; }

@container style(--contentHeader: hide) { #sectionBar { display: none; } }

/* with the bar gone the content takes its place: it sits "Pad below rule" under the header rule, exactly where the bar would start
   (the bar's own "Pad below content header" goes with it) */
body.noSecBar #scrollRegion { margin-top: 0; }

@container style(--contentHeader: hide) { #scrollRegion { margin-top: 0; } }

body.noSecBar #scrollGutter { --railTop: calc(var(--hdrRuleBottom) + var(--hdrRuleH) / 2); }

#sectionBar h1 {
  font-size: var(--secFontSize);
  color: var(--secTextColor);
  font-weight: 400;
  white-space: nowrap;
}

#sectionBar h1 a { color: var(--linkInactive); text-decoration: none; transition: color .18s ease; }

#sectionBar h1 a:hover, #sectionBar h1 a:focus-visible { color: var(--linkHover); outline: none; }

#sectionBar h1 .here { color: var(--pageTitleColor); }

      /* "you are here" */

/* ---------- scroll region ---------- */
#scrollRegion {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  margin-top: var(--secPadBottom);   /* fixed gap: images clip here, not at the bar */
}

#scroller {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;         /* Firefox */
  overscroll-behavior: contain;
}

#scroller::-webkit-scrollbar { display: none; }

#gallery { padding: 0 0 32px; }

figure.plate { margin-bottom: var(--stripGap, 40px); }

figure.plate img { cursor: zoom-in; }

figure.plate:last-child { margin-bottom: 0; }

figure.plate img {
  display: block;
  width: 100%;
  height: auto;
  background: #111;
}

figure.plate figcaption {
  display: flex;
  justify-content: flex-start;
  gap: 18px;
  font-size: var(--bodyFontSize);
  line-height: max(24px, 1.8em);
  color: var(--bodyTextColor);
}

figure.plate figcaption .num { font-variant-numeric: tabular-nums; }

/* ---------- custom scroll bar (right gutter) ----------
   Style is chosen with data-sb on #scrollGutter
   (Site Editor > Scroll Bar):
     stub = Rule Stub + Line Thumb
     line = Triangle + Line Thumb
     triAlign = Triangle Rule Aligned + Line Thumb
   The whole bar is hidden (visibility) when the page does not
   overflow; the 32px gutter stays reserved.                    */
#scrollGutter {
  /* distances from the scroll region's edges to the centre of each accent rule */
  --railTop:    calc(var(--secH) + var(--secPadBottom) + var(--hdrRuleBottom) + var(--hdrRuleH) / 2);
  --railBottom: calc(var(--ftrRuleTop) + var(--ftrRuleH) / 2);
  --capH:       24px;            /* click target height of each end cap */
  /* distance from the scroll region's edge to the centre of each end cap (default: the rule centres) */
  --capTopC:    var(--railTop);
  --capBotC:    var(--railBottom);
  --stubW:      18px;            /* rule stub width */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--gutter);
}

#scrollGutter.hidden { visibility: hidden; pointer-events: none; opacity: 0; transition: none; }

   /* not needed: gone at once (no fade-out, so it never flashes on load) */
#scrollGutter:not(.hidden) { transition: opacity calc(var(--contentFadeIn, 0) * 1s) ease; }

   /* a scroll bar that appears after load (content grew) fades in like the content */

/* rail: centre of header rule -> centre of footer rule */
#scrollGutter .rail {
  position: absolute;
  top:    calc(var(--railTop)    * -1);
  bottom: calc(var(--railBottom) * -1);
  left: calc((var(--gutter) - var(--guideW)) / 2);   /* centred in the gutter */
  width: var(--guideW);
  background: var(--sbGuideColor);
}

/* end caps: centred on the header / footer rules; click = previous / next image */
#scrollGutter .cap {
  position: absolute;
  left: 0;
  width: var(--gutter);
  height: var(--capH);
  cursor: pointer;
  z-index: 1;
}

#scrollGutter .cap.top    { top:    calc(var(--capTopC) * -1 - var(--capH) / 2); }

#scrollGutter .cap.bottom { bottom: calc(var(--capBotC) * -1 - var(--capH) / 2); }

#scrollGutter .cap::before,
#scrollGutter .cap::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

/* Triangle + Line Thumb: a small bg-coloured patch cuts the rail, then the triangle */
#scrollGutter[data-sb="line"] .cap::before { width: 16px; height: 14px; background: var(--bg); }

#scrollGutter[data-sb="line"] .cap::after,
#scrollGutter[data-sb="triAlign"] .cap::after  { border-left: 5px solid transparent; border-right: 5px solid transparent; }

#scrollGutter[data-sb="line"] .cap.top::after,
#scrollGutter[data-sb="triAlign"] .cap.top::after    { border-bottom: 7px solid var(--sbTriColor); }

#scrollGutter[data-sb="line"] .cap.bottom::after,
#scrollGutter[data-sb="triAlign"] .cap.bottom::after { border-top:    7px solid var(--sbTriColor); }

/* Triangle Rule Aligned + Line Thumb: the rail runs from the TOP edge of the header rule to the
   BOTTOM edge of the footer rule; the triangles sit outside those ends (up-arrow above the header
   rule, down-arrow below the footer rule). Each end has its own spacing: the top one is set by
   Site Header > "Pad below rule" (--hdrRuleBottom), the bottom one by Site Footer > "Pad below rule"
   (--ftrRuleBottom). */
#scrollGutter[data-sb="triAlign"] {
  --capTopC: calc(var(--railTop)    + var(--hdrRuleH) / 2 + var(--hdrRuleBottom) + 3.5px);   /* 3.5px = half the 7px triangle */
  --capBotC: calc(var(--railBottom) + var(--ftrRuleH) / 2 + var(--ftrRuleBottom) + 3.5px);
}

#scrollGutter[data-sb="triAlign"] .rail {
  top:    calc((var(--railTop)    + var(--hdrRuleH) / 2) * -1);
  bottom: calc((var(--railBottom) + var(--ftrRuleH) / 2) * -1);
}

/* Rule Stub + Line Thumb: the rules continue into the gutter as short orange stubs
   (positioned without a vertical transform so they land on whole pixels) */
#scrollGutter[data-sb="stub"] .cap::after { width: var(--stubW); background: var(--sbColor); }

#scrollGutter[data-sb="stub"] .cap.top::after    { height: var(--hdrRuleH); top: calc(50% - var(--hdrRuleH) / 2); transform: translateX(-50%); }

#scrollGutter[data-sb="stub"] .cap.bottom::after { height: var(--ftrRuleH); top: calc(50% - var(--ftrRuleH) / 2); transform: translateX(-50%); }

#scrollGutter .cap:hover::after { filter: brightness(1.3); }

/* thumb: orange line (width = --thumbW), length proportional to the visible page (JS sets top + height) */
#thumb {
  position: absolute;
  top: 0;
  left: calc((var(--gutter) - var(--thumbW)) / 2);   /* centred on the rail */
  width: var(--thumbW);
  background: var(--sbColor);
  cursor: grab;
  z-index: 2;
}

#thumb::before { content: ""; position: absolute; inset: 0 -8px; }

   /* bigger grab area */
#thumb:hover, #thumb.drag { filter: brightness(1.25); }

#thumb.drag { cursor: grabbing; }

/* ---------- site footer ---------- */
#siteFooter { flex: 0 0 auto; }

#ftrRule {
  height: var(--ftrRuleH);
  margin-top: var(--ftrRuleTop);
  margin-bottom: var(--ftrRuleBottom);
}

#copyright {
  height: var(--ftrH);
  line-height: var(--ftrH);
  text-align: center;
  font-size: var(--ftrFontSize);
  color: var(--textDim);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- layout guides (press G) ---------- */
#guides {
  display: none;
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  width: var(--canvasW);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 100;
  outline: 1px dashed rgba(0,200,255,.5);
}

body.showGuides #guides { display: block; }

#guides .g {
  position: absolute; top: 0; bottom: 0;
  width: var(--gutter);
  background: rgba(0,200,255,.08);
}

#guides .left  { left: 0;  border-right: 1px dashed rgba(0,200,255,.5); }

#guides .right { right: 0; border-left:  1px dashed rgba(0,200,255,.5); }

/* ---------- view switch (content header, right) ---------- */
#sectionBar { justify-content: space-between; }

/* Panorama index: category filter sits in the content header, right after the title */
#sectionBar .cats { display: flex; align-items: center; gap: 0 16px; margin-left: 24px; min-width: 0; white-space: nowrap; }

#sectionBar .catLink {
  background: none; border: 0; padding: 0; font: inherit; font-size: calc(var(--secFontSize) - 2px);
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  color: var(--linkInactive); transition: color .18s ease;
}

#sectionBar .catLink:hover { color: var(--linkHover); }

#sectionBar .catLink.active, #sectionBar .catLink.active:hover { color: var(--linkActive); }

#sectionBar .cats { position: relative; }

/* Category underline: one line that slides and stretches (translate + scaleX, so it stays on the GPU) to the active category. rnd.js/pages.js set --lx --ly --lw */
#sectionBar .catLine, .abTabs .catLine {
  position: absolute; left: 0; top: 0; width: calc(var(--lw, 0) * 1px); height: var(--catLineH); border-radius: var(--catLineRadius); background: var(--catLineColor); pointer-events: none;
  transform: translate(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px + var(--catLineGap)));
  --curve: cubic-bezier(
    calc(.3333 + .3167 * var(--catLineEase) / 100), calc(.3333 - .3333 * var(--catLineEase) / 100),
    calc(.6667 - .3167 * var(--catLineEase) / 100), calc(.6667 + .3333 * var(--catLineEase) / 100));
  transition: transform calc(var(--catLineSpeed) * 1s) var(--curve), width calc(var(--catLineSpeed) * 1s) var(--curve), opacity .2s ease, background-color .18s ease;
}

#sectionBar .catLine.snap, .abTabs .catLine.snap { transition: none; }

@media (prefers-reduced-motion: reduce) { #sectionBar .catLine, .abTabs .catLine { transition: none; } }

#sectionBar .catLink:focus-visible { outline: 1px solid var(--linkHover); outline-offset: 3px; }

#sectionBar #revealTitlesBtn { flex: none; margin-left: auto; }

   /* left of Copy Share URL */
#sectionBar #revealTitlesBtn:not([hidden]) + #shareBtn { margin-left: var(--secBtnGap, 8px); }

#sectionBar #shareBtn { flex: none; margin-left: auto; }

     /* Copy Share URL: right side of the content header */
#sectionBar #viewBtns { margin-left: var(--secBtnGap, 8px); }

.btn[hidden] { display: none; }

#viewBtns { display: flex; gap: var(--secBtnGap, 8px); margin-right: 0; }

   /* right edge sits exactly on the Content Header Edge Padding */
/* the Strip / Lightbox buttons wear the Graphic Button style (.gBtn, set in the Site Editor) */
#viewBtns button { flex: none; }

/* ---------- lightbox view: 8-across square-cropped grid ---------- */
#grid { display: none; padding: 0 0 32px; }

#canvas[data-view="lightbox"] #grid { display: grid; grid-template-columns: repeat(var(--thumbsPerRow, 8), 1fr); gap: var(--gridGap); }

#canvas[data-view="lightbox"] #gallery { display: none; }

.thumb-cell { position: relative; aspect-ratio: var(--thumbAspect, 1 / 1); overflow: hidden; border-radius: var(--thumbRadius, 0px); cursor: pointer; background: #111; }

.thumb-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }

.thumb-cell::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.55); opacity: 0; transition: opacity .15s; z-index: 1;
}

.thumb-cell .n {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: var(--bodyFontSize); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .15s;
}

.thumb-cell:hover::before, .thumb-cell:hover .n { opacity: 1; }

/* ---------- lightbox overlay (covers the canvas) ---------- */
/* covers the whole browser window (not just the 1024 canvas), above the Site Editor */
#lb { position: fixed; inset: 0; z-index: 1100; background: color-mix(in srgb, var(--focusBg, #000000) calc(var(--focusOpacity, 85) * 1%), transparent); display: flex; align-items: center; justify-content: center; }

#lb[hidden] { display: none; }

/* frame = top bar (counter + X) / picture / bottom bar (description); JS sizes the picture to the window,
   so the bars sit right against the picture's top and bottom edges and are as wide as it is */
#lbFrame { display: flex; flex-direction: column; }

#lbImg { display: block; max-width: none; max-height: none; }

#lbTop, #lbCap {
  min-height: 28px; box-sizing: content-box; flex: 0 0 auto;      /* bar = 28px line + top/bottom padding */
  padding: var(--focusPadY) var(--focusPadX);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text); font-size: var(--bodyFontSize); font-variant-numeric: tabular-nums;
}

#lbCap { justify-content: flex-start; gap: 18px; }

#lb button { position: absolute; background: none; border: 0; color: var(--focusBtnOff); cursor: pointer; font-family: inherit; transition: color .15s ease; }

#lb button:hover { color: var(--focusBtnHover); }

#lb button:active { color: var(--focusBtnActive); }

#lb #lbClose { position: static; font-size: var(--focusCloseSize); line-height: 1; padding: 0; }

#lbPrev, #lbNext { top: 50%; transform: translateY(-50%); font-size: var(--focusArrowSize); width: calc(var(--focusArrowSize) * 1.17); height: calc(var(--focusArrowSize) * 2); }

#lbPrev { left: 4px; }

#lbNext { right: 4px; }

/* ---------- Templates page + placeholder pages ---------- */
#pageBody { padding: 0 0 32px; color: var(--bodyTextColor); font-size: var(--bodyFontSize); }

.tpl-intro { line-height: 1.8; margin-bottom: 14px; }

.tpl-intro a, .tpl-list a { color: inherit; text-decoration: none; }

.tpl-intro a:hover, .tpl-list a:hover { color: var(--linkHover); }

.tpl-list { list-style: none; margin-top: 18px; }

.tpl-list li { display: flex; align-items: baseline; gap: 18px; line-height: max(28px, 2.1em); border-bottom: 1px solid var(--sbGuideColor); }

.tpl-list .num { font-variant-numeric: tabular-nums; color: var(--textDim); width: 2.2em; }

.tpl-list a { flex: 1 1 auto; font-size: calc(var(--bodyFontSize) + 2px); }

.tpl-list .st { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .08em; text-transform: uppercase; }

.tpl-list .st.built { color: var(--accent); }

.tpl-list .st.refined { color: var(--linkActive); }

.tpl-list li.tpl-sep { display: block; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid var(--ruleColor); color: var(--heroSite); font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Still index: gallery cards ---------- */
body[data-page="stillIndex"] #pageBody, body[data-page="panoramaIndex"] #pageBody { padding: 0 0 32px; }

.cards { display: grid; grid-template-columns: repeat(var(--thumbsPerRow, 3), 1fr); gap: var(--gridGap); }

.card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--thumbAspect, 2 / 1);
  border-radius: var(--thumbRadius, 0px);
  background: #111; text-decoration: none;
}

.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.cardShade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .35s ease; }

.card:hover .cardShade, .card:focus-visible .cardShade { opacity: calc(var(--cardDim, 65) / 100); }

.cardName, .cardSupra, .cardInfra {
  position: absolute; left: 0; right: 0; padding: 0 1rem; text-align: center; pointer-events: none;
  color: var(--cardTitleColor, #ebd081);
  opacity: 0; transition: opacity .35s ease;
}

.cardName  { top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--bodyFontSize) + 2px); letter-spacing: .04em; }

.cardSupra { bottom: 50%; margin-bottom: 1.1em; font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .12em; text-transform: uppercase; }

.cardInfra { top: 50%; margin-top: 1.1em; font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .12em; }

.card:hover .cardName, .card:hover .cardSupra, .card:hover .cardInfra,
.card:focus-visible .cardName, .card:focus-visible .cardSupra, .card:focus-visible .cardInfra { opacity: 1; }

/* Reveal Titles on: inverted - titles and dim always on, the card under the pointer clears both */
.cards.reveal-titles .cardShade { opacity: calc(var(--cardDim, 65) / 100); }

.cards.reveal-titles .cardName, .cards.reveal-titles .cardSupra, .cards.reveal-titles .cardInfra { opacity: 1; }

.cards.reveal-titles .card:hover .cardShade, .cards.reveal-titles .card:focus-visible .cardShade { opacity: 0; }

.cards.reveal-titles .card:hover .cardName, .cards.reveal-titles .card:hover .cardSupra, .cards.reveal-titles .card:hover .cardInfra,
.cards.reveal-titles .card:focus-visible .cardName, .cards.reveal-titles .card:focus-visible .cardSupra, .cards.reveal-titles .card:focus-visible .cardInfra { opacity: 0; }

.card:focus-visible { outline: 2px solid var(--linkHover); outline-offset: -2px; }

/* ---------- Panorama page: viewer frame + info (ported from the live panorama view) ---------- */
body[data-page="panoramaPage"] #pageBody { padding: 0 0 32px; }

.pano-viewer-frame { position: relative; width: 100%; aspect-ratio: var(--panoAspect, 3 / 2); background: #000; overflow: hidden; cursor: grab; touch-action: none; border-radius: var(--thumbRadius, 0px); }

.pano-viewer-frame:active { cursor: grabbing; }

.pano-viewer-frame:fullscreen { aspect-ratio: auto; border-radius: 0; }

.pano-viewer-frame canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }

.pano-viewer-frame.is-ready canvas { opacity: 1; }

.pano-viewer-frame[hidden], .pano-loading[hidden], .pano-context-menu[hidden], .panorama-view-meta[hidden], .pano-message[hidden] { display: none; }

.pano-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--focusBg, #232323); pointer-events: none; }

.pano-spinner { width: 42px; height: 42px; border: 2px solid var(--btnBorder); border-top-color: var(--heroSite); border-radius: 50%; animation: pano-spin .9s linear infinite; transition: border-color .3s ease, box-shadow .3s ease; }

.pano-spinner.is-done { border-color: var(--heroSite); animation: none; box-shadow: 0 0 12px rgba(235,208,129,.35), 0 0 4px var(--heroSite); }

@keyframes pano-spin { to { transform: rotate(360deg); } }

.pano-loading-label { font-size: var(--panoLoadSize); letter-spacing: .14em; text-transform: uppercase; color: var(--heroSite); }

.pano-fs-btn, .pano-info-btn {
  position: absolute; top: 10px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  background: rgba(0,0,0,.45); border: 1px solid var(--btnBorder); color: #e6e6e6; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.pano-fs-btn { right: 10px; }

.pano-info-btn { left: 10px; }   /* square, like the fullscreen button */

.pano-fs-btn:hover, .pano-info-btn:hover { color: var(--heroSite); border-color: var(--heroSite); }

.pano-info-btn.active { color: var(--heroSite); border-color: var(--heroSite); background: rgba(235,208,129,.12); }

.pano-fs-btn svg { fill: currentColor; }

.pano-fs-btn svg, .pano-info-btn svg { display: block; }

.pano-info-btn[hidden] { display: none; }

.pano-hint { position: absolute; bottom: 10px; left: 12px; z-index: 6; font-size: var(--panoHintSize); letter-spacing: .04em; color: #e6e6e6; opacity: .85; transition: opacity .6s ease; pointer-events: none; }

.pano-hud-topleft { position: absolute; top: 10px; left: 10px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }

.pano-format-name-readout, .pano-focal-readout, .pano-orient-readout, .pano-hide-info-btn {
  font-size: var(--panoHudSize); letter-spacing: .04em; color: var(--heroSite); background: rgba(0,0,0,.45); border: 1px solid var(--btnBorder); padding: 5px 9px; text-align: left;
}

.pano-hide-info-btn { color: #e6e6e6; cursor: pointer; pointer-events: auto; transition: color .18s ease, border-color .18s ease; }

.pano-hide-info-btn:hover { color: var(--heroSite); border-color: var(--heroSite); }

.pano-format-name-readout[hidden], .pano-focal-readout[hidden], .pano-orient-readout[hidden], .pano-hide-info-btn[hidden] { display: none; }

.pano-context-menu { position: absolute; z-index: 7; min-width: 180px; background: color-mix(in srgb, var(--menuBg) calc(var(--menuFillOpacity) * 1%), transparent); border: 1px solid var(--subBorderColor); }

.pano-context-item { display: block; width: 100%; text-align: left; padding: 9px 16px; font-size: var(--panoMenuSize); letter-spacing: .03em; color: var(--menuText); background: none; border: 0; border-top: 1px solid var(--subBorderColor); border-radius: 0; cursor: pointer; transition: background .15s ease, color .15s ease; }

.pano-context-item:first-child { border-top: 0; }

.pano-context-item:hover { background: color-mix(in srgb, var(--menuHoverBg) calc(var(--menuHoverFillOpacity) * 1%), transparent); color: var(--menuHoverText); }

.pano-context-item.active { color: var(--menuActiveText); }

.pano-context-divider { border-top: 1px solid var(--subBorderColor); margin: 0; }

/* every item already has a line above it, so the one right after a group divider drops its own: one line between groups,
   spaced like every other row, not two */
.pano-context-divider + .pano-context-item { border-top: 0; }

.panorama-view-meta { display: flex; flex-direction: column; gap: var(--surfaceGap, 12px); margin-top: var(--panoMetaGap, 16px); }

.panorama-view-meta > .surf { margin-bottom: 0; }

   /* one row: Date / Location / Acquisition Height (only the filled-in ones, sharing the width) */
.panoInfo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }

.panoInfo[hidden], .panoInfoCell[hidden] { display: none; }

.panoInfoCell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.panoInfoLabel { font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .1em; text-transform: uppercase; color: var(--textDim); }

.panoInfoVal { font-size: var(--bodyFontSize); letter-spacing: .02em; color: var(--bodyTextColor); overflow-wrap: anywhere; }

.panorama-masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }

.panorama-masthead-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.panorama-masthead-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.panorama-view-title { font-size: calc(var(--secFontSize) + 2px); font-weight: 400; color: var(--pageTitleColor); letter-spacing: .05em; }

.panorama-subtitle { font-size: var(--bodyFontSize); color: var(--textDim); letter-spacing: .02em; }

.panorama-acq-date, .panorama-acq-height { font-size: var(--bodyFontSize); color: var(--textDim); letter-spacing: .04em; white-space: nowrap; }

.panorama-description { font-size: calc(var(--bodyFontSize) + 1px); line-height: 1.7; color: var(--bodyTextColor); white-space: pre-line; }

.pano-message { padding: 40px 0; text-align: center; color: var(--textDim); }

/* (scoped to body.rndToolMock by build_css.py: the R&D picture of the tool; the real tool pages use tools.css, and some class names are the same) */
/* ---------- Tools - Page: Format Compare layout (rough prototype, from the live tool) ---------- */
body[data-page="toolPage"] #pageBody { padding: 0 0 32px; display: flex; flex-direction: column; gap: var(--surfaceGap, 12px); }

body.rndToolMock .fc-deck,
body.rndToolMock .fc-spec { border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); background: var(--surface); }

body.rndToolMock .fc-deck { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

body.rndToolMock .fc-grid { display: grid; grid-template-columns: 1fr var(--surfaceInnerBorderW) 1fr; gap: 16px; }

body.rndToolMock .fc-divider { background: var(--surfaceBorder); width: var(--surfaceInnerBorderW); }

body.rndToolMock .fc-anamorphic { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: var(--surfaceInnerBorderW) solid var(--surfaceBorder); }

body.rndToolMock .fc-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

body.rndToolMock .fc-head { display: flex; align-items: center; gap: 8px; min-height: 26px; }

body.rndToolMock .fc-head .matchBtn { margin-left: auto; }

body.rndToolMock .fc-title { font-size: var(--fcTitleSize); letter-spacing: .04em; color: var(--heroSite); }

body.rndToolMock .fc-title.two { color: var(--heroFoil); }

body.rndToolMock .fc-sub { margin-left: auto; font-size: var(--fcTextSize); letter-spacing: .06em; text-transform: uppercase; color: var(--textDim); }

body.rndToolMock .fc-fields { display: flex; gap: 8px; }

body.rndToolMock .fc-fields label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

body.rndToolMock .fc-fields label > span,
body.rndToolMock .fc-focal > span { font-size: var(--fcLabelSize); letter-spacing: .08em; text-transform: uppercase; color: var(--textDim); }

body.rndToolMock .fc-fields select.dd { width: 100%; }

body.rndToolMock .fc-extract { display: flex; align-items: center; gap: 12px; }

body.rndToolMock .fc-slide { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

body.rndToolMock .fc-slide .slider { flex: 1 1 auto; min-width: 0; }

body.rndToolMock .fc-slide .sliderVal { flex: 0 0 38px; text-align: right; }

body.rndToolMock .fc-extract select.dd { flex: 0 0 140px; }

body.rndToolMock .fc-focalrow { display: flex; align-items: flex-end; gap: 12px; }

body.rndToolMock .fc-focal { flex: 1 1 50%; display: flex; align-items: center; gap: 10px; min-width: 0; }

body.rndToolMock .fc-focal > span { white-space: nowrap; }

body.rndToolMock .ti { flex: 1 1 auto; min-width: 0; background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); color: var(--ddText); font-family: var(--font); font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX); border-radius: var(--ddRadius); }

body.rndToolMock .ti:hover,
body.rndToolMock .ti:focus { background: var(--ddHoverBg); border-color: var(--ddHoverBorder); color: var(--ddHoverText); outline: none; }

body.rndToolMock .fc-actions { flex: 1 1 50%; display: flex; justify-content: flex-end; gap: 8px; }

body.rndToolMock .rotBtn { margin: 0; }

   /* styled by .sBtn (Site Editor > Symbol Buttons) */
body.rndToolMock .fc-stage { position: relative; width: 100%; height: 440px; background: var(--toolStageBg); overflow: hidden; }

body.rndToolMock .fc-rect { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; max-width: 100%; }

body.rndToolMock .fc-rect.ra { z-index: 1; border: var(--stageFrameW) solid var(--stageFrameOne); background: var(--toolStageBg); }

body.rndToolMock .fc-rect.rb { z-index: 2; border: var(--stageFrameW) solid var(--stageFrameTwo); }

body.rndToolMock .fc-tag { position: absolute; white-space: nowrap; font-size: var(--fcTextSize); letter-spacing: .08em; padding: 1px 6px; line-height: 1.3; color: var(--stageText); }

body.rndToolMock .ra .fc-tag { top: 0; left: 0; background: var(--stageFrameOne); }

body.rndToolMock .rb .fc-tag { bottom: 0; right: 0; background: var(--stageFrameTwo); }

body.rndToolMock .fc-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--surfaceGap, 12px); align-items: start; }

body.rndToolMock .fc-sheet .fc-span { grid-column: 1 / -1; }

body.rndToolMock .fc-stack { display: flex; flex-direction: column; gap: var(--surfaceGap, 12px); min-width: 0; }

body.rndToolMock .fc-spec { padding: 14px 16px; }

body.rndToolMock .fc-spec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }

body.rndToolMock .fc-spec-name { font-size: var(--fcTextSize); color: var(--bodyTextColor); margin-bottom: 8px; line-height: 1.4; }

body.rndToolMock .fc-rows { display: flex; flex-direction: column; gap: 4px; }

body.rndToolMock .fc-row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fcTextSize); }

body.rndToolMock .fc-row > span:first-child { color: var(--textDim); }

body.rndToolMock .fc-row > span:last-child { color: var(--bodyTextColor); text-align: right; }

body.rndToolMock .fc-crop .fc-row > span:last-child { color: var(--heroFoil); }

body.rndToolMock .fc-links { display: flex; flex-direction: column; gap: 8px; }

body.rndToolMock .fc-links .fmtLink { width: 100%; }

body.rndToolMock .fc-focal-intro { font-size: var(--fcFocalSize); color: var(--bodyTextColor); line-height: 1.5; margin-bottom: 10px; }

body.rndToolMock .fc-focal-list { display: flex; flex-direction: column; gap: 7px; }

body.rndToolMock .fc-focal-line { font-size: var(--fcFocalSize); color: var(--textDim); line-height: 1.5; }

body.rndToolMock .fc-src { color: var(--heroSite); }

body.rndToolMock .fc-eq { color: var(--heroFoil); }

body.rndToolMock .fc-note { margin-top: 10px; font-size: var(--fcTextSize); color: var(--textDim); line-height: 1.45; }

body.rndToolMock .matchBtn[hidden] { display: none; }

/* ---------- Insights - View: article header (content header) ---------- */
body[data-page="insightsView"] #sectionBar h1 .here { color: var(--artTitleColor); }

body[data-page="insightsView"] #sectionBar h1 .artSub { color: var(--artSubColor); }

body[data-page="insightsView"] #sectionBar h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

#sectionBar .artRight { display: flex; align-items: center; gap: var(--secBtnGap, 8px); margin-left: auto; flex: none; }

#sectionBar .artRight + #shareBtn { margin-left: var(--secBtnGap, 8px); }

#sectionBar .artDate { font-size: var(--bodyFontSize); letter-spacing: .04em; color: var(--artDateColor); white-space: nowrap; }

.artChapters { position: relative; }

.artChapters[hidden], .artChList[hidden], .artDate[hidden], .artSubWrap[hidden] { display: none; }

.artChapters .btn svg { margin-left: 4px; transition: transform .2s ease; vertical-align: 1px; }

.artChapters .btn.active svg { transform: rotate(180deg); }

.artChList { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 240px; max-height: 60vh; overflow-y: auto; background: var(--menuBg); border: 1px solid var(--menuBorderColor); }

.artChLink { display: block; padding: 8px 14px; font-size: var(--bodyFontSize); color: var(--menuText); text-decoration: none; border-top: 1px solid var(--subBorderColor); white-space: nowrap; transition: background .15s ease, color .15s ease; }

.artChLink:first-child { border-top: 0; }

.artChLink:hover, .artChLink:focus-visible { background: color-mix(in srgb, var(--menuHoverBg) calc(var(--menuHoverFillOpacity) * 1%), transparent); color: var(--menuHoverText); outline: none; }

/* ---------- Insights - View: article body (ported from the live article styles) ---------- */
body[data-page="insightsView"] #pageBody { padding: 0 0 40px; }

body[data-page="insightsView"] #scrollRegion { margin-top: var(--artChapGap); }

   /* content header -> first block uses the chapter gap */
body[data-page="insightsView"] #scrollGutter { --railTop: calc(var(--secH) + var(--artChapGap) + var(--hdrRuleBottom) + var(--hdrRuleH) / 2); }

.article-content { display: flex; flex-direction: column; gap: var(--artChapGap); }

.article-set { display: flex; flex-direction: column; gap: var(--artHeadGap); }

.article-box { border-style: solid; border-radius: var(--surfaceRadius); overflow: hidden; }

.article-box > :first-child { margin-top: 0; }

.article-box > :last-child { margin-bottom: 0; }

.article-head { display: flex; align-items: center; min-height: var(--artHeadH); background: var(--artHeadBg); border-width: var(--artHeadBorderW); border-color: var(--artHeadEdge); border-bottom: var(--artHeadBottomW) solid var(--artHeadBottomEdge); border-left: var(--artHeadRuleW) solid var(--ruleColor); padding: var(--artHeadPadY) var(--artHeadPadX); }

.article-head h2 { margin: 0; }

.article-body { background: var(--artBodyBg); border-width: var(--artBodyBorderW); border-color: var(--artBodyEdge); padding: var(--artBodyPadY) var(--artBodyPadX); }

.article-content { font-size: calc(var(--bodyFontSize) + 1px); line-height: 1.75; color: var(--bodyTextColor); }

.article-content p { margin: 0 0 1em; }

.article-content b { font-weight: 500; }

.article-content a { color: var(--linkInactive); }

.article-content img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.article-content h2 { font-weight: 400; font-size: calc(var(--secFontSize) + 2px); margin: 1.4em 0 .5em; color: var(--pageTitleColor); }

.article-content .article-chapter-link { color: inherit; text-decoration: none; }

.article-content .article-chapter-link:hover { color: var(--linkHover); }

.article-chapter-top { display: inline-flex; vertical-align: middle; margin-left: 10px; padding: 0; background: none; border: 0; color: var(--textDim); cursor: pointer; transition: color .18s ease; }

.article-chapter-top:hover { color: var(--linkHover); }

.article-chapter-top svg { width: .8em; height: .8em; display: block; }

.article-content hr { border: 0; border-top: 1px solid var(--surfaceBorder); margin: -.4em 0 .8em; }

.article-figure { margin: 1.5em 0; }

.article-figure--image .article-figure-media { display: block; text-align: center; cursor: zoom-in; }

.article-figcaption { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; margin-top: 8px; color: var(--cardTitleColor, var(--heroSite)); letter-spacing: .02em; }

.figcap-line { line-height: 1.4; }

.article-thumb-item { display: inline-block; vertical-align: top; width: 12.5%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; cursor: pointer; background: #111; }

.article-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }

.article-thumb-item::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .3s ease; pointer-events: none; }

.article-thumb-item:hover::before { background: rgba(0,0,0,.45); }

/* Image Swipe (Site Editor: Image Swipe) */
.article-compare { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #111; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }

.article-compare .article-compare-img { position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); margin: 0; max-width: none; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }

.article-compare-layer-2 { position: absolute; inset: 0; }

/* caption box: Site Editor > Swipe Caption Background. Edge padding keeps the box inside the image; text padding is inside the box */
.article-compare-label { position: absolute; top: var(--scEdgeT); box-sizing: border-box; max-width: calc(100% - var(--scEdgeL) - var(--scEdgeR)); max-height: calc(100% - var(--scEdgeT) - var(--scEdgeB)); overflow: hidden;
  padding: var(--scPadY) var(--scPadX); color: var(--scText); background: color-mix(in srgb, var(--scFill) calc(var(--scFillOpacity) * 1%), transparent);
  border: var(--scBorderW) solid var(--scBorder); border-radius: var(--scRadius); font-size: var(--scFontSize); letter-spacing: .04em; pointer-events: none; white-space: pre-line; }

.article-compare-label:empty { display: none; }

.article-compare-label-1 { left: var(--scEdgeL); text-align: left; }

.article-compare-label-2 { right: var(--scEdgeR); text-align: right; }

.article-compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--swDividerW); background: var(--swDivider); transform: translateX(-50%); pointer-events: none; z-index: 4; transition: background-color .15s ease; }

.article-compare-handle-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--swHandleD); height: var(--swHandleD); border-radius: 50%; background: var(--swHandle); color: var(--swHandleIcon); border: var(--swHandleBorderW, 0px) solid var(--swHandleBorder); box-sizing: border-box; transition: background-color .15s ease, color .15s ease, border-color .15s ease; display: flex; align-items: center; justify-content: center; font-size: calc(var(--swHandleD) * .46); line-height: 1; }

/* Swipe Control: active while the pointer is over the swipe or dragging it */
/* hover = pointer over the image; active = while dragging (listed last so it wins over hover) */
.article-compare:hover .article-compare-handle { background: var(--swDividerHover); }

.article-compare:hover .article-compare-handle-grip { background: var(--swHandleHover); color: var(--swHandleIconHover); border-color: var(--swHandleBorderHover); }

.article-compare.dragging .article-compare-handle { background: var(--swDividerActive); }

.article-compare.dragging .article-compare-handle-grip { background: var(--swHandleActive); color: var(--swHandleIconActive); border-color: var(--swHandleBorderActive); }

body:is([data-page="toolsIndex"], [data-page="shopIndex"], [data-page="shopPage"], [data-page="insightsIndex"], [data-page="resourcesIndex"], [data-page="resourcesPage"], [data-page="motionIndex"], [data-page="motionPage"]) #pageBody { padding: 0 0 32px; }

a.btn { text-decoration: none; display: inline-block; }

.pgIntro { margin: 0 0 var(--surfaceGap, 12px); color: var(--textDim); line-height: 1.6; font-size: calc(var(--bodyFontSize) + 1px); }

.pgCount { margin: 12px 0 0; text-align: right; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .06em; }

/* shared card: Surface fill / border / radius */
.gcard { display: flex; flex-direction: column; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); overflow: hidden; text-decoration: none; color: var(--bodyTextColor); transition: border-color .18s ease, background .18s ease; }

.gcard:hover, .gcard:focus-visible { border-color: var(--linkHover); outline: none; }

/* Tools - Gallery Index */
.tgrid { display: grid; grid-template-columns: repeat(var(--toolsPerRow, 4), 1fr); gap: var(--toolGap); }

.tcard { position: relative; min-height: var(--toolMinH); padding: var(--toolPad); gap: 8px; border-radius: var(--toolRadius, var(--surfaceRadius)); }

/* Tools index: hover outline drawn inside the card, same as Shop (Page tab > Tool Cards: color + thickness) */
.tcard::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 var(--toolHoverOutlineW, 1px) var(--toolHoverOutline, var(--linkHover)); opacity: 0; transition: opacity .18s ease; }

.tcard:hover, .tcard:focus-visible { border-color: var(--surfaceBorder); }

.tcard:hover::after, .tcard:focus-visible::after { opacity: 1; }

.tname { font-weight: 700; letter-spacing: .04em; font-size: calc(var(--bodyFontSize) + 2px); color: var(--toolNameColor); }

.tdesc { font-size: var(--bodyFontSize); line-height: 1.45; color: var(--textDim); }

/* Shop - Gallery Index */
.sgrid { display: grid; grid-template-columns: repeat(var(--shopPerRow, 4), 1fr); gap: var(--shopGap); }

.sframe { position: relative; display: block; aspect-ratio: var(--shopAspect, 4 / 3); background: #111; overflow: hidden; }

.sframe img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }

.scard:hover .sframe img { transform: scale(1.03); }

/* Shop index: hover outline (Page tab > Shop Cards). Drawn as an outline over the card edge, so a thicker one never shifts the grid */
.scard { position: relative; border-radius: var(--shopCardRadius, var(--surfaceRadius)); }

.scard::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 var(--shopHoverOutlineW, 1px) var(--shopHoverOutline, var(--linkHover)); opacity: 0; transition: opacity .18s ease; }

.scard:hover, .scard:focus-visible { border-color: var(--surfaceBorder); }

.scard:hover::after, .scard:focus-visible::after { opacity: 1; }

/* Insights index: same hover outline + corner radius controls (Page tab > Entry Cards) */
.ecard { position: relative; border-radius: var(--entryCardRadius, var(--surfaceRadius)); }

.ecard::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 var(--entryHoverOutlineW, 1px) var(--entryHoverOutline, var(--linkHover)); opacity: 0; transition: opacity .18s ease; }

.ecard:hover, .ecard:focus-visible { border-color: var(--surfaceBorder); }

.ecard:hover::after, .ecard:focus-visible::after { opacity: 1; }

.scard.is-sold .sframe img { opacity: .55; }

.stag { position: absolute; top: 8px; left: 8px; padding: 2px 7px; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; background: rgba(10,10,10,.78); border: 1px solid var(--surfaceBorder); }

.stag.avail { color: var(--shopAvailColor); border-color: var(--shopAvailColor); }

.stag.sold { color: var(--textDim); }

.sbody { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }

.stitle { font-weight: 700; letter-spacing: .04em; font-size: calc(var(--bodyFontSize) + 1px); color: var(--shopTitleColor); }

.smeta { font-size: calc(var(--bodyFontSize) - 1px); color: var(--textDim); }

/* Shop - Page */
.sp { display: grid; grid-template-columns: calc(var(--shopMediaPct, 54) * 1%) 1fr; gap: var(--shopColGap); align-items: start; }

.spMedia { display: flex; flex-direction: column; gap: var(--shopThumbGap); min-width: 0; }

.spStage { width: 100%; aspect-ratio: var(--shop-aspect, 4 / 3); background: #111; border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); overflow: hidden; cursor: zoom-in; display: flex; align-items: center; justify-content: center; }

.spStage img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }

.spStage:focus-visible { outline: 2px solid var(--linkHover); outline-offset: 2px; }

.spThumbs { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--shopThumbGap); }

.spThumb { padding: 0; background: #111; border: var(--surfaceBorderW) solid var(--surfaceBorder); cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; opacity: .6; transition: opacity .18s ease, border-color .18s ease; }

.spThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.spThumb:hover, .spThumb.on { opacity: 1; }

.spThumb.on { border-color: var(--linkHover); }

.spInfo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.spTitle { margin: 0; font-weight: 400; font-size: calc(var(--secFontSize) + 4px); color: var(--shopTitleColor); letter-spacing: .03em; }

.spSub { margin: -6px 0 0; color: var(--textDim); letter-spacing: .08em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 1px); }

.spStatus .stag { position: static; display: inline-block; }

.spProse p { margin: 0 0 1em; line-height: 1.7; color: var(--bodyTextColor); font-size: calc(var(--bodyFontSize) + 1px); }

.spBuy { background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

.spBuyLabel { letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 1px); color: var(--shopBuyColor); }

.spBuyPrice { font-size: calc(var(--bodyFontSize) + 4px); color: var(--bodyTextColor); }

.spBuyLinks { display: flex; flex-direction: column; gap: 6px; }

.spBuyLink { display: flex; justify-content: space-between; padding: 8px 12px; border: var(--surfaceBorderW) solid var(--surfaceBorder); color: var(--linkInactive); text-decoration: none; transition: color .18s ease, border-color .18s ease; }

.spBuyLink:hover { color: var(--linkHover); border-color: var(--linkHover); }

.spBuyNote { margin: 0; color: var(--textDim); }

.spBack { margin: 18px 0 0; }

.spBack a { color: var(--linkInactive); text-decoration: none; }

.spBack a:hover { color: var(--linkHover); }

/* Insights - Gallery Index */
.egrid { display: grid; grid-template-columns: repeat(var(--entryPerRow, 3), 1fr); gap: var(--entryGap); }

.ethumb { display: block; aspect-ratio: var(--entryThumbAspect, 16 / 9); background: #111 center / cover no-repeat; }

.ebody { display: flex; flex-direction: column; gap: 6px; padding: var(--entryPad); }

.ecat { font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase; color: var(--entryCatColor); }

.etitle { font-size: calc(var(--bodyFontSize) + 1px); line-height: 1.35; letter-spacing: .02em; color: var(--entryTitleColor); }

.edate { font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .06em; color: var(--textDim); }

.esub { font-size: var(--bodyFontSize); line-height: 1.45; color: var(--textDim); }

/* Resources - Gallery Index / Page */
.rsBar { margin-bottom: var(--surfaceGap, 12px); }

.rsList { background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); }

.rsRow { display: flex; align-items: center; gap: 14px; padding: var(--rsRowPadY) var(--rsRowPadX); border-top: var(--surfaceInnerBorderW) solid var(--surfaceBorder); color: var(--bodyTextColor); }

.rsRow:first-child { border-top: 0; }

.rsHead { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase; }

.rsTitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rsTitle a { color: var(--rsTitleColor); text-decoration: none; }

.rsTitle a:hover { color: var(--linkHover); }

.rsSlug { flex: 0 0 210px; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rsCount { flex: 0 0 56px; color: var(--textDim); }

.rsVis { flex: 0 0 76px; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .08em; text-transform: uppercase; }

.rsVis.pub { color: var(--rsTitleColor); }

.rsVis.priv { color: var(--rsPrivateColor); }

.rpDesc { color: var(--textDim); line-height: 1.7; font-size: calc(var(--bodyFontSize) + 1px); white-space: pre-line; }

.rpLinks { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rpLinkGap); margin-top: 20px; }

.rpItem { display: flex; flex-direction: column; gap: 5px; max-width: var(--rpMeasure); }

.rpNote { color: var(--textDim); line-height: 1.5; font-size: calc(var(--bodyFontSize) - 1px); }

.rpPrivate { display: inline-block; margin-left: 10px; padding: 1px 7px; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase; color: var(--rpPrivateColor); border: 1px solid var(--rpPrivateColor); vertical-align: middle; }

/* Motion - Page */
.mpVideo { aspect-ratio: var(--mpVideoAspect, 16 / 9); background: #000; border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); overflow: hidden; }

.mpVideo iframe { width: 100%; height: 100%; border: 0; display: block; }

.mpMsg { margin: 0; padding: 40px; text-align: center; color: var(--textDim); }

.mpHead { margin-top: var(--mpGap); }

.mpTitle { margin: 0; font-weight: 400; font-size: calc(var(--secFontSize) + 4px); letter-spacing: .03em; color: var(--mpTitleColor); }

.mpSub { margin-top: 4px; color: var(--textDim); letter-spacing: .06em; }

.mpCols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mpGap); margin-top: var(--mpGap); }

.mpBox { background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); padding: var(--mpBoxPad); }

.mpLabel { margin-bottom: 10px; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 1px); color: var(--mpLabelColor); }

.mpBody { line-height: 1.7; color: var(--bodyTextColor); font-size: calc(var(--bodyFontSize) + 1px); }

.mpCredit { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: var(--surfaceInnerBorderW) solid var(--surfaceBorder); }

.mpCredit:first-of-type { border-top: 0; }

.mpRole { color: var(--textDim); }

.mpName { color: var(--bodyTextColor); text-align: right; }

.mpStills { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mpGap); margin-top: var(--mpGap); }

.mpStill { margin: 0; cursor: zoom-in; }

.mpStill img { width: 100%; display: block; aspect-ratio: 2 / 1; object-fit: cover; }

.mpStill figcaption { margin-top: 6px; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }

/* ---------- Content Load Effects ----------
   RULE: every Content Header (#sectionBar, on every page, present and future) and the scrolling content (#scroller) obey these effects.
   The site header, footer and their rules never do. A new page only has to use the standard #sectionBar / #scroller markup.
   Fade-In is a CSS animation so it starts on the very first paint (no flash); "backwards" fill means nothing is left behind once it ends.
   Fade-Out: rnd.js adds .leaving to <html> when you follow a link, then navigates when the fade is done. */
@keyframes contentFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Ease slider: the curve slides from a straight line (0) to ease-in-out (100) by moving the two bezier handles */
#scroller, #sectionBar, #scrollGutter { animation: contentFadeIn calc(var(--contentFadeIn, 0) * 1s) cubic-bezier(
    calc(.3333 + .3167 * var(--contentFadeInEase, 0) / 100), calc(.3333 - .3333 * var(--contentFadeInEase, 0) / 100),
    calc(.6667 - .3167 * var(--contentFadeInEase, 0) / 100), calc(.6667 + .3333 * var(--contentFadeInEase, 0) / 100)) backwards; }

html.leaving #scroller, html.leaving #sectionBar, html.leaving #scrollGutter { opacity: 0; transition: opacity calc(var(--contentFadeOut, 0) * 1s) cubic-bezier(
    calc(.3333 + .3167 * var(--contentFadeOutEase, 0) / 100), calc(.3333 - .3333 * var(--contentFadeOutEase, 0) / 100),
    calc(.6667 - .3167 * var(--contentFadeOutEase, 0) / 100), calc(.6667 + .3333 * var(--contentFadeOutEase, 0) / 100)); }

@media (prefers-reduced-motion: reduce) { #sectionBar, #scrollRegion, #scrollGutter { animation: none; transition: none; } }

/* ---------- Home, About, Clients, Contact, Login, Insights Editor, Projects prototypes (pages2.js) ----------
   Built only from shared variables (Hero colours, Surface, Buttons, Drop Down Menu, Links), so the Site Editor and Dark/Light drive all of it. */
.surf { background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); padding: 18px; margin-bottom: var(--surfaceGap, 12px); }

.surfLabel { margin-bottom: 10px; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 1px); color: var(--heroSite); }

.prose { line-height: 1.7; color: var(--bodyTextColor); font-size: calc(var(--bodyFontSize) + 1px); }

.prose p { margin: 0 0 .9em; }

.prose p:last-child, .prose ul:last-child { margin-bottom: 0; }

.prose ul { margin: 0 0 .9em; padding-left: 1.2em; }

.prose li { margin: .15em 0; }

.abSplit { display: grid; grid-template-columns: minmax(0, calc(var(--abTextPct, 66.5) * 1% - var(--abGap, var(--surfaceGap, 12px)) / 2)) minmax(0, 1fr);   /* Page tab > About Boxes > Text box width (% of the row); the photo column takes the rest */ gap: var(--abGap, var(--surfaceGap, 12px)); align-items: stretch; }

   /* the two boxes always end on the same line (the shorter one stretches), and on a long tab the photo (with its label)
      stays in view while the text scrolls, stopping at the bottom of its box */
.abPhotoStick { position: sticky; top: 18px; }

.abPhotoMore { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.abPhotoMore:empty, .abPhotoMore[hidden] { display: none; }

.abPhotoMore .imgProtect { cursor: zoom-in; }

.abPhoto .abPhotoNext { z-index: 4; }   /* above the photo's click layer, on whichever photo it sits */

.abSplit > .surf { margin-bottom: 0; }

.abFour { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr;   /* BTS Gallery, Client List, Credits 20% each, Organizations 40% (of the row, after the gaps) */ gap: var(--abGap, var(--surfaceGap, 12px)); margin-top: var(--abGap, var(--surfaceGap, 12px)); }

.abFour > .surf { margin-bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* About tabs: same sliding underline as the category links (Site Editor > Active Link Underline); rows leave room for the line */
.abTabs { position: relative; display: flex; flex-wrap: wrap; gap: calc(var(--catLineGap) + var(--catLineH) + 6px) 14px; margin-bottom: calc(var(--catLineGap) + var(--catLineH) + 10px); }

.abTab { background: none; border: 0; padding: 0; font: inherit; font-size: calc(var(--bodyFontSize)); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: var(--linkInactive); transition: color .18s ease; }

.abTab:hover { color: var(--linkHover); }

.abTab.active, .abTab.active:hover { color: var(--linkActive); }

.abTab:focus-visible { outline: 1px solid var(--linkHover); outline-offset: 3px; }

.abPhoto { position: relative; }

.abPhoto img { display: block; width: 100%; height: auto; border-radius: var(--surfaceRadius); }

.abPhotoNext { position: absolute; right: 8px; bottom: 8px; }

.abOrgs { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; }   /* Organizations: one line, wrapping only when they don't fit */

.abOrgs > * { flex: none; white-space: nowrap; }

.abOrgs a, .surf a:not(.btn) { color: var(--linkInactive); text-decoration: none; transition: color .18s ease; }

.abOrgs a:hover, .surf a:not(.btn):hover { color: var(--linkHover); }

.clIntro { padding: 16px 20px; margin-bottom: var(--surfaceGap, 12px); background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-left: var(--secRuleW) solid var(--ruleColor); border-radius: var(--surfaceRadius); line-height: 1.6; color: var(--bodyTextColor); font-size: calc(var(--bodyFontSize) + 1px); }

.clGrid { display: grid; grid-template-columns: repeat(var(--clPerRow, 8), minmax(0, 1fr)); gap: var(--surfaceGap, 12px); }

.clTile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: var(--clPad, 20px); background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); transition: border-color .18s ease; }

.clTile:hover { border-color: var(--linkHover); }

   /* Page tab > Client Tiles: tiles per row, and the logo fills the square tile inside its interior edge padding (above the name) */
.clLogo { width: 100%; flex: 1 1 0; min-height: 0; background-color: var(--bodyTextColor); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background-color .18s ease; }

.clTile:hover .clLogo { background-color: var(--linkHover); }

.clName { font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--textDim); line-height: 1.25; }

/* Contact (same layout as the live contact/ page). Page tab > Contact Box for the box, sizes and colours */
.ctPage { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--ctGap, 24px); }

.ctWrap { box-sizing: border-box; background: var(--ctBg, var(--surface)); border: var(--ctBorderW, 1px) solid var(--ctBorder, var(--surfaceBorder)); border-radius: var(--ctRadius, 0px);
  padding: var(--ctPadY, 20px) var(--ctPad, 24px); }

.ctHead { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

.ctGlobe { box-sizing: content-box; width: var(--ctGlobeSize, 128px); height: var(--ctGlobeSize, 128px); flex: none; color: var(--ctGraphic, var(--linkInactive));
  padding: var(--ctGfxPadT, 0px) var(--ctGfxPadR, 0px) var(--ctGfxPadB, 0px) var(--ctGfxPadL, 0px); }

.ctTag { color: var(--ctTagColor, var(--textDim)); font-size: var(--ctTagSize, 12px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; }

.ctInfo { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: var(--surfaceInnerBorderW) solid var(--ctBorder, var(--surfaceBorder)); }

.ctRow { display: flex; align-items: center; gap: 12px; font-size: var(--ctInfoSize, 12px); letter-spacing: .04em; color: var(--bodyTextColor); }

.ctLabel { min-width: 56px; font-size: calc(var(--ctInfoSize, 12px) - 1px); letter-spacing: .1em; text-transform: uppercase; color: var(--textDim); }

.ctInfo a { color: var(--linkInactive); text-decoration: none; transition: color .18s ease; }

.ctInfo a:hover { color: var(--linkHover); }

.ctSocial { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 4px 0 16px; }

   /* same padding as the live page */
.ctLink { display: flex; align-items: center; gap: 8px; color: var(--textDim); text-decoration: none; font-size: var(--ctSocialSize, 12px); letter-spacing: .08em; text-transform: uppercase; transition: color .18s ease; }

.ctLink:hover { color: var(--linkInactive); }

.ctIcon { width: 1.53em; height: 1.53em; flex: none; display: block; }

/* form fields: the Drop Down Menu colours + sizes, so one set of controls styles every input */
.fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; text-align: left; }

.fld > span { letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 2px); color: var(--textDim); }

.fld input[type=text], .fld input[type=password] { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX); background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText); outline: none; transition: border-color .18s ease; }

.fld input:hover, .fld input:focus { border-color: var(--ddHoverBorder); background: var(--ddHoverBg); color: var(--ddHoverText); }

.chk { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--bodyTextColor); font-size: calc(var(--bodyFontSize) + 1px); cursor: pointer; }

.chk input { accent-color: var(--sliderAccent); }

.lgBox { max-width: 360px; margin: 0 auto; padding: 24px; border: var(--lgBorderW, var(--surfaceBorderW)) solid var(--lgBorder, var(--surfaceBorder)); border-radius: var(--lgRadius, var(--surfaceRadius)); }

   /* top-aligned: the gap above comes from the shared spacing (Pad below rule / content header) */
.lgLock { display: block; box-sizing: content-box; width: var(--lgGfxSize, 128px); height: var(--lgGfxSize, 128px); margin: 0 auto; color: var(--lgGraphic, var(--linkInactive));
  padding: var(--lgGfxPadT, 24px) var(--lgGfxPadR, 0px) var(--lgGfxPadB, 14px) var(--lgGfxPadL, 0px); }

   /* On the login page the lock's top padding is measured from the top of the box (inside its border), and its bottom
      padding to the top of the Username text: the box adds no top padding of its own there, and the field labels are
      set solid (line-height 1) so no line spacing sits above the text. */
body[data-page="login"] .lgBox { padding-top: 0; }

/* Site Editor > Login Box > Box background (unset: the site surface colour, as before) */
body[data-page="login"] .lgBox { background: var(--lgBoxBg, var(--surface)); }

   /* Page tab > Login Box > Box width: a percentage of the content area (37.5% is the old 360px on the 960px content
      area). Everything inside follows it: the fields are full width, the lock shrinks to fit (keeping its padding), and
      the buttons wrap when they no longer fit side by side. */
body[data-page="login"] .lgBox { max-width: none; width: min(100%, calc(var(--lgBoxWidth, 37.5) * 1%)); }

body[data-page="login"] .lgLock { width: min(var(--lgGfxSize, 128px), calc(100% - var(--lgGfxPadL, 0px) - var(--lgGfxPadR, 0px))); height: auto; aspect-ratio: 1; }

body[data-page="login"] .lgActions { flex-wrap: wrap; }

   /* Page tab > Login Box spacing: the box's side padding (around the fields and buttons), the space between the
      Password field and the buttons (the error message, when shown, sits in the middle of it), the space below the
      buttons, and the gap between them */
body[data-page="login"] .lgBox { padding-left: var(--lgFieldPadX, 24px); padding-right: var(--lgFieldPadX, 24px); padding-bottom: var(--lgBtnPadB, 24px); }

body[data-page="login"] .lgBox label.fld:last-of-type { margin-bottom: 0; }

body[data-page="login"] .lgBox .lgError { margin: 0; height: var(--lgBtnPadT, 32px); display: flex; align-items: center; overflow: visible; }

body[data-page="login"] .lgActions { gap: var(--lgBtnGap, 8px); }

   /* Contact: Page tab > Contact Box > Width - the whole column (box, email / phone, socials, which line up with the box
      edges) as a percentage of the content area; 66.5% is about the old 640px. The globe shrinks to fit a narrow box and
      the info and social rows wrap. */
body[data-page="contact"] .ctPage { max-width: none; width: min(100%, calc(var(--ctBoxWidth, 66.5) * 1%)); }

body[data-page="contact"] .ctGlobe { width: min(var(--ctGlobeSize, 128px), calc(100% - var(--ctGfxPadL, 0px) - var(--ctGfxPadR, 0px))); height: auto; aspect-ratio: 1; }

body[data-page="contact"] .ctInfo, body[data-page="contact"] .ctSocial { flex-wrap: wrap; row-gap: 12px; }

body[data-page="contact"] .ctRow { flex-wrap: wrap; row-gap: 4px; min-width: 0; }

   /* the dividing line sits above the social links, not between the box and email / phone; the email / phone row is
      spaced by the column gap (Space between sections) alone */
body[data-page="contact"] .ctInfo { border-top: 0; padding: 0; }

   /* Page tab > Contact Box > Globe line thickness / Globe center dot size, in the globe's own 100-unit drawing (so they
      scale with Globe size): every ring - the outer circle and the four orbits - takes the one thickness; the centre dot
      (and its faint outline) take the size as a diameter */
body[data-page="contact"] .ctGlobe circle:not(.ctDot), body[data-page="contact"] .ctGlobe ellipse { stroke-width: calc(var(--ctLineW, 1.75) * 1px); }

body[data-page="contact"] .ctGlobe .ctDot { r: calc(var(--ctDotSize, 8) * .5px); }

body[data-page="contact"] .ctSocial { border-top: var(--surfaceInnerBorderW) solid var(--ctBorder, var(--surfaceBorder)); padding: 16px 0; }

body[data-page="contact"] .ctInfo a { overflow-wrap: anywhere; }

   /* Contact box header: a bar across the top of the box (inside its border, past its padding), like the login box's */
.ctBoxHead { display: none; }

body[data-page="contact"] .ctBoxHead { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: var(--ctHeadH, 32px); margin: calc(-1 * var(--ctPadY, 20px)) calc(-1 * var(--ctPad, 24px)) var(--ctHeadPadB, 20px);
  background: var(--ctHeadBg, var(--heroEdge)); color: var(--ctHeadColor, var(--heroFaint));
  font-size: var(--ctHeadSize, 12px); letter-spacing: .14em; text-indent: .14em; text-transform: uppercase; line-height: 1;
  border-radius: max(0px, calc(var(--ctRadius, 0px) - var(--ctBorderW, 1px))) max(0px, calc(var(--ctRadius, 0px) - var(--ctBorderW, 1px))) 0 0; }

   /* Page tab > Login Box > Header: a bar across the top of the box (inside its border, past the side padding) */
.lgHead { display: none; }

body[data-page="login"] .lgHead { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: var(--lgHeadH, 32px); margin: 0 calc(-1 * var(--lgFieldPadX, 24px)) var(--lgHeadPadB, 0px);
  background: var(--lgHeadBg, var(--heroEdge)); color: var(--lgHeadColor, var(--heroFaint));
  font-size: var(--lgHeadSize, 12px); letter-spacing: .14em; text-indent: .14em; text-transform: uppercase; line-height: 1;  /* indent = the trailing letter space, so the word is truly centred */
  border-radius: max(0px, calc(var(--lgRadius, 0px) - var(--lgBorderW, 1px))) max(0px, calc(var(--lgRadius, 0px) - var(--lgBorderW, 1px))) 0 0; }

body[data-page="login"] .lgBox .fld input { min-width: 0; }

body[data-page="login"] .lgBox .fld > span { line-height: 1; }

   /* Page tab > Login Box */
.lgError { visibility: hidden; margin: -4px 0 10px; font-size: calc(var(--bodyFontSize)); color: var(--heroHeat); }

.lgError.on { visibility: visible; }

.lgActions { display: flex; gap: 8px; justify-content: center; }

/* Page tab > Login Box: text sizes inside the box */
.lgBox .fld > span { font-size: var(--lgLabelSize, calc(var(--bodyFontSize) - 2px)); }

.lgBox .fld input[type=text], .lgBox .fld input[type=password] { font-size: var(--lgInputSize, var(--ddSize)); }

.lgBox .lgError { font-size: var(--lgErrorSize, var(--bodyFontSize)); }

.lgBox .lgActions .btn { font-size: var(--lgBtnSize, var(--btnSize)); }

.ieMeta { padding: 0; }

.ieMeta summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; }

.ieMeta summary::-webkit-details-marker { display: none; }

.ieMeta summary .surfLabel { margin: 0; }

.ieMeta summary::after { content: "\25be "; color: var(--linkInactive); }

.ieMeta:not([open]) summary::after { content: "\25b8 "; }

.ieMetaBody { padding: 4px 18px 8px; }

.ieRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ieBar { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; background: var(--bg); }

.ieTools, .ieActions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ieDiv { width: 1px; height: 22px; background: var(--surfaceBorder); margin: 0 4px; }

.ieGrow { flex: 1; }

.iePane { min-height: 320px; padding: 20px; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); color: var(--bodyTextColor); line-height: 1.7; font-size: calc(var(--bodyFontSize) + 2px); outline: none; }

.iePane:focus { border-color: var(--ddHoverBorder); }

.iePane h2 { margin: 0 0 .6em; font-size: calc(var(--secFontSize) + 2px); font-weight: 500; color: var(--pageTitleColor); }

.iePane h3 { color: var(--pageTitleColor); }

.hmStage { position: relative; height: calc(100vh - 220px); min-height: 300px; display: flex; align-items: center; justify-content: center; }

.hmLayer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.2s ease; }

.hmLayer.on { opacity: 1; }

.hmLogo { position: absolute; left: 50%; bottom: 4%; width: 38%; transform: translateX(-50%); pointer-events: none; }

.prHero { aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--surfaceRadius); border: var(--surfaceBorderW) solid var(--surfaceBorder); margin-bottom: var(--surfaceGap, 12px); }

.prHero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- header icons: menu icon (Stacked Layers or compass, in place of MENU) + Sun / Moon mode switch (drawn by rnd.js, sizes + colours in the Site Editor) ---------- */
#siteTitle { position: relative; }

.menu-nav { margin-right: var(--hdrIconGap); vertical-align: top; }

.menu-btn.compassBtn { position: relative; display: block; height: var(--hdrH); padding: 0; color: var(--compassOff); }

.menu-nav:hover .menu-btn.compassBtn { color: var(--compassHover); }

.menu-nav.open .menu-btn.compassBtn, .menu-nav.open:hover .menu-btn.compassBtn { color: var(--compassActive); }

.compassArt { position: absolute; left: 50%; top: 50%; overflow: visible; pointer-events: none; }

/* Stacked Layers menu icon (rnd.js draws it; Site Editor > Navigation Stacked Layers). Colour follows the menu state, in step with the tip. */
.menu-btn.layersBtn { position: relative; display: block; height: var(--hdrH); padding: 0; color: var(--compassOff);
                      transition: color calc(var(--layersSpeed, .6) * 1s) cubic-bezier(.65, 0, .35, 1); }

.menu-nav:hover .menu-btn.layersBtn { color: var(--compassHover); }

.menu-nav.open .menu-btn.layersBtn, .menu-nav.open:hover .menu-btn.layersBtn { color: var(--compassActive); }

.layersArt { position: absolute; left: 50%; top: 50%; overflow: visible; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .menu-btn.layersBtn { transition: none; } }

.modeSw { position: absolute; right: var(--hdrPadX); top: 50%; transform: translateY(-50%); width: var(--modeSwSize); height: var(--modeSwSize);
          background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 0; border-radius: 50%; }

.modeSw svg { display: block; width: 100%; height: 100%; overflow: visible; }

html:not([data-modesw="show"]) .modeSw { display: none; }

   /* Site Editor > Dark / Light Mode Switch > Switch */
.modeSw:focus-visible { outline: 1px solid var(--linkHover); outline-offset: 4px; }

/* ---------- Site and Admin prototypes (pages3.js): 403, Coming Soon, Under Construction, Admin Access, Text Editor, LUT Builder ----------
   Shared variables only (Hero colours, Surface, Buttons, Drop Down Menu, Links, sliders), so Dark / Light and the Site Editor drive them. */
.btn.sm { padding: 3px 8px; font-size: calc(var(--btnSize) - 1px); letter-spacing: .04em; }

.btn:disabled { opacity: .4; cursor: default; }

.holdWrap { display: flex; justify-content: center; padding-top: 40px; }

.holdBox { min-width: 380px; max-width: 560px; padding: 34px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.holdCode { font-size: var(--holdCodeSize); font-weight: 300; line-height: 1; letter-spacing: .06em; color: var(--heroSite); }

.holdMsg { font-size: calc(var(--bodyFontSize) + 3px); color: var(--bodyTextColor); letter-spacing: .03em; }

.holdCount { display: inline-block; min-width: 1.2em; color: var(--heroHeat); font-variant-numeric: tabular-nums; }

.holdLinks { display: flex; gap: 8px; }

.holdNote { margin: 4px 0 0; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }

.holdTitle { margin: 0; font-size: var(--holdTitleSize); font-weight: 300; letter-spacing: .04em; color: var(--bodyTextColor); }

.holdAccent { color: var(--heroSite); }

.holdText { margin: 0; color: var(--textDim); font-size: calc(var(--bodyFontSize) + 2px); }

.holdDots { display: flex; gap: 8px; }

.holdDots span { width: 7px; height: 7px; border-radius: 50%; background: var(--heroSite); animation: holdDot 1.2s ease-in-out infinite; }

.holdDots span:nth-child(2) { animation-delay: .2s; }

.holdDots span:nth-child(3) { animation-delay: .4s; }

@keyframes holdDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

.ucGear { width: 150px; height: 150px; }

.ucSolid { fill: var(--heroSite); }

.ucCut { fill: var(--surface); }

.ucSpin { transform-origin: 150px 150px; animation: ucSpin 14s linear infinite; }

@keyframes ucSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .holdDots span, .ucSpin { animation: none; } }

.adBar { display: flex; align-items: center; gap: 14px; margin-bottom: var(--surfaceGap, 12px); }

.adHint { flex: 1; color: var(--textDim); font-size: calc(var(--bodyFontSize) + 1px); }

.adCols { display: flex; align-items: center; gap: 8px; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .08em; text-transform: uppercase; }

.adGrid { display: grid; grid-template-columns: repeat(var(--adCols, 4), minmax(0, 1fr)); gap: var(--surfaceGap, 12px); align-items: start; }

.adGrid > .surf { margin-bottom: 0; }

.adLink { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: var(--surfaceInnerBorderW) solid var(--surfaceBorder); color: var(--linkInactive); text-decoration: none; font-size: calc(var(--bodyFontSize) + 1px); transition: color .18s ease; }

.adLink:first-of-type { border-top: 0; }

.adLink:hover { color: var(--linkHover); }

.adLink.off { color: var(--textDim); cursor: default; }

.adLink.off:hover { color: var(--textDim); }

.adArrow { opacity: .6; }

.adEmpty { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }

.adCatHead { display: flex; gap: 6px; margin-bottom: 8px; }

.adBtns { display: flex; gap: 4px; }

.adCat input[type=text] { min-width: 0; flex: 1; box-sizing: border-box; font: inherit; font-size: calc(var(--ddSize) - 1px); padding: 4px 6px; background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText); }

.adCat input[type=text]:focus { outline: none; border-color: var(--ddHoverBorder); }

.adEditRow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px; margin-bottom: 4px; }

.adUrl { color: var(--textDim) !important; }

.adAdd { margin-top: 4px; }

.adNewCat { display: flex; justify-content: center; align-items: center; min-height: 80px; }

.teWrap { padding: 0; display: flex; flex-direction: column; }

.teHead { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: var(--surfaceInnerBorderW) solid var(--surfaceBorder); }

.teFile { color: var(--textDim); font-size: calc(var(--bodyFontSize) + 1px); }

.teFile span { color: var(--heroSite); }

.teStatus { font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .06em; text-transform: uppercase; color: var(--textDim); }

.teStatus.dirty { color: var(--heroHeat); }

.teStatus.ok { color: var(--heroFoil); }

.teArea { display: block; width: 100%; box-sizing: border-box; min-height: 420px; resize: vertical; padding: 14px 16px; border: 0; outline: none; background: var(--bg); color: var(--bodyTextColor);
  font: calc(var(--bodyFontSize) + 1px)/1.6 ui-monospace, "Roboto Mono", Menlo, Consolas, monospace; tab-size: 4; }

.teNone { padding: 30px 16px; color: var(--textDim); }

.teFoot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: var(--surfaceInnerBorderW) solid var(--surfaceBorder); }

.teInfo { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }

.lbDeck { padding-bottom: 12px; }

.lbCols { display: grid; grid-template-columns: 1fr 1px 280px; gap: 18px; }

.lbDiv { background: var(--surfaceBorder); }

.lbRow { display: grid; grid-template-columns: auto 190px 1fr 44px auto; gap: 8px; align-items: center; margin-bottom: 8px; }

.lbRow.off > :not(input[type=checkbox]) { opacity: .45; }

.lbRow input[type=checkbox] { accent-color: var(--sliderAccent); }

.lbRow output { color: var(--sliderValue); font-variant-numeric: tabular-nums; text-align: right; font-size: calc(var(--bodyFontSize) - 1px); }

.lbRowBtns { display: flex; gap: 4px; }

.lbRow select.dd, .lbExportCol select.dd { width: 100%; }

.lbActions { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: var(--surfaceInnerBorderW) solid var(--surfaceBorder); }

.lbActions .fld { margin: 0; }

.lbPrevSel select { min-width: 180px; }

.lbPreview { margin: var(--surfaceGap, 12px) 0; }

.lbPrevHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.lbPrevHead .surfLabel, .lbPrevHead .chk { margin: 0; }

.lbStage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); cursor: ew-resize; user-select: none; touch-action: none; }

.lbStage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.lbSplit { position: absolute; top: 0; bottom: 0; width: var(--swDividerW, 2px); margin-left: calc(var(--swDividerW, 2px) / -2); background: var(--swDivider); pointer-events: none; }

.lbTag { position: absolute; top: 8px; padding: 2px 7px; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .12em; background: var(--surface); color: var(--bodyTextColor); border: 1px solid var(--surfaceBorder); }

.lbTag.in { left: 8px; }

.lbTag.out { right: 8px; }

.lbSum { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--surfaceGap, 12px); }

.lbSum > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); }

.lbSum span { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .1em; text-transform: uppercase; }

.lbSum b { font-weight: 400; color: var(--bodyTextColor); font-size: calc(var(--bodyFontSize) + 3px); }

.lbSum > div:first-child b { color: var(--heroSite); }

/* ---------- Page Info (rnd.js): a box at the top of the scrolling content on every page; styled like the Content Header ----------
   Page tab > Page Info picks Hide / Show / Show w/ minimize; colours, sizes, padding and minimize speed in Site Editor > Page Info. */
#pageInfo { box-sizing: border-box; margin-bottom: var(--piGap); padding: var(--piPadY) var(--piPadX); background: var(--piBg);
            border-left: var(--piRuleW) solid var(--piRuleColor); border-bottom: var(--piBottomW) solid var(--piBottomColor); border-radius: var(--piRadius); }

#pageInfo[hidden] { display: none; }

#pageInfo .piHead { display: flex; align-items: center; gap: 12px; }

#pageInfo .piTitle { flex: 1 1 auto; margin: 0; font-size: var(--piTitleSize); font-weight: 400; letter-spacing: .02em; line-height: 1.3; color: var(--piTitleColor); }

#pageInfo .piMin { flex: none; display: none; width: 22px; height: 22px; padding: 3px; margin: -3px -4px -3px 0; background: none; border: 0; cursor: pointer;
                   color: var(--piBtnColor); transition: color .15s ease; }

#pageInfo[data-mode="min"] .piMin { display: block; }

/* Show w/ minimize: the title and the arrow both open / close the box, and both follow the site's link colours -
   Active while the box is open, Inactive while it's minimized, Hover under the pointer */
#pageInfo[data-mode="min"] .piTitle { cursor: pointer; transition: color .15s ease; }

#pageInfo[data-mode="min"] .piTitle, #pageInfo[data-mode="min"] .piMin { color: var(--linkActive); }

#pageInfo[data-mode="min"].collapsed .piTitle, #pageInfo[data-mode="min"].collapsed .piMin { color: var(--linkInactive); }

#pageInfo[data-mode="min"] .piHead:hover .piTitle, #pageInfo[data-mode="min"] .piHead:hover .piMin,
#pageInfo[data-mode="min"] .piTitle:focus-visible, #pageInfo[data-mode="min"] .piMin:focus-visible { color: var(--linkHover); outline: none; }

#pageInfo .piMin:hover, #pageInfo .piMin:focus-visible { color: var(--piBtnHover); outline: none; }

#pageInfo .piMin svg { display: block; width: 100%; height: 100%; transition: transform calc(var(--piMinSpeed, .3) * 1s) cubic-bezier(.65, 0, .35, 1); }

#pageInfo.collapsed .piMin svg { transform: rotate(180deg); }

/* fold: the body row animates between its height and 0 */
#pageInfo .piFold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows calc(var(--piMinSpeed, .3) * 1s) cubic-bezier(.65, 0, .35, 1); }

#pageInfo.collapsed .piFold { grid-template-rows: 0fr; }

#pageInfo .piFoldIn { min-height: 0; overflow: hidden; }

#pageInfo .piBody { font-size: var(--piBodySize); line-height: 1.6; color: var(--piBodyColor);
                    transition: opacity calc(var(--piMinSpeed, .3) * 1s) ease; }

#pageInfo.collapsed .piBody, #pageInfo.collapsed .piDesc { opacity: 0; }

#pageInfo .piFoldIn::before { content: ""; display: block; height: .55em; }

   /* gap under the title, folds away with the body */
#pageInfo.noAnim .piFold, #pageInfo.noAnim .piBody, #pageInfo.noAnim .piMin svg { transition: none; }

/* description: one short line between the title and the body, with a divider under it (same in the box and the pop-up) */
:is(#pageInfo, #piPop) .piDesc { font-size: var(--piDescSize); line-height: 1.55; letter-spacing: .02em; color: var(--piDescColor);
  padding-bottom: .75em; margin-bottom: .85em; border-bottom: var(--piDescRuleW) solid var(--piDescRuleColor); transition: opacity calc(var(--piMinSpeed, .3) * .6s) ease; }

:is(#pageInfo, #piPop) .piDesc[hidden] { display: none; }

:is(#pageInfo, #piPop) .piBody p { margin: 0; }

:is(#pageInfo, #piPop) .piBody p + p { margin-top: .85em; }

   /* paragraphs from blank lines */
#pageInfo .piBody a { color: var(--piLinkColor); text-decoration: none; transition: color .15s ease; }

#pageInfo .piBody a:hover, #pageInfo .piBody a:focus-visible { color: var(--piLinkHover); }

#pageInfo .piBody img { display: block; max-width: 100%; height: auto; margin: .6em 0; border-radius: var(--surfaceRadius, 0); }

@media (prefers-reduced-motion: reduce) { #pageInfo .piFold, #pageInfo .piBody, #pageInfo .piMin svg { transition: none; } }

/* Info icon style: circle-i Graphic Button in the content header + pop-up */
#sectionBar #piBtn { flex: none; margin-left: var(--secBtnGap, 8px); }

#sectionBar #shareBtn[hidden] + #piBtn { margin-left: auto; }

                                  /* no Copy Share URL: the icon takes the right side */
#sectionBar #revealTitlesBtn:not([hidden]) ~ #shareBtn[hidden] + #piBtn { margin-left: var(--secBtnGap, 8px); }

#sectionBar #piBtn + #viewBtns { margin-left: var(--secBtnGap, 8px); }

                                          /* a little apart: an action, not a view mode */
#piBtn[hidden] { display: none; }

#piPop { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--focusBg, #000000) calc(var(--focusOpacity, 85) * 1%), transparent);
  opacity: 0; transition: opacity var(--piPopFade, .3s) ease; }

#piPop.on { opacity: 1; }

#piPop[hidden] { display: none; }

#piPop .piPopBox { box-sizing: border-box; width: min(var(--piPopW), 100%); max-height: calc(var(--piPopMaxH) * 1vh); overflow-y: auto; overscroll-behavior: contain;
  /* border = the frame all the way round; the left + bottom rules are drawn just inside it (inset shadows follow the corner radius
     and stay put while the box scrolls); the padding grows by the rule widths so the text never touches them */
  padding: var(--ipPadY) var(--ipPadX) calc(var(--ipPadY) + var(--ipBottomW)) calc(var(--ipPadX) + var(--ipRuleW));
  background: var(--ipBg); border: var(--ipBorderW) solid var(--ipBorder); border-radius: var(--ipRadius);
  box-shadow: inset var(--ipRuleW) 0 0 0 var(--ipRuleColor), inset 0 calc(var(--ipBottomW) * -1) 0 0 var(--ipBottomColor); }

#piPop .piHead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--ipTitleGap); }

#piPop .piTitle { flex: 1 1 auto; margin: 0; font-size: var(--ipTitleSize); font-weight: 400; letter-spacing: .02em; line-height: 1.3; color: var(--ipTitleColor); }

#piPop .piPopClose { flex: none; margin: -.2em -.1em 0 0; padding: 0; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--focusCloseSize); line-height: .8; color: var(--focusBtnOff); transition: color .15s ease; }

#piPop .piPopClose:hover, #piPop .piPopClose:focus-visible { color: var(--focusBtnHover); outline: none; }

#piPop .piPopClose:active { color: var(--focusBtnActive); }

/* Site Editor > Info Popup > Close X: Hide (site.js sets [hidden]); the box takes focus instead, so no ring */
#piPop .piPopClose[hidden] { display: none; }

#piPop .piPopBox:focus { outline: none; }

#piPop .piDesc { font-size: var(--ipDescSize); color: var(--ipDescColor); border-bottom: var(--ipDescRuleW) solid var(--ipDescRuleColor); }

#piPop .piBody { font-size: var(--ipBodySize); line-height: 1.6; color: var(--ipBodyColor); }

#piPop .piBody a { color: var(--ipLinkColor); text-decoration: none; transition: color .15s ease; }

#piPop .piBody a:hover, #piPop .piBody a:focus-visible { color: var(--ipLinkHover); }

#piPop .piBody img { display: block; max-width: 100%; height: auto; margin: .6em 0; border-radius: var(--surfaceRadius, 0); }

body.piLock #scroller { overflow-y: hidden; }

   /* page can't scroll while the info pop-up is open */
@media (prefers-reduced-motion: reduce) { #piPop { transition: none; } }

/* ---------- Focused overlay playing a video (Motion Index films with "open": "focus"; pages.js videoBox) ----------
   Same overlay, buttons and fades as the Focused Image; the frame is sized to the video's aspect ratio by pages.js. */
#lbVideo { position: relative; background: #000; }

#lbVideo[hidden] { display: none; }

#lbVideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

#lb.isVideo #lbPrev[hidden], #lb.isVideo #lbNext[hidden] { display: none; }

/* ---------- Header menu grow / fold, driven by rnd.js (the menu IIFE): --mo / --so run 0 -> 1 and turn around mid-way when the
   hover changes, instead of the keyframes above (which restarted from their first frame and flashed). Same clip as the keyframes. */
.menu-nav.jsMenu .menu-panel { animation: none; visibility: hidden; clip-path: inset(0 -60px calc((1 - var(--mo, 0)) * 100%) -60px);
                               transition: border-color calc(var(--layersSpeed, .6) * 1s) cubic-bezier(.65, 0, .35, 1); }

.menu-nav.jsMenu .menu-sub   { animation: none; visibility: hidden; transition: none; clip-path: inset(-60px calc((1 - var(--so, 0)) * 100%) -60px 0); }

.menu-nav.jsMenu .menu-panel.mShow, .menu-nav.jsMenu .menu-sub.mShow { visibility: visible; }

.menu-nav.jsMenu .menu-panel.mFull, .menu-nav.jsMenu .menu-sub.mFull { clip-path: none; }

   /* fully open: no clip, so a sub-menu can hang outside the menu */

/* ---------- Copy Share URL label (rnd.js): "Copied!" switches in instantly, then cross-fades back to the label ---------- */
#shareBtn { display: inline-grid; }

#shareBtn[hidden] { display: none; }

#shareBtn > span { grid-area: 1 / 1; text-align: center; }

#shareBtn .shMsg { opacity: 0; }

#shareBtn.shCopied .shMsg { opacity: 1; }

#shareBtn.shCopied .shLabel { opacity: 0; }

#shareBtn.shFadeBack > span { transition: opacity calc(var(--shareFadeBack, .3) * 1s) ease; }

/* ---------- Footer over the content + defocus strip (same as the live phfx.com footer) ----------
   The scroll region runs on under the footer, so content scrolls BENEATH the bar: the bar is the page colour at --ftrOpacity and
   blurs what passes under it (--ftrBlur). Just above it a defocus strip (--ftrDefocusH tall, --ftrDefocusBlur) softens content as it
   reaches the footer; a mask keeps the bottom --ftrDefocusSolid % at full blur and fades it out upward, so it has no visible edge.
   The scroller gets bottom padding equal to the footer, so the last content can still be scrolled clear of the bar; the custom
   scroll bar keeps its length (its caps stay on the rules) and sits above the footer. Controls: Site Editor > Site Footer. */
:root { --ftrTotal: calc(var(--ftrRuleTop) + var(--ftrRuleH) + var(--ftrRuleBottom) + var(--ftrH)); }

#scrollRegion { margin-bottom: calc(var(--ftrTotal) * -1); }

#scroller { padding-bottom: var(--ftrTotal); }

#scrollGutter { bottom: var(--ftrTotal); z-index: 12; }

#siteFooter { position: relative; z-index: 10;
              background: color-mix(in srgb, var(--bg) calc(var(--ftrOpacity, 82) * 1%), transparent);
              -webkit-backdrop-filter: blur(var(--ftrBlur, 8px)); backdrop-filter: blur(var(--ftrBlur, 8px)); }

#siteFooter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--ftrDefocusH, 48px); pointer-events: none;
                     -webkit-backdrop-filter: blur(var(--ftrDefocusBlur, 5px)); backdrop-filter: blur(var(--ftrDefocusBlur, 5px));
                     -webkit-mask-image: linear-gradient(to top, #000 0%, #000 calc(var(--ftrDefocusSolid, 25) * 1%), transparent 100%);
                             mask-image: linear-gradient(to top, #000 0%, #000 calc(var(--ftrDefocusSolid, 25) * 1%), transparent 100%); }

/* ---------- Directory List (template of public_html/list.html). Page tab > Directory Tree ---------- */
.dlHead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 0 10px;
  font-size: var(--dlLinkSize, 12px); letter-spacing: .12em; text-transform: uppercase; color: var(--dlHeadColor, var(--textDim)); }

.dlHeadActions { display: flex; gap: var(--dlLinkGap, 16px); }

.dlHeadActions a { color: var(--dlCreateColor); text-decoration: none; text-transform: none; letter-spacing: .04em; transition: color .15s ease; }

.dlHeadActions a:hover, .dlHeadActions a:focus-visible { color: var(--dlLinkHover); outline: none; }

.dlTree, .dlHead { font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; }

.dlTree.sans, .dlHead.sans { font-family: var(--font); }

.dlNode { font-size: var(--dlFontSize, 12px); }

.dlRow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: var(--dlRowPad, 4px) 0;
  border-bottom: var(--dlRuleW, 1px) solid var(--dlRuleColor); transition: border-color .15s ease; }

.dlRow:hover { border-bottom-color: var(--dlRuleHover); }

.dlLabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dlDir > .dlRow > .dlLabel { color: var(--dlDirColor); cursor: pointer; user-select: none; outline: none; }

.dlDir > .dlRow > .dlLabel::before { content: "\25B8\00a0"; color: var(--dlChevColor); }

.dlDir.open > .dlRow > .dlLabel::before { content: "\25BE\00a0"; }

.dlDir > .dlRow > .dlLabel:focus-visible { text-decoration: underline; }

.dlFile .dlLabel a { color: var(--dlFileColor); text-decoration: none; transition: color .15s ease; }

.dlFile .dlLabel a:hover { color: var(--dlLinkHover); }

.dlMissing { margin-left: 8px; font-size: .87em; letter-spacing: .08em; color: var(--dlDangerColor); }

.dlKids { display: none; padding-left: var(--dlIndent, 20px); }

.dlDir.open > .dlKids { display: block; }

.dlEmpty { padding: var(--dlRowPad, 4px) 0; color: var(--dlLinkColor); }

.dlLinks { display: flex; gap: var(--dlLinkGap, 16px); flex: none; font-size: var(--dlLinkSize, 12px); }

.dlLinks a { color: var(--dlLinkColor); text-decoration: none; transition: color .15s ease, opacity .15s ease; }

.dlLinks a:hover, .dlLinks a:focus-visible { color: var(--dlLinkHover); outline: none; }

.dlLinks a.dlCreate { color: var(--dlCreateColor); }

.dlLinks a.dlCreate:hover { color: var(--dlLinkHover); }

.dlLinks a.dlRename { color: var(--dlDirColor); }

.dlLinks a.dlRename:hover { opacity: .75; }

.dlLinks a.dlDanger { color: var(--dlDangerColor); }

.dlLinks a.dlDanger:hover { opacity: .75; }

.dlLinks a.dlDel { color: var(--dlLinkColor); }

.dlLinks a.dlDel:hover { color: var(--dlDangerColor); opacity: 1; text-decoration: underline; }

   /* file delete: muted until hovered */
.dlLinks a.dlEdit { color: var(--dlDangerColor); }

.dlLinks a.lv-private { color: var(--dlDangerColor); }

.dlLinks a.lv-password { color: var(--dlDirColor); }

.dlNote { margin: 14px 0 0; font-size: calc(var(--bodyFontSize) - 1px); color: var(--textDim); }

/* shared modal (Directory List pop-ups; ready for the other admin pages): styled by Site Editor > Info Popup */
.rndModal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--focusBg, #000000) calc(var(--focusOpacity, 85) * 1%), transparent); opacity: 0; transition: opacity var(--piPopFade, .3s) ease; }

.rndModal.on { opacity: 1; }

.rndModal[hidden] { display: none; }

.rndModalBox { box-sizing: border-box; width: min(420px, 100%); max-height: calc(var(--piPopMaxH) * 1vh); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--ipPadY) var(--ipPadX) calc(var(--ipPadY) + var(--ipBottomW)) calc(var(--ipPadX) + var(--ipRuleW));
  background: var(--ipBg); border: var(--ipBorderW) solid var(--ipBorder); border-radius: var(--ipRadius);
  box-shadow: inset var(--ipRuleW) 0 0 0 var(--ipRuleColor), inset 0 calc(var(--ipBottomW) * -1) 0 0 var(--ipBottomColor); }

.rndModalBox .piHead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--ipTitleGap); }

.rndModalBox .piTitle { flex: 1 1 auto; margin: 0; font-size: var(--ipTitleSize); font-weight: 400; letter-spacing: .02em; line-height: 1.3; color: var(--ipTitleColor); }

.rndModalBox .piPopClose, #dlSizePop .piPopClose { flex: none; margin: -.2em -.1em 0 0; padding: 0; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--focusCloseSize); line-height: .8; color: var(--focusBtnOff); transition: color .15s ease; }

.rndModalBox .piPopClose:hover, .rndModalBox .piPopClose:focus-visible, #dlSizePop .piPopClose:hover { color: var(--focusBtnHover); outline: none; }

.rndModalBox .piDesc { font-size: var(--ipDescSize); line-height: 1.55; letter-spacing: .02em; color: var(--ipDescColor); word-break: break-all;
  padding-bottom: .75em; margin-bottom: .85em; border-bottom: var(--ipDescRuleW) solid var(--ipDescRuleColor); }

.rndModalBox .piDesc[hidden] { display: none; }

.rndModalBody { display: flex; flex-direction: column; gap: 12px; font-size: var(--ipBodySize); line-height: 1.55; color: var(--ipBodyColor); }

.rndModalBody p { margin: 0; }

.rndModalBody b { font-weight: 500; color: var(--ipTitleColor); }

.rndModalBody .fld { margin: 0; }

.rndModalBody textarea, .rndModalBody select.dd { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX);
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText); resize: vertical; }

.rndModalBody [hidden] { display: none; }

.dlChks { display: flex; flex-direction: column; gap: 6px; }

.dlChks.dlScroll { max-height: 240px; overflow-y: auto; }

.dlChk { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; color: var(--ipBodyColor); }

.dlChk input { accent-color: var(--heroSite); margin: 0; }

.dlHint { font-size: calc(var(--ipBodySize) - 1px); color: var(--ipDescColor); min-height: 1em; margin-top: -6px; }

.dlWarn { color: var(--ipBodyColor); }

.dlDrop { border: 1px dashed var(--ipDescRuleColor); padding: 22px 14px; text-align: center; cursor: pointer; color: var(--ipDescColor); transition: border-color .18s ease, color .18s ease; }

.dlDrop:hover, .dlDrop.over, .dlDrop:focus-visible { border-color: var(--heroSite); color: var(--ipBodyColor); outline: none; }

.dlBrowse { color: var(--ipLinkColor); text-decoration: underline; }

.dlFiles { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }

.dlFiles:empty { display: none; }

.dlFileItem { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--ipDescRuleColor); font-size: calc(var(--ipBodySize) - 1px); }

.dlFileName { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dlFileSize { color: var(--ipDescColor); }

.dlFileItem button { background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--dlDangerColor, #eb1313); font: inherit; }

.rndModalErr { min-height: 1em; margin-top: 10px; font-size: calc(var(--ipBodySize) - 1px); color: var(--dlDangerColor, #eb1313); }

.rndModalErr:empty { margin-top: 0; }

.rndModalActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.rndModalActions [hidden] { display: none; }

.rndModalActions .btn.dlmDanger:hover { border-color: var(--dlDangerColor, #eb1313); color: var(--dlDangerColor, #eb1313); }

@media (prefers-reduced-motion: reduce) { .rndModal { transition: none; } }

/* size readout: one small panel anchored under the clicked "show size" */
#dlSizePop { position: fixed; z-index: 1050; box-sizing: border-box; width: min(300px, calc(100vw - 32px)); padding: 10px 12px;
  background: var(--ipBg); border: max(1px, var(--ipBorderW)) solid var(--ipBorder); border-radius: var(--ipRadius); font-size: calc(var(--ipBodySize) - 1px); color: var(--ipBodyColor); }

#dlSizePop[hidden] { display: none; }

.dlSzHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--ipDescRuleColor);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ipTitleColor); }

#dlSizePop .piPopClose { font-size: calc(var(--focusCloseSize) * .6); }

.dlSzPath { font-family: "Roboto Mono", ui-monospace, monospace; color: var(--ipDescColor); word-break: break-all; margin-bottom: 8px; }

.dlSzRows { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }

.dlSzRows span { color: var(--ipDescColor); }

.dlSzRows b { font-weight: 400; font-family: "Roboto Mono", ui-monospace, monospace; }

.dlSzRows .t { color: var(--ipTitleColor); }

.dlSzNote { margin: 8px 0 0; color: var(--ipDescColor); }

/* ==========================================================
   Production additions (2026 migration)
   Everything below was added when the prototype moved onto phfx.com:
   live menu data, the footer admin chain, gates, the shared pop-up,
   the watermark, and the pages migrated so far.
   ========================================================== */

/* the hidden attribute always wins over a component's own display (.edBtnLine, .btn, flex rows ...) */
[hidden] { display: none !important; }

/* ---------- site menu: live data ---------- */
/* a sub-menu whose list came back empty (or failed) shows no chevron and no flyout */
.menu-group.empty .menu-chev-btn, .menu-group.empty > .menu-sub, .menu-group.empty > .menu-shield { display: none; }
.menu-admin-tag { margin-left: .45rem; padding: 0 .3rem; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--heroSite); border: 1px solid currentColor; opacity: .8; }

/* ---------- footer: admin chain (site.js) ---------- */
#footerAdminMode a { color: var(--textDim); text-decoration: none; transition: color .18s ease; }
#footerAdminMode a:hover, #footerAdminMode a:focus-visible { color: var(--linkHover); outline: none; }
#footerAdminMode .ftrAdminTag { color: #eb1313; }
#footerAdminMode .ftrUserTag { color: var(--linkInactive); }


/* page status: admins see the page with this reminder */
.ps-admin-badge { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; background: var(--surface); border: 1px solid var(--heroSite); font-size: 11px; letter-spacing: .06em; color: var(--textDim); }
.ps-admin-badge strong { color: var(--heroSite); font-weight: 400; }
.ps-admin-badge a { color: var(--linkInactive); text-decoration: none; border-bottom: 1px solid currentColor; }
.ps-admin-badge a:hover { color: var(--linkHover); }
.ps-admin-badge button { background: none; border: 0; padding: 0 0 0 4px; cursor: pointer; font: inherit; font-size: 15px; line-height: 1; color: var(--textDim); }
.ps-admin-badge button:hover { color: var(--linkHover); }

/* access gate: private / password pages */
.gateWrap { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); }
.gateBox { width: min(380px, 100%); min-width: 0; }
.gateBox .holdText { margin: 0; }
.gateFld { width: 100%; margin: 0; }
.gateErr { min-height: 1em; font-size: calc(var(--bodyFontSize) - 1px); color: #eb1313; }

/* hold pages + the page status screen: the "updating" arc */
.holdArc { width: 44px; height: 44px; color: var(--heroSite); }
.holdArcSpin { transform-origin: 50px 50px; animation: ucSpin 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .holdArcSpin { animation: none; } }
.holdBox .surfLabel { margin-bottom: 0; }
.holdMsg .holdCount { margin-left: .35em; }

/* ---------- shared pop-up (phfxSite.modal) ---------- */
.rndModalBox.wide { width: min(560px, 100%); }
.rndModalBody .fld input[type=url], .rndModalBody .fld input[type=number], .fld textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX);
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText); outline: none; resize: vertical; }
.fld textarea:hover, .fld textarea:focus { border-color: var(--ddHoverBorder); background: var(--ddHoverBg); color: var(--ddHoverText); }
.fld .fldHint { letter-spacing: .02em; text-transform: none; font-size: calc(var(--bodyFontSize) - 2px); color: var(--textDim); }
.rndModalBody input[type=file] { font: inherit; font-size: calc(var(--ipBodySize) - 1px); color: var(--ipDescColor); max-width: 100%; }

/* Share Preview (footer > Share Preview) */
.spvHeading { margin: 2px 0 -4px; letter-spacing: .12em; text-transform: uppercase; font-size: calc(var(--ipBodySize) - 2px); color: var(--ipDescColor); }
.spvCard { border: 1px solid var(--ipDescRuleColor); background: var(--bg); }
.spvImg { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.spvImg[hidden], .spvFav[hidden], .spvNoFav[hidden], .spvDesc[hidden] { display: none; }
.spvNoImg { padding: 28px 12px; text-align: center; font-size: calc(var(--ipBodySize) - 1px); color: var(--ipDescColor); border-bottom: 1px solid var(--ipDescRuleColor); }
.spvBody { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.spvDomainRow { display: flex; align-items: center; gap: 6px; }
.spvFav { width: 16px; height: 16px; }
.spvNoFav, .spvDomain { font-size: calc(var(--ipBodySize) - 2px); letter-spacing: .06em; text-transform: uppercase; color: var(--ipDescColor); }
.spvTitle { color: var(--ipTitleColor); }
.spvDesc { font-size: calc(var(--ipBodySize) - 1px); color: var(--ipDescColor); }
.spvNote { font-size: calc(var(--ipBodySize) - 1px); color: var(--ipDescColor); }
.spvUpRow { display: flex; align-items: center; gap: 8px; } .spvUpRow input { flex: 1 1 auto; min-width: 0; }
.spvStatus { min-height: 1em; font-size: calc(var(--ipBodySize) - 1px); color: var(--ipDescColor); }

/* ---------- Watermark: the PNG logo over pictures (Site Editor > Watermark) ----------
   Sized by site.js from the picture's geometric mean (phfxWatermarkWidth); placed per picture by .frame-logo-left / -center. */
.frame-logo { position: absolute; right: var(--wmInset, 8px); bottom: var(--wmInset, 8px); width: 12%; height: auto; max-width: none;
  pointer-events: none; user-select: none; -webkit-user-drag: none; opacity: calc(var(--wmOpacity, 100) / 100); }
.frame-logo-left { right: auto; left: var(--wmInset, 8px); }
.frame-logo-center { right: auto; left: 50%; transform: translateX(-50%); }
/* the click / right-click guard laid over a picture */
.imgProtect { position: absolute; inset: 0; z-index: 3; -webkit-user-select: none; user-select: none; }

/* ---------- generic admin bits used by migrated pages ---------- */
.edBtnLine { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.surfHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.surfHead .surfLabel { margin-bottom: 0; }
.noteDim { margin: 0; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }
.isAdminHidden { opacity: .45; outline: 1px dashed var(--heroHeat); outline-offset: 2px; }
.dangerHover:hover { border-color: #eb1313 !important; color: #eb1313 !important; }

/* ==========================================================
   Pages
   ========================================================== */

/* ---------- Home: random background image hero ---------- */
body[data-page="home"] #pageBody { display: flex; flex-direction: column; gap: var(--surfaceGap, 12px); }
.rbiNotice { padding: 12px 18px; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-left: var(--secRuleW) solid var(--ruleColor);
  border-radius: var(--surfaceRadius); color: var(--bodyTextColor); font-size: calc(var(--bodyFontSize) + 1px); line-height: 1.6; white-space: pre-line; }
.rbiNotice[hidden] { display: none; }
/* The home page has no Page Info; its Message box (above the picture) plays that part, so the space below it is Page Info >
   Space below (--piGap), like Page Info on every other page. The column gap is taken back off so the total is exactly that. */
body[data-page="home"] .rbiNotice { margin-bottom: calc(var(--piGap, 12px) - var(--surfaceGap, 12px)); }
.rbiStage { position: relative; width: 100%; margin-top: var(--hmTopPad, 0px); }   /* Page tab > Home Picture > Top edge padding (the picture still fits the space left below it) */
.rbiFrame { position: relative; width: 100%; height: 0; line-height: 0; }
.rbiLayer { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: block; opacity: 0; object-fit: contain;
  transition: opacity var(--rbiFade, 1200ms) ease-in-out; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.rbiLayer.on { opacity: 1; }
.rbiLogoBox { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; pointer-events: none; z-index: 4; }
.rbiLogoBox .frame-logo { opacity: 0; transition: opacity var(--rbiFade, 1200ms) ease-in-out; }
.rbiLogoBox .frame-logo.on { opacity: calc(var(--wmOpacity, 100) / 100); }
.rbiStage .imgProtect { cursor: default; }
@media (prefers-reduced-motion: reduce) { .rbiLayer, .rbiLogoBox .frame-logo { transition: none; } }
.rbiAdmin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 0; }
.rbiAdmin[hidden] { display: none; }
.rbiAdmin .fld { margin: 0; }
.rbiAdmin .rbiWide { grid-column: 1 / -1; }
.rbiRow { display: flex; align-items: center; gap: 10px; }
.rbiRow input[type=range] { flex: 1 1 auto; }
.rbiRow input[type=number] { width: 90px; box-sizing: border-box; font: inherit; font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX);
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText); }
.rbiVal { color: var(--sliderValue); font-variant-numeric: tabular-nums; }
.rbiActions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rbiActions .grow { flex: 1; }
.rbiStatus { min-height: 1em; font-size: calc(var(--bodyFontSize) - 1px); color: var(--linkInactive); }
.rbiStatus.error { color: #eb1313; }

/* ---------- Login: the lock (Page tab > Login Box > Lock graphic color) ---------- */
.lgLock { color: var(--lgGraphic, var(--linkInactive)); }

/* ---------- Clients ---------- */
.clTile { position: relative; min-width: 0; }
.clBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--surfaceGap, 12px);
  font-size: calc(var(--bodyFontSize) - 1px); color: var(--textDim); }
.clBar .edBtnLine select.dd { width: auto; }
.clTile.editing { cursor: grab; }
.clTile.dragging { opacity: .4; }
.clTile.dragOver { border-color: var(--heroSite); }
.clTileBtns { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; gap: 4px; }
.clTileBtns .btn { flex: 1 1 0; padding: 2px 0; font-size: calc(var(--btnSize) - 2px); }
.clErr { min-height: 1em; margin-top: 8px; font-size: calc(var(--bodyFontSize) - 1px); color: #eb1313; }
.clPreview { width: 64px; height: 64px; flex: none; border: 1px solid var(--ipDescRuleColor); background-color: var(--bodyTextColor);
  -webkit-mask: var(--logo, none) center / 70% no-repeat; mask: var(--logo, none) center / 70% no-repeat; }
.clLogoRow { display: flex; gap: 12px; align-items: flex-start; }
.clLogoRow > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Contact ---------- */
.ctNotice { padding: 12px 18px; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-left: var(--secRuleW) solid var(--ruleColor);
  border-radius: var(--surfaceRadius); color: var(--bodyTextColor); font-size: var(--ctInfoSize, 12px); line-height: 1.6; white-space: pre-line; }
.ctNotice[hidden] { display: none; }
.ctNotice .ctNoticeLabel { margin-right: .5em; letter-spacing: .1em; text-transform: uppercase; color: var(--linkInactive); }

/* ---------- About ---------- */
.abSplit.noPhoto { grid-template-columns: 1fr; }
.abPhoto .imgProtect { cursor: zoom-in; }
.abPhotoNext[hidden] { display: none; }
.abTab.tabOff { opacity: .45; text-decoration: line-through; }
.abTabAdmin { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.abTabAdmin[hidden] { display: none; }
.abBioList { display: flex; flex-direction: column; gap: 10px; }
.abBioSlot img { display: block; width: 100%; height: auto; border-radius: var(--surfaceRadius); }
.abBioSlot .edBtnLine { margin-top: 6px; }
.abBtns { display: flex; flex-wrap: wrap; gap: 8px; }
.abBadge { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 10px; border: var(--btnBorderW) solid var(--btnBorder);
  border-radius: var(--btnRadius); color: var(--btnText); text-decoration: none; transition: border-color .18s ease, color .18s ease; }
a.abBadge:hover { border-color: var(--btnHoverBorder); color: var(--btnHoverText); }
.abBadge .abMark { display: block; height: calc(var(--abBadgeIcon, 18px) * var(--abIconScale, 100) / 100); width: calc(var(--abBadgeIcon, 18px) * 5 * var(--abIconScale, 100) / 100); background-color: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.abOrgs .abOrgLogo { display: block; height: calc(var(--abOrgIcon, 22px) * var(--scale, 1) * var(--abIconScale, 100) / 100); width: calc(var(--abOrgIcon, 22px) * var(--scale, 1) * var(--ar, 3) * var(--abIconScale, 100) / 100); max-width: 100%;
  background-color: var(--linkInactive); -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; transition: background-color .18s ease; }
.abOrgs a.abOrgLogo:hover { background-color: var(--linkHover); }
/* Credits: a link with a logo (IMDb) is drawn like the Organizations icons - no button frame, the link colour, Hover on hover.
   A credit without a logo stays a text button. */
#abCredits .abBadge { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--linkInactive); transition: color .18s ease; }
#abCredits a.abBadge:hover { color: var(--linkHover); }
#abCredits .abBadge .abMark { height: calc(var(--abCreditIcon, 22px) * var(--abIconScale, 100) / 100); width: calc(var(--abCreditIcon, 22px) * 3 * var(--abIconScale, 100) / 100); -webkit-mask-position: left center; mask-position: left center; }
/* the bottom row (BTS Gallery, Client List, Credits, Organizations): everything centred in its box - the label, the
   buttons and the icons (the icons' logos centred inside their own boxes too) */
.abFour > .surf { align-items: center; text-align: center; }
.abFour .abBtns, .abFour .abOrgs { justify-content: center; }
.abFour #abCredits .abBadge .abMark, .abFour .abOrgs .abOrgLogo { -webkit-mask-position: center; mask-position: center; }
.abOrgs .abOrgTag { color: var(--bodyTextColor); }
.abExternal { margin-top: var(--abGap, var(--surfaceGap, 12px)); }
.abExternal.secOff { opacity: .55; outline: 1px dashed var(--heroHeat); outline-offset: 2px; }
.abListRows { display: flex; flex-direction: column; gap: 8px; }
.abListRow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: start; padding: 8px; border: 1px solid var(--ipDescRuleColor); }
.abListRow input[type=text] { width: 100%; box-sizing: border-box; font: inherit; font-size: calc(var(--ddSize) - 1px); padding: 4px 6px;
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText); outline: none; }
.abListRow .abRowBtns { display: flex; gap: 4px; }
.abListRow .abLogoCell { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: calc(var(--ipBodySize) - 2px); color: var(--ipDescColor); }
.abLogoPrev { display: block; width: 72px; height: 22px; background-color: var(--ipBodyColor); -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; }
.abEmpty { font-size: calc(var(--ipBodySize) - 1px); color: var(--ipDescColor); }


/* About: Page tab > About Boxes - the space between the boxes (across and down; the site-wide Space between boxes until
   set here) and the space above the first box */
:where(body[data-page="about"]) .surf { margin-bottom: var(--abGap, var(--surfaceGap, 12px)); }
body[data-page="about"] #pageBody { padding-top: var(--abTopPad, 0px); }

/* About: Page tab > About Titles - each box title its own colour (Hero Foil until set) */
body[data-page="about"] #abPhfxSec .surfLabel { color: var(--abTitlePhfx, var(--heroSite)); }
body[data-page="about"] #abSplit > .surf:first-child .surfLabel { color: var(--abTitlePhil, var(--heroSite)); }
body[data-page="about"] .abFour > .surf:nth-child(1) .surfLabel { color: var(--abTitleBts, var(--heroSite)); }
body[data-page="about"] .abFour > .surf:nth-child(2) .surfLabel { color: var(--abTitleClients, var(--heroSite)); }
body[data-page="about"] .abFour > .surf:nth-child(3) .surfLabel { color: var(--abTitleCredits, var(--heroSite)); }
body[data-page="about"] .abFour > .surf:nth-child(4) .surfLabel { color: var(--abTitleOrgs, var(--heroSite)); }
body[data-page="about"] #abExternalSection .surfLabel { color: var(--abTitleExternal, var(--heroSite)); }


/* ==========================================================
   Shared admin + feedback pieces (batch 2 on)
   ========================================================== */
/* edit-mode bar at the top of a page's content: a note on the left, buttons on the right */
.adminBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--surfaceGap, 12px);
  padding: 10px 14px; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-left: var(--secRuleW, 2px) solid var(--heroHeat);
  border-radius: var(--surfaceRadius); font-size: calc(var(--bodyFontSize) - 1px); color: var(--bodyTextColor); }
.adminBar[hidden] { display: none; }
.adminBarNote { color: var(--textDim); }
/* buttons laid over the bottom of a tile / card in edit mode */
.tileBtns { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4; display: flex; gap: 4px; }
.tileBtns .btn { flex: 1 1 0; min-width: 0; padding: 2px 0; font-size: calc(var(--btnSize) - 2px);
  background: color-mix(in srgb, var(--btnBg) 88%, transparent); }
/* drag to reorder (phfxSite.sortable marks .dragging / .dragOver) */
.sortItem { cursor: grab; }
.sortItem.dragging { opacity: .4; }
.sortItem.dragOver { outline: 2px solid var(--heroHeat); outline-offset: -2px; }
/* "+" tiles that add an entry */
.cardAdd, .thumbAdd { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0; background: none; cursor: pointer;
  border: var(--btnBorderW, 1px) dashed var(--btnBorder); border-radius: var(--thumbRadius, 0px); color: var(--btnText); font: inherit; font-size: 32px; line-height: 1;
  transition: border-color .18s ease, color .18s ease; }
.cardAdd { aspect-ratio: var(--thumbAspect, 2 / 1); }
.thumbAdd { aspect-ratio: var(--thumbAspect, 1 / 1); }
.cardAdd:hover, .thumbAdd:hover { border-color: var(--btnHoverBorder); color: var(--btnHoverText); }
/* a short centred message ("Share URL Copied!"), Info Popup colours */
.phfxToast { position: fixed; left: 50%; top: 50%; z-index: 1300; transform: translate(-50%, -50%); padding: 10px 20px; pointer-events: none;
  background: var(--ipBg); border: var(--ipBorderW, 1px) solid var(--ipBorder); border-radius: var(--ipRadius, 0px); color: var(--ipTitleColor);
  font-size: var(--ipBodySize, 13px); letter-spacing: .04em; opacity: 0; transition: opacity .2s ease; }
.phfxToast.on { opacity: 1; }
/* two fields side by side in a pop-up */
.fldRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fldRow > .fld { min-width: 0; }
.fldRow.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rndModalBody select.dd { width: 100%; }
.rndModalBody .fld input[type=file] { font: inherit; font-size: calc(var(--ipBodySize) - 1px); color: var(--ipBodyColor); }
.rndModalBody .fld[hidden], .rndModalBody .chk[hidden] { display: none; }
.btn.act { border-color: var(--btnActiveBorder); color: var(--btnActiveText); }

/* ==========================================================
   Still / Artwork index: cards in edit mode
   ========================================================== */
body[data-page="stillIndex"] #giRoot > .noteDim { margin-bottom: 12px; }
.cardWrap { position: relative; min-width: 0; }
.cardWrap > .card { height: 100%; }
.cardWrap .tileBtns .btn { font-size: calc(var(--btnSize) - 2px); }

/* ==========================================================
   Gallery viewer (view.html)
   ========================================================== */
.galMsg { padding: 12px 0 24px; color: var(--textDim); font-size: calc(var(--bodyFontSize) + 1px); }
.galMsg[hidden] { display: none; }
/* grid tiles: edit-mode buttons sit above the hover number */
.thumb-cell .tileBtns { z-index: 4; }
.thumb-cell.editing .n { opacity: 1; background: none; align-items: flex-start; justify-content: flex-start; padding: 4px 6px; font-size: calc(var(--bodyFontSize) - 1px); }
.thumb-cell.editing::before { opacity: .25; }
/* strip: the picture box carries the watermark, the click guard and (edit mode) the file details */
.platePic { position: relative; }
figure.plate img.frame-logo { position: absolute; display: block; width: 12%; height: auto; background: none; cursor: default; }
.platePic .imgProtect { cursor: zoom-in; }
figure.plate figcaption { align-items: baseline; flex-wrap: wrap; column-gap: 18px; row-gap: 0; }
figure.plate figcaption .desc { flex: 0 1 auto; }
.capLinks { display: inline-flex; flex-wrap: wrap; gap: 0 14px; }
.capLink { color: var(--linkInactive); text-decoration: none; transition: color .15s ease; }
a.capLink:hover { color: var(--linkHover); }
.plateTools { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.iBtn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--linkInactive); text-decoration: none; transition: color .15s ease; }
.iBtn:hover, .iBtn:focus-visible { color: var(--linkHover); outline: none; }
.iBtn svg { width: 14px; height: 14px; display: block; }
.plateTools .btn.sm { padding: 1px 8px; }
.stripInfo { position: absolute; top: 0; right: 0; z-index: 5; margin: 8px; padding: 5px 9px; max-width: 72%; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right;
  background: rgba(10, 10, 10, .72); border: 1px solid color-mix(in srgb, var(--heroSite) 50%, transparent);
  font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.4; color: #cfcfcf; }
.stripInfo .siFile { color: var(--heroSite); font-weight: 500; word-break: break-all; }
/* focused view: picture box (watermark + click guard), the tool buttons, fullscreen */
#lbPic { position: relative; align-self: center; line-height: 0; }
#lbPic .frame-logo { position: absolute; }
#lbPic .imgProtect { z-index: 3; }
#lbTools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
#lb #lbTools button { position: static; }
#lb .lbIcon { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--focusCloseSize) * .8); height: calc(var(--focusCloseSize) * .8); padding: 0; }
#lb .lbIcon svg { width: calc(var(--focusCloseSize) * .55); height: calc(var(--focusCloseSize) * .55); display: block; }
#lb .lbIcon[hidden] { display: none; }
#lbAdmin { display: inline-flex; align-items: center; gap: 10px; margin-right: 6px; padding-right: 14px; border-right: 1px solid color-mix(in srgb, var(--focusBtnOff) 40%, transparent); }
#lbAdmin[hidden] { display: none; }
#lb .lbAdm { font-size: var(--bodyFontSize); letter-spacing: .04em; padding: 0 2px; line-height: 1.6; }
#lb .lbAdm:disabled { opacity: .35; cursor: default; }
#lbCap { flex-wrap: wrap; column-gap: 18px; row-gap: 0; }
#lbCap .capLinks a { color: var(--linkInactive); }
#lbCap .capLinks a:hover { color: var(--linkHover); }
#lb.isFs { background: #000; }
#lb.isFs #lbTop, #lb.isFs #lbCap, #lb.isFs #lbPrev, #lb.isFs #lbNext { display: none; }
#lbPrev[hidden], #lbNext[hidden] { display: none; }
/* edit mode: every card names itself, so the order is readable without hovering */
.cardWrap.sortItem .cardShade { opacity: calc(var(--cardDim, 65) / 200); }
.cardWrap.sortItem .cardName, .cardWrap.sortItem .cardSupra, .cardWrap.sortItem .cardInfra { opacity: 1; }
/* gallery view (Still, Artwork): Copy Share URL is last, at the far right like every other page - the Page Info
   button (or, without it, the Lightbox / Strip buttons) takes the push to the right instead */
#sectionBar.hasViewBtns #piBtn { margin-left: auto; }
#sectionBar.hasViewBtns #viewBtns { margin-left: auto; }
#sectionBar.hasViewBtns #piBtn:not([hidden]) + #viewBtns { margin-left: var(--secBtnGap, 8px); }
#sectionBar.hasViewBtns #piBtn[hidden] + #viewBtns { margin-left: auto; }
#sectionBar.hasViewBtns #shareBtn { margin-left: var(--secBtnGap, 8px); }


/* ==========================================================
   Motion + Panorama (batch 3): index cards, category editor, motion project page, panorama viewer
   ========================================================== */
/* card extras: a lock on a password-protected project, Draft on an unpublished panorama (always visible, not a title) */
.cardLock { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  color: var(--cardTitleColor, #ebd081); background: rgba(0, 0, 0, .55); border-radius: 50%; pointer-events: none; }
.cardLock svg { display: block; }
.cardBadge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 1px 7px; pointer-events: none;
  font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dlDangerColor, #eb1313); border: 1px solid currentColor; background: rgba(0, 0, 0, .55); }
.cardWrap .cardLock, .cardWrap .cardBadge { z-index: 3; }

/* pop-up rows: category editor, project stills / credits, inline add rows */
.rndModalBody .catRow input[type=text], .rndModalBody .mpRow input[type=text] {
  box-sizing: border-box; font: inherit; font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX); background: var(--ddBg);
  border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText); outline: none; transition: border-color .18s ease; }
.rndModalBody .catRow input[type=text]:hover, .rndModalBody .catRow input[type=text]:focus,
.rndModalBody .mpRow input[type=text]:hover, .rndModalBody .mpRow input[type=text]:focus { border-color: var(--ddHoverBorder); background: var(--ddHoverBg); color: var(--ddHoverText); }
.catRows, .mpRows { display: flex; flex-direction: column; gap: 6px; }
.catRow, .mpRow { display: flex; align-items: center; gap: 6px; }
.catRow input[type=text] { flex: 1 1 auto; min-width: 0; }
.catRow.removed input[type=text] { text-decoration: line-through; opacity: .5; }
.catCount { flex: none; min-width: 7em; text-align: right; font-size: calc(var(--ipBodySize) - 2px); color: var(--ipDescColor); }
.catRow .btn.sm, .mpRow .btn.sm { flex: none; min-width: 2.2em; }
.mpRow input[type=text] { flex: 1 1 0; min-width: 0; }
.mpRow input[data-f=file], .mpRow input[data-f=role] { flex: 0 0 38%; }
.fld > .catAddRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: normal; text-transform: none; font-size: inherit; color: inherit; }
.catAddRow > input[type=text], .catAddRow > select, .catAddRow > input[type=file] { flex: 1 1 auto; min-width: 0; width: auto; }
.catAddRow > .fldHint { flex: 1 1 12em; }
.fld .fldHint.bad { color: var(--dlDangerColor, #eb1313); }
.fld .edBtnLine { letter-spacing: normal; text-transform: none; }
label.btn.mpUpload { cursor: pointer; }
.mpWarn { margin: 0; font-size: calc(var(--ipBodySize) - 1px); color: var(--ipDescColor); }
.mpWarn b { color: var(--dlDangerColor, #eb1313); font-weight: 400; }
/* film pop-up: poster preview beside its controls */
.posterRow { display: flex; gap: 10px; align-items: flex-start; letter-spacing: normal; text-transform: none; }
.posterPrev { flex: none; width: 120px; aspect-ratio: var(--thumbAspect, 2 / 1); object-fit: cover; background: #111; border: 1px solid var(--ipDescRuleColor); }
.posterCtl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Page Info: the intro's optional picture and sign-off */
.piBody .piFigure { margin: 0 0 .85em; }
.piBody .piFigure img { margin: 0; }
.piBody .piSign { color: var(--textDim); }

/* ---------- Motion project page ---------- */
.mpVideo { position: relative; }
.mpVideo video { width: 100%; height: 100%; display: block; background: #000; }
.mpCols.single { grid-template-columns: 1fr; }
.mpBody p { margin: 0; }
.mpBody p + p { margin-top: .85em; }
.mpStill img { background: #111; }
.visTag { display: inline-block; margin-left: 10px; padding: 1px 7px; vertical-align: middle; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dlDangerColor, #eb1313); border: 1px solid currentColor; }
body[data-page="motionPage"] #mpRoot > .adminBar { margin-bottom: var(--mpGap, 12px); }
/* the password gate (styled like the login box) */
.lgBox.mpGate { margin-top: 24px; text-align: center; }
.mpGateTitle { margin: 0 0 8px; font-weight: 400; font-size: calc(var(--secFontSize) + 2px); letter-spacing: .03em; color: var(--mpTitleColor, var(--heroSite)); }
.mpGateNote { margin: 0 0 16px; line-height: 1.6; color: var(--textDim); }
.mpGateErr { min-height: 1.3em; margin: -4px 0 10px; color: var(--heroHeat); }

/* ---------- Panorama viewer ---------- */
.pano-viewer-frame .frame-logo { z-index: 3; }
.pano-ref-format-btn { font-size: var(--panoHudSize); letter-spacing: .04em; background: rgba(0, 0, 0, .45); border: 1px solid var(--btnBorder); padding: 5px 9px; text-align: left;
  color: #e6e6e6; cursor: pointer; pointer-events: auto; transition: color .18s ease, border-color .18s ease; }
.pano-ref-format-btn:hover { color: var(--heroSite); border-color: var(--heroSite); }
.panorama-view-title { margin: 0; }
.panorama-draft-banner { padding: 6px 12px; font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .06em;
  color: var(--dlDangerColor, #eb1313); border: 1px solid currentColor; }
body[data-page="panoramaPage"] #panoAdmin { margin-bottom: var(--panoMetaGap, 16px); }

/* the Focused overlay playing a local file fills its frame like the YouTube / Vimeo player */
#lbVideo video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
/* a pop-up's sub line wraps at spaces; only a long unbroken path breaks mid-word */
.rndModalBox .piDesc { word-break: normal; overflow-wrap: anywhere; }


/* ==========================================================
   Tools (batch 4): the tool pages' content header + the tools index
   ========================================================== */
/* Buy Phil a Coffee (pages/toolPage.js): beside Copy Share URL. Page tab > Buy Phil a Coffee */
#sectionBar #coffeeBtn { flex: none; margin-left: var(--secBtnGap, 8px); text-decoration: none; display: inline-block; white-space: nowrap; }
#sectionBar #coffeeBtn[hidden] { display: none; }
#sectionBar #shareBtn[hidden] + #coffeeBtn { margin-left: auto; }
#sectionBar #shareBtn[hidden] + #coffeeBtn[hidden] + #piBtn { margin-left: auto; }

/* ---------- Tools index (pages/toolsIndex.js) ---------- */
/* markers in a card's top right: "admin" = visitors don't see this tool, "si" = it has its own share picture (edit mode) */
.tBadges { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; pointer-events: none; }
.tBadges:empty { display: none; }
.tBadge { padding: 1px 6px; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--textDim); border: 1px solid currentColor; }
.tBadge.adm { color: var(--dlDangerColor, #eb1313); }
.tcard.tAdmin .tname { padding-right: 52px; }
/* edit mode: room under the text for the arrow / edit buttons */
.cardWrap > .tcard { height: 100%; padding-bottom: calc(var(--toolPad, 18px) + 30px); }
/* the share picture in the tool pop-up keeps the share card's shape (1536 x 810) */
.posterPrev.siPrev { width: 160px; aspect-ratio: 1536 / 810; }

/* ---------- printing (any 2026 page) ----------
   The shell is a fixed-height layout whose content scrolls inside it: on paper that would clip the page to one screen.
   Release it and print the content alone - no site header, content header, footer, scroll bar or admin furniture.
   (The License Quote document and the tools' datasheets print this way.) */
@media print {
  html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  #canvas { width: auto !important; height: auto !important; display: block !important; }
  #scrollRegion { margin: 0 !important; }
  #scroller { position: static !important; overflow: visible !important; padding-bottom: 0 !important; animation: none !important; }
  #canvas .content { width: auto !important; margin-left: 0 !important; }
  #siteHeader, #sectionBar, #siteFooter, #scrollGutter, #guides, #pageInfo, #piPop, #ed, .phfx-vp-chip, .adminBar, .rndModal { display: none !important; }
}


/* ==========================================================
   Shop (batch 5): the index cards' extras, the item page's extras, the Shop Manager's column
   ========================================================== */
/* a picture still to come (or a missing file): the aperture mark on the frame */
.sNoImg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--textDim); }
.sNoImg svg { width: 40px; height: 40px; opacity: .5; }
.spStage .sNoImg { position: static; width: 100%; height: 100%; }

/* ---------- Shop index (pages/shopIndex.js) ---------- */
/* an unlisted item (admin only): Draft in the top right, the Available / Sold Out tag keeps the top left */
.scard .cardBadge { left: auto; right: 8px; }
.scard.is-draft { border-style: dashed; }
/* edit mode: room under the title for the arrow / edit buttons; the "+" card opens the manager on a new item */
.cardWrap > .scard { height: 100%; }
.cardWrap > .scard .sbody { padding-bottom: 40px; }
.sgrid > .cardAdd { aspect-ratio: auto; min-height: 160px; border-radius: var(--shopCardRadius, var(--surfaceRadius)); text-decoration: none; }

/* ---------- Shop item (pages/shopProduct.js) ---------- */
.spStage.noPics { cursor: default; }
.spStatus { display: flex; gap: 6px; flex-wrap: wrap; }
.stag.draft { color: var(--dlDangerColor, #eb1313); border-color: currentColor; }
.spProse p:last-child { margin-bottom: 0; }
.spProse a, .spBuyNote a { color: var(--linkInactive); text-decoration: underline; text-underline-offset: 2px; transition: color .18s ease; }
.spProse a:hover, .spBuyNote a:hover { color: var(--linkHover); }
.spProse strong { font-weight: 700; }
/* the item's detail rows: label / value, ruled with the Surface interior line */
.spSpecs { margin: 0; display: flex; flex-direction: column; border-top: var(--surfaceInnerBorderW, 1px) solid var(--surfaceBorder); }
.spSpec { display: grid; grid-template-columns: minmax(7em, 34%) 1fr; gap: 12px; padding: 7px 0; border-bottom: var(--surfaceInnerBorderW, 1px) solid var(--surfaceBorder); }
.spSpec dt { color: var(--textDim); letter-spacing: .08em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 1px); line-height: 1.6; }
.spSpec dd { margin: 0; color: var(--bodyTextColor); font-size: var(--bodyFontSize); line-height: 1.6; overflow-wrap: anywhere; }
.spBuy.is-sold { opacity: .85; }
.spBuyLink .arr { flex: none; margin-left: 12px; }
/* no item by that name / no name in the link */
.spState { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 16px; text-align: center; color: var(--textDim); }
.spState svg { width: 40px; height: 40px; opacity: .5; }
.spState p { margin: 0; font-size: calc(var(--bodyFontSize) + 1px); }

/* ---------- Shop Manager (shop/edit.html: display/js/shopEdit.js, styled by shopEdit.css) ---------- */
body[data-page="shopEdit"] #pageBody { padding: 0 0 32px; }


/* ==========================================================
   Batch 6 - Insights: the article page's remaining article parts (videos, caption alignments, thumbnail rows,
   wallpaper grids, quotes, lists, the watermark frame), the index's card bits and the editor.
   ========================================================== */

/* ---------- Insights - View ---------- */
/* a picture in the article: the watermark and the click guard ride on its frame (Site Editor > Watermark) */
.artPic { position: relative; display: inline-block; max-width: 100%; vertical-align: top; line-height: 0; }
.article-content .artPic > img:first-child { display: block; max-width: 100%; height: auto; margin: 0; }
.article-content .artPic .frame-logo, .article-content .article-compare .frame-logo { margin: 0; max-width: none; display: block; z-index: 2; }
.artPic .imgProtect { cursor: zoom-in; }
/* a line holding only pictures (the old ports' rows of three) shares the width */
.artPicRow { display: flex; gap: 8px; justify-content: center; align-items: flex-start; }
.artPicRow > .artPic { flex: 1 1 0; min-width: 0; width: auto !important; }
.article-content .artPicRow > .artPic > img:first-child { width: 100% !important; }

/* caption alignment (the editor's Left / Center / Right) */
.article-figcaption--left { align-items: flex-start; text-align: left; }
.article-figcaption--center { align-items: center; text-align: center; }
p.article-figcaption { margin: -.4em 0 1em; }

/* a picture at thumbnail size (the editor's Size: Thumbnail) */
.article-figure--thumb { display: inline-block; vertical-align: top; width: calc(12.5% - 6px); margin: 0 6px 6px 0; }
.article-figure--thumb .article-figure-media { display: block; }
.article-figure--thumb .artPic, .article-figure--thumb .artPic > img:first-child { width: 100%; }
.article-content .article-figure--thumb .artPic > img:first-child { aspect-ratio: 1 / 1; object-fit: cover; }
.article-figure--thumb .article-figcaption { display: none; }

/* videos: YouTube / Vimeo / a file, 16:9 */
.article-figure--video .article-figure-media { display: block; }
.article-embed { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.article-embed iframe, .article-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* thumbnails (8 to a row): the row's own line, no gaps from the line height */
.article-content p.article-thumbs { line-height: 0; margin-bottom: .6em; }
.article-thumb-item:focus-visible { outline: 2px solid var(--linkHover); outline-offset: -2px; }

/* the wallpaper downloads of the old Quantum Flows article: a grid of linked thumbnails */
.article-content .article-linkgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; line-height: 0; }
.article-linkgrid a { display: block; }
.article-content .article-linkgrid img { width: 100%; height: auto; display: block; margin: 0; transition: opacity .18s ease; }
.article-linkgrid a:hover img { opacity: .75; }

/* quotes, lists, sub-headings */
.article-content blockquote { margin: 0 0 1em; padding: 2px 0 2px 18px; border-left: 2px solid var(--ruleColor); color: var(--textDim); font-style: italic; }
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content ul, .article-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.article-content li { margin: .2em 0; }
.article-content h3 { font-weight: 500; font-size: calc(var(--bodyFontSize) + 3px); margin: 1.2em 0 .4em; color: var(--pageTitleColor); letter-spacing: .02em; }
.article-content strong { font-weight: 500; }
.article-content a:hover { color: var(--linkHover); }

/* Site Editor > Insights View > Title Image: Show = the entry's title picture above the article */
.artHero { margin: 0; border-radius: var(--surfaceRadius); overflow: hidden; line-height: 0; }
.artHero img { width: 100%; height: auto; display: block; }

/* an admin looking at a draft */
.artDraft { margin-bottom: var(--artChapGap, 12px); padding: 8px 14px; border: 1px dashed var(--ruleColor); color: var(--heroSite); font-size: var(--bodyFontSize); letter-spacing: .04em; }
.artState .spBack { margin-top: 12px; }

/* ---------- Insights - Gallery Index ---------- */
.ethumb { position: relative; }
.ethumb.noImg { background-image: none; }
.ecard .cardBadge { left: auto; right: 8px; }
.ecard.is-draft { border-style: dashed; }
.cardWrap > .ecard { height: 100%; }
.cardWrap > .ecard .ebody { padding-bottom: 40px; }
.egrid > .cardAdd { aspect-ratio: auto; min-height: 160px; border-radius: var(--entryCardRadius, var(--surfaceRadius)); text-decoration: none; }

/* ---------- Insights - Editor ---------- */
body[data-page="insightsEditor"] #pageBody { padding: 0 0 40px; }
.ieMeta .ieRow { align-items: start; }
.ieMeta .fld > input[type=text] { width: 100%; }
.iePick { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.iePick select.dd { flex: 1 1 auto; min-width: 0; }
.iePick select.dd:disabled { opacity: .6; cursor: default; }
.ieUp { flex: none; cursor: pointer; }
.ieUp input[type=file] { display: none; }
.ieBar .ieTools { gap: 4px; }                                /* the whole toolbar on one line at the content width */
.ieTools .btn { min-width: 34px; padding-left: 10px; padding-right: 10px; }
.ieTools .btn svg { display: block; margin: 0 auto; }
.ieActions .ieStatus { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .04em; }
.ieErr { color: var(--dlDangerColor, #eb1313); font-size: calc(var(--bodyFontSize) - 1px); }
.ieErr:empty { display: none; }
.ieRemove { margin: 4px 0 0; }
/* the article as it is written: the same pieces as on the page, without the surfaces */
.iePane p { margin: 0 0 1em; }
.iePane img { max-width: 100%; height: auto; }
.iePane a { color: var(--linkInactive); }
.iePane hr { border: 0; border-top: 1px solid var(--surfaceBorder); margin: .4em 0 1em; }
.iePane h2.article-chapter { margin: 1.4em 0 .3em; }
.iePane h2.article-chapter:first-child { margin-top: 0; }
.iePane h2.article-chapter a { color: inherit; text-decoration: none; }
.iePane blockquote { margin: 0 0 1em; padding: 2px 0 2px 18px; border-left: 2px solid var(--ruleColor); color: var(--textDim); font-style: italic; }
.iePane ul, .iePane ol { margin: 0 0 1em; padding-left: 1.4em; }
.iePane .article-figure img { display: block; margin: 0 auto; cursor: pointer; }
.iePane .article-figure--image .article-figure-media { display: block; text-align: center; }
.iePane .article-figure:hover, .iePane .article-thumb-item:hover { outline: 1px dashed var(--linkHover); outline-offset: 2px; }
.iePane .article-embed, .iePane .article-compare, .iePane .article-thumb-item { cursor: pointer; }
.iePane .article-embed iframe, .iePane .article-embed video { pointer-events: none; }   /* a click on a video opens its pop-up */
.iePane .article-linkgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }

/* ---------- Category row (every index page) ---------- */
/* More categories than fit beside the title and the buttons: the row scrolls sideways (wheel, touch, keys) and the hidden
   ends fade (cardIndex.js sets fadeL / fadeR), instead of running under Copy Share URL. The padding keeps the sliding
   underline inside the scrolling box; the negative margin keeps the row centred as before. */
#sectionBar .cats { flex: 0 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  padding-bottom: calc(var(--catLineGap, 4px) + var(--catLineH, 2px) + 2px); margin-bottom: calc(-1 * (var(--catLineGap, 4px) + var(--catLineH, 2px) + 2px)); }
#sectionBar .cats::-webkit-scrollbar { display: none; }
#sectionBar .cats.fadeR { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
#sectionBar .cats.fadeL { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
#sectionBar .cats.fadeL.fadeR { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
#sectionBar #shareBtn, #sectionBar #revealTitlesBtn, #sectionBar #piBtn { flex: none; }
#sectionBar #pageCats ~ #shareBtn, #sectionBar #pageCats ~ #revealTitlesBtn { margin-left: 16px; }
/* Reveal Titles sits against Copy Share URL at the right, as on the Still gallery (the bar spreads its items apart, so
   without this the button floated mid-way between the categories and Copy Share URL) */
#sectionBar #pageCats ~ #revealTitlesBtn { margin-left: auto; }
/* Panorama, Motion, Insights and Resources indexes: the categories sit at the left, right after the index title (24px), and the
   buttons stay at the right */
:is(body[data-page="panoramaIndex"], body[data-page="motionIndex"], body[data-page="insightsIndex"], body[data-page="resourcesIndex"]) #sectionBar #pageCats { margin-right: auto; }
:is(body[data-page="panoramaIndex"], body[data-page="motionIndex"], body[data-page="insightsIndex"], body[data-page="resourcesIndex"]) #sectionBar #pageCats ~ #revealTitlesBtn { margin-left: 16px; }


/* ==========================================================
   Batch 7 - Resources, Catalog, Equipment: the Resources manager's editor and row buttons, the Catalog (cards, the
   quote drawer, the printable quote) and the public Equipment List. A few shared form pieces come first.
   ========================================================== */

/* ---------- shared: text boxes outside a .fld (rows of inputs), and the .fld kinds the pop-up styles had to itself ---------- */
.inp, .fld input[type=number], .fld input[type=url], .fld input[type=date], .fld input[type=search] {
  box-sizing: border-box; min-width: 0; font: inherit; font-size: var(--ddSize); padding: var(--ddPadY) var(--ddPadX);
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText);
  outline: none; transition: border-color .18s ease, background .18s ease; }
.inp:hover, .inp:focus, .fld input[type=number]:hover, .fld input[type=number]:focus, .fld input[type=url]:hover, .fld input[type=url]:focus,
.fld input[type=date]:hover, .fld input[type=date]:focus, .fld input[type=search]:hover, .fld input[type=search]:focus {
  border-color: var(--ddHoverBorder); background: var(--ddHoverBg); color: var(--ddHoverText); }
.inp::placeholder, :is(.rsEditor, .ctTools, .ctQBody, .eqTools) :is(input, textarea)::placeholder { color: var(--textDim); opacity: .7; }
.inp:disabled { opacity: .5; }
input.inp[type=date], .fld input[type=date] { color-scheme: dark; }
:root[data-theme="light"] input.inp[type=date], :root[data-theme="light"] .fld input[type=date] { color-scheme: light; }

/* ---------- Resources - the gallery (everyone): one card per page, title + description (Page tab > Resource Cards) ----------
   Same scheme as the Tools index cards: surface colours, rounded corners (8px), the hover outline drawn inside the card in
   Hero Heat, the title bold in the title colour, the description dimmed. */
.rsGallery[hidden], .rsManager[hidden] { display: none; }
.rsGrid { display: grid; grid-template-columns: repeat(var(--rsPerRow, 2), minmax(0, 1fr)); gap: var(--rsGap, var(--surfaceGap, 12px)); }
.rsCard { position: relative; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--rsCardPad, 18px); text-decoration: none;
  border-radius: var(--rsRadius, 8px); }
.rsCard::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 var(--rsHoverOutlineW, 1px) var(--rsHoverOutline, var(--heroHeat)); opacity: 0; transition: opacity .18s ease; }   /* hover outline drawn inside the card */
.rsCard:hover::after, .rsCard:focus-visible::after { opacity: 1; }
.rsCard:focus-visible { outline: none; }
.rsCardTitle { display: flex; align-items: baseline; gap: 10px; font-size: var(--rsTitleSize, 14px); font-weight: 700; letter-spacing: .04em; line-height: 1.35;
  color: var(--rsTitleColor, var(--heroSite)); }
.rsCardTag { flex: none; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase; color: var(--rsPrivateColor, #eb1313); }
.rsCardTag { font-weight: 400; }
.rsCardDesc { font-size: var(--rsDescSize, 12px); line-height: 1.45; color: var(--textDim); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Resources - the manager (pages/resourcesIndex.js, admin: footer > edit) ---------- */
.rsRow .rsCat { flex: 0 0 130px; color: var(--textDim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsBar { display: flex; align-items: center; gap: 12px; }
.rsCountNote { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }
.rsHead .rsSlug { font-size: inherit; }
.rsRow .rsActs { flex: 0 0 auto; display: flex; gap: 4px; justify-content: flex-end; min-width: 196px; }
.rsRow:not(.rsHead) { transition: background .15s ease; }
.rsRow:not(.rsHead):hover { background: color-mix(in srgb, var(--rsTitleColor) 6%, transparent); }
.rsRow.editing { background: color-mix(in srgb, var(--rsTitleColor) 10%, transparent); }
.rsEmpty { margin: 0; padding: 22px var(--rsRowPadX); color: var(--textDim); text-align: center; }
.rsEditor .surfHead { align-items: baseline; }
.rsEdAddr { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .02em; }
.rsEdAddr.pending { font-style: italic; }
.rsEditor .fld > input[type=text] { width: 100%; }
.rsSub { margin: 6px 0 8px; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 2px); color: var(--textDim); }
.rsLinkRow { display: grid; grid-template-columns: 180px minmax(0, 1fr) 200px auto auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.rsLinkRow .btn.sm { min-width: 30px; }
.rsAddLine { margin: 4px 0 0; }
.rsEdActions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: var(--surfaceInnerBorderW, 1px) solid var(--surfaceBorder); }
.rsEdErr { flex: 1 1 auto; color: var(--dlDangerColor, #eb1313); font-size: calc(var(--bodyFontSize) - 1px); }
.rsEdActions a.btn { text-decoration: none; }

/* ---------- Resources - a page (pages/resourcesPage.js) ---------- */
.rpLinks .btn { text-decoration: none; display: inline-flex; align-items: center; }
.rpDesc + .rpLinks, .rpDesc + .rpEmpty { margin-top: 20px; }
.rpLinks:first-child { margin-top: 0; }

/* ---------- Catalog (pages/catalogIndex.js) ----------
   Site Editor > Page tab > Catalog Cards / Quote: cards per row, gap, picture aspect, corner radius, hover outline, the name /
   rate / heading colours and the quote drawer's edge. Page Info defaults to the info icon here: the intro tells a visitor
   how the catalog works (no weight of its own, so a value set in the Site Editor wins). */
:where(body[data-page="catalogIndex"]) { --pageInfo: icon; }
.ctDraft { margin: 0 0 var(--surfaceGap, 12px); padding: 8px 14px; border: 1px dashed var(--dlDangerColor, #eb1313); color: var(--dlDangerColor, #eb1313);
  letter-spacing: .06em; font-size: calc(var(--bodyFontSize) - 1px); }
.ctTools { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 14px 18px; }
.ctTools .fld { margin-bottom: 0; }
.ctDate input[type=date] { width: 170px; }
.ctDays { padding: 0 2px calc(var(--ddPadY) + var(--ddBorderW, 1px)); color: var(--ctRateColor, var(--heroFoil)); white-space: nowrap; letter-spacing: .04em; }
.ctSearch { flex: 1 1 220px; min-width: 180px; }
.ctSearch input { width: 100%; }
.ctSecHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--ctRuleColor, var(--heroEdge)); letter-spacing: .08em; text-transform: uppercase; color: var(--ctHeadColor, var(--heroSite)); }
.ctList > .ctSecHead:first-child { margin-top: 6px; }
.ctSecCount { color: var(--textDim); letter-spacing: .02em; text-transform: none; font-size: calc(var(--bodyFontSize) - 1px); }
.ctGrid { display: grid; grid-template-columns: repeat(var(--ctPerRow, 4), minmax(0, 1fr)); gap: var(--ctGap, 8px); }
.ctList > .ctGrid:first-child, .ctAddRow { margin-top: 6px; }
.ctCard { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder);
  border-radius: var(--ctCardRadius, var(--surfaceRadius)); overflow: hidden; color: var(--bodyTextColor); }
.ctCard::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 var(--ctHoverOutlineW, 1px) var(--ctHoverOutline, var(--linkHover)); opacity: 0; transition: opacity .18s ease; }
.ctCard:hover::after, .ctCard:focus-within::after { opacity: 1; }
.ctCard.is-hidden { border-style: dashed; border-color: var(--textDim); }
.ctPic { position: relative; display: block; aspect-ratio: var(--ctAspect, 4 / 3); background: var(--toolStageBg, #111); overflow: hidden; }
.ctPic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctCard.is-out .ctPic img { opacity: .5; }
.ctPicNone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; letter-spacing: .14em; text-transform: uppercase;
  font-size: calc(var(--bodyFontSize) - 2px); color: var(--textDim); }
.ctPic .cardBadge { left: auto; right: 8px; }
.ctInQuote { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 2px 7px; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.4; color: var(--ctRateColor, var(--heroFoil)); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid currentColor; }
.ctBody { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1 1 auto; min-width: 0; }
.ctName { font-weight: 700; letter-spacing: .03em; font-size: calc(var(--bodyFontSize) + 1px); line-height: 1.3; color: var(--ctTitleColor, var(--heroSite)); overflow-wrap: anywhere; }
.ctSub { font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .08em; text-transform: uppercase; color: var(--textDim); }
.ctDesc { font-size: calc(var(--bodyFontSize) - 1px); line-height: 1.45; color: var(--textDim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ctMeta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.ctRate { color: var(--ctRateColor, var(--heroFoil)); }
.ctAvail { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 2px); }
.ctAdd { margin-top: 8px; width: 100%; }
body.editing .ctCard .ctBody { padding-bottom: 44px; }     /* room for the edit button over the card's foot */
.ctAddRow > .cardAdd { aspect-ratio: auto; min-height: 120px; border-radius: var(--ctCardRadius, var(--surfaceRadius)); }
.ctEmpty { padding: 24px 0; text-align: center; }
/* the quote: a drawer that stays above the footer while the catalog scrolls under it */
.ctQuote { position: sticky; bottom: 8px; z-index: 11;   /* sticky keeps inside the scroller's bottom padding (the footer's height), so 8px sits it just above the footer */
  margin-top: 18px; background: var(--surface);
  border: var(--surfaceBorderW, 1px) solid var(--ctQuoteBorder, var(--heroSite)); border-radius: var(--surfaceRadius); }
.ctQHead { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 12px 18px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--bodyFontSize); color: var(--bodyTextColor); text-align: left; }
.ctQHead:focus-visible { outline: 1px solid var(--linkHover); outline-offset: -3px; }
.ctQLabel { letter-spacing: .1em; text-transform: uppercase; color: var(--ctHeadColor, var(--heroSite)); }
.ctQCount { flex: 1 1 auto; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }
.ctQTotal { font-weight: 700; color: var(--ctRateColor, var(--heroFoil)); }
.ctQChev { color: var(--textDim); transition: transform .2s ease; }
.ctQuote.open .ctQChev { transform: rotate(180deg); }
.ctQHead.bump .ctQTotal { animation: ctBump .6s ease; }
@keyframes ctBump { 0% { color: var(--linkHover); } 100% { color: var(--ctRateColor, var(--heroFoil)); } }
@media (prefers-reduced-motion: reduce) { .ctQHead.bump .ctQTotal { animation: none; } }
.ctQBody { padding: 4px 18px 16px; border-top: 1px solid var(--ctRuleColor, var(--heroEdge)); max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
.ctQBody .fldRow { margin-top: 12px; }
.ctQBody .fld > input[type=text] { width: 100%; }
.ctLine { display: grid; grid-template-columns: minmax(0, 1fr) 72px 110px 150px 104px 30px; gap: 8px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--ctRuleColor, var(--heroEdge)); }
.ctLineHead { padding-top: 0; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 3px); color: var(--textDim); }
.ctLineHead > span:nth-child(5) { text-align: right; }
.ctLName { min-width: 0; overflow-wrap: anywhere; }
.ctLType { display: block; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase; color: var(--textDim); }
.ctLSub, .ctLRate, .ctLNone { color: var(--textDim); }
.ctLRate { white-space: nowrap; }
.ctLine .inp { width: 100%; text-align: center; padding-left: 4px; padding-right: 4px; }
.ctLDisc { display: flex; gap: 4px; }
.ctLDisc .inp { flex: 1 1 auto; }
.ctLDisc select.dd { flex: 0 0 auto; width: auto; }
.ctLTotal { text-align: right; white-space: nowrap; color: var(--ctRateColor, var(--heroFoil)); }
.ctLRm { padding-left: 0; padding-right: 0; }
.ctSum { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 10px; }
.ctSum > div { display: flex; justify-content: space-between; gap: 18px; min-width: 240px; color: var(--textDim); }
.ctSum > .ctSumTotal { color: var(--bodyTextColor); font-weight: 700; font-size: calc(var(--bodyFontSize) + 2px); }
.ctSumTotal > span:last-child { color: var(--ctRateColor, var(--heroFoil)); }
.ctQActions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ctQStatus { flex: 1 1 auto; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }
.ctQStatus.bad { color: var(--dlDangerColor, #eb1313); }
/* the saved quotes (admin pop-up) and the item pop-up's delete */
.ctSavedRow { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--ipDescRuleColor); }
.ctSavedRow:last-child { border-bottom: 0; }
.ctSavedMain { flex: 1 1 auto; min-width: 0; }
.ctSavedName { color: var(--ipTitleColor); overflow-wrap: anywhere; }
.ctSavedMeta { font-size: calc(var(--ipBodySize, 13px) - 2px); color: var(--ipDescColor); }
.ctDelLine { margin: 6px 0 0; }

/* ---------- Catalog - a saved quote (pages/catalogQuote.js): Site Editor > Page tab > Quote Document ---------- */
.qdDoc { padding: 26px 30px; }
.qdHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--qdRuleColor, var(--heroEdge)); }
.qdBrand { font-size: 28px; font-weight: 700; letter-spacing: .14em; line-height: 1; color: var(--qdBrandColor, var(--heroSite)); }
.qdClient { margin-top: 8px; font-size: calc(var(--bodyFontSize) + 3px); }
.qdMeta { display: flex; flex-direction: column; gap: 3px; text-align: right; }
.qdLabel { font-size: calc(var(--bodyFontSize) + 3px); }
.qdDates, .qdId { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }
.qdTable { width: 100%; border-collapse: collapse; font-size: var(--bodyFontSize); }
.qdTable th { padding: 8px 6px; text-align: left; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 3px);
  color: var(--textDim); border-bottom: 1px solid var(--qdRuleColor, var(--heroEdge)); }
.qdTable td { padding: 8px 6px; vertical-align: top; border-bottom: 1px solid var(--qdRuleColor, var(--heroEdge)); }
.qdTable .num { text-align: right; white-space: nowrap; }
.qdSub, .qdNone { color: var(--textDim); }
.qdTotals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-top: 14px; }
.qdTotals > div { display: flex; justify-content: space-between; gap: 24px; min-width: 260px; color: var(--textDim); }
.qdTotals > .qdGrand { padding-top: 6px; border-top: 1px solid var(--qdRuleColor, var(--heroEdge)); color: var(--bodyTextColor); font-weight: 700; font-size: calc(var(--bodyFontSize) + 3px); }
.qdActions { display: flex; justify-content: flex-end; gap: 8px; }
/* printed: the document alone, black on white, the whole of it (not the window's worth the scroller shows) */
@media print {
  @page { margin: 14mm; }
  :root:has(body[data-page="catalogQuote"]), body[data-page="catalogQuote"] { height: auto !important; overflow: visible !important; background: #fff !important; }
  body[data-page="catalogQuote"] :is(#siteHeader, #sectionBar, #siteFooter, #scrollGutter, #guides, #pageInfo, #piBtn, .qdActions, .phfxToast, .ps-admin-badge, .phfx-vp-chip, #ed, #edOpen, #cpop) { display: none !important; }
  body[data-page="catalogQuote"] :is(#canvas, #scrollRegion, #scroller, #pageBody) { position: static !important; display: block !important; width: auto !important; height: auto !important;
    overflow: visible !important; margin: 0 !important; padding: 0 !important; animation: none !important; }
  body[data-page="catalogQuote"] .qdDoc { background: #fff !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
  body[data-page="catalogQuote"] .qdDoc, body[data-page="catalogQuote"] .qdDoc * { color: #000 !important; border-color: #9a9a9a !important; }
}

/* ---------- Equipment List (pages/equipmentIndex.js): Site Editor > Page tab > Equipment List ---------- */
.eqTools { padding: 14px 18px; }
.eqTools .fld { margin-bottom: 0; }
.eqSearch input { width: 100%; }
.eqBlock { margin-top: 22px; }
.eqBlockHead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--eqRuleColor, var(--heroEdge));
  letter-spacing: .1em; text-transform: uppercase; color: var(--eqHeadColor, var(--heroSite)); }
.eqBlockCount { color: var(--textDim); letter-spacing: .02em; font-size: calc(var(--bodyFontSize) - 1px); }
.eqHiddenTag { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px dashed currentColor; color: var(--dlDangerColor, #eb1313);
  font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; vertical-align: middle; }
.eqRow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: var(--eqRowPadY, 8px) 2px;
  border-bottom: 1px solid var(--eqRuleColor, var(--heroEdge)); }
.eqRow:last-child { border-bottom: 0; }
.eqQty { color: var(--eqQtyColor, var(--heroFoil)); font-weight: 700; }
.eqDesc { color: var(--bodyTextColor); overflow-wrap: anywhere; }
.eqDesc strong { font-weight: 500; }
.eqOut { color: var(--dlDangerColor, #eb1313); font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .06em; white-space: nowrap; }
.eqPkgGrid { display: grid; grid-template-columns: repeat(var(--eqPkgPerRow, 2), minmax(0, 1fr)); gap: var(--eqPkgGap, 8px); margin-top: 10px; }
.eqPkg { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); }
.eqPkg.is-hidden { border-style: dashed; border-color: var(--textDim); }
.eqPkgHead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.eqPkgName { font-size: calc(var(--bodyFontSize) + 2px); color: var(--eqPkgNameColor, var(--bodyTextColor)); }
.eqPkgRate { color: var(--eqRateColor, var(--heroFoil)); white-space: nowrap; }
.eqPkgDesc { color: var(--textDim); line-height: 1.5; white-space: pre-line; }
.eqPkgList { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: calc(var(--bodyFontSize) - 1px); }
.eqPkgList .eqQty { display: inline-block; min-width: 26px; font-weight: 400; }
.eqPkgMeta { margin-top: auto; padding-top: 4px; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .04em; }
.eqMsg { padding: 24px 0; text-align: center; }


/* ==========================================================
   Batch 8 - Admin pages: Admin Access, Page Status, Navigation Menu, Legend, Share Images, Edit Logins, Short URLs,
   Share Audit, Text Editor, Directory List, LUT Builder. The list rows and bars they share come first
   (Site Editor > Page tab > Admin List on each of those pages: row padding, name / tag / warning colours, rule).
   ========================================================== */

/* admin pages have nothing to share: no Copy Share URL unless the Site Editor says otherwise (no weight: theme.css wins) */
:where(body[data-page="adminAccess"], body[data-page="pageStatus"], body[data-page="navMenu"], body[data-page="legend"],
       body[data-page="shareImageSite"], body[data-page="editLogins"], body[data-page="shortUrls"], body[data-page="shareAudit"],
       body[data-page="textEditor"], body[data-page="directoryList"], body[data-page="lutBuilder"], body[data-page="retired"]) { --shareButton: hide; }

/* ---------- shared: a bar of controls over a list, the list, its rows ---------- */
.amBar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--surfaceGap, 12px); }
.amGrow { flex: 1 1 auto; }
.amNote { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .02em; }
.amNote b { color: var(--bodyTextColor); font-weight: 500; }
.amNote.dirty { color: var(--amWarnColor, var(--heroHeat)); letter-spacing: .08em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 2px); }
.amNote.bad { color: var(--dlDangerColor, #eb1313); }
.amNote[hidden] { display: none; }
.amList { background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); }
.amRow { display: flex; align-items: center; gap: 14px; padding: var(--amRowPadY, 10px) var(--amRowPadX, 14px);
  border-top: var(--amRuleW, 1px) solid var(--amRuleColor, var(--heroEdge)); color: var(--bodyTextColor); transition: background .15s ease, opacity .15s ease; }
.amRow:first-child { border-top: 0; }
.amRow:hover { background: color-mix(in srgb, var(--amNameColor, var(--heroSite)) 6%, transparent); }
.amRow.off .amMain { opacity: .5; }
.amRow.sortItem { cursor: grab; }
.amRow.dragging { opacity: .4; }
.amRow.dragOver { background: color-mix(in srgb, var(--amNameColor, var(--heroSite)) 14%, transparent); }
.amMain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.amName { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--amNameColor, var(--heroSite)); letter-spacing: .02em; font-size: calc(var(--bodyFontSize) + 1px); }
.amName > a, .amText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amName > a { color: inherit; text-decoration: none; transition: color .15s ease; }
.amName > a:hover { color: var(--linkHover); }
.amSub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--textDim); font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: calc(var(--bodyFontSize) - 1px); }
.amTag { flex: none; padding: 1px 6px; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--amTagColor, var(--heroFoil)); border: 1px solid currentColor; }
.amTag.warn { color: var(--amWarnColor, var(--heroHeat)); }
.amTag.bad, .amTag.adm { color: var(--dlDangerColor, #eb1313); }
.amActs { flex: none; display: flex; gap: 4px; }
.amActs .btn.sm { min-width: 30px; }
.amEmpty { margin: 0; padding: 22px 14px; color: var(--textDim); text-align: center; }
.amEmpty b { color: var(--bodyTextColor); font-weight: 500; }
.amHelp { margin: var(--surfaceGap, 12px) 0 0; max-width: 820px; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); line-height: 1.65; }
.amHelp b { color: var(--bodyTextColor); font-weight: 500; }
.amHelp a { color: var(--linkInactive); text-decoration: none; }
.amHelp a:hover { color: var(--linkHover); }

/* a row of joined buttons (Page Status: one per status) */
.amSeg { flex: none; display: inline-flex; }
.amSeg .btn { border-radius: 0; }
.amSeg .btn + .btn { margin-left: calc(var(--btnBorderW, 1px) * -1); }
.amSeg .btn:first-child { border-radius: var(--btnRadius) 0 0 var(--btnRadius); }
.amSeg .btn:last-child { border-radius: 0 var(--btnRadius) var(--btnRadius) 0; }
.amSeg .btn:hover, .amSeg .btn.act { position: relative; z-index: 1; }
.amSeg .btn.act.gated { border-color: var(--amWarnColor, var(--heroHeat)); color: var(--amWarnColor, var(--heroHeat)); }
.psRow.gated .amSub { color: var(--amWarnColor, var(--heroHeat)); }

/* ---------- Admin Access (pages/adminAccess.js) - edit mode ---------- */
.adErr { margin: 0 0 var(--surfaceGap, 12px); color: var(--dlDangerColor, #eb1313); font-size: calc(var(--bodyFontSize) - 1px); }
.adErr:empty { display: none; }
.adBar .btn { flex: none; }
.adEditing .adCat { padding: 14px; }
.adEditRow { grid-template-columns: auto minmax(0, .8fr) minmax(0, 1.2fr) auto; align-items: center; gap: 6px; margin-bottom: 6px; padding: 2px 0; }
.adEditRow .adBtns { gap: 3px; }
.adGrip { cursor: grab; color: var(--textDim); padding: 0 2px; user-select: none; }
.adGrip:hover { color: var(--linkHover); }
.adEditRow .btn.sm, .adCatHead .btn.sm { padding: 2px 7px; min-width: 26px; }
.adMove { width: 70px; box-sizing: border-box; padding: 2px 3px; font: inherit; font-size: calc(var(--ddSize) - 2px); cursor: pointer;
  background: var(--ddBg); border: var(--ddBorderW) solid var(--ddBorder); border-radius: var(--ddRadius); color: var(--ddText); }
.adMove:hover, .adMove:focus { border-color: var(--ddHoverBorder); outline: none; }
.adCat input[type=text].bad { border-color: var(--dlDangerColor, #eb1313); }
.adEditRow.dragging { opacity: .4; }
.adEditRow.dragOver { box-shadow: inset 0 2px 0 0 var(--linkHover); }
.adCat.dragOver { outline: 1px dashed var(--linkHover); outline-offset: -1px; }
.adDropHere { padding: 6px 0; }

/* ---------- Legend (pages/legend.js). Page tab > Legend Tiles ---------- */
:where(body[data-page="legend"]) { --pageInfo: min; }
.lgdGrid { display: grid; grid-template-columns: repeat(var(--lgdPerRow, 4), minmax(0, 1fr)); gap: var(--lgdGap, 12px); }
.lgdTile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; aspect-ratio: var(--lgdAspect, 7 / 5); padding: 16px 18px;
  box-sizing: border-box; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--lgdRadius, var(--surfaceRadius));
  color: var(--lgdNameColor, var(--heroSite)); text-decoration: none; }
.lgdTile::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 var(--lgdHoverOutlineW, 1px) var(--lgdHoverOutline, var(--linkHover)); opacity: 0; transition: opacity .18s ease; }
a.lgdTile:hover::after, a.lgdTile:focus-visible::after { opacity: 1; }
a.lgdTile:focus-visible { outline: none; }
.lgdTile.off { color: var(--textDim); border-style: dashed; border-color: var(--lgdRuleColor, var(--heroEdge)); cursor: default; }
.lgdTile.inactive .lgdName { opacity: .55; }
.lgdName { font-weight: 700; letter-spacing: .04em; font-size: calc(var(--bodyFontSize) + 2px); overflow-wrap: anywhere; }
.lgdChev { margin-left: 6px; color: var(--textDim); font-weight: 400; }
.lgdTag { position: absolute; top: 10px; right: 10px; padding: 1px 6px; font-size: calc(var(--bodyFontSize) - 3px); letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.4; color: var(--lgdTagColor, var(--heroHeat)); border: 1px solid currentColor; }
.lgdHead { margin: 28px 0 12px; padding-top: 14px; border-top: 1px solid var(--lgdRuleColor, var(--heroEdge)); letter-spacing: .1em; text-transform: uppercase;
  font-size: calc(var(--bodyFontSize) - 1px); color: var(--textDim); }

/* ---------- Share Images - Site (pages/shareImageSite.js). Page tab > Share Image Cards ---------- */
.siGrid { display: grid; grid-template-columns: repeat(var(--siPerRow, 3), minmax(0, 1fr)); gap: var(--siGap, 12px); }
.siCard { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder);
  border-radius: var(--siRadius, var(--surfaceRadius)); overflow: hidden; }
.siThumb { position: relative; aspect-ratio: 1.91 / 1; display: flex; align-items: center; justify-content: center; background: var(--toolStageBg, #111); }
.siThumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.siMsg { padding: 10px; text-align: center; letter-spacing: .12em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 2px); color: var(--textDim); }
.siMsg.warn { color: var(--amWarnColor, var(--heroHeat)); }
.siMsg.bad { color: var(--dlDangerColor, #eb1313); }
.siBody { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 14px 12px; }
.siName { color: var(--siNameColor, var(--heroSite)); letter-spacing: .03em; font-size: calc(var(--bodyFontSize) + 1px); }
.siUrl { font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; font-size: calc(var(--bodyFontSize) - 2px); line-height: 1.4; color: var(--textDim); word-break: break-all; }
.siUrl:empty { display: none; }
.siLinks { display: flex; gap: 12px; margin-top: 2px; font-size: calc(var(--bodyFontSize) - 1px); }
.siLinks a { color: var(--linkInactive); text-decoration: none; }
.siLinks a:hover { color: var(--linkHover); }

/* ---------- Edit Logins / Short URLs ---------- */
.rndModalBody .chk.elShow { margin: -4px 0 0; font-size: var(--ipBodySize); color: var(--ipDescColor); }
.suSearch { flex: 0 1 300px; min-width: 180px; display: flex; }
.suSearch .inp { width: 100%; }

/* ---------- Share Audit (pages/shareAudit.js) ---------- */
.saStats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--surfaceGap, 12px); margin-bottom: var(--surfaceGap, 12px); }
.saStat { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); }
.saStat b { font-weight: 400; font-size: calc(var(--bodyFontSize) + 6px); color: var(--bodyTextColor); font-variant-numeric: tabular-nums; }
.saStat span { color: var(--textDim); font-size: calc(var(--bodyFontSize) - 2px); letter-spacing: .1em; text-transform: uppercase; }
.saStat.good b { color: var(--amTagColor, var(--heroFoil)); }
.saStat.warn b { color: var(--amWarnColor, var(--heroHeat)); }
.saStat.bad b { color: var(--dlDangerColor, #eb1313); }
.saPick { display: flex; align-items: center; gap: 8px; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .08em; text-transform: uppercase; }
.saPick select.dd { text-transform: none; letter-spacing: normal; }
.saWrap { background: var(--surface); border: var(--surfaceBorderW) solid var(--surfaceBorder); border-radius: var(--surfaceRadius); overflow-x: auto; }
.saSites { margin-bottom: var(--surfaceGap, 12px); }
.saTable { width: 100%; border-collapse: collapse; font-size: calc(var(--bodyFontSize) - 1px); }
.saTable th { padding: 9px 10px; text-align: left; font-weight: 400; white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 2px);
  color: var(--textDim); border-bottom: var(--amRuleW, 1px) solid var(--amRuleColor, var(--heroEdge)); }
.saTable th.sortable { cursor: pointer; user-select: none; }
.saTable th.sortable:hover { color: var(--linkHover); }
.saTable td { padding: 8px 10px; vertical-align: middle; border-top: var(--amRuleW, 1px) solid var(--amRuleColor, var(--heroEdge)); color: var(--bodyTextColor); }
.saTable tbody tr:first-child td { border-top: 0; }
.saTable tbody tr:hover td { background: color-mix(in srgb, var(--amNameColor, var(--heroSite)) 5%, transparent); }
.saTable a { color: var(--amNameColor, var(--heroSite)); text-decoration: none; }
.saTable a:hover { color: var(--linkHover); }
.saPage { font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.saDim { color: var(--textDim); }
.saNone { color: var(--textDim); letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--bodyFontSize) - 3px); }
.saNone.bad { color: var(--dlDangerColor, #eb1313); }
.saThumb { display: block; width: 120px; aspect-ratio: 1.91 / 1; object-fit: cover; cursor: zoom-in; background: var(--toolStageBg, #111); }
.saSize { white-space: nowrap; }
.saPip { display: inline-block; margin: 1px 2px 1px 0; padding: 0 5px; line-height: 1.5; white-space: nowrap; letter-spacing: .08em; text-transform: uppercase;
  font-size: calc(var(--bodyFontSize) - 3px); border: 1px solid currentColor; }
.saPip.ok { color: var(--amTagColor, var(--heroFoil)); }
.saPip.warn { color: var(--amWarnColor, var(--heroHeat)); }
.saPip.bad { color: var(--dlDangerColor, #eb1313); }
.saPip.na { color: var(--textDim); }

/* ---------- Text Editor (pages/textEditor.js). Page tab > Text Editor ---------- */
.teArea { font-size: var(--teFontSize, calc(var(--bodyFontSize) + 1px)); min-height: var(--teMinH, 420px); }
.teArea:disabled { opacity: .6; }
.teStatus.bad { color: var(--dlDangerColor, #eb1313); text-transform: none; letter-spacing: .02em; }
.teBtns { display: flex; gap: 8px; }
.teNone code { color: var(--bodyTextColor); }

/* ---------- Directory List (pages/directoryList.js) ---------- */
.dlSession { margin: 0 0 10px; color: var(--dlDangerColor, #eb1313); font-size: calc(var(--bodyFontSize) - 1px); }
.dlSession a { color: inherit; }
.dlSession[hidden] { display: none; }
.dlRowChks { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
.dlConflict { padding: 8px 10px; border: 1px solid var(--amWarnColor, var(--heroHeat)); }
.dlConflict[hidden] { display: none; }
.dlConfHead { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--amWarnColor, var(--heroHeat)); }
.dlConfActs { display: flex; gap: 12px; }
.dlConfActs a { color: var(--ipLinkColor); text-decoration: none; }
.dlConfActs a:hover { color: var(--ipLinkHover); }
.dlConfList { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; font-size: calc(var(--ipBodySize) - 1px); }
.dlProg { display: flex; align-items: center; gap: 10px; }
.dlProg[hidden] { display: none; }
.dlProgBar { flex: 1 1 auto; height: 6px; background: var(--ipDescRuleColor); overflow: hidden; }
.dlProgFill { width: 0; height: 100%; background: var(--heroSite); transition: width .2s ease; }
.dlProgPct { flex: none; min-width: 3em; text-align: right; color: var(--ipDescColor); font-variant-numeric: tabular-nums; }
.dlSzExact { display: block; color: var(--ipDescColor); font-size: .92em; }
.dlEmpty b { color: var(--dlDirColor); }

/* ---------- LUT Builder (pages/lutBuilder.js) ---------- */
.lbStage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.lbStage.solo { cursor: default; }
.lbStage.solo .lbTag.in { display: none; }
.lbSplit[hidden] { display: none; }
.lbSizeRow { display: flex; gap: 6px; letter-spacing: normal; text-transform: none; font-size: inherit; }
.lbSizeRow select.dd { flex: 1 1 auto; min-width: 0; }
.lbCustom { width: 74px; }
.lbCustom[hidden] { display: none; }
.lbChainCol > .btn.sm { margin-top: 2px; }
.lbEmpty { margin: 0 0 10px; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); }
.lbEmpty b { color: var(--bodyTextColor); font-weight: 500; }
.lbRow select.dd { min-width: 0; }
.lbNote { margin: 12px 0 0; color: var(--textDim); font-size: calc(var(--bodyFontSize) - 1px); line-height: 1.6; }
.lbNote.bad { color: var(--dlDangerColor, #eb1313); }

/* ---------- a retired page (pages/retired.js): the Appearance pages' addresses ---------- */
.rtBox { max-width: 640px; }
.rtBox p { margin: 0 0 12px; line-height: 1.65; color: var(--bodyTextColor); }
.rtBox p b { font-weight: 500; color: var(--heroSite); }
.rtActs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0 !important; }
.rtActs .btn { display: inline-flex; align-items: center; line-height: 1.4; }
.rtActs [hidden] { display: none; }

/* ---------- an on / off switch in a list row (Navigation Menu > Submenu) ---------- */
.amTag.dim { color: var(--textDim); }
.amSwitch { flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; color: var(--textDim);
  font-size: calc(var(--bodyFontSize) - 1px); letter-spacing: .04em; }
.amSwitch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.amSwitchTrack { position: relative; width: 30px; height: 16px; box-sizing: border-box; border: 1px solid var(--ddBorder); border-radius: 8px;
  background: var(--ddBg); transition: background .18s ease, border-color .18s ease; }
.amSwitchTrack::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--textDim);
  transition: transform .18s ease, background .18s ease; }
.amSwitch input:checked + .amSwitchTrack { border-color: var(--amTagColor, var(--heroFoil)); }
.amSwitch input:checked + .amSwitchTrack::after { transform: translateX(14px); background: var(--amTagColor, var(--heroFoil)); }
.amSwitch input:checked ~ .amSwitchLabel { color: var(--bodyTextColor); }
.amSwitch:hover .amSwitchTrack, .amSwitch input:focus-visible + .amSwitchTrack { border-color: var(--ddHoverBorder); }
@media (prefers-reduced-motion: reduce) { .amSwitchTrack, .amSwitchTrack::after { transition: none; } }