/* VENDORED COPY of packages/ui/src/controls.css (this app has no bundler; build.mjs copies src/ as-is). Re-copy after changing the original. */
/* Octopus Twin form controls — no browser-native look anywhere (checkbox, radio, range, number, search, file, select menus).
 * Every rule is wrapped in :where() so it has zero specificity: an app's own control styles always win.
 * Theme through the --oc-* variables (defaults follow the dark console tokens and each app's --accent / --text):
 *   --oc-accent  selected / focus colour        --oc-text   text on controls
 *   --oc-field   control background             --oc-dim    secondary text, chevrons
 *   --oc-line    control border                 --oc-pop    menu background
 *   --oc-hover   option highlight               --oc-on     tick colour on the accent
 * Select menus are the Dropdown component (components/Controls.tsx); the native <select> popup cannot be styled. */
:root {
  --oc-accent: var(--accent, #6fb6ff);
  --oc-text: var(--text, #dbe5ee);
  --oc-dim: var(--dim, #8796a6);
  --oc-field: var(--panel2, #151e29);
  --oc-line: var(--line2, #2d3b4d);
  --oc-pop: var(--panel, #111821);
  --oc-hover: color-mix(in srgb, var(--oc-accent) 16%, transparent);
  --oc-on: #0b0f14;
}

/* ---------- checkbox + radio */
:where(input[type='checkbox'], input[type='radio']) {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  vertical-align: -3px;
  border: 1.5px solid var(--oc-line);
  border-radius: 4px;
  background: var(--oc-field);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
:where(input[type='radio']) { border-radius: 50%; }
:where(input[type='checkbox'])::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--oc-on);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6l4.6-5.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6l4.6-5.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.12s;
}
:where(input[type='radio'])::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oc-on);
  transform: scale(0);
  transition: transform 0.12s;
}
:where(input[type='checkbox'], input[type='radio']):hover { border-color: var(--oc-accent); }
:where(input[type='checkbox'], input[type='radio']):checked { background: var(--oc-accent); border-color: var(--oc-accent); }
:where(input[type='checkbox'], input[type='radio']):checked::before { transform: scale(1); }
:where(input[type='checkbox']):indeterminate { background: var(--oc-accent); border-color: var(--oc-accent); }
:where(input[type='checkbox']):indeterminate::before { transform: scale(1); height: 2px; border-radius: 1px; -webkit-mask: none; mask: none; }
:where(input[type='checkbox'], input[type='radio']):focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-accent) 35%, transparent); }
:where(input[type='checkbox'], input[type='radio']):disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- range */
:where(input[type='range']) {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: auto;
}
:where(input[type='range'])::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--oc-line); }
:where(input[type='range'])::-moz-range-track { height: 4px; border-radius: 2px; background: var(--oc-line); }
:where(input[type='range'])::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--oc-accent); }
:where(input[type='range'])::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--oc-accent);
  border: 2px solid var(--oc-pop);
  box-shadow: 0 0 0 1px var(--oc-accent), 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s;
}
:where(input[type='range'])::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--oc-accent);
  border: 2px solid var(--oc-pop);
  box-shadow: 0 0 0 1px var(--oc-accent), 0 1px 3px rgba(0, 0, 0, 0.4);
}
:where(input[type='range']):hover::-webkit-slider-thumb { transform: scale(1.15); }
:where(input[type='range']):focus-visible { outline: none; }
:where(input[type='range']):focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc-accent) 35%, transparent); }
:where(input[type='range']):focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc-accent) 35%, transparent); }
:where(input[type='range']):disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- number, search, text fields: no spinners, no clear button, no autofill tint */
:where(input[type='number']) { -moz-appearance: textfield; appearance: textfield; }
:where(input[type='number'])::-webkit-inner-spin-button,
:where(input[type='number'])::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:where(input[type='search']) { -webkit-appearance: none; appearance: none; }
:where(input[type='search'])::-webkit-search-cancel-button,
:where(input[type='search'])::-webkit-search-decoration { -webkit-appearance: none; display: none; }
:where(input):-webkit-autofill { -webkit-text-fill-color: var(--oc-text); -webkit-box-shadow: 0 0 0 40px var(--oc-field) inset; transition: background-color 9999s; }

/* ---------- file */
:where(input[type='file']) { color: var(--oc-dim); font: inherit; font-size: 12px; }
:where(input[type='file'])::file-selector-button {
  font: inherit;
  font-size: 12px;
  color: var(--oc-text);
  background: var(--oc-field);
  border: 1px solid var(--oc-line);
  border-radius: 7px;
  padding: 5px 10px;
  margin-right: 8px;
  cursor: pointer;
}
:where(input[type='file'])::file-selector-button:hover { border-color: var(--oc-accent); }

/* ---------- Dropdown (components/Controls.tsx) */
.oc-dd-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--oc-text);
  background: var(--oc-field);
  border: 1px solid var(--oc-line);
  border-radius: 7px;
  padding: 6px 9px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.oc-dd-btn.sm { font-size: 12px; padding: 4px 7px; border-radius: 6px; }
.oc-dd-btn.block { display: flex; width: 100%; }
.oc-dd-btn:hover { border-color: color-mix(in srgb, var(--oc-accent) 60%, var(--oc-line)); }
.oc-dd-btn:focus-visible,
.oc-dd-btn[aria-expanded='true'] { outline: none; border-color: var(--oc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-accent) 22%, transparent); }
.oc-dd-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.oc-dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-dd-val.ph { color: var(--oc-dim); }
.oc-dd-chev { width: 10px; height: 6px; flex: none; fill: none; stroke: var(--oc-dim); stroke-width: 1.5; transition: transform 0.15s; }
.oc-dd-btn[aria-expanded='true'] .oc-dd-chev { transform: rotate(180deg); }
.oc-dd-pop {
  position: fixed;
  z-index: 10000;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: min(320px, 60vh);
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--oc-pop);
  color: var(--oc-text);
  border: 1px solid var(--oc-line);
  border-radius: 9px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  font-size: 12.5px;
  outline: none;
  animation: oc-dd-in 0.12s ease-out;
}
@keyframes oc-dd-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.oc-dd-pop li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; cursor: pointer; user-select: none; white-space: nowrap; }
.oc-dd-pop li .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oc-dd-pop li .hint { color: var(--oc-dim); font-size: 11px; }
.oc-dd-pop li svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--oc-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.oc-dd-pop li.act { background: var(--oc-hover); }
.oc-dd-pop li.on { color: var(--oc-accent); font-weight: 600; }
.oc-dd-pop li.on svg { visibility: visible; }
.oc-dd-pop li[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.oc-dd-pop li.grp { cursor: default; color: var(--oc-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 9px 4px; }
@media (pointer: coarse) { .oc-dd-pop li { padding: 10px 11px; font-size: 14px; } .oc-dd-btn { font-size: 14px; } }

/* ---------- DateField */
.oc-date { display: inline-flex; align-items: stretch; gap: 4px; min-width: 0; }
.oc-date input { min-width: 0; flex: 1; }
.oc-date input[aria-invalid='true'] { border-color: #e5484d; }
.oc-date-btn { flex: none; display: grid; place-items: center; width: 30px; border-radius: 7px; border: 1px solid var(--oc-line); background: var(--oc-field); color: var(--oc-dim); cursor: pointer; }
.oc-date-btn:hover, .oc-date-btn[aria-expanded='true'] { color: var(--oc-text); border-color: var(--oc-accent); }
.oc-cal { position: fixed; z-index: 10000; padding: 10px; width: 244px; background: var(--oc-pop); color: var(--oc-text); border: 1px solid var(--oc-line); border-radius: 10px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35); font-size: 12px; animation: oc-dd-in 0.12s ease-out; outline: none; }
.oc-cal-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.oc-cal-h b { font-weight: 600; font-size: 12.5px; }
.oc-cal-h button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--oc-line); background: var(--oc-field); color: var(--oc-text); cursor: pointer; font: inherit; line-height: 1; }
.oc-cal-h button:hover { border-color: var(--oc-accent); }
.oc-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.oc-cal-g span { color: var(--oc-dim); font-size: 10.5px; padding: 3px 0; }
.oc-cal-g button { height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--oc-text); font: inherit; cursor: pointer; }
.oc-cal-g button.out { color: var(--oc-dim); opacity: 0.6; }
.oc-cal-g button:hover, .oc-cal-g button.act { background: var(--oc-hover); }
.oc-cal-g button.on { background: var(--oc-accent); color: var(--oc-on); font-weight: 600; }
.oc-cal-g button.today:not(.on) { box-shadow: inset 0 0 0 1px var(--oc-accent); }
.oc-cal-f { display: flex; justify-content: space-between; margin-top: 8px; }
.oc-cal-f button { border: 0; background: none; color: var(--oc-accent); font: inherit; cursor: pointer; padding: 4px 2px; }