/* ═══════════════════════════════════════════════════════════════════════════
   Sprig Editorial Tracker
   Hybrid: Sprig Issue 03 visual language for page/header/table/timeline,
   clean functional style for everything else.
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Sprig palette */
  --bg:           #1f1d1a;
  --paper:        #efe6cf;
  --ink:          #1f1408;
  --cream:        #ede4ce;
  --cream-soft:   #d6cdb6;
  --cream-dim:    #8a8270;
  --olive:        #7c9050;
  --olive-soft:   #99ae6f;
  --olive-deep:   #5a6b3a;
  --mustard:      #d4b248;
  --maroon:       #6b3722;

  /* Surface tiers */
  --surface-1:    #2a2724;   /* raised dark card */
  --surface-2:    #323028;   /* higher card */
  --border-dark:  rgba(237,228,206,0.11);
  --border-dark-hover: rgba(237,228,206,0.22);

  /* Legacy aliases (used in inline styles) */
  --surface:      var(--paper);
  --border:       rgba(31,20,8,0.18);
  --text:         var(--ink);
  --muted:        var(--cream-dim);
  --accent:       var(--olive);
  --accent2:      var(--maroon);
  --pending:      var(--mustard);
  --accepted:     var(--olive);
  --rejected:     var(--maroon);

  /* Typography */
  --font:         'Geist', system-ui, sans-serif;
  --font-display: 'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'Courier New', monospace;
  --font-hand:    'Caveat', cursive;
  --font-italic:  'Geist', system-ui, sans-serif;
  --mono:         var(--font-mono);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Grain overlay — page only */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════ SPRIG ELEMENTS (keep) ═══════ */

/* ── Header chrome ─────────────────────────────────────────────────────────── */
header {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem .9rem;
  border-bottom: 1px solid rgba(237,228,206,0.14);
}

.brand { display: flex; align-items: center; }
.brand-logo { height: 38px; display: block; }
.header-meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ── Tab navigation ────────────────────────────────────────────────────────── */
nav.tabs {
  background: #181614;
  display: flex;
  padding: 0 2rem;
  border-bottom: 1px solid rgba(237,228,206,0.08);
}
.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--cream-dim);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .75rem 1.25rem;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--cream-soft); opacity: 1; }
.tab.active { color: var(--cream); border-bottom-color: var(--olive); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Table (paper slip, Sprig treatment) ───────────────────────────────────── */
.table-wrap {
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.25);
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; }

thead th {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--cream-dim);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
thead th:hover { color: var(--cream); }
thead th.sorted { color: var(--olive-soft); }
thead th.sorted::after { content: ' ↓'; }
thead th.sorted.asc::after { content: ' ↑'; }

tbody tr {
  border-bottom: 1px solid rgba(31,20,8,.1);
  transition: background .1s;
  cursor: pointer;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(124,144,80,.09); }

td {
  padding: .65rem 1rem;
  font-size: .9rem;
  color: var(--ink);
}

.sub-number  { font-family: var(--font-mono); font-size: .75rem; color: var(--cream-dim); }
.author-name { font-family: var(--font-display); font-size: .95rem; font-weight: 600; }

