:root {
  --ground: #E9ECF1;
  --column: #DEE2E9;
  --surface: #FFFFFF;
  --ink: #161B26;
  --ink-2: #4A5366;
  --line: #CDD3DD;
  --accent: #3A3FD6;
  --accent-ink: #FFFFFF;
  --accent-wash: rgba(58, 63, 214, 0.08);
  --danger: #B3261E;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --top: 52px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 400 14px/1.45 var(--font);
  caret-color: var(--accent);
  -webkit-font-smoothing: antialiased;
  scrollbar-color: #B4BBC9 transparent;
}
::selection { background: rgba(58, 63, 214, 0.2); }
body.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- top bar ---------- */
#top {
  flex: none;
  height: var(--top);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 3;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.brand .icon { color: var(--accent); fill: var(--accent); width: 18px; height: 18px; }
.spacer { flex: 1; }
.filters { display: flex; align-items: center; gap: 8px; }
.filters select { height: 32px; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); }
.icon-btn:hover { background: var(--ground); color: var(--ink); }

select, input[type="text"], input[type="url"], input[type="password"], textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 6px 10px;
  min-height: 32px;
}
select { padding-right: 6px; }
input::placeholder, textarea::placeholder { color: #6B7385; }
input:hover, select:hover, textarea:hover { border-color: #A9B1C0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-weight: 500;
}
.btn:hover { border-color: #A9B1C0; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: #2F33BE; }
.btn.danger { color: var(--danger); }
.btn.quiet { border-color: transparent; background: none; color: var(--ink-2); }
.btn.quiet:hover { background: var(--ground); color: var(--ink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

#banner {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; background: #FFF4CC; border-bottom: 1px solid #E6D58A; color: #4F3F00;
}
#banner .btn { min-height: 28px; background: #FFFDF2; }

/* ---------- board ---------- */
#board {
  flex: 1; min-height: 0;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px; overflow-x: auto; overflow-y: hidden;
}
body.panel-open #board { padding-right: 468px; }

.col {
  flex: 0 0 300px; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--column); border-radius: 12px; padding: 8px;
}
.col-head { display: flex; align-items: center; gap: 4px; padding: 2px 2px 8px 4px; }
.col-name { flex: 1; min-width: 0; border: 1px solid transparent; background: none; font-weight: 600; padding: 4px 6px; border-radius: 6px; }
.col-name:hover { background: rgba(255, 255, 255, 0.5); border-color: transparent; }
.col-name:focus-visible { background: var(--surface); }
.count { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; padding: 0 4px; }
.cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 12px; padding: 1px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; cursor: grab; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.card:hover { border-color: #A9B1C0; }
.card.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card .title { overflow-wrap: anywhere; text-wrap: pretty; }
.card .chips { margin-bottom: 6px; }
.meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--ink-2); font-size: 13px; }
.meta .stat { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.meta .grow { flex: 1; }
.avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; flex: none; }

.card.slot { background: var(--accent-wash); border: 1.5px dashed var(--accent); }
.card.slot > * { visibility: hidden; }
.card.ghost {
  position: fixed; z-index: 20; margin: 0; pointer-events: none; cursor: grabbing;
  transform-origin: 50% 20%;
  box-shadow: 0 14px 28px -8px rgba(22, 27, 38, 0.28), 0 4px 8px rgba(22, 27, 38, 0.1);
  border-color: var(--accent);
}
.card.ghost.landing { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); box-shadow: none; }

.add-card, .add-col {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin-top: 4px; padding: 8px; border: 0; border-radius: 8px;
  background: none; color: var(--ink-2); text-align: left;
}
.add-card:hover, .add-col:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.add-col { flex: 0 0 300px; width: 300px; margin: 0; padding: 12px; background: rgba(255, 255, 255, 0.4); border-radius: 12px; }
.composer { display: grid; gap: 8px; margin-top: 8px; }
.composer textarea { resize: none; min-height: 64px; }
.col-add-form { flex: 0 0 300px; background: var(--column); border-radius: 12px; padding: 8px; display: grid; gap: 8px; }

