/* Growth & Ember hard-edged UI parts, shared by russ/ and op/ (build spec 6.1).
   No curved boxes anywhere: border-radius 0 on every box, button, field and tab.
   Satisfying to click: an instant pressed state, a solid selected state, no layout shift,
   targets of at least 44 px on the phone, visible keyboard focus. Colour is sparing. */

:root {
  --ge-black: #000;
  --ge-white: #fff;
  --ge-grey-1: #f2f2f2;
  --ge-grey-2: #d0d0d0;
  --ge-grey-3: #6b6b6b;
  --ge-action: #1546ff;
  --ge-record: #d00000;
  --ge-line: 1px solid var(--ge-black);
  --ge-target: 44px;
}

*, *::before, *::after { border-radius: 0 !important; }

.ge-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ge-target); min-width: var(--ge-target); padding: 0 16px;
  font: inherit; color: var(--ge-black); background: var(--ge-white);
  border: var(--ge-line); cursor: pointer; user-select: none;
  transition: none;
}
.ge-button:hover { background: var(--ge-grey-1); }
.ge-button:active, .ge-button[aria-pressed="true"] { background: var(--ge-black); color: var(--ge-white); }
.ge-button--action { background: var(--ge-action); border-color: var(--ge-action); color: var(--ge-white); }
.ge-button--record { background: var(--ge-record); border-color: var(--ge-record); color: var(--ge-white); }
.ge-button--square { width: var(--ge-target); padding: 0; }
.ge-button:disabled, .ge-button[aria-disabled="true"] { color: var(--ge-grey-3); border-color: var(--ge-grey-2); background: var(--ge-grey-1); cursor: default; }

:where(.ge-button, .ge-tab, input, select, textarea, a):focus-visible { outline: 3px solid var(--ge-action); outline-offset: 2px; }

.ge-panels { display: grid; grid-template-columns: 1fr 1fr; min-height: 100%; }
.ge-panel { padding: 16px; overflow: auto; }
.ge-panel + .ge-panel { border-left: var(--ge-line); }

.ge-tabs { display: flex; border-bottom: var(--ge-line); }
.ge-tab {
  min-height: var(--ge-target); padding: 0 20px; font: inherit; background: var(--ge-white);
  border: 0; border-right: var(--ge-line); cursor: pointer;
}
.ge-tab[aria-selected="true"] { background: var(--ge-black); color: var(--ge-white); }
.ge-tab[aria-disabled="true"] { color: var(--ge-grey-2); cursor: default; }

.ge-field { min-height: var(--ge-target); padding: 0 10px; font: inherit; border: var(--ge-line); background: var(--ge-white); }

.ge-save-state { font-size: 0.875rem; color: var(--ge-grey-3); }
.ge-save-state[data-state="error"] { color: var(--ge-record); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }