/* CIA Study Coach — Graphite + Jade + Onyx visual palette v0.2
   Branch-only. Color-only refinement: structure, spacing, typography, and study logic remain unchanged.
   Working color names are descriptive design tokens, not final product/coach branding. */
:root{
  /* Developer-ready semantic palette */
  --bg-main:#f7f4ee;
  --bg-soft:#eee9df;
  --surface-card:#ffffff;
  --surface-warm:#fbf9f4;

  --graphite:#2f3640;
  --graphite-deep:#232a33;
  --graphite-soft:#4d5561;
  --graphite-muted:#7a817c;

  --onyx:#171a1f;
  --onyx-elevated:#1e232b;

  --jade:#4f8a7a;
  --jade-deep:#3e6e61;
  --jade-soft:#dcebe5;
  --jade-pale:#eef6f2;

  --champagne:#cbb98f;
  --champagne-soft:#f3ebd8;

  --line-soft:#e5ded2;
  --line-warm:#d8d1c4;
  --needs-bg:#f5e6df;
  --needs-text:#9a5f4a;
  --developing-bg:#f3ebd8;
  --developing-text:#7b6840;

  /* Compatibility aliases used by the existing app */
  --bg:var(--bg-main);
  --surface:var(--surface-card);
  --surface-2:var(--surface-warm);
  --ink:var(--graphite);
  --muted:var(--graphite-muted);
  --line:var(--line-soft);
  --accent:var(--graphite);
  --accent-2:var(--onyx-elevated);
  --accent-soft:var(--jade-soft);
  --good:var(--jade-deep);
  --warn:#8b6f3d;
  --danger:var(--needs-text);
  --gold:var(--champagne);
  --gold-soft:var(--champagne-soft);

  --shadow:0 18px 48px rgba(23,26,31,.09);
  --shadow-soft:0 8px 24px rgba(23,26,31,.055);
  --radius:20px;
  --radius-sm:13px;
}

html,body{background:
  radial-gradient(circle at 8% 0%,rgba(255,255,255,.82),transparent 30%),
  linear-gradient(180deg,var(--bg-main) 0%,var(--bg-soft) 100%);
  color:var(--ink);
}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Premium typography hierarchy — unchanged except color */
h1,h2,h3,.brand-title{font-family:Georgia,"Times New Roman",serif;font-weight:600;color:var(--graphite-deep)}
.eyebrow{color:var(--jade-deep);letter-spacing:.17em;font-weight:800}
.lead,.section-heading p,.welcome-card p,.v02-study-time-head p{color:var(--graphite-muted)}

