/* ==========================================================================
   controls.css — control kit.

   Note: the `.aqua-*` class names are retained as stable identifiers used
   across every app module. They no longer imply the Aqua look.
   ========================================================================== */

/* ---------------- Push buttons ---------------- */
/* System 7 push buttons were rounded rectangles: 1px black outline, white
   fill, and a straight invert when pressed. */
.aqua-btn {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 2px 14px;
  min-height: 20px;
  font-size: 12px;
  color: #ffffff;
  background: #113ac5;
  white-space: nowrap;
}
.aqua-btn:active,
.aqua-btn.active { background: #ffffff; color: #113ac5; }
.aqua-btn:disabled { color: #889ce2; border-color: #889ce2; }
.aqua-btn:disabled:active { background: #113ac5; color: #889ce2; }

/* The default button wore a heavy ring. */
.aqua-btn.default { box-shadow: 0 0 0 2px #ffffff; margin: 2px; }

.aqua-btn.small { font-size: 11px; padding: 1px 10px; min-height: 17px; border-radius: 7px; }
.aqua-btn.round { border-radius: 999px; }

.aqua-btn:focus-visible { outline: 2px dotted #ffffff; outline-offset: 1px; }

/* ---------------- Text fields ---------------- */
.aqua-field {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #ffffff;
  border-radius: 0;
  background: #113ac5;
  padding: 2px 5px;
  font-size: 12px;
  user-select: text; -webkit-user-select: text;
  cursor: text;
  min-width: 0;
}
.aqua-field:focus { outline: none; box-shadow: inset 0 0 0 1px #ffffff; }
.aqua-field.search {
  padding-left: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.6 1.6a5 5 0 1 0 3.06 8.95l3.4 3.4 1.3-1.3-3.4-3.4A5 5 0 0 0 6.6 1.6zm0 1.6a3.4 3.4 0 1 1 0 6.8 3.4 3.4 0 0 1 0-6.8z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 4px center; background-size: 11px;
}
textarea.aqua-field { resize: none; }

/* ---------------- Checkbox / radio ---------------- */
.aqua-check, .aqua-radio {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1.3;
}
.aqua-check input, .aqua-radio input {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px; margin: 0; flex: none;
  border: 1px solid #ffffff;
  background: #113ac5;
  position: relative;
  border-radius: 0;
}
.aqua-radio input { border-radius: 50%; }
/* A checked System 7 box held an X, not a tick. */
.aqua-check input:checked::after {
  content: ""; position: absolute; inset: 1px;
  background:
    linear-gradient(45deg, transparent 43%, #ffffff 43%, #ffffff 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #ffffff 43%, #ffffff 57%, transparent 57%);
}
.aqua-radio input:checked::after {
  content: ""; position: absolute; inset: 2.5px;
  border-radius: 50%; background: #ffffff;
}
.aqua-check input:disabled, .aqua-radio input:disabled { border-color: #889ce2; }
.aqua-check input:focus-visible, .aqua-radio input:focus-visible { outline: 1px dotted #ffffff; outline-offset: 1px; }

/* ---------------- Popup menu ---------------- */
/* A bordered box with a hard shadow and a solid down-arrow badge. */
.aqua-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #ffffff;
  border-radius: 0;
  padding: 1px 22px 1px 7px;
  min-height: 19px;
  font-size: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3.5h8L5 8z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat right 5px center / 9px 9px,
    #113ac5;
  box-shadow: 1px 1px 0 #ffffff;
}
.aqua-select:focus { outline: none; box-shadow: 1px 1px 0 #ffffff, inset 0 0 0 1px #ffffff; }
.aqua-select:disabled { color: #889ce2; border-color: #889ce2; box-shadow: none; }

/* ---------------- Slider ---------------- */
.aqua-slider {
  appearance: none; -webkit-appearance: none;
  background: transparent; height: 16px; width: 130px; margin: 0;
}
.aqua-slider::-webkit-slider-runnable-track {
  height: 4px;
  border: 1px solid #ffffff;
  background: #113ac5;
}
.aqua-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 9px; height: 14px; margin-top: -6px;
  border: 1px solid #ffffff;
  background: #113ac5;
  border-radius: 0;
}
.aqua-slider::-webkit-slider-thumb:active { background: #ffffff; }
.aqua-slider::-moz-range-track { height: 4px; border: 1px solid #ffffff; background: #113ac5; }
.aqua-slider::-moz-range-thumb { width: 9px; height: 14px; border: 1px solid #ffffff; background: #113ac5; border-radius: 0; }
.aqua-slider:focus { outline: none; }

/* ---------------- Progress ---------------- */
.aqua-progress {
  height: 12px;
  border: 1px solid #ffffff;
  background: #113ac5;
  padding: 1px;
  border-radius: 0;
  overflow: hidden;
}
.aqua-progress > div {
  height: 100%;
  background-image: var(--d75);
  background-size: 4px 4px;
  image-rendering: pixelated;
  transition: width .18s linear;
}
.aqua-progress.indeterminate > div {
  width: 100% !important;
  background-image: var(--d50);
  background-size: 2px 2px;
  animation: barber .5s steps(2) infinite;
}
@keyframes barber { to { background-position: 4px 0; } }

.spinner-sm {
  width: 12px; height: 12px;
  border: 1px solid #ffffff;
  background-image: var(--d50); background-size: 2px 2px;
  image-rendering: pixelated;
  animation: blinkbox .4s steps(2) infinite;
}
@keyframes blinkbox { 50% { background-position: 1px 1px; } }

/* ---------------- Segmented control ---------------- */
.aqua-seg { display: inline-flex; }
.aqua-seg button {
  border: 1px solid #ffffff; border-right-width: 0;
  background: #113ac5;
  padding: 1px 8px; min-height: 19px; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 0;
}
.aqua-seg button:last-child { border-right-width: 1px; }
.aqua-seg button:active,
.aqua-seg button.on { background: #ffffff; }
.aqua-seg button svg { width: 12px; height: 12px; fill: #ffffff; }
.aqua-seg button:active svg,
.aqua-seg button.on svg { fill: #113ac5; }
.aqua-seg button:disabled svg { fill: #889ce2; }

/* ---------------- Scroll bars ---------------- */
/* Dithered trough, hollow thumb, square stepper arrows at both ends. */
.scroller { overflow: auto; overscroll-behavior: contain; }
.scroller::-webkit-scrollbar { width: 15px; height: 15px; }
.scroller::-webkit-scrollbar-track {
  background-image: var(--d50);
  background-size: 2px 2px;
  image-rendering: pixelated;
  border-left: 1px solid #ffffff;
}
.scroller::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid #ffffff; }
.scroller::-webkit-scrollbar-thumb {
  background: #113ac5;
  border: 1px solid #ffffff;
  border-radius: 0;
  min-height: 24px;
}
.scroller::-webkit-scrollbar-thumb:active { background-image: var(--d25); background-size: 4px 4px; }
.scroller::-webkit-scrollbar-button { background: #113ac5; border: 1px solid #ffffff; background-repeat: no-repeat; background-position: center; }
.scroller::-webkit-scrollbar-button:vertical:decrement {
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2l4 6H1z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 8px;
}
.scroller::-webkit-scrollbar-button:vertical:increment {
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 8L1 2h8z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 8px;
}
.scroller::-webkit-scrollbar-button:horizontal:decrement {
  width: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l6-4v8z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 8px;
}
.scroller::-webkit-scrollbar-button:horizontal:increment {
  width: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8 5L2 9V1z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 8px;
}
/* Kill the phantom double-arrow slots WebKit adds at the far ends. */
.scroller::-webkit-scrollbar-button:vertical:decrement:end,
.scroller::-webkit-scrollbar-button:vertical:increment:start,
.scroller::-webkit-scrollbar-button:horizontal:decrement:end,
.scroller::-webkit-scrollbar-button:horizontal:increment:start { display: none; }
.scroller::-webkit-scrollbar-corner { background: #113ac5; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; }
.scroller { scrollbar-width: thin; scrollbar-color: #113ac5 #5b77d7; }

/* ---------------- Lists / tables ---------------- */
.aqua-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.aqua-table thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-weight: normal; font-size: 11px; color: #ffffff;
  padding: 2px 7px; height: 18px;
  background: #113ac5;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  white-space: nowrap; cursor: default;
}
.aqua-table thead th:last-child { border-right: 0; }
.aqua-table thead th:active,
.aqua-table thead th.sorted { background-image: var(--d25); background-size: 4px 4px; image-rendering: pixelated; }
.aqua-table tbody td { padding: 1px 7px; height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aqua-table tbody tr.sel { background: #ffffff !important; color: #113ac5; }
.aqua-table tbody tr.sel .dim { color: #113ac5; }
.aqua-table .dim { color: #ffffff; }

/* ---------------- Menus ---------------- */
.aqua-menu {
  position: absolute;
  min-width: 160px;
  padding: 2px 0;
  border: 1px solid #ffffff;
  border-radius: 0;
  background: #113ac5;
  box-shadow: var(--drop);
  font-size: 12px;
  z-index: 100;
}
.menu-row {
  display: flex; align-items: center; gap: 10px;
  padding: 1px 16px 1px 20px; height: 18px;
  white-space: nowrap; position: relative;
}
/* Disabled items were drawn in 50% dither, so they read as "greyed out". */
.menu-row.disabled { color: #7990de; }
.menu-row:not(.disabled):hover { background: #ffffff; color: #113ac5; }
.menu-row .key { margin-left: auto; padding-left: 18px; }
.menu-row .tick { position: absolute; left: 6px; }
.menu-row .sub-arrow { margin-left: auto; padding-left: 14px; font-size: 9px; }
.menu-sep {
  height: 1px; margin: 3px 0;
  background-image: var(--d50); background-size: 2px 2px;
  image-rendering: pixelated;
}

/* ---------------- Dialogs, alerts, sheets ---------------- */
/* System 7 had no sheets; both render as a modal dialog box. */
.sheet-backdrop { position: absolute; inset: 0; background: transparent; }

.sheet, .alert-window {
  position: absolute;
  background: #113ac5;
  border: 2px solid #ffffff;
  border-radius: 0;
  box-shadow: var(--drop);
  padding: 16px 18px 14px;
}
.sheet { min-width: 380px; }
.alert-window { width: 400px; }

.alert-body { display: flex; gap: 14px; }
.alert-icon { width: 40px; height: 40px; flex: none; }
.alert-icon svg { width: 100%; height: 100%; }
.alert-title { font-size: 12px; margin-bottom: 6px; }
.alert-text { font-size: 11px; line-height: 1.45; user-select: text; -webkit-user-select: text; }
.alert-buttons, .sheet-buttons {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px;
}

/* Buttons inside a dialog are square, like the rest of the chrome. Listed
   after .aqua-btn.small so it wins on source order at equal specificity. */
.sheet .aqua-btn,
.sheet .aqua-btn.small,
.alert-window .aqua-btn,
.alert-window .aqua-btn.small { border-radius: 0; }

.form-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.form-row > label:first-child { width: 112px; text-align: right; font-size: 12px; flex: none; }
.form-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.form-grid > label { text-align: right; font-size: 12px; }
.hint { font-size: 10px; line-height: 1.4; color: #b0bdec; }

/* ---------------- Misc ---------------- */
.sep-v { width: 1px; align-self: stretch; background: #ffffff; margin: 3px 4px; }
.spacer { flex: 1; }
.mono { font-family: Monaco, "Courier New", monospace; }
.selectable { user-select: text; -webkit-user-select: text; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.centered { display: flex; align-items: center; justify-content: center; }