/* Layout: one working screen. Business tabs on top, stage columns scroll sideways, every card opens an editor. */
:root {
  --bg: #0F1A2E; --column: #1A2540; --surface: #26324F; --fg: #E8ECF4; --muted: rgba(232,236,244,.72); --line: rgba(232,236,244,.22);
  --danger: #ff9c94; --on-accent: #0F1A2E; --accent: var(--accent-d, #379E0F); color-scheme: dark;
  --display: "Poppins", "Trebuchet MS", sans-serif; --body: "Inter", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box }
html { height: 100% }
body { height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.4 var(--body); display: flex; flex-direction: column; overflow: hidden }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

.notice { background: var(--fg); color: var(--bg); font-size: 13px; padding-block: 6px }
header { padding-block: 12px 8px; display: flex; flex-direction: column; gap: 10px }
.tabs { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none }
.tab { flex: none; border: 0; background: none; padding: 5px 10px; font: 700 21px/1.2 var(--display); color: var(--muted); cursor: pointer; border-radius: 6px }
.tab:hover { color: var(--fg) }
.tab[aria-selected="true"] { color: var(--on-accent); background: var(--accent) }
.tab-add { flex: none; font-weight: 600; font-size: 14px; background: none; border: 1px dashed var(--muted); color: var(--fg); border-radius: 6px; padding: 6px 10px; cursor: pointer; white-space: nowrap }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.tools input[type=search] { flex: 1 1 180px; min-width: 0; max-width: 340px }
input, select, textarea { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px }
.tools select { width: auto }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 7px 12px; font-weight: 600; cursor: pointer; white-space: nowrap }
.btn:hover { border-color: var(--muted) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.btn.danger { color: var(--danger) }
.push { margin-left: auto }

#board { flex: 1; min-height: 0; display: flex; gap: 10px; overflow-x: auto; padding-block: 4px 16px; align-items: stretch }
.col { flex: 0 0 272px; display: flex; flex-direction: column; min-height: 0; background: var(--column); border-radius: 8px }
.col-head { padding: 10px 12px 6px }
.col-head h2 { margin: 0; font: 600 16px/1.25 var(--display); display: flex; justify-content: space-between; gap: 8px }
.count { font: 600 13px var(--body); color: var(--muted); font-variant-numeric: tabular-nums }
.total { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 18px }
.cards { flex: 1; min-height: 70px; overflow-y: auto; padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 7px }
.card { flex: none; background: var(--surface); border-radius: 6px; padding: 9px 10px; cursor: grab; box-shadow: 0 1px 2px rgb(10 20 35 / .16); display: flex; flex-direction: column; gap: 3px; touch-action: manipulation }
.card:hover { box-shadow: 0 2px 7px rgb(10 20 35 / .24) }
.card-top { display: flex; justify-content: space-between; align-items: start; gap: 8px }
.card b { font-weight: 600; overflow-wrap: anywhere }
.company, .next { font-size: 13px; color: var(--muted); overflow-wrap: anywhere }
.next { color: var(--fg) }
.card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 3px }
.updated { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums }
.due { color: var(--muted) } .due.late { color: var(--danger); font-weight: 600 }
.chip { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--fg) }
.chip.account { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.empty { font-size: 13px; color: var(--muted); text-align: center; padding: 18px 8px; border: 1px dashed var(--line); border-radius: 6px }
.cards:has(.card) .empty { display: none }
.ghost { opacity: .35 }
.add-card { border: 0; background: none; text-align: left; padding: 8px 12px 10px; color: var(--muted); font-weight: 600; cursor: pointer; border-radius: 0 0 8px 8px }
.add-card:hover { color: var(--fg) }

dialog { border: 0; border-radius: 10px; background: var(--surface); color: var(--fg); padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 16px 50px rgb(5 12 22 / .4) }
dialog::backdrop { background: rgb(8 14 24 / .5) }
form.sheet, .sheet { padding: 18px; display: grid; gap: 12px }
.sheet h3 { margin: 0; font: 700 21px/1.2 var(--display) }
.sheet h4 { margin: 8px 0 0; font: 600 15px var(--display) }
label { display: grid; gap: 3px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0 }
label > * { font-size: 15px; font-weight: 400; color: var(--fg) }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end }
.actions .left { margin-right: auto }
.colrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 5px; align-items: center }
.icon { padding: 7px 10px; min-width: 38px }
.icon:disabled { opacity: .35; cursor: default }
.hint { margin: 0; font-size: 13px; color: var(--muted) }
.swatches { display: flex; gap: 8px; flex-wrap: wrap }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); outline: 2px solid transparent; cursor: pointer; padding: 0 }
.swatch[aria-pressed="true"] { outline-color: var(--fg) }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 6px; font-size: 14px; max-width: calc(100vw - 32px); z-index: 5 }
@media (max-width: 500px) { .col { flex-basis: 82vw } #board { scroll-snap-type: x proximity } .col { scroll-snap-align: center } .tab { font-size: 18px } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

.login{height:100%;display:grid;place-items:center;padding-inline:16px}.login form{width:min(360px,100%);display:grid;gap:12px}.login h1{margin:0;font:700 26px/1.2 var(--display)}.err{color:var(--danger);font-size:14px;margin:0;min-height:20px}

.people{display:grid;gap:8px}.people h4{margin:0}.people-list{display:grid;gap:10px}.person-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;padding:10px;border:1px solid var(--line);border-radius:6px}.person-row .btn{justify-self:start}.others{font-size:13px;color:var(--muted);overflow-wrap:anywhere}

[hidden]{display:none!important}body{margin:0}img{max-width:100%}