/*
 * Caldera Commons Design System
 *
 * The metaphor: rocks in the riverbed — settled, purposeful, permanent.
 * Water (data) moves through them beautifully because the stones are placed right.
 *
 * Earth palette   — backgrounds, surfaces, structure
 * Parchment       — text, the written word
 * Moss            — life, growth, action, primary accent
 * River           — water, information flow, links
 * Ember           — terracotta, fire, warnings, faith
 * Gold            — harvest, testimony, highlights
 */

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* Earth */
  --earth-void:    #080603;   /* deepest dark */
  --earth-deep:    #100d08;   /* page background */
  --earth-surface: #1a1510;   /* card / panel */
  --earth-raised:  #231d16;   /* elevated element */
  --earth-border:  #3d3228;   /* default border */
  --earth-dim:     #5a4c3c;   /* muted border / divider */

  /* Parchment — text */
  --parchment:        #e8d9bc;   /* primary text */
  --parchment-muted:  #a89478;   /* secondary text */
  --parchment-faint:  #6e5c47;   /* placeholder / disabled */

  /* Moss — life, action */
  --moss:         #7a9e6a;
  --moss-bright:  #98bd87;
  --moss-dim:     #506845;
  --moss-glow:    rgba(122, 158, 106, 0.12);

  /* River — water, links, information */
  --river:        #4e97b4;
  --river-bright: #72bcd4;
  --river-dim:    #2d6e8a;
  --river-glow:   rgba(78, 151, 180, 0.12);

  /* Ember — faith, fire, warnings */
  --ember:        #c4714a;
  --ember-bright: #e08a60;
  --ember-dim:    #8a4e34;
  --ember-glow:   rgba(196, 113, 74, 0.12);

  /* Gold — testimony, harvest */
  --gold:         #c4a244;
  --gold-bright:  #dfc06a;
  --gold-dim:     #8a7030;

  /* Danger */
  --scar:         #9e4030;
  --scar-bright:  #c05040;

  /* Type */
  --font-mono: 'Courier New', 'Courier', monospace;
  --font-body: Georgia, 'Times New Roman', serif;

  /* Spacing */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;
}

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

html { font-size: 16px; }

body {
  background:  var(--earth-deep);
  color:       var(--parchment);
  font-family: var(--font-mono);
  min-height:  100vh;
  line-height: 1.6;
}

a {
  color:           var(--river);
  text-decoration: none;
  transition:      color 0.15s;
}
a:hover { color: var(--river-bright); }

/* ============================================================
   Layout
   ============================================================ */
.page-wrap {
  max-width: 960px;
  margin:    0 auto;
  padding:   0 20px 60px;
}

.page-wrap--wide { max-width: 1200px; }

/* ============================================================
   Navigation Bar
   ============================================================ */
.nav-bar {
  background:    var(--earth-surface);
  border-bottom: 1px solid var(--earth-border);
  padding:       12px 24px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-bottom: 32px;
  font-size:     0.88em;
}

.nav-bar__brand {
  color:       var(--gold);
  font-weight: bold;
  font-size:   1em;
  letter-spacing: 0.04em;
}

