/* ============================================================
   GovProtocol / GDPRLedger — components.css
   Buttons · Forms · Cards · Badges · Task UI · Progress · Alerts
   ============================================================ */

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-loading {
  position: relative;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Primary */
.btn-primary {
  background: var(--green-md);
  color: white;
  border-color: var(--green-md);
}
.btn-primary:hover  { background: var(--green); border-color: var(--green); color: white; }
.btn-primary:active { background: var(--green-dk); }

/* Secondary */
.btn-secondary {
  background: white;
  color: var(--ink);
  border-color: var(--border);
}
.btn-secondary:hover  { background: var(--mid); border-color: var(--border); }
.btn-secondary:active { background: var(--border); }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--mid); color: var(--ink); }

/* Danger */
.btn-danger {
  background: var(--red-lt);
  color: var(--red);
  border-color: rgba(192,57,43,.2);
}
.btn-danger:hover { background: var(--red); color: white; border-color: var(--red); }

/* Dark (for dark backgrounds) */
.btn-dark {
  background: rgba(255,255,255,.12);
  color: white;
  border-color: rgba(255,255,255,.25);
}
.btn-dark:hover { background: rgba(255,255,255,.2); color: white; }

/* Sizes */
.btn-sm { font-size: 13px; padding: 7px 14px; }
.btn-lg { font-size: 15px; padding: 13px 28px; border-radius: var(--r); }
.btn-xl { font-size: 16px; padding: 15px 36px; border-radius: var(--r); font-weight: 600; }

/* Full width */
.btn-block { width: 100%; }

/* Task completion buttons */
.btn-complete {
  background: var(--green-lt);
  color: var(--green);
  border-color: rgba(26,122,74,.25);
  font-weight: 600;
}
.btn-complete:hover { background: var(--green); color: white; border-color: var(--green); }
.btn-complete.active { background: var(--green); color: white; border-color: var(--green); }

.btn-partial {
  background: var(--amber-lt);
  color: var(--amber);
  border-color: rgba(180,83,9,.25);
  font-weight: 600;
}
.btn-partial:hover { background: var(--amber); color: white; border-color: var(--amber); }
.btn-partial.active { background: var(--amber); color: white; border-color: var(--amber); }

.btn-na {
  background: var(--mid);
  color: var(--muted);
  border-color: var(--border);
  font-weight: 600;
}
.btn-na:hover { background: var(--border); color: var(--ink); }
.btn-na.active { background: var(--ink); color: white; border-color: var(--ink); }

/* ── Forms ── */

.form-group {
  margin-bottom: var(--s5);
}

.form-group:last-child { margin-bottom: 0; }

label,
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--s2);
}

.form-label-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--dim);
  margin-left: var(--s1);
  font-family: var(--font-mono);
}

.form-hint {
  font-size: 12px;
  color: var(--dim);
  margin-top: var(--s1);
  line-height: 1.5;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--green-md);
  box-shadow: 0 0 0 3px rgba(46,168,100,.12);
}

input::placeholder,
textarea::placeholder { color: var(--dim); }

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--mid);
  color: var(--muted);
  cursor: not-allowed;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5955' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* Error state */
.form-group.error input,
.form-group.error select,
.form-group.error textarea,
input.error,
select.error,
textarea.error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(192,57,43,.08);
}

.form-error {
  font-size: 12px;
  color: var(--red);
  margin-top: var(--s1);
  display: flex;
  align-items: center;
  gap: var(--s1);
}

/* Radio / checkbox groups */
.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
  background: white;
}

.radio-option:hover,
.checkbox-option:hover { border-color: var(--green-md); background: var(--green-lt); }

.radio-option.selected,
.checkbox-option.checked {
  border-color: var(--green-md);
  background: var(--green-lt);
}

.radio-option input,
.checkbox-option input {
  width: auto;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--green-md);
}

.radio-option-content,
.checkbox-option-content { flex: 1; }

.radio-option-label,
.checkbox-option-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: block;
  margin-bottom: 0;
}

