/* css/studio.css — styles for Build 008 rod and LED marker layer.
   Stage 3: static placement and visual base. Animations and marker logic will be
   implemented in later stages.
*/

/* Container for the studio rod — only visible on layoutScreen */
.screen #studioRodContainer{display:none}
#layoutScreen #studioRodContainer{display:block;position:absolute;left:50%;transform:translateX(-50%);top:6.5rem;pointer-events:none;z-index:2;width:92%;max-width:1400px;opacity:1}
/* Subtle presence on workshop screen */
#workshopScreen #studioRodContainer{display:block;opacity:0.16}

#studioRodContainer svg{width:100%;height:auto;display:block}

#layoutScreen #studioRodContainer.rod-blank-visual{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  width:100%;
  max-width:none;
  pointer-events:auto;
  z-index:auto;
  opacity:1;
}

#workshopScreen #studioRodContainer{display:none}

#workshopScreen .quote-builder{
  padding-bottom:calc(230px + var(--safe-bottom));
}

#workshopScreen{
  background:linear-gradient(180deg,rgba(4,6,7,.98),rgba(6,8,9,.98));
}

/* make sure led layer elements are GPU-accelerated and non-interactive */
#studioRodContainer .led{pointer-events:none;will-change:transform,opacity}

/* LED visible state (used by visuals) */
#studioRodContainer .led--visible{opacity:1;transform:scale(1);transition:opacity 240ms cubic-bezier(.2,.9,.2,1),transform 240ms cubic-bezier(.2,.9,.2,1)}
#studioRodContainer .led--hidden{opacity:0;transform:scale(0.7);transition:opacity 180ms ease,transform 180ms ease}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #studioRodContainer .led{transition:none!important}
  #homeScreen .home-living-rod__led{transition:none!important}
}

body.component-sheet-open{
  overflow:hidden;
  overscroll-behavior:none;
}
body.workshop-input-focus-active .bottom-nav{backdrop-filter:none}

#homeScreen{
  padding-top:12px;
}

#homeScreen .home-premium-shell{
  display:grid;
  gap:18px;
  width:100%;
  max-width:940px;
  margin:0 auto;
  padding:42px 0 18px;
  position:relative;
}

#homeScreen .home-premium-hero{
  display:grid;
  gap:11px;
  max-width:760px;
  position:relative;
  z-index:2;
}

#homeScreen .home-premium-hero h1{
  margin:0;
  font-size:clamp(34px,7.9vw,70px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:640;
  text-transform:uppercase;
  color:#d7d1c5;
}

#homeScreen .home-premium-hero p{
  margin:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
  color:#8f938c;
  font-size:13px;
  letter-spacing:.05em;
  line-height:1.6;
  text-transform:uppercase;
  white-space:normal;
}

#homeScreen .home-living-rod{
  position:relative;
  width:min(100%,760px);
  height:42px;
  margin:0;
  justify-self:start;
  left:auto;
  transform:none;
  opacity:0;
  overflow:hidden;
  transition:opacity 1400ms ease;
  will-change:opacity;
  pointer-events:none;
  z-index:2;
}

#homeScreen .home-living-rod::before,
#homeScreen .home-living-rod::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

#homeScreen .home-living-rod::before{
  display:none;
}

#homeScreen .home-living-rod::after{
  display:none;
}

#homeScreen .home-living-rod.is-ready{
  opacity:1;
}

#homeScreen .home-living-rod__blank,
#homeScreen .home-living-rod__leds{
  position:absolute;
  inset:0;
}

#homeScreen .home-living-rod__blank{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

#homeScreen .home-living-rod__leds{
  height:100%;
}

#homeScreen .home-living-rod__led{
  position:absolute;
  left:var(--x,8%);
  top:var(--y,15%);
  width:2.6px;
  height:2.6px;
  border-radius:999px;
  background:radial-gradient(circle at 34% 30%,#942f3b 0%,#6d1d28 46%,#401119 100%);
  box-shadow:inset 0 0 .58px rgba(226,167,176,.16),0 0 0 .6px rgba(27,8,12,.92);
  opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity 360ms cubic-bezier(.2,.75,.24,1),box-shadow 360ms cubic-bezier(.2,.75,.24,1),background-image 360ms cubic-bezier(.2,.75,.24,1);
  will-change:opacity;
}

#homeScreen .home-living-rod__led::before,
#homeScreen .home-living-rod__led::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  pointer-events:none;
}

#homeScreen .home-living-rod__led::before{
  width:1.2px;
  height:1.2px;
  background:radial-gradient(circle,rgba(255,248,249,.2) 0%,rgba(255,255,255,0) 72%);
  box-shadow:none;
}

#homeScreen .home-living-rod__led::after{
  width:2.2px;
  height:2.2px;
  background:radial-gradient(circle,rgba(var(--kl-red-active-rgb),.18) 0%,rgba(var(--kl-red-rgb),.09) 42%,rgba(var(--kl-red-rgb),0) 78%);
  opacity:0;
  transform:translate(-50%,-50%);
}

#homeScreen .home-living-rod__led.is-lit{
  opacity:.94;
  background:radial-gradient(circle at 34% 30%,#eb5a68 0%,#bf2d3d 42%,#791c28 100%);
  box-shadow:inset 0 0 .8px rgba(249,206,213,.24),0 0 0 .66px rgba(34,9,13,.96),0 0 3px rgba(var(--kl-red-active-rgb),.27);
}

#homeScreen .home-living-rod__led.is-lit::before{
  background:radial-gradient(circle,rgba(255,250,251,.28) 0%,rgba(255,255,255,0) 74%);
}

#homeScreen .home-living-rod__led.is-lit::after{
  opacity:.72;
}

#homeScreen .home-living-rod__led.is-resting{
  opacity:.52;
  background:radial-gradient(circle at 34% 30%,#ca4654 0%,#8d2431 45%,#531620 100%);
  box-shadow:inset 0 0 .64px rgba(236,183,190,.17),0 0 0 .62px rgba(29,8,12,.94),0 0 1.7px rgba(var(--kl-red-rgb),.2);
}

#homeScreen .home-living-rod__led.is-resting::before{
  background:radial-gradient(circle,rgba(255,248,249,.2) 0%,rgba(255,255,255,0) 72%);
}

#homeScreen .home-living-rod__led.is-resting::after{
  opacity:.36;
}

#homeScreen .home-enter-rod-button{
  width:100%;
  min-height:45px;
  position:relative;
  z-index:2;
  border-radius:6px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:13px;
  font-weight:700;
  background:linear-gradient(180deg,rgba(20,24,27,.82),rgba(12,15,17,.9));
  border:1px solid rgba(214,210,200,.2);
  color:var(--text);
  box-shadow:none;
  text-shadow:none;
  transition:transform 100ms cubic-bezier(.2,.75,.28,1),background-color 100ms ease,border-color 100ms ease,box-shadow 100ms ease,color 100ms ease;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}

#homeScreen .home-enter-rod-button:hover{
  background:linear-gradient(180deg,rgba(26,31,34,.88),rgba(16,19,21,.94));
  border-color:rgba(214,210,200,.32);
  color:#ece4d7;
  box-shadow:none;
}

#homeScreen .home-enter-rod-button:focus-visible{
  outline:2px solid rgba(173,169,157,.45);
  outline-offset:2px;
}

#homeScreen .home-enter-rod-button:active{
  transform:translateY(1px);
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.22),rgba(var(--kl-red-rgb),.08));
  border-color:var(--kl-red-base);
  box-shadow:inset 0 0 0 1px rgba(var(--kl-red-rgb),.32);
  color:#f7ebe8;
}

/* Keep Home visually self-contained by suppressing cross-screen bleed-through labels/panels. */
.app-shell:has(#homeScreen.active) > .screen:not(#homeScreen){
  display:none!important;
}

.app-shell:has(#homeScreen.active) > .live-build-status,
.app-shell:has(#homeScreen.active) > .offline-ready-status{
  display:none!important;
}

body.home-screen-active .live-build-status,
body.home-screen-active .offline-ready-status,
body.home-screen-active #layoutScreen,
body.home-screen-active #workshopScreen,
body.home-screen-active #buildsScreen,
body.home-screen-active #blanksScreen,
body.home-screen-active #settingsScreen{
  display:none!important;
}

.workshop-back-to-top{
  position:fixed;
  right:max(14px,calc((100vw - var(--app-max-width))/2 + 14px));
  /* --workshop-back-to-top-offset is measured live in js/ui.js from the real bottom-nav depth
     (already safe-area aware) so this never drifts out of sync with an arbitrary duplicated offset. */
  bottom:var(--workshop-back-to-top-offset,calc(108px + var(--safe-bottom)));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(214,210,200,.2);
  background:linear-gradient(180deg,rgba(26,31,33,.95),rgba(14,18,20,.96));
  color:#b9b3a7;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  z-index:8;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity var(--micro-motion) ease,transform var(--micro-motion) ease,background-color var(--micro-motion) ease,border-color var(--micro-motion) ease,color var(--micro-motion) ease;
}

.workshop-back-to-top.is-visible{
  opacity:.94;
  transform:translateY(0);
  pointer-events:auto;
}

.workshop-back-to-top:hover,
.workshop-back-to-top:focus-visible{
  border-color:rgba(206,44,58,.42);
  background:rgba(155,31,42,.24);
  color:#f0e9dc;
  outline:none;
}

body.component-sheet-open .workshop-back-to-top{
  opacity:0!important;
  pointer-events:none!important;
}

/* Mobile: compact icon-only control (44-48px touch target) so it reads as a small
   contextual control, not a large pill competing with the bottom nav or page content. */
@media (max-width:640px){
  .workshop-back-to-top{
    right:6px;
    width:34px;
    height:34px;
    min-height:34px;
    padding:0;
    border-radius:50%;
    border-color:rgba(214,210,200,.16);
    background:rgba(20,23,26,.92);
    color:#cfc9bc;
    box-shadow:0 3px 8px rgba(0,0,0,.2);
  }

  .workshop-back-to-top__icon{
    font-size:15px;
    line-height:1;
  }

  .workshop-back-to-top__label{
    display:none;
  }

  .workshop-back-to-top:hover,
  .workshop-back-to-top:focus-visible{
    border-color:rgba(214,210,200,.32);
    background:#1a1e21;
    color:#cfc9bc;
  }
}

@media (max-width:720px){
  .customer-finder__panel{
    --component-sheet-panel-max-height:min(calc(100dvh - 12px),760px);
  }

  #homeScreen .home-premium-shell{
    padding-top:30px;
    gap:16px;
  }
}

@media (min-width:1024px){
  :root{
    --home-desktop-shell-max:1160px;
    --home-desktop-page-pad:24px;
  }

  .app-shell:has(#homeScreen.active){
    width:min(100%,var(--home-desktop-shell-max));
    max-width:var(--home-desktop-shell-max);
    box-sizing:border-box;
    padding-left:var(--home-desktop-page-pad);
    padding-right:var(--home-desktop-page-pad);
  }

  #homeScreen{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-left:var(--home-desktop-page-pad);
    padding-right:var(--home-desktop-page-pad);
  }

  #homeScreen .home-premium-shell{
    width:100%;
    max-width:var(--home-desktop-shell-max);
    box-sizing:border-box;
    margin:0 auto;
  }

  #homeScreen .home-premium-hero,
  #homeScreen .home-living-rod,
  #homeScreen .home-enter-rod-button{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  #homeScreen .home-living-rod{
    left:auto;
    transform:none;
    margin-left:0;
    margin-right:0;
  }

  .bottom-nav{
    width:calc(100% - 48px)!important;
    max-width:1112px!important;
    box-sizing:border-box;
  }
}

.bottom-nav{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  border:1px solid rgba(214,210,200,.1);
  background:rgba(10,12,13,.88);
  box-shadow:0 7px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.02);
  padding:7px;
  gap:5px;
}

.bottom-nav button{
  display:grid;
  grid-template-rows:18px 22px;
  align-content:center;
  justify-items:center;
  align-items:center;
  row-gap:4px;
  min-height:50px;
  height:50px;
  width:100%;
  padding:5px 4px;
  border:1px solid transparent;
  border-radius:11px;
  font-size:14px;
  font-weight:600;
  line-height:1;
  color:#878c85;
}

.bottom-nav__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:18px;
  font-size:15.7px;
  line-height:1;
}

.bottom-nav__label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:22px;
  max-width:60px;
  text-align:center;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  line-height:1.05;
  color:#8f938c;
}

.bottom-nav button[data-nav="homeScreen"] .bottom-nav__icon{font-size:16.8px;transform:translateY(.4px)}
.bottom-nav button[data-nav="workshopScreen"] .bottom-nav__icon{font-size:16.8px;transform:translateY(.4px)}
.bottom-nav button[data-nav="settingsScreen"] .bottom-nav__icon{font-size:16.8px;transform:translateY(.4px)}

.bottom-nav button.active{
  color:#e3dccf;
  border-color:rgba(216,212,202,.18);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(var(--kl-red-rgb),.5);
}

.bottom-nav button.active .bottom-nav__label,
.bottom-nav button.active .bottom-nav__icon{
  color:#ece4d7;
}

.topbar{
  justify-content:flex-start;
}

.topbar .brand-lockup{
  flex:1;
  min-width:0;
}

[hidden]{display:none!important}

.screen{
  display:none!important;
  visibility:hidden;
  pointer-events:none;
  height:0;
  overflow:hidden;
}

.screen.active{
  display:block!important;
  visibility:visible;
  pointer-events:auto;
  height:auto;
  overflow:visible;
  padding-bottom:calc(12px + var(--safe-bottom));
}

.bottom-nav{
  z-index:60;
  background:rgba(8,10,11,.97);
}

.live-build-status,
.offline-ready-status{
  z-index:61;
}

#layoutStatusBadge[aria-pressed="true"]{
  background:rgba(167,23,34,.24);
  border-color:rgba(var(--kl-red-rgb),.4);
  color:#f5dedf;
}

#app.locked .layout-control-card__value{
  opacity:.62;
}

#app.locked .layout-control-card__button{
  opacity:.55;
}

.rod-blank-visual{
  display:grid;
  gap:8px;
  padding:10px 10px 12px;
  border:1px solid rgba(214,210,200,.08);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(12,15,16,.94),rgba(7,9,10,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.rod-blank-visual__head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

.rod-blank-visual__tip{
  margin-left:auto;
  padding-right:2px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(214,210,200,.55);
}

.rod-blank-visual svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}

.rod-blank-visual__blank{
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.34));
}

.rod-marker{
  cursor:pointer;
}

.rod-marker__halo{
  fill:rgba(var(--kl-red-rgb),.14);
  opacity:.22;
}

.rod-marker__core{
  fill:var(--kl-red-base);
  filter:drop-shadow(0 0 8px var(--kl-red-glow));
}

.rod-marker__dot{
  fill:#ffe5e8;
}

.rod-marker--active .rod-marker__halo,
.rod-marker:hover .rod-marker__halo,
.rod-marker:focus-visible .rod-marker__halo{
  opacity:.62;
}

.rod-marker--active .rod-marker__core,
.rod-marker:hover .rod-marker__core,
.rod-marker:focus-visible .rod-marker__core{
  fill:var(--kl-red-active);
}

.rod-marker--active .rod-marker__dot,
.rod-marker:hover .rod-marker__dot,
.rod-marker:focus-visible .rod-marker__dot{
  fill:#fff;
}

.live-build-status{
  position:fixed;
  left:50%;
  bottom:calc(86px + var(--safe-bottom));
  transform:translateX(-50%);
  width:min(92vw,410px);
  margin:0;
  padding:0 8px;
  text-align:right;
  font-size:10px;
  letter-spacing:.08em;
  color:#6b6f69;
  pointer-events:none;
  z-index:19;
}

.offline-ready-status{
  position:fixed;
  left:50%;
  bottom:calc(66px + var(--safe-bottom));
  transform:translateX(-50%);
  width:min(92vw,410px);
  margin:0;
  padding:0 8px;
  text-align:right;
  font-size:10px;
  letter-spacing:.12em;
  color:#b9dcb8;
  pointer-events:none;
  z-index:19;
}

.settings-card__actions{
  display:block;
  padding-top:14px;
}

.settings-card__actions .primary-action{
  width:100%;
  min-height:42px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.app-shell:has(#settingsScreen.active) .build-pill,
.app-shell:has(#settingsScreen.active) > .live-build-status,
.app-shell:has(#settingsScreen.active) > .offline-ready-status{
  display:none;
}

#settingsScreen,
#settingsScreen.active{
  display:grid!important;
  align-content:start;
  gap:12px;
  justify-items:stretch;
  padding-top:14px;
  padding-bottom:calc(32px + var(--safe-bottom));
}

#settingsScreen .screen-head{
  width:min(100%,760px);
  margin-inline:auto;
  display:grid;
  gap:5px;
}

#settingsScreen .screen-head h1{
  margin:0;
  font-size:clamp(20px,2.5vw,24px);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#f1ecdf;
}

#settingsScreen .screen-head .subtle{
  margin:0;
  font-size:11px;
  letter-spacing:.06em;
  line-height:1.45;
  color:rgba(214,210,200,.74);
}

#settingsScreen .settings-card{
  width:min(100%,760px);
  margin-inline:auto;
  padding:15px 16px;
  border-radius:16px;
  background:linear-gradient(168deg,rgba(17,20,23,.96),rgba(11,13,16,.97));
  border:1px solid rgba(216,210,197,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.2);
}

#settingsScreen .settings-card:has(.settings-save-btn.is-dirty){
  border-color:rgba(var(--kl-red-rgb),.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 2px 0 0 rgba(var(--kl-red-rgb),.55),0 10px 24px rgba(0,0,0,.2);
}

#settingsScreen .settings-row{
  display:grid;
  grid-template-columns:minmax(190px,max-content) minmax(0,1fr);
  align-items:center;
  column-gap:16px;
  padding:8px 0;
  border-bottom:0;
}

#settingsScreen .settings-row > span{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(226,220,208,.87);
  white-space:nowrap;
}

#settingsScreen .settings-row > strong{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

#settingsScreen .settings-preference-card{
  display:grid;
  gap:12px;
  padding:15px 16px;
  background:
    radial-gradient(112% 95% at 100% 0,rgba(255,255,255,.028),rgba(255,255,255,0) 58%),
    linear-gradient(165deg,rgba(17,20,23,.97),rgba(10,12,14,.97));
  border:1px solid rgba(216,210,197,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.24);
}

#settingsScreen .settings-preference-card__head{
  display:grid;
  gap:6px;
}

#settingsScreen .settings-disclosure{
  gap:0;
  min-height:0;
  align-content:start;
  grid-auto-rows:max-content;
}

#settingsScreen .settings-disclosure__summary{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  list-style:none;
}

#settingsScreen .settings-disclosure__summary::-webkit-details-marker{
  display:none;
}

#settingsScreen .settings-disclosure__copy{
  display:grid;
  gap:5px;
  min-width:0;
}

#settingsScreen .settings-disclosure__title{
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#f4efe5;
  font-weight:700;
}

#settingsScreen .settings-disclosure__hint{
  font-size:11px;
  line-height:1.35;
  color:rgba(214,208,196,.66);
}

#settingsScreen .settings-disclosure__chevron{
  margin-left:auto;
  color:#a8aca3;
  font-size:13px;
  transition:transform .18s ease;
}

#settingsScreen .settings-disclosure[open] .settings-disclosure__chevron{
  transform:rotate(180deg);
}

/* .settings-disclosure sets gap:0, so non-grid panel content needs its own spacing. */
#settingsScreen .settings-disclosure > .settings-row,
#settingsScreen .settings-disclosure > .settings-toggle-row,
#settingsScreen .settings-disclosure > .settings-choice-row,
#settingsScreen .settings-disclosure > .settings-account-card__actions{
  margin-top:12px;
}

#settingsScreen .settings-field-grid{
  display:grid;
  gap:10px;
  margin-top:13px;
  padding:0;
  border-bottom:0;
}

#settingsScreen .settings-field-grid label,
#settingsScreen .settings-pricing-field{
  display:grid;
  gap:5px;
}

#settingsScreen .settings-field-grid span,
#settingsScreen .settings-pricing-label{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(214,208,196,.72);
  font-weight:700;
}

#settingsScreen .settings-field-note{
  margin:10px 0 0;
  font-size:11px;
  line-height:1.4;
  color:rgba(214,208,196,.66);
}

#settingsScreen .settings-field-note strong{
  color:#ece6d8;
}

#settingsScreen .settings-context-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  margin-top:12px;
}

#settingsScreen .settings-disclosure > .settings-context-actions{
  min-height:0;
  padding:0;
  border-bottom:0;
}

#settingsScreen .settings-disclosure > .settings-context-actions:has(> .settings-save-btn[hidden]){
  margin-top:0;
}

#settingsScreen .settings-context-action{
  min-height:30px;
  padding:0 10px;
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(214,208,196,.76);
  border-color:rgba(214,208,196,.16);
  background:rgba(12,15,17,.72);
}

#settingsScreen .settings-save-btn{
  min-width:68px;
  font-weight:700;
  text-align:center;
  justify-content:center;
  transition:background-color 100ms ease,border-color 100ms ease,color 100ms ease,box-shadow 100ms ease,opacity 100ms ease;
}

#settingsScreen .settings-save-btn.is-dirty{
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.28),rgba(var(--kl-red-rgb),.12));
  border-color:var(--kl-red-base);
  color:#f7ebe8;
  cursor:pointer;
}

#settingsScreen .settings-save-btn.is-dirty:hover,
#settingsScreen .settings-save-btn.is-dirty:focus-visible{
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.38),rgba(var(--kl-red-rgb),.18));
  border-color:var(--kl-red-active);
  color:#fff;
}

#settingsScreen .settings-save-btn.is-saved{
  background:rgba(216,210,197,.12);
  border-color:rgba(216,210,197,.28);
  color:#e5ded2;
  cursor:default;
}

#settingsScreen .settings-save-btn.is-saving{
  background:rgba(12,15,17,.85);
  border-color:rgba(214,208,196,.2);
  color:rgba(214,208,196,.6);
  cursor:wait;
}

#settingsScreen .settings-save-btn.is-error{
  background:rgba(88,23,31,.35);
  border-color:rgba(191,63,75,.6);
  color:#ffb5bb;
  cursor:pointer;
}

#settingsScreen .settings-card .settings-preference-card__head,
#settingsScreen .settings-card > h2{
  margin-bottom:2px;
}

#settingsScreen .settings-preference-card__head h3{
  margin:0;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#f4efe5;
}

#settingsScreen .settings-preference-card__head p{
  margin:0;
  font-size:11px;
  line-height:1.45;
  letter-spacing:.045em;
  color:rgba(214,210,200,.8);
}

#settingsScreen .settings-preference-card .settings-choice-row,
#settingsScreen .settings-preference-card .settings-choice-column{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  width:100%;
  min-width:0;
}

#settingsScreen .settings-preference-card .settings-segmented{
  gap:0;
  border-radius:12px;
  border:1px solid rgba(216,210,197,.22);
  background:linear-gradient(180deg,rgba(15,18,20,.9),rgba(10,12,14,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  padding:2px;
  overflow:hidden;
}

#settingsScreen .settings-preference-card .settings-choice-button{
  min-height:38px;
  padding:7px 12px;
  border-radius:9px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.2;
  min-width:120px;
  max-width:100%;
  text-align:center;
  white-space:normal;
  flex:1 1 0;
  border-color:transparent;
  background:transparent;
  color:rgba(222,215,203,.84);
}

#settingsScreen .settings-preference-card .settings-segmented .settings-choice-button + .settings-choice-button{
  border-left:1px solid rgba(216,210,197,.15);
}

#settingsScreen .settings-preference-card .settings-choice-button:not(:disabled){
  cursor:pointer;
}

#settingsScreen .settings-preference-card .settings-choice-button:hover:not(:disabled),
#settingsScreen .settings-preference-card .settings-choice-button:focus-visible{
  border-color:rgba(214,210,200,.34);
  color:#ece5d8;
}

#settingsScreen .settings-preference-card .settings-choice-button.active,
#settingsScreen .settings-preference-card .settings-choice-button[aria-pressed="true"]{
  border-color:rgba(var(--kl-red-rgb),.72);
  background:linear-gradient(160deg,rgba(var(--kl-red-rgb),.22),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(var(--kl-red-rgb),.2);
  color:#fff0eb;
}

#settingsScreen .settings-toggle-row{
  display:flex;
  align-items:center;
  padding:0;
  border-bottom:0;
}

#settingsScreen #settingsTrackStockCard .settings-toggle{
  min-height:44px;
}

#settingsScreen #settingsTrackStockCard .settings-disclosure__summary{
  min-height:44px;
  padding-block:4px;
  margin-block:-4px;
}

#settingsScreen .settings-toggle{
  --toggle-border:rgba(214,210,200,.34);
  --toggle-off:#e2d9cb;
  --toggle-on:#8a8f89;
  --toggle-on-active:#d13f45;
  --toggle-thumb:#ece4d6;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:#d8d0c2;
}

#settingsScreen .settings-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

#settingsScreen .settings-toggle__state-off,
#settingsScreen .settings-toggle__state-on{
  transition:color var(--micro-motion) ease,opacity var(--micro-motion) ease;
}

#settingsScreen .settings-toggle__state-off{
  color:var(--toggle-off);
  opacity:1;
}

#settingsScreen .settings-toggle__state-on{
  color:var(--toggle-on);
  opacity:.48;
}

#settingsScreen .settings-toggle__control{
  width:46px;
  height:26px;
  padding:2px;
  border-radius:999px;
  border:1px solid var(--toggle-border);
  background:linear-gradient(180deg,#1a1f24,#0f1317);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  transition:border-color var(--micro-motion) ease,background-color var(--micro-motion) ease,box-shadow var(--micro-motion) ease;
}

#settingsScreen .settings-toggle__thumb{
  width:20px;
  height:20px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--toggle-thumb),#d5ccb9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 1px 2px rgba(0,0,0,.42);
  transform:translateX(0);
  transition:transform var(--micro-motion) ease;
}

#settingsScreen .settings-toggle input:not(:checked) ~ .settings-toggle__control{
  border-color:rgba(214,210,200,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.025);
}

#settingsScreen .settings-toggle input:checked ~ .settings-toggle__state-off{
  color:#8f948d;
  opacity:.56;
}

#settingsScreen .settings-toggle input:checked ~ .settings-toggle__state-on{
  color:var(--toggle-on-active);
  opacity:1;
}

#settingsScreen .settings-toggle input:checked ~ .settings-toggle__control{
  border-color:rgba(209,63,69,.68);
  background:linear-gradient(180deg,rgba(209,63,69,.24),rgba(78,18,22,.3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(209,63,69,.2),0 0 10px rgba(209,63,69,.14);
}

#settingsScreen .settings-toggle input:checked ~ .settings-toggle__control .settings-toggle__thumb{
  transform:translateX(20px);
}

#settingsScreen .settings-toggle:focus-within .settings-toggle__control,
#settingsScreen .settings-toggle:hover .settings-toggle__control{
  border-color:rgba(214,210,200,.42);
}

#settingsScreen .settings-preference-subgroup{
  display:grid;
  gap:7px;
}

#settingsScreen .settings-preference-subgroup > span{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(214,210,200,.8);
}

#settingsScreen input[type="number"],
#settingsScreen input[type="text"],
#settingsScreen input[type="email"]{
  cursor:text;
}

#settingsScreen input[type="checkbox"]:not(:disabled){
  cursor:pointer;
}

@media (max-width:860px){
  #settingsScreen{
    gap:12px;
  }

  #settingsScreen .settings-card{
    width:100%;
    padding:13px;
  }

  #settingsScreen .settings-row{
    grid-template-columns:1fr;
    row-gap:7px;
  }

  #settingsScreen .settings-row > strong{
    margin-left:0;
    justify-content:flex-start;
  }

  #settingsScreen .settings-preference-card{
    padding:13px;
  }

  #settingsScreen .settings-preference-card .settings-choice-button{
    min-width:0;
    flex:1 1 126px;
  }
}

#settingsScreen #settingsMeasurementUnitsCard .settings-choice-button{
  min-height:44px;
}

@media (max-width:560px){
  #settingsScreen #settingsMeasurementUnitsCard .settings-choice-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }

  #settingsScreen #settingsMeasurementUnitsCard .settings-segmented .settings-choice-button + .settings-choice-button{
    border-left:1px solid rgba(216,210,197,.15);
  }
}

#settingsScreen #settingsTaxRate,
#settingsScreen #settingsDefaultLabourRate,
#settingsScreen #settingsBusinessProfileCard input{
  width:110px;
  min-height:38px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.24);
  background:linear-gradient(180deg,#171c20,#101418);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.24);
  color:#e4dcce;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  text-align:right;
}

#settingsScreen #settingsBusinessProfileCard input{
  display:block;
  width:100%;
  min-width:0;
  min-height:44px;
  text-align:left;
  font-weight:400;
  letter-spacing:0;
}

#settingsScreen #settingsBusinessProfileCard .settings-field-grid{
  grid-template-columns:minmax(0,1fr);
}

#settingsScreen #settingsBusinessProfileCard .settings-field-grid label{
  min-width:0;
}

#settingsScreen #settingsBusinessProfileCard{
  padding:12px 14px;
}

#settingsScreen #settingsBusinessProfileCard .settings-field-grid{
  gap:8px;
  margin-top:10px;
}

#settingsScreen #settingsBusinessProfileCard .settings-field-grid label{
  gap:4px;
}

#settingsScreen #settingsBusinessProfileCard .settings-business-label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}

#settingsScreen #settingsBusinessProfileCard .settings-business-optional{
  margin-left:auto;
  font-size:10px;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:none;
  color:rgba(214,210,200,.55);
}

#settingsScreen #settingsBusinessProfileCard .settings-business-city-row{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  align-items:start;
  gap:8px;
  min-width:0;
  padding:0;
  border-bottom:0;
}

#settingsScreen #settingsBusinessProfileCard .settings-business-city-row label{
  min-width:0;
  align-content:start;
}

@media (max-width:359px){
  #settingsScreen #settingsBusinessProfileCard .settings-business-city-row{
    grid-template-columns:minmax(0,1fr);
  }
}

#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields{
  display:grid;
  gap:6px;
  margin-top:8px;
}

#settingsScreen .settings-pricing-field{
  position:relative;
  min-width:0;
}

#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields > .settings-pricing-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) 104px;
  align-items:center;
  gap:8px;
  min-height:44px;
}

#settingsScreen #settingsPricingTaxCard .settings-pricing-label{
  color:var(--titanium);
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

#settingsScreen .settings-pricing-tax-fields,
#settingsScreen .settings-pricing-field{
  padding:0;
  border-bottom:0;
  justify-content:normal;
}

#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields > .settings-pricing-field[hidden]{
  display:none;
}

#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields > .settings-pricing-field--stacked{
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  gap:4px;
}

#settingsScreen #settingsPricingTaxCard #settingsCurrencyField .studio-custom-select-host{
  display:block;
  width:100%;
  min-width:0;
}

#settingsScreen #settingsPricingTaxCard #settingsCurrencyField .studio-custom-select-trigger{
  box-sizing:border-box;
  width:100%;
  height:auto;
  min-height:44px;
  padding:8px 11px;
  font-size:16px;
}

#settingsScreen #settingsPricingTaxCard #settingsCurrencyField .studio-custom-select-trigger__value{
  flex:1 1 auto;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}

#settingsScreen #settingsPricingTaxCard #settingsTaxType,
#settingsScreen #settingsPricingTaxCard #settingsTaxName,
#settingsScreen #settingsPricingTaxCard #settingsBusinessGstNumber{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:44px;
  font-size:16px;
}

#settingsScreen #settingsPricingTaxCard #settingsTaxRate,
#settingsScreen #settingsPricingTaxCard #settingsDefaultLabourRate{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:44px;
  background:var(--ds-surface);
  color:var(--ds-text-strong);
  font-size:16px;
}

#settingsScreen #settingsPricingTaxCard .settings-toggle{
  min-height:44px;
  min-width:44px;
  justify-self:end;
}

#settingsScreen #settingsPricingTaxCard input:focus-visible{
  outline:2px solid rgba(var(--kl-red-rgb),.65);
  outline-offset:2px;
}

#settingsScreen #settingsPricingTaxCard .settings-toggle:has(input:focus-visible) .settings-toggle__control{
  outline:2px solid rgba(var(--kl-red-rgb),.65);
  outline-offset:3px;
}

#settingsScreen .settings-pricing-field .settings-inline-saved{
  position:absolute;
  top:100%;
  right:0;
  margin:0;
  font-size:10px;
}

#settingsPricingTaxCard .settings-context-actions:has(> button[hidden]){
  margin-top:0;
}

#settingsScreen #settingsPricingTaxCard .settings-context-actions{
  padding:0;
  border-bottom:0;
}

.settings-guide-card h2{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#cfc9bc;
}

.settings-guide-card ol{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  color:#a7ac9f;
  font-size:12px;
}

.quote-component-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  padding:0;
  border:1px solid rgba(214,210,200,.11);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(16,20,22,.95),rgba(9,12,13,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 18px rgba(0,0,0,.16);
  overflow:visible;
}

.quote-component-row.is-expanded{
  border-color:rgba(183,47,58,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 22px rgba(0,0,0,.22);
}

.quote-component-row__summary{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:12px;
}

.quote-component-row__open{
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  text-align:left;
  cursor:pointer;
}

.quote-component-row__open:focus-visible{
  outline:none;
}

.quote-component-row__summary-copy{
  display:grid;
  gap:4px;
  min-width:0;
}

.quote-component-row__summary-item{
  min-width:0;
  color:#e4ddd0;
  font-size:13px;
  font-weight:700;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
}

.quote-component-row__summary-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  color:#98a096;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.quote-component-row__summary-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.quote-component-row__summary-meta span:not(:last-child)::after{
  content:'·';
  color:#646a63;
}