/* Access / diagnostic */
.access-shell{background:
  radial-gradient(circle at 20% 10%,rgba(255,255,255,.92),transparent 28%),
  linear-gradient(145deg,var(--bg-main) 0%,#edf2ef 100%)}
.access-card{border:1px solid rgba(79,138,122,.2);box-shadow:0 30px 70px rgba(23,26,31,.12);background:rgba(255,255,255,.96);backdrop-filter:blur(18px)}
.principle{background:linear-gradient(135deg,var(--jade-pale),var(--champagne-soft));border:1px solid rgba(79,138,122,.16);color:var(--graphite-soft)}
.pin-row input,.composer,.reasoning-input,.v02-target-form input{background:#fffefa;border-color:var(--line-warm)}
.pin-row input:focus,.reasoning-input:focus,.composer:focus-within{border-color:var(--jade);box-shadow:0 0 0 3px rgba(79,138,122,.12)}
.primary-button,.submit-answer,.send-button{background:var(--graphite);box-shadow:0 7px 16px rgba(23,26,31,.17)}
.primary-button:hover,.submit-answer:hover,.send-button:hover{background:var(--onyx)}
.secondary-button{background:#f4f1ea;color:var(--graphite-soft);border:1px solid var(--line-warm)}
.text-button{color:var(--jade-deep)}

/* Sidebar / navigation */
.sidebar{background:linear-gradient(180deg,var(--graphite-deep) 0%,var(--onyx) 100%);border-right:1px solid rgba(255,255,255,.07);box-shadow:8px 0 30px rgba(23,26,31,.08)}
.sidebar-brand{position:relative}
.sidebar-brand:after{content:"";display:block;width:42px;height:1px;background:var(--jade);opacity:.82;margin-top:18px}
.sidebar .eyebrow{color:#a9c8bd}
.brand-title{font-size:23px;letter-spacing:-.02em;color:#f8f6f1}
.nav-button{color:#c9cdca;border:1px solid transparent}
.nav-button:hover{background:rgba(255,255,255,.055);color:#ffffff}
.nav-button.active{background:var(--onyx-elevated);color:#ffffff;border-color:rgba(79,138,122,.22);box-shadow:inset 3px 0 0 var(--jade)}
.candidate-mini strong{color:#f8f6f1}
.candidate-mini small{color:#aeb5b2}
.candidate-initial{background:rgba(79,138,122,.18);color:#dcebe5;border:1px solid rgba(79,138,122,.34)}

/* Top bar */
.topbar{height:88px;background:rgba(247,244,238,.9);border-bottom:1px solid rgba(216,209,196,.9);backdrop-filter:blur(18px);box-shadow:0 6px 24px rgba(23,26,31,.035)}
.topbar h2{font-size:25px;font-weight:600}
.status-pill{background:rgba(255,255,255,.9);border-color:var(--line-soft);box-shadow:0 3px 10px rgba(23,26,31,.035)}
.status-dot{background:var(--jade)}

/* Main coach experience */
.chat-messages{padding-top:42px}
.welcome-card{background:
  linear-gradient(135deg,rgba(255,255,255,.98),rgba(238,246,242,.78));
  border-color:rgba(79,138,122,.2);border-radius:24px;box-shadow:var(--shadow-soft);padding:26px}
.welcome-card h3{font-size:24px;font-family:Georgia,"Times New Roman",serif;font-weight:600}
.evidence-chip{background:rgba(255,255,255,.78);border-color:var(--line-soft)}
.message-row.assistant .bubble{background:#ffffff;border-color:var(--line-soft);box-shadow:var(--shadow-soft)}
.message-row.user .bubble{background:linear-gradient(135deg,var(--graphite),var(--onyx-elevated))}
.avatar.coach{background:linear-gradient(135deg,var(--jade-soft),#f0f5f2);border:1px solid rgba(79,138,122,.25);color:var(--jade-deep)}
.bubble{border-radius:19px}
.question-card{border-color:var(--line-soft);border-radius:20px;box-shadow:var(--shadow-soft);background:#ffffff}
.question-label{color:var(--jade-deep)}
.option{background:#fffefa;border-color:var(--line-soft)}
.option:hover{background:var(--jade-pale);border-color:#9dbfb3}
.confidence-btn{background:#fffefa;border-color:var(--line-soft)}
.confidence-btn.selected{background:var(--jade-soft);border-color:#9dbfb3;color:var(--jade-deep)}
.grade-badge.correct{background:var(--jade-pale);color:var(--jade-deep)}.grade-badge.incorrect{background:var(--needs-bg);color:var(--needs-text)}

/* Composer */
.composer-wrap{background:linear-gradient(to top,var(--bg-main) 74%,rgba(247,244,238,.18));padding-top:16px}
.quick-actions button,.inline-action{background:#ffffff;border-color:var(--line-soft);color:var(--graphite-soft);box-shadow:0 3px 9px rgba(23,26,31,.025)}
.quick-actions button:hover,.inline-action:hover{border-color:#9dbfb3;color:var(--jade-deep);background:var(--jade-pale)}
.composer{border-radius:20px;box-shadow:0 12px 32px rgba(23,26,31,.075)}

/* Progress and content cards */
.panel-content{padding-top:36px}
.section-heading h3{font-size:27px;font-weight:600}
.metric-card,.content-card,.authority-card{background:rgba(255,255,255,.97);border-color:var(--line-soft);border-radius:18px;box-shadow:0 6px 18px rgba(23,26,31,.035)}
.metric-card{position:relative;overflow:hidden}
.metric-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--jade),rgba(79,138,122,.18))}
.metric-label{letter-spacing:.035em;text-transform:uppercase;font-size:10.5px}
.metric-value{color:var(--graphite);font-weight:760}
.progress-bar{background:#e8e1d5;height:7px}.progress-bar>span{background:linear-gradient(90deg,var(--jade-deep),var(--jade))}
.content-card h4{font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:600;color:var(--graphite-deep)}
.tag.needs{background:var(--needs-bg);color:var(--needs-text)}.tag.developing{background:var(--developing-bg);color:var(--developing-text)}.tag.ready{background:var(--jade-soft);color:var(--jade-deep)}.tag.retained{background:#d4e5de;color:#2f5a4e}
.priority-item,.history-item,.retrieval-item,.topic-item,.v02-time-topic{border-color:#eee8df}

/* Topic status explorer */
.v02-status-explorer{background:linear-gradient(145deg,#ffffff,var(--surface-warm))}
.v02-status-filter{background:#fffefa!important;border-color:var(--line-soft)!important;color:var(--graphite-soft)}
.v02-status-filter:hover{border-color:#9dbfb3!important;background:var(--jade-pale)!important}
.v02-status-filter.active{background:var(--jade-soft)!important;border-color:#92b6aa!important;color:var(--jade-deep)}
.v02-status-topic{background:#fffefa!important;border-color:var(--line-soft)!important}

/* Recall cards */
.recall-card{border-color:var(--line-soft)!important;background:linear-gradient(145deg,#ffffff,var(--surface-warm))!important;box-shadow:0 8px 20px rgba(23,26,31,.04)!important}
.recall-card .tag{letter-spacing:.04em}
.recall-card strong{color:var(--graphite-deep)}
.v02-exact-card{box-shadow:inset 3px 0 0 rgba(79,138,122,.72),0 8px 20px rgba(23,26,31,.04)!important}

/* Study time */
.v02-study-time-panel{background:linear-gradient(145deg,#ffffff,var(--surface-warm))}
.v02-time-metrics .metric-card{background:#fffefa}
.v02-time-total{padding-top:4px}

/* Core/source cards */
.authority-card{transition:transform .15s ease,box-shadow .15s ease}
.authority-card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(23,26,31,.06)}
.source-gap{background:#fbf6ea;border-left-color:var(--champagne);color:#6d5b39}

/* Toast */
.toast{background:var(--onyx-elevated);border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 36px rgba(23,26,31,.22)}

/* Mobile refinement — dimensions unchanged; palette follows desktop */
@media(max-width:760px){
  .topbar{height:76px;padding:12px 16px}
  .topbar h2{font-size:21px}
  .chat-messages{width:min(100% - 24px,880px);padding-top:24px}
  .welcome-card{padding:20px;border-radius:20px}
  .welcome-card h3{font-size:21px}
  .bubble{max-width:88%;font-size:14px}
  .question-card{margin-left:0;padding:17px}
  .post-grade-actions{margin-left:0}
  .composer-wrap{padding-left:12px;padding-right:12px}
  .panel-content{width:min(100% - 24px,1050px);padding-top:24px}
  .section-heading h3{font-size:23px}
  .metric-card,.content-card{border-radius:16px}
}

@media(max-width:520px){
  .access-card{padding:30px 22px;border-radius:22px}
  h1{font-size:35px}
  .cards{gap:9px}
  .metric-value{font-size:23px}
  .quick-actions{gap:7px}
  .quick-actions button{padding:8px 10px}
}