/* ---------- labels ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 6px; border: 1px solid transparent;
  background: var(--bg); color: var(--fg); font-size: 12px; font-weight: 500; line-height: 20px;
}
.c-red { --bg: #FBE0DE; --fg: #8A1F17; --bd: #E9A9A3; }
.c-orange { --bg: #FDE9D2; --fg: #7F4207; --bd: #EDBF8B; }
.c-yellow { --bg: #F8F0C4; --fg: #5F5000; --bd: #E0D07A; }
.c-green { --bg: #D8F0DC; --fg: #1B6030; --bd: #98D2A3; }
.c-teal { --bg: #D2F0EE; --fg: #0C5A56; --bd: #8CCFCA; }
.c-blue { --bg: #DCE6FB; --fg: #1C4491; --bd: #9DB5E8; }
.c-purple { --bg: #E7DEFA; --fg: #522A9A; --bd: #BEA8EE; }
.c-pink { --bg: #FADCEA; --fg: #8F2459; --bd: #E9A3C4; }
.c-gray { --bg: #E4E7EC; --fg: #3A4252; --bd: #B7BECB; }

/* ---------- panel ---------- */
#panel {
  position: fixed; top: var(--top); right: 0; bottom: 0; z-index: 4;
  width: min(452px, 100vw);
  background: var(--surface); border-left: 1px solid var(--line);
  overflow-y: auto; transform: translateX(100%);
  transition: transform 0.28s var(--ease);
}
#panel.open { transform: none; }
.panel-in { padding: 20px 24px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.panel-in > * { min-width: 0; }
.panel-bar { display: flex; align-items: center; gap: 8px; }
.panel-bar .spacer { flex: 1; }
.title-input { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; border-color: transparent; padding: 4px 8px; margin-left: -8px; width: calc(100% + 16px); max-width: none; }
#panel section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
#panel h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
#panel textarea.notes { width: 100%; min-height: 110px; resize: vertical; line-height: 1.5; }
.pick .wrap { display: inline-flex; align-items: center; }
.pick .chip { cursor: pointer; border-color: var(--bd); background: transparent; }
.pick .chip.on { background: var(--bg); border-color: transparent; font-weight: 600; }
.pick .del { display: none; width: 18px; height: 18px; place-items: center; border: 0; background: none; color: var(--ink-2); border-radius: 4px; padding: 0; margin-left: 2px; }
.pick .wrap:hover .del, .pick .wrap:focus-within .del { display: grid; }
.pick .del:hover { color: var(--danger); background: var(--ground); }
.pick .del .icon { width: 12px; height: 12px; }
.swatches { display: flex; gap: 6px; }
.swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--bd); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.assignee { display: flex; align-items: center; gap: 8px; }
.assignee select { flex: 1; min-width: 0; }

.list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; margin: 0 -8px; border-radius: 8px; }
.list li:hover { background: var(--ground); }
.list a, .list .open-doc { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; text-align: left; }
.list a:hover, .list .open-doc:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.list .icon { color: var(--ink-2); }
.list .rm { display: grid; place-items: center; width: 24px; height: 24px; border: 0; background: none; color: var(--ink-2); border-radius: 6px; padding: 0; opacity: 0; }
.list li:hover .rm, .list .rm:focus-visible { opacity: 1; }
.list .rm:hover { color: var(--danger); }
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1; min-width: 0; }
.empty { color: var(--ink-2); margin: 0; }

.doc-editor { width: 100%; min-height: 56vh; resize: vertical; font: 13px/1.6 var(--mono); tab-size: 2; padding: 12px; }
.doc-head { display: flex; align-items: center; gap: 8px; }
.doc-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; border-color: transparent; }

@media (max-width: 760px) {
  #top { padding: 0 12px; gap: 8px; }
  .filters select { max-width: 104px; }
  .brand-name { display: none; }
  .pbtn { max-width: 130px; }
  #board { padding: 12px; gap: 12px; scroll-snap-type: x proximity; }
  body.panel-open #board { padding-right: 12px; }
  .col, .add-col, .col-add-form { flex-basis: min(86vw, 320px); width: auto; scroll-snap-align: start; }
  #panel { width: 100vw; border-left: 0; }
  .list .rm, .pick .del { opacity: 1; display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  #panel { transition: none; }
  .card.ghost.landing { transition: none; }
}

/* ---------- projects ---------- */
.pmenu-wrap { position: relative; }
.pbtn { display: flex; align-items: center; gap: 6px; max-width: 240px; min-height: 32px; padding: 0 8px 0 10px; border: 0; border-radius: 8px; background: none; font-weight: 500; }
.pbtn:hover, .pbtn[aria-expanded="true"] { background: var(--ground); }
.pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pmenu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; width: 300px; max-width: calc(100vw - 24px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; background: var(--surface); border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(22, 27, 38, 0.25), 0 2px 6px rgba(22, 27, 38, 0.08);
}
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; }
.pitem { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; text-align: left; }
.pitem:hover { background: var(--ground); }
.pitem.on { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.pitem .pname { flex: 1; }
.pcount { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 400; }
.pfoot { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); margin: 0 -2px; }
.pfoot .btn { padding: 0 10px; }

/* ---------- sync + passcode gate ---------- */
.sync { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; }
.sync[data-state="syncing"]::before { background: #D9A400; }
.sync[data-state="offline"] { color: var(--danger); }
.sync[data-state="offline"]::before { background: var(--danger); }
#gate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: var(--ground); }
.sheet { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.sheet h1 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.sheet p { margin: 0 0 20px; color: var(--ink-2); max-width: 62ch; }
.sheet .error { color: var(--danger); margin: -8px 0 16px; }
.sheet .field { margin-bottom: 16px; }
.sheet .field input { width: 100%; }
.sheet .btn { width: 100%; }
@media (max-width: 760px) { .sync { font-size: 0; gap: 0; } .sync::before { width: 10px; height: 10px; } }