/* Dropdowns: native <select>, styled the same on the planning page (loaded by topbar.js; the
   #app selectors win over the artifact's own <style>) and on the server pages (base.html).
   Hairline control border, 8px control radius (pills keep 999), a chevron drawn in
   currentColor (so the status colours s-todo/s-prod/… colour it too), the sand focus ring,
   and an option list that follows the theme. Read-only selects lose the chevron (readonly.css). */
/* 15 Oct 2026: the chevron is quieter than the text (--caret), at full strength on hover and focus; the dialogs'
   selects (plan, new project: .modal) get the same chevron. */
:is(#app, .wrap, .modal) select:not([multiple]){
  appearance:none;-webkit-appearance:none;--caret:color-mix(in srgb,currentColor 40%,transparent);
  background-image:linear-gradient(45deg,transparent 50%,var(--caret) 50%),linear-gradient(135deg,var(--caret) 50%,transparent 50%);
  background-repeat:no-repeat;background-size:5px 5px,5px 5px;
  background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px);
  padding-right:28px;cursor:pointer;text-overflow:ellipsis;
  color-scheme:dark;
}
:is(#app, .wrap, .modal) select:not([multiple]):is(:hover,:focus){--caret:currentColor}
:is(#app, .wrap, .modal) select.inp{border-radius:8px}
:is(#app, .wrap, .modal) select.inp:not(:is(td *)){border:1px solid var(--line-2);background-color:var(--surface-2)}
:is(#app, .wrap, .modal) select.inp:hover{border-color:var(--ink-3)}
:is(#app, .wrap, .modal) select:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
:is(#app, .wrap) select:disabled{opacity:.5;cursor:not-allowed}
/* In the asset table the selects are inline: no border until hover or focus (the artifact's look). */
#app td select.inp{padding:5px 24px 5px 6px;background-position:calc(100% - 13px) calc(50% + 1px),calc(100% - 8px) calc(50% + 1px)}
#app td select.inp:is(:hover,:focus){border-color:var(--line-2);background-color:var(--surface)}
/* Status: a pill in its status colour; the chevron takes that colour. */
#app select.status{padding:4px 24px 4px 10px;background-size:4px 4px,4px 4px;
  background-position:calc(100% - 13px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px)}
#app select.status:hover{filter:brightness(1.08)}
/* The open list: readable in both themes. */
:is(#app, .wrap, .modal) select option{background-color:var(--surface);color:var(--ink);font-family:var(--body);text-transform:none;letter-spacing:0}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) :is(#app, .wrap, .modal) select{color-scheme:light}}
:root[data-theme="light"] :is(#app, .wrap, .modal) select{color-scheme:light}

/* Checkboxes, everywhere (planning page, server pages, the account modal's shadow root): a 16px box with a
   hairline from the text colour; checked is the one primary, cream with a dark tick. Locked ones for team
   read as a tick or nothing (readonly.css). */
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:0;vertical-align:-3px;
  border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);border-radius:4px;
  background:transparent no-repeat center/75% 75%;cursor:pointer;
}
input[type="checkbox"]:hover{border-color:color-mix(in srgb,var(--ink) 65%,transparent)}
input[type="checkbox"]:checked{
  background-color:var(--cream);border-color:color-mix(in srgb,var(--cream) 70%,var(--ink));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%230B0B09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
@media (prefers-reduced-motion:no-preference){
  input[type="checkbox"]{transition:background-color .15s cubic-bezier(.22,1,.36,1),border-color .15s cubic-bezier(.22,1,.36,1)}
}