.radio-option-hint,
.checkbox-option-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  display: block;
}

/* Form section divider */
.form-section {
  border-top: 1px solid var(--border);
  padding-top: var(--s5);
  margin-top: var(--s5);
}

.form-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--s4);
  display: block;
}

/* Form row (two columns) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ── Cards ── */

.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s6);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--s5);
  gap: var(--s4);
}

.card-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s1);
}

.card-sub {
  font-size: 13px;
  color: var(--muted);
}

.card-body { }

.card-footer {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

/* ── Badges / Tags ── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  font-weight: 500;
  white-space: nowrap;
}

.badge-green   { background: var(--green-lt);  color: var(--green);  }
.badge-amber   { background: var(--amber-lt);  color: var(--amber);  }
.badge-red     { background: var(--red-lt);    color: var(--red);    }
.badge-blue    { background: var(--blue-lt);   color: var(--blue);   }
.badge-neutral { background: var(--mid);       color: var(--muted);  }
.badge-dark    { background: var(--ink);       color: white;         }

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Task status badges */
.task-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 3px 9px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

.task-status.complete    { background: var(--green-lt);  color: var(--green);  }
.task-status.partial     { background: var(--amber-lt);  color: var(--amber);  }
.task-status.not-started { background: var(--mid);       color: var(--muted);  }
.task-status.na          { background: var(--mid);       color: var(--dim);    }

/* GDPR article tag */
.article-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  background: var(--blue-lt);
  color: var(--blue);
  letter-spacing: .03em;
}

/* ── Progress bar ── */

.progress-bar-wrap {
  margin-bottom: var(--s6);
}

.progress-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s2);
}

.progress-bar-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.progress-bar-count {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--muted);
}

.progress-bar-track {
  height: 6px;
  background: var(--mid);
  border-radius: 100px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--green-md);
  border-radius: 100px;
  transition: width .6s ease;
}

.progress-bar-fill.partial { background: var(--amber-md); }

/* ── Task list (dashboard) ── */

.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.task-list-item {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: all var(--t-fast);
  cursor: pointer;
}

.task-list-item:hover {
  border-color: var(--green-md);
  box-shadow: var(--shadow-sm);
}

.task-list-item.complete {
  opacity: .75;
}

.task-list-item.complete:hover { opacity: 1; }

.task-list-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: all var(--t-fast);
}

.task-list-item.complete .task-list-check {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

.task-list-item.partial .task-list-check {
  background: var(--amber);
  border-color: var(--amber);
  color: white;
}

.task-list-content { flex: 1; min-width: 0; }

.task-list-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-list-meta {
  font-size: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.task-list-arrow {
  color: var(--border);
  font-size: 14px;
  flex-shrink: 0;
  transition: color var(--t-fast);
}

.task-list-item:hover .task-list-arrow { color: var(--green-md); }

/* ── Task view ── */

.task-view-header {
  margin-bottom: var(--s7);
}

.task-view-meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.task-view-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s2);
  line-height: 1.2;
}

.task-view-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 60ch;
}

/* Guidance tabs */
.guidance-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--s5);
  gap: 0;
}

.guidance-tab {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: var(--s3) var(--s5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--t-fast);
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.guidance-tab:hover { color: var(--ink); }

.guidance-tab.active {
  color: var(--green);
  border-bottom-color: var(--green-md);
  font-weight: 600;
}

.guidance-panel {
  display: none;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.guidance-panel.active { display: block; }

.guidance-panel h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s2);
  margin-top: var(--s4);
  font-family: var(--font-sans);
}

.guidance-panel h5:first-child { margin-top: 0; }

.guidance-panel p + p { margin-top: var(--s3); }

.guidance-panel strong { color: var(--ink); }

/* Checklist items */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s4);
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.check-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}

.check-box.checked {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

/* Illustrative example note */
.example-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--amber-lt);
  border: 1px solid rgba(180,83,9,.2);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--amber);
  margin-bottom: var(--s4);
  line-height: 1.6;
}

/* AI prompt panel */
.ai-panel {
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-top: var(--s6);
  overflow: hidden;
}

