@font-face {
  font-family: 'Fraunces';
  src: url(../fonts/Fraunces.woff2) format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url(../fonts/Fraunces-Italic.woff2) format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}

* { box-sizing: border-box; margin: 0 }
:root {
  --bg: #0b0b14; --ink: #ece9e4; --dim: #8a8ab0;
  --cyan: #63e6d3; --purple: #b39dfb; --amber: #e6b17e; --green: #7fd88f;
  --hair: #26263a; --field: #0e0e19; --pop: #10101c; --hover: #12121f;
  --col-bg: #10101b; --card-bg: #161624; --card-bd: #26263a;
  --f-display: 'Fraunces', Georgia, serif;
  --f-data: ui-monospace, 'SF Mono', Menlo, monospace;
}
:root[data-font="brain"] {
  --f-display: 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --f-data: 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f2f0ea; --ink: #23232e; --dim: #70708c;
  --cyan: #0d8a78; --purple: #6d4fd0; --amber: #b0741e; --green: #2e8c44;
  --hair: #d9d6cc; --field: #ffffff; --pop: #ffffff; --hover: #e9e6dd;
  --col-bg: #eceae2; --card-bg: #ffffff; --card-bd: #dcd9cf;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: #f2f0ea; --ink: #23232e; --dim: #70708c;
    --cyan: #0d8a78; --purple: #6d4fd0; --amber: #b0741e; --green: #2e8c44;
    --hair: #d9d6cc; --field: #ffffff; --pop: #ffffff; --hover: #e9e6dd;
    --col-bg: #eceae2; --card-bg: #ffffff; --card-bd: #dcd9cf;
  }
}
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--f-data);
  min-height: 100vh;
}
header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 22px 10px; border-bottom: 1px solid var(--hair);
}
h1 { font: 600 19px/1.2 var(--f-display); letter-spacing: .01em }
.dim { color: var(--dim) }
.mono { font-family: inherit }
.head-right { display: flex; gap: 16px; align-items: baseline }
a { color: var(--dim); text-decoration: none }
a:hover { color: var(--ink) }

main {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; padding: 18px;
  max-width: 1240px; margin: 0 auto;
  align-items: start;
}
.col {
  background: var(--col-bg); border: 1px solid var(--hair);
  border-radius: 10px; padding: 12px; min-height: 40vh;
}
.col h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--dim); margin: 2px 4px 12px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: baseline;
}
.col h2 .n {
  font-size: 10.5px; border: 1px solid var(--hair); border-radius: 10px;
  padding: 0 7px; letter-spacing: 0;
}
.col[data-col=doing] h2 { color: var(--cyan) }

.card {
  padding: 8px 11px; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--card-bd);
  border-radius: 7px; margin-bottom: 8px;
  font-family: var(--f-display); font-size: 14.5px; line-height: 1.4;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.card:hover { border-color: var(--cyan); box-shadow: 0 3px 10px #00000030; transform: translateY(-1px) }
.card .badges { color: var(--dim); font: 11px var(--f-data); margin-left: 7px; white-space: nowrap }
.card.dragging { opacity: .4 }
.col.dragover { background: var(--hover); border-color: var(--dim) }
.col[data-col=done] .card { color: var(--dim); background: transparent }
.col[data-col=done] .card:hover { color: var(--ink) }

button, select, input, textarea {
  font: inherit; color: var(--ink); background: transparent;
  border: 1px solid var(--hair); border-radius: 3px; padding: 6px 12px;
}
button { cursor: pointer }
button:hover { border-color: var(--dim) }
button.ghost { color: var(--dim) }
button.danger:hover { color: var(--amber); border-color: var(--amber) }
textarea { width: 100%; resize: vertical; background: var(--field) }

dialog {
  background: var(--pop); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 4px;
  width: min(640px, 92vw); padding: 20px;
}
dialog::backdrop { background: #000a }
.card-detail { display: flex; flex-direction: column; gap: 12px }
.title-input { font: 550 19px/1.3 var(--f-display); border: none; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 4px 0; width: 100% }
.meta-row { display: flex; gap: 10px; align-items: center }
.meta-row select { margin-left: auto }
#m-desc { min-height: 90px }
.files { display: flex; flex-wrap: wrap; gap: 8px }
.files a { border: 1px solid var(--hair); padding: 3px 9px; border-radius: 3px; font-size: 13px }
.files img { max-width: 140px; max-height: 100px; display: block; border-radius: 3px }
.upload { align-self: flex-start; font-size: 13px; border: 1px solid var(--hair); padding: 4px 10px; border-radius: 3px; cursor: pointer; color: var(--dim) }
.comments { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto }
.comment { border-top: 1px solid var(--hair); padding-top: 8px }
.comment .who { font-size: 12px; color: var(--dim); margin-bottom: 2px }
.comment .who.claude { color: var(--purple) }
.comment .who.gorbiz { color: var(--green) }
.comment-row { display: flex; gap: 8px; align-items: flex-start }
.comment-row textarea { flex: 1 }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end }

.add-card {
  color: var(--dim); padding: 7px 11px; cursor: pointer; font-size: 13px;
  border: 1px dashed var(--hair); border-radius: 7px; text-align: center;
}
.add-card:hover { color: var(--cyan); border-color: var(--cyan) }
body:not(.editor) .add-card, body:not(.editor) #m-archive,
body:not(.editor) .upload, body:not(.editor) #m-save,
body:not(.editor) .comment-row { display: none }

@media (max-width: 760px) {
  main { grid-template-columns: 1fr }
  .col + .col { border-left: none; border-top: 1px solid var(--hair) }
  .col { min-height: auto }
}