/* Last-loaded Figma chrome. Native number/select widgets draw their own
   rounded arrows; this file turns that chrome off so our icons show. */
html body .card,
html body button,
html body input,
html body select,
html body textarea,
html body .drop,
html body .chip,
html body .badge{
  border-radius:0!important;
}
html body select,
html body button{
  -webkit-appearance:none!important;
  appearance:none!important;
}
html body input[type=number]{
  -webkit-appearance:textfield!important;
  appearance:textfield!important;
}
html body input[type=number]::-webkit-inner-spin-button,
html body input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:none!important;
  margin:0!important;
  height:0!important;
  width:0!important;
}
.hidden{display:none!important}
/* The two arrow slots stay in the grid even while hidden. display:none pulls
   the track into the 24px first column, so the labels wrap onto the card. */
.stepper .step-nav-arrow.hidden{
  display:flex!important;
  visibility:hidden;
  pointer-events:none;
}
/* Same measure as the Figma stepper: 30 + 13 + 894 + 13 + 30. */
.stepper{width:min(980px,100%);max-width:980px;height:auto;min-height:64px;background:transparent}
.step .lbl{white-space:nowrap}
@media (max-width:640px){
  .step .lbl{white-space:normal}
}
/* Field control. Number and dropdown share one raised box. Insets rather
   than a nested element, because these controls hold a field plus a caret. */
.fig-step,.fig-select-wrap{
  box-sizing:border-box;height:38px;padding:4px 6px;
  border:0;background:var(--ro-field,#f5f5f5);
  box-shadow:var(--ro-raised);
}
.fig-step:has(input:disabled),.fig-select-wrap:has(select:disabled){
  background:#a0a0a0;
  box-shadow:inset -2px -2px 0 var(--ro-frame,#313131),inset 2px 2px 0 var(--ro-frame,#313131),inset -4px -4px 0 var(--ro-bevel-dark),inset 4px 4px 0 rgba(255,255,255,.5);
}
.fig-step{display:flex;align-items:center}
.fig-step input{
  flex:1 1 auto;min-width:0;border:0!important;height:30px!important;padding:0 2px!important;
  background:none!important;box-shadow:none!important;text-align:center;border-radius:0!important;
  font-family:var(--ro-font-bitmap);font-size:13.5px;line-height:30px;color:#313131;
  -webkit-appearance:textfield!important;appearance:textfield!important;
}
.fig-step-btn{
  width:8px;flex:0 0 8px;height:16px;margin:0;padding:0;border:0!important;border-radius:0!important;
  background:transparent url('/static/assets/number_choose.svg') center no-repeat!important;
  background-size:8px 16px!important;box-shadow:none!important;
}
.fig-select-wrap{position:relative;display:block}
.fig-select-wrap select{
  display:block;width:100%;height:30px!important;border:0!important;padding:0 16px 0 6px!important;
  background:none!important;background-image:none!important;box-shadow:none!important;
  font-family:"Mozilla Text",var(--ro-font-ui);font-size:13.5px;line-height:30px;color:#0c1421;
  text-align:center;border-radius:0!important;
  -webkit-appearance:none!important;appearance:none!important;
}
.fig-select-caret{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);width:8px;height:16px;
  pointer-events:none;object-fit:contain;
}
.area-row input[type=range]::-webkit-slider-runnable-track,
.area-row input[type=range]::-moz-range-track{border-radius:0!important}
.area-row input[type=range]::-webkit-slider-thumb,
.area-row input[type=range]::-moz-range-thumb{border-radius:0!important}
#radar{overflow:visible}
.radar-panel{overflow:visible}
.area-side,#areaList{display:flex;flex-direction:column;gap:10px}
.add-area{margin-top:0}
/* Dark mode. The light kit hard-codes ink and fills for a pale field, which
   leaves dark text on a dark field here. Text follows the theme ink, and the
   stepper inverts: steps not yet reached sink into the page and the current
   one is the bright mark. */
[data-theme="dark"] .fig-select-wrap select,
[data-theme="dark"] .fig-step input,
[data-theme="dark"] .fig-stepper,
[data-theme="dark"] .fig-select{color:var(--ro-ink,#f3f4f6)}
[data-theme="dark"] .fig-select-wrap select option{background:var(--ro-input-face,#1a1d22);color:var(--ro-ink,#f3f4f6)}
[data-theme="dark"] .fig-step:has(input:disabled),
[data-theme="dark"] .fig-select-wrap:has(select:disabled){background:#1f2328}
[data-theme="dark"] .fig-step:has(input:disabled) input,
[data-theme="dark"] .fig-select-wrap:has(select:disabled) select{color:var(--ro-ink-faint,#8a93a0)}
[data-theme="dark"] .fw-hint{color:var(--ro-ink-muted,#9aa3b2)}
[data-theme="dark"] .step .dot{background:#2f343c;color:#6b7380;box-shadow:inset -2px -2px 0 #2f343c,inset 2px 2px 0 #2f343c}
[data-theme="dark"] .step .lbl{color:#6b7380}
[data-theme="dark"] .step:not(:first-child)::before{background:#2f343c}
[data-theme="dark"] .step.done .dot{background:#6b7380;color:#1a1d22;box-shadow:inset -2px -2px 0 rgba(0,0,0,.45),inset 2px 2px 0 rgba(255,255,255,.25)}
[data-theme="dark"] .step.done .lbl{color:#9aa3b2}
[data-theme="dark"] .step.done::before,
[data-theme="dark"] .step.current::before{background:#6b7380;box-shadow:inset 0 -1.5px 0 rgba(0,0,0,.4)}
[data-theme="dark"] .step.current .dot,
[data-theme="dark"] body.retro .step.current .dot{background:#e6e9f0;color:#16181c;box-shadow:inset -2px -2px 0 #9aa3b2,inset 2px 2px 0 #ffffff}
[data-theme="dark"] .step.current .lbl{color:#f3f4f6}
[data-theme="dark"] .step-nav-arrow:hover{background:#2a2f36}