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

body {
  font-family: 'DM Sans', sans-serif;
  color: #1a1a1a;
  background: #fff;
  line-height: 1.55;
  font-size: 14px;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid #E5E7EB;
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #1a1a1a; font-weight: 600; font-size: 15px; }
.badge { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: #fff; background: #1a1a1a; padding: 3px 8px; border-radius: 3px; }

/* Main */
.main { max-width: 860px; margin: 0 auto; padding: 32px 20px 48px; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

/* Buttons */
.btn { display: inline-block; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid #E5E7EB; background: #fff; color: #1a1a1a; }
.btn:hover { background: #F9FAFB; }
.btn-primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn-primary:hover { background: #333; }
.btn-sm { font-size: 11px; padding: 4px 10px; }
.btn-approve { background: #ECFDF5; color: #059669; border-color: #6EE7B7; }
.btn-reject { background: #FEF2F2; color: #DC2626; border-color: #FCA5A5; }
.btn-revise { background: #F9FAFB; color: #6B7280; border-color: #E5E7EB; }

/* Table */
.table-wrap { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table thead tr { background: #F9FAFB; }
.table th { padding: 10px 16px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; text-align: left; }
.table td { padding: 12px 16px; border-top: 1px solid #E5E7EB; vertical-align: middle; }
.table tr:hover td { background: #FAFAFA; }
.charter-name { font-weight: 600; }
.muted { color: #6B7280; }
.small { font-size: 11px; }

/* Progress bar */
.progress-bar-wrap { display: inline-block; width: 80px; height: 4px; background: #E5E7EB; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.progress-bar { height: 4px; background: #1a1a1a; border-radius: 2px; }
.progress-label { font-size: 11px; color: #6B7280; }

/* Status badge */
.status-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.status-draft { color: #6B7280; background: #F3F4F6; }
.status-active { color: #059669; background: #ECFDF5; }
.status-on-hold { color: #D97706; background: #FEF3C7; }
.status-completed { color: #2563EB; background: #EFF6FF; }
.status-cancelled { color: #DC2626; background: #FEF2F2; }

/* Status select — same colours as badge */
.status-select {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  border: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
  padding-right: 20px;
}
.status-select:focus { outline: none; box-shadow: 0 0 0 2px #1a1a1a33; }
.status-select.status-draft    { color: #6B7280; background-color: #F3F4F6; }
.status-select.status-active   { color: #059669; background-color: #ECFDF5; }
.status-select.status-on-hold  { color: #D97706; background-color: #FEF3C7; }
.status-select.status-completed{ color: #2563EB; background-color: #EFF6FF; }
.status-select.status-cancelled{ color: #DC2626; background-color: #FEF2F2; }

/* Forms */
.meta-form { display: flex; flex-direction: column; gap: 20px; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #6B7280; }
.field input, .field select { padding: 8px 10px; border: 1px solid #E5E7EB; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #1a1a1a; }
.field input:focus, .field select:focus { outline: none; border-color: #1a1a1a; }

/* Misc */
.subtitle { color: #6B7280; font-size: 13px; margin-top: 4px; }
.empty-state { color: #9CA3AF; padding: 32px 0; }
.form-page { max-width: 560px; }
.form-page h1 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }

/* ── Chat page ────────────────────────────────── */
.chat-page { display: flex; flex-direction: column; height: calc(100vh - 57px); max-width: 100%; padding: 0; }
.chat-progress-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 24px; border-bottom: 1px solid #E5E7EB;
  font-size: 12px; color: #6B7280; background: #FAFAFA;
}
.chat-progress-bar .progress-ring { flex-shrink: 0; }
.chat-progress-bar .unfilled { color: #1a1a1a; font-weight: 600; }
.chat-messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 720px; width: 100%; margin: 0 auto;
}
.bubble { padding: 12px 16px; border-radius: 10px; font-size: 13px; line-height: 1.6; max-width: 85%; }
.bubble-assistant { background: #1a1a1a; color: #fff; align-self: flex-start; }
.bubble-user { background: #F3F4F6; color: #1a1a1a; align-self: flex-end; }
.bubble-assistant p, .proposal-body p { margin: 0 0 8px; }
.bubble-assistant p:last-child, .proposal-body p:last-child { margin-bottom: 0; }
/* Typing indicator */
.typing-indicator { display: flex; align-items: center; gap: 5px; padding: 14px 18px; }
.typing-indicator span {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.6);
  animation: typing-dot 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Fade-in for new messages and proposal cards */
@keyframes msg-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bubble-fade-in  { animation: msg-fade-in .22s ease-out forwards; }
.proposal-fade-in { animation: msg-fade-in .22s ease-out forwards; }

/* Proposal card */
.proposal-card {
  border: 1.5px solid #1a1a1a; border-radius: 10px; overflow: hidden;
  font-size: 13px; max-width: 85%;
}
.proposal-header {
  background: #1a1a1a; color: #fff; padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.proposal-header .proposal-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.proposal-header .proposal-influenced { font-size: 10px; color: #9CA3AF; }
.proposal-body { padding: 14px 16px; background: #fff; color: #1a1a1a; line-height: 1.7; }
.proposal-actions { display: flex; border-top: 1.5px solid #1a1a1a; }
.proposal-actions button {
  flex: 1; padding: 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: none; border-right: 1px solid #E5E7EB; font-family: 'DM Sans', sans-serif;
}
.proposal-actions button:last-child { border-right: none; }

/* Chat input */
.chat-input-wrap {
  padding: 12px 24px; border-top: 1px solid #E5E7EB;
  display: flex; gap: 8px; background: #FAFAFA;
  max-width: 720px; width: 100%; margin: 0 auto;
}
.chat-input-wrap input {
  flex: 1; padding: 9px 12px; border: 1px solid #E5E7EB;
  border-radius: 6px; font-size: 13px; font-family: 'DM Sans', sans-serif;
}
.chat-input-wrap input:focus { outline: none; border-color: #1a1a1a; }
.chat-input-wrap input:disabled { background: #F3F4F6; color: #9CA3AF; }
.chat-input-wrap button { flex-shrink: 0; }

/* ── Charter view ─────────────────────────────── */
.charter-view { display: grid; grid-template-columns: 1fr; gap: 0; }
.charter-tabs { display: flex; gap: 0; border-bottom: 1px solid #E5E7EB; margin-bottom: 24px; }
.charter-tab {
  padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; color: #6B7280; text-decoration: none;
}
.charter-tab.active { border-bottom-color: #1a1a1a; color: #1a1a1a; }
.charter-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; padding: 16px; background: #FAFAFA; border: 1px solid #E5E7EB; border-radius: 10px; margin-bottom: 20px; }
.charter-meta-item .label { font-size: 10px; font-weight: 700; letter-spacing:.06em; text-transform:uppercase; color:#6B7280; }
.charter-meta-item .value { font-size: 13px; color: #1a1a1a; margin-top: 2px; }
.section-card { padding: 16px 20px; border: 1px solid #E5E7EB; border-radius: 10px; margin-bottom: 10px; }
.section-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.section-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #9CA3AF; min-width: 22px; }
.section-label { font-size: 14px; font-weight: 600; flex: 1; }
.section-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.section-hint { font-size: 12px; color: #9CA3AF; padding-left: 32px; margin-bottom: 8px; }
.section-content { font-size: 13px; line-height: 1.7; color: #1a1a1a; padding-left: 32px; }
.section-content p { margin: 0 0 8px; }
.section-content p:last-child { margin-bottom: 0; }
.section-empty { font-size: 13px; color: #D1D5DB; padding-left: 32px; font-style: italic; }
.outcome-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 32px; }
.outcome-tag-badge { font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 20px; background: #1a1a1a; color: #fff; }

/* ── Revision history ─────────────────────────── */
.rev-date-group { margin-bottom: 24px; }
.rev-date-label { font-size: 10px; font-weight: 700; letter-spacing:.08em; text-transform:uppercase; color:#9CA3AF; margin-bottom:10px; }
.rev-card { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.rev-card-header { padding: 12px 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rev-summary { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.rev-meta { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
.rev-changes { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.rev-change-item { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.rev-field { color: #6B7280; font-family: 'JetBrains Mono', monospace; }
.rev-arrow { color: #D1D5DB; }
.rev-after { color: #059669; }
.diff-block { padding: 10px 16px; border-top: 1px solid #E5E7EB; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.diff-field { font-weight: 600; color: #1a1a1a; margin-bottom: 4px; font-family: 'DM Sans', sans-serif; }
.diff-before { color: #DC2626; margin-bottom: 2px; }
.diff-after { color: #059669; }

/* ── Print / PDF export ───────────────────────── */
.no-print { }        /* visible by default */
.print-only { display: none; }  /* hidden by default, shown on print */

@media print {
  @page { size: A4 portrait; margin: 18mm 22mm; }

  .no-print,
  .nav { display: none !important; }
  .print-only { display: block !important; }

  body { font-size: 12px; background: #fff; }
  .main { max-width: 100%; padding: 0; margin: 0; }

  /* Always show charter tab, never history */
  #tab-charter { display: block !important; }
  #tab-history { display: none !important; }

  /* Prevent cards from splitting across pages */
  .section-card { break-inside: avoid; page-break-inside: avoid; border-color: #ccc; }
  .charter-meta-grid { break-inside: avoid; page-page-inside: avoid; }

  /* Soften colours that don't print well */
  .section-num { color: #999; }
  .section-hint { color: #888; }
  .outcome-tag-badge { background: #1a1a1a; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}