.nav-bar__links {
  display: flex;
  gap:     18px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-bar__links a {
  color:   var(--parchment-muted);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-bar__links a:hover {
  color:        var(--parchment);
  border-color: var(--moss);
}

.nav-bar__role {
  background:  var(--moss-dim);
  color:       var(--moss-bright);
  font-size:   0.78em;
  padding:     2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-bar__user {
  color:  var(--parchment-muted);
  font-size: 0.85em;
}

/* ============================================================
   Cards / Panels
   ============================================================ */
.card {
  background:    var(--earth-surface);
  border:        1px solid var(--earth-border);
  border-radius: var(--radius);
  padding:       24px;
  margin-bottom: 20px;
}

.card--raised {
  background: var(--earth-raised);
  border-color: var(--earth-dim);
}

.card__title {
  color:         var(--river);
  font-size:     0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--earth-border);
}

.card__value {
  color:     var(--moss);
  font-size: 1.8em;
  font-weight: bold;
  line-height: 1.2;
}

.card__sub {
  color:     var(--parchment-muted);
  font-size: 0.82em;
  margin-top: 4px;
}

/* ============================================================
   Page Headers
   ============================================================ */
.page-title {
  color:         var(--parchment);
  font-size:     1.7em;
  font-weight:   bold;
  border-bottom: 2px solid var(--moss-dim);
  padding-bottom: 12px;
  margin-bottom:  24px;
  letter-spacing: 0.02em;
}

.page-title span { color: var(--moss); }

.section-title {
  color:         var(--river);
  font-size:     0.82em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  12px;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--earth-border);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:     inline-block;
  padding:     10px 20px;
  border:      1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size:   0.9em;
  font-weight: bold;
  cursor:      pointer;
  transition:  background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
}

.btn--moss {
  background:   var(--moss);
  color:        var(--earth-deep);
  border-color: var(--moss);
}
.btn--moss:hover {
  background:  var(--moss-bright);
  border-color: var(--moss-bright);
  color:        var(--earth-deep);
}

.btn--river {
  background:   transparent;
  color:        var(--river);
  border-color: var(--river-dim);
}
.btn--river:hover {
  background:   var(--river-glow);
  border-color: var(--river);
  color:        var(--river-bright);
}

.btn--ember {
  background:   var(--ember);
  color:        var(--earth-deep);
  border-color: var(--ember);
}
.btn--ember:hover {
  background:   var(--ember-bright);
  border-color: var(--ember-bright);
  color:        var(--earth-deep);
}

.btn--ghost {
  background:   transparent;
  color:        var(--parchment-muted);
  border-color: var(--earth-border);
}
.btn--ghost:hover {
  border-color: var(--earth-dim);
  color:        var(--parchment);
}

.btn--danger {
  background:   transparent;
  color:        var(--scar);
  border-color: var(--scar);
  font-size:    0.8em;
  padding:      4px 10px;
}
.btn--danger:hover {
  background: var(--ember-glow);
  color:      var(--scar-bright);
}

/* ============================================================
   Navigation Links (dashboard tile style)
   ============================================================ */
.nav-tile {
  display:       inline-block;
  padding:       9px 16px;
  background:    var(--earth-raised);
  border:        1px solid var(--earth-border);
  border-radius: var(--radius-sm);
  color:         var(--parchment-muted);
  font-size:     0.88em;
  transition:    border-color 0.15s, color 0.15s, background 0.15s;
  margin:        3px;
}
.nav-tile:hover {
  border-color: var(--moss-dim);
  color:        var(--parchment);
  background:   var(--moss-glow);
}

/* ============================================================
   Forms
   ============================================================ */
.form-group { margin-bottom: 18px; }

label {
  display:      block;
  color:        var(--river);
  font-size:    0.85em;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
  width:       100%;
  padding:     10px 12px;
  background:  var(--earth-raised);
  border:      1px solid var(--earth-border);
  border-radius: var(--radius-sm);
  color:       var(--parchment);
  font-family: var(--font-mono);
  font-size:   0.92em;
  transition:  border-color 0.15s, box-shadow 0.15s;
  outline:     none;
  appearance:  none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--moss);
  box-shadow:   0 0 0 3px var(--moss-glow);
}

textarea { resize: vertical; min-height: 80px; }

select option { background: var(--earth-raised); }

::placeholder { color: var(--parchment-faint); }

/* ============================================================
   Feedback / Alerts
   ============================================================ */
.feedback {
  padding:       12px 16px;
  border-radius: var(--radius-sm);
  font-size:     0.9em;
  display:       none;
  margin-top:    16px;
}
.feedback.success {
  display:      block;
  background:   var(--moss-glow);
  border:       1px solid var(--moss-dim);
  color:        var(--moss-bright);
}
.feedback.error {
  display:      block;
  background:   var(--ember-glow);
  border:       1px solid var(--ember-dim);
  color:        var(--ember-bright);
}
.feedback.info {
  display:      block;
  background:   var(--river-glow);
  border:       1px solid var(--river-dim);
  color:        var(--river-bright);
}

/* ============================================================
   Status Badges
   ============================================================ */
.badge {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: var(--radius-sm);
  font-size:     0.75em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight:   bold;
}
.badge--online  { background: var(--moss-glow);  color: var(--moss-bright);  border: 1px solid var(--moss-dim); }
.badge--offline { background: var(--ember-glow); color: var(--ember-bright); border: 1px solid var(--ember-dim); }
.badge--info    { background: var(--river-glow);  color: var(--river-bright); border: 1px solid var(--river-dim); }
.badge--gold    { background: rgba(196,162,68,.12); color: var(--gold-bright); border: 1px solid var(--gold-dim); }
.badge--member  { background: var(--earth-raised); color: var(--parchment-muted); border: 1px solid var(--earth-dim); }

