/* ============================================================================
   Cairnmind design system ("the cairn tokens") - the ONE source of truth for
   look-and-feel across every product page: auth, settings, account, team,
   legal, and the brain-page chrome. Served at /brain/ui.css; every page loads
   it before its own page-specific <style>.

   Architecture
   - Two themes, both WARM GRAY. Dark is the brain page's shipped charcoal ramp
     (the brand anchor); light is the same stone family on warm paper. Pages
     resolve the theme via /brain/theme.js (localStorage cm_theme: light |
     dark | auto). The brain page pins dark (the map is dark-by-design).
   - One chroma accent: the Cairnmind signal teal (#0F6E56 family) - already
     the product's trust/action color (shared-brain pips, welcome card, error
     pages). It is a highlight, never a field. Amber = attention. Everything
     else is the stone ramp.
   - .ui on <body> opts a page into element-level defaults (buttons, inputs,
     tables). Class components (.btn, .card, .pill ...) work anywhere.
   - The brain map's own tokens (--terr-*, --dom-*, --signal, --land-core)
     live in Brain.html and are contract-tested; this file never defines them.
   ========================================================================== */

:root, html[data-theme="dark"] {
  /* surfaces */
  --bg: #201f1d;
  --surface: #272521;
  --surface-2: #2e2b27;
  --surface-3: #35322c;      /* hover wells, inset chips on dark */
  --hair: #33302b;
  --hair-2: #3e3a34;
  --scrim: rgba(14, 13, 12, .6);

  /* text */
  --ink: #ecebe7;
  --ink-2: #c4c0b7;
  --mid: #a49f93;
  --dim: #8d8879;

  /* brand accent (signal teal) + feedback */
  --accent: #43a985;
  --accent-hover: #56bd98;
  --accent-soft: rgba(67, 169, 133, .14);
  --accent-ink: #7fcbb0;     /* accent-colored TEXT on dark surfaces (>= 4.5:1) */
  --on-accent: #0c1f18;
  --ok: #58b384;   --ok-soft: rgba(88, 179, 132, .13);
  --warn: #c89a55; --warn-soft: rgba(200, 154, 85, .14);
  --bad: #d98a7b;  --bad-soft: rgba(217, 138, 123, .13);
  --bad-strong: #b3563f;     /* danger button fill */

  /* elevation + focus + motion */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 14px 40px rgba(0, 0, 0, .5);
  --ring: 0 0 0 3px rgba(87, 189, 152, .28);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 120ms;
  --dur: 190ms;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f2f0ea;
  --surface: #fbfaf7;
  --surface-2: #f0ede6;
  --surface-3: #e7e3da;
  --hair: #e2ded4;
  --hair-2: #cfcabd;
  --scrim: rgba(38, 35, 30, .42);

  --ink: #26241f;
  --ink-2: #45423a;
  --mid: #6a665c;
  --dim: #7d7869;

  --accent: #0f6e56;
  --accent-hover: #0c5a46;
  --accent-soft: #e1ede7;
  --accent-ink: #0f6e56;
  --on-accent: #ffffff;
  --ok: #1f7d55;   --ok-soft: #e1efe7;
  --warn: #966c1c; --warn-soft: #f6eeda;
  --bad: #b3462f;  --bad-soft: #f8e8e3;
  --bad-strong: #b3462f;

  --shadow-sm: 0 1px 3px rgba(42, 38, 30, .08), 0 1px 2px rgba(42, 38, 30, .05);
  --shadow: 0 14px 40px rgba(42, 38, 30, .14);
  --ring: 0 0 0 3px rgba(15, 110, 86, .22);
  color-scheme: light;
}

:root {
  /* type scale (six steps) + families */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --t-display: 26px;   /* hero numbers, auth headline */
  --t-title: 20px;     /* page h1 */
  --t-heading: 15px;   /* card h2 */
  --t-body: 13.5px;    /* default */
  --t-small: 12px;     /* meta, hints */
  --t-micro: 10.5px;   /* eyebrows, table headers - uppercase, tracked */

  /* spacing (4px grid) + radii */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 7px; --r: 10px; --r-lg: 14px;
}

