/* ==========================================================================
   Teaching apps · shared interface kit — v1.0.0

   One house style for aLOTofImaginArches, UnBaAct and StressRealm: the same
   colours, the same type, the same containers, the same buttons. Each app
   keeps its own LAYOUT and its own DRAWING colours; this file owns the chrome
   around them.

   The file is vendored, byte for byte, into each repository:
     aLoTiA/docs/css/ui-kit.css
     UnBaAct/src/ui-kit.css
     StressRealm/app/ui-kit.css
   Change it in one place and copy it to the other two; the version above is
   how you tell whether a copy has fallen behind.

   Portability: nothing here needs a feature newer than Safari 15.4 / Chrome
   100 / Edge 100. No CSS nesting, no :has(), no container queries, no
   colour-mix, no web fonts. Selects are given an explicit appearance so that
   WebKit, Blink and Gecko draw the same control.
   ========================================================================== */

/* ------------------------------------------------------------- tokens ---- */
:root {
  /* Type. Arial is present on every target platform and renders identically
     in Safari, Chrome and Edge, which a system-ui stack does not. */
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: Georgia, "Times New Roman", serif;

  /* Surfaces */
  --page: #f4f6f2;
  --surface: #ffffff;
  --surface-muted: #eff5ee;
  --surface-sunken: #f4f7f2;
  --rail: #f0f4f0;

  /* Ink */
  --foreground: #213b3e;
  --foreground-soft: #46615e;
  --muted-foreground: #68807e;

  /* Line */
  --border: #dce5e2;
  --border-strong: #cbdad3;

  /* Accent */
  --primary: #157b70;
  --primary-strong: #10655c;
  --primary-foreground: #ffffff;
  --primary-soft: #e5f1eb;

  /* The brandmark tile: dark slate holding a mint glyph. */
  --brandmark-bg: #213b3e;
  --brandmark-fg: #b4e0c6;

  /* States */
  --destructive: #b34a32;
  --destructive-soft: #fbede7;
  --warning: #805e16;
  --warning-soft: #fff3d8;
  --success: #1b6a45;
  --success-soft: #e8f3ec;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 20px;
  --shadow-sm: 0 1px 4px rgba(34, 59, 60, 0.07);
  --shadow-pop: 0 8px 25px rgba(38, 62, 58, 0.14);

  /* Density. An app with a tight fixed dock may lower --control-font in its
     own stylesheet; everything else scales from these. */
  --control-font: 12px;
  --control-pad-y: 7px;
  --control-pad-x: 11px;
  --label-font: 11px;

  /* Aliases kept for the Tailwind theme in StressRealm. */
  --background: var(--surface);
  --muted: #edf3f0;

  color: var(--foreground);
  background: var(--page);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --------------------------------------------------------------- base ---- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--page);
}

a {
  color: var(--primary);
}

/* One focus ring for every interactive thing, in every app. */
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
canvas:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Scrolling regions: thin and quiet where the browser offers it. Left to the
   engine's own overlay bar elsewhere, because a hand-drawn ::-webkit-scrollbar
   is always visible and eats layout width. */
.ui-scroll,
.sidebar-content,
.panel-content {
  scrollbar-width: thin;
  scrollbar-color: #bbcec3 transparent;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------ buttons ---- */
/* The element itself carries the house button, so an app never has to opt in;
   .btn is there for anchors and labels that must pass for one. */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--foreground-soft);
  font: inherit;
  font-size: var(--control-font);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
button:hover,
.btn:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
}
button:active,
.btn:active {
  transform: translateY(1px);
}
button:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  transform: none;
}
button:disabled:hover {
  background: var(--surface);
  border-color: var(--border);
}

/* Filled: one per screen, the action the exercise is about. */
.primary,
.btn-primary,
button.armed {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.primary:hover,
.btn-primary:hover,
button.armed:hover {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  color: var(--primary-foreground);
}

/* Quiet: undo, clear, secondary escapes. */
.subtle,
.btn-ghost {
  color: var(--muted-foreground);
}

.danger,
.btn-danger {
  color: var(--destructive);
}
.danger:hover,
.btn-danger:hover {
  background: var(--destructive-soft);
  border-color: var(--destructive);
}

/* Pressed / selected, for toolbars of toggles. */
button[aria-pressed="true"],
button[aria-selected="true"],
button.active,
button.on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* ------------------------------------------------------------ tabstrip --- */
/* Two shapes only: the segmented rail (in a header) and the flat tab row
   (inside a panel). Everything else is a button. */
nav.segmented,
.tabs,
.inspector-tabs,
.view-tabs {
  display: flex;
  gap: 5px;
}
nav.segmented {
  background: var(--rail);
  padding: 5px;
  border-radius: 9px;
}
nav.segmented button {
  background: transparent;
  border: 0;
  padding: 9px 17px;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
}
nav.segmented button:hover {
  background: rgba(255, 255, 255, 0.6);
}
nav.segmented button.active,
nav.segmented button[aria-selected="true"] {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.tabs button,
.tabs .tab,
.inspector-tabs button,
.view-tabs button {
  font-size: var(--label-font);
  padding: 7px 11px;
}
.tabs .tab.active,
.tabs button.active,
.inspector-tabs button[aria-selected="true"],
.view-tabs button.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

/* ------------------------------------------------------------- inputs ---- */
select,
input[type="text"],
input[type="number"],
input[type="search"],
textarea {
  width: 100%;
  min-width: 0;
  padding: var(--control-pad-y) 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--foreground);
  font: inherit;
  font-size: var(--control-font);
}
input[type="number"],
.num,
.tabular {
  font-variant-numeric: tabular-nums;
}
textarea {
  font-family: var(--font-mono);
  line-height: 1.5;
  resize: vertical;
}
select:disabled,
input:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: default;
}
::placeholder {
  color: #93a5a0;
  opacity: 1;
}