/* Status stamps */
.badge {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
.badge-pending  { color: var(--mustard); }
.badge-accepted { color: var(--olive-deep); }
.badge-rejected { color: var(--maroon); }

/* Issue chip */
.issue-chip {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive-deep);
  border: 1px solid var(--olive);
  border-radius: 2px;
  padding: .12rem .45rem;
  white-space: nowrap;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer {
  padding: 1.25rem 2rem;
  border-top: 1px solid rgba(237,228,206,.08);
  display: flex;
  justify-content: center;
}
.footer-mark {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--cream-dim);
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════ SIMPLIFIED ELEMENTS ═════════ */

/* ── Main layout ───────────────────────────────────────────────────────────── */
main {
  flex: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 2rem 2rem 3rem;
  width: 100%;
}

/* ── Stats (clean dark cards) ──────────────────────────────────────────────── */
.stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.stat {
  background: var(--surface-1);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: .85rem 1.4rem;
  min-width: 110px;
  text-align: center;
}
.stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cream);
  line-height: 1;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: .3rem;
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.toolbar-left  { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.toolbar-right { display: flex; gap: .6rem; flex-shrink: 0; }

input[type="text"],
input[type="search"],
input[type="date"],
select,
textarea {
  font-family: var(--font-mono);
  font-size: .8rem;
  background: rgba(237,228,206,.06);
  border: 1px solid var(--border-dark);
  border-radius: 3px;
  padding: .42rem .75rem;
  color: var(--cream-soft);
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder,
textarea::placeholder { color: var(--cream-dim); }
input:focus,
select:focus,
textarea:focus { border-color: var(--olive); }

#search { width: 200px; }
textarea { resize: vertical; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
button {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  padding: .45rem 1rem;
  border: 1px solid transparent;
  transition: opacity .15s, background .15s;
  white-space: nowrap;
}
button:hover { opacity: .85; }

.btn-primary { background: var(--olive);  color: #fff; border-color: var(--olive-deep); }
.btn-ghost   { background: transparent;   color: var(--cream-soft); border-color: var(--border-dark); }
.btn-danger  { background: var(--maroon); color: #fff; }
.btn-sm      { font-size: .7rem; padding: .3rem .75rem; }
.btn-icon    { background: none; border: none; padding: .2rem .4rem; font-size: .9rem; color: var(--cream-dim); letter-spacing: 0; text-transform: none; }
.btn-icon:hover { color: var(--cream); opacity: 1; }

/* ── Modal (clean, warm-white) ─────────────────────────────────────────────── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,13,11,.72);
  backdrop-filter: blur(2px);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.overlay.open { display: flex; }

.modal {
  background: #f4efe3;
  color: var(--ink);
  border-radius: 4px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0 2rem 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
.modal-narrow { max-width: 480px; }
.modal-wide   { max-width: 760px; }

/* Thin olive accent bar at top of each modal */
.modal-tape {
  height: 3px;
  background: var(--olive);
  margin: 0 -2rem 1.75rem;
  border-radius: 4px 4px 0 0;
}
.modal-tape::before,
.modal-tape::after { display: none; }

.modal h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.4rem;
}

/* Form fields inside modals */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: .35rem;
}

.modal input[type="text"],
.modal input[type="date"],
.modal input[type="search"],
.modal select,
.modal textarea {
  width: 100%;
  font-family: var(--font);
  font-size: .9rem;
  background: rgba(31,20,8,.05);
  border: 1px solid rgba(31,20,8,.18);
  border-radius: 3px;
  padding: .42rem .75rem;
  color: var(--ink);
  letter-spacing: 0;
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus { border-color: var(--olive); }
.modal input::placeholder,
.modal textarea::placeholder { color: var(--cream-dim); opacity: 1; }
.modal textarea { min-height: 80px; }

.field-row { display: flex; gap: .5rem; }
.field-row input { flex: 1; }

.radio-group { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .3rem; }
.radio-label {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font); font-size: .9rem; color: var(--ink); cursor: pointer;
}
.radio-label input[type="radio"] { accent-color: var(--olive); }

.checkbox-label {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font); font-size: .9rem; color: var(--ink); cursor: pointer;
}
.checkbox-label input[type="checkbox"] { accent-color: var(--olive); width: 1rem; height: 1rem; }

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(31,20,8,.1);
}
.modal-footer-right { display: flex; gap: .6rem; margin-left: auto; }

.modal .btn-ghost   { color: var(--ink); border-color: rgba(31,20,8,.2); }
.modal .btn-ghost:hover { background: rgba(31,20,8,.06); opacity: 1; }

/* Manage sections */
.manage-section-head {
  display: block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: .35rem;
  margin-top: 1.25rem;
}
.manage-list { list-style: none; margin-bottom: .75rem; }
.manage-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem .5rem;
  border-bottom: 1px solid rgba(31,20,8,.1);
  font-size: .9rem;
  color: var(--ink);
}
.manage-list li:last-child { border-bottom: none; }
.modal .btn-icon { color: rgba(31,20,8,.4); }
.modal .btn-icon:hover { color: var(--ink); }

