/* lao.css — shared design system for the lao apps.
   Neutral greys (the interface never competes with the colours being judged),
   IBM Plex type, light and dark themes. Every app loads this file first, then its own css. */

:root {
  color-scheme: light;
  --bg: #ebebeb;
  --surface: #f6f6f6;
  --raise: #ffffff;
  --ink: #1c1c1c;
  --muted: #666666;
  --line: #d4d4d4;
  --line-strong: #b4b4b4;
  --accent: #1c1c1c;
  --accent-ink: #ffffff;
  --accent-soft: #e2e2e2;
  --sel-bg: #dcdcdc;
  --sel-line: #9a9a9a;
  --warn: #2a2a2a;
  --warn-bg: #e6e6e6;
  --stage: #474747;
  --shadow: rgba(0, 0, 0, 0.08);
  --r: 6px;
  --f-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #121212;
    --surface: #1a1a1a;
    --raise: #232323;
    --ink: #ececec;
    --muted: #9a9a9a;
    --line: #303030;
    --line-strong: #464646;
    --accent: #ececec;
    --accent-ink: #141414;
    --accent-soft: #333333;
    --sel-bg: #3a3a3a;
    --sel-line: #6a6a6a;
    --warn: #e0e0e0;
    --warn-bg: #2c2c2c;
    --stage: #0d0d0d;
    --shadow: rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #121212;
  --surface: #1a1a1a;
  --raise: #232323;
  --ink: #ececec;
  --muted: #9a9a9a;
  --line: #303030;
  --line-strong: #464646;
  --accent: #ececec;
  --accent-ink: #141414;
  --accent-soft: #333333;
  --sel-bg: #3a3a3a;
  --sel-line: #6a6a6a;
  --warn: #e0e0e0;
  --warn-bg: #2c2c2c;
  --stage: #0d0d0d;
  --shadow: rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
/* top/bottom safe-area insets are already applied on :root by the page wrapper; do not repeat them here */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--f-ui);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- top bar: app name on the left, tools after it ---------- */
.lao-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.lao-mark {
  font: 600 15px/1 var(--f-cond);
  letter-spacing: 0.02em;
  margin-right: 4px;
}
.lao-mark small {
  font: 400 12px var(--f-ui);
  color: var(--muted);
  margin-left: 8px;
  letter-spacing: 0;
}
.lao-grp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.lao-sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin-inline: 2px;
}
.lao-spacer {
  flex: 1;
}

/* ---------- buttons, toggles, segmented controls ---------- */
.lao-btn {
  font: 500 13px var(--f-ui);
  color: var(--ink);
  background: var(--raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 5px 11px;
  min-height: 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.lao-btn:hover:not(:disabled) {
  border-color: var(--ink);
}
.lao-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.lao-btn.primary {
  /* an action: outlined, not filled */
  background: var(--raise);
  border: 1.5px solid var(--ink);
  padding: 4.5px 10.5px;
  color: var(--ink);
}
.lao-btn.small {
  padding: 3px 9px;
  min-height: 24px;
  font-size: 12.5px;
}
.lao-btn[aria-pressed='true'],
.lao-btn[aria-checked='true'] {
  /* a state: soft grey fill */
  background: var(--sel-bg);
  border-color: var(--sel-line);
  color: var(--ink);
  font-weight: 500;
}
.lao-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}
.lao-seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--raise);
}
.lao-seg button {
  border: 0;
  background: transparent;
  padding: 5px 12px;
  cursor: pointer;
  color: var(--muted);
}
.lao-seg button + button {
  border-left: 1px solid var(--line-strong);
}
.lao-seg button[aria-pressed='true'] {
  background: var(--sel-bg);
  color: var(--ink);
  font-weight: 500;
}
.lao-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.lao-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- sliders and number fields ---------- */
.lao-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.lao-field input[type='range'] {
  accent-color: var(--accent);
  min-width: 0;
}
.lao-field output,
.lao-val {
  font: 12px var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 3.4em;
  text-align: right;
}
.lao-num {
  font: 13px var(--f-mono);
  background: var(--raise);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 4px 7px;
  width: 78px;
}
input[type='text'].lao-num,
.lao-input {
  font: 13px var(--f-ui);
  background: var(--raise);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 6px 9px;
  min-width: 0;
}

/* ---------- panels and text ---------- */
.lao-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.lao-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.lao-title {
  font: 600 14px var(--f-cond);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.lao-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}
.lao-mono {
  font-family: var(--f-mono);
  font-size: 12px;
}
.lao-chip {
  border: 1px solid var(--shadow);
  border-radius: 4px;
}
.lao-warn {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 8px 12px;
  font-size: 13px;
}
.lao-pane-text {
  width: 100%;
  resize: vertical;
  font: 12px var(--f-mono);
  padding: 8px 10px;
  background: var(--raise);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
}

/* ---------- toast ---------- */
.lao-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 14px;
  border-radius: var(--r);
  font-size: 13px;
  max-width: min(90vw, 560px);
  box-shadow: 0 2px 8px var(--shadow);
}
.lao-toast.warn {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--line-strong);
}

/* ---------- draggable column divider ---------- */
.lao-splitter {
  cursor: col-resize;
  touch-action: none;
  position: relative;
}
.lao-splitter::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--line-strong);
  border-radius: 2px;
  transition: background 0.15s;
}
.lao-splitter:hover::before,
.lao-splitter.dragging::before {
  background: var(--ink);
}
.lao-splitter:focus-visible {
  outline-offset: -2px;
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .lao-bar {
    gap: 6px 10px;
  }
  .lao-field input[type='range'] {
    max-width: 120px;
  }
}