/* The one control browsers disagree about: drawn by hand so Safari, Chrome
   and Edge show the same box and the same chevron. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2368807e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
}
select::-ms-expand {
  display: none;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

label {
  font-size: var(--label-font);
  color: var(--foreground-soft);
}

/* Label above control. */
.field {
  display: block;
  margin-bottom: 13px;
}
.field > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--label-font);
  color: var(--foreground-soft);
}
.field small {
  color: #83918c;
}

/* Checkbox beside its words. */
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: var(--control-font);
  color: var(--foreground-soft);
}
.check input {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0;
}

/* A file input dressed as a button. */
.import input[type="file"] {
  display: none;
}

/* ---------------------------------------------------------- containers --- */
.app-shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 9px;
  background: var(--brandmark-bg);
  color: var(--brandmark-fg);
  font-size: 21px;
  line-height: 1;
}
.brand h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.7px;
}
.brand p {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The outlined link that sits at the end of a header (guide, theory, docs). */
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font-size: var(--control-font);
  text-decoration: none;
}
.header-link:hover {
  background: var(--surface-muted);
}

/* A label, not a control. */
.pill,
.tag {
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* The card every app builds its workspace out of. */
.panel {
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2,
.panel-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}
.panel-content {
  padding: 14px;
}

/* The step number a panel is introduced by: 01 Build, 02 Experiment, … */
.number,
.panel-head h2 > span:first-child {
  font-size: 10px;
  color: var(--muted-foreground);
}

.section-label {
  margin: 18px 0 10px;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.eyebrow {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.divider {
  height: 1px;
  margin: 12px 0;
  background: var(--border);
}

/* ------------------------------------------------------------ readouts --- */
.metrics {
  display: flex;
  gap: 8px;
}
.metric,
.metrics > div {
  flex: 1;
  min-width: 0;
}
.metric {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.metrics small,
.metric small {
  font-size: 10px;
  letter-spacing: 0.7px;
  color: var(--muted-foreground);
}
.metrics strong,
.metric b {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Explanatory prose inside a panel. */
.help,
.hint {
  font-size: var(--control-font);
  line-height: 1.6;
  color: var(--muted-foreground);
}
.callout {
  margin-top: 14px;
  padding: 13px;
  border-radius: var(--radius);
  background: var(--surface-muted);
  font-size: var(--control-font);
  line-height: 1.6;
}
.callout strong {
  color: var(--primary);
}

/* A verdict strip: neutral, good, or not. */
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-muted);
  font-size: var(--control-font);
}
.status.ok {
  background: var(--success-soft);
  color: var(--success);
}
.status.warn,
.status.on {
  background: var(--warning-soft);
  color: var(--warning);
}
.status.bad,
.status.outside {
  background: var(--destructive-soft);
  color: var(--destructive);
}
.error {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--destructive-soft);
  color: var(--destructive);
  font-size: var(--control-font);
}

.legend {
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: var(--muted-foreground);
}
.dot,
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--primary);
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.mini-table th,
.mini-table td {
  padding: 8px 5px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mini-table th {
  color: var(--muted-foreground);
  font-weight: 600;
}
.mini-table th:first-child,
.mini-table td:first-child {
  text-align: left;
}

footer,
.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted-foreground);
}
footer p {
  margin: 0;
}
footer a,
.footer a {
  color: var(--primary);
}

/* ------------------------------------------------------- menus, modals --- */
.app-menu {
  position: relative;
  margin: 0;
  font-size: var(--control-font);
}
.app-menu > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--control-pad-y) var(--control-pad-x);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--foreground-soft);
  list-style: none;
  cursor: pointer;
}
.app-menu > summary::-webkit-details-marker {
  display: none;
}
.app-menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 5;
  width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.app-menu nav button {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  justify-content: flex-start;
}

dialog {
  width: calc(100% - 32px);
  max-width: 580px;
  max-height: 85dvh;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--foreground);
  overflow: auto;
}
dialog::backdrop {
  background: rgba(24, 52, 44, 0.44);
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.dialog-heading h2 {
  margin: 0;
  font-size: 20px;
}
dialog h1 {
  margin: 14px 0;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -1px;
}
dialog p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
dialog a {
  color: var(--primary);
}

details > summary {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}