.quote-component-row__summary-cost{
  color:#efe7d9;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.quote-component-row__summary-trailing{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}

.quote-component-row__disclosure{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:10px;
  color:#99a196;
  font-size:16px;
  line-height:1;
  font-weight:800;
  transform-origin:center;
  transform:rotate(0deg);
  transition:transform .18s ease,color .18s ease;
}

.quote-component-row.is-expanded .quote-component-row__disclosure{
  color:#d6d0c4;
  transform:rotate(90deg);
}

.quote-component-row__menu-wrap{
  position:relative;
  z-index:6;
}

.component-row-menu-trigger{
  width:34px;
  min-width:34px;
  height:34px;
}

.quote-component-row__menu{
  width:164px;
  z-index:7;
}

.quote-component-row__editor{
  display:grid;
  gap:7px;
  padding:0 10px 10px;
  border-top:1px solid rgba(214,210,200,.08);
}

.quote-component-row__scope{
  margin:2px 0 0;
  color:#8f968e;
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.quote-component-row__fields{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7px;
}

.quote-component-field{
  display:grid;
  gap:3px;
  min-width:0;
}

.quote-component-field span{
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#9aa097;
  font-weight:700;
}

.quote-component-field--description{
  grid-column:1/-1;
}

.quote-component-field--secondary{
  opacity:.72;
}

.quote-component-field--secondary input{
  color:rgba(214,210,200,.78);
}

.quote-component-field--category,
.quote-component-field--supplier{
  grid-column:1/-1;
}

.quote-component-field--cost{
  grid-column:2/-1;
  justify-self:end;
  width:min(100%,126px);
}

.quote-component-field--description input{
  min-height:34px;
}

.quote-component-field--cost input{
  min-height:34px;
  text-align:right;
}

.quote-component-field--quantity{
  grid-column:1/2;
}

.component-quantity{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:4px;
}

.component-quantity__step{
  min-height:34px;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.14);
  background:linear-gradient(180deg,#17191a,#0d0f10);
  color:#d7d0c3;
  font-size:15px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

.component-quantity__step:hover,
.component-quantity__step:focus-visible{
  border-color:rgba(214,210,200,.26);
  color:#ece6d8;
  outline:none;
}

.component-quantity__value{
  min-height:34px;
  text-align:center;
  -moz-appearance:textfield;
  appearance:textfield;
}

.component-quantity__value::-webkit-outer-spin-button,
.component-quantity__value::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.quote-component-row__editor .quote-component-picker__trigger{
  min-height:32px;
  padding:6px 9px;
  font-size:10px;
}

.quote-component-row__actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.quote-component-row__actions .ghost-action{
  min-height:34px;
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.quote-component-row__library{
  border-color:rgba(214,210,200,.12);
  background:rgba(255,255,255,.012);
  color:rgba(214,210,200,.6);
}

.quote-component-row__delete{
  border-color:rgba(173,37,49,.36);
  color:#e6c8cb;
  background:linear-gradient(180deg,rgba(70,17,23,.5),rgba(44,10,14,.56));
}

.quote-component-row__delete:hover,
.quote-component-row__delete:focus-visible{
  border-color:rgba(190,44,57,.58);
  color:#f3dde0;
  background:linear-gradient(180deg,rgba(90,20,28,.62),rgba(55,12,18,.66));
}

.quote-component-row--shift{
  animation:componentRowShiftUp .24s ease both;
}

.guide-spacing-row--active{
  background:rgba(var(--kl-red-rgb),.08);
  border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(var(--kl-red-rgb),.22);
}

@keyframes componentRowShiftUp{
  from{transform:translateY(8px);opacity:.92}
  to{transform:translateY(0);opacity:1}
}

.quote-component-name__controls{
  display:block;
}

.quote-component-picker__trigger{
  width:100%;
  min-height:34px;
  padding:8px 10px;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.1);
  background:linear-gradient(180deg,#0f1213,#090b0c);
  color:#e2dbce;
  font-size:11px;
  font-weight:700;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  text-align:left;
  text-transform:none!important;
  letter-spacing:0;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}

.quote-component-picker__trigger *{
  pointer-events:none;
}

.quote-component-picker__trigger:hover,
.quote-component-picker__trigger:focus-visible{
  border-color:rgba(214,210,200,.2);
  background:linear-gradient(180deg,#131719,#0c1012);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  outline:none;
}

.quote-component-picker__trigger b{
  color:#8d9088;
  font-size:12px;
  font-weight:700;
}

.quote-component-picker__value{
  width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
  text-transform:none!important;
  letter-spacing:0;
}

.quote-components{
  gap:10px;
}

.quote-actions-row{
  grid-template-columns:1fr;
}

.quote-add-component-btn{
  min-height:32px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  border:1px solid rgba(214,210,200,.18);
  border-radius:9px;
  background:#14171a;
  color:#cfc9bc;
  cursor:pointer;
}

.quote-add-component-btn--inline{
  width:auto;
  flex:none;
  min-height:32px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  letter-spacing:.05em;
  white-space:nowrap;
}

.quote-add-component-btn__plus{
  font-size:12px;
  font-weight:900;
  line-height:1;
  color:var(--kl-red-base);
}

#workshopScreen .quote-section__components-heading{
  display:grid;
  gap:3px;
  min-width:0;
}

#workshopScreen .quote-section__components-title{
  margin:0;
  color:#c8c2b6;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

#workshopScreen .quote-section__components-count{
  margin:0;
  color:#98a095;
  font-size:10px;
  letter-spacing:.05em;
}


.quote-section__subtle{
  margin:0;
  color:#70746f;
  font-size:11px;
  line-height:1.35;
}

.build-labour-summary{
  display:grid;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.08);
}
.build-labour-summary__row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-size:13px;
}
.build-labour-summary__row span:first-child{min-width:0;overflow-wrap:anywhere}
.build-labour-summary__row strong{flex:none;text-align:right;white-space:nowrap}
.build-labour-summary__row[hidden]{display:none}
.build-labour-summary__row--total{
  padding-top:6px;
  border-top:1px solid rgba(0,0,0,.08);
  font-weight:700;
}
.build-labour-summary__note{
  margin:0;
  color:#8f938c;
  font-size:11px;
  line-height:1.35;
}

.quote-section__meta{
  margin:0;
  color:#8f938c;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.04em;
  text-transform:none;
}

#workshopScreen .quote-builder{
  gap:12px;
}
#workshopScreen .quote-builder__entry-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

#workshopScreen .quote-builder__new-quote{
  min-height:52px;
  width:100%;
  border-radius:12px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  letter-spacing:.08em;
}

@media (max-width:520px){
  #workshopScreen .quote-builder__entry-actions{
    grid-template-columns:1fr;
  }
}

#workshopScreen .quote-section{
  gap:10px;
  padding:15px;
  border:1px solid rgba(149,154,149,.24);
  border-radius:19px;
  background:linear-gradient(180deg,rgba(22,26,28,.96),rgba(15,18,20,.98));
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}

#workshopScreen .quote-section__header{
  display:grid;
  gap:4px;
}

#workshopScreen .quote-section__body{
  display:grid;
  gap:8px;
}

#workshopScreen .quote-section--collapsible{
  padding:0;
  overflow:hidden;
}

#workshopScreen .quote-section__toggle{
  width:100%;
  border:none;
  border-bottom:1px solid rgba(149,154,149,.2);
  background:transparent;
  min-height:60px;
  padding:14px 15px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  text-align:left;
  cursor:pointer;
}

#workshopScreen .quote-section__toggle *{
  pointer-events:none;
}

#workshopScreen .quote-section__toggle-copy{
  display:grid;
  gap:4px;
}

#workshopScreen .quote-section__toggle-title{
  color:#c8c2b6;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

#workshopScreen .quote-section__toggle-summary{
  display:none;
  min-width:0;
}

#workshopScreen .quote-section--collapsed .quote-section__toggle-summary{
  display:block;
}

#workshopScreen .quote-section__toggle-summary span{
  display:block;
  color:#98a095;
  font-size:10px;
  letter-spacing:.05em;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#workshopScreen .quote-section__toggle-summary span:last-child{
  color:#d7d0c3;
  font-weight:700;
}

#workshopScreen .quote-section__chevron{
  color:#a8aca3;
  font-size:14px;
  font-weight:700;
  line-height:1;
  transition:transform .18s ease;
  pointer-events:none;
}

#workshopScreen .quote-section--collapsed .quote-section__chevron{
  transform:rotate(-90deg);
}

#workshopScreen .quote-section--collapsible .quote-section__body{
  /* No height cap when open: tall content (expanded New Component form) must never be clipped.
     The expand/collapse animation is driven by a temporary inline max-height in js/ui.js. */
  max-height:none;
  opacity:1;
  overflow:hidden;
  padding:14px 15px 15px;
  transition:max-height .24s ease,opacity .18s ease,padding-top .18s ease,padding-bottom .18s ease;
}

/* Keeps browser-driven scrolling (focus, scrollIntoView) clear of the sticky
   back button and the iPhone safe area. */
#workshopScreen .quote-component-row,
#workshopScreen .quote-component-row__editor input,
#workshopScreen .quote-component-row__editor textarea,
#workshopScreen .quote-component-row__editor button{
  scroll-margin-top:calc(66px + var(--safe-top));
}

#workshopScreen .quote-section--collapsed .quote-section__body{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  pointer-events:none;
}

#workshopScreen .quote-components,
#workshopScreen .quote-component-row,
#workshopScreen .component-sheet__row,
#workshopScreen .component-sheet__option,
#workshopScreen .component-sheet__edit,
#workshopScreen .component-sheet__delete,
#workshopScreen .component-sheet__close,
#workshopScreen .quote-component-picker__trigger,
#workshopScreen .quote-actions-grid button,
#workshopScreen .quote-mode-switch button,
#workshopScreen .blank-library-controls button,
#workshopScreen .quote-grid input,
#workshopScreen .quote-grid textarea{
  cursor:pointer;
}

#workshopScreen .quote-grid input,
#workshopScreen .quote-grid textarea{
  cursor:text;
}

#workshopScreen .quote-grid{
  gap:8px;
}

#workshopScreen .quote-grid input,
#workshopScreen .quote-grid textarea{
  border-color:rgba(214,210,200,.18);
  background:linear-gradient(180deg,#171b1d,#0f1315);
}

@media (hover:none) and (pointer:coarse){
  #workshopScreen .quote-grid input,
  #workshopScreen .quote-grid textarea,
  #workshopScreen .quote-component-row input,
  #workshopScreen .component-sheet__search,
  #workshopScreen .component-sheet__custom-input,
  .blank-editor-grid input,
  .blank-editor-grid textarea{
    font-size:16px;
  }
}

#workshopScreen .quote-actions-grid button[disabled]{
  opacity:.52;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

#workshopScreen .quote-actions-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
}

#workshopScreen .quote-actions-grid--build{
  grid-template-columns:1fr;
  gap:10px;
}

#workshopScreen .quote-actions-grid > button,
#workshopScreen .quote-actions-secondary summary,
#workshopScreen .quote-actions-secondary .ghost-action{
  min-height:52px;
  border-radius:12px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

#workshopScreen .quote-actions-grid--build > button{
  width:100%;
}

#workshopScreen .quote-actions-status{
  margin:2px 2px 0;
  min-height:15px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(198,193,183,.76);
}

#workshopScreen .quote-actions-status.is-pending{
  color:rgba(223,205,163,.88);
}

#workshopScreen .quote-action-tertiary{
  grid-column:1 / -1;
  opacity:.9;
}

#workshopScreen .quote-actions-secondary{
  grid-column:1 / -1;
  display:grid;
  gap:8px;
}

#workshopScreen .quote-actions-secondary summary{
  list-style:none;
  cursor:pointer;
  border:1px solid rgba(205,201,191,.18);
  background:linear-gradient(180deg,rgba(24,28,30,.95),rgba(16,20,22,.95));
  color:#bcb6aa;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#workshopScreen .quote-actions-secondary summary::-webkit-details-marker{
  display:none;
}

#workshopScreen .quote-actions-secondary__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

@media (max-width:520px){
  #workshopScreen .quote-actions-grid{
    grid-template-columns:1fr;
  }

  #workshopScreen .quote-actions-secondary__list{
    grid-template-columns:1fr;
  }
}

.quote-add-component-btn:hover,
.quote-add-component-btn:focus-visible{
  border-color:rgba(214,210,200,.32);
  background:#1a1e21;
}

.component-sheet{
  --component-sheet-vv-left:0px;
  --component-sheet-vv-width:100vw;
  --component-sheet-vv-top:0px;
  --component-sheet-vv-height:100dvh;
  --component-sheet-align-items:center;
  position:fixed;
  box-sizing:border-box;
  left:var(--component-sheet-vv-left);
  width:var(--component-sheet-vv-width);
  top:var(--component-sheet-vv-top);
  height:var(--component-sheet-vv-height);
  z-index:120;
  display:flex;
  align-items:var(--component-sheet-align-items);
  justify-content:center;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  overflow-x:hidden;
  overscroll-behavior:contain;
}

.component-sheet,
.component-sheet *{
  box-sizing:border-box;
}

.customer-finder__customer-row .component-sheet__option.is-active-customer{
  border-color:rgba(var(--kl-red-rgb),.5);
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.16),rgba(24,10,11,.5));
  box-shadow:inset 0 0 0 1px rgba(var(--kl-red-rgb),.24);
  color:#f6eee2;
}

.customer-finder__panel{
  --component-sheet-panel-max-width:min(94dvw,920px);
  --component-sheet-panel-max-height:min(90dvh,760px);
  --customer-finder-keyboard-inset:0px;
}

.customer-finder__body{
  gap:10px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--customer-finder-keyboard-inset));
}

.customer-finder__start-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.customer-finder__start-actions .primary-action,
.customer-finder__start-actions .ghost-action{
  width:100%;
}

#customerFinderSearchBlock{
  display:grid;
  gap:10px;
  min-width:0;
  min-height:0;
  flex:1;
  overflow:hidden;
}

.customer-finder__new-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  min-width:0;
  align-content:start;
  padding-bottom:max(10px,var(--customer-finder-keyboard-inset));
}

.customer-finder__new-form label{
  display:grid;
  gap:5px;
  min-width:0;
}

.customer-finder__new-form label span{
  color:#c5beaf;
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.customer-finder__new-form input,
.customer-finder__new-form textarea{
  width:100%;
  border:1px solid rgba(144,139,130,.34);
  border-radius:10px;
  padding:10px;
  background:rgba(9,12,13,.88);
  color:#efe8da;
  font:500 13px/1.2 "Manrope",system-ui,sans-serif;
}

.customer-finder__new-form input:focus,
.customer-finder__new-form textarea:focus{
  outline:none;
  border-color:rgba(206,44,58,.62);
  box-shadow:0 0 0 2px rgba(206,44,58,.18);
}

.customer-finder__new-form input::placeholder,
.customer-finder__new-form textarea::placeholder{
  color:rgba(214,210,200,.38);
  font-size:11px;
  font-weight:450;
}

input::placeholder,
textarea::placeholder{
  color:rgba(214,210,200,.38);
  font-size:.9em;
  font-weight:400;
  opacity:1;
}

.customer-finder__new-form-full{
  grid-column:1 / -1;
}

.customer-finder__new-form-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
}

.customer-finder__new-form-actions .primary-action.is-saved{
  background:rgba(216,210,197,.22);
  border-color:rgba(216,210,197,.4);
  color:#efe8dc;
}

.customer-finder__new-form-actions .primary-action:disabled{
  cursor:default;
  opacity:1;
}

.customer-finder__layout{
  display:grid;
  grid-template-columns:minmax(240px,300px) minmax(0,1fr);
  gap:10px;
  height:min(62dvh,540px);
  min-width:0;
  min-height:0;
}

.customer-finder__list-pane,
.customer-finder__detail-pane{
  min-height:0;
}

.customer-finder__list-pane{
  overflow:hidden;
}

.customer-finder__list{
  height:100%;
  max-height:100%;
  overflow:auto;
  scrollbar-gutter:stable;
}

.customer-finder__intro{
  margin:0;
  color:#bdb7ab;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
}

.customer-finder__customer-name{
  display:block;
}

.customer-finder__customer-meta{
  display:block;
  margin-top:4px;
  color:#8f928d;
  letter-spacing:.08em;
  font-size:10px;
  text-transform:uppercase;
}

.customer-finder__customer-row,
.customer-finder__work-row{
  position:relative;
}

.customer-finder__detail{
  display:grid;
  gap:10px;
  border:1px solid rgba(159,154,145,.22);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(17,21,23,.96),rgba(11,14,16,.98));
  padding:12px;
  max-height:100%;
  overflow:auto;
  scrollbar-gutter:stable;
}

.customer-finder__detail.has-history-more::after{
  content:"";
  position:sticky;
  bottom:0;
  z-index:1;
  display:block;
  grid-column:1 / -1;
  height:28px;
  margin-top:-28px;
  margin-right:64px;
  background:linear-gradient(180deg,rgba(11,14,16,0),rgba(11,14,16,.98));
  pointer-events:none;
}

.customer-finder__detail-head h3{
  margin:0;
  color:#e7dfd1;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.customer-finder__detail-head p{
  margin:5px 0 0;
  color:#9ea197;
  font-size:11px;
  text-transform:none;
}

.customer-finder__detail-facts{
  margin-top:8px;
  display:grid;
  gap:3px;
}

.customer-finder__detail-facts small{
  color:#b4b5ab;
  font-size:10px;
  letter-spacing:.03em;
}

.customer-finder__detail-actions{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.customer-finder__detail-actions .ghost-action{
  width:100%;
}

.customer-finder__work-section{
  display:grid;
  gap:7px;
}

.customer-finder__work-section h4{
  margin:0;
  color:#c3bcae;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.customer-finder__work-list{
  display:grid;
  gap:6px;
}

.customer-finder__work-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(159,154,145,.2);
  border-radius:10px;
  background:rgba(255,255,255,.015);
  padding:8px;
  cursor:pointer;
  transition:border-color var(--micro-motion) ease,background-color var(--micro-motion) ease,box-shadow var(--micro-motion) ease;
}

.customer-finder__work-row:hover,
.customer-finder__work-row:focus-visible,
.customer-finder__work-row:focus-within{
  border-color:rgba(206,44,58,.38);
  background:rgba(155,31,42,.16);
  box-shadow:0 7px 14px rgba(0,0,0,.2);
  outline:none;
}

.customer-finder__work-copy{
  min-width:0;
  display:grid;
  gap:2px;
}

.customer-finder__work-copy strong{
  color:#ddd5c7;
  font-size:12px;
  letter-spacing:.02em;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.customer-finder__work-copy small{
  color:#8f928a;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:none;
}

.customer-finder__work-delete{
  min-height:34px;
  padding:0 10px;
  border-radius:9px;
  font-size:10px;
  letter-spacing:.08em;
}

.customer-finder__field-error{
  margin:-1px 0 2px;
  color:#e07b86;
  font-size:11px;
  line-height:1.35;
  letter-spacing:.01em;
}

.customer-finder__root-view{
  display:grid;
  gap:8px;
}

.customer-finder__browse-head{
  display:grid;
  gap:4px;
}

.customer-finder__root-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.customer-finder__root-controls .ghost-action{
  min-height:34px;
  padding:0 12px;
}

.customer-finder__customer-row .component-sheet__option{
  min-height:52px;
  border-color:rgba(170,165,154,.2);
  background:linear-gradient(180deg,rgba(16,20,22,.9),rgba(10,13,15,.96));
}

.customer-finder__customer-row .component-sheet__option:hover,
.customer-finder__customer-row .component-sheet__option:focus-visible{
  border-color:rgba(var(--kl-red-rgb),.42);
  color:#f0e5d6;
}

.customer-finder__detail{
  border-color:rgba(180,173,161,.22);
}

.customer-finder__detail-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

#customerFinderSheet .workshop-tool-nav-back{
  min-height:44px;
}

#customerFinderSheet .workshop-tool-nav-back:focus-visible{
  outline:2px solid rgba(var(--kl-red-rgb),.8);
  outline-offset:2px;
}

.customer-finder__detail-menu-wrap,
.customer-finder__work-actions{
  position:relative;
  flex:0 0 auto;
}

.customer-finder__detail-more,
.customer-finder__work-more{
  min-width:34px;
  min-height:34px;
  padding:0;
  border-radius:10px;
  font-size:18px;
  line-height:1;
}

#customerFinderSheet .customer-finder__inline-menu,
.customer-finder__inline-menu.saved-build-card__menu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  left:auto;
  min-width:146px;
  max-width:min(220px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  padding:4px;
  display:grid;
  gap:3px;
  border:1px solid rgba(214,210,200,.18);
  border-radius:10px;
  background:linear-gradient(180deg,#181d1f 0%,#0e1113 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  z-index:30;
}

#customerFinderSheet .customer-finder__inline-menu .saved-build-card__menu-item{
  min-height:30px;
  padding:0 9px;
  border-radius:8px;
  border:1px solid rgba(214,210,200,.12);
  background:linear-gradient(180deg,rgba(24,29,31,.92),rgba(14,17,19,.98));
  color:#ddd6ca;
  text-align:left;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:none;
  cursor:pointer;
  white-space:nowrap;
}

#customerFinderSheet .customer-finder__inline-menu .saved-build-card__menu-item:hover,
#customerFinderSheet .customer-finder__inline-menu .saved-build-card__menu-item:focus-visible{
  border-color:rgba(214,210,200,.3);
  color:#f2ece0;
  background:linear-gradient(180deg,rgba(32,38,41,.96),rgba(20,24,26,.99));
  outline:none;
}

#customerFinderSheet .customer-finder__inline-menu .saved-build-card__menu-item--danger{
  border-color:rgba(191,63,75,.44);
  color:#f0d6d9;
  background:linear-gradient(180deg,rgba(88,23,31,.5),rgba(53,14,19,.58));
}

#customerFinderSheet .customer-finder__inline-menu .saved-build-card__menu-item--danger:hover,
#customerFinderSheet .customer-finder__inline-menu .saved-build-card__menu-item--danger:focus-visible{
  border-color:rgba(225,74,88,.65);
  color:#fff;
  background:linear-gradient(180deg,rgba(110,28,38,.65),rgba(68,17,24,.75));
  outline:none;
}

.customer-finder__work-row{
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:8px;
}

.customer-finder__work-copy{
  gap:3px;
}

.customer-finder__work-copy small{
  letter-spacing:.03em;
}

.customer-finder__work-delete{
  display:none;
}
@media (max-width:760px){
  .customer-finder__start-actions{
    grid-template-columns:1fr;
  }

  .customer-finder__new-form{
    grid-template-columns:1fr;
  }

  .customer-finder__layout{
    grid-template-columns:1fr;
    height:auto;
  }

  .customer-finder__list-pane{
    max-height:34dvh;
  }

  .customer-finder__detail-pane{
    max-height:42dvh;
  }

  .customer-finder__detail-actions{
    grid-template-columns:1fr;
  }

  .customer-finder__root-controls{
    grid-template-columns:1fr;
  }
}

.component-sheet__scrim{
  position:absolute;
  inset:0;
  background:rgba(3,5,6,.7);
  backdrop-filter:blur(3px);
  cursor:pointer;
}

.component-sheet__panel{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  transform:none;
  margin:0;
  width:min(100%,var(--component-sheet-panel-max-width,min(92dvw,620px)));
  max-width:min(100%,var(--component-sheet-panel-max-width,min(92dvw,620px)));
  max-height:min(78vh,620px);
  max-height:min(78dvh,620px);
  max-height:min(100%,var(--component-sheet-panel-max-height,min(78dvh,620px)));
  overflow:hidden;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  border-radius:18px;
  border:1px solid rgba(112,122,123,.3);
  background:linear-gradient(180deg,#1a1f21 0%,#111517 56%,#0d1112 100%);
  box-shadow:0 18px 30px rgba(0,0,0,.46),0 1px 0 rgba(255,255,255,.03) inset;
  color-scheme:dark;
}

.component-sheet__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px 8px;
  min-width:0;
}

.component-sheet__header-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.component-sheet__header h2{
  margin:0;
  min-width:0;
  font-size:15px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#d9d3c7;
}

.component-sheet__close{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(214,210,200,.12);
  background:linear-gradient(180deg,rgba(25,30,33,.94),rgba(15,19,22,.96));
  color:#c0baad;
  font-size:15px;
  line-height:1;
}

.component-sheet__close:hover,
.component-sheet__close:focus-visible{
  border-color:rgba(206,44,58,.4);
  background:rgba(155,31,42,.2);
  color:#f2ece1;
  outline:none;
}

.component-sheet__body{
  padding:0 12px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  min-width:0;
  min-height:0;
  flex:1;
  overflow:hidden;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.component-sheet__search{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:34px;
  margin-bottom:6px;
  padding:7px 11px;
  border-radius:9px;
  border:1px solid rgba(170,176,173,.18);
  background:linear-gradient(180deg,rgba(11,15,17,.9),rgba(8,11,13,.95));
  color:#d2cbc0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  outline:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.02);
  appearance:none;
}

.component-sheet__search:focus{
  border-color:rgba(170,36,48,.44);
  box-shadow:0 0 0 1px rgba(170,36,48,.2),inset 0 1px 1px rgba(255,255,255,.02);
}

.component-sheet__search::placeholder{
  color:#7f857f;
}

.component-sheet__filter{
  margin-top:4px;
}

.component-sheet__list{
  width:100%;
  min-width:0;
  max-width:100%;
  border:1px solid rgba(214,210,200,.06);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(9,12,13,.58),rgba(7,9,10,.66));
  padding:4px;
  flex:1;
  min-height:0;
  overflow:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}

.component-sheet__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  width:100%;
  min-width:0;
  align-items:center;
  position:relative;
  padding:1px 0;
  border-left:1px solid transparent;
  transition:border-color .16s ease,background-color .16s ease;
}

.component-sheet__row.is-selected{
  border-left-color:rgba(163,31,42,.72);
  background:linear-gradient(90deg,rgba(46,52,54,.42),rgba(23,28,30,.12));
}

.component-sheet__option{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  text-align:left;
  border:1px solid rgba(214,210,200,.06);
  background:linear-gradient(180deg,rgba(19,23,25,.74),rgba(12,15,17,.82));
  color:#d8d2c7;
  line-height:1.2;
  padding:7px 9px;
  border-radius:8px;
  margin:0;
}

.component-sheet__option-title{
  display:block;
  color:#d4cec1;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.component-sheet__option-meta{
  display:block;
  margin-top:2px;
  color:#818781;
  font-size:10px;
  line-height:1.25;
  letter-spacing:.01em;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.component-sheet__size-add{
  position:sticky;
  bottom:0;
  width:100%;
  min-height:42px;
  margin-top:2px;
  border-radius:10px;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  z-index:2;
}

.component-sheet__size-add:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.component-sheet__row-tools{
  display:grid;
  grid-template-columns:auto auto;
  gap:3px;
  align-items:center;
}

.component-sheet__favorite{
  width:30px;
  min-width:30px;
  max-width:30px;
  height:30px;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.08);
  background:transparent;
  color:#7f8680;
  font-size:11px;
  line-height:1;
  display:grid;
  place-items:center;
  appearance:none;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}

.component-sheet__favorite[aria-pressed="true"]{
  color:#a8303f;
  border-color:rgba(168,48,63,.34);
  background:rgba(153,35,47,.12);
}

.component-sheet__favorite:hover,
.component-sheet__favorite:focus-visible{
  border-color:rgba(170,36,48,.3);
  background:rgba(170,36,48,.1);
  outline:none;
}

.component-sheet__menu-trigger{
  width:30px;
  min-width:30px;
  max-width:30px;
  height:30px;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.08);
  background:rgba(255,255,255,.01);
  color:#8a9089;
  font-size:16px;
  line-height:1;
  display:grid;
  place-items:center;
  appearance:none;
  cursor:pointer;
}

.component-picker-menu{
  position:absolute;
  z-index:4;
  width:164px;
  padding:6px;
  border-radius:12px;
  border:1px solid rgba(214,210,200,.1);
  background:linear-gradient(180deg,rgba(20,24,26,.98),rgba(11,15,17,.98));
  box-shadow:0 10px 20px rgba(0,0,0,.28);
}

.component-picker-menu__item{
  width:100%;
  min-height:34px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:#ddd6ca;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-align:left;
  appearance:none;
}

.component-sheet__option:hover,
.component-sheet__option:focus-visible{
  border-color:rgba(214,210,200,.14);
  background:linear-gradient(180deg,rgba(25,30,32,.86),rgba(17,20,22,.9));
  color:#f2ece0;
  outline:none;
}

.component-sheet__menu-trigger:hover,
.component-sheet__menu-trigger:focus-visible,
.component-picker-menu__item:hover,
.component-picker-menu__item:focus-visible{
  border-color:rgba(170,36,48,.34);
  background:rgba(155,31,42,.16);
  color:#f1ebde;
  outline:none;
}

.component-sheet__empty{
  color:#9ca099;
  font-size:11px;
  font-weight:600;
  text-transform:none;
  letter-spacing:.02em;
  padding:0;
  margin:0;
}

.component-sheet__empty-state{
  min-height:148px;
  display:grid;
  place-content:center;
  gap:10px;
  justify-items:center;
  padding:12px;
}

.component-sheet__empty-icon{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(214,210,200,.22);
  color:#8a9089;
  display:grid;
  place-items:center;
  font-size:12px;
}

.component-sheet__add{
  width:100%;
  min-width:0;
  max-width:100%;
  margin-top:5px;
  min-height:34px;
  border-radius:10px;
  border:1px solid rgba(174,40,52,.42);
  background:linear-gradient(180deg,rgba(51,56,58,.95),rgba(36,41,43,.95));
  color:#e7dfd2;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:none;
  text-align:left;
  padding:0 10px;
}

.component-sheet__add:hover,
.component-sheet__add:focus-visible{
  border-color:rgba(174,40,52,.62);
  background:linear-gradient(180deg,rgba(56,62,64,.97),rgba(40,44,46,.97));
  color:#f2ece0;
  outline:none;
}

.component-sheet__row--add{
  grid-template-columns:minmax(0,1fr);
}

.component-sheet__add--inline{
  margin-top:4px;
}

.component-sheet__add--header{
  width:auto;
  min-width:0;
  max-width:none;
  min-height:28px;
  margin-top:0;
  padding:0 10px;
  border-radius:999px;
  border-color:rgba(214,210,200,.2);
  background:linear-gradient(180deg,rgba(20,24,26,.9),rgba(12,16,18,.95));
  color:#d6d0c4;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
}

.component-sheet__add--header:hover,
.component-sheet__add--header:focus-visible{
  border-color:rgba(170,36,48,.44);
  background:linear-gradient(180deg,rgba(24,29,31,.94),rgba(16,20,22,.97));
}

.component-sheet__custom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px;
  align-items:center;
}

.component-sheet__custom-title{
  grid-column:1/-1;
  margin:0;
  color:#a7aba4;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.component-sheet__custom-input{
  min-height:34px;
  padding:7px 9px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.1);
  background:linear-gradient(180deg,#111618,#0a0e10);
  color:#e3dccf;
  font-size:12px;
  font-weight:600;
  appearance:none;
}

.component-sheet__custom-input:focus{
  border-color:rgba(206,44,58,.36);
  box-shadow:0 0 0 1px rgba(206,44,58,.2);
  outline:none;
}

.component-sheet__custom-btn{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.12);
  background:linear-gradient(180deg,#14181a,#0b0d0f);
  color:#e0d9cc;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  appearance:none;
}

.component-sheet__custom-btn:hover,
.component-sheet__custom-btn:focus-visible{
  border-color:rgba(206,44,58,.38);
  background:rgba(155,31,42,.2);
  color:#f2ece0;
  outline:none;
}

.component-sheet__panel,
.component-sheet__list{
  scrollbar-width:thin;
  scrollbar-color:rgba(110,117,115,.6) transparent;
}

.component-sheet__panel::-webkit-scrollbar,
.component-sheet__list::-webkit-scrollbar{
  width:8px;
}

.component-sheet__panel::-webkit-scrollbar-track,
.component-sheet__list::-webkit-scrollbar-track{
  background:transparent;
}

.component-sheet__panel::-webkit-scrollbar-thumb,
.component-sheet__list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(116,123,121,.6),rgba(78,84,82,.6));
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

.quote-mini-btn{
  width:34px;
  height:34px;
  padding:0;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.12);
  background:linear-gradient(180deg,#14181a,#0b0d0f);
  color:#bfb9ac;
  font-size:14px;
  font-weight:700;
}

.quote-gst-toggle{
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
}

.quote-gst-toggle input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:#8b1720;
}

.settings-inline-saved{
  display:inline-block;
  margin-left:8px;
  color:#e5ded2;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.85;
}

.quote-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:6px;
  align-items:center;
  margin-top:10px;
  width:min(100%,252px);
}

.quote-mode-switch--subdued{
  width:min(100%,130px);
}

.quote-mode-switch--subdued .ghost-action{
  opacity:.72;
}

.quote-mode-switch--subdued [data-quote-mode="customer"]{
  display:none;
}

.quote-mode-switch .ghost-action{
  min-height:36px;
  font-size:11px;
}

.quote-mode-switch .ghost-action.active{
  background:linear-gradient(180deg,rgba(155,31,42,.94),rgba(105,17,26,.94));
  color:#f4ede1;
}

.quote-mode-switch__label{
  justify-self:end;
  color:#8a8d86;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#viewQuoteSheet .component-sheet__panel{
  max-height:var(--component-sheet-panel-max-height,min(100%,calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 10px)));
}

#viewQuoteSheet .component-sheet__body{
  min-height:0;
  overflow:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}

.quote-preview-panel{
  width:min(92vw,480px);
  max-height:min(100%,calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 14px));
}

.quote-preview-body{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  gap:10px;
  padding-bottom:max(8px,env(safe-area-inset-bottom,0px));
}

/* Typography polish: small labels read a bit sharper without changing layout structure. */
.subtle,
.quote-grid span,
.quote-component-row span,
.guide-spacing-row__meta small,
.layout-control-card__meta,
.quote-mode-switch__label,
.brand-copy span,
.brand-lockup small{
  color:#91968f;
}

.quote-grid span,
.quote-component-row span,
.layout-control-card__meta,
.guide-spacing-row__meta small,
.quote-mode-switch__label,
.brand-copy span,
.brand-lockup small{
  font-weight:700;
}

.guide-spacing-row__meta span,
.quote-builder__head .subtle,
.quote-section h2,
.component-sheet__header h2{
  color:#cfc9bc;
}

.quote-preview-card{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(214,210,200,.08);
  background:rgba(0,0,0,.16);
}

.quote-preview-card__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
}

.quote-preview-card__head strong,
.quote-preview-card__head span,
.quote-preview-card p{
  margin:0;
}

.quote-preview-card__head strong{
  color:#e6dece;
  font-size:15px;
  letter-spacing:.01em;
  text-transform:none;
  line-height:1.3;
}

.quote-preview-card__head span,
.quote-preview-card p{
  color:#9ca094;
  font-size:11px;
}

#quotePreviewBuildName{
  color:#c9c1b0;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:none;
}

.quote-preview-summary{
  display:grid;
  gap:8px;
}

.quote-preview-summary div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.06);
}

.quote-preview-summary span{
  color:#8a8d86;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.quote-preview-summary strong{
  color:#ece6d8;
  font-size:12px;
}

.quote-preview-parts{
  display:grid;
  gap:8px;
  padding:10px 0 2px;
  border-top:1px solid rgba(255,255,255,.06);
}

.quote-preview-parts span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.quote-preview-parts ul{
  margin:0;
  padding-left:16px;
  display:grid;
  gap:5px;
}

.quote-preview-parts li{
  color:#ddd5c7;
  font-size:12px;
  line-height:1.35;
}

.view-quote{
  display:grid;
  gap:10px;
  padding-bottom:8px;
}

.view-quote__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}

.view-quote__row span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.view-quote__row strong{
  color:#ece6d8;
  text-align:right;
}

.view-quote__business{
  display:grid;
  gap:3px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.view-quote__business strong{
  color:#f4efe5;
  font-size:13px;
  letter-spacing:.04em;
}

.view-quote__business span{
  color:#b8b19f;
  font-size:11px;
}

.view-quote__payment{
  display:grid;
  gap:6px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}

.view-quote__payment > span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.view-quote__payment div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}

.view-quote__payment div span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.view-quote__payment div strong{
  color:#ece6d8;
  text-align:right;
}

.view-quote__specs{
  display:grid;
  gap:6px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.view-quote__specs div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}

.view-quote__specs div span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.view-quote__specs div strong{
  color:#ece6d8;
  text-align:right;
}

.view-quote__pricing{
  display:grid;
  gap:6px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.06);
}

.view-quote__pricing div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.view-quote__pricing div span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.view-quote__pricing div strong{
  color:#ece6d8;
  font-size:14px;
}

.view-quote__delivery{
  display:grid;
  gap:4px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.06);
  break-inside:avoid;
}

.view-quote__delivery > span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.view-quote__delivery div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}

.view-quote__delivery div span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.view-quote__delivery div strong{
  color:#ece6d8;
  text-align:right;
}

.view-quote__delivery p{
  margin:0;
  color:#ddd5c7;
  font-size:12px;
  line-height:1.4;
}

.view-quote__confirmation{
  margin:0;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#b8b19f;
  font-size:11px;
  line-height:1.5;
  break-inside:avoid;
}

.view-quote__notes{
  display:grid;
  gap:4px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}

.view-quote__notes span{
  color:#b8b19f;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.view-quote__notes p{
  margin:0;
  color:#ddd5c7;
  font-size:12px;
  line-height:1.4;
  white-space:pre-wrap;
}

@media (max-width:520px){
  .view-quote__row,
  .view-quote__specs div,
  .view-quote__delivery div,
  .view-quote__pricing div{
    flex-wrap:wrap;
  }
}

.quote-preview-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:auto;
  position:sticky;
  bottom:0;
  z-index:2;
  padding:8px 0 max(8px,env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(13,17,18,0),rgba(13,17,18,.92) 38%,rgba(13,17,18,.98) 100%);
}

.quote-gst-status{
  margin:0;
  font-size:10px;
  letter-spacing:.08em;
  color:#7f837c;
  text-transform:uppercase;
}

.quote-field--muted input{
  color:#6e736d!important;
  background:linear-gradient(180deg,#0a0c0d,#080a0b)!important;
}

/* Marks whichever of Final Price/Required Profit/Required Margin is the active pricing target -
   restrained red accent only, no fill/glow, so it reads as emphasis rather than an error state.
   #workshopScreen + label class keeps specificity above the generic .quote-grid input border rules. */
#workshopScreen .quote-grid label.quote-field--active-target span{
  color:rgba(var(--kl-red-rgb),.92);
}

#workshopScreen .quote-grid label.quote-field--active-target input{
  border-color:rgba(var(--kl-red-rgb),.4);
}

.quote-pricing-driver{
  display:grid;
  gap:6px;
}

.quote-pricing-driver__label{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a8f88;
}

.quote-pricing-driver__options{
  display:flex;
  gap:0;
  padding:2px;
  border-radius:12px;
  border:1px solid rgba(216,210,197,.22);
  background:linear-gradient(180deg,rgba(15,18,20,.9),rgba(10,12,14,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}

.quote-pricing-driver__button{
  flex:1 1 0;
  min-width:0;
  min-height:38px;
  padding:7px 10px;
  border-radius:9px;
  border-color:transparent;
  background:transparent;
  color:rgba(222,215,203,.84);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
  cursor:pointer;
}

.quote-pricing-driver__button + .quote-pricing-driver__button{
  border-left:1px solid rgba(216,210,197,.15);
}

.quote-pricing-driver__button:hover,
.quote-pricing-driver__button:focus-visible{
  border-color:rgba(214,210,200,.34);
  color:#ece5d8;
}

.quote-pricing-driver__button[aria-pressed="true"]{
  border-color:rgba(var(--kl-red-rgb),.72);
  background:linear-gradient(160deg,rgba(var(--kl-red-rgb),.22),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(var(--kl-red-rgb),.2);
  color:#fff0eb;
}

.quote-pricing-driver__hint{
  margin:0;
  font-size:10px;
  letter-spacing:.04em;
  color:#7f837c;
}

.blank-library-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin:0 4px 10px;
}

.blank-library-controls .component-sheet__search{
  margin:0;
}

.blank-library-controls .primary-action{
  min-height:36px;
  padding:0 12px;
  font-size:11px;
  letter-spacing:.06em;
}

.saved-builds-controls .primary-action{
  min-width:116px;
}

.saved-builds-status-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin:0 2px 10px;
}

.saved-builds-status-tab{
  min-height:38px;
  border-radius:10px;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.saved-builds-status-tab.active{
  border-color:rgba(var(--kl-red-rgb),.6);
  color:#f4ddda;
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.2),rgba(56,14,18,.24));
}

.saved-builds-list{
  display:grid;
  gap:10px;
  padding:0 2px 8px;
}

.saved-build-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
  margin:0 2px;
  padding:10px;
  border:1px solid rgba(214,210,200,.1);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(17,21,23,.94),rgba(10,13,15,.98));
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.saved-build-card__open{
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  display:grid;
  gap:6px;
  color:inherit;
}

.saved-build-card__head{
  display:grid;
  gap:2px;
}

.saved-build-card__head strong{
  color:#e8e0d2;
  font-size:14px;
  line-height:1.22;
}

.saved-build-card__title{
  margin:0;
  color:#a8ada4;
  font-size:11px;
  line-height:1.3;
}

.saved-build-card__meta{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:8px;
  align-items:baseline;
}

.saved-build-card__meta span{
  color:#8f948c;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:9px;
  font-weight:700;
}

.saved-build-card__meta strong{
  color:#ddd6c9;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
}

.saved-build-card__actions{
  display:grid;
  grid-template-columns:auto auto;
  gap:6px;
  align-items:start;
}

.saved-builds-empty{
  display:grid;
  gap:12px;
  justify-items:start;
  margin:0 2px;
  padding:18px 16px;
  border:1px solid rgba(214,210,200,.1);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(17,21,23,.94),rgba(10,13,15,.98));
}

.saved-builds-empty h3{
  margin:0;
  color:#e8e0d2;
  font-size:18px;
  line-height:1.1;
}

.app-shell:has(#buildsScreen.active) .build-pill,
.app-shell:has(#buildsScreen.active) > .live-build-status{
  display:none;
}

@media (min-width:761px){
  .app-shell:has(#buildsScreen.active){
    width:min(100%,840px);
  }

  .app-shell:has(#workshopScreen.active #studioWorkflowPanel:not([hidden])){
    width:min(100%,840px);
  }

  #buildsScreen.active{
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    align-content:start;
    gap:10px;
    min-height:calc(100dvh - 222px);
    padding-bottom:calc(138px + var(--safe-bottom));
  }
}

.selected-blank-panel{
  padding:2px 0 2px;
}

.selected-blank-card{
  position:relative;
  display:grid;
  gap:12px;
  padding:12px 0 6px;
}

.selected-blank-card__head{
  display:grid;
  gap:8px;
}

.selected-blank-card__name{
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:#ece5d8;
  font-size:22px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.01em;
  text-align:left;
  text-transform:none;
  cursor:default;
}

.selected-blank-card__summary{
  display:grid;
  gap:5px;
  color:#a9ada5;
  font-size:12px;
  line-height:1.35;
}

.selected-blank-card__summary div:last-child{
  color:#ddd6ca;
  font-size:13px;
  font-weight:700;
}

.selected-blank-card__actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}

.selected-blank-card__change{
  width:100%;
  min-height:40px;
  border:1px solid rgba(171,178,171,.18);
  background:linear-gradient(180deg,rgba(14,18,19,.94),rgba(9,12,13,.96));
  color:#d6d0c4;
  justify-content:center;
}

.selected-blank-card__change:hover,
.selected-blank-card__change:focus-visible{
  border-color:rgba(var(--kl-red-rgb),.42);
  background:linear-gradient(180deg,rgba(18,23,24,.96),rgba(11,14,16,.98));
  color:#efe7db;
  outline:none;
}

.selected-blank__menu-trigger{
  width:40px;
  min-width:40px;
  height:40px;
  border-radius:12px;
}

.selected-blank__menu{
  width:164px;
  position:fixed;
  z-index:80;
}

.selected-blank-card--empty{
  gap:14px;
}

.selected-blank-card--empty strong{
  color:#ece5d8;
  font-size:22px;
  line-height:1.1;
  font-weight:800;
}

.selected-blank-card--empty .selected-blank-card__actions{
  grid-template-columns:1fr;
}

.selected-blank-edit-grid{
  margin-top:2px;
}

.selected-blank-card__edit-actions{
  margin-top:2px;
}

.blank-card{
  position:relative;
  display:grid;
  gap:6px;
  margin:0 2px 6px;
  padding:0;
  border-left:1px solid transparent;
  transition:border-color .16s ease,background-color .16s ease;
}

.blank-card em{
  font-size:10px;
  color:#91968f;
}

.blank-card__select{
  width:100%;
  border:1px solid rgba(214,210,200,.06);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(19,23,25,.72),rgba(12,15,17,.82));
  text-align:left;
  padding:7px 9px;
  display:grid;
  gap:3px;
}

.blank-card__select span{
  display:block;
  color:#8f948c;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:9px;
  font-weight:700;
}

.blank-card__select strong{
  display:block;
  color:#d8d1c4;
  font-size:12.5px;
  line-height:1.22;
  margin:0;
}

.blank-card__select em{
  font-style:normal;
}

.blank-card__select:hover,
.blank-card__select:focus-visible{
  border-color:rgba(214,210,200,.14);
  background:linear-gradient(180deg,rgba(25,30,32,.86),rgba(17,20,22,.9));
  outline:none;
}

.blank-card__actions{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:end;
  gap:4px;
  align-items:center;
}

.blank-card__menu{
  width:164px;
}

.blank-card__menu-trigger{
  justify-self:end;
}

.blank-card__archive{
  color:#a49e93;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.blank-editor-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.blank-editor-grid__full{
  grid-column:1/-1;
}

.blank-editor-grid label{
  display:grid;
  gap:4px;
}

.blank-editor-grid label span{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#969a92;
  font-weight:700;
}

.blank-editor-grid input,
.blank-editor-grid textarea{
  width:100%;
  min-height:34px;
  padding:8px 9px;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.1);
  background:linear-gradient(180deg,#0f1213,#090b0c);
  color:#d7d0c3;
  font-size:11px;
  font-weight:600;
  outline:none;
}

.blank-editor-grid textarea{
  min-height:58px;
  resize:vertical;
}

.blank-editor-grid input:focus,
.blank-editor-grid textarea:focus{
  border-color:rgba(var(--kl-red-rgb),.44);
}

.component-sheet__danger{
  border-color:rgba(173,37,49,.44)!important;
  background:rgba(173,37,49,.25)!important;
  color:#f3e6db!important;
}

.quote-builder__head h1,
.quote-section h2,
.brand-lockup strong,
.screen-head h1{
  color:#ddd6ca;
}

.quote-grid span,
.quote-component-row span,
.layout-control-card__meta,
.guide-spacing-row__meta small,
.brand-copy span,
.brand-lockup small{
  color:#9aa097;
}

.guide-spacing-list .guide-spacing-row{
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr) minmax(132px,148px);
  align-items:center;
  min-width:0;
}

.guide-spacing-row__spacing{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:10px;
  min-width:0;
}

.guide-spacing-row__spacing-label{
  text-align:left;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9aa097;
  white-space:nowrap;
}

.guide-spacing-row__spacing-value{
  justify-self:end;
  text-align:right;
  white-space:nowrap;
  color:#c7c0b3;
  font-size:10px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

@media (max-width:520px){
  .guide-spacing-list .guide-spacing-row{
    grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(118px,136px);
    gap:7px;
  }

  .guide-spacing-row__spacing{
    gap:8px;
  }
}

#layoutGuideNotice{
  margin:7px 2px 0;
  font-size:10px;
  line-height:1.35;
}

.layout-control-card__button:disabled{
  opacity:.56;
  cursor:not-allowed;
  transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 4px rgba(0,0,0,.12);
}

/* Build 041 UI refinement pass: centered shell, home focus, and nav precision */
:root{
  --app-max-width:488px;
  --app-gutter:14px;
  --surface-radius:18px;
  --surface-padding:16px;
  --surface-stack-gap:10px;
  --surface-shadow:0 8px 20px rgba(0,0,0,.15);
  --micro-motion:180ms;
}

.app-shell{
  width:min(100%,var(--app-max-width));
  margin:0 auto;
  padding-left:var(--app-gutter);
  padding-right:var(--app-gutter);
  padding-bottom:calc(122px + var(--safe-bottom));
}

.home-hero,
.module-card,
.layout-control-card,
.guide-spacing-panel,
.settings-card,
.empty-card,
.rod-blank-visual,
#workshopScreen .quote-builder__head,
#workshopScreen .quote-section{
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
}

#homeScreen.active{
  display:grid;
  align-content:start;
  gap:var(--surface-stack-gap);
  padding-block:clamp(6px,1.8vh,16px) 0;
}

#homeScreen .home-premium-shell{
  gap:16px;
  max-width:940px;
  padding:20px 0 14px;
}

#homeScreen .home-premium-hero{
  gap:10px;
  max-width:760px;
  margin-bottom:0;
}

#homeScreen .home-premium-hero h1{
  font-size:clamp(36px,8.1vw,70px);
  line-height:.9;
  letter-spacing:-.058em;
}

#homeScreen .home-premium-hero p{
  max-width:50ch;
  color:#8f938c;
  font-size:12.5px;
  letter-spacing:.05em;
  line-height:1.5;
  text-transform:uppercase;
}

#homeScreen .home-living-rod{
  width:min(100%,760px);
  height:40px;
  margin:14px 0 12px;
}

#homeScreen .home-enter-rod-button{
  width:min(84%,780px);
  min-height:51px;
  justify-self:center;
}

#homeScreen .home-hero{
  margin-bottom:0;
  padding:18px var(--surface-padding);
  text-align:center;
}

#homeScreen .home-hero h1{
  margin:8px 0 2px;
  letter-spacing:-.025em;
  line-height:1.02;
}

#homeScreen .module-stack{
  gap:10px;
}

#homeScreen .home-enter-card{
  min-height:102px;
  padding:17px var(--surface-padding);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:14px;
  row-gap:3px;
  align-items:center;
}

#homeScreen .home-enter-card span,
#homeScreen .home-enter-card strong,
#homeScreen .home-enter-card em{
  grid-column:1;
}

#homeScreen .home-enter-card strong{
  margin:6px 0 4px;
}

#homeScreen .home-enter-card b{
  position:static;
  grid-column:2;
  grid-row:1 / span 3;
  align-self:center;
  justify-self:end;
  transform:none;
}

.bottom-nav{
  width:min(100%,var(--app-max-width));
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  padding:6px;
  border-color:rgba(214,210,200,.14);
  background:linear-gradient(180deg,rgba(10,12,13,.95),rgba(7,9,10,.98));
  box-shadow:0 8px 18px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.03);
}

.bottom-nav button{
  min-height:51px;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  line-height:1;
  border-radius:12px;
  border:1px solid transparent;
  position:relative;
  color:#848983;
  transition:color var(--micro-motion) ease,background-color var(--micro-motion) ease,box-shadow var(--micro-motion) ease;
}

.bottom-nav button i{
  display:block;
  min-height:15px;
  line-height:1;
  font-size:17.2px;
  font-style:normal;
  color:inherit;
  opacity:.84;
  transform:translateY(1px);
  transition:opacity var(--micro-motion) ease,transform var(--micro-motion) ease;
}

.bottom-nav .bottom-nav__icon{
  opacity:.84;
}

.bottom-nav .bottom-nav__label{
  opacity:.8;
}

.bottom-nav button span{
  margin:0;
  width:100%;
  text-align:center;
  font-size:8.5px;
  line-height:1.15;
  letter-spacing:.11em;
  opacity:.82;
  transform:translateY(1px);
  transition:opacity var(--micro-motion) ease,transform var(--micro-motion) ease,color var(--micro-motion) ease;
}

.bottom-nav button::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:4px;
  width:22px;
  height:2.4px;
  border-radius:999px;
  background:rgba(var(--kl-red-rgb),.9);
  opacity:0;
  transform:translateX(-50%) scaleX(.5);
  transition:opacity var(--micro-motion) ease,transform var(--micro-motion) ease;
}

.bottom-nav button:hover,
.bottom-nav button:focus-visible{
  color:#bdb7aa;
  background:rgba(255,255,255,.04);
  border-color:rgba(214,210,200,.14);
}

.bottom-nav button.active{
  color:#eee7da;
  background:rgba(255,255,255,.07);
  border-color:rgba(216,212,202,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(var(--kl-red-rgb),.58);
}

.bottom-nav button.active i,
.bottom-nav button.active span{
  opacity:1;
  transform:translateY(0);
}

.bottom-nav button.active::after{
  left:50%;
  right:auto;
  background:rgba(var(--kl-red-rgb),.94);
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}

.live-build-status,
.offline-ready-status{
  width:min(100%,var(--app-max-width));
  padding:0 6px;
}

.workshop-tools-panel{
  gap:16px;
}

.workshop-tool-list,
.workshop-tool-card{
  display:grid;
  gap:14px;
  background:
    radial-gradient(130% 120% at 100% 0,rgba(167,31,42,.18),rgba(167,31,42,0) 52%),
    linear-gradient(165deg,rgba(18,20,23,.98),rgba(10,11,14,.96));
}

.workshop-tool-list__head,
.workshop-tool-head{
  display:grid;
  gap:8px;
}

.workshop-tool-list h3,
.workshop-tool-head h3{
  margin:0;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f2ede4;
}

.workshop-tool-list p,
.workshop-tool-head p,
.workshop-tool-note{
  margin:0;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.05em;
  color:rgba(214,210,200,.76);
}

.workshop-tool-note--emphasis{
  margin-top:-4px;
  text-align:right;
  color:rgba(var(--kl-red-rgb),.82);
  font-weight:600;
}

.workshop-tool-note--neutral{
  margin-top:-4px;
  text-align:right;
  color:var(--titanium);
}

.workshop-tool-launch{
  display:grid;
  gap:6px;
  width:100%;
  text-align:left;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(216,210,197,.22);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  color:#f1ece3;
  cursor:pointer;
}

.workshop-landing-shell{
  gap:14px;
  padding-top:14px;
}

.workshop-landing-panel{
  gap:14px;
}

.workshop-landing-panel__intro{
  display:grid;
  gap:6px;
}

.workshop-landing-panel__intro[hidden]{
  display:none;
}

#workshopToolsPanel.workshop-landing-panel--tool-open{
  margin-top:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}

.workshop-landing-panel__intro h1{
  margin:0;
  font-size:19px;
  line-height:1.05;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f4efe6;
}

.workshop-landing-panel__intro p{
  margin:0;
  font-size:11px;
  line-height:1.45;
  letter-spacing:.06em;
  color:rgba(214,210,200,.78);
}

#workshopLandingScreen #workshopToolsList{
  display:grid;
  gap:12px;
}

.workshop-landing-tools{
  display:grid;
  gap:12px;
}

.workshop-tool-launch--landing{
  min-height:74px;
  padding:15px 16px;
  border-radius:16px;
  border-color:rgba(216,210,197,.2);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}

#workshopLandingScreen .workshop-tool-launch__title{
  font-size:12px;
  letter-spacing:.09em;
}

#workshopLandingScreen .workshop-tool-launch__meta{
  font-size:11px;
  line-height:1.4;
  color:rgba(223,216,205,.86);
}

#workshopLandingScreen .workshop-tool-launch:hover,
#workshopLandingScreen .workshop-tool-launch:focus-visible{
  transform:translateY(-1px);
}

.workshop-tool-launch:hover,
.workshop-tool-launch:focus-visible{
  border-color:rgba(var(--kl-red-rgb),.72);
  background:linear-gradient(160deg,rgba(var(--kl-red-rgb),.18),rgba(255,255,255,.03));
}

.workshop-tool-launch__title{
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#f8f3ea;
}

.workshop-tool-launch__meta{
  font-size:10px;
  line-height:1.4;
  color:rgba(223,216,205,.85);
}

.workshop-tool-nav-back{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:7px 2px 7px 0;
  border:none;
  background:transparent;
  color:rgba(222,215,203,.84);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  position:sticky;
  top:0;
  z-index:2;
}

.workshop-tool-nav-back__arrow{
  font-size:18px;
  line-height:1;
  transform:translateY(-.5px);
  color:rgba(236,229,217,.92);
}

.workshop-tool-nav-back:hover,
.workshop-tool-nav-back:focus-visible{
  color:#f1ebe1;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.workshop-tool-unit-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.workshop-tool-unit-row .ghost-action{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.08em;
}

.workshop-tool-unit-row .ghost-action.active{
  border-color:rgba(var(--kl-red-rgb),.75);
  background:rgba(var(--kl-red-rgb),.18);
  color:#fff0eb;
}

.workshop-tool-unit-row--compact .ghost-action{
  min-height:31px;
  font-size:9px;
}

.workshop-tool-fields{
  display:grid;
  gap:10px;
}

.workshop-tool-fields--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.workshop-tool-fields label{
  display:grid;
  gap:6px;
}

.workshop-tool-fields label span,
.workshop-tool-details span,
.workshop-tool-result span{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(214,210,200,.72);
}

.workshop-tool-fields input{
  width:100%;
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(214,210,200,.22);
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  padding:9px 11px;
  font-size:16px;
  letter-spacing:.01em;
}

.workshop-tool-result{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(214,210,200,.2);
  border-radius:12px;
  padding:12px 13px;
  background:rgba(255,255,255,.03);
}

.workshop-tool-result--primary strong{
  font-size:30px;
  line-height:1;
  letter-spacing:-.025em;
  color:#f7f2ea;
}

.guide-specification{
  display:grid;
  gap:8px;
  border:1px solid rgba(214,210,200,.2);
  border-radius:12px;
  padding:12px 13px;
  background:rgba(255,255,255,.03);
}

.guide-specification__edit{
  min-height:32px;
  padding:0 2px;
  border:0;
  background:transparent;
  color:rgba(223,216,205,.84);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.guide-specification__edit span{
  margin-left:2px;
  color:rgba(var(--kl-red-rgb),.9);
  font-size:14px;
  line-height:0;
}

.guide-specification__edit:hover,
.guide-specification__edit:focus-visible{
  color:#f2ede4;
}

.guide-specification__source{
  font-size:9px;
  letter-spacing:.05em;
  color:rgba(214,210,200,.6);
}

.guide-specification__summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
}

.guide-specification__summary > div{
  display:grid;
  gap:2px;
}

.guide-specification__summary span{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(214,210,200,.72);
}

.guide-specification__summary strong{
  font-size:14px;
  color:#f5efe5;
  font-variant-numeric:tabular-nums;
}

.guide-specification__details{
  border-top:1px solid rgba(214,210,200,.14);
  padding-top:8px;
}

.guide-specification__details summary{
  cursor:pointer;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(223,216,205,.86);
}

.guide-specification__rows{
  display:grid;
  gap:5px;
  margin-top:8px;
  max-height:240px;
  overflow-y:auto;
}

.guide-specification__row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:baseline;
  font-size:11px;
  color:rgba(223,216,205,.86);
  padding:5px 0;
  border-bottom:1px solid rgba(214,210,200,.1);
}

.guide-specification__row span{
  letter-spacing:.04em;
  color:rgba(214,210,200,.72);
}

.guide-specification__row strong{
  font-variant-numeric:tabular-nums;
  color:#f5efe5;
  text-align:right;
}

.guide-specification__row em{
  font-style:normal;
  font-variant-numeric:tabular-nums;
  color:rgba(var(--kl-red-rgb),.86);
  text-align:right;
  min-width:44px;
}

@media (max-width:520px){
  .guide-specification__edit{
    min-height:40px;
  }
  .guide-specification__summary{
    grid-template-columns:1fr;
  }
  .guide-specification__row{
    font-size:10.5px;
  }
}

.workshop-tool-details{
  display:grid;
  gap:7px;
}

.workshop-tool-details div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.workshop-tool-details strong{
  font-size:12px;
  color:#ece6dc;
}

.workshop-tool-print-actions{
  display:grid;
}

.workshop-tool-print-actions .ghost-action{
  min-height:40px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.grip-template-preview-sheet{
  --component-sheet-panel-max-width:min(96dvw,820px);
  --component-sheet-panel-max-height:min(calc(100dvh - 14px),880px);
}

.grip-template-preview__body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  padding:12px;
  min-width:0;
  overflow:auto;
  background:rgba(7,8,10,.82);
}

.grip-template-preview__actions{
  position:sticky;
  top:-12px;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  width:100%;
  min-width:0;
  padding:8px 0;
  background:rgba(7,8,10,.96);
}

.grip-template-preview__actions .primary-action,
.grip-template-preview__actions .ghost-action{
  width:100%;
  min-width:0;
  min-height:40px;
  padding-inline:14px;
}

.grip-template-preview__sheet{
  width:min(100%,180mm);
  min-width:0;
  box-sizing:border-box;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6mm;
  padding:8mm;
  background:#fff;
  color:#111;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}

.grip-template-preview__brand{
  color:#6a2228;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.grip-template-preview__sheet h3{
  margin:0;
  color:#111;
  font-size:22px;
  letter-spacing:0;
}

.grip-template-preview__instruction{
  margin:0;
  border:1px solid #111;
  padding:6px 8px;
  color:#111;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.grip-template-preview__summary,
.grip-template-preview__sheet .calibration,
.grip-template-preview__guide{
  border:1px solid #1f1f1f;
  padding:8px;
}

.grip-template-preview__summary{
  display:grid;
  gap:5px;
}

.grip-template-preview__summary .summary-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #ccc;
  padding-bottom:4px;
  color:#111;
  font-size:12px;
}

.grip-template-preview__summary .summary-row:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.grip-template-preview__summary .summary-row span{
  color:#444;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.grip-template-preview__sheet .calibration{
  display:grid;
  gap:7px;
}

.grip-template-preview__sheet .calibration p{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:0;
  color:#111;
  font-size:10px;
  letter-spacing:.03em;
}

.grip-template-preview__sheet .calibration-line{
  height:0;
  border-top:2px solid #111;
}

.grip-template-preview__guides{
  display:grid;
  gap:8px;
}

.grip-template-preview__guide h4{
  margin:0 0 6px;
  color:#111;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.grip-template-preview__guide .cut-guide-svg{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

.grip-template-preview__guide .guide-frame{
  fill:none;
  stroke:#d0d0d0;
  stroke-width:.35;
}

.grip-template-preview__guide .guide-edge{
  stroke:#181818;
  stroke-width:.52;
}

.grip-template-preview__guide .guide-edge--secondary{
  stroke:#6b6b6b;
  stroke-dasharray:1.1 1.1;
}

.grip-template-preview__guide .guide-cut-line{
  stroke:#111;
  stroke-width:.7;
}

.grip-template-preview__guide .guide-width{
  stroke:#111;
  stroke-width:.32;
}

.grip-template-preview__guide .guide-arrow{
  stroke:#111;
  stroke-width:.42;
}

.grip-template-preview__guide .guide-title{
  font-size:3.3px;
  font-weight:800;
  letter-spacing:.16px;
  fill:#111;
}

.grip-template-preview__guide .guide-label{
  font-size:2.5px;
  letter-spacing:.08px;
  fill:#1a1a1a;
}

.grip-template-preview__guide .guide-angle{
  font-size:2.9px;
  letter-spacing:.1px;
  font-weight:700;
  fill:#111;
}

.grip-template-preview__instructions{
  display:grid;
  gap:4px;
  margin:0;
  padding-left:18px;
  color:#111;
  font-size:11px;
  line-height:1.35;
}

.grip-template-print-frame{
  position:fixed;
  width:0;
  height:0;
  border:0;
  visibility:hidden;
}

@media (max-width:640px){
  .grip-template-preview-sheet{
    --component-sheet-panel-max-width:100dvw;
    --component-sheet-panel-max-height:100dvh;
  }
  .grip-template-preview-sheet .component-sheet__panel{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    box-sizing:border-box;
  }
  .grip-template-preview__body{
    padding:10px;
  }
  .grip-template-preview__sheet{
    width:100%;
    padding:5mm;
  }
  .grip-template-preview__actions .primary-action,
  .grip-template-preview__actions .ghost-action{
    min-width:0;
    padding-inline:8px;
    font-size:10px;
    letter-spacing:.06em;
  }
  .grip-template-preview__sheet .calibration p{
    display:grid;
    gap:3px;
  }
}

@media (max-width:640px){
  .workshop-tool-nav-back{
    min-height:46px;
    width:100%;
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
  }
  .workshop-tool-fields--two{
    grid-template-columns:minmax(0,1fr);
  }
  .workshop-tool-result--primary strong{
    font-size:24px;
  }
}

.screen-head h1,
#workshopScreen .quote-builder__head h1,
.home-hero h1{
  letter-spacing:-.02em;
  line-height:1.02;
}

.eyebrow{
  letter-spacing:.2em;
  font-size:10px;
}

.quote-grid span,
.quote-component-row span,
.layout-control-card__meta,
.guide-spacing-row__meta small,
.brand-copy span,
.brand-lockup small{
  font-size:9px;
  letter-spacing:.11em;
}

.module-card,
.layout-control-card,
.guide-spacing-panel,
#workshopScreen .quote-builder__head,
#workshopScreen .quote-section,
.settings-card,
.blank-card,
.selected-blank-card,
.rod-blank-visual{
  border:1px solid rgba(214,210,200,.1);
}

button,
.module-card,
.quote-section__toggle,
.layout-control-card__button,
.component-sheet__option,
.component-sheet__menu-trigger,
.ghost-action,
.primary-action{
  transition:background-color var(--micro-motion) ease,border-color var(--micro-motion) ease,color var(--micro-motion) ease,box-shadow var(--micro-motion) ease,transform var(--micro-motion) ease,opacity var(--micro-motion) ease;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:1px solid rgba(var(--kl-red-rgb),.58);
  outline-offset:1px;
  box-shadow:0 0 0 2px rgba(var(--kl-red-rgb),.18);
}

::selection{
  background:rgba(var(--kl-red-rgb),.64);
  color:#f4eee3;
}

::-moz-selection{
  background:rgba(var(--kl-red-rgb),.64);
  color:#f4eee3;
}

input::selection,
textarea::selection,
[contenteditable="true"]::selection{
  background:rgba(var(--kl-red-rgb),.68);
  color:#f6f0e5;
}

input::-moz-selection,
textarea::-moz-selection,
[contenteditable="true"]::-moz-selection{
  background:rgba(var(--kl-red-rgb),.68);
  color:#f6f0e5;
}

@media (max-width:520px){
  :root{
    --app-gutter:12px;
  }

  #homeScreen.active{
    min-height:calc(100dvh - 206px);
    padding-block:8px 10px;
  }

  #homeScreen .home-premium-shell{
    gap:14px;
    padding:18px 0 12px;
  }

  #homeScreen .home-living-rod{
    height:36px;
    margin:10px 0 10px;
  }

  #homeScreen .home-premium-hero h1{
    font-size:clamp(34px,9.4vw,54px);
    line-height:.9;
  }

  #homeScreen .home-premium-hero p{
    max-width:42ch;
    font-size:12px;
    line-height:1.52;
    letter-spacing:.05em;
  }

  #homeScreen .home-enter-rod-button{
    width:100%;
    justify-self:stretch;
    min-height:48px;
    font-size:12px;
  }

  .bottom-nav button{
    min-height:52px;
  }

}

@media (max-width:420px){
  .saved-builds-controls{
    grid-template-columns:1fr;
  }

  .saved-builds-controls .primary-action{
    width:100%;
  }

  .saved-build-card{
    grid-template-columns:1fr;
    padding:11px;
  }

  .saved-build-card__actions{
    grid-template-columns:1fr auto;
  }

  .saved-build-card__meta{
    grid-template-columns:1fr;
    gap:3px;
  }

  .quote-component-row{
    border-radius:13px;
  }
  .component-sheet__panel{
    width:min(96vw,392px);
    max-height:min(88vh,640px);
    max-height:min(88dvh,640px);
  }
  .quote-preview-panel{
    width:min(96vw,392px);
    max-height:min(100%,calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 10px));
  }
  .component-sheet__custom{
    grid-template-columns:1fr;
  }
  .quote-mode-switch{
    grid-template-columns:1fr 1fr;
  }
  .quote-mode-switch__label{
    grid-column:1/-1;
    justify-self:start;
  }
  .quote-preview-actions{
    grid-template-columns:1fr;
  }
  .blank-library-controls{
    grid-template-columns:1fr;
  }
  .blank-editor-grid{
    grid-template-columns:1fr;
  }
  .selected-blank-card__actions{
    grid-template-columns:1fr auto;
  }
  .selected-blank-card--empty .selected-blank-card__actions{
    grid-template-columns:1fr;
  }
  .blank-card__actions{
    grid-template-columns:minmax(0,1fr) auto;
  }
}

@media (min-width:640px){
  .quote-component-row__fields{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end;
  }
  .quote-component-field--description{
    grid-column:1/-1;
  }
  .quote-component-field--cost{
    max-width:260px;
  }
  .quote-component-field--cost input{
    max-width:220px;
  }
}

@media (max-width:520px){
  .quote-component-row__actions{
    grid-template-columns:1fr;
  }
}

/* BUILD 062: refinement and simplification pass */
.topbar{
  margin-bottom:8px;
}

.brand-lockup small{
  font-size:7px;
  letter-spacing:.16em;
}

.screen-head{
  display:grid;
  gap:3px;
  margin:4px 2px 8px;
}