/* ── Portal section divider inside modal ───────────────────────────────────── */
.portal-divider {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
  border-top: 1px solid rgba(237,228,206,.12);
  padding-top: 1.1rem;
  margin: .5rem 0 1.1rem;
}

/* Read-only textarea/input in portal detail block */
.modal textarea[readonly],
.modal input[readonly] {
  background: rgba(237,228,206,.04);
  color: var(--cream-dim);
  cursor: default;
  border-color: rgba(237,228,206,.08);
}

/* ── Source badge (portal submissions) ────────────────────────────────────── */
.source-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mustard);
  border: 1px solid rgba(212,178,72,.35);
  border-radius: 2px;
  padding: .15rem .5rem;
  margin-bottom: 1.25rem;
}
.portal-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--mustard);
  margin-right: .35rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── Submitted file items (portal modal) ───────────────────────────────────── */
.file-item {
  border: 1px solid rgba(31,20,8,.12);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .5rem;
}
.file-preview {
  background: rgba(31,20,8,.04);
  text-align: center;
  padding: .6rem;
  border-bottom: 1px solid rgba(31,20,8,.08);
}
.file-img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 2px;
  display: block;
  margin: 0 auto;
}
.file-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
}
.file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--cream-soft);
}
.file-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.file-type-badge {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--cream-dim);
  border: 1px solid rgba(31,20,8,.15);
  border-radius: 2px;
  padding: .1rem .35rem;
  flex-shrink: 0;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--font);
  font-size: .9rem;
  color: var(--cream-dim);
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #f4efe3;
  color: var(--ink);
  border-left: 3px solid var(--olive);
  padding: .7rem 1.1rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
  z-index: 200;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════ ISSUES LAYOUT ═══════ */

.issues-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ── Issue sidebar — clean dark cards ──────────────────────────────────────── */
.issues-sidebar {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.issue-card {
  background: var(--surface-1);
  border: 1px solid var(--border-dark);
  border-left: 3px solid transparent;
  border-radius: 4px;
  padding: .85rem 1rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.issue-card:hover {
  border-color: var(--border-dark-hover);
  background: var(--surface-2);
}
.issue-card.selected {
  border-left-color: var(--olive);
  border-color: rgba(124,144,80,.35);
  background: var(--surface-2);
}

.issue-card-name {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: .2rem;
}
.issue-card-meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--cream-dim);
}
.issue-card-prog-wrap {
  margin-top: .6rem;
  height: 3px;
  background: rgba(237,228,206,.1);
  border-radius: 2px;
  overflow: hidden;
}
.issue-card-prog-bar {
  height: 100%;
  background: var(--olive);
  border-radius: 2px;
  transition: width .4s ease-out;
}
.issue-card-prog-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  color: var(--cream-dim);
  margin-top: .3rem;
}

/* ── Issue detail panel ────────────────────────────────────────────────────── */
.issue-detail {
  background: var(--surface-1);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: 1.5rem;
  min-height: 340px;
  color: var(--cream);
}

.issue-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-dark);
}
.issue-detail-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: .2rem;
}
.issue-detail-desc {
  font-family: var(--font);
  font-size: .88rem;
  color: var(--cream-soft);
  margin-bottom: .3rem;
}
.issue-detail-meta {
  font-family: var(--font-mono);
  font-size: .71rem;
  letter-spacing: .06em;
  color: var(--cream-dim);
}
.issue-detail-meta strong { color: var(--mustard); font-weight: 400; }
.issue-detail-actions { display: flex; gap: .5rem; flex-shrink: 0; }

.issue-prog-wrap {
  margin-top: .6rem;
  height: 4px;
  background: rgba(237,228,206,.1);
  border-radius: 2px;
  overflow: hidden;
  max-width: 240px;
}
.issue-prog-bar {
  height: 100%;
  background: var(--olive);
  border-radius: 2px;
  transition: width .4s ease-out;
}
.issue-prog-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--cream-dim);
  margin-top: .3rem;
}

/* ══════════════════════════════════════ TIMELINE (Sprig treatment, keep) ════ */

