/* 2026-11-14 | owner: maverick | why: tkt158 prototype styles (dense, borders only, light mode, motion from the master plan) | impact: none found (standalone folder). Real build: these values become the Primer variable overrides in dataloop-tokens.css. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.45 var(--font);
  color: var(--fg);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--fg-3); }
.small { font-size: 12px; }
.sp { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: 8px; z-index: 200; padding: 8px 12px; background: var(--accent); color: var(--accent-ink); border-radius: 6px; transform: translateY(-200%); }
.skip:focus { transform: none; }
kbd { font: 12px var(--mono); padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }
.ico { display: inline-flex; flex: none; }
.ico svg { display: block; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; }
.rail { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-right: 1px solid var(--line); background: var(--canvas); overflow-y: auto; }
.content { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.topbar { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.main { flex: 1; overflow: auto; padding: 16px 24px 24px; transition: opacity 110ms var(--ease-acc); }
.main:focus { outline: none; }
.main.board-mode { overflow: hidden; display: flex; flex-direction: column; }
.main.leaving { opacity: 0; }
.main.entering { animation: fade-in 130ms var(--ease-dec); }

/* ---------- rail ---------- */
.brand { display: flex; align-items: center; gap: 8px; height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.brand { flex-direction: column; align-items: flex-start; gap: 0; height: auto; }
/* 2026-11-14 | owner: maverick | why: owner chose the name LoopYard; the rail shows its own mark (assets/loopyard-mark*.svg) and "by DataLoop Labs". Two svg files because an image cannot read the theme. | impact: rail header only; Self-check logo check (js/guide.js) */
.brand { flex-direction: row; align-items: center; gap: 10px; height: auto; padding: 4px 0 0; }
.brand-mark { flex: none; width: 44px; height: 37px; background: url(../assets/loopyard-mark.svg) center / contain no-repeat; }
:root[data-theme="dark"] .brand-mark { background-image: url(../assets/loopyard-mark-dark.svg); }
.brand-text { display: grid; line-height: 1.15; }
.brand-word { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.brand-by { font-size: 11px; color: var(--fg-3); }
.rail-field { display: grid; gap: 4px; }
.lbl { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.nav { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 6px; color: var(--fg-2); text-decoration: none; transition: background-color 120ms var(--ease-std), color 120ms var(--ease-std); }
a.nav-item:hover { background: var(--inset); color: var(--fg); }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.nav-sep { margin: 12px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.nav-item.soon { color: var(--fg-3); cursor: default; }
.nav-item .dot { width: 6px; height: 6px; margin: 5px; border-radius: 50%; border: 1px solid var(--fg-3); }
.nav-item .tag { margin-left: auto; font-size: 11px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 9px; }
.rail-foot { margin-top: auto; font-size: 12px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-weight: 500; cursor: pointer; transition: background-color 120ms var(--ease-std), border-color 120ms var(--ease-std), transform 100ms var(--ease-emph); }
.btn:hover { background: var(--inset); }
.btn:active { transform: scale(0.98); }
a.btn { text-decoration: none; color: var(--fg); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn-primary { background: var(--accent); border-color: var(--accent-hover); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--fg-2); cursor: pointer; transition: background-color 120ms var(--ease-std); }
.iconbtn:hover { background: var(--inset); }
.only-small { display: none; }
.bell-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); border: 2px solid var(--surface); }
.input, .select { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--inset); color: var(--fg); font: inherit; transition: border-color 120ms var(--ease-std), background-color 120ms var(--ease-std); }
.input:focus, .select:focus { background: var(--surface); border-color: var(--steel); }
.area { height: auto; padding: 8px 10px; resize: vertical; }
[aria-invalid="true"] { border-color: var(--bad); }
.err { min-height: 0; font-size: 12px; color: var(--bad); }
.search { position: relative; display: flex; align-items: center; width: min(420px, 40vw); }
.search .ico { position: absolute; left: 10px; color: var(--fg-3); pointer-events: none; }
.search-in { padding-left: 32px; }

.avatar { background: hsl(var(--h, 0) var(--av-s) var(--av-bg-l)); color: hsl(var(--h, 0) 35% var(--av-fg-l)); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700; }
.avatar.big { width: 30px; height: 30px; font-size: 12px; }
.avatar.none { border: 1px dashed var(--fg-3); color: var(--fg-3); background: transparent; }

/* ---------- page ---------- */
.page-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.page-head h1 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.count { color: var(--fg-3); font-size: 13px; }
.hint { margin: 0 0 12px; color: var(--fg-2); font-size: 13px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.toolbar .dd { width: auto; min-width: 160px; }

/* custom select: compact list instead of the large system list */
.dd { position: relative; width: 100%; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--inset); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color 120ms var(--ease-std), background-color 120ms var(--ease-std); }
.dd-btn:hover { background: var(--surface); }
.dd-btn[aria-expanded="true"] { background: var(--surface); border-color: var(--steel); }
.dd-btn .ico { color: var(--fg-3); }
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-list { position: fixed; z-index: 70; max-height: 264px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: 13px; animation: pop-in 160ms var(--ease-dec); }
.dd-list:focus { outline: none; }
.dd-opt { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; }
.dd-opt.active { background: var(--inset); }
.dd-opt[aria-selected="true"] { font-weight: 600; }
.dd-check { display: inline-flex; width: 16px; color: var(--ok); }

/* bulk bar: pinned to the bottom of the screen */
.bulk-root { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.bulk-root .bulkbar { pointer-events: auto; }
.card.sel { background: var(--accent-soft); border-color: var(--accent-hover); }
.card-top .selmark { color: var(--ok); }

/* ---------- table ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; max-height: calc(100vh - 230px); }
.wp-table { width: 100%; border-collapse: collapse; }
.wp-table th { position: sticky; top: 0; z-index: 1; height: 32px; padding: 0 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--fg-2); background: var(--surface); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.th-btn { padding: 0; border: 0; background: none; font-weight: 600; color: inherit; cursor: pointer; }
.th-btn:hover { color: var(--fg); }
.wp-table td { height: 32px; padding: 0 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.wp-table tbody tr { transition: background-color 120ms var(--ease-std); }
.wp-table tbody tr:hover { background: var(--canvas); }
.wp-table tbody tr.selected { background: var(--accent-soft); }
.col-sel { width: 36px; padding-right: 0 !important; }
.col-id { color: var(--fg-2); }
.col-subject .subj { display: flex; align-items: center; gap: 8px; max-width: 520px; }
.col-subject .type { color: var(--fg-3); }
.row-link { max-width: 460px; padding: 0; border: 0; background: none; text-align: left; font-weight: 500; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.row-link:hover { text-decoration: underline; }
.row-link[data-open="true"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.card[data-open="true"] { border-color: var(--accent-hover); box-shadow: inset 3px 0 0 var(--accent); }
.who { display: inline-flex; align-items: center; gap: 8px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.proj { font: 600 11px var(--mono); padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--fg-2); }
.prio { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); }
.p-high, .p-urgent { color: var(--warn); }
.p-urgent { font-weight: 700; color: var(--bad); }
.overdue { color: var(--bad); font-weight: 600; }
.od-tag { font-size: 11px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 6px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); font-size: 12px; }
.s-new { color: var(--fg-2); }
.s-progress { color: var(--info); }
.s-review { color: var(--warn); }
.s-done { color: var(--ok); }

.bulkbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop); animation: rise-in 200ms var(--ease-dec); }
.bulkbar { flex-wrap: wrap; max-width: calc(100vw - 32px); }
.bulkbar .dd { width: 150px; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--on-bad); font-weight: 600; }
.btn-danger:hover { background: var(--bad-hover); }
.popover.menu-list { width: 220px; padding: 4px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--inset); }
.menu-item.danger { color: var(--bad); }

.state { display: grid; justify-items: start; gap: 8px; padding: 32px; color: var(--fg-2); }
.state.error strong { color: var(--bad); }
.sk-wrap { padding: 8px; }
.sk { border-radius: 6px; background: var(--inset); animation: pulse 1.2s ease-in-out infinite; }
.sk-row { height: 32px; margin-bottom: 8px; }
.sk-head { height: 20px; width: 50%; margin: 4px 0 8px; }
.sk-card { height: 78px; margin-bottom: 8px; }

/* ---------- board ---------- */
.board-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 12px; flex: 1; min-height: 0; overflow-x: auto; padding-bottom: 4px; }
.col { display: flex; flex-direction: column; min-height: 0; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-md); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.col-head h2 { margin: 0; font-size: 13px; font-weight: 700; }
.col-count { color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.full-tag { margin-left: auto; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--warn); }
.col.deny { outline: 2px dashed var(--bad); outline-offset: -2px; background: var(--bad-soft); }
.deny-msg { padding: 0 12px 4px; font-size: 12px; font-weight: 600; color: var(--bad); }
.col-body { display: flex; flex-direction: column; flex: 1; gap: 8px; min-height: 60px; padding: 8px; overflow-y: auto; }
.col-empty { padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); text-align: center; color: var(--fg-3); font-size: 12px; }
.card { position: relative; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); cursor: grab; touch-action: pan-y; transition: transform 120ms var(--ease-emph); }
.card::after { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; background: linear-gradient(225deg, var(--inset) 50%, var(--line-strong) 50%); border-top-right-radius: 8px; border-bottom-left-radius: 3px; }
.card:hover { border-color: var(--line-strong); }
.card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--fg-3); padding-right: 12px; }
.card-top .mono { color: var(--fg-2); }
.card-title { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--fg-2); }
.card.placeholder { opacity: 0.4; border-style: dashed; }
.card.picked { outline: 2px solid var(--steel); transform: scale(1.02); box-shadow: var(--shadow-pop); }
.card.latch { animation: latch 180ms var(--ease-spring); }
.card.latch::before { content: ""; position: absolute; inset: -3px; border: 2px solid var(--accent); border-radius: 10px; pointer-events: none; animation: ring 180ms var(--ease-std) forwards; }
.card.shake { animation: shake 200ms var(--ease-std); }
.card.ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0.96; cursor: grabbing; box-shadow: var(--shadow-pop); transition: none; }
.card.ghost::before { display: none; }
body.dragging { user-select: none; cursor: grabbing; }

