/* Visual identity carried over from the source application deliberately: this
   is a conversion of an existing product, not a rebrand, so the palette, the
   Cormorant/DM Sans pairing and the card system stay put. What is new here is
   the school-of-thought picker and the session timer. */

:root {
  --cream:      #f7f4ef;
  --white:      #ffffff;
  --ink:        #1a1a2e;
  --slate:      #3d4a5c;
  --fog:        #8a96a3;
  --teal:       #2e7d82;
  --teal-lt:    #4ba3a8;
  --teal-pale:  #e6f3f4;
  --gold:       #c8a96e;
  --danger:     #b3453c;
  --danger-bg:  #fbe9e7;
  --success:    #2f7d5f;
  --success-bg: #e7f4ee;
  --warning:    #a5762f;
  --warning-bg: #faf1e2;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(26,26,46,0.08);
  --shadow-lg: 0 10px 40px rgba(26,26,46,0.12);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55; }
h1,h2,h3,h4 { font-family:var(--serif); color:var(--ink); font-weight:600; margin:0 0 0.5em; }
a { color:var(--teal); text-decoration:none; cursor:pointer; }
a:hover { color:var(--teal-lt); text-decoration:underline; }
:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
.container-narrow { max-width:760px; margin:0 auto; padding:0 20px; }

/* Nav */
.navbar { background:var(--ink); color:var(--white); padding:14px 0; }
.navbar .container { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.navbar-brand { font-family:var(--serif); font-size:1.4rem; color:var(--white); font-weight:700; letter-spacing:0.02em; }
.navbar-brand:hover { color:var(--gold); text-decoration:none; }
.navbar-links { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.navbar-links a { color:var(--white); opacity:0.85; padding:8px 12px; border-radius:8px; font-size:0.92rem; }
.navbar-links a:hover { opacity:1; background:rgba(255,255,255,0.08); text-decoration:none; }
.navbar-links a.active { background:var(--teal); opacity:1; }
.navbar-toggle { display:none; background:none; border:none; color:var(--white); font-size:1.5rem; cursor:pointer; }
@media (max-width: 900px) {
  .navbar-toggle { display:block; }
  .navbar-links { display:none; flex-direction:column; width:100%; align-items:stretch; margin-top:12px; }
  .navbar-links.open { display:flex; }
  .navbar-links a { padding:12px; }
}

/* The alignment strip: which philosophy is live, on every page. */
.alignment-strip { background:#232338; color:rgba(255,255,255,0.85); font-size:0.82rem; padding:7px 0; }
.alignment-strip .container { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.alignment-strip strong { color:var(--white); }
.alignment-strip a { color:var(--gold); font-size:0.8rem; }
.alignment-glyph { font-size:1rem; }

.card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:20px; }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:760px) { .grid-2, .grid-3 { grid-template-columns:1fr; } }

.btn { display:inline-block; border:none; border-radius:8px; padding:11px 20px; font-family:var(--sans);
  font-size:0.95rem; font-weight:600; cursor:pointer; text-align:center; transition:transform .1s ease; }
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--teal); color:var(--white); }
.btn-primary:hover { background:var(--teal-lt); color:var(--white); }
.btn-gold { background:var(--gold); color:var(--ink); }
.btn-gold:hover { background:#d8bb85; color:var(--ink); }
.btn-outline { background:transparent; color:var(--teal); border:1.5px solid var(--teal); }
.btn-outline:hover { background:var(--teal-pale); }
.btn-danger { background:var(--danger); color:var(--white); }
.btn-danger:hover { background:#c1554b; color:var(--white); }
.btn-sm { padding:6px 12px; font-size:0.82rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

label { display:block; font-weight:600; margin-bottom:6px; font-size:0.92rem; color:var(--slate); }
input[type=text], input[type=password], input[type=email], input[type=search],
input[type=number], textarea, select {
  width:100%; padding:11px 14px; border:1.5px solid #dfe3e8; border-radius:8px;
  font-family:var(--sans); font-size:1rem; background:var(--white); color:var(--ink); margin-bottom:16px;
}
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-pale); }
textarea { resize:vertical; min-height:90px; }
.form-help { font-size:0.82rem; color:var(--fog); margin-top:-12px; margin-bottom:16px; }

.alert { padding:12px 16px; border-radius:8px; margin-bottom:14px; font-size:0.92rem; }
.alert-success { background:var(--success-bg); color:var(--success); }
.alert-danger  { background:var(--danger-bg); color:var(--danger); }
.alert-warning { background:var(--warning-bg); color:var(--warning); }

.badge { display:inline-block; padding:3px 10px; border-radius:100px; font-size:0.75rem;
  font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }
.badge-teal  { background:var(--teal-pale); color:var(--teal); }
.badge-gold  { background:#f6ecd9; color:var(--warning); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }
.badge-gray  { background:#eef0f2; color:var(--slate); }

.eyebrow { text-transform:uppercase; letter-spacing:0.09em; font-size:0.7rem; font-weight:700;
  color:var(--fog); margin:0 0 4px; }
.section-heading { margin-top:30px; margin-bottom:6px; color:var(--teal); font-size:1.1rem;
  border-bottom:2px solid var(--teal-pale); padding-bottom:8px; }
.section-progress { float:right; font-family:var(--sans); font-size:0.78rem; font-weight:600;
  color:var(--fog); background:#eef0f2; border-radius:100px; padding:2px 10px; }

/* ===== Dashboard: current alignment ===== */
.current-school { display:flex; gap:22px; align-items:flex-start; border-left:4px solid var(--gold); }
.current-school-glyph { font-size:2.6rem; line-height:1; flex:0 0 auto; }
.current-school-body { flex:1; min-width:0; }
.principle-list { margin:14px 0 0; padding-left:18px; font-size:0.9rem; color:var(--slate); }
.principle-list li { margin-bottom:5px; }
@media (max-width:520px) { .current-school { flex-direction:column; gap:12px; } }

.stat-card { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.stat-number { font-family:var(--serif); font-size:2.1rem; font-weight:700; color:var(--teal); }
.stat-label { font-size:0.85rem; color:var(--slate); }

/* ===== The school-of-thought picker ===== */
.picker-tools { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.picker-tools input[type=search] { margin-bottom:0; }
.picker-tools .muted { font-size:0.8rem; white-space:nowrap; }

.school-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; margin-top:14px; }
.school-card {
  display:flex; gap:12px; align-items:flex-start; margin:0; padding:14px;
  border:1.5px solid #e6e9ec; border-radius:10px; cursor:pointer; font-weight:400;
  background:var(--white); transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.school-card:hover { border-color:var(--teal-lt); background:#fbfdfd; }
.school-card input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.school-card:has(input:checked), .school-card.is-picked {
  border-color:var(--teal); background:var(--teal-pale); box-shadow:0 0 0 3px rgba(46,125,130,0.10);
}
.school-card:focus-within { outline:2px solid var(--teal); outline-offset:2px; }
.school-glyph { font-size:1.5rem; line-height:1.2; flex:0 0 auto; }
.school-text { display:flex; flex-direction:column; min-width:0; }
.school-name { font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--ink); line-height:1.25; }
.school-era { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--fog); margin:2px 0 5px; }
.school-tagline { font-size:0.84rem; color:var(--slate); line-height:1.4; }
.school-card.is-current .school-name::after {
  content:"current"; font-family:var(--sans); font-size:0.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--teal); background:var(--white); border:1px solid var(--teal);
  border-radius:100px; padding:1px 7px; margin-left:8px; vertical-align:middle;
}
.school-card-custom { border-style:dashed; }

.custom-box { display:none; margin-top:16px; padding:18px; background:#fbfbf9;
  border:1.5px dashed #d8dde1; border-radius:10px; }
.custom-box.open { display:block; }
.custom-box textarea { min-height:150px; }

.picker-actions { margin-top:24px; padding-top:18px; border-top:1px solid #eee; }

/* ===== Chat ===== */
.chat-window { height:52vh; min-height:300px; overflow-y:auto; border:1.5px solid #eee;
  border-radius:10px; padding:16px; background:#fbfbf9; margin-bottom:14px; }
.chat-bubble { max-width:82%; padding:10px 14px; border-radius:14px; margin-bottom:10px;
  font-size:0.94rem; white-space:pre-wrap; }
.chat-bubble.user { background:var(--teal); color:var(--white); margin-left:auto; border-bottom-right-radius:2px; }
.chat-bubble.assistant { background:var(--teal-pale); color:var(--ink); margin-right:auto; border-bottom-left-radius:2px; }
.chat-bubble.thinking { color:var(--fog); font-style:italic; }
.chat-note { max-width:88%; margin:0 auto 10px; text-align:center; font-size:0.82rem;
  color:var(--fog); font-style:italic; padding:6px 12px;
  border-top:1px solid #f0f0ee; border-bottom:1px solid #f0f0ee; }
.consistency-tag { display:block; margin-top:8px; font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.06em; font-weight:700; color:var(--teal); }

.chat-input-row { display:flex; gap:10px; }
.chat-input-row textarea { margin-bottom:0; min-height:52px; flex:1; }

.chat-options { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px;
  padding-top:12px; border-top:1px solid #f0f0ee; }
.option-switch { display:flex; align-items:center; gap:8px; margin:0; font-size:0.86rem;
  font-weight:600; color:var(--slate); cursor:pointer; }
.option-switch input { width:auto; margin:0; accent-color:var(--teal); }
.option-help { font-size:0.78rem; flex:1; min-width:180px; }
.clear-form { margin-left:auto; }

/* ===== Session timer ===== */
.timer-bar { display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  background:var(--white); border:1.5px solid #eee; border-radius:10px; padding:12px 16px; margin-bottom:14px; }
.timer-block { display:flex; flex-direction:column; line-height:1.2; }
.timer-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--fog); font-weight:700; }
.timer-value { font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--teal);
  font-variant-numeric:tabular-nums; }
.timer-total { color:var(--slate); }
.timer-note { font-size:0.76rem; color:var(--fog); flex:1; min-width:180px; text-align:right; }
@media (max-width:560px) { .timer-note { text-align:left; } }

/* ===== Usage panel (Billing / admin) ===== */
.usage-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin-bottom:12px; }
.usage-cell { background:#fbfbf9; border:1.5px solid #eef0f2; border-radius:10px; padding:14px 16px;
  display:flex; flex-direction:column; gap:3px; }
.usage-cell-main { background:var(--teal-pale); border-color:#d5e9ea; }
.usage-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--fog); font-weight:700; }
.usage-value { font-family:var(--serif); font-size:1.7rem; font-weight:700; color:var(--teal);
  font-variant-numeric:tabular-nums; line-height:1.15; }
.usage-cell .muted { font-size:0.78rem; }
.live-pill { display:inline-flex; align-items:center; gap:6px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--success);
  box-shadow:0 0 0 3px rgba(47,125,95,0.18); }

.plan-card { border:1.5px solid #eef0f2; box-shadow:none; }
.plan-price { font-family:var(--serif); font-size:1.7rem; font-weight:700; color:var(--teal); margin:0 0 8px; }

/* ===== Gate ===== */
.hidden { display:none !important; }
.gate-panel { background:var(--white); border:1.5px dashed #d8dde1; border-radius:12px;
  padding:26px 24px; text-align:left; }
.gate-title { margin:0 0 8px; color:var(--teal); font-size:1.15rem; }
.gate-next { font-size:0.95rem; color:var(--slate); margin:0 0 16px; }
.gate-card { border-left:4px solid var(--teal); }
.gate-steps { list-style:none; padding:0; margin:0 0 12px; }
.gate-steps li { position:relative; padding:9px 0 9px 34px; font-size:0.92rem; line-height:1.45;
  border-bottom:1px solid #f3f3f1; }
.gate-steps li:last-child { border-bottom:none; }
.step-mark { position:absolute; left:0; top:10px; width:20px; height:20px; border-radius:50%;
  border:2px solid #d8dde1; background:var(--white); }
.gate-steps li.step-done { color:var(--slate); }
.gate-steps li.step-done .step-mark { border-color:var(--success); background:var(--success); }
.gate-steps li.step-done .step-mark::after { content:"\2713"; position:absolute; inset:0;
  color:var(--white); font-size:0.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.gate-steps li.step-todo { color:var(--fog); }
.gate-note { font-size:0.8rem; margin:0; }

/* ===== Safety ===== */
.emergency-panel { background:var(--white); border:2px solid var(--danger); border-radius:12px;
  padding:22px 24px; margin-bottom:22px; }
.emergency-heading { color:var(--danger); margin:0 0 10px; font-size:1.25rem; }
.emergency-notice { font-weight:700; color:var(--danger); font-size:1.02rem; line-height:1.5; margin:0 0 14px; }
.resource-list { list-style:none; padding:0; margin:0; }
.resource-list li { padding:7px 0; border-bottom:1px solid #f3f3f1; font-size:0.92rem; }
.resource-list li:last-child { border-bottom:none; }

.safety-strip { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--danger-bg); border-left:4px solid var(--danger); border-radius:8px;
  padding:10px 14px; margin:14px 0; font-size:0.84rem; line-height:1.45; }
.safety-strip strong { color:var(--danger); font-weight:600; }
.safety-strip a { white-space:nowrap; font-size:0.8rem; }

.conduct-list { list-style:none; padding:0; margin:0 0 8px; }
.conduct-list li { padding:11px 0 11px 30px; border-bottom:1px solid #f3f3f1; position:relative; line-height:1.5; }
.conduct-list li:last-child { border-bottom:none; }
.conduct-list strong { display:block; font-size:0.95rem; }
.conduct-list .muted { font-size:0.85rem; }
.conduct-discouraged li::before { content:"\00D7"; position:absolute; left:6px; top:9px;
  color:var(--danger); font-size:1.3rem; line-height:1; font-weight:700; }
.conduct-encouraged li::before { content:"\2713"; position:absolute; left:6px; top:11px;
  color:var(--success); font-size:1rem; line-height:1; font-weight:700; }
.conduct-list li.safety-critical { background:var(--danger-bg); border-radius:6px; padding-right:10px; }

/* ===== Tables, auth, misc ===== */
.muted { color:var(--fog); }
.text-center { text-align:center; }
.mt-0 { margin-top:0; } .mb-0 { margin-bottom:0; }
.divider { border:none; border-top:1px solid #eee; margin:20px 0; }
.report-box { background:var(--teal-pale); border-left:4px solid var(--teal); border-radius:8px;
  padding:18px 20px; white-space:pre-wrap; font-size:0.95rem; line-height:1.65; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 8px; border-bottom:1px solid #eee; font-size:0.9rem; }
th { color:var(--slate); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em; }
.table-wrap { overflow-x:auto; }
.row-emergency { background:var(--danger-bg); }
.excerpt-cell { max-width:320px; font-size:0.82rem; color:var(--slate); word-break:break-word; }
.api-error { font-size:0.78rem; color:var(--danger); word-break:break-all; }

footer { text-align:center; padding:30px 0; color:var(--fog); font-size:0.82rem; }
footer .footer-main { margin:0 0 6px; }
footer .footer-emergency { margin:0 0 8px; font-weight:600; color:var(--danger); font-size:0.82rem; }
footer .footer-links { margin:0; font-size:0.82rem; }

.auth-shell { min-height:78vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:40px; width:100%; max-width:440px; }
.auth-card h1 { text-align:center; font-size:1.8rem; }
.auth-subtitle { text-align:center; color:var(--fog); margin-bottom:24px; font-size:0.9rem; }

main.container { padding-top:28px; padding-bottom:40px; }
code { background:#f0f0ee; padding:1px 6px; border-radius:4px; font-size:0.88em; }
pre { background:#f4f4f2; padding:16px; border-radius:8px; overflow-x:auto; font-size:0.82rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* ---- Demo account hint on the login page ------------------------------- */
.demo-hint {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--gold);
  border-radius: 10px;
  background: rgba(198, 160, 76, 0.07);
  font-size: 0.88rem;
}
.demo-hint strong { display: block; margin-bottom: 4px; }
.demo-hint code {
  background: rgba(0, 0, 0, 0.28);
  padding: 1px 5px;
  border-radius: 4px;
}
.demo-hint p { margin: 6px 0 10px; }
.demo-hint .demo-caveat { font-size: 0.82rem; opacity: 0.8; margin-bottom: 0; }