:root {
  color-scheme: light;
  --ink: #17211b;
  --muted: #657169;
  --paper: #f5f2e9;
  --card: #fffdf6;
  --line: #d5d1c5;
  --accent: #ba4d2f;
  --accent-dark: #8f341e;
  --complete: #3f6b4d;
  --complete-dark: #2f523a;
  --column: #e9e5da;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, textarea { font: inherit; }
button { border: 0; border-radius: .45rem; background: var(--accent); color: white; padding: .65rem 1rem; cursor: pointer; font-weight: 700; }
button:hover { background: var(--accent-dark); }
button.quiet { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button:disabled { cursor: wait; opacity: .55; }
[hidden] { display: none !important; }
.centered { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.login-panel { width: min(28rem, 100%); display: grid; gap: .8rem; background: var(--card); padding: 2rem; border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 1rem 3rem #17211b14; }
.login-panel h1, .app-header h1 { margin: 0; font-family: ui-serif, Georgia, serif; font-size: 2.25rem; }
input, textarea { width: 100%; border: 1px solid var(--line); background: white; color: var(--ink); border-radius: .45rem; padding: .75rem; }
input:focus, textarea:focus, button:focus-visible { outline: 3px solid #ba4d2f55; outline-offset: 2px; }
.eyebrow { color: var(--accent); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 800; margin: 0 0 .25rem; }
.error { color: #9a2317; min-height: 1.2em; }
#app-view { min-height: 100dvh; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.app-header { display: flex; align-items: center; justify-content: space-between; max-width: 110rem; margin: 0 auto 1rem; }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: .65rem; }
.icon-button svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.capture { max-width: 52rem; margin: 0 auto 1rem; display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; transition: max-width 180ms ease; }
.capture:focus-within { max-width: 72rem; }
.capture label { grid-column: 1 / -1; font-weight: 800; }
.capture textarea { resize: vertical; min-height: 3.7rem; transition: min-height 180ms ease; }
.capture:focus-within textarea { min-height: 8.5rem; }
.capture-tools { grid-column: 1 / -1; display: grid; gap: .55rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 180ms ease, opacity 140ms ease; }
.capture:focus-within .capture-tools { max-height: 18rem; opacity: 1; padding-top: .2rem; }
.capture-token-group { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .55rem; align-items: start; }
.capture-token-group > span { color: var(--muted); font-size: .72rem; font-weight: 800; padding-top: .38rem; text-transform: uppercase; letter-spacing: .06em; }
.token-options { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.9rem; }
.token-button { padding: .32rem .6rem; border-radius: 2rem; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.token-button:hover { background: white; color: var(--accent); border-color: var(--accent); }
.token-button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: white; }
.token-empty { color: var(--muted); font-size: .78rem; padding-top: .35rem; }
.status { text-align: center; color: var(--muted); min-height: 1.3em; margin: 0 0 .5rem; }
.tag-filters { display: flex; gap: .4rem; overflow-x: auto; max-width: 110rem; margin: 0 auto .75rem; padding-bottom: .25rem; }
.tag-filters button { flex: 0 0 auto; padding: .38rem .7rem; border-radius: 2rem; background: transparent; border: 1px solid var(--line); color: var(--muted); }
.tag-filters button[aria-pressed="true"] { color: white; background: var(--ink); border-color: var(--ink); }
.board { max-width: 110rem; margin: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: .75rem; }
.column { height: calc(100dvh - 15rem); min-height: 24rem; display: flex; flex-direction: column; background: var(--column); border-radius: .65rem; scroll-snap-align: start; border: 1px solid var(--line); }
.column > header { padding: .85rem .85rem .55rem; }
.column h2 { margin: 0; font: 700 1.05rem ui-serif, Georgia, serif; }
.column-description { margin: .3rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.25; }
.card-list { min-height: 4rem; overflow-y: auto; padding: .3rem .55rem .7rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-list.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: .55rem; padding: .7rem; box-shadow: 0 .12rem .3rem #17211b0d; }
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: .35; }
.card-title { margin: 0; color: var(--ink); text-align: left; font-size: .95rem; font-weight: 750; width: 100%; line-height: 1.25; }
.tags { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .45rem; color: var(--muted); font-size: .72rem; }
.tasks { list-style: none; margin: .55rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .35rem; }
.task { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .45rem; align-items: center; font-size: .82rem; line-height: 1.35; color: #3d4841; }
.task input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.task-text { min-width: 0; padding: 0; border-radius: .2rem; }
.task-text:focus { outline: 2px solid #ba4d2f55; }
.card-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.card-action { padding: .34rem .58rem; font-size: .74rem; }
.complete-button { background: var(--complete); }
.complete-button:hover { background: var(--complete-dark); }
.conflicts { max-width: 110rem; margin: 0 auto 1rem; padding: .8rem; border: 1px solid #d58b49; background: #fff2d9; border-radius: .5rem; }
.conflicts h2 { margin: 0 0 .5rem; font-size: 1rem; }
.conflict { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .4rem; }
.conflict strong { margin-right: auto; }
.conflict button { padding: .35rem .6rem; font-size: .78rem; }
dialog { width: min(54rem, calc(100% - 1rem)); height: min(42rem, calc(100dvh - 1rem)); border: 1px solid var(--line); border-radius: .7rem; padding: 0; background: var(--card); color: var(--ink); }
dialog::backdrop { background: #17211b80; }
.editor-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 1rem; gap: .75rem; }
.editor-shell header, .editor-shell footer { display: flex; align-items: center; gap: .75rem; justify-content: space-between; }
.editor-shell h2 { margin: 0; }
.editor-tools { display: flex; flex-wrap: wrap; gap: .4rem; }
.editor-tools button { padding: .35rem .62rem; font-size: .78rem; }
.editor-actions { display: flex; gap: .5rem; }
#editor-body { resize: none; font: .92rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.config-note { margin: 0; color: var(--muted); font-size: .8rem; }
#config-body { min-height: 0; resize: none; font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 640px) {
  #app-view { padding-left: .65rem; padding-right: .65rem; }
  .capture { grid-template-columns: 1fr; }
  .capture label { grid-column: auto; }
  .capture-tools { grid-column: auto; }
  .capture-token-group { grid-template-columns: 1fr; gap: .2rem; }
  .capture:focus-within .capture-tools { max-height: 25rem; }
  .board { grid-auto-columns: calc(100vw - 1.3rem); }
  .column { height: calc(100dvh - 18rem); }
  .app-header h1 { font-size: 1.8rem; }
  .editor-shell { padding: .8rem; }
  .editor-shell footer { align-items: flex-end; }
  .editor-actions { margin-left: auto; }
}