/* Reusable dossier drawer — editorial/magazine aesthetic. All styles scoped
   under .dossier / .dossier-backdrop so nothing bleeds into the rest of the app.
   See public/dossier.js for the open/close API. */

.dossier-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 43, 94, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
  z-index: 90;
  backdrop-filter: blur(1px);
}
.dossier-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.dossier {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(640px, 92vw);
  background: #fdfaf3;
  box-shadow: -20px 0 60px rgba(27, 43, 94, 0.12);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.2, 1);
  z-index: 100;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  --d-ink: #1B2B5E;
  --d-accent: #E8751A;
  --d-accent-deep: #b25a14;
  --d-mute: #7a6e5c;
  --d-rule: #d0c6b8;
  --d-rule-soft: #e5ddcc;
  --d-ok: #2f7d3a;
  --d-late: #c58a2b;
  --d-red: #c63d3d;
  --d-ff-display: 'Instrument Serif', 'Times New Roman', serif;
  --d-ff-body: 'DM Sans', system-ui, sans-serif;
  --d-fv-tabular: 'tnum' 1, 'lnum' 1;
  font-family: var(--d-ff-body);
  color: var(--d-ink);
  -webkit-font-smoothing: antialiased;
}
.dossier.open { transform: translateX(0); }

.dossier::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(208, 198, 184, 0.08) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(208, 198, 184, 0.06) 0, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(232, 117, 26, 0.02) 0, transparent 30%);
  pointer-events: none;
}

.dossier-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--d-rule);
  background: transparent;
  color: var(--d-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
  padding: 0;
  font-family: inherit;
}
.dossier-close:hover {
  border-color: var(--d-accent);
  color: var(--d-accent-deep);
  transform: rotate(90deg);
}

.dossier-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.dossier-content {
  padding: 56px 56px 20px;
  max-width: 640px;
  position: relative;
  z-index: 1;
}

.dossier.open .dossier-section {
  animation: d-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.dossier.open .dossier-section:nth-child(1) { animation-delay: 0.08s; }
.dossier.open .dossier-section:nth-child(2) { animation-delay: 0.14s; }
.dossier.open .dossier-section:nth-child(3) { animation-delay: 0.20s; }
.dossier.open .dossier-section:nth-child(4) { animation-delay: 0.26s; }
.dossier.open .dossier-section:nth-child(5) { animation-delay: 0.32s; }
.dossier.open .dossier-section:nth-child(6) { animation-delay: 0.38s; }
.dossier.open .dossier-section:nth-child(7) { animation-delay: 0.44s; }

@keyframes d-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Masthead */
.dossier .d-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--d-mute);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dossier .d-eyebrow-rule {
  flex: 1;
  height: 1px;
  background: var(--d-ink);
  opacity: 0.3;
}
.dossier .d-eyebrow-num {
  font-family: var(--d-ff-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--d-ink);
  font-feature-settings: var(--d-fv-tabular);
}
.dossier .d-title {
  font-family: var(--d-ff-display);
  font-size: clamp(38px, 6vw, 52px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--d-ink);
}
.dossier .d-title em {
  font-style: italic;
  color: var(--d-mute);
  font-weight: 400;
}
.dossier .d-subtitle {
  font-family: var(--d-ff-display);
  font-style: italic;
  font-size: 20px;
  color: var(--d-mute);
  margin: 0 0 14px;
}
.dossier .d-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.dossier .d-pill {
  font-size: 11px;
  padding: 5px 11px;
  border: 1px solid var(--d-rule);
  border-radius: 20px;
  background: transparent;
  letter-spacing: 0.02em;
  color: var(--d-ink);
}
.dossier .d-pill-accent { border-color: var(--d-accent); color: var(--d-accent-deep); }

/* Section framework */
.dossier .dossier-section {
  padding: 32px 0;
  border-top: 1px solid var(--d-rule);
}
.dossier .dossier-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
.dossier .d-sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.dossier .d-sec-num {
  font-family: var(--d-ff-display);
  font-style: italic;
  font-size: 14px;
  color: var(--d-accent-deep);
  min-width: 24px;
}
.dossier .d-sec-title {
  font-family: var(--d-ff-display);
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.005em;
  font-weight: 400;
}
.dossier .d-sec-note {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-mute);
}