.timeline {
  position: relative;
  padding-left: 2rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: .45rem;
  top: .4rem;
  bottom: 1.5rem;
  width: 1px;
  background: rgba(237,228,206,.15);
}

/* Task card — paper slip on dark panel */
.tl-task {
  position: relative;
  margin-bottom: 1rem;
  padding: .75rem .9rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: box-shadow .15s;
}
.tl-task:hover { box-shadow: 0 3px 14px rgba(0,0,0,.4); }
.tl-task:hover .tl-actions { opacity: 1; }

.tl-task::before {
  content: '';
  position: absolute;
  left: -1.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: rgba(237,228,206,.25);
  border: 1px solid rgba(237,228,206,.3);
}
.tl-task.done::before    { background: var(--olive);  border-color: var(--olive); }
.tl-task.overdue::before { background: var(--maroon); border-color: var(--maroon); }

.tl-task.done { opacity: .65; }
.tl-task.done .tl-title { text-decoration: line-through; color: var(--cream-dim); }

.tl-task-header { display: flex; align-items: flex-start; gap: .65rem; }
.tl-checkbox { margin-top: .2rem; flex-shrink: 0; width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--olive); }
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-family: var(--font); font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin-top: .2rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em; color: var(--cream-dim);
}
.tl-overdue-tag { color: var(--maroon); }

.tl-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  font-size: .6rem; font-weight: bold; color: var(--paper); flex-shrink: 0;
}
.tl-assignee { display: inline-flex; align-items: center; gap: .3rem; }

.tl-actions { display: flex; gap: 0; opacity: 0; flex-shrink: 0; transition: opacity .15s; }
.tl-actions .btn-icon { color: rgba(31,20,8,.4); }
.tl-actions .btn-icon:hover { color: var(--ink); }

/* Add-task inline form */
.tl-add-row {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-top: .25rem;
  padding: .65rem .9rem;
  border: 1px dashed rgba(237,228,206,.15);
  border-radius: 3px;
  background: rgba(237,228,206,.03);
}
.tl-add-row input {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .03em;
  background: rgba(237,228,206,.06);
  border: 1px solid rgba(237,228,206,.14);
  border-radius: 2px; padding: .4rem .65rem;
  color: var(--cream-soft);
}
.tl-add-row input::placeholder { color: var(--cream-dim); }
.tl-add-row input:focus { border-color: var(--olive); }
#new-task-title    { flex: 2; min-width: 140px; }
#new-task-date     { width: 145px; }
#new-task-assignee { flex: 1; min-width: 110px; }

/* ══════════════════════════════════════════════════ EDITING ROOM (BOARD) ════ */

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}

.board-col {
  background: var(--surface-1);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: .85rem .75rem;
  min-height: 120px;
}
.board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .25rem .65rem;
  margin-bottom: .65rem;
  border-bottom: 1px solid var(--border-dark);
}
.board-col-title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.board-col-count {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--cream-dim);
  background: rgba(237,228,206,.07);
  border-radius: 10px;
  padding: .1rem .45rem;
}
/* status accent dots on column titles */
.board-col[data-status="todo"]        .board-col-title::before { background: var(--cream-dim); }
.board-col[data-status="editing"]     .board-col-title::before { background: var(--mustard); }
.board-col[data-status="with_author"] .board-col-title::before { background: var(--maroon); }
.board-col[data-status="done"]        .board-col-title::before { background: var(--olive); }
.board-col-title::before {
  content: '';
  display: inline-block;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  margin-right: .4rem;
  vertical-align: middle;
  position: relative; top: -1px;
}

.board-col-body { display: flex; flex-direction: column; gap: .6rem; }
.board-empty {
  font-family: var(--font);
  font-size: .78rem;
  color: var(--cream-dim);
  text-align: center;
  padding: 1rem .5rem;
  opacity: .6;
}

/* Draft card */
.draft-card {
  background: var(--surface-2);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: .7rem .8rem;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.draft-card:hover { border-color: var(--border-dark-hover); }
.draft-card:active { transform: scale(.99); }
.draft-card-title {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: .3rem;
  line-height: 1.3;
}
.draft-card-sub {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--cream-dim);
  margin-bottom: .5rem;
}
.draft-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.draft-card-editor { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .64rem; color: var(--cream-soft); }
.draft-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font-size: .6rem; font-weight: bold; color: var(--paper); flex-shrink: 0;
}
.draft-vbadge {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .05em;
  color: var(--mustard);
  border: 1px solid rgba(212,178,72,.3);
  border-radius: 2px;
  padding: 0 .3rem;
}

/* Draft modal internals */
.draft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
.draft-content {
  min-height: 240px;
  font-family: var(--font-mono) !important;
  font-size: .82rem !important;
  line-height: 1.6 !important;
}
.version-tag {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .05em;
  color: var(--mustard);
  text-transform: none;
  margin-left: .4rem;
}

/* btn-secondary (used here and in issue detail) */
.btn-secondary {
  background: rgba(237,228,206,.06);
  color: var(--cream-soft);
  border: 1px solid var(--border-dark-hover);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  padding: .45rem .8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-secondary:hover { background: rgba(237,228,206,.12); border-color: var(--olive); }

/* ══════════════════════════════════════════════════════════ AUTH GATE ═══════ */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity .3s;
}
.auth-gate.hidden {
  opacity: 0;
  pointer-events: none;
}

.auth-slip {
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  width: 100%;
  max-width: 380px;
  padding: 0 2.25rem 2.25rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  text-align: center;
}

.auth-tape {
  height: 28px;
  position: relative;
  margin: 0 -2.25rem 2rem;
}
.auth-tape::before,
.auth-tape::after {
  content: '';
  position: absolute;
  top: 5px;
  height: 18px;
  width: 40px;
  border-radius: 1px;
}
.auth-tape::before { left: 22px;  background: var(--tape-l); transform: rotate(-5deg); mix-blend-mode: multiply; }
.auth-tape::after  { right: 22px; background: var(--tape-r); transform: rotate(4deg);  mix-blend-mode: multiply; }

.auth-logo {
  display: block;
  height: 100px;
  margin: 0 auto 1.25rem;
}
.auth-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: .35rem;
}
.auth-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: .9rem;
  color: var(--cream-dim);
  margin-bottom: 1.75rem;
}

.auth-field { margin-bottom: .75rem; }
.auth-field input[type="password"] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: .9rem;
  letter-spacing: .1em;
  background: rgba(31,20,8,.05);
  border: 1px solid rgba(31,20,8,.2);
  border-radius: 2px;
  padding: .6rem .85rem;
  color: var(--ink);
  outline: none;
  text-align: center;
  transition: border-color .15s;
}
.auth-field input[type="password"]:focus { border-color: var(--olive); }
.auth-field input[type="password"].shake {
  animation: shake .35s ease;
  border-color: var(--maroon);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.auth-error {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--maroon);
  margin-bottom: .75rem;
}

.auth-btn {
  width: 100%;
  padding: .65rem 1rem;
  background: var(--olive);
  color: var(--paper);
  border: none;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.auth-btn:hover    { background: var(--olive-soft); }
.auth-btn:disabled { background: var(--cream-dim); cursor: not-allowed; }

.auth-hint {
  margin-top: 1.5rem;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: .82rem;
  color: var(--cream-dim);
}
.auth-hint a {
  color: var(--olive-deep);
  text-decoration: none;
}
.auth-hint a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════ RESPONSIVE ══════════ */
@media (max-width: 900px) {
  .issues-layout { grid-template-columns: 1fr; }
  .issue-detail { min-height: unset; }
  .board { grid-template-columns: repeat(2, 1fr); }
  .draft-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .board { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  main { padding: 1.25rem 1rem 2rem; }
  header, nav.tabs { padding-left: 1rem; padding-right: 1rem; }
  .stats { gap: .75rem; }
  td, th { padding: .5rem .65rem; }
  #search { width: 140px; }
}

/* ══════════════════════════════════════════════════════ SETTINGS PANEL ═════ */

.settings-wrap { position: relative; }

.settings-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 210px;
  background: var(--surface-2);
  border: 1px solid var(--border-dark-hover);
  border-radius: 4px;
  padding: .9rem 1rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  z-index: 600;
}

.settings-title {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: .8rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--cream-soft);
}