.screen-head .eyebrow{
  display:none;
}

.screen-head h1{
  margin:0;
  font-size:24px;
  letter-spacing:-.015em;
  line-height:1.04;
}

.screen-head .subtle{
  margin:0;
  font-size:11px;
  color:#8d928b;
}

#layoutScreen .layout-screen-shell{
  gap:6px;
}

#layoutScreen .layout-control-card{
  border-radius:12px;
  padding:6px 6px 5px;
}

#layoutScreen .layout-control-card__value{
  min-height:34px;
  font-size:30px;
}

#layoutScreen .guide-spacing-panel{
  border-radius:12px;
  padding:7px;
}

#layoutScreen .guide-spacing-row{
  padding:4px 0;
}

#workshopScreen .quote-builder{
  gap:9px;
  padding-bottom:calc(24px + var(--safe-bottom));
}

.studio-landing-shell{
  display:grid;
  gap:16px;
  width:100%;
  max-width:940px;
  margin:0 auto;
  padding:14px 0 4px;
}

.studio-landing-shell__intro{
  display:grid;
  gap:8px;
}

.studio-landing-shell__intro h1{
  margin:0;
  color:#f4efe6;
  font-size:clamp(30px,6.4vw,56px);
  line-height:.94;
  letter-spacing:-.05em;
  text-transform:uppercase;
}

.studio-landing-shell__intro p{
  margin:0;
  max-width:44ch;
  color:rgba(214,210,200,.78);
  font-size:12px;
  line-height:1.45;
  letter-spacing:.08em;
}

.studio-landing-actions{
  display:grid;
  gap:12px;
}

.studio-launch-card{
  min-height:74px;
  padding:15px 16px;
  border-radius:16px;
  border-color:rgba(216,210,197,.22);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}

.studio-launch-card .workshop-tool-launch__title{
  font-size:12px;
  letter-spacing:.09em;
}

.studio-launch-card .workshop-tool-launch__meta{
  font-size:11px;
  line-height:1.4;
  color:rgba(223,216,205,.86);
}

.studio-launch-card:hover,
.studio-launch-card:focus-visible{
  transform:translateY(-1px);
}

.studio-components-shell{
  display:grid;
  gap:14px;
  width:100%;
  max-width:940px;
  margin:0 auto;
  padding:8px 0 4px;
}

.studio-components-shell__head{
  display:grid;
  gap:10px;
}

#studioComponentsBackBtn{
  max-width:100%;
  min-width:0;
  overflow:visible;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.35;
  text-align:left;
}

.studio-components-shell__identity{
  display:flex;
  align-items:flex-end;
  gap:10px;
  min-width:0;
}

.studio-components-shell__intro h1{
  margin:0;
  color:#f4efe6;
  font-size:clamp(28px,6.2vw,48px);
  line-height:.94;
  letter-spacing:-.045em;
  text-transform:uppercase;
}

.studio-components-shell__intro p{
  margin:0;
  max-width:46ch;
  color:rgba(214,210,200,.78);
  font-size:12px;
  line-height:1.45;
  letter-spacing:.08em;
}

.studio-component-rename-trigger{
  flex:0 0 auto;
  min-height:44px;
  margin-bottom:1px;
  padding:0 8px;
  border:1px solid rgba(214,210,200,.16);
  border-radius:6px;
  background:rgba(255,255,255,.02);
  color:rgba(214,210,200,.66);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}

.studio-component-rename-trigger:hover,
.studio-component-rename-trigger:focus-visible{
  border-color:rgba(214,210,200,.34);
  color:#eee6da;
  outline:none;
}

.studio-component-rename-editor{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px;
  width:min(100%,430px);
  margin-top:8px;
}

.studio-component-rename-editor input{
  width:100%;
  min-width:0;
  min-height:44px;
  padding:7px 9px;
  border:1px solid rgba(214,210,200,.22);
  border-radius:7px;
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  font-size:13px;
}

.studio-component-rename-editor button{
  min-height:44px;
  padding:0 10px;
  border-radius:7px;
}

.studio-components-shell__controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}

.studio-components-shell__search{
  width:100%;
  min-width:0;
  min-height:44px;
  border:1px solid rgba(214,210,200,.18);
  border-radius:12px;
  background:rgba(7,8,10,.9);
  color:#f5efe5;
  padding:0 14px;
  font-size:14px;
  box-sizing:border-box;
}

.studio-components-shell__utility{
  min-height:46px;
  border-radius:12px;
  gap:8px;
  white-space:nowrap;
}

.studio-components-shell__intro p:empty{
  display:none;
}

.studio-taxonomy-shell{
  display:grid;
  gap:14px;
  width:100%;
  max-width:940px;
  margin:0 auto;
  padding:8px 0 4px;
}

.studio-taxonomy-shell__head{
  display:grid;
  gap:10px;
}

.studio-taxonomy-shell__intro h1{
  margin:0;
  color:#f4efe6;
  font-size:clamp(24px,5.7vw,42px);
  line-height:.95;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

.studio-taxonomy-sections{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.studio-taxonomy-sections__button{
  min-height:44px;
  border-radius:12px;
  padding:0 12px;
}

.studio-taxonomy-sections__button.active{
  border-color:rgba(var(--kl-red-rgb),.54);
  box-shadow:0 0 0 1px rgba(var(--kl-red-rgb),.25) inset;
}

.studio-taxonomy-body{
  border:1px solid rgba(214,210,200,.16);
  border-radius:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  padding:11px;
}

.studio-taxonomy-section{
  display:grid;
  gap:10px;
}

.studio-taxonomy-section__head h3{
  margin:0;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ede6da;
}

.studio-taxonomy-context{
  margin:0;
  color:rgba(214,210,200,.78);
  font-size:11px;
  letter-spacing:.05em;
}

.studio-taxonomy-form-field{
  display:grid;
  gap:6px;
}

.studio-taxonomy-form-field span{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(214,210,200,.74);
}

.studio-taxonomy-form-field input,
.studio-taxonomy-form-field select{
  width:100%;
  min-height:42px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.22);
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  padding:8px 10px;
  font-size:14px;
}

.studio-taxonomy-add-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}

.studio-taxonomy-add-row input{
  width:100%;
  min-height:42px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.22);
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  padding:8px 10px;
  font-size:14px;
}

.studio-taxonomy-add-row button{
  min-height:42px;
  border-radius:10px;
  padding:0 14px;
}

.studio-taxonomy-parent-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.studio-taxonomy-parent-list__item{
  min-height:34px;
  border-radius:999px;
  border:1px solid rgba(214,210,200,.24);
  background:rgba(10,12,13,.86);
  color:#efe8dc;
  padding:0 12px;
  font-size:12px;
}

.studio-taxonomy-parent-list__item.is-active{
  border-color:rgba(var(--kl-red-rgb),.58);
  box-shadow:0 0 0 1px rgba(var(--kl-red-rgb),.24) inset;
}

.studio-taxonomy-list{
  display:grid;
  gap:8px;
}

.studio-taxonomy-supplier-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  align-items:center;
}

.studio-taxonomy-supplier-row__menu{
  flex:0 0 auto;
}

.studio-taxonomy-supplier-menu{
  position:absolute;
  top:calc(100% - 2px);
  right:0;
  z-index:4;
  min-width:148px;
  max-width:calc(100vw - 32px);
  overflow:hidden;
  padding:6px;
  display:grid;
  gap:4px;
  border:1px solid rgba(214,210,200,.2);
  border-radius:10px;
  background:rgba(10,12,13,.97);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

.studio-taxonomy-list__item{
  width:100%;
  text-align:left;
  border:1px solid rgba(214,210,200,.2);
  border-radius:12px;
  background:rgba(9,10,12,.84);
  color:#efe8dc;
  padding:10px 11px;
}

.studio-taxonomy-list__item strong{
  display:block;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.studio-taxonomy-list__item.is-active{
  border-color:rgba(var(--kl-red-rgb),.64);
  box-shadow:0 0 0 1px rgba(var(--kl-red-rgb),.28) inset;
}

.studio-taxonomy-list__empty{
  margin:0;
  color:rgba(214,210,200,.72);
  font-size:11px;
  letter-spacing:.05em;
}

.studio-taxonomy-editor{
  border:1px solid rgba(214,210,200,.14);
  border-radius:12px;
  background:rgba(8,9,11,.84);
  padding:10px;
  display:grid;
  gap:7px;
}

.studio-taxonomy-editor h3{
  margin:0;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ede6da;
}

.studio-taxonomy-editor p{
  margin:0;
  color:rgba(214,210,200,.78);
  font-size:11px;
  letter-spacing:.05em;
}

.studio-taxonomy-editor__actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.studio-taxonomy-editor__actions--secondary{
  padding-top:2px;
}

.studio-taxonomy-editor__actions button{
  min-height:36px;
  border-radius:9px;
  padding:0 11px;
  font-size:11px;
  letter-spacing:.06em;
}

.studio-taxonomy-editor__danger{
  border-color:rgba(208,62,71,.6);
  color:#ffb5bb;
}

.studio-taxonomy-editor__save.is-saved{
  background:rgba(216,210,197,.22);
  border-color:rgba(216,210,197,.4);
  color:#efe8dc;
}

.studio-taxonomy-modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.studio-taxonomy-modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(4,6,7,.72);
  backdrop-filter:blur(2px);
}

.studio-taxonomy-editor--modal{
  position:relative;
  width:min(100%,360px);
  max-width:calc(100vw - 32px);
  padding:14px;
  border-color:rgba(214,210,200,.24);
  background:linear-gradient(180deg,rgba(14,16,18,.98),rgba(9,11,12,.98));
  box-shadow:0 18px 40px rgba(0,0,0,.44);
}

.studio-taxonomy-add-cta{
  justify-self:start;
}

.studio-components-shell__content{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}

.studio-components-shell__list-card,
.studio-component-details{
  border:1px solid rgba(214,210,200,.16);
  border-radius:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  padding:10px;
}

.studio-components-shell__list-card[hidden],
.studio-component-details[hidden]{
  display:none;
}

.studio-components-list{
  display:grid;
  gap:8px;
}

.studio-components-list__row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
}

.studio-components-list__item{
  width:100%;
  text-align:left;
  min-height:44px;
  border:var(--ds-stroke-strong);
  border-radius:var(--ds-radius-md);
  background:var(--ds-surface);
  color:var(--ds-text-strong);
  padding:10px 11px;
}

.studio-components-list__row--family{
  align-items:center;
}

.studio-components-list__row--family .studio-components-list__item{
  height:44px;
  display:flex;
  align-items:center;
  min-width:0;
}

.studio-components-list__row--family strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.studio-components-list__item strong{
  display:block;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.studio-components-list__item span{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:rgba(223,216,205,.82);
}

.studio-components-list__item.is-active{
  border-color:rgba(var(--kl-red-rgb),.64);
  box-shadow:0 0 0 1px rgba(var(--kl-red-rgb),.28) inset;
}

.studio-components-list__item:focus-visible,
.studio-components-list__menu-trigger:focus-visible{
  outline:2px solid var(--kl-red-active);
  outline-offset:2px;
}

.studio-components-price-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.studio-components-price{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
}

.studio-components-price--buy{
  border-color:rgba(214,210,200,.26);
  background:rgba(255,255,255,.04);
  color:rgba(223,216,205,.86);
}

.studio-components-price--sell{
  border-color:rgba(var(--kl-red-rgb),.6);
  background:rgba(var(--kl-red-rgb),.16);
  color:#ffe4e0;
}

.studio-components-list__menu-trigger{
  min-width:44px;
  min-height:44px;
  border-radius:var(--ds-radius-md);
  border:var(--ds-stroke);
  background:var(--ds-surface);
  color:var(--titanium);
  font-size:20px;
  line-height:1;
  padding:0;
}

.studio-components-row-menu{
  position:absolute;
  right:0;
  top:calc(100% + 4px);
  z-index:3;
  min-width:176px;
  max-width:calc(100vw - 32px);
  overflow:hidden;
  border:var(--ds-stroke-strong);
  border-radius:var(--ds-radius-md);
  background:var(--ds-surface);
  padding:6px;
  display:grid;
  gap:4px;
}

[data-anchored-action-menu]::backdrop{
  background:transparent;
  pointer-events:none;
}

@supports not (selector(:popover-open)){
  :is(.app-shell,.screen,.quote-section,.quote-section__body,.studio-components-shell__list-card,.studio-components-list,.saved-build-card,.component-sheet__panel,.component-sheet__body):has([data-anchored-action-menu]:not([hidden])){
    overflow:visible !important;
    transform:none !important;
    filter:none !important;
    contain:none !important;
  }
  [data-anchored-action-menu]{z-index:80 !important}
}

.studio-components-row-menu__item{
  width:100%;
  min-height:44px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--ds-text-strong);
  text-align:left;
  padding:0 10px;
  font-size:11px;
  letter-spacing:.05em;
}

.studio-components-row-menu__item:hover,
.studio-components-row-menu__item:focus-visible{
  border-color:rgba(214,210,200,.24);
  background:rgba(255,255,255,.04);
  outline:none;
}

.studio-components-row-menu__item--danger{
  color:#ffb5bb;
}

.studio-components-row-menu__item:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.studio-components-row-menu__item:disabled:hover{
  background:transparent;
  border-color:transparent;
}

.studio-components-list__empty,
.studio-component-details__empty{
  margin:0;
  color:rgba(214,210,200,.72);
  font-size:11px;
  letter-spacing:.05em;
}

.studio-component-details{
  display:grid;
  gap:8px;
}

.studio-component-details__head p{
  margin:0;
  color:rgba(214,210,200,.78);
  font-size:10px;
  letter-spacing:.06em;
}

.studio-component-details__fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
}

.studio-component-details__fields label{
  display:grid;
  gap:5px;
}

.studio-component-details__fields span{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(214,210,200,.84);
  font-weight:700;
}

.studio-component-details__fields input,
.studio-component-details__fields textarea,
.studio-component-details__fields select{
  width:100%;
  min-height:40px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.22);
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  padding:8px 10px;
  font-size:14px;
}

.studio-component-details__select-wrap{
  position:relative;
  display:block;
}

.studio-component-details__select-wrap::after{
  content:'';
  position:absolute;
  top:50%;
  right:13px;
  width:7px;
  height:7px;
  border-right:1px solid rgba(239,232,220,.72);
  border-bottom:1px solid rgba(239,232,220,.72);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}

.studio-component-details__fields select{
  appearance:none;
  padding-right:34px;
}

.studio-component-details__fields textarea{
  min-height:74px;
  resize:vertical;
}

.studio-component-details__field--full{
  grid-column:1 / -1;
}

/* Saved sizes stay visible above the optional editing controls. */
.studio-size-section{
  margin:7px 0 10px;
  padding:9px 10px 10px;
  border:1px solid rgba(214,210,200,.1);
  border-radius:7px;
  background:rgba(255,255,255,.015);
}

.studio-size-section__summary{
  cursor:pointer;
  list-style:none;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(214,210,200,.78);
}

.studio-size-section__summary::-webkit-details-marker{display:none}

.studio-size-section__heading{
  margin:0 0 6px;
  font-size:10px;
  letter-spacing:.09em;
  color:var(--ds-text-strong);
}

.studio-size-section__editor > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  gap:8px;
  color:var(--titanium);
}

.studio-size-section__editor > summary:focus-visible{
  outline:2px solid var(--kl-red-active);
  outline-offset:2px;
}

.studio-size-section__chevron{
  font-size:20px;
}

.studio-size-section__editor[open] .studio-size-section__chevron{
  transform:rotate(90deg);
}

.studio-size-section__count{
  display:inline-block;
  min-width:17px;
  padding:1px 4px 0;
  margin-left:5px;
  border:1px solid rgba(214,210,200,.12);
  border-radius:4px;
  background:rgba(255,255,255,.025);
  font-size:9.5px;
  letter-spacing:0;
  text-align:center;
}

.studio-size-section__help{
  margin:5px 0 7px;
  font-size:10.5px;
  color:var(--ds-text-muted,#8f938c);
}

.studio-size-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
  gap:4px;
  margin-bottom:8px;
}

.studio-size-list__empty{
  margin:0;
  font-size:12px;
  color:var(--ds-text-muted,#8f938c);
}

.studio-size-chip{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px;
  align-items:center;
  width:100%;
  height:36px;
  min-width:0;
  min-height:28px;
  gap:1px;
  padding:0 1px 0 7px;
  border:1px solid rgba(214,210,200,.14);
  border-radius:5px;
  background:rgba(255,255,255,.025);
  color:rgba(245,239,229,.9);
  font-size:10px;
}

.studio-size-chip__label{
  display:block;
  min-width:0;
  overflow:hidden;
  overflow-wrap:normal;
  white-space:nowrap;
  text-overflow:ellipsis;
  line-height:1.05;
}

.studio-size-chip__remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:rgba(214,210,200,.5);
  font-size:12px;
  line-height:1;
  cursor:pointer;
}

.studio-size-chip__remove:hover,
.studio-size-chip__remove:focus-visible{
  background:rgba(206,44,58,.1);
  color:#f0c7ca;
  outline:1px solid rgba(206,44,58,.34);
  outline-offset:-1px;
}

.studio-size-entry{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;
  gap:6px;
}

.studio-size-range{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;
  gap:7px 6px;
  margin-top:8px;
}

.studio-size-entry input,
.studio-size-range input{
  min-height:36px;
  border:1px solid rgba(214,210,200,.18);
  border-radius:6px;
  background:#080a0b;
  color:#f5efe5;
  padding:7px 9px;
  font-size:13px;
}

.studio-size-entry input::placeholder,
.studio-size-range input::placeholder{
  color:rgba(214,210,200,.42);
}

.studio-size-entry .quote-component-field{
  grid-column:1 / span 2;
  width:100%;
  min-width:0;
}

.studio-size-entry__btn{
  grid-column:3;
}

.studio-size-range .quote-component-field{
  min-width:0;
}

/* Inner range inputs must fill (never exceed) their field, so they can't push
   the row past the card's right edge on narrow screens. */
.studio-size-range .quote-component-field input{
  display:block;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

.studio-size-range__btn{
  min-height:36px;
  border-radius:6px;
  padding:0 12px;
  border-color:rgba(214,210,200,.16);
  background:rgba(255,255,255,.025);
  font-size:10px;
  letter-spacing:.08em;
  white-space:nowrap;
}

.studio-size-range__btn{
  grid-column:1 / -1;
  justify-self:stretch;
}

.studio-component-details__actions{
  display:flex;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}

.studio-component-details__actions:has(#studioComponentDeleteBtn){
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:46px;
  align-items:stretch;
  gap:8px;
}

.studio-component-details__actions:has(#studioComponentDeleteBtn) > button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:46px;
  min-height:46px;
  box-sizing:border-box;
  padding:0 8px;
  font-size:10px;
  letter-spacing:0;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}

.studio-component-details__move{
  min-height:42px;
  border-radius:10px;
  padding:0 14px;
  border-color:rgba(214,210,200,.18);
  background:rgba(255,255,255,.015);
  color:rgba(214,210,200,.68);
  font-size:10px;
  letter-spacing:0;
  line-height:1.15;
  text-transform:uppercase;
  white-space:nowrap;
}

.component-hierarchy-picker__group{
  display:grid;
  gap:7px;
}

.component-hierarchy-picker__group + .component-hierarchy-picker__group,
.component-hierarchy-picker__brand{
  margin-top:14px;
}

.component-hierarchy-picker__group h3,
.component-hierarchy-picker__brand span{
  margin:0;
  color:rgba(214,210,200,.78);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.component-hierarchy-picker__options{
  display:grid;
  gap:5px;
  max-height:220px;
  overflow-y:auto;
  padding:5px;
  border:1px solid rgba(214,210,200,.16);
  border-radius:10px;
  background:#080a0b;
  scrollbar-gutter:stable;
}

.component-hierarchy-picker__option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:#101315;
  color:#e7e1d6;
  font-size:12px;
  font-weight:650;
  letter-spacing:0;
  text-align:left;
}

.component-hierarchy-picker__option:hover,
.component-hierarchy-picker__option:focus-visible{
  border-color:rgba(214,210,200,.28);
  background:#15191b;
  outline:none;
}

.component-hierarchy-picker__option.is-selected{
  border-color:rgba(var(--kl-red-rgb),.62);
  background:rgba(var(--kl-red-rgb),.14);
  color:#fff1ec;
}

.component-hierarchy-picker__option b{
  color:var(--kl-red-base);
  font-size:13px;
}

.component-hierarchy-picker__brand{
  display:grid;
  gap:6px;
}

.component-hierarchy-picker__brand input{
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  border:1px solid rgba(214,210,200,.22);
  border-radius:8px;
  background:#080a0b;
  color:#f5efe5;
  padding:8px 10px;
  font-size:14px;
}

.studio-component-details__save{
  min-height:42px;
  border-radius:10px;
  padding:0 16px;
}

.studio-component-details__delete{
  min-height:42px;
  border-radius:10px;
  padding:0 14px;
  border-color:rgba(214,210,200,.2);
  color:rgba(214,210,200,.76);
  background:rgba(255,255,255,.02);
}

.studio-component-details__delete:hover,
.studio-component-details__delete:focus-visible{
  border-color:rgba(214,210,200,.38);
  color:#efe8dc;
}

.studio-component-details__save.is-saved{
  background:linear-gradient(180deg,rgba(var(--kl-red-active-rgb),.95),rgba(var(--kl-red-rgb),.95));
  border-color:rgba(var(--kl-red-rgb),.62);
  color:#fff1ec;
}

@media (max-width:760px){
  .studio-components-shell__controls{
    grid-template-columns:1fr;
  }
  .studio-taxonomy-sections{
    grid-template-columns:1fr;
  }
  .studio-component-details__fields{
    grid-template-columns:1fr;
  }
  .studio-component-details__field--full{
    grid-column:auto;
  }
}

@media (max-width:520px){
  .studio-components-shell__controls{
    grid-template-columns:1fr;
  }
  .studio-components-list__row{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:6px;
  }
  .studio-taxonomy-add-row{
    grid-template-columns:1fr;
  }
}

#workshopScreen .quote-builder__head{
  padding:8px 10px 7px;
  border-radius:12px;
}

#workshopScreen .quote-builder__head h1{
  margin:4px 0;
  font-size:24px;
}

.quote-builder__identity{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.quote-builder__identity h1{
  flex:0 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
}

#workshopScreen .quote-builder__head .studio-component-rename-editor{
  margin:4px 0 6px;
}

#workshopScreen .quote-builder__head .subtle{
  margin:0;
  font-size:10px;
  letter-spacing:.03em;
}

.quote-builder__overview{
  display:flex;
  align-items:center;
  gap:8px;
  margin:2px 0 4px;
}

.quote-builder__overview-status{
  min-height:18px;
  font-size:9px;
}

.quote-builder__overview-due{
  font-size:11px;
  letter-spacing:.03em;
  color:rgba(214,210,200,.78);
}

#workshopScreen .quote-builder__entry-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

#workshopScreen .quote-builder__new-quote{
  min-height:46px;
  border-radius:11px;
  letter-spacing:.1em;
  font-size:12px;
}

@media (max-width:520px){
  #workshopScreen .quote-builder__entry-actions{
    grid-template-columns:1fr;
  }
}

#workshopScreen .build-details{
  align-items:end;
}

#workshopScreen .build-details__group{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:28px;
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid rgba(214,210,200,.1);
}

#workshopScreen .build-details__group:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

#workshopScreen .build-details__group h3{
  margin:0;
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(214,210,200,.62);
}

#workshopScreen .build-details__group .guide-specification__edit{
  min-height:32px;
}

@media (max-width:420px){
  #workshopScreen .build-details.quote-grid--two{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:520px){
  /* Right column carries Orientation (e.g. "Progressive · Casting"), so it gets the extra width to stay on one line. */
  #workshopScreen .build-details .guide-specification__summary{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  }

  #workshopScreen .build-details .guide-specification__summary span,
  #workshopScreen .build-details .guide-specification__summary strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

#workshopScreen .quote-section{
  gap:7px;
  padding:11px;
  border-radius:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.13);
}

#workshopScreen .quote-section__toggle{
  min-height:50px;
  padding:10px 12px;
  gap:8px;
}

#workshopScreen .quote-section__toggle-title{
  font-size:10px;
  letter-spacing:.12em;
}

#workshopScreen .quote-section__toggle-summary span{
  font-size:9px;
}

#workshopScreen .quote-section--collapsible .quote-section__body{
  padding:10px 12px 12px;
}

#workshopScreen .quote-grid{
  gap:6px;
}

#workshopScreen .quote-grid span,
#workshopScreen .quote-component-field span{
  font-size:8px;
  letter-spacing:.1em;
}

#workshopScreen .quote-grid input,
#workshopScreen .quote-grid textarea,
#workshopScreen .quote-component-row input,
#workshopScreen .quote-component-row select,
#workshopScreen .quote-component-picker__trigger{
  min-height:32px;
  padding:7px 8px;
}

#workshopScreen .quote-component-picker__select-wrap select{
  padding-right:24px;
}

#workshopScreen .quote-grid textarea{
  min-height:54px;
}

#workshopScreen .quote-actions-grid,
#workshopScreen .quote-actions-secondary,
#workshopScreen .quote-actions-secondary__list{
  gap:6px;
}

#workshopScreen .quote-actions-grid > button,
#workshopScreen .quote-actions-secondary summary,
#workshopScreen .quote-actions-secondary .ghost-action{
  min-height:46px;
  border-radius:11px;
}

#workshopScreen .quote-actions-status{
  margin:0;
  min-height:13px;
  font-size:9px;
}

.quote-add-component-btn{
  min-height:32px;
  font-size:10px;
}

.quote-add-component-btn--inline{
  min-height:32px;
  font-size:10px;
  padding:0 9px;
}

.quote-components{
  gap:8px;
}

.quote-component-row{
  border-radius:12px;
}

.quote-component-row__summary{
  gap:7px;
  padding:10px;
}

.quote-component-row__summary-item{
  font-size:12px;
}

.quote-component-row__summary-meta{
  gap:4px;
  font-size:9px;
}

.quote-component-row__summary-cost{
  font-size:12px;
}

.quote-component-row__editor{
  gap:6px;
  padding:0 9px 9px;
}

.quote-component-row__fields{
  gap:6px;
}

.quote-component-row__actions{
  gap:5px;
}

.quote-component-row__actions .ghost-action{
  min-height:31px;
  font-size:9px;
}

.selected-blank-card{
  gap:10px;
  padding:10px 0 4px;
}

.selected-blank-card__name,
.selected-blank-card--empty strong{
  font-size:20px;
}

.selected-blank-card__summary{
  gap:4px;
  font-size:11px;
}

.selected-blank-card__change,
.selected-blank__menu-trigger{
  min-height:36px;
  height:36px;
}

.blank-library-controls{
  margin:0 2px 8px;
  gap:6px;
}

.blank-library-controls .component-sheet__search{
  min-height:32px;
}

.blank-library-controls .primary-action{
  min-height:34px;
}

.saved-builds-list{
  gap:8px;
  padding:0 0 6px;
}

.saved-build-card{
  margin:0;
  gap:7px;
  padding:8px;
  border-radius:12px;
}

.saved-build-card__head strong{
  font-size:13px;
}

.saved-build-card__title,
.saved-build-card__meta strong{
  font-size:10px;
}

.saved-build-card__meta{
  grid-template-columns:82px minmax(0,1fr);
  gap:6px;
}

.saved-builds-empty{
  gap:8px;
  margin:0;
  padding:9px 2px;
  border:none;
  border-radius:0;
  background:transparent;
}

.saved-builds-empty h3{
  font-size:14px;
}

.saved-builds-empty p{
  margin:0;
  color:#9ba096;
  font-size:11px;
  line-height:1.4;
}

.saved-builds-empty .primary-action{
  min-height:38px;
  padding:0 14px;
  font-size:11px;
}

.component-sheet__empty{
  font-size:10px;
  color:#8e938b;
}

.component-sheet__empty-state{
  min-height:110px;
  gap:6px;
  padding:8px;
}

#workshopScreen .quote-builder__new-quote.ghost-action{
  border-color:rgba(214,210,200,.2);
  background:rgba(255,255,255,.02);
  color:#c8c2b6;
}

#workshopScreen .quote-builder__new-quote.ghost-action:hover,
#workshopScreen .quote-builder__new-quote.ghost-action:focus-visible{
  border-color:rgba(214,210,200,.34);
  background:rgba(255,255,255,.04);
  color:#e0d8ca;
}

#workshopScreen .quote-section[hidden]{
  display:none!important;
}

.saved-build-card__actions{
  grid-template-columns:auto;
  align-items:start;
}

.saved-build-card__open{
  gap:4px;
}

@media (max-width:420px){
  .saved-build-card__actions{
    justify-self:end;
  }
}

/* BUILD 063: design system consistency pass */
:root{
  --ds-space-1:4px;
  --ds-space-2:6px;
  --ds-space-3:8px;
  --ds-space-4:10px;
  --ds-space-5:12px;
  --ds-space-6:14px;
  --ds-radius-sm:9px;
  --ds-radius-md:11px;
  --ds-radius-lg:13px;
  --ds-stroke:1px solid rgba(214,210,200,.14);
  --ds-stroke-strong:1px solid rgba(214,210,200,.22);
  --ds-surface:linear-gradient(180deg,rgba(18,22,24,.94),rgba(10,13,14,.98));
  --ds-surface-soft:linear-gradient(180deg,rgba(17,21,23,.72),rgba(10,13,15,.82));
  --ds-text-strong:#e7dfd1;
  --ds-text-muted:#9aa096;
  --ds-transition:180ms cubic-bezier(.2,.72,.25,1);
}

.screen-head,
#layoutScreen .layout-screen-shell,
#workshopScreen .quote-builder,
#buildsScreen.active{
  gap:var(--ds-space-4);
}

.screen-head{
  margin:var(--ds-space-1) var(--ds-space-1) var(--ds-space-3);
}

.screen-head h1,
#workshopScreen .quote-builder__head h1,
#homeScreen .home-premium-hero h1{
  color:var(--ds-text-strong);
}

.screen-head .subtle,
.quote-builder__head .subtle,
.component-sheet__empty,
.saved-build-card__title,
.saved-builds-empty p{
  color:var(--ds-text-muted);
}

.primary-action,
.ghost-action,
.component-sheet__add,
.component-picker-menu__item,
.quote-section__toggle,
.component-sheet__option,
.blank-card__select,
.quote-component-picker__trigger,
.component-sheet__menu-trigger,
.component-sheet__favorite{
  transition:background-color var(--ds-transition),border-color var(--ds-transition),color var(--ds-transition),box-shadow var(--ds-transition),transform var(--ds-transition),opacity var(--ds-transition);
}

.primary-action,
.ghost-action,
.component-sheet__add,
.quote-section__toggle,
.component-sheet__option,
.blank-card__select,
.quote-component-picker__trigger,
.customer-finder__detail-actions .ghost-action{
  min-height:40px;
  border-radius:var(--ds-radius-md);
}

.primary-action{
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  border:1px solid rgba(var(--kl-red-rgb),.62);
  background:linear-gradient(180deg,rgba(var(--kl-red-active-rgb),.95),rgba(var(--kl-red-rgb),.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 14px rgba(0,0,0,.22);
}

.ghost-action,
.component-sheet__add{
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:var(--ds-stroke);
  background:linear-gradient(180deg,rgba(17,21,23,.92),rgba(11,14,16,.96));
  color:#d1cbbf;
}

.component-sheet__add{
  text-align:center;
  justify-content:center;
}

.primary-action:hover,
.primary-action:focus-visible{
  border-color:rgba(var(--kl-red-active-rgb),.72);
  color:#f6eee2;
}

.ghost-action:hover,
.ghost-action:focus-visible,
.component-sheet__add:hover,
.component-sheet__add:focus-visible{
  border-color:rgba(214,210,200,.34);
  background:linear-gradient(180deg,rgba(22,27,29,.95),rgba(13,17,19,.98));
  color:#ece4d7;
}

.component-sheet__danger,
.quote-component-row__delete{
  border-color:rgba(191,63,75,.44)!important;
  color:#f0d6d9!important;
  background:linear-gradient(180deg,rgba(88,23,31,.5),rgba(53,14,19,.58))!important;
}

.component-sheet__danger:hover,
.component-sheet__danger:focus-visible,
.quote-component-row__delete:hover,
.quote-component-row__delete:focus-visible{
  border-color:rgba(214,92,103,.58)!important;
  color:#fae6e8!important;
}

.quote-grid input,
.quote-grid textarea,
.quote-component-row input,
.blank-editor-grid input,
.blank-editor-grid textarea,
.customer-finder__new-form input,
.customer-finder__new-form textarea,
.component-sheet__search,
.component-sheet__custom-input,
#settingsTaxRate,
.workshop-tool-fields input{
  min-height:34px;
  border-radius:var(--ds-radius-sm);
  border:var(--ds-stroke);
  background:linear-gradient(180deg,#13181a,#0c1012);
  color:#e6dece;
  font-size:12px;
}

.quote-grid textarea,
.blank-editor-grid textarea{
  min-height:58px;
}

.quote-grid input:focus,
.quote-grid textarea:focus,
.quote-component-row input:focus,
.blank-editor-grid input:focus,
.blank-editor-grid textarea:focus,
.customer-finder__new-form input:focus,
.customer-finder__new-form textarea:focus,
.component-sheet__search:focus,
.component-sheet__custom-input:focus,
#settingsTaxRate:focus,
#settingsDefaultLabourRate:focus,
#settingsBusinessProfileCard input:focus,
.workshop-tool-fields input:focus{
  border-color:rgba(189,56,68,.52);
  box-shadow:0 0 0 1px rgba(189,56,68,.22);
  outline:none;
}

#workshopScreen .quote-builder__head,
#workshopScreen .quote-section,
.saved-build-card,
.component-sheet__panel,
.quote-preview-card,
.rod-blank-visual,
.guide-spacing-panel,
.layout-control-card,
.settings-card,
.blank-card,
.selected-blank-card,
.workshop-tool-list,
.workshop-tool-card{
  border-radius:var(--ds-radius-lg);
  border:var(--ds-stroke);
  background:var(--ds-surface);
}

.component-sheet__panel,
.quote-preview-panel{
  box-shadow:0 16px 30px rgba(0,0,0,.42);
}

.component-sheet__header,
.component-sheet__body,
#workshopScreen .quote-section--collapsible .quote-section__body,
.quote-preview-card,
.saved-build-card,
.settings-card,
.guide-spacing-panel,
.layout-control-card,
.workshop-tool-list,
.workshop-tool-card{
  padding:var(--ds-space-5);
}

#workshopScreen .quote-section__toggle,
.saved-build-card__open,
.component-sheet__option,
.blank-card__select{
  padding:var(--ds-space-3) var(--ds-space-4);
}

.saved-builds-list,
.component-sheet__list,
.quote-components,
.guide-spacing-list,
.blank-library-controls,
.customer-finder__work-list,
.customer-finder__layout,
#workshopScreen .quote-actions-grid,
#workshopScreen .quote-actions-secondary,
#workshopScreen .quote-actions-secondary__list{
  gap:var(--ds-space-3);
}

.saved-build-card__meta,
.quote-component-row__summary-meta,
.component-sheet__option-meta{
  font-size:10px;
  letter-spacing:.04em;
}

.quote-section__toggle-title,
.quote-grid span,
.quote-component-field span,
.guide-spacing-row__meta span,
.component-sheet__custom-title,
.workshop-tool-fields label span,
.workshop-tool-details span,
.workshop-tool-result span{
  font-size:9px;
  letter-spacing:.1em;
}

.quote-section__toggle-summary span,
.saved-build-card__title,
.component-sheet__empty,
.workshop-tool-list p,
.workshop-tool-head p,
.workshop-tool-note{
  font-size:10px;
  letter-spacing:.02em;
}

.quote-component-row,
.saved-build-card,
.component-sheet__option,
.blank-card__select{
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.quote-component-row:hover,
.saved-build-card:hover,
.component-sheet__option:hover,
.blank-card__select:hover{
  box-shadow:0 7px 14px rgba(0,0,0,.18);
}

#workshopScreen .quote-section--collapsed .quote-section__body{
  transition:max-height var(--ds-transition),opacity var(--ds-transition),padding-top var(--ds-transition),padding-bottom var(--ds-transition);
}

#workshopScreen #workshopCustomerSection,
#workshopScreen #workshopSpecsSection,
#workshopScreen #workshopComponentsSection,
#workshopScreen #workshopPricingSection,
#workshopScreen #workshopActionsSection{
  padding:0;
  gap:0;
}

#workshopScreen #workshopCustomerSection.quote-section--collapsed .quote-section__body,
#workshopScreen #workshopSpecsSection.quote-section--collapsed .quote-section__body,
#workshopScreen #workshopActionsSection.quote-section--collapsed .quote-section__body{
  display:none;
}