/* ---------------------------------------------------------------- base ---- */
.ui * , .ui *::before, .ui *::after { box-sizing: border-box; }
.ui {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ui h1, .ui h2, .ui h3 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
.ui h1 { font-size: var(--t-title); font-weight: 700; letter-spacing: -.02em; }
.ui h2 { font-size: var(--t-heading); font-weight: 650; letter-spacing: -.01em; }
.ui h3 { font-size: var(--t-body); font-weight: 650; }
.ui p { margin: 0 0 .75em; }
.ui a { color: var(--accent-ink); text-decoration: none; cursor: pointer; }
.ui a:hover { color: var(--accent-hover); }
.ui code, .mono { font-family: var(--code); font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: var(--t-micro); font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mid);
}
.meta { font-size: var(--t-small); color: var(--mid); }

/* focus is VISIBLE everywhere; mouse clicks stay quiet */
.ui :focus-visible, .btn:focus-visible, .pill:focus-visible, a:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ brand mark -- */
/* The cairn: a warm-stone rounded square with three stacked strata. One mark,
   every page. Size via font-size-free width/height override where needed. */
.orb {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; position: relative;
  background: linear-gradient(150deg, #cbc5b8, #8a877e 62%, #5f5c54);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.orb::after {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 3px;
  border-radius: 2px; background: rgba(255, 255, 255, .88);
  box-shadow: 0 -4px 0 rgba(255, 255, 255, .55), 0 -8px 0 rgba(255, 255, 255, .3);
}
.orb.lg { width: 34px; height: 34px; border-radius: 10px; }
.orb.lg::after { left: 9px; right: 9px; bottom: 8px; height: 3.5px;
  box-shadow: 0 -5px 0 rgba(255, 255, 255, .55), 0 -10px 0 rgba(255, 255, 255, .3); }

/* --------------------------------------------------------------- buttons -- */
.btn, .ui button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: 600 var(--t-body) var(--font);
  padding: .52em 1.05em; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; line-height: 1.25;
  background: var(--accent); color: var(--on-accent); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover, .ui button:hover { background: var(--accent-hover); }
.btn:disabled, .ui button:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost, .ui button.ghost {
  background: transparent; color: var(--ink-2); border-color: var(--hair-2);
}
.btn.ghost:hover, .ui button.ghost:hover {
  background: transparent; color: var(--accent-ink); border-color: var(--accent);
}
.btn.danger, .ui button.danger { background: var(--bad-strong); color: #fff; }
.btn.danger:hover, .ui button.danger:hover { background: var(--bad); color: #fff; }
.btn.quiet, .ui button.quiet {
  background: transparent; color: var(--mid); border-color: transparent;
}
.btn.quiet:hover, .ui button.quiet:hover { color: var(--bad); background: var(--bad-soft); }
.btn.sm, .ui button.sm { font-size: var(--t-small); padding: .38em .8em; }
.ui button:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------------------------------------------------------------- inputs -- */
.ui input, .ui select, .ui textarea {
  font: 400 var(--t-body) var(--font);
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  padding: .5em .7em; width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.ui input::placeholder, .ui textarea::placeholder { color: var(--dim); }
.ui input:focus, .ui select:focus, .ui textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--surface);
}
.ui input[readonly] { color: var(--mid); background: var(--surface-2); }
.ui input[type="checkbox"], .ui input[type="radio"] { width: auto; accent-color: var(--accent); }
.ui input[type="file"] { padding: .4em; background: var(--surface-2); }
.field { display: flex; flex-direction: column; gap: .32rem; margin-bottom: .9rem; }
.field:last-child { margin-bottom: 0; }
.ui label { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.hint { font-size: var(--t-small); color: var(--mid); font-weight: 400; }
.note { color: var(--mid); font-size: var(--t-small); margin-top: .5rem; }
.row { display: flex; gap: .7rem; align-items: end; }
.row.wrap { flex-wrap: wrap; }
.row .field { flex: 1; min-width: 130px; margin-bottom: 0; }
.grow { flex: 1; min-width: 0; }

/* ----------------------------------------------------------------- cards -- */
.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--s5); margin-bottom: var(--s4);
}
.card h2 { margin: 0 0 .9rem; }
.card h2 .hint { font-weight: 400; margin-left: .5rem; letter-spacing: 0; text-transform: none; }
.card.danger { border-color: color-mix(in srgb, var(--bad) 45%, var(--hair)); }
.card.danger h2 { color: var(--bad); }

/* ------------------------------------------------------------ list rows --- */
.item { display: flex; align-items: center; gap: .8rem; padding: .8rem .15rem; border-bottom: 1px solid var(--hair); }
.item:last-child { border-bottom: 0; }
.who { flex: 1; min-width: 0; }
.who b { font-weight: 600; color: var(--ink); }
.who .e { color: var(--mid); font-size: var(--t-small); word-break: break-all; }

/* ---------------------------------------------------------- pills/badges -- */
.pill, .badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: 11px; font-weight: 600; padding: .18em .7em; border-radius: 99px;
  white-space: nowrap; border: 1px solid var(--hair-2); color: var(--mid); background: var(--surface-2);
}
.pill.owner { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.pill.admin, .pill.ok, .badge.approved { color: var(--ok); border-color: transparent; background: var(--ok-soft); }
.pill.pending, .pill.warn, .badge.pending { color: var(--warn); border-color: transparent; background: var(--warn-soft); }
.pill.bad, .badge.denied { color: var(--bad); border-color: transparent; background: var(--bad-soft); }

/* ---------------------------------------------------------------- tables -- */
.ui table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.ui th {
  text-align: left; color: var(--mid); font-weight: 600; font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; padding: .5rem .6rem;
  border-bottom: 1px solid var(--hair-2); white-space: nowrap;
}
.ui td { padding: .6rem; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.ui tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------- seg + switch -- */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--hair-2); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { font-size: var(--t-small); font-weight: 600; color: var(--mid); background: none; border: 0; border-radius: 5px; padding: .3rem .7rem; }
.seg button:hover { color: var(--ink); background: transparent; }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.switch {
  width: 38px; height: 22px; border-radius: 99px; border: 0; background: var(--hair-2);
  position: relative; cursor: pointer; transition: background var(--dur) var(--ease); padding: 0; flex: 0 0 auto;
}
.switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: var(--surface); transition: left var(--dur) var(--ease); box-shadow: var(--shadow-sm); }
.switch.on { background: var(--accent); }
.switch.on i { left: 19px; background: #fff; }

/* ----------------------------------------------------------------- modal -- */
.overlay {
  position: fixed; inset: 0; background: var(--scrim); display: flex;
  align-items: flex-start; justify-content: center; padding: 7vh 1rem; z-index: 80;
  overflow-y: auto; backdrop-filter: blur(3px); animation: ui-fade var(--dur-fast) var(--ease);
}
.modal {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--shadow); width: 100%; max-width: 520px; overflow: hidden;
  animation: ui-rise var(--dur) var(--ease);
}
.modal-head { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--hair); }
.modal-head .mh { flex: 1; min-width: 0; }
.modal-head .mh b { font-size: 15px; color: var(--ink); display: block; }
.modal-head .mh .mhsub { color: var(--mid); font-size: var(--t-small); }
.modal-close { background: none; border: 0; color: var(--mid); font-size: 1.3rem; line-height: 1; padding: .2rem .45rem; cursor: pointer; border-radius: var(--r-sm); }
.modal-close:hover { color: var(--ink); background: var(--surface-2); }
.modal-body { padding: 1.1rem 1.3rem; }
@keyframes ui-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }

/* ----------------------------------------------------------------- toast -- */
#toast { position: fixed; right: 1.1rem; bottom: 1.1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 95; }
.toast {
  background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); padding: .7rem .95rem; font-size: var(--t-small);
  max-width: 340px; box-shadow: var(--shadow); color: var(--ink-2); animation: ui-rise var(--dur) var(--ease);
}
.toast.err { border-left-color: var(--bad); }
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }

/* ----------------------------------------------------- feedback + empties -- */
.msg { font-size: var(--t-small); min-height: 1rem; margin-top: .7rem; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--ok); }
.alert { border-radius: var(--r-sm); padding: .6rem .85rem; font-size: var(--t-small); margin-bottom: .85rem; }
.alert.err { background: var(--bad-soft); color: var(--bad); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.empty { color: var(--mid); font-size: var(--t-small); padding: var(--s5) 0; text-align: center; }
.empty svg { width: 38px; height: 38px; color: var(--dim); opacity: .6; display: block; margin: 0 auto var(--s3); }
.empty .act { margin-top: var(--s3); }
.linkbox {
  margin-top: .7rem; padding: .7rem .85rem; border: 1px dashed var(--accent);
  border-radius: var(--r-sm); font-size: var(--t-small); color: var(--accent-ink);
  word-break: break-all; background: var(--accent-soft);
}
.linkbox .lbl { color: var(--mid); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: .3rem; }

/* ------------------------------------------------------ loading skeletons -- */
.spin {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--hair-2); border-top-color: var(--accent);
  animation: ui-sp .7s linear infinite; margin: 2.5rem auto;
}
@keyframes ui-sp { to { transform: rotate(360deg); } }
.skeleton { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) 0; }
.skeleton i { display: block; height: 12px; border-radius: 99px; background: var(--surface-3); animation: ui-skel 1.1s ease-in-out infinite alternate; }
.skeleton i:nth-child(2) { width: 82%; }
.skeleton i:nth-child(3) { width: 64%; }
@keyframes ui-skel { from { opacity: .5; } to { opacity: 1; } }