/* At-a-glance stats */
.dossier .d-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--d-rule);
  background: #fdfaf3;
}
.dossier .d-stat {
  padding: 20px 16px;
  border-right: 1px solid var(--d-rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dossier .d-stat:last-child { border-right: none; }
.dossier .d-stat-val {
  font-family: var(--d-ff-body);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--d-ink);
  font-feature-settings: var(--d-fv-tabular);
}
.dossier .d-stat-val.accent { color: var(--d-accent-deep); }
.dossier .d-stat-val small {
  font-family: var(--d-ff-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--d-mute);
  margin-left: 2px;
  letter-spacing: 0;
}
.dossier .d-stat-lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-mute);
  margin-top: 4px;
}

/* Category bars */
.dossier .d-cat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--d-rule-soft);
  align-items: baseline;
}
.dossier .d-cat-row:last-child { border-bottom: none; }
.dossier .d-cat-name {
  font-size: 14px;
  color: var(--d-ink);
}
.dossier .d-cat-name small {
  color: var(--d-mute);
  font-style: italic;
  margin-left: 6px;
  font-size: 12px;
}
.dossier .d-cat-meta {
  font-size: 12px;
  color: var(--d-mute);
  font-feature-settings: var(--d-fv-tabular);
  text-align: right;
}
.dossier .d-cat-meta strong { color: var(--d-ink); font-weight: 500; }
.dossier .d-cat-bar {
  grid-column: 1 / -1;
  height: 4px;
  background: #eee5d5;
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}
.dossier .d-cat-bar-fill {
  height: 100%;
  background: var(--d-accent);
  transition: width 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* Contributors */
.dossier .d-contrib-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--d-rule-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
}
.dossier .d-contrib-row:last-child { border-bottom: none; }
.dossier .d-contrib-name {
  font-family: var(--d-ff-display);
  font-size: 19px;
  line-height: 1.1;
}
.dossier .d-contrib-stats {
  font-size: 12px;
  color: var(--d-mute);
  font-feature-settings: var(--d-fv-tabular);
  text-align: right;
  align-self: start;
  margin-top: 4px;
}
.dossier .d-contrib-stats strong { color: var(--d-ink); font-weight: 500; }
.dossier .d-contrib-note {
  grid-column: 1 / -1;
  color: var(--d-mute);
  font-size: 13px;
  font-style: italic;
  margin-top: 2px;
}

/* Tasks */
.dossier .d-task {
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--d-rule-soft);
  font-size: 13px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
}
.dossier .d-task:last-child { border-bottom: none; }
.dossier .d-task::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--d-ink);
}
.dossier .d-task.done::before { background: var(--d-ink); }
.dossier .d-task-title { color: var(--d-ink); }
.dossier .d-task-meta {
  font-size: 11px;
  color: var(--d-mute);
  text-align: right;
  font-feature-settings: var(--d-fv-tabular);
}

.dossier .d-muted {
  color: var(--d-mute);
  font-style: italic;
  font-size: 13px;
  padding: 8px 0;
}

/* Action bar (sticky bottom) */
.dossier .dossier-actions {
  position: relative;
  padding: 20px 56px 24px;
  background: linear-gradient(to bottom, rgba(253, 250, 243, 0), #fdfaf3 40%);
  border-top: 1px solid var(--d-rule);
  display: flex;
  gap: 12px;
  z-index: 3;
}
.dossier .d-action {
  flex: 1;
  padding: 14px 18px;
  border: 1px solid var(--d-ink);
  background: #fdfaf3;
  color: var(--d-ink);
  font-family: var(--d-ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dossier .d-action:hover {
  background: var(--d-ink);
  color: #fdfaf3;
}
.dossier .d-action.primary {
  background: var(--d-ink);
  color: #fdfaf3;
}
.dossier .d-action.primary:hover {
  background: var(--d-accent-deep);
  border-color: var(--d-accent-deep);
}
.dossier .d-action small {
  opacity: 0.65;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 6px;
}
.dossier .d-action .arrow { transition: transform 0.15s; }
.dossier .d-action:hover .arrow { transform: translateX(3px); }

@media (max-width: 720px) {
  .dossier { width: 100vw; }
  .dossier-content { padding: 36px 24px 20px; }
  .dossier .dossier-actions { padding: 16px 24px; flex-direction: column; }
  .dossier .d-title { font-size: 40px; }
  .dossier .d-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dossier .d-stat:nth-child(2) { border-right: none; }
  .dossier .d-stat:nth-child(1), .dossier .d-stat:nth-child(2) { border-bottom: 1px solid var(--d-rule); }
}