/* Shared display and accessibility preferences. Keep these rules generic so the same panel works on the main app and the 3D planner. */
:root{
  --variant-access-text:1;
  --variant-access-control-y:0px;
}
html[data-variant-text-size="small"]{--variant-access-text:.94}
html[data-variant-text-size="normal"]{--variant-access-text:1}
html[data-variant-text-size="large"]{--variant-access-text:1.08}
html[data-variant-text-size="xlarge"]{--variant-access-text:1.16}
html[data-variant-control-size="compact"]{--variant-access-control-y:-3px}
html[data-variant-control-size="normal"]{--variant-access-control-y:0px}
html[data-variant-control-size="large"]{--variant-access-control-y:7px}

/* Scale the text people interact with most without zooming the canvas or map coordinates. */
html[data-variant-text-size="small"] main,
html[data-variant-text-size="small"] nav,
html[data-variant-text-size="small"] header,
html[data-variant-text-size="small"] .variant-display-dialog,
html[data-variant-text-size="small"] .variant-feedback-dialog,
html[data-variant-text-size="small"] .v3dSidebar,
html[data-variant-text-size="small"] .v3dTopbar{font-size:.94em}
html[data-variant-text-size="large"] main,
html[data-variant-text-size="large"] nav,
html[data-variant-text-size="large"] header,
html[data-variant-text-size="large"] .variant-display-dialog,
html[data-variant-text-size="large"] .variant-feedback-dialog,
html[data-variant-text-size="large"] .v3dSidebar,
html[data-variant-text-size="large"] .v3dTopbar{font-size:1.08em}
html[data-variant-text-size="xlarge"] main,
html[data-variant-text-size="xlarge"] nav,
html[data-variant-text-size="xlarge"] header,
html[data-variant-text-size="xlarge"] .variant-display-dialog,
html[data-variant-text-size="xlarge"] .variant-feedback-dialog,
html[data-variant-text-size="xlarge"] .v3dSidebar,
html[data-variant-text-size="xlarge"] .v3dTopbar{font-size:1.16em}
html[data-variant-text-size="large"] button,
html[data-variant-text-size="large"] input,
html[data-variant-text-size="large"] select,
html[data-variant-text-size="large"] textarea{font-size:1em}
html[data-variant-text-size="xlarge"] button,
html[data-variant-text-size="xlarge"] input,
html[data-variant-text-size="xlarge"] select,
html[data-variant-text-size="xlarge"] textarea{font-size:1em}
html[data-variant-text-size="small"] button,
html[data-variant-text-size="small"] input,
html[data-variant-text-size="small"] select,
html[data-variant-text-size="small"] textarea{font-size:1em}

html[data-variant-control-size="large"] button,
html[data-variant-control-size="large"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-variant-control-size="large"] select,
html[data-variant-control-size="large"] textarea{
  min-height:44px!important;
}
html[data-variant-control-size="compact"] button,
html[data-variant-control-size="compact"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-variant-control-size="compact"] select{
  min-height:30px;
}