.hide { display: none !important; }

/* ------------------------------------------------------------ scrollbars -- */
.ui ::-webkit-scrollbar { width: 8px; height: 8px; }
.ui ::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 8px; }
.ui ::-webkit-scrollbar-track { background: transparent; }

/* -------------------------------------------------- simple page scaffold --- */
/* The centered content page (team, account, legal): orb + title top bar, then cards. */
.page { max-width: 780px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); }
.page-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .3rem; }
.page-top h1 { margin: 0; flex: none; }
.page-top .back { margin-left: auto; color: var(--mid); font-size: var(--t-small); }
.page-top .back:hover { color: var(--accent-ink); }
.page-sub { color: var(--mid); font-size: var(--t-small); margin: 0 0 var(--s5); }

/* --------------------------------------------------------- auth scaffold --- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s5); }
.auth-card {
  width: min(392px, 94vw); background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 30px 28px 24px; box-shadow: var(--shadow);
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.auth-brand b { font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: .01em; }
.auth-card h1 { font-size: 22px; margin: 0 0 4px; }
.auth-tag { color: var(--mid); font-size: var(--t-body); margin: 0 0 20px; }
.auth-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair);
  color: var(--mid); font-size: var(--t-small); text-align: center;
}
.auth-foot a { font-weight: 600; }
.providers { display: flex; flex-direction: column; gap: 9px; }
.prov {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--surface-2); border: 1px solid var(--hair-2); color: var(--ink);
  border-radius: var(--r-sm); padding: 10px 14px; font: 550 var(--t-body) var(--font); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.prov:hover { border-color: var(--accent); background: var(--surface-3); }
.prov svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sep {
  display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: var(--t-micro);
  margin: 18px 0 12px; letter-spacing: .12em; text-transform: uppercase;
}
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