.ai-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  background: var(--mid);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}

.ai-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.ai-panel-toggle {
  font-size: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  transition: transform var(--t-fast);
}

.ai-panel.open .ai-panel-toggle { transform: rotate(180deg); }

.ai-panel-body {
  display: none;
  padding: var(--s5);
}

.ai-panel.open .ai-panel-body { display: block; }

.ai-prompt-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--s3);
  display: block;
}

.ai-prompt-box {
  position: relative;
  background: var(--ink);
  border-radius: var(--r-sm);
  padding: var(--s5);
  padding-right: var(--s7);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.75;
  color: rgba(255,255,255,.8);
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-prompt-copy {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 4px 10px;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all var(--t-fast);
}

.ai-prompt-copy:hover  { background: rgba(255,255,255,.2); color: white; }
.ai-prompt-copy.copied { color: var(--green-md); border-color: var(--green-md); }

.ai-prompt-disclaimer {
  font-size: 11px;
  color: var(--dim);
  margin-top: var(--s3);
  font-style: italic;
  line-height: 1.6;
}

/* Evidence upload */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--r);
  padding: var(--s8) var(--s6);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast);
  background: white;
  margin-top: var(--s6);
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--green-md);
  background: var(--green-lt);
}

.upload-zone-icon {
  font-size: 28px;
  margin-bottom: var(--s3);
  opacity: .6;
}

.upload-zone-text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--s1);
}

.upload-zone-hint {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--dim);
}

.upload-zone input[type="file"] {
  display: none;
}

.upload-file-preview {
  display: none;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--green-lt);
  border: 1px solid rgba(26,122,74,.2);
  border-radius: var(--r-sm);
  margin-top: var(--s4);
}

.upload-file-preview.visible { display: flex; }

.upload-file-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.upload-file-info { flex: 1; min-width: 0; }

.upload-file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-file-size {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--muted);
  margin-top: 1px;
}

.upload-file-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: var(--s1);
  font-size: 16px;
  line-height: 1;
  transition: color var(--t-fast);
}

.upload-file-remove:hover { color: var(--red); }

.upload-progress {
  height: 3px;
  background: var(--mid);
  border-radius: 100px;
  overflow: hidden;
  margin-top: var(--s3);
  display: none;
}

.upload-progress.visible { display: block; }

.upload-progress-bar {
  height: 100%;
  background: var(--green-md);
  border-radius: 100px;
  transition: width .3s ease;
  width: 0;
}

/* AI verification results */
.verification-panel {
  margin-top: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: none;
}

.verification-panel.visible { display: block; }

.verification-header {
  padding: var(--s4) var(--s5);
  background: var(--mid);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.verification-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
}

.verification-body {
  padding: var(--s4) var(--s5);
}

.traffic-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.traffic-row:last-of-type { border-bottom: none; }

.traffic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.traffic-dot.present { background: var(--green-md); }
.traffic-dot.partial { background: var(--amber-md); }
.traffic-dot.missing { background: var(--red-md); }

.traffic-label {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
}

.traffic-status {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: var(--r-xs);
}

.traffic-status.present { color: var(--green);  background: var(--green-lt); }
.traffic-status.partial { color: var(--amber);  background: var(--amber-lt); }
.traffic-status.missing { color: var(--red);    background: var(--red-lt);   }

.verification-disclaimer {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--amber-lt);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--amber);
  line-height: 1.6;
}

/* ── Task completion form ── */

.completion-form {
  border-top: 1px solid var(--border);
  padding-top: var(--s7);
  margin-top: var(--s7);
}

.completion-form-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s4);
}

.completion-actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