html[data-variant-contrast="high"] body{color:#f0e8d8!important;background:#050605!important}
html[data-variant-contrast="high"] header,
html[data-variant-contrast="high"] nav,
html[data-variant-contrast="high"] .vcard,
html[data-variant-contrast="high"] .vhx-card,
html[data-variant-contrast="high"] .v3dPanel,
html[data-variant-contrast="high"] .v3dTopbar,
html[data-variant-contrast="high"] .v3dSidebar{border-color:#665f51!important}
html[data-variant-contrast="high"] button,
html[data-variant-contrast="high"] input,
html[data-variant-contrast="high"] select,
html[data-variant-contrast="high"] textarea{border-color:#756b58!important;color:#fff4dd!important}
html[data-variant-contrast="high"] .vmuted,
html[data-variant-contrast="high"] .vhelp,
html[data-variant-contrast="high"] small{color:#c7bcaa!important}

html.variant-hide-scanlines .scanlines{display:none!important}
html.variant-simple-effects *{backdrop-filter:none!important}
html.variant-simple-effects .scanlines{display:none!important}
html.variant-simple-effects .field-feature-card,
html.variant-simple-effects .vhx-card,
html.variant-simple-effects .vcard,
html.variant-simple-effects .v3dPanel{box-shadow:none!important}
html.variant-reduce-motion *,
html.variant-reduce-motion *::before,
html.variant-reduce-motion *::after{
  scroll-behavior:auto!important;
  transition-duration:.01ms!important;
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
}
html.variant-wide-focus :focus-visible{
  outline:3px solid #ffe08f!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 2px #111!important;
}

.variant-display-button{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid #4b4334;
  border-radius:8px;
  background:#141411;
  color:#d9c7a3;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.variant-display-button:hover{border-color:#84672f;color:#f5d995;background:#211b10}
.variant-display-button span{font-weight:900;color:#e5c778}
.variant-display-button b{font-size:11px}
.variant-display-button-planner{margin-left:2px}
.variant-display-button-floating{position:fixed;right:14px;bottom:14px;z-index:10030;box-shadow:0 8px 26px rgba(0,0,0,.45)}

.variant-display-layer{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(7px);
}
.variant-display-layer[hidden]{display:none!important}
.variant-display-dialog{
  width:min(680px,100%);
  max-height:min(88dvh,780px);
  overflow:auto;
  padding:17px;
  border:1px solid #514937;
  border-radius:14px;
  background:#10120f;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  color:#ded4c1;
}
.variant-display-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.variant-display-head small{color:#9e8f72;font-size:9px;font-weight:900;letter-spacing:.12em}
.variant-display-head h2{margin:3px 0 0;color:#f2d695;font-size:22px}
.variant-display-close{width:36px;height:36px;padding:0;border:1px solid #403b31;border-radius:8px;background:#151612;color:#cfc5b4;font-size:23px;cursor:pointer}
.variant-display-intro{margin:10px 0 14px;color:#a59b88;font-size:12px;line-height:1.45}
.variant-display-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.variant-display-field{display:grid;gap:5px}
.variant-display-field>span{color:#9c8f78;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.variant-display-field select{width:100%;min-height:38px;padding:7px 28px 7px 9px;border:1px solid #393a34;border-radius:8px;background:#11130f;color:#e2d7c4}
.variant-display-toggles{display:grid;gap:7px;margin-top:14px}
.variant-display-toggles label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;padding:9px 10px;border:1px solid #2f322d;border-radius:9px;background:#0c0e0c;cursor:pointer}
.variant-display-toggles input{margin-top:2px}
.variant-display-toggles b,.variant-display-toggles small{display:block}
.variant-display-toggles b{color:#ddd3c0;font-size:12px}
.variant-display-toggles small{margin-top:2px;color:#8e8779;font-size:10px;line-height:1.35}
.variant-display-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px;padding-top:13px;border-top:1px solid #2d302b}
.variant-display-actions button{min-height:36px;padding:7px 10px;border:1px solid #464238;border-radius:8px;background:#151612;color:#d2c7b4;cursor:pointer}
.variant-display-actions .variant-display-done{border-color:#7b622e;background:#241c0d;color:#ffd981}
body.variant-display-open{overflow:hidden!important}

@media(max-width:820px){
  .variant-display-button b{display:none}
  .variant-display-button{width:36px;min-width:36px;padding:0}
  .variant-display-grid{grid-template-columns:1fr}
  .variant-display-dialog{padding:14px}
}


/* Native-select fallback. Chromium/Opera on Windows may otherwise use a bright system popup. */
.variant-display-select,
.variant-display-select option,
.variant-display-select optgroup,
.variant-feedback-field select,
.variant-feedback-field select option,
.variant-feedback-field select optgroup{
  color-scheme:dark!important;
  background-color:#11130f!important;
  color:#e7ddca!important;
}
.variant-display-select{appearance:none;-webkit-appearance:none}

/* Large text should make controls grow, not let text escape fixed-height boxes. */
html[data-variant-text-size="large"] :is(.vh-btn,.vbtn,.sidebar-action,.nav-feedback-link,.header-install-btn,.header-calculator-btn,.variant-display-button),
html[data-variant-text-size="xlarge"] :is(.vh-btn,.vbtn,.sidebar-action,.nav-feedback-link,.header-install-btn,.header-calculator-btn,.variant-display-button){
  height:auto!important;
  max-height:none!important;
  white-space:normal!important;
  line-height:1.25!important;
  overflow-wrap:anywhere;
}
html[data-variant-text-size="large"] nav button,
html[data-variant-text-size="xlarge"] nav button{
  height:auto!important;
  min-height:39px;
  white-space:normal!important;
  line-height:1.25;
  overflow-wrap:anywhere;
}
html[data-variant-text-size="large"] :is(.ic-support-actions,.vh-overview-support-actions) :is(.vh-btn,a.vh-btn),
html[data-variant-text-size="xlarge"] :is(.ic-support-actions,.vh-overview-support-actions) :is(.vh-btn,a.vh-btn){
  height:auto!important;
  min-height:60px!important;
  max-height:none!important;
  white-space:normal!important;
  align-items:center!important;
  overflow-wrap:anywhere;
}
html[data-variant-text-size="large"] :is(.vcard,.vh-card,.vhx-card,.field-feature-card,.info-card),
html[data-variant-text-size="xlarge"] :is(.vcard,.vh-card,.vhx-card,.field-feature-card,.info-card){
  height:auto!important;
  max-height:none!important;
  min-width:0!important;
  overflow-wrap:anywhere;
}
html[data-variant-text-size="large"] .field-feature-card p,
html[data-variant-text-size="xlarge"] .field-feature-card p{min-height:0!important}
html[data-variant-text-size="large"] :is(header,.header-brand,.header-brand-copy,.brand-sub,.layout,main,nav),
html[data-variant-text-size="xlarge"] :is(header,.header-brand,.header-brand-copy,.brand-sub,.layout,main,nav){min-width:0}
html[data-variant-text-size="large"] header,
html[data-variant-text-size="xlarge"] header{height:auto!important;max-height:none!important}
html[data-variant-text-size="large"] .header-brand-copy,
html[data-variant-text-size="xlarge"] .header-brand-copy{flex-wrap:wrap}
html[data-variant-text-size="large"] .brand-sub,
html[data-variant-text-size="xlarge"] .brand-sub{overflow-wrap:anywhere;line-height:1.25}

/* Settings and feedback dialogs reflow as text grows instead of clipping fields/buttons. */
.variant-display-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
html[data-variant-text-size="xlarge"] .variant-display-grid{grid-template-columns:1fr}
html[data-variant-text-size="large"] .variant-display-actions,
html[data-variant-text-size="xlarge"] .variant-display-actions,
html[data-variant-text-size="large"] .variant-feedback-actions,
html[data-variant-text-size="xlarge"] .variant-feedback-actions{flex-wrap:wrap}
html[data-variant-text-size="large"] .variant-display-actions button,
html[data-variant-text-size="xlarge"] .variant-display-actions button,
html[data-variant-text-size="large"] .variant-feedback-actions .vbtn,
html[data-variant-text-size="xlarge"] .variant-feedback-actions .vbtn{min-width:0;white-space:normal!important}

/* Keep 3D planner rows usable with larger labels: controls can wrap while the canvas stays untouched. */
html[data-variant-text-size="large"] :is(.v3dTopbar,.v3dTopMain,.v3dTopView,.v3dActions,.v3dFavoriteSelectRow),
html[data-variant-text-size="xlarge"] :is(.v3dTopbar,.v3dTopMain,.v3dTopView,.v3dActions,.v3dFavoriteSelectRow){min-width:0;flex-wrap:wrap}
html[data-variant-text-size="large"] :is(.v3dBtn,.v3dPickerTrigger,.v3dFavoriteToggle),
html[data-variant-text-size="xlarge"] :is(.v3dBtn,.v3dPickerTrigger,.v3dFavoriteToggle){height:auto!important;max-height:none!important;white-space:normal!important}