/* =============================================================================
   base.css  —  Endeavos Online SOW
   Design tokens, CSS reset, typography, utility classes, and shared components
   (buttons, checkboxes, radio segments, toast notifications).
   This file is a dependency of all other CSS files.
============================================================================= */

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --orange:       #E8741E;
  --orange-soft:  #fbeadd;
  --accent2:      #d3640f;   /* darker orange for hover states */

  /* Neutral palette */
  --ink:          #2b2f36;
  --ink-soft:     #5b626c;
  --line:         #e3e6ea;
  --line-strong:  #c9cdd3;
  --bg:           #f4f5f7;
  --card:         #ffffff;

  /* Semantic colours */
  --ok:           #1f9d63;
  --warn:         #d97706;
  --danger:       #dc2626;

  /* ── Typography — fonts ───────────────────────────────────────────────── */
  --font-ui:      "IBM Plex Mono", monospace;   /* one font for all UI, per Typography Standard */
  --font-hint:    "Hanken Grotesk", sans-serif; /* italic description/help text only */
  --font-label:   var(--font-ui);
  --font-btn:     var(--font-ui);
  --font-entered: var(--font-ui);

  /* ── Typography — sizes ───────────────────────────────────────────────── */
  --t-label:   12px;    /* section labels, dialog headers, prefixes */
  --t-body:    11px;    /* inputs, body text, sub-items, upload fields */
  --t-hint:    11.5px;  /* Hanken Grotesk italic hint/help text */
  --t-ph:      11px;    /* all placeholder text (before & after Tab) */
  --t-arrow:   10px;    /* collapse/expand arrows */
  --t-btn:     12px;    /* button text */

  /* ── Typography — weights ─────────────────────────────────────────────── */
  --w-label:   700;     /* section labels, strong labels, prefixes */
  --w-option:  600;     /* radio/option rows, buttons, selected items */
  --w-body:    400;     /* body text, inputs */

  /* ── Typography — placeholder color ──────────────────────────────────── */
  --c-muted:   #aab0b8; /* all placeholder text color */

  /* Shared radius / shadow */
  --radius:       10px;
  --shadow:       0 1px 2px rgba(20,24,30,.04),
                  0 8px 24px rgba(20,24,30,.06);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: "Hanken Grotesk", sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

.link {
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--orange);
  font-size: 12px;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  cursor: pointer;
  transition: .15s;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
}
.btn-primary:hover { background: var(--accent2); }

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink-soft); }

/* ── Checkbox / Radio shared style ─────────────────────────────────────────
   APP-WIDE STANDARD. These rules are element-level on purpose: every checkbox
   and radio in the app gets the same 17px orange box/dot, whether or not its
   markup remembers to use the .chk wrapper. Before this, half the app used
   native controls with accent-color at 13/14/15px, so size and shape drifted
   from dialog to dialog. Do not re-declare width/height on a checkbox
   elsewhere — change it here or nowhere. `appearance: none` also makes any
   stray `accent-color` declaration a harmless no-op. */
input[type=checkbox],
input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px; height: 17px; min-width: 17px; min-height: 17px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: .15s;
  flex-shrink: 0;
  box-sizing: border-box;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
  background: var(--orange);
  border-color: var(--orange);
}
input[type=checkbox]:checked::after {
  content: "";
  width: 9px; height: 5px;
  border: 2px solid #fff;
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}
input[type=radio] { border-radius: 50%; }
input[type=radio]:checked::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  border: none;
  transform: none;
}
input[type=checkbox]:disabled,
input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }

/* Layout wrapper: label text beside the control. */
.chk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

/* ── Toast notification ───────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 24px;
  bottom: 24px;
  transform: translateY(12px);
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  transition: .25s;
  z-index: 60;
  box-shadow: var(--shadow);
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Loading spinner (shared) ─────────────────────────────────────────────── */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Dialog header + opt-in help (shared by every tag dialog) ──────────────
   Help strategy, in order of preference:
     0. the label says it            → no help needed
     1. placeholder shows an example → no help needed
     2. tooltip on the control       → one line, opt-in
     3. (i) in this header           → the longer guidance, opt-in
   Prose in the dialog body is never the answer: it is read once and is noise
   on every use after that, while occupying the same space forever. ───────── */
/* flex-end, not space-between: a dialog may carry only the (i), in which case
   it belongs at the right edge rather than sliding over to the left. A title,
   when present, is pushed left by margin-right:auto on .dlg-title. */
.dlg-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.dlg-title {
  margin-right: auto;
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: var(--w-label);
  color: var(--ink);
}
.dlg-info {
  width: 17px; height: 17px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: 11px;
  font-style: italic;
  cursor: help;
  user-select: none;
  transition: border-color .15s, color .15s;
}
.dlg-info:hover, .dlg-info:focus {
  outline: none;
  border-color: var(--orange);
  color: var(--orange);
}

/* Help attached to the label text itself, instead of a separate (i) target.
   Preferred over .dlg-info: it removes a row of icon clutter, and the thing
   you'd naturally point at to ask "what is this?" is the word, not a bullet
   beside it. No underline or other decoration — the label must read exactly
   like every other label; the cursor is the only cue, and the popup does the
   rest. */
.dlg-help {
  cursor: help;
  text-decoration: none;
  transition: color .15s;
}
.dlg-help:hover, .dlg-help:focus {
  outline: none;
  color: var(--orange);
}

/* Section divider before a dialog's action buttons — the "hard break between
   major sections" rule from TYPOGRAPHY_STANDARD.html. */
.dlg-divider {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 5px 0 0;
}

/* The popup itself — one element reused by every (i), so help is identical
   everywhere rather than each dialog inventing its own. */
#dlg-help-popup {
  position: fixed;
  display: none;
  z-index: 9500;
  width: 300px;
  background: #fff;
  border: 1.5px solid rgba(232,116,30,0.35);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(20,24,30,.18);
  padding: 12px 14px;
  font-family: var(--font-hint);
  font-size: var(--t-hint);
  line-height: 1.6;
  color: var(--ink-soft);
}
#dlg-help-popup.show { display: block; }
#dlg-help-popup p { margin: 0 0 8px; }
#dlg-help-popup p:last-child { margin-bottom: 0; }
#dlg-help-popup strong { color: var(--ink); font-weight: var(--w-label); }