/* ── Alert / flash messages ── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: var(--s5);
}

.alert-success { background: var(--green-lt); color: var(--green); border: 1px solid rgba(26,122,74,.2); }
.alert-error   { background: var(--red-lt);   color: var(--red);   border: 1px solid rgba(192,57,43,.2); }
.alert-warning { background: var(--amber-lt); color: var(--amber); border: 1px solid rgba(180,83,9,.2);  }
.alert-info    { background: var(--blue-lt);  color: var(--blue);  border: 1px solid rgba(29,78,216,.2); }
.alert-neutral { background: var(--mid);      color: var(--muted); border: 1px solid var(--border); }

.alert-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.alert-body { flex: 1; }

.alert-title {
  font-weight: 600;
  margin-bottom: 2px;
  font-family: var(--font-sans);
}

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: var(--s6);
  right: var(--s6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  background: var(--ink);
  color: white;
  border-radius: var(--r-sm);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in .25s ease;
  max-width: 360px;
}

.toast.success { background: var(--green); }
.toast.error   { background: var(--red); }
.toast.warning { background: var(--amber-md); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Divider with text ── */

.divider-text {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: 12px;
  color: var(--dim);
  font-family: var(--font-mono);
  margin: var(--s6) 0;
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Pricing cards ── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s5);
  margin-top: var(--s9);
}

.pricing-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s7);
  display: flex;
  flex-direction: column;
  position: relative;
}

.pricing-card.featured {
  border-color: var(--green-md);
  box-shadow: 0 0 0 1px var(--green-md), var(--shadow);
}

.pricing-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green-md);
  color: white;
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 3px 14px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  letter-spacing: .06em;
}

.pricing-tier {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}

.pricing-amount {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  margin-bottom: var(--s2);
  letter-spacing: -0.03em;
}

.pricing-amount sup {
  font-size: 22px;
  vertical-align: top;
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: 0;
}

.pricing-note {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--dim);
  margin-bottom: var(--s6);
}

.pricing-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: var(--s5);
}

.pricing-features {
  list-style: none;
  padding: 0;
  flex: 1;
  margin-bottom: var(--s6);
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: 13px;
  color: var(--muted);
  padding: var(--s2) 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.pricing-features li:last-child { border-bottom: none; }

.pricing-features li::before {
  content: '✓';
  color: var(--green-md);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-features li.muted::before { content: '–'; color: var(--dim); }
.pricing-features li.muted         { color: var(--dim); }

/* ── Gate notice ── */

.gate-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s5) var(--s6);
  background: var(--mid);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-top: var(--s5);
}

.gate-notice-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.gate-notice-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.gate-notice-text strong { color: var(--ink); }

/* ── Evidence pack preview ── */

.pack-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.pack-card-header {
  background: var(--ink);
  color: white;
  padding: var(--s6) var(--s7);
}

.pack-card-logo {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--green-md);
  margin-bottom: var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.pack-card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: var(--s4);
}

.pack-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2) var(--s5);
}

.pack-meta-item {
  font-size: 12px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,.6);
}

.pack-meta-item strong {
  display: block;
  color: rgba(255,255,255,.9);
  margin-bottom: 1px;
}

.pack-section {
  padding: var(--s5) var(--s7);
  border-bottom: 1px solid var(--border);
}

.pack-section:last-child { border-bottom: none; }

.pack-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--s4);
  display: block;
}

.pack-task-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: 13px;
}

.pack-task-row:last-child { border-bottom: none; }

.pack-tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}

.pack-tick.done { background: var(--green); color: white; }

.pack-task-name { flex: 1; color: var(--ink); }

.pack-task-date {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--dim);
}

.pack-hash {
  padding: var(--s4) var(--s7);
  background: var(--mid);
  border-top: 1px solid var(--border);
}

.pack-hash-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--s2);
}

.pack-hash-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  line-height: 1.5;
}

/* ── Misc ── */

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--mid) 25%, var(--border) 50%, var(--mid) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--r-xs);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--s12) var(--s7);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: var(--s4);
  opacity: .4;
}

.empty-state h4 {
  font-size: 17px;
  margin-bottom: var(--s2);
}

.empty-state p {
  font-size: 14px;
  color: var(--muted);
  max-width: 40ch;
  margin: 0 auto var(--s5);
}

/* Inline code reference */
.ref-article {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--blue-lt);
  color: var(--blue);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}