#workshopScreen #workshopCustomerSection .quote-section__toggle-summary span,
#workshopScreen #workshopSpecsSection .quote-section__toggle-summary span,
#workshopScreen #workshopPricingSection .quote-section__toggle-summary span,
#workshopScreen #workshopActionsSection .quote-section__toggle-summary span{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
}

#workshopScreen #workshopActionsSection .workshop-build-actions-surface{
  padding:0;
  border:0;
  background:transparent;
}

#workshopScreen .quote-section__components-head{
  padding:0;
}

#workshopScreen .quote-section__components-toggle{
  min-height:50px;
}

#workshopScreen #workshopComponentsBody{
  gap:8px;
}

#workshopScreen #workshopComponentsBody > .quote-components{
  padding:0;
}

#workshopScreen #workshopComponentsBody > .quote-components:empty{
  display:none;
}

#workshopScreen #workshopComponentsSection.quote-section--collapsed #workshopComponentsBody{
  display:none;
}

#workshopScreen #addComponentBtn{
  justify-self:start;
  min-height:44px;
  padding:0 12px;
  background:var(--ds-surface);
  color:var(--titanium);
}

#workshopScreen .quote-section__components-toggle:focus-visible,
#workshopScreen #addComponentBtn:focus-visible{
  outline:2px solid rgba(var(--kl-red-rgb),.65);
  outline-offset:-2px;
}

#workshopScreen #addComponentBtn:hover,
#workshopScreen #addComponentBtn:focus-visible{
  border-color:rgba(var(--kl-red-rgb),.4);
}

#workshopScreen #workshopPricingSection{
  padding:0;
  gap:0;
}

#workshopScreen .build-pricing{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 8px;
}

#workshopScreen #workshopPricingSection:not(.quote-section--collapsed) .build-pricing{
  padding:8px 10px 10px;
}

#workshopScreen #workshopPricingSection.quote-section--collapsed .build-pricing{
  padding-top:0;
  padding-bottom:0;
}

#workshopScreen .build-pricing > label{
  min-width:0;
  gap:4px;
}

#workshopScreen .build-pricing__delivery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

#workshopScreen .build-pricing__delivery label{
  min-width:0;
  gap:2px;
}

#workshopScreen .build-pricing__delivery input{
  min-width:0;
  min-height:44px;
  padding:8px 6px;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}

#workshopScreen .build-pricing__delivery label:last-child input{
  border-color:rgba(214,210,200,.24);
}

#workshopScreen .build-pricing > label > span,
#workshopScreen .build-pricing .quote-pricing-driver__label{
  color:var(--titanium);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.03em;
  text-transform:none;
}

#workshopScreen .build-pricing input:not([type="checkbox"]){
  min-height:44px;
  padding:8px 10px;
  background:var(--ds-surface);
  color:var(--ds-text-strong);
  font-size:16px;
  scroll-margin-top:calc(66px + var(--safe-top));
  scroll-margin-bottom:calc(140px + var(--safe-bottom));
}

#workshopScreen .build-pricing .build-pricing__result{
  grid-template-columns:minmax(0,1fr) minmax(100px,.8fr);
  align-items:center;
  gap:8px;
  padding-left:10px;
  border-radius:var(--ds-radius-sm);
  background:var(--ds-surface-soft);
}

#workshopScreen .build-pricing .build-pricing__result input{
  border-color:transparent;
  background:transparent;
  color:var(--titanium);
  text-align:right;
  cursor:default;
}

#workshopScreen .build-pricing .build-pricing__total{
  gap:6px;
  padding:8px;
  border:0;
  border-radius:var(--ds-radius-md);
  background:var(--ds-surface-soft);
}

#workshopScreen .build-pricing .build-pricing__total > span{
  color:var(--ds-text-strong);
  font-size:12px;
  font-weight:700;
}

#workshopScreen .build-pricing .build-pricing__total input{
  border-color:rgba(214,210,200,.24);
  font-size:24px;
  font-weight:700;
}

#workshopScreen .build-pricing .quote-gst-toggle{
  min-height:44px;
  padding:0 10px;
  grid-template-columns:minmax(0,1fr) 18px;
  align-items:center;
  border:var(--ds-stroke);
  border-radius:var(--ds-radius-sm);
  background:var(--ds-surface-soft);
  cursor:pointer;
}

#workshopScreen .build-pricing .quote-gst-toggle input{
  width:18px;
  height:18px;
  min-height:18px;
  margin:0;
  padding:0;
  accent-color:var(--kl-red-base);
  cursor:pointer;
}

#workshopScreen .build-pricing .quote-pricing-driver__button{
  min-height:44px;
}

#workshopScreen .build-pricing .quote-gst-status:empty{
  display:none;
}

#workshopScreen .build-pricing{
  gap:4px 8px;
}

#workshopScreen #workshopPricingSection:not(.quote-section--collapsed) .build-pricing{
  padding:6px 10px 8px;
}

#workshopScreen .build-pricing > label{
  gap:2px;
}

#workshopScreen .build-pricing .build-pricing__help{
  margin:0;
  font-size:11px;
  line-height:1.35;
}

#workshopScreen .build-pricing .build-pricing__note{
  color:var(--titanium);
  font-size:11px;
  line-height:1.35;
}

#workshopScreen .build-pricing .build-pricing__note summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:36px;
  padding:0 2px;
  color:rgba(214,208,196,.66);
  cursor:pointer;
  list-style:none;
}

#workshopScreen .build-pricing .build-pricing__note summary::-webkit-details-marker{
  display:none;
}

#workshopScreen .build-pricing .build-pricing__note summary::after{
  content:"";
  flex:none;
  width:7px;
  height:7px;
  margin:-3px 4px 0 0;
  border:solid currentColor;
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
  transition:transform .15s ease;
}

#workshopScreen .build-pricing .build-pricing__note[open] summary::after{
  margin-top:3px;
  transform:rotate(-135deg);
}

#workshopScreen .build-pricing .build-pricing__note summary:focus-visible{
  outline:2px solid rgba(var(--kl-red-rgb),.8);
  outline-offset:1px;
  border-radius:var(--ds-radius-sm);
}

#workshopScreen .build-pricing .build-pricing__note p{
  margin:0 0 2px;
  padding:0 2px;
}

#workshopScreen .build-pricing .build-pricing__help{
  margin-top:-2px;
}

/* The build back links scroll with the page instead of sticking over accordion headings. */
#studioWorkflowPanel > .workshop-tool-nav-back{
  position:static;
}

#workshopScreen .build-pricing .build-pricing__result{
  min-height:32px;
  padding:0 10px;
}

#workshopScreen .build-pricing .build-pricing__result > span{
  font-size:12px;
}

#workshopScreen .build-pricing .build-pricing__result input:not([type="checkbox"]){
  min-height:32px;
  padding:0;
  font-size:14px;
  font-weight:600;
}

#workshopScreen .build-pricing .build-earnings-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:4px 12px;
  margin-top:2px;
  padding:7px 10px;
  border:var(--ds-stroke);
  border-radius:var(--ds-radius-sm);
  background:var(--ds-surface-soft);
  color:var(--titanium);
  font-size:12px;
}

#workshopScreen .build-pricing .build-earnings-summary strong{
  text-align:right;
  color:var(--ds-text-strong);
  font-variant-numeric:tabular-nums;
}

#workshopScreen .build-pricing .build-earnings-summary p{
  grid-column:1 / -1;
  margin:0;
  color:var(--titanium);
  font-size:10px;
  line-height:1.35;
}

#workshopScreen .build-pricing .build-pricing__total{
  gap:3px;
  padding:0;
  border:0;
  background:transparent;
}

#workshopScreen .build-pricing .build-pricing__total input{
  font-size:20px;
}

#workshopScreen .build-pricing .build-pricing__delivery input{
  min-width:0;
  padding:8px 6px;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}

@media (max-width:299px){
  #workshopScreen .build-pricing{
    grid-template-columns:minmax(0,1fr);
  }
}

.component-sheet__panel,
.quote-preview-panel,
.customer-finder__detail,
.workshop-tool-result--primary strong,
#workshopGripMaterialRequired{
  transition:transform var(--ds-transition),opacity var(--ds-transition),color var(--ds-transition),border-color var(--ds-transition),background-color var(--ds-transition);
}

@media (prefers-reduced-motion: reduce){
  .primary-action,
  .ghost-action,
  .component-sheet__add,
  .component-sheet__option,
  .saved-build-card,
  .quote-component-row,
  .component-sheet__panel,
  .quote-preview-panel,
  .workshop-tool-result--primary strong,
  #workshopGripMaterialRequired{
    transition:none!important;
  }
}

/* Sprint 2: Active Builds production refinements */
#buildsScreen .screen-head .subtle{
  max-width:34ch;
}

.saved-builds-list{
  gap:var(--ds-space-4);
  padding:0 0 var(--ds-space-4);
}

.saved-build-card{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--ds-space-4);
  margin:0;
  padding:var(--ds-space-4);
  border:var(--ds-stroke);
  border-radius:var(--ds-radius-lg);
  background:var(--ds-surface);
}

.saved-build-card__open{
  gap:var(--ds-space-3);
  min-height:52px;
}

.saved-build-card__head{
  gap:var(--ds-space-1);
}

.saved-build-card__head strong{
  font-size:13px;
  line-height:1.25;
  letter-spacing:.01em;
}

.saved-build-card__title{
  margin:0;
  color:var(--ds-text-muted);
  font-size:10px;
  letter-spacing:.02em;
}

.saved-build-card__meta{
  display:flex;
  align-items:center;
  gap:var(--ds-space-3);
  min-height:22px;
}

.saved-build-card__meta small{
  color:var(--ds-text-muted);
  font-size:10px;
  letter-spacing:.02em;
}

.saved-build-card__status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 8px;
  border-radius:999px;
  border:var(--ds-stroke);
  color:#d7d0c3;
  background:rgba(255,255,255,.03);
  font-size:9px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}

.saved-build-card__status--accepted{
  border-color:rgba(214,210,200,.34);
  color:#d8d1c4;
  background:rgba(255,255,255,.03);
}

.saved-build-card__status--active{
  border-color:rgba(var(--kl-red-rgb),.6);
  color:#f4ddda;
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.2),rgba(56,14,18,.24));
}

.saved-build-card__status--complete{
  border-color:rgba(214,210,200,.34);
  color:#d8d1c4;
  background:rgba(255,255,255,.03);
}

.saved-build-card__status--quote{
  border-color:rgba(214,196,120,.55);
  color:#f2e6bf;
  background:linear-gradient(180deg,rgba(214,196,120,.18),rgba(56,46,14,.2));
}

.saved-build-card__actions{
  display:grid;
  align-items:center;
  justify-items:end;
  position:relative;
}

.saved-build-card__menu-toggle{
  min-width:42px;
  min-height:42px;
  padding:0;
  border-radius:var(--ds-radius-md);
  font-size:18px;
  line-height:1;
  letter-spacing:0;
  color:var(--ds-text-muted);
}

.saved-build-card__menu{
  position:fixed;
  left:8px;
  top:8px;
  min-width:160px;
  max-width:calc(100vw - 16px);
  max-height:calc(100dvh - 16px);
  overflow:auto;
  padding:6px;
  display:grid;
  gap:4px;
  border:var(--ds-stroke);
  border-radius:var(--ds-radius-md);
  background:var(--ds-surface);
  box-shadow:0 12px 26px rgba(0,0,0,.28);
  z-index:2;
}

#buildsScreen.active:has(.saved-build-card__menu){
  animation:none;
}

#buildsScreen .saved-build-card__open,
#buildsScreen .saved-build-card__head{
  min-width:0;
}

#buildsScreen .saved-build-card__head strong,
#buildsScreen .saved-build-card__title{
  overflow-wrap:anywhere;
}

#buildsScreen .saved-build-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  min-width:0;
}

#buildsScreen .saved-build-card__meta small{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}

#buildsScreen .saved-build-card__menu-toggle{
  min-width:44px;
  min-height:44px;
}

#buildsScreen .saved-build-card__menu-item{
  min-height:44px;
}

.saved-build-card__menu-item{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.16);
  background:linear-gradient(180deg,rgba(18,22,24,.88),rgba(10,13,14,.96));
  color:#ddd6ca;
  text-align:left;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.saved-build-card__menu-item:hover,
.saved-build-card__menu-item:focus-visible{
  border-color:rgba(214,210,200,.34);
  color:#ece4d7;
}

.saved-build-card__menu-item--danger{
  border-color:rgba(191,63,75,.44);
  color:#f0d6d9;
  background:linear-gradient(180deg,rgba(88,23,31,.5),rgba(53,14,19,.58));
}

.saved-builds-empty{
  gap:var(--ds-space-4);
  margin:0;
  padding:var(--ds-space-5);
  border:var(--ds-stroke);
  border-radius:var(--ds-radius-lg);
  background:var(--ds-surface);
}

.saved-builds-empty__actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ds-space-3);
  width:100%;
}

.saved-builds-empty__actions .ghost-action,
.saved-builds-empty__actions .primary-action{
  min-height:44px;
}

#workshopScreen .quote-actions-grid--build{
  grid-template-columns:1fr;
  gap:8px;
}

#workshopScreen .workshop-build-actions-surface{
  display:grid;
  gap:8px;
  padding:10px;
  border:var(--ds-stroke);
  border-radius:var(--ds-radius-lg);
  background:var(--ds-surface-soft);
}

#workshopScreen .workshop-build-actions-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

#workshopScreen .workshop-build-actions-row-end{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  margin-left:auto;
}

#workshopScreen .workshop-build-actions-row > span{
  color:var(--ds-text-muted);
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

#workshopScreen .workshop-build-actions-status-value{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 9px;
  border-radius:999px;
  border:var(--ds-stroke);
  color:#d7d0c3;
  background:rgba(255,255,255,.03);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#workshopScreen .workshop-build-actions-status-value--active{
  border-color:rgba(var(--kl-red-rgb),.6);
  color:#f4ddda;
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.2),rgba(56,14,18,.24));
}

#workshopScreen .workshop-build-actions-status-value--complete{
  border-color:rgba(214,210,200,.34);
  color:#d8d1c4;
  background:rgba(255,255,255,.03);
}

#workshopScreen .workshop-build-actions-status-value--quote{
  border-color:rgba(214,196,120,.55);
  color:#f2e6bf;
  background:linear-gradient(180deg,rgba(214,196,120,.18),rgba(56,46,14,.2));
}

#workshopScreen .workshop-build-actions-confirm{
  justify-content:center;
  min-height:44px;
}

.workshop-build-actions-quote-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.workshop-build-actions-quote-row .ghost-action{
  min-height:38px;
}

#workshopScreen .workshop-build-actions-status-toggle{
  justify-content:center;
  min-height:40px;
  border-color:rgba(var(--kl-red-rgb),.52);
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.16),rgba(17,21,23,.96));
  color:#edd9d4;
}

#workshopScreen .workshop-build-actions-status-toggle:hover,
#workshopScreen .workshop-build-actions-status-toggle:focus-visible{
  border-color:rgba(var(--kl-red-active-rgb),.66);
  color:#f8e6df;
}

#workshopScreen #workshopBuildActionsStatus{
  margin:0;
  min-height:0;
  font-size:9px;
  color:#b8b1a6;
  text-align:right;
}

#workshopScreen .workshop-build-actions-menu-wrap{
  position:relative;
  flex:0 0 auto;
}

#workshopScreen .workshop-build-actions-menu{
  top:auto;
  bottom:44px;
  right:0;
  left:auto;
  min-width:136px;
  padding:4px;
  gap:3px;
  background:linear-gradient(180deg,rgba(16,20,22,.96),rgba(9,12,13,.98));
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}

#workshopScreen .workshop-build-actions-menu-wrap .saved-build-card__menu-toggle{
  min-width:38px;
  min-height:38px;
}

#workshopScreen .workshop-build-actions-menu .saved-build-card__menu-item{
  min-height:30px;
  padding:0 9px;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.14);
  background:linear-gradient(180deg,rgba(17,21,23,.76),rgba(10,13,15,.88));
  color:#d6cec0;
  font-size:10px;
  letter-spacing:.03em;
  text-transform:none;
}

#workshopScreen .workshop-build-actions-menu .saved-build-card__menu-item:hover,
#workshopScreen .workshop-build-actions-menu .saved-build-card__menu-item:focus-visible{
  border-color:rgba(214,210,200,.26);
  color:#e8dece;
}

#workshopScreen .workshop-build-actions-menu .saved-build-card__menu-item--danger{
  border-color:rgba(166,70,80,.36);
  color:#e4aeb4;
  background:linear-gradient(180deg,rgba(52,19,24,.5),rgba(30,11,15,.62));
}

#workshopScreen .workshop-build-actions-menu .saved-build-card__menu-item--danger:hover,
#workshopScreen .workshop-build-actions-menu .saved-build-card__menu-item--danger:focus-visible{
  border-color:rgba(186,86,96,.46);
  color:#efd0d4;
}

@media (max-width:520px){
  .saved-build-card{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:var(--ds-space-3);
  }

  .saved-build-card__actions{
    justify-self:end;
    justify-items:end;
  }

  .saved-build-card__menu{
    max-width:calc(100vw - 16px);
  }

  .saved-builds-empty__actions{
    grid-template-columns:1fr;
  }

  #workshopScreen .workshop-build-actions-menu{
    right:0;
    left:auto;
    max-width:min(180px,calc(100vw - 20px));
  }

  #workshopScreen .workshop-build-actions-row{
    align-items:flex-start;
  }

  #workshopScreen .workshop-build-actions-row-end{
    gap:6px;
  }
}

/* Sprint 4: Guide Layout flagship refinement (no calculation changes) */
#layoutScreen .layout-screen-shell{
  gap:10px;
  padding:4px 0 10px;
}

#layoutScreen .layout-control-card,
#layoutScreen .guide-spacing-panel,
#layoutScreen .workshop-tool-list,
#layoutScreen .workshop-tool-card{
  border-color:rgba(214,210,200,.16);
  box-shadow:0 9px 18px rgba(0,0,0,.18);
}

#layoutScreen .layout-control-card{
  padding:10px 10px 9px;
}

#layoutScreen .layout-control-card__title{
  margin-bottom:7px;
  text-align:left;
  font-size:9px;
  letter-spacing:.17em;
  color:#b7b1a5;
}

#layoutScreen .layout-control-card--guide-spacing{
  display:grid;
  gap:0;
  padding:4px 10px;
}

#layoutScreen .guide-spacing-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:4px;
  padding:8px 0;
}

#layoutScreen .guide-spacing-input-row+.guide-spacing-input-row{
  border-top:1px solid rgba(214,210,200,.1);
}

#layoutScreen .guide-spacing-input-row__label{
  min-width:0;
  color:#d2ccc0;
  font-size:11px;
  font-weight:600;
  line-height:1.25;
}

#layoutScreen .guide-spacing-input-row__controls{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px 32px;
  align-items:center;
  gap:2px;
  min-width:0;
}

#layoutScreen .layout-control-card--guide-spacing .layout-control-card__button{
  width:44px;
  height:44px;
  border-radius:10px;
  font-size:19px;
}

#layoutScreen .layout-control-card--guide-spacing .layout-control-card__value{
  box-sizing:border-box;
  width:auto;
  min-width:0;
  min-height:44px;
  padding:0 2px;
  border-radius:8px;
  font-size:20px;
  letter-spacing:0;
}

#layoutScreen .guide-spacing-input-row__unit{
  box-sizing:border-box;
  min-width:0;
  color:#9ea499;
  font-size:10px;
  letter-spacing:.04em;
}

#layoutScreen .layout-control-card__body{
  gap:10px;
}

#layoutScreen .layout-control-card__body--compact{
  min-height:52px;
}

#layoutScreen .layout-control-card__button{
  width:44px;
  height:44px;
  font-size:22px;
  border-radius:12px;
  border-color:rgba(214,210,200,.2);
}

#layoutScreen .layout-control-card__value{
  min-height:48px;
  border-radius:12px;
  font-size:36px;
  letter-spacing:-.022em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

#layoutScreen .layout-control-card__meta{
  margin-top:6px;
  font-size:9px;
  letter-spacing:.14em;
  color:#9ea499;
}

#layoutScreen #layoutStatusBadge{
  min-height:32px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  letter-spacing:.13em;
}

#layoutScreen .guide-spacing-panel{
  padding:10px;
}

#layoutScreen .guide-spacing-panel__header{
  margin-bottom:8px;
}

#layoutScreen .guide-spacing-list{
  gap:6px;
}

#layoutScreen .guide-spacing-row{
  grid-template-columns:minmax(86px,auto) minmax(0,1fr) minmax(130px,152px);
  min-height:48px;
  padding:7px 6px;
  border-top-color:rgba(255,255,255,.045);
  border-radius:10px;
}

#layoutScreen .guide-spacing-row:hover,
#layoutScreen .guide-spacing-row:focus-visible{
  background:rgba(255,255,255,.03);
  outline:none;
}

#layoutScreen .guide-spacing-row--active{
  background:rgba(var(--kl-red-rgb),.11);
  box-shadow:inset 0 0 0 1px rgba(var(--kl-red-rgb),.3);
}

#layoutScreen .guide-spacing-row__meta{
  gap:2px;
}

#layoutScreen .guide-spacing-row__guide-name{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:none;
  color:#ece5d8;
}

#layoutScreen .guide-spacing-row__meta small{
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8e928b;
}

#layoutScreen .guide-spacing-row__position-value{
  font-size:13px;
  font-weight:760;
  letter-spacing:.01em;
  color:#e6dece;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

#layoutScreen .guide-spacing-row__spacing-label{
  font-size:8px;
  letter-spacing:.11em;
  color:#878c84;
}

#layoutScreen .guide-spacing-row__spacing-value{
  font-size:14px;
  letter-spacing:.01em;
  color:#f0e8d9;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

#layoutScreen #layoutGuideNotice{
  margin:10px 4px 0;
  font-size:10px;
  line-height:1.45;
  color:#a8aca2;
}

#layoutScreen .workshop-tool-list,
#layoutScreen .workshop-tool-card{
  gap:12px;
}

#layoutScreen .workshop-tool-launch{
  padding:13px 14px;
  border-radius:12px;
}

#layoutScreen .workshop-tool-unit-row .ghost-action{
  min-height:40px;
  padding:0 14px;
}

#layoutScreen .workshop-tool-fields input{
  min-height:46px;
  font-size:17px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

#layoutScreen .workshop-tool-result{
  align-items:center;
  min-height:66px;
}

#layoutScreen .workshop-tool-result--primary strong{
  font-size:32px;
}

#layoutScreen .workshop-tool-details{
  gap:8px;
}

#layoutScreen .workshop-tool-details div{
  min-height:34px;
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.02);
}

#layoutScreen .workshop-tool-details strong{
  font-size:13px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

@media (max-width:640px){
  #layoutScreen .layout-control-card__button{
    width:46px;
    height:46px;
  }

  #layoutScreen .guide-spacing-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:6px 10px;
    padding:8px;
  }

  #layoutScreen .guide-spacing-row .guide-spacing-row__meta:first-child{
    grid-column:1 / -1;
  }

  #layoutScreen .guide-spacing-row .guide-spacing-row__meta:nth-child(2){
    align-self:end;
  }

  #layoutScreen .guide-spacing-row .guide-spacing-row__spacing{
    align-self:end;
  }

  #layoutScreen .workshop-tool-unit-row .ghost-action{
    flex:1 1 46%;
    min-width:0;
  }

  #layoutScreen .workshop-tool-result--primary strong{
    font-size:27px;
  }
}

/* Sprint 5: Workshop calculators consistency pass */
#workshopToolsPanel{
  gap:12px;
  border-style:solid;
  border-color:rgba(214,210,200,.16);
  background:linear-gradient(180deg,rgba(12,15,17,.82),rgba(9,12,14,.9));
}

#workshopToolsPanel .guide-spacing-panel__header{
  margin-bottom:2px;
}

#workshopToolsPanel .guide-spacing-panel__header .eyebrow{
  font-size:9px;
  letter-spacing:.14em;
  color:#b0b3aa;
}

#workshopToolDiameter,
#workshopToolGrip,
#workshopToolSpiral{
  gap:8px;
}

#workshopToolDiameter .workshop-tool-head,
#workshopToolGrip .workshop-tool-head,
#workshopToolSpiral .workshop-tool-head{
  gap:7px;
}

#workshopToolDiameter .workshop-tool-head p,
#workshopToolGrip .workshop-tool-head p,
#workshopToolSpiral .workshop-tool-head p{
  color:rgba(223,216,206,.82);
}

#layoutScreen .guide-setup-heading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 2px 0;
}

#layoutScreen .guide-setup-heading--next{
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid rgba(214,210,200,.14);
}

#layoutScreen .guide-setup-heading__step{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:22px;
  height:22px;
  border:1px solid rgba(214,210,200,.28);
  border-radius:50%;
  color:#e9e2d5;
  font-size:10px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

#layoutScreen .guide-setup-heading h4{
  margin:0;
  color:#f2ede4;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#layoutScreen .guide-setup-heading p{
  margin:2px 0 0;
  color:rgba(214,210,200,.72);
  font-size:10px;
  letter-spacing:.02em;
}

#layoutScreen .guide-setup-orientation{
  display:grid;
  gap:6px;
  padding:8px;
  border:var(--ds-stroke);
  border-color:rgba(214,210,200,.16);
  border-radius:12px;
  background:var(--ds-surface);
  box-shadow:0 9px 18px rgba(0,0,0,.18);
}

/* Guide Setup: one unified guide list (position, spacing, orientation); column labels once in the header. */
#layoutScreen .guide-spacing-panel__head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  padding:0 8px 6px;
}

#layoutScreen .guide-spacing-panel__head > span{
  color:#e9e2d5;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#layoutScreen .guide-spacing-panel__head small{
  min-width:0;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  color:rgba(214,210,200,.62);
  font-size:9px;
  letter-spacing:.04em;
  line-height:1.35;
}

#layoutScreen .guide-spacing-toggle{
  min-width:104px;
  min-height:44px;
  height:44px;
  padding:0 11px;
  border:1px solid rgba(214,210,200,.18);
  border-radius:7px;
  background:rgba(255,255,255,.02);
  color:rgba(214,210,200,.78);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
  white-space:normal;
}

#layoutScreen .guide-spacing-toggle[aria-pressed="true"]{
  border-color:rgba(var(--kl-red-rgb),.54);
  background:rgba(var(--kl-red-rgb),.16);
  color:#f5e5df;
}

#layoutScreen .guide-spacing-toggle:focus-visible{
  outline:1px solid rgba(var(--kl-red-active-rgb),.7);
  outline-offset:2px;
}

#layoutScreen .guide-spacing-panel__toggles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-width:0;
  gap:6px;
}

#layoutScreen .guide-spacing-panel__toggles .guide-spacing-toggle{
  width:100%;
  min-width:0;
}

#layoutScreen .guide-offset-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:4px;
  padding:6px 8px 8px;
  border-top:var(--ds-stroke);
  scroll-margin-bottom:calc(122px + var(--safe-bottom));
}

/* Diameter: label left, compact right-aligned input; result gets its own full-width row below. */
#layoutScreen .guide-offset-controls label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

#layoutScreen .guide-offset-controls__result{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:2px 10px;
  min-width:0;
  width:100%;
}

#layoutScreen .guide-offset-controls span{
  color:var(--titanium);
  font-size:11px;
  line-height:1.35;
}

#layoutScreen .guide-offset-controls input{
  flex:0 0 auto;
  width:6.5rem;
  max-width:50%;
  min-width:0;
  min-height:44px;
  border:var(--ds-stroke-strong);
  border-radius:var(--ds-radius-md);
  background:var(--panel);
  color:var(--ds-text-strong);
  font-size:16px;
  padding:6px 10px;
  text-align:right;
}

#layoutScreen .guide-offset-controls__result strong{
  font-size:14px;
  line-height:1.3;
  color:var(--ds-text-strong);
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:right;
}

#layoutScreen .guide-offset-controls__result[data-state="missing"] strong{
  font-size:11px;
  font-weight:600;
  color:var(--titanium);
  text-align:right;
}

#layoutScreen .guide-offset-controls input:focus-visible{
  outline:2px solid var(--kl-red-active);
  outline-offset:2px;
}
#layoutScreen .guide-spacing-columns,
#layoutScreen .guide-spacing-row__summary{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.3fr) 14px;
  align-items:center;
  gap:8px;
  padding:0 8px;
}

#layoutScreen .guide-spacing-panel[data-show-spacing="false"] .guide-spacing-columns,
#layoutScreen .guide-spacing-panel[data-show-spacing="false"] .guide-spacing-row__summary{
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr) 14px;
}

#layoutScreen .guide-spacing-columns{
  margin-bottom:2px;
  padding-bottom:5px;
  border-bottom:1px solid rgba(214,210,200,.08);
  color:rgba(214,210,200,.6);
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#layoutScreen .guide-spacing-columns span:not(:first-child){
  text-align:right;
}

#layoutScreen .guide-spacing-columns span:nth-last-child(2){
  text-align:left;
}

#layoutScreen .guide-spacing-list .guide-spacing-row{
  display:block;
  min-height:0;
  padding:0;
  border:0;
  border-top:1px solid rgba(255,255,255,.045);
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  transition:background-color var(--micro-motion) ease,box-shadow var(--micro-motion) ease;
}

#layoutScreen .guide-spacing-list .guide-spacing-row:first-child{
  border-top-color:transparent;
}

#layoutScreen .guide-spacing-row__summary{
  width:100%;
  min-height:34px;
  margin:0;
  padding-top:4px;
  padding-bottom:4px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

#layoutScreen .guide-spacing-row__summary:not(.guide-spacing-row__summary--static){
  min-height:44px;
}

#layoutScreen .guide-spacing-row__summary--static{
  cursor:default;
}

#layoutScreen .guide-spacing-row__chevron{
  justify-self:end;
  color:rgba(214,210,200,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  font-size:0;
  transform:rotate(-90deg);
  transition:transform var(--micro-motion) ease,color var(--micro-motion) ease;
}

#layoutScreen .guide-spacing-row__chevron::before{
  content:"";
  box-sizing:border-box;
  width:8px;
  height:8px;
  margin-top:-3px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}

#layoutScreen .guide-spacing-row--selected .guide-spacing-row__chevron{
  color:rgba(var(--kl-red-rgb),.92);
  transform:rotate(0deg);
}

#layoutScreen .guide-spacing-row__summary > *{
  grid-column:auto;
  justify-self:stretch;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#layoutScreen .guide-spacing-row__summary:focus-visible{
  outline:1px solid rgba(var(--kl-red-rgb),.6);
  outline-offset:-1px;
}

#layoutScreen .guide-spacing-list .guide-spacing-row--active{
  background:rgba(255,255,255,.03);
  box-shadow:none;
}

#layoutScreen .guide-spacing-list .guide-spacing-row--selected{
  border-top-color:transparent;
  background:rgba(var(--kl-red-rgb),.08);
  box-shadow:inset 2px 0 0 rgba(var(--kl-red-rgb),.8);
}

#layoutScreen .guide-spacing-list .guide-spacing-row--selected + .guide-spacing-row{
  border-top-color:transparent;
}

#layoutScreen .guide-spacing-row__guide-name{
  display:flex;
  align-items:baseline;
  gap:6px;
  color:#ece5d8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}

#layoutScreen .guide-spacing-row__tag{
  color:rgba(var(--kl-red-rgb),.95);
  font-size:8px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#layoutScreen .guide-spacing-row--stripper .guide-spacing-row__guide-name{
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  line-height:1.15;
}

#layoutScreen .guide-spacing-list .guide-spacing-row__position-value{
  color:#e6dece;
  font-size:13px;
  font-weight:760;
  letter-spacing:.01em;
  text-align:right;
  text-transform:none;
  font-variant-numeric:tabular-nums;
}

#layoutScreen .guide-spacing-list .guide-spacing-row__spacing-value{
  color:#f0e8d9;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

#layoutScreen .guide-spacing-row__orientation{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:baseline;
  gap:6px;
}

#layoutScreen .guide-spacing-list{
  display:grid;
  gap:0;
}

#layoutScreen .guide-spacing-row__orientation strong{
  grid-column:1;
  justify-self:end;
  color:#f0e8d9;
  font-size:13px;
  font-weight:700;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

#layoutScreen .guide-spacing-row__orientation small{
  overflow:hidden;
  color:rgba(214,210,200,.68);
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

#layoutScreen .guide-spacing-row--selected .guide-spacing-row__guide-name{
  color:#fff6ee;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__offset{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:32px;
  margin:-2px 0 0;
  padding:2px 8px 6px;
  text-align:left;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__applied-match{
  margin:-3px 0 0;
  padding:0;
  color:rgba(214,210,200,.62);
  font-size:10px;
  line-height:1.2;
  text-align:left;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__offset span{
  color:rgba(214,210,200,.62);
  font-size:8px;
  letter-spacing:.06em;
  line-height:1.15;
  flex:0 1 auto;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__offset strong{
  color:rgba(214,210,200,.88);
  font-size:10px;
  font-weight:650;
  letter-spacing:0;
  line-height:1.15;
  text-align:right;
  overflow-wrap:anywhere;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__edit{
  display:grid;
  gap:6px;
  padding:2px 8px 9px;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__edit--collapsed{
  display:none;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__fields{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  justify-content:stretch;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__fields--basic{
  grid-template-columns:minmax(0,1fr);
}

#layoutScreen .guide-spacing-row .spiral-guide-row__fields label{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:48px;
}

#layoutScreen .guide-spacing-row .spiral-guide-row__fields label+label{
  border-top:1px solid rgba(214,210,200,.1);
}

#layoutScreen .guide-spacing-row .spiral-guide-row__fields label > span{
  color:rgba(214,210,200,.78);
  font-size:10px;
  font-weight:650;
  letter-spacing:.05em;
  text-transform:uppercase;
}

#layoutScreen .guide-spacing-row .spiral-diameter-control{
  display:flex;
  align-items:center;
  gap:7px;
}

#layoutScreen .guide-spacing-row .spiral-diameter-control input{
  box-sizing:border-box;
  width:88px;
  min-height:44px;
  padding:0 7px;
  font-size:16px;
  text-align:center;
}

#layoutScreen .guide-spacing-row .spiral-diameter-control__unit{
  min-width:22px;
  color:rgba(214,210,200,.72);
  font-size:10px;
  letter-spacing:.04em;
}

#layoutScreen .guide-spacing-row .spiral-rotation-control{
  grid-template-columns:44px 64px 44px;
  gap:4px;
}

#layoutScreen .guide-spacing-row .spiral-rotation-control .layout-control-card__button{
  width:44px;
  height:44px;
  border-radius:10px;
  font-size:18px;
}

#layoutScreen .guide-spacing-row .spiral-rotation-control__value-wrap,
#layoutScreen .guide-spacing-row .spiral-rotation-control__value{
  box-sizing:border-box;
  width:64px;
}

#layoutScreen .guide-spacing-row .spiral-rotation-control__value{
  min-height:44px;
  padding:0 17px 0 4px;
  border-radius:8px;
  font-size:16px;
  letter-spacing:0;
}

#layoutScreen .guide-spacing-row .spiral-rotation-control__unit{
  right:5px;
  font-size:11px;
}

.rod-marker--selected .rod-marker__halo{
  opacity:.62;
}

.rod-marker--selected .rod-marker__core{
  fill:var(--kl-red-active);
}

.rod-marker--selected .rod-marker__dot{
  fill:#fff;
}

@media (max-width:640px){
  #layoutScreen .guide-spacing-toggle{
    padding:0 8px;
  }

  #layoutScreen .guide-spacing-columns,
  #layoutScreen .guide-spacing-row__summary{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr) minmax(0,1.55fr) 14px;
    gap:6px;
  }

  #layoutScreen .guide-spacing-panel[data-show-spacing="false"] .guide-spacing-columns,
  #layoutScreen .guide-spacing-panel[data-show-spacing="false"] .guide-spacing-row__summary{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.55fr) 14px;
  }

  #layoutScreen .guide-spacing-row__orientation{
    grid-template-columns:38px minmax(0,1fr);
  }

}

#layoutScreen .guide-spacing-panel[aria-label="Guides"]{
  container-type:inline-size;
  container-name:guide-table;
}

@container guide-table (max-width:560px){
  #layoutScreen .guide-spacing-panel[data-show-spacing] .guide-spacing-columns,
  #layoutScreen .guide-spacing-panel[data-show-spacing] .guide-spacing-row__summary{
    grid-template-columns:56px minmax(0,1fr) minmax(0,1fr) minmax(48px,1fr) 12px;
    gap:4px;
    padding-left:6px;
    padding-right:6px;
  }

  #layoutScreen .guide-spacing-panel[data-show-spacing="false"] .guide-spacing-columns,
  #layoutScreen .guide-spacing-panel[data-show-spacing="false"] .guide-spacing-row__summary{
    grid-template-columns:56px minmax(0,1fr) minmax(48px,1fr) 12px;
  }

  #layoutScreen .guide-spacing-row__summary .guide-spacing-row__orientation{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:5px;
    row-gap:0;
  }

  #layoutScreen .guide-spacing-row__summary > .guide-spacing-row__position-value,
  #layoutScreen .guide-spacing-row__summary > .guide-spacing-row__spacing-value{
    text-align:left;
    justify-self:start;
  }

  #layoutScreen .guide-spacing-columns > span{
    text-align:left;
    justify-self:start;
  }

  #layoutScreen .guide-spacing-row__summary .guide-spacing-row__orientation strong{
    justify-self:start;
    text-align:left;
  }

  #layoutScreen .guide-spacing-row__summary .guide-spacing-row__orientation small{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    padding-right:2px;
  }

  #layoutScreen .guide-spacing-row__summary > .guide-spacing-row__guide-name{
    white-space:nowrap;
  }

  #layoutScreen .guide-spacing-row__summary > .guide-spacing-row__position-value,
  #layoutScreen .guide-spacing-row__summary > .guide-spacing-row__spacing-value{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}
@container guide-table (max-width:260px){
  #layoutScreen .guide-spacing-panel[data-show-spacing] .guide-spacing-columns,
  #layoutScreen .guide-spacing-panel[data-show-spacing] .guide-spacing-row__summary{
    grid-template-columns:54px minmax(0,1fr) minmax(0,1fr) minmax(48px,1fr) 10px;
    padding-left:3px;
    padding-right:3px;
  }
}
@container guide-table (min-width:380px) and (max-width:560px){
  #layoutScreen .guide-spacing-panel[data-show-spacing] .guide-spacing-columns,
  #layoutScreen .guide-spacing-panel[data-show-spacing] .guide-spacing-row__summary{
    column-gap:12px;
  }
}

@media (max-width:640px){
  #layoutScreen .guide-spacing-row .spiral-guide-row__fields,
  #layoutScreen .guide-spacing-row .spiral-guide-row__fields--basic{
    grid-template-columns:minmax(0,1fr);
  }

  #layoutScreen .guide-spacing-row .spiral-guide-row__details{
    width:100%;
  }
}

#layoutScreen #layoutGuideNotice{
  margin:2px 4px 0;
  text-align:center;
}

#workshopToolsPanel .workshop-tool-unit-row,
#workshopToolSpiral .workshop-tool-unit-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

#workshopToolsPanel .workshop-tool-unit-row .ghost-action,
#workshopToolSpiral .workshop-tool-unit-row .ghost-action{
  width:100%;
  min-height:42px;
  border-radius:11px;
  letter-spacing:.07em;
}

#workshopToolsPanel .workshop-tool-unit-row--compact .ghost-action{
  min-height:38px;
  font-size:9px;
}

#workshopToolGrip .workshop-tool-unit-row:nth-of-type(3){
  grid-template-columns:repeat(2,minmax(0,1fr));
}

#workshopToolDiameter .workshop-tool-fields,
#workshopToolGrip .workshop-tool-fields,
#workshopToolSpiral .workshop-tool-fields{
  gap:10px;
}

#workshopToolDiameter .workshop-tool-fields--two,
#workshopToolGrip .workshop-tool-fields--two,
#workshopToolSpiral .workshop-tool-fields--two{
  gap:9px;
}

#workshopToolDiameter .workshop-tool-fields label,
#workshopToolGrip .workshop-tool-fields label,
#workshopToolSpiral .workshop-tool-fields label{
  gap:5px;
}

#workshopToolDiameter .workshop-tool-fields input,
#workshopToolGrip .workshop-tool-fields input{
  box-sizing:border-box;
  min-height:42px;
  padding:6px 10px;
  font-size:14px;
  line-height:1.2;
  border-color:rgba(214,210,200,.2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.04),inset 0 -1px 2px rgba(0,0,0,.28);
}

#workshopToolSpiral .workshop-tool-fields input{
  min-height:44px;
  padding:9px 10px;
  border-color:rgba(214,210,200,.2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.04),inset 0 -1px 2px rgba(0,0,0,.28);
}

#workshopToolDiameter .workshop-tool-fields,
#workshopToolGrip .workshop-tool-fields{
  gap:8px;
}

.workshop-dc-wraps{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(140px,180px);
  align-items:center;
  gap:8px;
}

.workshop-dc-wraps > label{
  color:var(--titanium);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
}

.workshop-dc-wraps .component-quantity{
  grid-template-columns:44px minmax(0,1fr) 44px;
}

.workshop-dc-wraps :is(button,input){
  min-height:44px;
  min-width:0;
}

.workshop-dc-wraps input{
  width:100%;
  border:var(--ds-stroke-strong);
  border-radius:var(--ds-radius-md);
  background:var(--panel);
  color:var(--ds-text-strong);
  font-size:16px;
}

.workshop-dc-wraps :is(button,input):focus-visible{
  outline:2px solid var(--kl-red-active);
  outline-offset:2px;
}

#workshopToolDiameter .workshop-tool-result{
  padding:8px 10px;
}

#workshopToolDiameter .workshop-tool-fields--two,
#workshopToolGrip .workshop-tool-fields--two{
  gap:8px;
}

#workshopToolDiameter .workshop-tool-fields label,
#workshopToolGrip .workshop-tool-fields label{
  gap:4px;
}

#workshopToolGrip .workshop-tool-fields--two label > span{
  min-height:24px;
  line-height:1.2;
}

#workshopToolGrip .workshop-tool-unit-row[aria-label="Grip profile"] .ghost-action{
  min-height:40px;
}

#workshopToolGrip .workshop-tool-fields .workshop-grip-allowance{
  grid-template-columns:minmax(0,1fr) 88px;
  align-items:center;
  gap:8px;
}

#workshopToolGrip .workshop-grip-allowance > span{
  min-width:0;
  line-height:1.4;
  overflow-wrap:break-word;
}

#workshopToolGrip .workshop-grip-allowance input{
  min-width:0;
  min-height:44px;
}

#workshopToolGrip .workshop-tool-result--primary{
  min-height:50px;
  padding:8px 10px;
}

#workshopToolDiameter .workshop-tool-result,
#workshopToolGrip .workshop-tool-result,
#workshopToolSpiral .workshop-tool-result{
  min-height:62px;
  border-color:rgba(214,210,200,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
}

#workshopToolDiameter .workshop-tool-details,
#workshopToolGrip .workshop-tool-details,
#workshopToolSpiral .workshop-tool-details{
  gap:8px;
}

#workshopToolDiameter .workshop-tool-details div,
#workshopToolGrip .workshop-tool-details div,
#workshopToolSpiral .workshop-tool-details div{
  min-height:34px;
  padding:6px 8px;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.1);
  background:rgba(255,255,255,.018);
}

/* Grip Wrap Calculator: flatten the secondary results into compact divided rows
   instead of individually bordered boxes used by the other workshop tools
   (matches the existing .guide-specification__row divided-row convention). */
#workshopToolGrip .workshop-tool-details--compact{
  gap:0;
}

#workshopToolGrip .workshop-tool-details--compact div{
  min-height:34px;
  padding:7px 2px;
  border:0;
  border-radius:0;
  background:transparent;
  border-bottom:1px solid rgba(214,210,200,.12);
}

#workshopToolDiameter .workshop-tool-print-actions .ghost-action,
#workshopToolGrip .workshop-tool-print-actions .ghost-action{
  min-height:40px;
}

#workshopToolSpiral .workshop-tool-print-actions .ghost-action{
  min-height:42px;
}

#workshopToolSpiral .workshop-tool-unit-row{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

#workshopToolSpiral .workshop-tool-unit-row[data-spiral-method-row="true"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

#workshopToolSpiral .workshop-tool-unit-row[data-spiral-direction-row="true"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

#workshopToolSpiral .workshop-tool-unit-row[data-spiral-method-row="true"] .ghost-action,
#workshopToolSpiral .workshop-tool-unit-row[data-spiral-direction-row="true"] .ghost-action{
  min-height:44px;
  font-size:9px;
}

.spiral-control-group{
  display:grid;
  gap:5px;
  min-width:0;
}

.spiral-control-label{
  display:block;
  color:rgba(214,210,200,.7);
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.spiral-method-note{
  margin:0;
  min-height:0;
  color:rgba(214,210,200,.74);
  line-height:1.4;
}

#workshopToolSpiral .spiral-rod-style{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(214,210,200,.1);
}

#workshopToolSpiral .spiral-rod-style__options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

#workshopToolSpiral .spiral-rod-style__options .ghost-action{
  min-height:44px;
  padding:0 8px;
  border-radius:9px;
  font-size:9px;
  letter-spacing:.08em;
}

#workshopToolSpiral .spiral-rod-style__options .ghost-action.active{
  border-color:rgba(var(--kl-red-rgb),.75);
  background:rgba(var(--kl-red-rgb),.18);
  color:#fff0eb;
}

.spiral-primary-band{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:stretch;
  gap:8px;
}

.spiral-control-group--direction{
  padding:8px;
  border:1px solid rgba(214,210,200,.12);
  border-radius:12px;
  background:rgba(255,255,255,.012);
}

.spiral-control-group--direction:has(> [data-spiral-direction-row][hidden]){
  display:none;
}

/* Standard (no direction control): the guide count collapses to a single quiet status line. */
.spiral-primary-band:has(.spiral-control-group--direction > [data-spiral-direction-row][hidden]){
  grid-template-columns:minmax(0,1fr);
}

#workshopToolSpiral .spiral-primary-band:has(.spiral-control-group--direction > [data-spiral-direction-row][hidden]) .spiral-count-summary{
  display:flex;
  align-items:baseline;
  gap:8px;
  width:auto;
  max-width:none;
  padding:2px 2px 0;
  border:0;
  background:none;
}

#workshopToolSpiral .spiral-primary-band:has(.spiral-control-group--direction > [data-spiral-direction-row][hidden]) .spiral-count-summary strong{
  font-size:14px;
}

.spiral-secondary-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:7px;
  align-items:center;
}

.spiral-secondary-actions > *,
.spiral-reset-row > *{
  min-width:0;
  width:100%;
}

#workshopToolSpiral .spiral-secondary-actions .spiral-advanced-toggle,
#workshopToolSpiral .spiral-secondary-actions .workshop-tool-stack-actions{
  display:grid;
  justify-content:stretch;
  align-items:stretch;
}

#workshopToolSpiral .spiral-secondary-actions .ghost-action,
#workshopToolSpiral .spiral-reset-action{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:36px;
  padding:0 8px;
  border-radius:7px;
  border-width:1px;
  border-color:rgba(214,210,200,.16);
  background:rgba(12,14,15,.72);
  color:rgba(225,218,205,.72);
  box-shadow:none;
  font-size:8px;
  font-weight:700;
  letter-spacing:.045em;
  line-height:1.05;
  text-transform:uppercase;
  white-space:nowrap;
}

@media (max-width:380px){
  #workshopToolSpiral .spiral-secondary-actions,
  #workshopToolSpiral .spiral-reset-row{
    gap:6px;
  }

  #workshopToolSpiral .spiral-secondary-actions .ghost-action,
  #workshopToolSpiral .spiral-reset-action{
    padding:0 6px;
    font-size:7.5px;
    letter-spacing:.02em;
  }
}

#workshopToolSpiral .spiral-secondary-actions .spiral-advanced-toggle .ghost-action,
#workshopToolSpiral .spiral-secondary-actions .workshop-tool-stack-actions .ghost-action{
  min-height:36px;
  padding:0 8px;
  border-radius:7px;
  font-size:8px;
  letter-spacing:.045em;
  border-color:rgba(214,210,200,.16);
  color:rgba(225,218,205,.72);
}

.workshop-tool-stack-actions{
  display:grid;
  align-items:end;
}

.workshop-tool-stack-actions .ghost-action{
  width:100%;
  min-height:42px;
  border-radius:11px;
  letter-spacing:.08em;
}

.spiral-reset-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:0;
  padding-top:2px;
}

#workshopToolSpiral .spiral-reset-action{
  transition:border-color var(--micro-motion) ease,color var(--micro-motion) ease,background-color var(--micro-motion) ease;
}

#workshopToolSpiral .spiral-manual-control-band{
  display:grid;
  grid-template-columns:minmax(100px,1fr) minmax(78px,auto) minmax(78px,auto);
  align-items:center;
  gap:4px;
  min-width:0;
  padding:6px;
  border:1px solid rgba(214,210,200,.12);
  border-radius:8px;
  background:rgba(255,255,255,.014);
}

#workshopToolSpiral .spiral-offset-start-control{
  display:grid;
  gap:3px;
  min-width:0;
}

#workshopToolSpiral .spiral-offset-start-control__label{
  display:block;
  min-width:0;
  color:rgba(214,210,200,.68);
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
  white-space:normal;
}

#workshopToolSpiral .spiral-offset-start-control__value{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}

#workshopToolSpiral .spiral-offset-start-control input{
  box-sizing:border-box;
  width:52px;
  min-width:52px;
  min-height:36px;
  padding:0 5px;
  border-radius:7px;
  border:1px solid rgba(214,210,200,.2);
  background:linear-gradient(180deg,#111618,#0b0e10);
  color:#ece5d9;
  font-size:13px;
  font-weight:700;
  text-align:center;
}

#workshopToolSpiral .spiral-offset-start-control input:focus{
  border-color:rgba(189,56,68,.52);
  box-shadow:0 0 0 1px rgba(189,56,68,.22);
  outline:none;
}

#workshopToolSpiral .spiral-offset-start-control__unit{
  color:rgba(214,210,200,.78);
  font-size:11px;
  line-height:1;
}

#workshopToolSpiral .spiral-manual-control-band .spiral-reset-action{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:40px;
  padding:0 5px;
  border-radius:7px;
  border-width:1px;
  border-color:rgba(214,210,200,.16);
  background:rgba(12,14,15,.72);
  color:rgba(225,218,205,.8);
  box-shadow:none;
  font-size:8px;
  font-weight:700;
  letter-spacing:.015em;
  line-height:1.05;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
}

#workshopToolSpiral .spiral-reset-action:hover,
#workshopToolSpiral .spiral-reset-action:focus-visible{
  color:rgba(225,218,205,.9);
  border-color:rgba(214,210,200,.3);
}

#workshopToolSpiral .spiral-reset-action.is-copied{
  border-color:rgba(var(--kl-red-rgb),.5);
  color:#f2ece0;
  background:rgba(var(--kl-red-rgb),.15);
}

#workshopToolSpiral .spiral-count-summary{
  display:grid;
  align-content:center;
  gap:2px;
  width:max-content;
  max-width:84px;
  padding:7px 10px;
  border:1px solid rgba(214,210,200,.1);
  border-radius:10px;
  background:rgba(255,255,255,.008);
}

#workshopToolSpiral .spiral-count-summary strong{
  color:#f5efe5;
  font-size:20px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

#workshopToolSpiral .spiral-count-summary__source{
  color:rgba(214,210,200,.5);
  font-size:7px;
  line-height:1.25;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#workshopToolSpiral .spiral-advanced-toggle{
  display:flex;
  justify-content:flex-start;
}

#workshopToolSpiral .spiral-advanced-toggle .ghost-action{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
  border-color:rgba(214,210,200,.2);
  color:rgba(232,225,214,.88);
}

#workshopToolSpiral .spiral-advanced-toggle .ghost-action.active{
  border-color:rgba(var(--kl-red-rgb),.75);
  background:rgba(var(--kl-red-rgb),.16);
  color:#fff0ea;
}

.spiral-mapper-visual{
  display:grid;
  gap:8px;
  padding:9px;
  border:1px solid rgba(214,210,200,.14);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
}

.spiral-mapper-visual__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.spiral-mapper-visual__head span,
.spiral-guide-row__head span,
.spiral-guide-row__details span{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(214,210,200,.72);
}

.spiral-mapper-visual__head strong,
.spiral-guide-row__details strong{
  font-size:11px;
  letter-spacing:.03em;
  color:#efe9de;
}

.spiral-mapper-visual__canvas{
  display:grid;
  place-items:center;
  min-height:204px;
}

.spiral-mapper-visual__canvas svg{
  width:min(248px,100%);
  height:auto;
  overflow:visible;
}

.spiral-map-ring{
  fill:none;
  stroke:rgba(214,210,200,.55);
  stroke-width:1.3;
}

.spiral-map-axis{
  stroke:rgba(214,210,200,.22);
  stroke-width:1;
}

.spiral-map-path{
  fill:none;
  stroke:rgba(var(--kl-red-rgb),.45);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.spiral-map-label{
  fill:rgba(225,219,207,.78);
  font-size:7.7px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.spiral-map-label--reel{
  fill:#f2ebdf;
  font-weight:700;
}

.spiral-map-marker circle{
  fill:rgba(var(--kl-red-rgb),.86);
  stroke:rgba(250,241,230,.7);
  stroke-width:1;
}

.spiral-map-marker__stem{
  stroke:rgba(250,241,230,.78);
  stroke-width:1.6;
  stroke-linecap:round;
}

.spiral-map-marker__ring{
  fill:rgba(7,8,10,.72);
  stroke:rgba(250,241,230,.84);
  stroke-width:1.3;
}

.spiral-map-marker__core{
  fill:rgba(var(--kl-red-rgb),.86);
  stroke:rgba(250,241,230,.7);
  stroke-width:1;
}

.spiral-map-marker text{
  fill:#fff4ec;
  font-size:7.7px;
  font-weight:700;
}

.spiral-map-marker{
  cursor:pointer;
}

.spiral-map-marker:focus-visible{
  outline:none;
}

.spiral-map-marker__core{
  fill:rgba(var(--kl-red-rgb),.62);
  stroke:rgba(250,241,230,.62);
  stroke-width:1;
}

.spiral-map-marker--selected .spiral-map-marker__core{
  fill:var(--kl-red-base);
  stroke:#fff5e9;
  stroke-width:1.4;
  filter:drop-shadow(0 0 4px var(--kl-red-glow));
}

.spiral-map-marker--selected .spiral-map-marker__ring,
.spiral-map-marker--selected .spiral-map-marker__stem{
  stroke:#fff5e9;
  stroke-width:1.7;
}

.spiral-map-marker--selected .spiral-map-marker__ring{
  fill:rgba(var(--kl-red-rgb),.24);
}

.spiral-map-marker--stripper circle{
  fill:rgba(var(--kl-red-rgb),.94);
  stroke:rgba(255,245,232,.95);
  stroke-width:1.2;
}

.spiral-map-marker--stripper .spiral-map-marker__ring{
  fill:rgba(255,245,232,.12);
  stroke:rgba(255,245,232,.98);
}

.spiral-map-marker--underside-member{
  opacity:.94;
}

.spiral-map-marker--topside-member{
  opacity:.94;
}

.spiral-map-underside-count{
  fill:#fff4ec;
  font-size:7.4px;
  font-weight:700;
  letter-spacing:.02em;
}

.spiral-map-tiptop circle{
  fill:#e8dfd1;
  stroke:rgba(14,16,18,.85);
  stroke-width:1;
}

.spiral-map-tiptop text{
  fill:rgba(222,214,202,.9);
  font-size:6.6px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transform:translateY(-9px);
}

.spiral-map-cluster{
  fill:rgba(214,208,196,.72);
  font-size:6.4px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.spiral-guide-rows{
  display:grid;
  gap:6px;
}

.spiral-guide-row{
  display:grid;
  gap:6px;
  padding:3px 7px;
  border-radius:11px;
  border:1px solid rgba(214,210,200,.14);
  background:rgba(255,255,255,.02);
  transition:border-color var(--micro-motion) ease,box-shadow var(--micro-motion) ease,background-color var(--micro-motion) ease;
}

.spiral-guide-row--expanded{
  border-color:rgba(var(--kl-red-rgb),.72);
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.1),rgba(255,255,255,.02));
  box-shadow:inset 3px 0 0 rgba(var(--kl-red-rgb),.7),inset 0 0 0 1px rgba(var(--kl-red-rgb),.18);
}

.spiral-guide-row--expanded .spiral-guide-row__summary strong{
  color:var(--text);
  text-shadow:0 0 10px rgba(var(--kl-red-rgb),.4);
}

.spiral-guide-row__summary{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto 14px;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:30px;
  padding:2px 1px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#f1eadf;
  text-align:left;
  cursor:pointer;
}

.spiral-guide-row__summary:focus-visible{
  outline:1px solid rgba(var(--kl-red-rgb),.72);
  outline-offset:2px;
}

.spiral-guide-row__summary strong{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

.spiral-guide-row__summary span{
  overflow:hidden;
  color:rgba(214,210,200,.72);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.spiral-guide-row__summary span:nth-of-type(2),
.spiral-guide-row__summary span:nth-of-type(3){
  color:#efe9de;
  font-size:10px;
  letter-spacing:.03em;
  text-transform:none;
}

.spiral-guide-row__summary span:nth-of-type(2){
  justify-self:end;
  text-align:right;
}

.spiral-guide-row__disclosure{
  justify-self:end;
  color:rgba(214,210,200,.58) !important;
  font-size:15px !important;
  line-height:1;
  text-align:center;
  transform:rotate(-90deg);
  transition:transform var(--micro-motion) ease,color var(--micro-motion) ease;
}

.spiral-guide-row--expanded .spiral-guide-row__disclosure{
  color:rgba(var(--kl-red-rgb),.92) !important;
  transform:rotate(0deg);
}

.spiral-guide-row__edit--collapsed{
  display:none;
}

#layoutScreen .guide-setup-stage{
  display:grid;
  gap:8px;
  border:var(--ds-stroke);
  border-radius:var(--ds-radius-lg);
  background:var(--ds-surface);
  padding:var(--ds-space-4);
}

#layoutScreen .guide-setup-stage__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

#layoutScreen .guide-setup-stage__head h4,
#layoutScreen .guide-setup-stage__title{
  margin:0;
  color:var(--ds-text-strong);
  font-size:12px;
  letter-spacing:.06em;
}

#layoutScreen .guide-setup-stage__reopen{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--ds-text-strong);
  text-align:left;
  cursor:pointer;
}

#layoutScreen .guide-setup-stage__copy{
  display:grid;
  gap:8px;
  min-width:0;
}

#layoutScreen .guide-setup-stage__copy .workshop-tool-note{
  margin:0;
  white-space:normal;
}

#layoutScreen .guide-setup-stage__chevron{
  width:7px;
  height:7px;
  flex-shrink:0;
  margin-right:3px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}

#layoutScreen .guide-setup-stage__reopen:hover{
  color:rgba(var(--kl-red-rgb),.92);
}

#layoutScreen .guide-setup-stage__reopen:focus-visible{
  outline:2px solid rgba(var(--kl-red-rgb),.8);
  outline-offset:4px;
}

#layoutScreen .guide-setup-stage__body{
  display:grid;
  gap:10px;
}

#layoutScreen .guide-setup-stage[hidden],
#layoutScreen .guide-setup-stage__body[hidden],
#layoutScreen .guide-setup-stage__head [hidden]{
  display:none;
}

#layoutScreen .guide-setup-stage__head button,
#layoutScreen .guide-setup-stage__body > button{
  min-height:44px;
}

#layoutScreen .guide-spacing-row--selected .spiral-guide-row__fields{
  grid-template-columns:minmax(0,1fr);
  gap:8px;
}

#layoutScreen .guide-spacing-row--selected .spiral-guide-row__fields :is(input,button){
  min-height:44px;
  font-size:16px;
}

#layoutScreen .guide-spacing-row--selected .spiral-guide-row__fields button{
  min-width:44px;
}

#layoutScreen .guide-spacing-row--selected .spiral-guide-row__offset{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  padding:8px;
  border:var(--ds-stroke);
  border-radius:var(--ds-radius-md);
}

#layoutScreen .guide-spacing-row--selected{
  scroll-margin-bottom:calc(122px + var(--safe-bottom));
}

.spiral-guide-row--stripper{
  border-color:rgba(var(--kl-red-rgb),.4);
  box-shadow:inset 0 0 0 1px rgba(var(--kl-red-rgb),.22);
}

.spiral-guide-row__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.spiral-guide-row__head strong{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#f1eadf;
}

.spiral-guide-row--stripper .spiral-guide-row__summary > span:first-of-type{
  color:rgba(var(--kl-red-rgb),.92);
  font-weight:700;
}

/* Secondary/informational only - the sacred longitudinal position stays in the summary row above. */
.spiral-guide-row__offset{
  margin:0;
  font-size:9px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(214,210,200,.72);
  overflow-wrap:anywhere;
}

.spiral-guide-row__fields{
  display:grid;
  gap:7px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.spiral-guide-row__fields--basic{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.spiral-guide-row__fields label{
  display:grid;
  gap:5px;
}

.spiral-guide-row__fields input{
  min-height:38px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.2);
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  padding:8px 9px;
  font-size:15px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.04),inset 0 -1px 2px rgba(0,0,0,.28);
}

.spiral-guide-row__fields input:focus{
  outline:1px solid rgba(var(--kl-red-rgb),.58);
  outline-offset:1px;
  border-color:rgba(var(--kl-red-rgb),.52);
  box-shadow:0 0 0 2px rgba(var(--kl-red-rgb),.16),inset 0 1px 1px rgba(255,255,255,.04),inset 0 -1px 2px rgba(0,0,0,.28);
}

.spiral-rotation-control{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
}

.spiral-rotation-control .layout-control-card__button{
  width:40px;
  height:40px;
  border-radius:11px;
}

.spiral-rotation-control__value-wrap{
  position:relative;
}

.spiral-rotation-control__value{
  width:100%;
  min-height:40px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.18);
  background:linear-gradient(180deg,#0e0f10 0%,#060707 100%);
  color:#f0e8dc;
  font-size:22px;
  font-weight:780;
  letter-spacing:-.02em;
  text-align:center;
  padding:0 22px 0 10px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.025),inset 0 -2px 3px rgba(0,0,0,.35);
}

.spiral-rotation-control__value:focus{
  outline:1px solid rgba(var(--kl-red-rgb),.58);
  outline-offset:1px;
  border-color:rgba(var(--kl-red-rgb),.5);
}

.spiral-rotation-control__unit{
  position:absolute;
  right:9px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:rgba(227,220,208,.78);
  pointer-events:none;
}

.spiral-guide-row__details{
  display:grid;
  gap:5px;
}

.spiral-guide-row__details div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:30px;
  padding:4px 7px;
  border-radius:8px;
  border:1px solid rgba(214,210,200,.09);
  background:rgba(255,255,255,.012);
}

#workshopToolsPanel .workshop-tool-launch,
#workshopToolDiameter,
#workshopToolGrip,
#workshopToolSpiral,
#workshopToolsPanel .workshop-tool-result,
#workshopToolsPanel .workshop-tool-details div{
  transition:background-color var(--ds-transition),border-color var(--ds-transition),box-shadow var(--ds-transition),transform var(--ds-transition),opacity var(--ds-transition);
}

#workshopToolsPanel .workshop-tool-launch:hover,
#workshopToolsPanel .workshop-tool-launch:focus-visible,
#workshopToolDiameter .workshop-tool-result:hover,
#workshopToolGrip .workshop-tool-result:hover{
  transform:translateY(-1px);
}

@media (max-width:640px){
  #workshopToolsPanel .workshop-tool-unit-row{
    grid-template-columns:1fr;
  }

  #workshopToolGrip .workshop-tool-unit-row[aria-label="Grip profile"]{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  #workshopToolDiameter .workshop-tool-fields--two,
  #workshopToolGrip .workshop-tool-fields--two{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #workshopToolDiameter,
  #workshopToolGrip,
  #workshopToolSpiral{
    gap:12px;
  }

  #workshopToolDiameter,
  #workshopToolGrip{
    gap:10px;
  }

  #workshopToolSpiral{
    gap:8px;
  }

  #workshopToolSpiral .workshop-tool-fields input{
    min-height:46px;
  }

  #workshopToolDiameter .workshop-tool-result,
  #workshopToolGrip .workshop-tool-result,
  #workshopToolSpiral .workshop-tool-result{
    min-height:58px;
  }

  #workshopToolSpiral .workshop-tool-unit-row,
  #workshopToolSpiral .spiral-guide-row__fields{
    grid-template-columns:1fr;
  }

  #workshopToolSpiral .workshop-tool-unit-row[data-spiral-method-row="true"],
  #workshopToolSpiral .workshop-tool-unit-row[data-spiral-direction-row="true"]{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #workshopToolSpiral .spiral-count-grid{
    grid-template-columns:1fr;
  }

  .spiral-mapper-visual__canvas svg{
    width:min(230px,100%);
  }

  .spiral-guide-row__summary{
    grid-template-columns:52px minmax(0,1fr) auto 12px;
    gap:6px;
    min-height:32px;
  }

  .spiral-guide-row__summary strong{
    font-size:10px;
  }

  .spiral-guide-row__summary span{
    font-size:8px;
  }

  .spiral-guide-row__summary span:nth-of-type(2),
  .spiral-guide-row__summary span:last-child{
    font-size:9px;
  }
}
/* K-Labs Studio — Supabase sign-in screen */

#authScreen {
  min-height: 100vh;
  padding: 32px 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.035), transparent 34%),
    #050607;
  color: #f1eee7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

#authScreen h1 {
  margin: 0 0 10px;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

#authScreen > p:first-of-type {
  margin: 0 0 34px;
  color: rgba(241, 238, 231, 0.62);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-align: center;
}

#authScreen label {
  width: min(100%, 420px);
  display: block;
  margin-bottom: 18px;
  color: rgba(241, 238, 231, 0.72);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#authScreen .auth-password-field{
  width:min(100%,420px);
  margin-bottom:18px;
}

#authScreen .auth-password-label{
  width:100%;
  margin-bottom:8px;
}

#authScreen input {
  width: 100%;
  margin-top: 8px;
  padding: 15px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: #0b0d0f;
  color: #f1eee7;
  font: inherit;
  outline: none;
}

#authScreen input:focus {
  border-color: rgba(184, 35, 57, 0.95);
  box-shadow: 0 0 0 1px rgba(184, 35, 57, 0.3);
}