.theme-toggle {
  display: flex;
  border: 1px solid var(--border-dark-hover);
  border-radius: 3px;
  overflow: hidden;
}

.theme-opt {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: .28rem .65rem;
  cursor: pointer;
  color: var(--cream-dim);
  transition: background .15s, color .15s;
  border-radius: 0;
  line-height: 1;
}
.theme-opt.active {
  background: var(--olive);
  color: #fff;
}
.theme-opt:not(.active):hover {
  background: rgba(237,228,206,.08);
  color: var(--cream-soft);
}

/* ══════════════════════════════════════════════════════ LIGHT MODE ══════════ */

html.light-mode,
html.light-mode body {
  --bg:               #f0e7cf;
  --cream:            #1f1408;
  --cream-soft:       #3d2b16;
  --cream-dim:        #7a6845;
  --surface-1:        #f7f1e1;
  --surface-2:        #fdf9ef;
  --border-dark:      rgba(31,20,8,.09);
  --border-dark-hover: rgba(31,20,8,.20);
}

html.light-mode nav.tabs { background: #e0d7bc; }

html.light-mode input[type="text"],
html.light-mode input[type="search"],
html.light-mode input[type="date"],
html.light-mode select,
html.light-mode textarea {
  background: rgba(31,20,8,.05);
  border-color: rgba(31,20,8,.14);
  color: var(--cream);
}
html.light-mode input::placeholder,
html.light-mode textarea::placeholder { color: var(--cream-dim); }

html.light-mode .btn-ghost {
  color: var(--cream-soft);
  border-color: rgba(31,20,8,.18);
}
html.light-mode .btn-ghost:hover { background: rgba(31,20,8,.06); }

html.light-mode .btn-secondary {
  background: rgba(31,20,8,.05);
  color: var(--cream-soft);
  border-color: rgba(31,20,8,.14);
}
html.light-mode .btn-secondary:hover { background: rgba(31,20,8,.1); }

html.light-mode .table-wrap {
  box-shadow: 0 4px 20px rgba(31,20,8,.1), 0 1px 4px rgba(31,20,8,.07);
}

html.light-mode .timeline::before { background: rgba(31,20,8,.12); }
html.light-mode .tl-task::before  { background: rgba(31,20,8,.12); border-color: rgba(31,20,8,.15); }
html.light-mode .tl-task.done::before    { background: var(--olive);  border-color: var(--olive); }
html.light-mode .tl-task.overdue::before { background: var(--maroon); border-color: var(--maroon); }
html.light-mode .tl-task {
  box-shadow: 0 2px 8px rgba(31,20,8,.12);
}
html.light-mode .tl-task:hover { box-shadow: 0 3px 14px rgba(31,20,8,.18); }

html.light-mode .tl-add-row {
  border-color: rgba(31,20,8,.12);
  background: rgba(31,20,8,.03);
}
html.light-mode .tl-add-row input {
  background: rgba(31,20,8,.05);
  border-color: rgba(31,20,8,.12);
  color: var(--cream);
}

html.light-mode .issue-card-prog-wrap,
html.light-mode .issue-prog-wrap { background: rgba(31,20,8,.1); }

html.light-mode .board-col-head  { border-bottom-color: rgba(31,20,8,.09); }
html.light-mode .board-col-count { background: rgba(31,20,8,.06); }

html.light-mode .theme-toggle { border-color: rgba(31,20,8,.18); }
html.light-mode .theme-opt:not(.active):hover { background: rgba(31,20,8,.08); }

html.light-mode .settings-panel {
  box-shadow: 0 8px 28px rgba(31,20,8,.15);
}

html.light-mode .toast {
  background: #1f1408;
  color: #ede4ce;
}

html.light-mode .auth-gate { background: var(--bg); }
html.light-mode .auth-slip {
  box-shadow: 0 8px 40px rgba(31,20,8,.18), 0 2px 8px rgba(31,20,8,.1);
}