/* ============================================================
   Tables
   ============================================================ */
table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.88em;
  margin-top:      8px;
}

th {
  color:         var(--parchment-muted);
  font-size:     0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align:    left;
  padding:       8px 12px;
  border-bottom: 1px solid var(--earth-border);
}

td {
  padding:       10px 12px;
  border-bottom: 1px solid var(--earth-surface);
  color:         var(--parchment);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }

tr:hover td { background: var(--earth-raised); }

/* ============================================================
   Tabs
   ============================================================ */
.tabs {
  display:       flex;
  gap:           4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--earth-border);
  flex-wrap:     wrap;
}

.tab-btn {
  background:    transparent;
  border:        none;
  border-bottom: 2px solid transparent;
  color:         var(--parchment-muted);
  padding:       10px 18px;
  cursor:        pointer;
  font-family:   var(--font-mono);
  font-size:     0.88em;
  transition:    color 0.15s, border-color 0.15s;
  white-space:   nowrap;
}
.tab-btn:hover         { color: var(--parchment); }
.tab-btn.active        { color: var(--moss); border-bottom-color: var(--moss); }

.tab-content           { display: none; }
.tab-content.active    { display: block; }

/* ============================================================
   Grid
   ============================================================ */
.grid-2 {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   16px;
}
.grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
}
.grid-4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
}

@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Mission text block
   ============================================================ */
.mission-block {
  font-family:  var(--font-body);
  font-size:    0.96em;
  color:        var(--parchment-muted);
  line-height:  1.8;
  border-left:  3px solid var(--moss-dim);
  padding-left: 18px;
  margin:       16px 0;
}

.mission-block strong { color: var(--gold); }

/* ============================================================
   AI Brief / Counsel output
   ============================================================ */
.ai-output {
  background:    var(--earth-raised);
  border:        1px solid var(--earth-border);
  border-left:   3px solid var(--river-dim);
  border-radius: var(--radius-sm);
  padding:       20px 24px;
  font-family:   var(--font-body);
  font-size:     0.97em;
  line-height:   2;
  color:         var(--parchment);
  white-space:   pre-wrap;
  word-wrap:     break-word;
  min-height:    80px;
}

.ai-output--loading {
  color:       var(--parchment-faint);
  font-style:  italic;
  font-family: var(--font-mono);
}

/* ============================================================
   Forum
   ============================================================ */
.forum-thread {
  padding:       16px 20px;
  border-bottom: 1px solid var(--earth-border);
  cursor:        pointer;
  transition:    background 0.12s;
}
.forum-thread:hover      { background: var(--earth-raised); }
.forum-thread:last-child { border-bottom: none; }

.forum-thread__title { color: var(--parchment); font-size: 0.95em; margin-bottom: 4px; }
.forum-thread__meta  { color: var(--parchment-faint); font-size: 0.78em; }

.forum-reply {
  background:    var(--earth-raised);
  border-left:   3px solid var(--earth-dim);
  border-radius: var(--radius-sm);
  padding:       14px 18px;
  margin-bottom: 12px;
}
.forum-reply__body   { color: var(--parchment); line-height: 1.7; }
.forum-reply__meta   { color: var(--parchment-faint); font-size: 0.78em; margin-top: 8px; }
.forum-reply--thread { border-left-color: var(--moss-dim); }

/* ============================================================
   Misc utilities
   ============================================================ */
.text-moss    { color: var(--moss); }
.text-river   { color: var(--river); }
.text-gold    { color: var(--gold); }
.text-ember   { color: var(--ember); }
.text-muted   { color: var(--parchment-muted); }
.text-faint   { color: var(--parchment-faint); }
.text-sm      { font-size: 0.82em; }
.text-xs      { font-size: 0.74em; }
.mono         { font-family: var(--font-mono); }
.serif        { font-family: var(--font-body); }
.mt-sm        { margin-top: 8px; }
.mt           { margin-top: 16px; }
.mt-lg        { margin-top: 24px; }
.mb-sm        { margin-bottom: 8px; }
.mb           { margin-bottom: 16px; }
.mb-lg        { margin-bottom: 24px; }
.gap-sm       { gap: 8px; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.w-full       { width: 100%; }

hr.divider {
  border:        none;
  border-top:    1px solid var(--earth-border);
  margin:        24px 0;
}

/* Scrollbar */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--earth-deep); }
::-webkit-scrollbar-thumb { background: var(--earth-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--earth-border); }