#authSignIn {
  width: min(100%, 420px);
  margin-top: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, #c23349 0%, #8d182d 100%);
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

#authMessage {
  width: min(100%, 420px);
  min-height: 20px;
  margin: 14px 0 0;
  color: rgba(241, 238, 231, 0.68);
  font-size: 13px;
  text-align: center;
}

body:has(#authScreen[style*="block"]) #app,
body:has(#authScreen[style*="block"]) .bottom-nav,
body:has(#authScreen[style*="block"]) .carbon-field {
  display: none !important;
}
/* Force login to behave as its own full-screen Studio view */
#authScreen.screen.active {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width:639px){
  .studio-component-details__fields.quote-component-row__fields{
    grid-template-columns:1fr;
    gap:8px;
  }

  .studio-component-details__fields .studio-component-details__field--full{
    grid-column:1;
  }
}

body.klabs-logged-out .bottom-nav {
  display: none !important;
}
#authScreen {
  display: flex;
}

#authScreen[style*="display: none"] {
  display: none !important;
}

/* Initial Supabase session check: show neither login nor Studio yet */
body.klabs-auth-resolving #authScreen,
body.klabs-auth-resolving #app,
body.klabs-auth-resolving .bottom-nav,
body.klabs-auth-resolving .carbon-field {
  display: none !important;
}

body.klabs-auth-resolving {
  background: #050607;
}

body.klabs-auth-resolving::after {
  content: "";
  position: fixed;
  inset: 0;
  background: #050607;
  z-index: 10000;
}

/* Keep desktop navigation inside the viewport; mobile retains its safe-area layout. */
@media (min-width:1024px){
  .bottom-nav {
    left: max(24px, env(safe-area-inset-left, 0px));
    right: max(24px, env(safe-area-inset-right, 0px));
    width: auto !important;
    max-width: 1112px;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }
}

.settings-account-card__actions {
  display: flex;
  justify-content: flex-start;
}

.settings-signout-button {
  color: rgba(241, 238, 231, 0.72);
  letter-spacing: 0.1em;
}

.settings-signout-button:hover {
  color: #f1eee7;
}

#authScreen .auth-password-wrap{
  position:relative;
  width:100%;
}

#authScreen .auth-password-wrap input{
  margin-top:0;
  padding-right:54px;
}

#authScreen #authTogglePassword{
  position:absolute;
  top:50%;
  right:8px;
  width:40px;
  height:40px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:rgba(241,238,231,.72);
  font-size:16px;
  cursor:pointer;
}

#authScreen #authTogglePassword:hover,
#authScreen #authTogglePassword:focus-visible{
  background:rgba(255,255,255,.06);
  color:#f1eee7;
  outline:none;
}

#authScreen #authForgotPassword{
  display:block;
  margin:8px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(241,238,231,.68);
  font:inherit;
  font-size:12px;
  text-align:left;
  cursor:pointer;
}

#authScreen #authForgotPassword:hover,
#authScreen #authForgotPassword:focus-visible{
  color:#f1eee7;
  outline:none;
}

/* Add New Customer: the shared sheet body and design-system padding rules below
   were winning the cascade and pinning CREATE CUSTOMER below the fold on iPhone. */
.component-sheet__panel.customer-finder__panel{
  max-height:min(100%,var(--component-sheet-panel-max-height,min(92dvh,760px)));
}

.component-sheet__body.customer-finder__body{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--customer-finder-keyboard-inset,0px));
}

#customerFinderSheet .component-sheet__body.customer-finder__body:has(#customerFinderSearchBlock:not([hidden])):has(#customerFinderRootView:not([hidden])){
  overflow:hidden;
}

#customerFinderSheet #customerFinderSearchBlock{
  grid-template-rows:minmax(0,1fr);
  min-width:0;
  min-height:0;
}

#customerFinderSheet .customer-finder__root-view{
  grid-template-rows:auto auto minmax(0,1fr);
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

#customerFinderSheet .customer-finder__list{
  box-sizing:border-box;
  width:100%;
  height:auto;
  max-height:none;
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y pinch-zoom;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}

.customer-finder__body .customer-finder__new-form{
  flex:0 0 auto;
  padding-bottom:calc(28px + env(safe-area-inset-bottom,0px) + var(--customer-finder-keyboard-inset,0px));
}

.customer-finder__body .customer-finder__new-form-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  margin-top:10px;
}

.customer-finder__body .customer-finder__new-form-actions .primary-action,
.customer-finder__body .customer-finder__new-form-actions .ghost-action{
  width:100%;
  min-height:48px;
}

.customer-finder__body .customer-finder__new-form-actions .primary-action{
  order:-1;
}

.customer-finder__body .customer-finder__new-form-actions .primary-action.is-saved{
  opacity:1;
  border-color:rgba(122,186,126,.55);
  background:linear-gradient(180deg,rgba(46,110,58,.96),rgba(28,72,38,.96));
  color:#eaf6e9;
}

@media (max-width:760px){
  .customer-finder__new-form{
    gap:6px;
  }

  .customer-finder__new-form label{
    gap:3px;
  }

  .customer-finder__new-form input,
  .customer-finder__new-form textarea{
    min-height:38px;
    padding:6px 9px;
  }

  .customer-finder__new-form label span{
    font-size:9px;
    letter-spacing:.08em;
  }

  .customer-finder__body .customer-finder__new-form{
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px) + var(--customer-finder-keyboard-inset,0px));
  }

  .customer-finder__body .customer-finder__new-form-actions{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    margin-top:6px;
  }

  .customer-finder__body .customer-finder__new-form-actions .primary-action{
    order:0;
  }

  #customerEditSheet .component-sheet__body{
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
}

/* Component Add/Edit field balance: hierarchy and details use the library width while prices stay compact.
  Keep at the end because shared cost-field and responsive rules otherwise override this form. */
.studio-component-details__fields.quote-component-row__fields{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  align-items:start;
}

.studio-component-details__fields.quote-component-row__fields > label{
  grid-column:span 3;
}

.studio-component-details__fields.quote-component-row__fields > label:first-child:not(.quote-component-field--cost),
.studio-component-details__fields.quote-component-row__fields > .studio-component-details__field--full{
  grid-column:1 / -1;
}

.studio-component-details__fields.quote-component-row__fields > .quote-component-field--cost{
  grid-column:span 2;
  justify-self:stretch;
  width:auto;
  max-width:none;
}

/* With stock tracking off only Buy/Sell remain, so widen them instead of trailing an empty cell. */
.studio-component-details__fields.quote-component-row__fields:not(:has(#studioComponentStockOnHand)) > .quote-component-field--cost{
  grid-column:span 3;
}

.studio-component-details__fields.quote-component-row__fields > .quote-component-field--cost input{
  max-width:none;
}

@media (max-width:639px){
  .studio-component-details__fields.quote-component-row__fields{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:9px;
  }
  .studio-component-details__fields.quote-component-row__fields > label{
    grid-column:1 / -1;
  }
  .studio-component-details__fields.quote-component-row__fields > .quote-component-field--cost{
    grid-column:span 2;
  }
  .studio-component-details__fields.quote-component-row__fields:not(:has(#studioComponentStockOnHand)) > .quote-component-field--cost{
    grid-column:span 3;
  }
  .studio-component-details__fields.quote-component-row__fields > .quote-component-field--cost input{
    padding-left:8px;
    padding-right:8px;
  }
}

/* Keep Add Size / Generate Range and the save row clear of the floating bottom nav. */
@media (max-width:760px){
  .studio-component-details{
    padding-bottom:calc(24px + var(--safe-bottom));
  }
  .studio-size-section{
    margin-bottom:14px;
  }
}

@media (max-width:420px){
  #studioComponentDetails .studio-size-list{
    grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  }
}

/* Rod Build Layout: side view generated from build data, butt end left to tip right. */
#workshopScreen .rod-layout__prompts{
  display:grid;
  border-top:1px solid rgba(214,210,200,.1);
}

#workshopScreen .rod-layout__prompt{
  display:grid;
  gap:4px;
  padding:9px 0;
  border-bottom:1px solid rgba(214,210,200,.07);
}

#workshopScreen .rod-layout__prompt:last-child{
  border-bottom:0;
  padding-bottom:2px;
}

#workshopScreen .rod-layout__prompt > strong{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#f2ede4;
}

#workshopScreen .rod-layout__prompt > span{
  font-size:11px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.01em;
  text-transform:none;
  color:rgba(214,210,200,.7);
}

#workshopScreen .rod-layout__prompt > .rod-layout__choice,
#workshopScreen .rod-layout__prompt > .guide-specification__edit{
  margin-top:4px;
  justify-self:start;
}

#workshopScreen .rod-layout__length{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 10px;
  margin-top:6px;
  font-size:11px;
  color:rgba(214,210,200,.7);
}

#workshopScreen .rod-layout__length strong{
  margin-left:4px;
  color:#f2ede4;
  font-variant-numeric:tabular-nums;
}

#workshopScreen .rod-layout__length .guide-specification__edit{
  min-height:44px;
}

#workshopScreen .rod-layout__choice{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  justify-self:stretch !important;
  border:1px solid rgba(214,210,200,.2);
  border-radius:8px;
  overflow:hidden;
}

#workshopScreen .rod-layout__choice button{
  min-height:36px;
  padding:4px 6px;
  border:0;
  border-left:1px solid rgba(214,210,200,.14);
  background:transparent;
  color:rgba(223,216,205,.82);
  font-size:9px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

#workshopScreen .rod-layout__choice button:first-child{
  border-left:0;
}

#workshopScreen .rod-layout__choice button[aria-pressed="true"]{
  background:rgba(var(--kl-red-rgb),.14);
  color:#fff4ec;
  box-shadow:inset 0 -1px 0 rgba(var(--kl-red-rgb),.85);
}

#workshopScreen .rod-layout__readout-edit{
  display:grid;
  gap:6px;
  padding-top:4px;
}

#workshopScreen .rod-layout__intro{
  font-size:11px;
  line-height:1.4;
  color:rgba(214,210,200,.7);
}

#workshopScreen .rod-layout__ghost svg{
  display:block;
  width:100%;
  height:24px;
}

#workshopScreen .rod-layout .rl-ghost,
#workshopScreen .rod-layout .rl-ghost-end{
  stroke:rgba(214,210,200,.32);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

#workshopScreen .rod-layout .rl-ghost{
  stroke-dasharray:4 5;
}

#workshopScreen .rod-layout__scale strong{
  font-size:12px;
  color:#f5efe5;
  font-variant-numeric:tabular-nums;
}

#workshopScreen .rod-layout__quiet{
  font-size:10px;
  line-height:1.4;
  color:rgba(214,210,200,.55);
}

#workshopScreen .rod-layout__readout-main{
  margin:0;
  font-size:13px;
  line-height:1.35;
  color:#f5efe5;
  font-variant-numeric:tabular-nums;
}

#workshopScreen .rod-layout__readout-note{
  margin:-3px 0 0;
  font-size:10px;
  line-height:1.4;
  color:rgba(214,210,200,.62);
}

#workshopScreen .rod-layout{
  display:grid;
  gap:7px;
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(214,210,200,.2);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

#workshopScreen .rod-layout > *{
  min-width:0;
  margin:0;
}

#workshopScreen .rod-layout__scale,
#workshopScreen .rod-layout__readout-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

#workshopScreen .rod-layout__scale span{
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(214,210,200,.6);
}

#workshopScreen .rod-layout__overview{
  position:relative;
  padding-bottom:5px;
}

#workshopScreen .rod-layout__overview svg{
  display:block;
  width:100%;
  height:40px;
}

#workshopScreen .rod-layout__range{
  position:absolute;
  bottom:0;
  height:4px;
  border:1px solid rgba(232,226,214,.55);
  border-top:0;
  pointer-events:none;
  transition:left 80ms linear,width 80ms linear;
}

#workshopScreen .rod-layout__scale{
  margin-top:-3px;
}

#workshopScreen .rod-layout__detail{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(214,210,200,.22) transparent;
  border-bottom:1px solid rgba(214,210,200,.1);
}

#workshopScreen .rod-layout__detail svg{
  display:block;
  max-width:none;
}

#workshopScreen .rod-layout .rl-base{
  stroke:rgba(232,226,214,.62);
  stroke-width:1.2;
}

#workshopScreen .rod-layout .rl-end,
#workshopScreen .rod-layout .rl-tip{
  stroke:rgba(232,226,214,.8);
  stroke-width:1.2;
}

#workshopScreen .rod-layout .rl-ruler{
  stroke:rgba(214,210,200,.24);
  stroke-width:1;
}

#workshopScreen .rod-layout .rl-ruler-label{
  fill:rgba(214,210,200,.5);
  font-size:8px;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

#workshopScreen .rod-layout .rl-span{
  fill:rgba(214,210,200,.1);
  stroke:rgba(232,226,214,.58);
  stroke-width:1;
}

#workshopScreen .rod-layout .rl-span--seat{
  fill:rgba(214,210,200,.14);
  stroke:rgba(240,234,222,.8);
}

#workshopScreen .rod-layout .rl-span--cap{
  fill:rgba(214,210,200,.2);
}

#workshopScreen .rod-layout .rl-point,
#workshopScreen .rod-layout .rl-guide{
  stroke:rgba(232,226,214,.78);
  stroke-width:1.3;
  stroke-linecap:round;
}

#workshopScreen .rod-layout .rl-guide--stripper{
  stroke:#f5efe5;
  stroke-width:1.6;
}

#workshopScreen .rod-layout .rl-label{
  fill:rgba(214,210,200,.66);
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
}

#workshopScreen .rod-layout .rl-label--guide{
  letter-spacing:.04em;
}

#workshopScreen .rod-layout svg line,
#workshopScreen .rod-layout svg rect{
  vector-effect:non-scaling-stroke;
}

#workshopScreen .rod-layout .rl-hit{
  fill:transparent;
  stroke:none;
}

#workshopScreen .rod-layout .rl-item{
  cursor:pointer;
  outline:none;
}

#workshopScreen .rod-layout .rl-item:focus-visible .rl-hit{
  fill:rgba(255,255,255,.05);
}

#workshopScreen .rod-layout .rl-item.is-selected .rl-span{
  fill:rgba(var(--kl-red-rgb),.14);
  stroke:rgba(var(--kl-red-rgb),.95);
}

#workshopScreen .rod-layout .rl-item.is-selected .rl-point,
#workshopScreen .rod-layout .rl-item.is-selected .rl-guide,
#workshopScreen .rod-layout .rl-item.is-selected .rl-tip{
  stroke:var(--kl-red-active);
  stroke-width:2;
}

#workshopScreen .rod-layout .rl-item.is-selected .rl-label{
  fill:#fff4ec;
}

#workshopScreen .rod-layout__readout{
  display:grid;
  gap:6px;
  padding:7px 0 0 9px;
  border-top:1px solid rgba(214,210,200,.1);
  box-shadow:inset 2px 0 0 rgba(var(--kl-red-rgb),.8);
}

#workshopScreen .rod-layout__readout-head strong{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#f5efe5;
}

#workshopScreen .rod-layout__readout-head .guide-specification__edit{
  min-height:28px;
}

#workshopScreen .rod-layout__notice{
  font-size:10px;
  line-height:1.4;
  color:rgba(232,226,214,.82);
}

/* Active Build: same-family components share one row; individual items open inside it on fine dividers. */
#workshopComponentsSection .quote-component-group__sizes{
  color:#a7ac9f;
  font-size:11px;
  letter-spacing:.02em;
  line-height:1.35;
  font-variant-numeric:tabular-nums;
}

#workshopComponentsSection .quote-component-group__children{
  display:grid;
  margin:0 10px 6px;
  border-top:1px solid rgba(214,210,200,.1);
}

#workshopComponentsSection .quote-component-group__children .quote-component-row{
  border:0;
  border-bottom:1px solid rgba(214,210,200,.07);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#workshopComponentsSection .quote-component-group__children .quote-component-row:last-child{
  border-bottom:0;
}

#workshopComponentsSection .quote-component-group__children .quote-component-row__summary{
  padding:9px 2px;
}

/* AVAILABLE SIZES: flatter chips and a clearer range action, confined to the editor. */
#studioComponentDetails .studio-size-section{
  margin:6px 0 8px;
  padding:8px 9px 8px;
}

#studioComponentDetails .studio-size-section__summary{
  font-size:10px;
  letter-spacing:.09em;
}

#studioComponentDetails .studio-size-section__help{
  margin:4px 0 5px;
  font-size:10px;
  line-height:1.35;
}

#studioComponentDetails .studio-size-list{
  gap:4px;
  margin-bottom:6px;
}

#studioComponentDetails .studio-size-chip{
  box-sizing:border-box;
  grid-template-columns:minmax(0,1fr) 32px;
  height:34px;
  min-height:34px;
  gap:0;
  padding:0 0 0 6px;
  border-color:rgba(214,210,200,.12);
  border-radius:4px;
  background:rgba(255,255,255,.016);
}

#studioComponentDetails .studio-size-chip__remove{
  width:32px;
  height:32px;
  border-radius:3px;
}

#studioComponentDetails .studio-size-entry{
  gap:6px;
  align-items:end;
}

#studioComponentDetails .studio-size-entry input{
  box-sizing:border-box;
  height:40px;
  min-height:40px;
  border-radius:6px;
}

#studioComponentDetails .studio-size-entry__btn{
  box-sizing:border-box;
  height:40px;
  min-height:40px;
  padding:0 12px;
  border-radius:6px;
  font-size:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#studioComponentDetails .studio-size-range{
  gap:6px;
  margin-top:6px;
}

#studioComponentDetails .studio-size-range .quote-component-field{
  gap:4px;
}

#studioComponentDetails .studio-size-range__btn{
  min-height:40px;
  border:1px solid rgba(214,210,200,.2);
  border-radius:6px;
  background:rgba(255,255,255,.035);
  color:#e6dece;
  font-size:10px;
  letter-spacing:.07em;
  box-shadow:none;
}

#workshopComponentsSection .quote-component-group__children .quote-component-row__summary-item{
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

#workshopComponentsSection .quote-component-group__children .quote-component-row.is-expanded{
  box-shadow:inset 2px 0 0 rgba(var(--kl-red-rgb),.8);
}

#workshopComponentsSection .quote-component-group__children .quote-component-row.is-expanded .quote-component-row__summary{
  padding-left:10px;
}

#workshopComponentsSection .quote-component-group.is-expanded .quote-component-group__children .quote-component-row:not(.is-expanded) .quote-component-row__disclosure{
  color:#99a196;
  transform:rotate(0deg);
}

.quote-component-field[hidden]{
  display:none;
}

.quote-component-picker__path{
  display:block;
  margin-top:2px;
  font-size:9px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.02em;
  color:#8d9088;
}

.quote-component-row__add-details{
  grid-column:1/-1;
  justify-self:start;
  padding:2px 0;
  border:0;
  background:none;
  color:#8d9088;
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}

.quote-component-row__add-details:hover,
.quote-component-row__add-details:focus-visible{
  color:#d7d0c3;
  outline:none;
}

.quote-component-row__add-details[hidden]{
  display:none;
}

.explicit-save-feedback{
  position:fixed;
  z-index:1000;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  padding:10px 14px;
  border:1px solid rgba(214,210,200,.24);
  border-radius:8px;
  background:#101416;
  color:#ddd6ca;
  font-size:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.26);
}
.explicit-save-feedback[hidden]{display:none}
.explicit-save-feedback span{min-width:0;overflow-wrap:anywhere}
.explicit-save-feedback[data-state="error"]{border-color:rgba(166,70,80,.5);color:#e4aeb4}
.explicit-save-feedback .ghost-action{min-height:34px;padding:0 10px;font-size:11px;flex:none}

/* Final component-editor control sizing after legacy responsive overrides. */
#studioComponentsPanel .studio-component-rename-trigger{
  min-height:44px;
}

#studioComponentsPanel .studio-component-rename-editor input,
#studioComponentsPanel .studio-component-rename-editor button{
  min-height:44px;
  border-radius:6px;
}

#studioComponentDetails .studio-component-details__fields input,
#studioComponentDetails .studio-component-details__fields select,
#studioComponentDetails .studio-component-details__fields textarea{
  min-height:44px;
  border-radius:6px;
  box-sizing:border-box;
}

#studioComponentDetails .studio-component-details__fields textarea{
  min-height:68px;
}

#studioComponentDetails .studio-component-details__fields .quote-component-field--cost{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
}

#studioComponentDetails .studio-component-details__fields .quote-component-field--cost > span{
  font-size:9.5px;
  letter-spacing:.04em;
  white-space:nowrap;
}

#studioComponentDetails .studio-size-list{
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
}

#studioComponentDetails .studio-size-chip{
  grid-template-columns:minmax(0,1fr) 44px;
  min-height:46px;
  height:46px;
}

#studioComponentDetails .studio-size-chip__remove{
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
}

#studioComponentDetails .studio-size-entry input,
#studioComponentDetails .studio-size-entry__btn{
  height:46px;
  min-height:46px;
  box-sizing:border-box;
}

#studioComponentDetails .studio-size-entry input{
  border-radius:6px;
}

#studioComponentDetails .studio-size-range input,
#studioComponentDetails .studio-size-range__btn{
  height:44px;
  min-height:44px;
  border-radius:6px;
  box-sizing:border-box;
}

#studioComponentDetails .studio-size-entry__btn{
  padding:0 8px;
  border-radius:var(--ds-radius-md,10px);
  font-size:10px;
  letter-spacing:0;
  line-height:1.15;
  text-align:center;
}

@media (max-width:639px){
  #studioComponentDetails .studio-component-details__fields .quote-component-field--cost{
    grid-template-columns:1fr;
    gap:5px;
  }
}

.studio-component-brand-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:6px;
  width:100%;
  min-width:0;
}

.studio-component-brand-control .studio-component-details__select-wrap{
  min-width:0;
}

#studioComponentManageBrandsBtn{
  min-width:72px;
  min-height:44px;
  height:44px;
  padding:0 9px;
  border-radius:6px;
  font-size:9px;
  letter-spacing:.02em;
  white-space:nowrap;
}

.studio-brand-manager .component-sheet__header h2{
  margin:0;
  color:#f1ebdf;
  font-size:14px;
  line-height:1.2;
}

.studio-brand-manager .component-sheet__close{
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  border-radius:6px;
}

.studio-brand-manager{
  max-width:420px;
}

.studio-brand-manager__fields{
  display:grid;
  gap:10px;
  width:100%;
  min-width:0;
}

.studio-brand-manager__fields input{
  width:100%;
  min-width:0;
  min-height:44px;
  box-sizing:border-box;
  border:1px solid rgba(214,210,200,.2);
  border-radius:6px;
  background:#080a0b;
  color:#f5efe5;
  padding:0 10px;
  font-size:13px;
}

.studio-brand-manager__list{
  display:grid;
  gap:8px;
}

.studio-brand-manager .studio-components-list__item,
#studioBrandManagerAddBtn{
  min-height:44px;
  border-radius:6px;
  overflow-wrap:anywhere;
}

.studio-brand-manager .studio-components-list__menu-trigger{
  width:44px;
  height:44px;
  min-height:44px;
  border-radius:6px;
}

.studio-brand-manager .studio-components-list__item strong{
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:0;
}

.studio-brand-manager__tick{
  flex:none;
  color:var(--ds-text-muted,#9aa096);
}

.studio-brand-manager__actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
}

.studio-brand-manager__actions button{
  width:100%;
  min-width:0;
  height:44px;
  min-height:44px;
  padding:0 8px;
  border-radius:6px;
  font-size:10px;
  letter-spacing:.02em;
  line-height:1.15;
  white-space:normal;
  overflow-wrap:anywhere;
}

.studio-brand-manager__message{
  min-height:18px;
  margin:0;
  color:var(--ds-text-muted,#9aa096);
  font-size:11px;
  line-height:1.4;
}

.studio-brand-manager__message[data-state="error"]{
  color:#e4aeb4;
}

.studio-brand-manager__message[data-state="saved"]{
  color:#d9d2c5;
}

#choicePickerBrandFilter{
  min-height:44px;
  border-radius:8px;
  padding-right:30px;
}

.studio-component-duplicate__modes,
.studio-component-duplicate__actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
  min-width:0;
}

.studio-component-duplicate__modes button,
.studio-component-duplicate__actions button{
  width:100%;
  min-width:0;
  height:44px;
  min-height:44px;
  box-sizing:border-box;
  padding:0 9px;
  border-radius:8px;
  font-size:10px;
  letter-spacing:.02em;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}

.studio-component-duplicate__modes button.active{
  border-color:rgba(var(--kl-red-rgb),.62);
  background:rgba(var(--kl-red-rgb),.14);
  color:#fff1ec;
}

.studio-component-duplicate__note,
.studio-component-duplicate__status{
  min-height:18px;
  margin:0;
  color:var(--ds-text-muted,#9aa096);
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.studio-component-duplicate__status[data-state="error"]{
  color:#e4aeb4;
}

.studio-custom-select-picker .component-sheet__close{
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  border-radius:7px;
}

.studio-custom-select-picker__list{
  flex:0 1 auto;
  max-height:min(58dvh,480px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

.studio-native-select-source,
.studio-native-datalist-source{
  display:none!important;
}

.studio-custom-select-host{
  display:block;
  position:relative;
  width:100%;
  min-width:0;
}

.studio-component-details__select-wrap.studio-custom-select-host::after{
  display:none;
}

.studio-custom-select-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  height:44px;
  min-height:44px;
  min-width:0;
  padding:0 11px;
  border:1px solid rgba(214,210,200,.2);
  border-radius:6px;
  background:linear-gradient(180deg,#111618,#090c0d);
  color:#d9d3c7;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.2;
  text-align:left;
  text-transform:none;
  white-space:normal;
  overflow:hidden;
}

.studio-custom-select-trigger__value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.studio-custom-select-trigger b{
  flex:0 0 auto;
  color:rgba(var(--kl-red-active-rgb),.85);
  font-size:12px;
  font-weight:700;
}

.studio-custom-select-trigger:hover,
.studio-custom-select-trigger:focus-visible,
.studio-custom-select-trigger[aria-expanded="true"]{
  border-color:rgba(var(--kl-red-rgb),.62);
  background:linear-gradient(180deg,#171719,#0d0f10);
  color:#f5efe5;
  outline:none;
  box-shadow:0 0 0 2px rgba(var(--kl-red-rgb),.16);
}

.studio-custom-select-trigger:disabled{
  opacity:.56;
  cursor:not-allowed;
}

.studio-custom-select-picker .component-sheet__panel{
  --component-sheet-panel-max-width:min(92dvw,620px);
  --component-sheet-panel-max-height:min(calc(100dvh - 24px),680px);
}

.studio-custom-select-picker__list{
  flex:0 1 auto;
  max-height:min(58dvh,480px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

.studio-custom-select-picker__list .component-sheet__option{
  min-height:44px;
  border-radius:7px;
}

.studio-custom-select-picker__actions{
  display:flex;
  justify-content:flex-end;
  padding-top:2px;
}

.studio-custom-select-picker__actions button{
  min-width:88px;
  min-height:44px;
  padding:0 14px;
  border-radius:7px;
}

.studio-custom-select-picker__list .component-sheet__option.is-selected{
  border-color:rgba(var(--kl-red-rgb),.6);
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.18),rgba(16,10,12,.92));
  color:#f7efe4;
}
/* Confirmation always stacks above other sheets (e.g. customer history) and keeps 44px targets. */
#confirmSheet{z-index:200}
#confirmSheet .quote-preview-actions button,
#confirmSheet .component-sheet__close{min-height:44px;min-width:44px}

/* Inline completion status for Update Library Component: subdued success, restrained red error. */
.quote-component-row__library-status{display:flex;align-items:center;gap:10px;min-width:0}
.quote-component-row__library-status[data-state]:not([data-state=""]){margin-top:8px;padding:8px 12px;border:1px solid rgba(214,210,200,.24);border-radius:8px;background:#101416;color:#ddd6ca;font-size:12px}
.quote-component-row__library-status[data-state="success"]{letter-spacing:.07em;color:rgba(214,210,200,.82)}
.quote-component-row__library-status[data-state="error"]{border-color:rgba(166,70,80,.5);color:#e4aeb4}
.quote-component-row__library-status span{min-width:0;overflow-wrap:anywhere}
.quote-component-row__actions .quote-component-row__library-retry,
.quote-component-row__library-retry{min-height:44px;min-width:44px;padding:0 12px;flex:none}

/* Native sign-in form wrapper keeps the existing centred column layout. */
#authScreen .auth-form{display:contents}
#authScreen .auth-form[hidden],#authScreen .auth-link-button[hidden]{display:none}
#authScreen #authSignUp{
  width:min(100%,420px);margin-top:4px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);
  border-radius:14px;background:linear-gradient(180deg,#c23349 0%,#8d182d 100%);color:#fff;font:inherit;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
}
#authScreen [aria-disabled="true"]{opacity:.6;pointer-events:none}
#authScreen .auth-link-button{
  min-height:44px;margin-top:10px;padding:0 12px;border:0;background:transparent;
  color:rgba(241,238,231,.72);font:inherit;font-size:13px;cursor:pointer;
}
#authScreen .auth-link-button:hover,#authScreen .auth-link-button:focus-visible{color:#f1eee7;outline:none}
#authScreen input{font-size:16px}

/* Compact Account card: sync status left, actions right on one row; wraps only when space runs out. */
#settingsScreen .settings-account-card__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  margin-top:8px;
}
#settingsScreen .settings-account-card__row > .settings-field-note{
  flex:1 1 11rem;
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
}
#settingsScreen .settings-account-card__row > .settings-field-note[hidden]{display:none}
#settingsScreen .settings-disclosure > .settings-account-card__row > .settings-account-card__actions{
  margin:0 0 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
#settingsScreen .settings-account-card__row .settings-signout-button{
  min-height:44px;
  min-width:44px;
  padding:0 14px;
}
#settingsScreen .settings-account-card__row .settings-signout-button:focus-visible{
  outline:2px solid rgba(214,210,200,.62);
  outline-offset:2px;
}

.component-sheet__add.component-sheet__add--create{
  min-height:44px;
  margin:0 0 8px;
  text-align:center;
}

/* Compact expanded component editor (build/quote editor only; Studio library editor is untouched). */
#quoteComponentsList .quote-component-row__editor{
  gap:6px;
  padding:0 8px 8px;
}

#quoteComponentsList .quote-component-row__fields{
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:6px;
  align-items:end;
}

#quoteComponentsList .quote-component-row__fields > .quote-component-field--category,
#quoteComponentsList .quote-component-row__fields > .quote-component-field--description,
#quoteComponentsList .quote-component-row__fields > .quote-component-field--supplier,
#quoteComponentsList .quote-component-row__fields > .quote-component-row__add-details{
  grid-column:1/-1;
}

#quoteComponentsList .quote-component-row__fields > .quote-component-field--quantity,
#quoteComponentsList .quote-component-row__fields > .quote-component-field--cost{
  grid-column:auto;
  justify-self:stretch;
  width:auto;
  max-width:none;
}

#quoteComponentsList .quote-component-row__fields > .quote-component-field--cost input{
  max-width:none;
  min-height:44px;
  padding-inline:4px;
}

#quoteComponentsList .component-quantity{
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:2px;
}

#quoteComponentsList .quote-component-row .component-quantity__step,
#quoteComponentsList .quote-component-row .component-quantity__value{
  min-height:44px;
}

#quoteComponentsList .quote-component-row .component-quantity__value{
  padding-inline:2px;
  min-width:0;
  font-size:16px;
}

#quoteComponentsList .quote-component-row__actions{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:6px;
}

#quoteComponentsList .quote-component-row__actions .ghost-action{
  min-height:44px;
  height:100%;
  padding:0 6px;
  font-size:10px;
  line-height:1.15;
  overflow-wrap:anywhere;
}

#quoteComponentsList .quote-component-row__actions .quote-component-row__delete{
  border-color:rgba(173,37,49,.3)!important;
  background:rgba(70,17,23,.18)!important;
  color:#d9b9bd!important;
}

@media (max-width:380px){
  #quoteComponentsList .quote-component-row__fields{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  #quoteComponentsList .quote-component-row__fields > .quote-component-field--quantity{
    grid-column:1/-1;
  }
}

/* Components Library browsing: compact component rows and grouped top actions */
.studio-components-shell__controls{grid-template-columns:minmax(0,1fr);gap:8px}
.studio-components-shell__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.studio-components-shell__actions>button{min-height:44px;height:44px;width:100%;margin:0;padding:0 10px;box-sizing:border-box}
.studio-components-shell__actions>button[hidden]{display:none}
.studio-components-list__row--component{
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:center;gap:0;
  border:var(--ds-stroke);border-radius:var(--ds-radius-md);background:var(--ds-surface);
}
.studio-components-list__row--component .studio-components-list__item{
  border:0;background:transparent;border-radius:var(--ds-radius-md);padding:7px 4px 7px 10px;min-width:0;
}
.studio-components-list__row--component .studio-components-list__item.is-active{box-shadow:none}
.studio-components-list__row--component:has(.studio-components-list__item.is-active){
  border-color:rgba(var(--kl-red-rgb),.64);box-shadow:0 0 0 1px rgba(var(--kl-red-rgb),.28) inset;
}
.studio-components-list__row--component .studio-components-list__item strong{overflow-wrap:anywhere;line-height:1.25}
.studio-components-list__row--component .studio-components-list__item span{margin-top:2px;overflow-wrap:anywhere}
.studio-components-list__row--component .studio-components-price-row{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:2px}
.studio-components-list__row--component .studio-components-price{padding:0;border:0;background:transparent;border-radius:0;margin:0;font-size:11px}
.studio-components-list__row--component .studio-components-list__menu-trigger{border:0;background:transparent;width:44px;min-width:44px;align-self:stretch}

/* Build Details: Rear / Fore / Lower grip lengths in one equal row (stacked at equal width when narrow) */
#workshopScreen .build-details__grips{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  align-items:start;
}
#workshopScreen .build-details__grips label{min-width:0}
#workshopScreen .build-details__grips input{
  min-height:44px;
  padding:0 8px;
  box-sizing:border-box;
}
#workshopScreen .build-details__grip-note{
  font-size:10px;
  line-height:1.3;
  color:rgba(214,210,200,.62);
}
@media (max-width:359px){
  #workshopScreen .build-details__grips{grid-template-columns:minmax(0,1fr)}
}