/* ---------- detail panel ---------- */
.detail { position: fixed; top: 52px; right: 0; bottom: 0; z-index: 30; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); transform: translateX(100%); visibility: hidden; transition: transform 260ms var(--ease-dec), visibility 0s linear 260ms; }
.detail.open { transform: none; visibility: visible; transition: transform 260ms var(--ease-dec), visibility 0s; }
.d-pad { padding: 16px; }
.d-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.d-code { display: flex; align-items: center; gap: 8px; }
.saved { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ok); }
.d-body { flex: 1; padding: 16px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.title-btn { padding: 0; border: 0; background: none; text-align: left; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; cursor: text; }
.title-btn:hover { text-decoration: underline dotted; }
.title-input { height: 36px; font-size: 16px; font-weight: 600; }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-field { display: grid; gap: 4px; align-content: start; }
.d-field label, .d-field .lbl { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.d-h { margin: 4px 0 0; font-size: 13px; }
.activity { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.comment { display: flex; gap: 8px; }
.c-head { display: flex; gap: 8px; font-size: 12px; }
.composer { display: grid; gap: 8px; }
.composer-row { display: flex; align-items: center; justify-content: space-between; }
.internal { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 12px; }

/* ---------- toasts, dialog, popover ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 8px; justify-items: end; }
.toast { display: flex; align-items: center; gap: 8px; max-width: 420px; padding: 8px 8px 8px 12px; border-radius: var(--r-md); background: var(--fg); color: var(--on-fg); box-shadow: var(--shadow-pop); animation: toast-in 200ms var(--ease-dec); }
.toast.error { background: var(--bad); color: var(--on-bad); }
.toast .iconbtn { color: inherit; width: 24px; height: 24px; }
.toast .iconbtn:hover { background: var(--hover-fade); }
.toast.out { animation: toast-out 150ms var(--ease-acc) forwards; }
.backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--scrim); animation: fade-in 150ms var(--ease-dec); }
.backdrop.out { animation: fade-out 150ms var(--ease-acc) forwards; }
.dialog { width: min(520px, calc(100vw - 32px)); padding: 20px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-pop); animation: dialog-in 220ms var(--ease-dec); }
.backdrop.out .dialog { animation: dialog-out 150ms var(--ease-acc) forwards; }
.dlg-title { margin: 0 0 16px; font-size: 16px; }
.form { display: grid; gap: 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.popover { position: fixed; z-index: 60; width: 300px; padding: 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-pop); animation: pop-in 160ms var(--ease-dec); }
.pop-title { margin: 0 0 8px; font-size: 13px; }
.pop-list { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.pop-list li { display: grid; gap: 2px; }
.tool-row { display: flex; align-items: center; gap: 8px; height: 32px; }
.popover .btn { margin-top: 8px; }

/* ---------- Batch 2: shared ---------- */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.seg-group { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.seg { height: 30px; padding: 0 12px; border: 0; background: var(--surface); font-weight: 500; cursor: pointer; }
.seg + .seg { border-left: 1px solid var(--line-strong); }
.seg.on { background: var(--accent-soft); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.g-tools, .toolbar { align-items: center; }
.print-only { display: none; }
.g-grip { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 1; }
.g-grip.l { left: 0; }
.g-grip.r { right: 0; }
.g-bar.dragging, .pl-bar.dragging, .cal-chip.placeholder { opacity: 0.9; }
.g-bar.dragging, .pl-bar.dragging { z-index: 6; box-shadow: var(--shadow-pop); }
.g-tip { position: fixed; z-index: 120; padding: 4px 8px; border-radius: var(--r-sm); background: var(--fg); color: var(--on-fg); font-size: 12px; pointer-events: none; white-space: nowrap; }

/* ---------- Gantt ---------- */
.gantt-page, .cal-page, .pl-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.gantt-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.gantt { --label: 300px; position: relative; width: calc(var(--label) + var(--total)); }
.g-row { display: flex; height: 32px; border-bottom: 1px solid var(--line); }
.g-label { position: sticky; left: 0; z-index: 3; flex: none; display: flex; align-items: center; gap: 8px; width: var(--label); padding: 0 12px; background: var(--surface); border-right: 1px solid var(--line-strong); overflow: hidden; white-space: nowrap; }
.g-label .row-link { min-width: 0; max-width: none; flex: 0 1 auto; }
.g-track { position: relative; flex: none; width: var(--total); background-image: linear-gradient(90deg, transparent 0 calc(5 * var(--d)), var(--tint-2) calc(5 * var(--d)) calc(7 * var(--d))); background-size: calc(7 * var(--d)) 100%; }
.g-track.nobg { background: none; }
.g-head { position: sticky; top: 0; z-index: 5; height: 48px; background: var(--surface); border-bottom: 1px solid var(--line-strong); }
.g-head .g-label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.g-months, .g-days { position: relative; height: 24px; }
.g-mlabel { position: absolute; top: 4px; padding-left: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.g-dlabel { position: absolute; top: 4px; font-size: 11px; color: var(--fg-2); text-align: center; white-space: nowrap; border-left: 1px solid var(--line); padding-left: 4px; }
.g-dlabel.we { color: var(--fg-3); }
.g-dlabel.wk { text-align: left; }
.g-group { height: 30px; background: var(--canvas); }
.g-group .g-label { background: var(--canvas); font-weight: 600; }
.g-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--fg-2); cursor: pointer; }
.g-toggle:hover { background: var(--inset); }
.g-sum { position: absolute; top: 11px; height: 8px; border-radius: 2px; background: var(--steel); opacity: 0.75; }
.g-bar { position: absolute; top: 5px; display: flex; align-items: center; gap: 4px; height: 20px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--inset); overflow: hidden; cursor: grab; touch-action: none; transition: transform 120ms var(--ease-emph); }
.g-bar.st-progress { color: var(--info); border-color: var(--info); }
.g-bar.st-review { color: var(--warn); border-color: var(--warn); }
.g-bar.st-done { color: var(--ok); border-color: var(--ok); }
.g-bar.st-new { color: var(--fg-2); }
.g-fill { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; opacity: 0.2; pointer-events: none; }
.g-st { position: relative; margin-left: 5px; flex: none; }
.g-title { position: relative; padding: 0 8px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--fg); }
.g-bar.picked, .pl-bar.picked, .cal-chip.picked { outline: 2px solid var(--steel); outline-offset: 1px; box-shadow: var(--shadow-pop); }
.g-bar.latch, .pl-bar.latch, .cal-chip.latch { animation: latch 180ms var(--ease-spring); }
.g-bar.shake, .pl-bar.shake, .cal-chip.shake { animation: shake 200ms var(--ease-std); }
.g-base { position: absolute; top: 25px; height: 4px; border-radius: 2px; background: var(--fg-3); opacity: 0.55; }
.g-delta { position: absolute; top: 6px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.g-delta.late { color: var(--bad); background: var(--bad-soft); }
.g-delta.early { color: var(--ok); background: var(--ok-soft); }
.g-today { position: absolute; top: 0; bottom: 0; left: calc(var(--label) + var(--tx)); width: 2px; background: var(--accent-hover); z-index: 2; pointer-events: none; }
.g-today span { position: sticky; top: 54px; display: inline-block; transform: translateX(-50%); padding: 0 6px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; }

/* ---------- Calendar ---------- */
.page-head .iconbtn + h1 { min-width: 190px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(92px, 1fr)); flex: 1; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.cal-dow { padding: 6px 8px; border-bottom: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; color: var(--fg-2); }
.cal-cell { display: flex; flex-direction: column; gap: 3px; min-height: 0; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.we { background: var(--tint-1); }
.cal-cell.other { background: var(--canvas); color: var(--fg-3); }
.cal-cell.drop { outline: 2px solid var(--accent-hover); outline-offset: -2px; background: var(--accent-soft); }
.cal-num { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.cal-cell.today .cal-num span:first-child { padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); }
.cal-today { font-size: 11px; color: var(--fg-3); font-weight: 600; }
.cal-chip { display: flex; align-items: center; flex: none; gap: 4px; height: 22px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); font-size: 12px; white-space: nowrap; overflow: hidden; cursor: grab; transition: transform 120ms var(--ease-emph); }
.cal-chip.st-progress { border-left: 3px solid var(--info); }
.cal-chip.st-review { border-left: 3px solid var(--warn); }
.cal-chip.st-done { border-left: 3px solid var(--ok); color: var(--fg-2); }
.cal-chip.st-new { border-left: 3px solid var(--fg-3); }
.cal-chip .ico { color: var(--fg-2); }
.cal-title { overflow: hidden; text-overflow: ellipsis; }
.cal-chip.ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; box-shadow: var(--shadow-pop); transition: none; }
.cal-more { align-self: flex-start; padding: 0 6px; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--info); cursor: pointer; }
.cal-more:hover { text-decoration: underline; }

/* ---------- Team planner ---------- */
.pl-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.pl { position: relative; width: calc(230px + var(--win)); }
.pl-row { display: flex; border-bottom: 1px solid var(--line); transition: background-color 120ms var(--ease-std); }
.pl-row.drop, .pl-row.kbrow { background: var(--accent-soft); }
.pl-label { position: sticky; left: 0; z-index: 3; flex: none; display: flex; align-items: center; gap: 10px; width: 230px; padding: 8px 12px; background: var(--surface); border-right: 1px solid var(--line-strong); }
.pl-row.drop .pl-label, .pl-row.kbrow .pl-label { background: var(--accent-soft); }
.pl-who { display: grid; min-width: 0; }
.pl-load { font-size: 12px; }
.pl-load.bad { color: var(--bad); font-weight: 600; }
.pl-track { position: relative; flex: none; width: var(--win); }
.pl-track.nobg { background: none; }
.pl-head { position: sticky; top: 0; z-index: 5; height: 44px; background: var(--surface); border-bottom: 1px solid var(--line-strong); }
.pl-head .pl-label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.pl-days { position: relative; height: 44px; }
.pl-dlabel { position: absolute; top: 0; display: grid; align-content: center; justify-items: center; height: 44px; border-left: 1px solid var(--line); font-size: 12px; }
.pl-dlabel .dn { font-weight: 700; }
.pl-dlabel.we { color: var(--fg-3); }
.pl-dlabel.today .dn { padding: 0 6px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); }
.pl-day { position: absolute; top: 0; bottom: 0; width: var(--dw); border-left: 1px solid var(--line); }
.pl-day.we { background: var(--tint-2); }
.pl-day.near { background: var(--accent-soft); }
.pl-day.over { background: var(--bad-soft); }
.pl-day.today { box-shadow: inset 2px 0 0 var(--accent-hover); }
.pl-over { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-weight: 700; color: var(--bad); }
.pl-bar { position: absolute; display: flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); font-size: 12px; white-space: nowrap; overflow: hidden; cursor: grab; touch-action: none; }
.pl-bar.st-progress { border-left: 3px solid var(--info); }
.pl-bar.st-review { border-left: 3px solid var(--warn); }
.pl-bar.st-done { border-left: 3px solid var(--ok); }
.pl-bar.st-new { border-left: 3px solid var(--fg-3); }
.pl-bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.pl-bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }
.pl-bar .g-st { margin-left: 0; }
.pl-bar .mono { color: var(--fg-2); }

