/* Shared polygon control; includes controls created inside app demos. */
body select,
body .cad-controls select,
body .experiment-controls select,
body .app-demo-surface select,
body .study-speed select {
  appearance:none;
  -webkit-appearance:none;
  color-scheme:dark;
  min-width:0;
  min-height:52px;
  padding:14px 48px 14px 18px;
  border:1px solid #617353;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  background-color:#202d24;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 6 5-6' fill='none' stroke='%23c8fa68' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E"),linear-gradient(120deg,#2c3a2c,#1d2922);
  background-position:right 17px center,0 0;
  background-size:20px 20px,100% 100%;
  background-repeat:no-repeat;
  font:500 14px/1.5 var(--font-display);
  color:var(--text);
  box-shadow:inset 3px 0 0 #718a58;
  cursor:pointer;
  transition:background-color .16s,border-color .16s,box-shadow .16s;
}
body select:hover:not(:disabled) {border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent),inset 0 0 24px #c8fa680b;}
body select:focus-visible {outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);}
body select:disabled {opacity:.5;cursor:not-allowed;box-shadow:none;}
body select option {background:#1e2b23;color:var(--text);}
@supports (appearance:base-select) {
  body select,
  body .cad-controls select,
  body .experiment-controls select,
  body .app-demo-surface select,
  body .study-speed select {
    appearance:base-select;
    background-image:linear-gradient(120deg,#2c3a2c,#1d2922);
    padding-right:18px;
    gap:16px;
    white-space:normal;
    overflow-wrap:anywhere;
    align-items:center;
  }
  body select::picker-icon {
    content:'';
    display:block;
    width:20px;
    height:20px;
    flex:0 0 20px;
    align-self:center;
    margin:0 0 0 auto;
    line-height:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 6 5-6' fill='none' stroke='%23c8fa68' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center/20px 20px no-repeat;
    transform-origin:50% 50%;
    transition:rotate .18s;
  }
  body select:open::picker-icon {rotate:180deg;}
  body select:open {border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);}
  body select::picker(select) {
    appearance:base-select;
    color-scheme:dark;
    border:1px solid #71895b;
    border-radius:0;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    background:linear-gradient(145deg,#26362a,#18241d);
    color:var(--text);
    padding:7px;
    margin-block:7px;
    max-height:min(380px,60dvh);
    max-width:calc(100vw - 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#72865d #1b2920;
  }
  body select option {
    display:flex;
    align-items:center;
    gap:14px;
    min-height:46px;
    padding:12px 15px;
    border:0;
    border-left:2px solid transparent;
    background:transparent;
    font:400 14px/1.5 var(--font-display);
    white-space:normal;
    overflow-wrap:anywhere;
    cursor:pointer;
  }
  body select option+option {border-top:1px solid #91a77816;}
  body select option:hover,body select option:focus {outline:none;background:#c8fa6814;border-left-color:var(--accent);}
  body select option:checked {background:#c8fa681d;color:var(--accent);font-weight:500;border-left-color:var(--accent);}
  body select option::checkmark {order:1;margin-left:auto;color:var(--accent);flex-shrink:0;}
  body select option:disabled {opacity:.45;cursor:not-allowed;}
}
@media (prefers-reduced-motion:reduce) {body select,body select::picker-icon{transition:none;}}