#workshopScreen .build-details__finished-length{
  display:grid;
  gap:4px;
}
#workshopScreen .build-details__finished-length input{
  min-height:44px;
  box-sizing:border-box;
}
#workshopScreen .build-details__finished-length input[aria-invalid="true"]{
  border-color:rgba(var(--kl-red-rgb),.85);
}
#workshopScreen .build-details__unit{
  font-style:normal;
  color:rgba(214,210,200,.62);
  text-transform:none;
  letter-spacing:.04em;
}
#workshopScreen .build-details__length-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 10px;
  font-size:11px;
  line-height:1.4;
  text-transform:none;
  letter-spacing:normal;
  color:rgba(214,210,200,.68);
}
#workshopScreen .build-details__length-note.is-error{color:#ff9d8a}
#workshopScreen .build-details__length-note.is-warning{color:#f0c674}
#workshopScreen .build-details__length-confirm{
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(var(--kl-red-rgb),.6);
  border-radius:8px;
  background:rgba(var(--kl-red-rgb),.12);
  color:#fff4ec;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

/* Components Library editor: compact heading, tighter rhythm, flatter size chips. */
#studioComponentsPanel.studio-components-shell{
  gap:8px;
}
#studioComponentsPanel .studio-components-shell__head{
  gap:2px;
}
#studioComponentsPanel .studio-components-shell__intro{
  min-width:0;
}
#studioComponentsPanel .studio-components-shell__identity{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin:0;
}
#studioComponentsPanel .studio-components-shell__identity h1{
  flex:1 1 0;
  min-width:0;
  margin:0;
  font-size:24px;
  line-height:1.1;
  overflow-wrap:anywhere;
}
#studioComponentsPanel .studio-components-shell__identity .studio-component-rename-trigger{
  position:relative;
  flex:0 0 auto;
  align-self:center;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  min-height:34px;
  margin:0;
  padding:0 12px;
  border:1px solid rgba(214,210,200,.2);
  border-radius:6px;
  background:rgba(255,255,255,.035);
  color:#e6dece;
  font-size:10px;
  letter-spacing:.07em;
  line-height:1;
}
/* Keeps a 44px touch area around the 34px visual button. */
#studioComponentsPanel .studio-components-shell__identity .studio-component-rename-trigger::after{
  content:'';
  position:absolute;
  inset:-5px -4px;
}
#studioComponentsPanel .studio-components-shell__content{
  gap:8px;
}
#studioComponentDetails{
  gap:6px;
  padding:8px 10px;
}
#studioComponentDetails .studio-component-details__fields{
  gap:6px 8px;
}
#studioComponentDetails .studio-component-details__fields label{
  gap:3px;
}
#studioComponentDetails .studio-component-details__fields textarea{
  min-height:44px;
  max-height:160px;
  line-height:1.35;
  resize:none;
}
#studioComponentDetails .studio-component-details__fields textarea:placeholder-shown{
  height:44px;
}
#studioComponentDetails .studio-size-section{
  margin:2px 0 4px;
  padding:6px 8px;
}
#studioComponentDetails .studio-size-section__heading{
  margin:0 0 4px;
}
/* Read-only sizes: uniform three-column grid of centred cards. */
#studioComponentDetails .studio-size-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-bottom:6px;
}
#studioComponentDetails .studio-size-list .studio-size-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:100%;
  height:auto;
  min-height:34px;
  padding:4px 6px;
  font-size:12px;
  text-align:center;
}
#studioComponentDetails .studio-size-list .studio-size-chip__label{
  overflow:visible;
  white-space:normal;
  overflow-wrap:anywhere;
  text-overflow:clip;
  line-height:1.2;
}
/* Removal lives in the Add or Edit Sizes editor, with 44px targets. */
#studioComponentDetails .studio-size-edit-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin:6px 0 8px;
}
#studioComponentDetails .studio-size-edit-list:empty{
  display:none;
}
#studioComponentDetails .studio-size-edit-list .studio-size-chip{
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:center;
  box-sizing:border-box;
  width:100%;
  height:44px;
  min-height:44px;
  padding:0 0 0 8px;
  font-size:12px;
}
#studioComponentDetails .studio-size-edit-list .studio-size-chip__remove{
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  font-size:16px;
}
/* Add mode renders a lone save button; keep it a 44px target and full width on phones. */
#studioComponentDetails .studio-component-details__actions:not(:has(#studioComponentDeleteBtn)) > #studioComponentSaveBtn{
  min-height:44px;
}
@media (max-width:520px){
  #studioComponentDetails .studio-component-details__actions:not(:has(#studioComponentDeleteBtn)) > #studioComponentSaveBtn{
    flex:1 1 100%;
  }
}
/* Category and Subcategory stack full width on phones only. */
@media (max-width:520px){
  #studioComponentDetails .studio-component-details__field--phone-full{
    grid-column:1 / -1;
  }
}
/* Empty state shares the heading row. */
#studioComponentDetails .studio-size-section:has(.studio-size-list__empty){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:10px;
}
#studioComponentDetails .studio-size-section:has(.studio-size-list__empty) .studio-size-section__heading{
  flex:0 0 auto;
  margin:0;
}
#studioComponentDetails .studio-size-section:has(.studio-size-list__empty) .studio-size-list{
  flex:1 1 0;
  min-width:0;
  margin:0;
}
#studioComponentDetails .studio-size-section:has(.studio-size-list__empty) .studio-size-section__editor{
  flex:1 0 100%;
}
#studioComponentDetails .studio-size-list__empty{
  font-size:12px;
}
#studioComponentDetails .studio-size-section__editor > summary{
  min-height:44px;
}
/* The app shell already reserves clearance for the floating nav; the card ends below its buttons. */
@media (max-width:760px){
  #studioComponentDetails{
    padding-bottom:10px;
  }
  #studioComponentDetails .studio-size-section{
    margin-bottom:4px;
  }
}

/* Pricing & Tax: compact rhythm, shared dark inputs, matching pickers. */
#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
  margin-top:6px;
}
#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields > .settings-pricing-field,
#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields > .settings-pricing-divider{
  grid-column:1 / -1;
}
#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields > .settings-pricing-divider{
  margin:0;
}
#settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields > .settings-pricing-field--half{
  grid-column:auto;
  grid-template-columns:minmax(0,1fr);
  align-items:end;
  align-content:start;
  gap:4px;
  min-height:0;
}
#settingsScreen #settingsPricingTaxCard .settings-pricing-field--half .settings-toggle{
  justify-self:start;
}
#settingsScreen #settingsPricingTaxCard .settings-pricing-field--half .settings-inline-saved{
  top:0;
  bottom:auto;
}
#settingsScreen #settingsPricingTaxCard #settingsTaxName,
#settingsScreen #settingsPricingTaxCard #settingsBusinessGstNumber{
  padding:8px 11px;
  border:1px solid rgba(214,210,200,.24);
  border-radius:10px;
  background:linear-gradient(180deg,#171c20,#101418);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.24);
  color:#e4dcce;
  font-weight:400;
  text-align:left;
}
#settingsScreen #settingsPricingTaxCard #settingsTaxName:focus,
#settingsScreen #settingsPricingTaxCard #settingsBusinessGstNumber:focus{
  border-color:rgba(189,56,68,.52);
  box-shadow:0 0 0 1px rgba(189,56,68,.22);
  outline:none;
}
#settingsScreen #settingsPricingTaxCard #settingsTaxName::placeholder,
#settingsScreen #settingsPricingTaxCard #settingsBusinessGstNumber::placeholder{
  color:rgba(214,210,200,.42);
}
#settingsScreen #settingsPricingTaxCard .studio-custom-select-trigger{
  box-sizing:border-box;
  height:auto;
  min-height:44px;
  padding:8px 11px;
  font-size:16px;
  font-weight:600;
}
#settingsScreen #settingsPricingTaxCard .studio-custom-select-trigger__value{
  flex:1 1 auto;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}
#settingsScreen #settingsPricingTaxCard .settings-context-actions{
  margin:0;
}
/* The save-state button reserves no space until it is shown. */
#settingsScreen #settingsPricingTaxCard .settings-context-actions:has(> button[style*="hidden"]){
  height:0;
  overflow:hidden;
}
@media (max-width:299px){
  #settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields{
    grid-template-columns:minmax(0,1fr);
  }
  #settingsScreen #settingsPricingTaxCard .settings-pricing-tax-fields > .settings-pricing-field--half{
    grid-template-columns:minmax(0,1fr) 104px;
    align-items:center;
  }
  #settingsScreen #settingsPricingTaxCard .settings-pricing-field--half .settings-toggle{
    justify-self:end;
  }
}

/* Selected tick sits on the right, level with the option text, for the Pricing & Tax pickers. */
#studioCustomSelectPicker:is([data-picker-for="settingsTaxType"],[data-picker-for="settingsCurrency"]) .studio-custom-select-picker__list .component-sheet__option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#studioCustomSelectPicker:is([data-picker-for="settingsTaxType"],[data-picker-for="settingsCurrency"]) .component-sheet__option-title{
  flex:1 1 auto;
  min-width:0;
}
#studioCustomSelectPicker:is([data-picker-for="settingsTaxType"],[data-picker-for="settingsCurrency"]) .component-sheet__option b{
  flex:0 0 auto;
  line-height:1;
}

/* Deposit Received: compact status + inline form inside Build Pricing. */
.quote-payment{display:grid;gap:8px;min-width:0}
.quote-payment__status{margin:0;font-size:13px;color:#ddd6ca;overflow-wrap:anywhere}
.quote-payment__status:empty{display:none}
.quote-payment__actions{display:flex;flex-wrap:wrap;gap:8px}
.quote-payment__actions button{min-height:44px;flex:1 1 auto}
.quote-payment__form{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.quote-payment__form[hidden]{display:none}
.quote-payment__form .quote-payment__actions,.quote-payment__form .quote-payment__error{grid-column:1/-1}
.quote-payment__error{margin:0;min-height:0;font-size:12px;color:#e4aeb4}
.quote-payment__error:empty{display:none}
.quote-payment__form input{min-width:0;box-sizing:border-box;font-size:16px}
@media (max-width:420px){.quote-payment__form{grid-template-columns:1fr}}

/* Components Library: component rows put brand/stock and Buy/Sell on one line, grouped left, wrapping left-aligned. */
.studio-components-list__row--component .studio-components-list__item{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:10px;
}
.studio-components-list__row--component .studio-components-list__item strong{flex:0 0 100%}
.studio-components-list__row--component .studio-components-list__item > span:not(.studio-components-price-row){
  flex:0 1 auto;
  min-width:0;
}
.studio-components-list__row--component .studio-components-list__item .studio-components-price-row{
  flex:0 0 auto;
}

/* Job Type selector: compact two-option control under Customer Details. */
#workshopScreen .quote-job-type{display:grid;gap:6px}
#workshopScreen .quote-job-type__label{color:#c8c2b6;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
#workshopScreen .quote-job-type__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#workshopScreen .quote-job-type__option{min-height:44px;padding:0 8px;border-radius:11px;border:1px solid rgba(214,210,200,.14);background:linear-gradient(180deg,#0f1213,#090b0c);color:#b6b0a4;font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
#workshopScreen .quote-job-type__option[aria-pressed="true"]{color:#f1ece1;border-color:rgba(186,31,44,.55);background:linear-gradient(180deg,rgba(186,31,44,.22),rgba(186,31,44,.1))}

/* Build Details, Repair / Refurbishment: a short form with the rod measurements in an optional collapsed section.
   For a New Build the two rod-specification wrappers are transparent, so that layout is exactly as before. */
#workshopScreen .build-details__rod-specs{display:contents}
#workshopScreen .build-details__rod-specs > .build-details__group:first-child{margin-top:6px;padding-top:8px;border-top:1px solid rgba(214,210,200,.1)}
#workshopScreen .build-details__repair-only[hidden],
#workshopScreen .build-details__rod-specs-toggle[hidden]{display:none}
#workshopScreen .build-details__rod-specs-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 12px;border-radius:11px;
  border:1px solid rgba(214,210,200,.14);background:linear-gradient(180deg,#0f1213,#090b0c);color:#d7d0c3;font:inherit;text-align:left;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;
}
#workshopScreen .build-details__rod-specs-copy{display:grid;gap:2px;min-width:0}
#workshopScreen .build-details__rod-specs-copy > span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
#workshopScreen .build-details__rod-specs-copy small{font-size:10px;color:rgba(214,210,200,.68)}
#workshopScreen .build-details__rod-specs-toggle .quote-section__chevron{transform:rotate(-90deg)}
#workshopScreen .build-details__rod-specs-toggle[aria-expanded="true"] .quote-section__chevron{transform:none}
#workshopScreen .build-details[data-job-type="repair"] > *{order:1}
#workshopScreen .build-details[data-job-type="repair"] > #quoteJobTypeGroup,
#workshopScreen .build-details[data-job-type="repair"] > #buildDetailsGroupRow{order:0}
#workshopScreen .build-details[data-job-type="repair"] > #quoteWorkshopNotesField{order:2}
#workshopScreen .build-details[data-job-type="repair"] > #buildRodSpecsToggle{order:3}
#workshopScreen .build-details[data-job-type="repair"] > #buildRodSpecsPartA{order:4}
#workshopScreen .build-details[data-job-type="repair"] > #buildRodSpecsPartB{order:5}
#workshopScreen .build-details[data-job-type="repair"] > .build-details__rod-specs{display:none}
#workshopScreen .build-details[data-job-type="repair"][data-rod-specs-open="true"] > .build-details__rod-specs{
  display:grid;grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:end;min-width:0;
}
@media (max-width:420px){
  #workshopScreen .build-details[data-job-type="repair"][data-rod-specs-open="true"] > .build-details__rod-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Guide Train Designer (Workshop): every rule is scoped to its own card so other Workshop tools are unaffected. */
#workshopToolGuideTrain{
  gap:12px;
  min-width:0;
}

#workshopToolGuideTrain .workshop-tool-fields{
  gap:8px;
}

#workshopToolGuideTrain .workshop-tool-fields--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

#workshopToolGuideTrain .workshop-tool-fields label{
  gap:4px;
  min-width:0;
}

#workshopToolGuideTrain .workshop-tool-fields--two label > span{
  min-height:24px;
  line-height:1.2;
}

#workshopToolGuideTrain .workshop-tool-fields input{
  box-sizing:border-box;
  min-height:44px;
  padding:6px 10px;
  font-size:16px;
  line-height:1.2;
  border-color:rgba(214,210,200,.2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.04),inset 0 -1px 2px rgba(0,0,0,.28);
}

#workshopToolGuideTrain input[aria-invalid="true"]{
  border-color:rgba(var(--kl-red-rgb),.85);
  box-shadow:0 0 0 1px rgba(var(--kl-red-rgb),.35);
}

#workshopToolGuideTrain :is(button,input,summary):focus-visible{
  outline:2px solid var(--kl-red-active,#c8323f);
  outline-offset:2px;
}

#workshopToolGuideTrain .guide-train-count{
  display:grid;
  gap:4px;
  min-width:0;
}

#workshopToolGuideTrain .guide-train-count > span{
  min-height:24px;
  font-size:9px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(214,210,200,.72);
}

#workshopToolGuideTrain .guide-train-count .component-quantity{
  grid-template-columns:44px minmax(0,1fr) 44px;
}

#workshopToolGuideTrain .guide-train-count :is(button,input){
  min-height:44px;
  min-width:0;
}

#workshopToolGuideTrain .guide-train-count input{
  width:100%;
  box-sizing:border-box;
  border:var(--ds-stroke-strong);
  border-radius:var(--ds-radius-md);
  background:var(--panel);
  color:var(--ds-text-strong);
  font-size:16px;
}

#workshopToolGuideTrain .guide-train-messages{
  display:grid;
  gap:6px;
}

#workshopToolGuideTrain .guide-train-messages:empty{
  display:none;
}

#workshopToolGuideTrain .guide-train-message{
  margin:0;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.28);
  background:rgba(255,255,255,.04);
  color:var(--titanium);
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

#workshopToolGuideTrain .guide-train-message--error{
  border-color:rgba(var(--kl-red-rgb),.6);
  background:rgba(var(--kl-red-rgb),.14);
  color:#ffd9d4;
}

#workshopToolGuideTrain .guide-train-view{
  margin:0;
  display:grid;
  gap:6px;
  min-width:0;
}

#workshopToolGuideTrain .guide-train-view[hidden]{
  display:none;
}

#workshopToolGuideTrain .guide-train-view__canvas{
  min-width:0;
  border-radius:10px;
  overflow:hidden;
  touch-action:pan-y;
}

#workshopToolGuideTrain .guide-train-svg{
  display:block;
  width:100%;
  height:auto;
}

#workshopToolGuideTrain .guide-train-view figcaption{
  font-size:10px;
  line-height:1.4;
  letter-spacing:.04em;
  color:rgba(214,210,200,.68);
}

#workshopToolGuideTrain .guide-train-results{
  display:grid;
  gap:10px;
  min-width:0;
}

#workshopToolGuideTrain .guide-train-results[hidden]{
  display:none;
}

#workshopToolGuideTrain .guide-train-summary{
  gap:0;
}

#workshopToolGuideTrain .guide-train-summary div{
  min-height:34px;
  padding:7px 2px;
  border-bottom:1px solid rgba(214,210,200,.12);
}

#workshopToolGuideTrain .guide-train-summary strong{
  text-align:right;
  min-width:0;
  overflow-wrap:anywhere;
}

#workshopToolGuideTrain .guide-train-guides-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#workshopToolGuideTrain .guide-train-guides-head h4,
#workshopToolGuideTrain .guide-train-method h5{
  margin:0;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#c3bcae;
}

#workshopToolGuideTrain .guide-train-guides-head .ghost-action{
  min-height:44px;
  padding:0 12px;
  border-radius:11px;
  font-size:10px;
  letter-spacing:.07em;
}

#workshopToolGuideTrain .guide-train-guides-head .ghost-action[hidden]{
  display:none;
}

#workshopToolGuideTrain .guide-train-guides{
  display:grid;
  gap:8px;
}

#workshopToolGuideTrain .gt-guide{
  display:grid;
  gap:6px;
  min-width:0;
  padding:8px 10px;
  border-radius:11px;
  border:1px solid rgba(214,210,200,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

#workshopToolGuideTrain .gt-guide.is-selected{
  border-color:rgba(var(--kl-red-rgb),.6);
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.14),rgba(var(--kl-red-rgb),.04));
}

#workshopToolGuideTrain .gt-guide.has-warning:not(.is-selected){
  border-color:rgba(224,123,134,.45);
}

#workshopToolGuideTrain .gt-guide--runner:not(.is-selected):not(.has-warning){
  box-shadow:inset 3px 0 0 rgba(174,185,194,.6);
}

#workshopToolGuideTrain .gt-guide__head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 10px;
}

#workshopToolGuideTrain .gt-guide__head strong{
  font-size:12px;
  color:#f1ece1;
}

#workshopToolGuideTrain .gt-guide__butt{
  flex:1 1 auto;
  min-width:0;
  font-size:10px;
  color:rgba(214,210,200,.68);
}

#workshopToolGuideTrain .gt-guide__status{
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(214,210,200,.78);
}

#workshopToolGuideTrain .gt-guide__status[data-level="warn"]{
  color:#e8939c;
}

#workshopToolGuideTrain .gt-guide__fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

#workshopToolGuideTrain .gt-guide__fields label{
  display:grid;
  gap:3px;
  min-width:0;
}

#workshopToolGuideTrain .gt-guide__fields label > span{
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(214,210,200,.68);
}

#workshopToolGuideTrain .gt-guide__fields input{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.2);
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  font-size:16px;
  line-height:1.2;
}

#workshopToolGuideTrain .gt-guide__fields input:disabled{
  opacity:.55;
}

#workshopToolGuideTrain .gt-guide__fields input.is-edited{
  border-color:rgba(var(--kl-red-rgb),.7);
  background:rgba(var(--kl-red-rgb),.1);
}

#workshopToolGuideTrain .gt-guide__foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:2px 10px;
  font-size:10px;
  color:rgba(214,210,200,.68);
}

#workshopToolGuideTrain .guide-train-advanced{
  border:1px solid rgba(214,210,200,.14);
  border-radius:11px;
  background:rgba(255,255,255,.02);
}

#workshopToolGuideTrain .guide-train-advanced summary{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d1cbbf;
  cursor:pointer;
}

#workshopToolGuideTrain .guide-train-advanced__body{
  display:grid;
  gap:10px;
  padding:0 12px 12px;
}

#workshopToolGuideTrain .guide-train-method{
  display:grid;
  gap:8px;
  font-size:11px;
  line-height:1.5;
  color:rgba(214,210,200,.84);
}

#workshopToolGuideTrain .guide-train-method ul,
#workshopToolGuideTrain .guide-train-method ol{
  margin:0;
  padding:0 0 0 18px;
  display:grid;
  gap:5px;
}

#workshopToolGuideTrain .guide-train-mode{
  margin-right:auto;
  padding:2px 8px;
  border:1px solid rgba(214,210,200,.28);
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.5;
  text-transform:uppercase;
  color:rgba(214,210,200,.78);
}

#workshopToolGuideTrain .guide-train-mode:is([data-mode="mixed"],[data-mode="measured"]){
  border-color:rgba(174,185,194,.7);
  background:rgba(174,185,194,.12);
  color:#dfe6ea;
}

#workshopToolGuideTrain .gt-guide__source{
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#aeb9c2;
}

#workshopToolGuideTrain .gt-guide__source[hidden]{
  display:none;
}

#workshopToolGuideTrain .gt-guide__spec{
  display:grid;
  gap:3px;
  min-width:0;
}

#workshopToolGuideTrain .gt-guide__spec > span,
#workshopToolGuideTrain .gt-set-row label > span{
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(214,210,200,.68);
}

#workshopToolGuideTrain .gt-guide__spec select{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.2);
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  font-size:16px;
  line-height:1.2;
}

#workshopToolGuideTrain .guide-train-set{
  border:1px solid rgba(214,210,200,.14);
  border-radius:11px;
  background:rgba(255,255,255,.02);
}

#workshopToolGuideTrain .guide-train-set summary{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d1cbbf;
  cursor:pointer;
}

#workshopToolGuideTrain .guide-train-set__body{
  display:grid;
  gap:10px;
  padding:0 12px 12px;
}

#workshopToolGuideTrain .guide-train-set__body > .ghost-action{
  min-height:44px;
  justify-self:start;
  padding:0 14px;
  border-radius:11px;
  font-size:10px;
  letter-spacing:.07em;
}

#workshopToolGuideTrain .gt-set-rows{
  display:grid;
  gap:10px;
}

#workshopToolGuideTrain .gt-set-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 8px;
  align-items:end;
  min-width:0;
  padding:8px 10px;
  border-radius:11px;
  border:1px solid rgba(214,210,200,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

#workshopToolGuideTrain .gt-set-row label{
  display:grid;
  gap:3px;
  min-width:0;
}

#workshopToolGuideTrain .gt-set-row input{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.2);
  background:rgba(7,8,10,.94);
  color:#f5efe5;
  font-size:16px;
  line-height:1.2;
}

#workshopToolGuideTrain .gt-set-row .gt-set-remove{
  min-height:44px;
  justify-self:end;
  padding:0 12px;
  border-radius:11px;
  font-size:10px;
  letter-spacing:.07em;
}

#workshopToolGuideTrain .gt-set-error{
  grid-column:1 / -1;
  margin:0;
  font-size:11px;
  line-height:1.45;
  color:#ffb4ad;
  overflow-wrap:anywhere;
}

#workshopToolGuideTrain .gt-set-error[hidden]{
  display:none;
}

.guide-train-beta{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border:1px solid rgba(var(--kl-red-rgb),.6);
  border-radius:999px;
  color:#f0c9c4;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.5;
  text-transform:uppercase;
  vertical-align:middle;
}

#workshopToolGuideTrain .guide-train-beta-note{
  margin:0;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(var(--kl-red-rgb),.4);
  background:rgba(var(--kl-red-rgb),.1);
  color:rgba(236,229,217,.92);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.02em;
}

#workshopToolGuideTrain .guide-train-beta-note strong{
  color:#f0c9c4;
}

@media (min-width:761px){
  .app-shell:has(#workshopLandingScreen.active #workshopToolGuideTrain:not([hidden])){
    width:min(100%,840px);
  }

  #workshopToolGuideTrain .guide-train-inputs{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  #workshopToolGuideTrain .guide-train-guides{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #workshopToolGuideTrain .guide-train-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
  }
}
/* End Guide Train Designer */

/* Thread Wrap Designer (Workshop): scoped to its own card so other Workshop tools are unaffected. */
#workshopToolThreadWrap{
  gap:12px;
  min-width:0;
}

#workshopToolThreadWrap .thread-wrap-config{
  display:grid;
  gap:12px;
}

#workshopToolThreadWrap .thread-wrap-config__col{
  display:grid;
  gap:10px;
  align-content:start;
  min-width:0;
}

#workshopToolThreadWrap .workshop-tool-fields{
  gap:8px;
}

#workshopToolThreadWrap .workshop-tool-fields--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

#workshopToolThreadWrap .workshop-tool-fields label{
  gap:4px;
  min-width:0;
}

#workshopToolThreadWrap .workshop-tool-fields--two label > span{
  min-height:24px;
  line-height:1.2;
}

#workshopToolThreadWrap .workshop-tool-fields input{
  box-sizing:border-box;
  min-height:44px;
  padding:6px 10px;
  font-size:16px;
  line-height:1.2;
  border-color:rgba(214,210,200,.2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.04),inset 0 -1px 2px rgba(0,0,0,.28);
}

#workshopToolThreadWrap input[aria-invalid="true"]{
  border-color:rgba(var(--kl-red-rgb),.85);
  box-shadow:0 0 0 1px rgba(var(--kl-red-rgb),.35);
}

#workshopToolThreadWrap .thread-wrap-group{
  display:grid;
  gap:6px;
  min-width:0;
}

#workshopToolThreadWrap .thread-wrap-group[hidden]{
  display:none;
}

#workshopToolThreadWrap .thread-wrap-group__label{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(214,210,200,.72);
}

#workshopToolThreadWrap .thread-wrap-segment{
  display:grid;
  gap:8px;
}

#workshopToolThreadWrap .thread-wrap-segment--three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

#workshopToolThreadWrap .thread-wrap-segment--four{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

#workshopToolThreadWrap .thread-wrap-segment .ghost-action{
  min-height:44px;
  padding:0 8px;
  font-size:12px;
}

#workshopToolThreadWrap .thread-wrap-repeats{
  grid-template-columns:minmax(0,1fr) minmax(140px,180px);
}

#workshopToolThreadWrap .thread-wrap-repeats-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:-2px;
}

#workshopToolThreadWrap .thread-wrap-repeats-note .ghost-action{
  flex:none;
  min-height:44px;
  padding:0 12px;
  border-radius:11px;
  font-size:10px;
  letter-spacing:.07em;
}

#workshopToolThreadWrap .thread-wrap-repeats-note .ghost-action[hidden]{
  display:none;
}

#workshopToolThreadWrap .thread-wrap-swatches{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}

#workshopToolThreadWrap .thread-wrap-swatch{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  min-height:44px;
  padding:0 8px;
  border-radius:11px;
  border:1px solid rgba(214,210,200,.2);
  background:linear-gradient(180deg,rgba(17,21,23,.92),rgba(11,14,16,.96));
  color:#d1cbbf;
  font:inherit;
  font-size:10px;
  letter-spacing:.04em;
  cursor:pointer;
  touch-action:manipulation;
}

#workshopToolThreadWrap .thread-wrap-swatch__dot{
  flex:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--swatch);
  box-shadow:0 0 0 1px rgba(231,225,213,.55);
}

#workshopToolThreadWrap .thread-wrap-swatch__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#workshopToolThreadWrap .thread-wrap-swatch:hover,
#workshopToolThreadWrap .thread-wrap-swatch:focus-visible{
  border-color:rgba(214,210,200,.4);
  outline:none;
}

#workshopToolThreadWrap .thread-wrap-swatch[aria-pressed="true"]{
  color:#f1ece1;
  border-color:rgba(var(--kl-red-rgb),.75);
  background:linear-gradient(180deg,rgba(var(--kl-red-rgb),.22),rgba(var(--kl-red-rgb),.1));
}

#workshopToolThreadWrap :is(button,input,summary):focus-visible{
  outline:2px solid var(--kl-red-active,#c8323f);
  outline-offset:2px;
}

#workshopToolThreadWrap .thread-wrap-messages{
  display:grid;
  gap:6px;
}

#workshopToolThreadWrap .thread-wrap-messages:empty{
  display:none;
}

#workshopToolThreadWrap .thread-wrap-message{
  margin:0;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.28);
  background:rgba(255,255,255,.04);
  color:var(--titanium);
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

#workshopToolThreadWrap .thread-wrap-message--error{
  border-color:rgba(var(--kl-red-rgb),.6);
  background:rgba(var(--kl-red-rgb),.14);
  color:#ffd9d4;
}

#workshopToolThreadWrap .thread-wrap-results{
  display:grid;
  gap:12px;
  min-width:0;
}

#workshopToolThreadWrap .thread-wrap-results[hidden]{
  display:none;
}

#workshopToolThreadWrap .thread-wrap-summary div{
  min-height:34px;
  padding:7px 2px;
  border-bottom:1px solid rgba(214,210,200,.12);
}

#workshopToolThreadWrap .thread-wrap-summary{
  gap:0;
}

#workshopToolThreadWrap .thread-wrap-summary strong{
  text-align:right;
  min-width:0;
  overflow-wrap:anywhere;
}

#workshopToolThreadWrap .thread-wrap-preview{
  margin:0;
  display:grid;
  gap:6px;
  min-width:0;
}

#workshopToolThreadWrap .thread-wrap-preview[hidden]{
  display:none;
}

#workshopToolThreadWrap .thread-wrap-preview__canvas{
  min-width:0;
  border-radius:10px;
  overflow:hidden;
}

#workshopToolThreadWrap .thread-wrap-svg{
  display:block;
  width:100%;
  height:auto;
}

#workshopToolThreadWrap .thread-wrap-preview figcaption{
  font-size:10px;
  line-height:1.4;
  letter-spacing:.04em;
  color:rgba(214,210,200,.68);
}

#workshopToolThreadWrap .thread-wrap-block{
  display:grid;
  gap:6px;
  min-width:0;
}

#workshopToolThreadWrap .thread-wrap-block h4,
#workshopToolThreadWrap .thread-wrap-method__body h5{
  margin:0;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#c3bcae;
}

#workshopToolThreadWrap .thread-wrap-axes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
}

#workshopToolThreadWrap .thread-wrap-axes li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:baseline;
  padding:6px 9px;
  border-radius:9px;
  border:1px solid rgba(214,210,200,.1);
  background:rgba(255,255,255,.018);
  font-size:11px;
  color:rgba(214,210,200,.82);
}

#workshopToolThreadWrap .thread-wrap-axes strong{
  color:#ece6dc;
  font-size:12px;
}

#workshopToolThreadWrap .thread-wrap-table-wrap{
  min-width:0;
  overflow-x:auto;
  border-radius:10px;
  border:1px solid rgba(214,210,200,.14);
}

#workshopToolThreadWrap .thread-wrap-table{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}

#workshopToolThreadWrap .thread-wrap-table__caption{
  caption-side:bottom;
  padding:7px 9px;
  text-align:left;
  font-size:10px;
  line-height:1.4;
  letter-spacing:.03em;
  color:rgba(214,210,200,.68);
}

#workshopToolThreadWrap .thread-wrap-table th,
#workshopToolThreadWrap .thread-wrap-table td{
  padding:6px 9px;
  text-align:right;
  font-size:12px;
  color:#e2dacc;
  border-bottom:1px solid rgba(214,210,200,.08);
}

#workshopToolThreadWrap .thread-wrap-table thead th{
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(214,210,200,.72);
  background:rgba(255,255,255,.03);
}

#workshopToolThreadWrap .thread-wrap-table th:first-child,
#workshopToolThreadWrap .thread-wrap-table td:first-child{
  text-align:left;
}

#workshopToolThreadWrap .thread-wrap-table tbody th{
  font-weight:700;
  color:#f1ece1;
}

#workshopToolThreadWrap .thread-wrap-table tbody th small{
  margin-left:4px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(214,210,200,.6);
}

#workshopToolThreadWrap .thread-wrap-table tr.is-repeat-row{
  background:rgba(255,255,255,.035);
}

#workshopToolThreadWrap .thread-wrap-steps{
  margin:0;
  padding:0 0 0 20px;
  display:grid;
  gap:9px;
  font-size:12px;
  color:#ece6dc;
}

#workshopToolThreadWrap .thread-wrap-steps > li::marker{
  color:rgba(var(--kl-red-rgb),.9);
  font-weight:700;
}

#workshopToolThreadWrap .thread-wrap-steps ul{
  margin:4px 0 0;
  padding:0 0 0 16px;
  display:grid;
  gap:4px;
  font-size:11px;
  line-height:1.5;
  color:rgba(214,210,200,.84);
}

#workshopToolThreadWrap .thread-wrap-method{
  border:1px solid rgba(214,210,200,.14);
  border-radius:11px;
  background:rgba(255,255,255,.02);
}

#workshopToolThreadWrap .thread-wrap-method summary{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d1cbbf;
  cursor:pointer;
}

#workshopToolThreadWrap .thread-wrap-method__body{
  display:grid;
  gap:8px;
  padding:0 12px 12px;
  font-size:11px;
  line-height:1.5;
  color:rgba(214,210,200,.84);
}

#workshopToolThreadWrap .thread-wrap-method__body ul{
  margin:0;
  padding:0 0 0 16px;
  display:grid;
  gap:5px;
}

#workshopToolThreadWrap .thread-wrap-method__body p{
  margin:0;
}

#workshopToolThreadWrap .thread-wrap-method__body a{
  color:#d7d0c3;
  overflow-wrap:anywhere;
}

#workshopToolThreadWrap .thread-wrap-sources{
  gap:0;
}

#workshopToolThreadWrap .thread-wrap-sources a{
  display:inline-block;
  padding:12px 0;
}

@media (min-width:761px){
  .app-shell:has(#workshopLandingScreen.active #workshopToolThreadWrap:not([hidden])){
    width:min(100%,840px);
  }

  #workshopToolThreadWrap .thread-wrap-config{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"inputs colours" "preview preview";
    gap:18px;
  }

  #workshopToolThreadWrap .thread-wrap-config__col--inputs{
    grid-area:inputs;
  }

  #workshopToolThreadWrap .thread-wrap-config__col--colours{
    grid-area:colours;
  }

  #workshopToolThreadWrap .thread-wrap-preview{
    grid-area:preview;
  }

  #workshopToolThreadWrap .thread-wrap-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
  }
}