/* ---------- Capacity ---------- */
.cap-legend { display: inline-flex; gap: 6px; margin-left: 8px; }
.lg { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.idle, .lg.idle { background: var(--idle-soft); }
.ok, .lg.ok { background: var(--ok-soft); }
.warn, .lg.warn { background: var(--accent-soft); }
.over, .lg.over { background: var(--bad-soft); color: var(--bad); }
.cap-wrap { overflow: auto; max-height: calc(100vh - 250px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.cap-grid { display: grid; grid-template-columns: 280px repeat(var(--weeks), minmax(108px, 1fr)); min-width: calc(280px + var(--weeks) * 108px); }
.cap-h { position: sticky; top: 0; z-index: 2; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; color: var(--fg-2); }
.cap-h.now { box-shadow: inset 0 -3px 0 var(--accent); color: var(--fg); }
.cap-name { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-strong); }
.cap-h.cap-name { z-index: 3; border-bottom: 1px solid var(--line-strong); }
.cap-in { width: 64px; height: 28px; margin-left: auto; text-align: right; }
.cap-cell { display: grid; align-content: center; gap: 1px; min-height: 54px; padding: 6px 10px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; font: inherit; cursor: pointer; background: var(--surface); transition: filter 120ms var(--ease-std); }
.cap-cell:hover { filter: brightness(0.96); }
.cap-cell.static { cursor: default; background: var(--surface); }
.cap-cell.static:hover { filter: none; }
.cap-cell.off { background: repeating-linear-gradient(135deg, var(--inset) 0 6px, var(--surface) 6px 12px); }
.cap-pct { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.cap-hrs { font-size: 12px; color: var(--fg-2); }
.cap-off { font-size: 11px; font-weight: 600; color: var(--info); }
.cap-total { background: var(--canvas) !important; font-weight: 600; }

/* ---------- Portfolio ---------- */
.pf-name { display: flex; align-items: center; gap: 8px; }
.pf-table td, .pf-table th { height: 40px; }
.pbar { display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: var(--inset); overflow: hidden; vertical-align: middle; }
.pbar span { display: block; height: 100%; background: var(--ok); }
.rag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 11px; font-size: 12px; font-weight: 600; }
.rag.red { background: var(--bad-soft); color: var(--bad); }
.rag.amber { background: var(--accent-soft); color: var(--warn); }
.rag.green { background: var(--ok-soft); color: var(--ok); }
.gate { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.gate.approved { color: var(--ok); }
.gate.rejected { color: var(--bad); }
.gate.pending { color: var(--fg-2); }
.pf-total td { background: var(--canvas); }
.hint .rag { margin: 0 2px; }

/* ---------- Life cycle ---------- */
.lc-sum { position: relative; height: 44px; margin-bottom: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.lc-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-right: 2px solid var(--surface); font: inherit; font-weight: 600; white-space: nowrap; overflow: hidden; cursor: pointer; }
.lc-seg.approved { background: var(--ok-soft); color: var(--ok); }
.lc-seg.rejected { background: var(--bad-soft); color: var(--bad); }
.lc-seg.pending { background: var(--inset); color: var(--fg-2); }
.lc-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent-hover); pointer-events: none; }
.lc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lc-row { display: grid; grid-template-columns: 32px 24px minmax(80px, 1fr) auto auto auto auto; align-items: center; gap: 12px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.lc-row.approved { border-left: 3px solid var(--ok); }
.lc-row.rejected { border-left: 3px solid var(--bad); }
.lc-row.placeholder { opacity: 0.4; border-style: dashed; }
.lc-row.ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; box-shadow: var(--shadow-pop); }
.lc-no { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.lc-name { font-size: 14px; }
.lc-name:focus { outline: none; }
.lc-dates { display: flex; align-items: center; gap: 6px; }
.lc-dates .input { width: 140px; }
.lc-grip { cursor: grab; touch-action: none; }
.lc-moves { display: inline-flex; }
.lc-note { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; }
.lc-note.bad { color: var(--bad); }
.lc-note.warn { color: var(--warn); }
.fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.fieldset legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.radio { display: flex; align-items: center; gap: 8px; }

/* ---------- Batch 3a: sprints, time, meetings ---------- */
.sprint-tag { padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 11px; color: var(--fg-2); }
.card-meta { gap: 6px; }
.sp-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-list { display: grid; gap: 8px; }
.sp-card { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; cursor: pointer; transition: border-color 120ms var(--ease-std), background-color 120ms var(--ease-std); }
.sp-card:hover { border-color: var(--line-strong); }
.sp-card.sel { border-color: var(--accent-hover); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.sp-card-top { display: flex; align-items: center; gap: 8px; }
.sp-state { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 600; }
.sp-state.active { color: var(--info); }
.sp-state.closed { color: var(--ok); }
.sp-state.planned { color: var(--fg-2); }
.sp-detail { display: grid; gap: 16px; min-width: 0; }
.sp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-head h2 { margin: 0; font-size: 18px; }
.sp-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-stat { display: grid; min-width: 110px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sp-stat strong { font-size: 20px; }
.sp-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sp-widget { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sp-widget .d-h { margin: 0 0 8px; }
.sp-widget svg { width: 100%; height: auto; }
.vel { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.vel li { display: grid; grid-template-columns: 70px 1fr 72px; align-items: center; gap: 8px; }
.vbar { height: 10px; border-radius: 5px; background: var(--inset); overflow: hidden; }
.vbar span { display: block; height: 100%; background: var(--steel); }
.vbar.open span { background: var(--info); }
.sp-bl { display: grid; grid-template-columns: 90px 1fr auto auto; align-items: center; gap: 10px; }
.sp-table td { height: 36px; }
.pbar.hot span { background: var(--bad); }

.tm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.tm-card { display: grid; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.tm-card .d-h { margin: 0; }
.tm-card { min-width: 0; overflow-x: auto; }
.tm-card .wp-table th, .tm-card .wp-table td { padding: 0 8px; }
.tm-card .pbar { width: 64px; }
.tm-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 1fr) auto auto; align-items: center; gap: 8px; }
.tm-clock { font: 600 18px var(--mono); font-variant-numeric: tabular-nums; }
.tm-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.tm-wide { grid-column: span 3; }
.tm-week { display: grid; gap: 8px; }
.tm-day { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.tm-day.today { border-color: var(--accent-hover); box-shadow: inset 3px 0 0 var(--accent); }
.tm-day.we { background: var(--canvas); }
.tm-day-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.tm-bar { flex: 1; max-width: 200px; height: 8px; border-radius: 4px; background: var(--inset); overflow: hidden; }
.tm-bar span { display: block; height: 100%; background: var(--ok); }
.tm-bar span.over { background: var(--bad); }
.tm-entry { display: grid; grid-template-columns: 120px 1fr auto 56px 32px; align-items: center; gap: 10px; min-height: 32px; border-top: 1px solid var(--line); }
.tm-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mt-table .input { height: 30px; }
.mt-min { width: 80px; }
.mt-add { display: flex; }

@media (max-width: 1100px) {
  .tm-layout, .sp-layout { grid-template-columns: minmax(0, 1fr); }
  .tm-row { grid-template-columns: 1fr; }
}

/* ---------- Batch 3b: detail extras, admin, wiki, guide, self-check ---------- */
.new-proj { justify-content: flex-start; margin-top: 6px; }
.avatar.ph { background: transparent !important; color: var(--fg-3) !important; border: 1px dashed var(--fg-3); }
.lockchip { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 9px; background: var(--inset); font-size: 11px; font-weight: 600; color: var(--fg-2); }
.lock-banner, .guest-banner { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--accent-soft); font-size: 13px; }
.guest-banner { border-bottom: 1px solid var(--accent-hover); border-radius: 0; }
.calc { display: block; padding: 6px 10px; border-radius: var(--r-sm); background: var(--canvas); font-weight: 600; }
.calc.bad { color: var(--bad); background: var(--bad-soft); }
.d-wide { grid-column: 1 / -1; }
.d-group { display: grid; gap: 8px; }
.d-group > .d-h { margin: 0; }
.tree-pick { display: grid; gap: 6px; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.ext { color: var(--info); font-size: 13px; }
.comment.internal-c { padding: 6px; border-radius: var(--r-sm); background: var(--accent-soft); }
.comment .lockchip { margin-left: 4px; }
.summary { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; }
.summary dt { color: var(--fg-2); }
.summary dd { margin: 0; font-weight: 500; }

.ad-body { display: grid; gap: 12px; min-width: 0; }
.ad-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ad-card .d-h { margin: 0; }
.ad-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ad-row .input { flex: 1; min-width: 160px; width: auto; }
.ad-row label { min-width: 110px; font-weight: 600; }
.ad-list { display: grid; gap: 8px; }
.ad-groups { display: grid; gap: 10px; }
.ad-group { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas); }
.ad-fields { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.ad-fields li { display: flex; align-items: center; gap: 6px; }
.ad-fields .chip { min-width: 140px; }
.ad-fields .dd { width: 150px; }
.mono-in { font-family: var(--mono); }
.tree-row { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.tree-edit { display: grid; gap: 2px; }

.wk-text { max-width: 760px; line-height: 1.6; }
.wk-text h2 { font-size: 20px; margin: 0 0 8px; }
.wk-text h3 { font-size: 16px; margin: 16px 0 6px; }
.wk-text h4 { font-size: 14px; margin: 12px 0 4px; }
.wk-link { color: var(--info); }
.wk-missing { color: var(--bad); text-decoration: underline dotted; }
.wk-area { font-family: var(--mono); font-size: 13px; }
.wk-ver { display: flex; align-items: center; gap: 8px; }
.wk-old { padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); }

.guide-intro { display: grid; gap: 4px; max-width: 820px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; margin-top: 8px; }
.guide-card { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.guide-card .d-h { margin: 0; font-size: 15px; }
.guide-card .btn { justify-self: start; }
.guide-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.guide-steps label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.guide-steps input { margin-top: 3px; }

.sc-hidden { position: absolute; left: -10000px; top: 0; width: 1200px; height: 800px; overflow: hidden; }
.sc-summary { font-weight: 600; }
.sc-summary.bad { color: var(--bad); }
.res { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; }
.res.ok { color: var(--ok); }
.res.bad { color: var(--bad); }
.sc-table tr.fail td { background: var(--bad-soft); }
.sc-table td { white-space: normal; }

html.shared-mode .rail, html.shared-mode .topbar { display: none; }
html.shared-mode .app { grid-template-columns: minmax(0, 1fr); }
html.shared-mode .shared-page { max-width: 760px; margin: 0 auto; }
html.guest-mode .topbar { box-shadow: inset 0 -3px 0 var(--accent); }

/* ---------- print: Gantt to PDF (A3 landscape) ---------- */
@page { size: A3 landscape; margin: 10mm; }
@media print {
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rail, .topbar, .toolbar, .skip, .toasts, .bulk-root, .detail, .page-head .count, .hint, .g-tip { display: none !important; }
  .app { display: block; height: auto; }
  .content { height: auto; }
  .main, .main.board-mode { display: block !important; overflow: visible !important; padding: 0; }
  .print-only { display: block; margin-bottom: 8px; font-weight: 600; }
  .gantt-page { display: block; }
  .gantt-scroll { overflow: visible; max-height: none; border: 0; }
  .g-label, .g-head, .g-today span { position: static; }
  .g-row { break-inside: avoid; }
}

/* ---------- motion ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { from { opacity: 1; } to { opacity: 0; transform: scale(0.95); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes latch { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes ring { from { opacity: 1; } to { opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Reduced motion: slides and scales become fades. Latch, shake and lift become a color or border change. Dragging itself stays. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .detail, .detail.open { transform: none; }
  .detail { opacity: 0; }
  .detail.open { opacity: 1; }
  .card.picked { transform: none; }
  .card.latch::before { opacity: 1; animation: none; }
  .card.shake { outline: 2px solid var(--bad); }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
html.reduce-motion .detail, html.reduce-motion .detail.open { transform: none; }
html.reduce-motion .detail { opacity: 0; }
html.reduce-motion .detail.open { opacity: 1; }
html.reduce-motion .card.picked { transform: none; }
html.reduce-motion .card.latch::before { opacity: 1; animation: none; }
html.reduce-motion .card.shake { outline: 2px solid var(--bad); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: 264px; visibility: hidden; transform: translateX(-100%); transition: transform 250ms var(--ease-dec), visibility 0s linear 250ms; }
  .app.rail-open .rail { visibility: visible; transform: none; box-shadow: var(--shadow-pop); transition: transform 250ms var(--ease-dec), visibility 0s; }
  .only-small { display: inline-flex; }
  .main { padding: 12px 12px 20px; }
  .search { width: auto; flex: 1; }
  .d-grid, .two { grid-template-columns: 1fr; }
  .board { grid-auto-columns: 82vw; scroll-snap-type: x mandatory; }
  .col { scroll-snap-align: start; }
}

/* 2026-11-14 | owner: maverick | why: tkt158 dark mode and DataLoop logo requested by the owner | impact: all views (colors only), print (forced light by js/app.js), Self-check. No data rule changes. */
/* ---------- profile menu (avatar in the top bar) ---------- */
.avatar-btn { width: auto; height: 36px; padding: 0 3px; border-radius: 18px; }
.popover.profile-pop { width: 300px; padding: 12px; display: grid; gap: 12px; }
.prof-head { display: flex; align-items: center; gap: 12px; }
.prof-form { display: grid; gap: 4px; }
.prof-row { display: flex; gap: 8px; }
.prof-row .input { flex: 1; min-width: 0; }
.prof-theme { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.prof-theme legend { padding: 0; margin-bottom: 4px; }
.prof-links { display: grid; gap: 2px; margin: 0 -4px; }
.search .input:disabled { cursor: not-allowed; }

/* 2026-11-15 | owner: maverick | why: tkt158 phone layout (below 640 px): cards instead of table rows, 44 px touch targets, 13 px minimum text, full-width search row, full-screen sheets | impact: table, board, top bar, detail panel, dialogs, bulk bar. Desktop rules above stay as they are. */
.phone-note { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-soft); font-size: 13px; }
html.role-other .rail-project, html.role-other .bulk-root { display: none; }
@media (max-width: 640px) {
  html { font-size: 16px; }
  .small, .muted.small, .hint, .lbl, .nav-sep { font-size: 13px; }
  .btn, .input, .select, .dd-btn { min-height: 44px; }
  .iconbtn { width: 44px; height: 44px; }
  .nav-item { min-height: 44px; }
  .dd-opt { height: 44px; }
  .topbar { height: auto; min-height: 52px; flex-wrap: wrap; padding: 6px 12px; row-gap: 6px; }
  .topbar .search { order: 10; flex: 0 0 100%; width: 100%; }
  .toolbar .dd { flex: 1 1 100%; min-width: 0; }
  .main { padding: 12px 12px 88px; }
  .table-wrap { max-height: none; border: 0; background: transparent; overflow: visible; }
  .wp-table, .wp-table tbody { display: block; }
  .wp-table thead { display: none; }
  .wp-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
  .wp-table td { display: block; height: auto; min-height: 0; padding: 0; border: 0; white-space: normal; font-size: 13px; }
  .wp-table td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; color: var(--fg-2); }
  .wp-table td.col-subject { grid-column: 1 / -1; order: -1; font-size: 15px; font-weight: 600; }
  .wp-table td.col-subject .subj { max-width: none; }
  .wp-table td.col-sel { grid-column: 1 / -1; order: -2; width: auto; }
  .wp-table td.col-sel input { width: 24px; height: 24px; }
  .wp-table td.col-id { font-size: 13px; }
  .detail { top: 0; width: 100vw; z-index: 90; border-left: 0; }
  .backdrop { align-items: stretch; }
  .dialog { width: 100vw; min-height: 100vh; border-radius: 0; padding: 16px; overflow-y: auto; }
  .popover.profile-pop { width: calc(100vw - 24px); }
  .bulkbar .dd { width: 100%; }
  .bulk-root { bottom: 0; }
  .guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wp-table td.num { text-align: left; }
  .wp-table td.col-sel { min-height: 0; }
}

/* 2026-11-15 | owner: maverick | why: tkt158 A4a, sign-in screen of server mode (js/http.js) | impact: only when the page is opened from the backend at /app/ */
.signed-out #app, .signed-out #detail { display: none; }
.signin { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--canvas); }
.signin-card { width: min(100%, 380px); display: grid; gap: 14px; padding: 28px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
.signin-card h1 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.signin-card p { margin: 0; }
.signin-mark { width: 52px; height: 44px; }
.signin-form { display: grid; gap: 12px; }
.signin-google { min-height: 44px; }
.signin-err { color: var(--bad); min-height: 1.2em; }