/* 8Orders Roadmap Hub — brand: Hadaf navy + mint, 8Orders teal + lime, Rubik */
:root {
  --bg: #0e1420; --bg2: #121b29; --panel: #17212f; --panel2: #1d2838; --line: #263244; --line2: #34435a;
  --ink: #eef3f8; --muted: #97a6ba; --faint: #6c7b91;
  --brand: #00daa8; --brand-ink: #04261d; --brand-soft: rgba(0, 218, 168, .13); --brand-line: rgba(0, 218, 168, .45);
  --accent: #d4f482; --accent-ink: #1f2a05; --teal: #1c4e4f; --teal2: #163f3f;
  --now: #d4f482; --danger: #f87171; --danger-soft: rgba(248, 113, 113, .14);
  --s-new: #94a3b8; --s-planned: #60a5fa; --s-dev: #fbbf24; --s-rel: #c084fc; --s-done: #34d399; --s-cancel: #f87171; --s-other: #22d3ee;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .25);
  --radius: 14px; --r2: 10px;
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f2f5f9; --bg2: #e9eef4; --panel: #ffffff; --panel2: #f6f8fb; --line: #dde4ec; --line2: #c7d2de;
  --ink: #101720; --muted: #5b6b7f; --faint: #8795a7;
  --brand: #0b9f7a; --brand-ink: #ffffff; --brand-soft: #e2f6ee; --brand-line: #8fdcc3;
  --accent: #7fb31a; --accent-ink: #ffffff; --now: #7fb31a;
  --s-new: #64748b; --s-planned: #2563eb; --s-dev: #d97706; --s-rel: #7c3aed; --s-done: #059669; --s-cancel: #dc2626; --s-other: #0e7490;
  --shadow: 0 1px 2px rgba(16, 23, 32, .06), 0 8px 24px rgba(16, 23, 32, .08);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100dvh; overflow-x: hidden; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--brand); }
.en, .num { direction: ltr; unicode-bidi: isolate; }
[hidden] { display: none !important; }
.hint { color: var(--muted); font-size: 12.5px; margin: 4px 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* ---------- buttons & fields ---------- */
.btn { border: 1px solid var(--line2); background: var(--panel); border-radius: var(--r2); padding: 8px 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--brand-line); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.primary { background: var(--brand); color: var(--brand-ink); border: 0; border-radius: var(--r2); padding: 9px 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.primary:hover { filter: brightness(1.06); }
.primary:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
.ghost { background: none; border: 1px solid var(--line2); border-radius: var(--r2); padding: 8px 14px; }
.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.icon { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); font-size: 18px; display: inline-grid; place-items: center; }
.icon.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(-360deg); } }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select, dialog input, dialog textarea, dialog select { width: 100%; padding: 9px 12px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--bg2); color: var(--ink); }
.field textarea, dialog textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, dialog input:focus, dialog textarea:focus { outline: 2px solid var(--brand-line); border-color: var(--brand-line); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.err { color: var(--danger); font-size: 13px; min-height: 1em; }
.badge { background: var(--brand-soft); color: var(--brand); border-radius: 6px; padding: 0 7px; font-weight: 600; font-size: 12px; }
.badge.type { background: color-mix(in oklab, var(--s-rel) 18%, transparent); color: var(--s-rel); font-size: 11px; white-space: nowrap; }
.badge.type.t-ci { background: color-mix(in oklab, var(--s-dev) 18%, transparent); color: var(--s-dev); }
.tdot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.tdot.t-cr { background: var(--brand); } .tdot.t-issue { background: var(--s-rel); } .tdot.t-ci { background: var(--s-dev); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line2); background: var(--panel2); }
.tag-role { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; flex: none; background: hsl(var(--hue, 180) 55% 42%); }
.avatar.lg { width: 36px; height: 36px; font-size: 14px; }

/* ---------- auth ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(900px 500px at 85% -10%, rgba(0, 218, 168, .18), transparent 60%), radial-gradient(700px 400px at 10% 110%, rgba(212, 244, 130, .12), transparent 60%), var(--bg); }
.auth-card { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px; box-shadow: var(--shadow); }
.auth-logos { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.auth-logos .x { color: var(--faint); font-size: 18px; }
:root[data-theme="light"] .auth-logos img, :root[data-theme="light"] .logo img { filter: brightness(.25); }
:root[data-theme="light"] .brand .logo { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.auth h1 { margin: 0; font-size: 26px; }
.auth-sub { color: var(--muted); margin: 6px 0 18px; }
.auth .primary { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 18px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.brand .logo { width: 40px; height: 40px; border-radius: 12px; background: var(--teal); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.brand .logo img { height: 20px; }
.brand-text b { display: block; font-size: 16px; line-height: 1.15; }
.brand-text small { display: block; color: var(--muted); font-size: 11.5px; }
.crumbs { display: flex; gap: 4px; align-items: center; flex: 1; min-width: 0; font-weight: 600; }
.crumbs button { background: none; border: 0; padding: 5px 9px; border-radius: 8px; color: var(--brand); display: inline-flex; align-items: center; gap: 4px; }
.crumbs button:hover { background: var(--brand-soft); }
.crumbs .cur { padding: 5px 9px; }
.crumbs .sep { color: var(--faint); }
.crumbs .yr { display: inline-flex; align-items: center; gap: 0; }
.crumbs .yr .arrow { padding: 4px 6px; color: var(--muted); }
.crumbs .yr .arrow svg { width: 18px; height: 18px; display: block; }
.crumbs .wkno { background: var(--brand-soft); color: var(--brand); border-radius: 6px; padding: 0 6px; font-size: 12.5px; }
.crumbs .up { margin-inline-start: 8px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font-weight: 500; font-size: 13px; }
.tools { display: flex; gap: 8px; align-items: center; }
#search { width: 210px; padding: 8px 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); }
.chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); font-size: 13px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.user-chip .avatar { margin-inline-end: 2px; }

/* ---------- filters ---------- */
.filters-wrap { padding: 10px 18px 0; }
.filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filters .lbl { color: var(--muted); font-size: 13px; margin-inline-end: 4px; }
.filters button { border: 1px solid var(--line2); background: var(--panel); border-radius: 999px; padding: 4px 12px; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.filters button[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.filters button.all { opacity: 1; text-decoration: none; color: var(--brand); }
.filters .cnt { color: var(--muted); font-size: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--c, var(--s-other)); }
.st-new { --c: var(--s-new); } .st-planned { --c: var(--s-planned); } .st-dev { --c: var(--s-dev); } .st-rel { --c: var(--s-rel); }
.st-done { --c: var(--s-done); } .st-cancel { --c: var(--s-cancel); } .st-other { --c: var(--s-other); }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; padding: 12px 18px 48px; align-items: start; }
.stage { position: relative; min-width: 0; }
.side { position: sticky; top: 72px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); max-height: calc(100dvh - 92px); overflow: auto; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.side .sh { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.side h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.side .sec { padding: 0 12px 12px; }
.side .sec + .sec { border-top: 1px solid var(--line); padding-top: 10px; }
.count { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 0 9px; font-weight: 700; font-size: 12.5px; }
.side .list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 10px; }
.authors { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.authors button { border: 1px solid var(--line2); background: var(--panel2); border-radius: 999px; padding: 3px 10px 3px 4px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.authors button[aria-pressed="true"] { border-color: var(--brand-line); background: var(--brand-soft); }
.drop-on { background: var(--brand-soft) !important; outline: 2px dashed var(--brand); outline-offset: -2px; }
.groups { display: flex; flex-direction: column; gap: 14px; }
.agroup .ah { display: flex; align-items: center; gap: 7px; padding: 6px 4px; margin-bottom: 6px; border-bottom: 1px dashed var(--line2); font-size: 13.5px; }
.agroup .ah .count { font-size: 11.5px; }

/* ---------- year ---------- */
.year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.month { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.month.now { border-color: var(--now); box-shadow: 0 0 0 2px color-mix(in srgb, var(--now) 30%, transparent), var(--shadow); }
.month > button.mh { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; margin-bottom: 4px; }
.month > button.mh:hover, .month > button.mh:focus-visible { background: var(--brand-soft); }
.mno { font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border-radius: 6px; padding: 1px 6px; }
.mh b { font-size: 15px; }
.mh small { color: var(--muted); font-weight: 500; margin-inline-start: auto; }
.wk { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px; align-items: center; min-height: 30px; padding: 3px 4px; border-radius: 8px; border: 1px dashed transparent; }
.wk:hover { border-color: var(--line2); background: var(--bg2); }
.wk.now { background: color-mix(in srgb, var(--now) 10%, transparent); }
.wk .wl { all: unset; cursor: pointer; font-size: 11px; color: var(--muted); display: contents; }
.wno { font-size: 10.5px; font-weight: 700; color: var(--faint); background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; min-width: 32px; text-align: center; }
.wk.now .wno { color: var(--accent-ink); background: var(--now); border-color: var(--now); }
.wdates { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wk .wl:hover .wdates { color: var(--brand); text-decoration: underline; }
.pips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; min-height: 18px; }
.pip { font-size: 11px; line-height: 1.3; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--c) 18%, var(--panel)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); cursor: grab; touch-action: pan-y; user-select: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.pip .dot { width: 7px; height: 7px; }
.pip.more { background: var(--bg2); border-color: var(--line2); color: var(--muted); cursor: pointer; }
.pip.faded, .card.faded { opacity: .5; }

/* ---------- month ---------- */
.monthv { display: grid; gap: 12px; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 360px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); min-width: 0; }
.col.now { border-color: var(--now); }
.col > button.ch { all: unset; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 6px; }
.col > button.ch:hover { background: var(--brand-soft); }
.ch .wno { font-size: 11.5px; }
.ch small { color: var(--muted); font-weight: 500; margin-inline-start: auto; }
.col .cards { display: flex; flex-direction: column; gap: 8px; flex: 1; border-radius: 8px; }

/* ---------- week ---------- */
.weekv { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.weekv .wh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
.weekv .wh h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.weekv .wh h2 .wno { font-size: 13px; }
.weekv .nav { display: flex; gap: 6px; }
.weekv .nav button { border: 1px solid var(--line2); background: var(--panel2); border-radius: 8px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 4px; }
.weekv .nav svg { width: 16px; height: 16px; }
.weekv .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; min-height: 200px; border-radius: 8px; }
.empty { color: var(--muted); padding: 26px 14px; text-align: center; border: 1px dashed var(--line2); border-radius: 10px; font-size: 13.5px; }

/* ---------- cards ---------- */
.card { background: var(--panel2); border: 1px solid var(--line); border-inline-start: 4px solid var(--c, var(--s-other)); border-radius: 10px; padding: 9px 11px; cursor: pointer; user-select: none; touch-action: pan-y; transition: box-shadow .15s, transform .15s, border-color .15s; min-width: 0; }
.card:hover { box-shadow: var(--shadow); border-color: var(--line2); }
.card.draggable { cursor: grab; }
.card .meta { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); align-items: center; }
.card .meta .st { display: inline-flex; align-items: center; gap: 5px; }
.card .t { font-weight: 600; font-size: 13.5px; margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.4; }
.card.big { padding: 12px 14px; }
.card.big .t { font-size: 15px; -webkit-line-clamp: 4; }
.card .ex { color: var(--muted); font-size: 12.5px; margin-top: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); gap: 6px; }
.card .foot .who { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.card .foot .nm, .authors .nm, .ah .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .foot .who { flex-wrap: wrap; row-gap: 2px; }
.card .foot .asg { white-space: nowrap; opacity: .85; }
.card.draft { border-inline-start-color: var(--accent); }
.card, .pip { -webkit-touch-callout: none; }
.card .grip { touch-action: none; cursor: grab; color: var(--faint); font-size: 15px; line-height: 1; padding: 0 2px; margin-inline-start: auto; user-select: none; }
.card .grip:hover { color: var(--brand); }
.card.dragging-src .grip, body.dragging .card .grip { cursor: grabbing; }
.badges { display: inline-flex; gap: 4px; }
.ghost-drag { position: fixed; z-index: 100; pointer-events: none; transform: rotate(-2deg); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); opacity: .96; width: 250px; }
.ghost-drag .drop-label { display: none; position: absolute; inset-inline-start: 0; top: -30px; background: var(--brand); color: var(--brand-ink); border-radius: 8px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ghost-drag.has-target .drop-label { display: block; }
.dragging-src { opacity: .3; }

/* ---------- drawer ---------- */
.drawer-back { position: fixed; inset: 0; background: rgba(2, 6, 12, .55); z-index: 40; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(600px, 100vw); background: var(--panel); z-index: 50; transform: translateX(105%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; overflow: auto; padding: 18px 20px 40px; box-shadow: 0 0 50px rgba(0, 0, 0, .35); border-inline-end: 1px solid var(--line); }
.drawer.open { visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.drawer.open { transform: translateX(0); }
.drawer .dh { display: flex; align-items: flex-start; gap: 10px; }
.drawer .dh .x { flex: none; }
.drawer h2 { margin: 8px 0 6px; font-size: 19px; overflow-wrap: anywhere; line-height: 1.35; }
.drawer .meta-row { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 13px; margin: 6px 0 14px; align-items: center; }
.drawer section { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.drawer h3 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.drawer h3 .sp { flex: 1; }
.drawer h4 { font-size: 13px; margin: 12px 0 4px; color: var(--brand); }
.drawer .sum p { margin: 0 0 6px; white-space: pre-wrap; }
.drawer .sum ol, .drawer .sum ul { margin: 0; padding-inline-start: 22px; }
.drawer .sum li { margin-bottom: 3px; }
.drawer .sum .chk li { list-style: none; position: relative; padding-inline-start: 4px; }
.drawer .sum .chk li::before { content: "✓"; color: var(--brand); position: absolute; inset-inline-start: -18px; font-weight: 700; }
.drawer .raw { color: var(--muted); font-size: 13px; white-space: pre-wrap; }
.desc { font-size: 14px; overflow-wrap: anywhere; }
.desc img { max-width: 100%; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vid { position: relative; background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.vid video { width: 100%; display: block; max-height: 62vh; background: #000; }
.vid .vbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel2); font-size: 12.5px; color: var(--muted); }
.vid .vbar .btn { padding: 3px 8px; font-size: 12px; }
.thumb { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel2); display: flex; flex-direction: column; }
.thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; display: block; }
.thumb .fi { all: unset; cursor: pointer; padding: 14px 10px; text-align: center; font-size: 26px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.thumb .fi small { font-size: 11px; color: var(--brand); }
.thumb .fi:hover { background: var(--brand-soft); }
.thumb .fn { padding: 4px 8px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; justify-content: space-between; gap: 6px; }
.thumb .fn button { all: unset; cursor: pointer; color: var(--danger); }
.audio-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.audio-row audio { flex: 1; min-width: 0; height: 36px; }
.upl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.upl label.btn { display: inline-flex; }
.upl input[type=file], label.btn input[type=file] { display: none; }
progress { width: 100%; height: 8px; accent-color: var(--brand); }
select.week { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg2); color: var(--ink); max-width: 100%; }
.log { margin: 0; padding: 0; list-style: none; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
details.adm summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.deliv { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.deliv ul { margin: 0; padding-inline-start: 20px; }
.deliv p { margin: 0; white-space: pre-wrap; }

/* ---------- dialogs ---------- */
dialog { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); padding: 20px 22px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(2, 6, 12, .6); }
dialog h2 { margin: 0 0 4px; font-size: 19px; display: flex; align-items: center; gap: 8px; }
dialog h2 .x { margin-inline-start: auto; }
dialog .sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
dialog menu { display: flex; gap: 8px; justify-content: flex-start; padding: 0; margin: 16px 0 0; flex-wrap: wrap; }
.composer { width: min(720px, calc(100vw - 24px)); }
.composer textarea.raw { min-height: 160px; font-size: 15px; }
.capture { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.rec { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.rec.on { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 25%, transparent); } }
.interim { color: var(--muted); font-size: 13px; min-height: 1.2em; font-style: italic; }
.rec-status { font-size: 13px; line-height: 1.5; padding: 8px 12px; border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); }
.rec-status.live { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.rec-status.warn { color: #e3b341; border-color: #e3b341; background: rgba(227, 179, 65, .12); }
.rec-status[hidden] { display: none; }
.att { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.att .thumb { width: 110px; }
.att .thumb img { aspect-ratio: 1; }
.att .thumb audio { width: 110px; height: 30px; }
.ai-note { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--muted); }
.ai-note .ai { color: var(--brand); font-weight: 600; }
.sum-form .field textarea { min-height: 64px; }
.sum-form .lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.admin table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin th, .admin td { text-align: start; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin th { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.admin select { padding: 4px 8px; width: auto; }
.admin .inv { background: var(--panel2); border: 1px dashed var(--brand-line); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 13px; overflow-wrap: anywhere; }
.admin .inv code { direction: ltr; unicode-bidi: isolate; display: block; margin: 6px 0; font-size: 12px; }
.roles-help { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.roles-help b { color: var(--ink); }
.me .menu { display: flex; flex-direction: column; gap: 6px; }
.me .menu button { text-align: start; justify-content: flex-start; }
.lightbox { background: transparent; border: 0; padding: 0; width: auto; max-width: calc(100vw - 24px); }
.lightbox img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 60px); border-radius: 10px; display: block; }
.lightbox .lb-bar { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #fff; }
.confirm { width: min(420px, calc(100vw - 24px)); }
.confirm:has(.picks) { width: min(560px, calc(100vw - 24px)); }
.picks { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.picks > b { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.picks select { margin-top: 10px; width: 100%; }
.toast { position: fixed; bottom: 22px; inset-inline-start: 50%; transform: translateX(50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 200; max-width: calc(100vw - 32px); font-weight: 500; box-shadow: var(--shadow); }
.toast.err { background: var(--danger); color: #fff; }

/* ---------- view transitions ---------- */
::view-transition-old(zoom), ::view-transition-new(zoom) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
.stage.enter { animation: enter .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }

/* ---------- bottom nav (mobile) ---------- */
.bottom { display: none; }


/* ---------- icons ---------- */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.btn .ic, .primary .ic, .ghost .ic { width: 17px; height: 17px; }
.icon .ic { width: 19px; height: 19px; }
.badge .ic { width: 12px; height: 12px; vertical-align: -0.15em; }
.pill .ic { width: 14px; height: 14px; color: var(--muted); }
.lnk { display: inline-flex; align-items: center; gap: 4px; }
.lnk .ic { width: 13px; height: 13px; }
.btn.hdr { padding: 7px 12px; border-radius: 999px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.card:focus-visible, .ritem:focus-visible { outline-offset: 0; }

/* ---------- type pill (CR / Issue / Customer Issue) ---------- */
.tpill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 0 7px; border-radius: 6px; white-space: nowrap; background: var(--bg2); border: 1px solid var(--line); color: var(--muted); }
.tpill .tdot { width: 7px; height: 7px; border-radius: 2px; }
.tpill.t-cr { color: var(--brand); } .tpill.t-issue { color: var(--s-rel); } .tpill.t-ci { color: var(--s-dev); }
.card .grip .ic { width: 16px; height: 16px; }

/* ---------- side panel: tabs, sections, filters ---------- */
.side h2 .ic { width: 18px; height: 18px; color: var(--accent); }
.side-hint { padding: 0 14px 8px; }
.stabs { display: flex; gap: 4px; margin: 0 12px 10px; padding: 3px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
.stabs button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 7px 8px; font-size: 13px; font-weight: 600; color: var(--muted); display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.stabs button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.stabs .cnt { font-size: 11.5px; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 0 7px; }
.tsec { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel2) 55%, transparent); overflow: hidden; }
.tsh { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; font-size: 14px; }
.tsh:hover { background: var(--brand-soft); }
.tsh .count { font-size: 11.5px; } .tsh .chev { margin-inline-start: auto; color: var(--muted); transition: transform .2s; }
.tsec.open .tsh .chev { transform: rotate(180deg); }
.tsec .list { padding: 0 8px 8px; }
.frow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 2px 10px 8px; }
.frow .flbl { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); margin-inline-end: 2px; }
.frow .flbl .ic { width: 13px; height: 13px; }
.inis { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ini { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; background: hsl(var(--hue, 200) 45% 38%); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; padding: 0; letter-spacing: .3px; }
.ini.none { background: var(--bg2); color: var(--muted); border-color: var(--line2); }
.ini .n { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); font-size: 9.5px; line-height: 14px; padding: 0 3px; }
.ini:hover { border-color: var(--brand-line); }
.ini.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.ini.on .n { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.inis:has(.ini.on) .ini:not(.on) { opacity: .4; }
.fclr { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 2px 9px 2px 7px; font-size: 12px; max-width: 100%; }
.fclr .ic { width: 12px; height: 12px; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 6px; }
.tgrid button { border: 1px solid var(--line2); background: var(--panel); border-radius: 9px; padding: 5px 9px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tgrid button .cnt { margin-inline-start: auto; color: var(--muted); font-size: 11.5px; background: var(--bg2); border-radius: 999px; padding: 0 6px; }
.tgrid button[aria-pressed="true"] { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand); }
.tgrid button[aria-pressed="true"] .cnt { background: var(--brand); color: var(--brand-ink); }
.tgrid .tdot { width: 8px; height: 8px; }

/* ---------- scheduled list: periods + compact rows ---------- */
.sched { display: flex; flex-direction: column; gap: 10px; }
.sgroup { border-inline-start: 3px solid var(--line2); padding-inline-start: 8px; }
.sgroup.now { border-inline-start-color: var(--now); } .sgroup.past { opacity: .75; }
.sgh { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; margin-bottom: 4px; border-radius: 8px; font-size: 13px; }
.sgh:hover { background: var(--brand-soft); }
.sgh:hover b { color: var(--brand); }
.sgh .lvl { font-size: 11px; color: var(--muted); background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.sgh .count { font-size: 11px; }
.sgh .badge.now { background: var(--now); color: var(--accent-ink); }
.sgh .chev { margin-inline-start: auto; color: var(--muted); width: 16px; height: 16px; }
.rows { display: flex; flex-direction: column; gap: 4px; }
.ritem { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); border-inline-start: 3px solid var(--c, var(--s-other)); cursor: pointer; user-select: none; touch-action: pan-y; min-width: 0; -webkit-touch-callout: none; }
.ritem:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.ritem.draggable { cursor: grab; }
.ritem .tdot { width: 8px; height: 8px; }
.ritem .rid { font-size: 11.5px; color: var(--muted); flex: none; }
.ritem .rt { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ritem .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.ritem .rst, .ritem .rwho { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ritem.wide { display: grid; grid-template-columns: 14px 64px minmax(0, 1fr) 150px 180px; gap: 10px; align-items: center; }
.ritem.wide .rt { white-space: normal; }
.ritem.wide .rwho .nm { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ritem.thead { background: none; border-color: transparent; cursor: default; padding-top: 0; padding-bottom: 0; font-size: 11.5px; color: var(--muted); margin-bottom: -6px; }
.ritem.thead:hover { box-shadow: none; }
.spast { border-top: 1px dashed var(--line2); padding-top: 8px; margin-top: 2px; }
.spast summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 4px 6px; border-radius: 8px; list-style: none; }
.spast summary::-webkit-details-marker { display: none; }
.spast summary:hover { background: var(--bg2); color: var(--ink); }
.spast summary .ic { width: 15px; height: 15px; }
.spast[open] summary { margin-bottom: 8px; }
.spast .sgroup + .sgroup { margin-top: 10px; }
dialog.scheddlg { width: min(1100px, calc(100vw - 24px)); }
dialog.scheddlg h2 .ic { width: 20px; height: 20px; color: var(--brand); }
dialog.scheddlg .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 620px; }
dialog.scheddlg .frow { padding-inline: 0; }
dialog.scheddlg .sched { gap: 14px; }
dialog.scheddlg .sgh { font-size: 14px; }

/* ---------- v3: ruler ---------- */
.ruler { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 8px; margin-bottom: 14px; box-shadow: var(--shadow); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.ruler .ry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 8px; border-radius: 12px; border: 1px dashed transparent; min-width: 92px; }
.ruler .ry .yl { all: unset; cursor: pointer; font-size: 22px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 10px; }
.ruler .ry .yl:hover { background: var(--brand-soft); }
.ruler .ry .arrow { all: unset; cursor: pointer; color: var(--muted); display: grid; place-items: center; width: 26px; height: 22px; border-radius: 6px; }
.ruler .ry .arrow:hover { background: var(--bg2); color: var(--brand); }
.ruler .ry .arrow svg { width: 16px; height: 16px; }
.ruler .cnt { font-size: 11px; color: var(--muted); font-weight: 600; }
.ruler .track { display: flex; gap: 6px; min-width: 0; position: relative; }
.ruler .track::before { content: ""; position: absolute; inset-inline: 10px; bottom: 30px; height: 2px; background: var(--line2); border-radius: 2px; }
.ruler .rq { border: 1px dashed transparent; border-radius: 12px; padding: 2px 4px 4px; display: flex; flex-direction: column; min-width: 0; }
.ruler .rq.cur { background: color-mix(in srgb, var(--brand) 6%, transparent); border-color: var(--brand-line); }
.ruler .ql { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 2px 6px; border-radius: 6px; width: max-content; }
.ruler .ql:hover { background: var(--brand-soft); color: var(--brand); }
.ruler .rmonths { display: flex; gap: 2px; min-width: 0; }
.ruler .rm { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px 2px; border-radius: 12px; border: 1px dashed transparent; position: relative; z-index: 1; min-width: 0; }
.ruler .wdots { display: flex; gap: 2px; align-items: flex-end; justify-content: center; max-width: 100%; }
.ruler .wd { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 1px 1px 0; border-radius: 8px; min-width: 14px; }
.ruler .wd .wn { font-size: 9px; font-weight: 700; color: var(--faint); line-height: 1; letter-spacing: -.2px; }
.ruler .wd .wc { width: 10px; height: 10px; border-radius: 50%; background: var(--bg2); border: 1.5px solid var(--line2); display: grid; place-items: center; transition: transform .15s, background .15s; position: relative; }
.ruler .wd .wc b { position: absolute; top: -9px; inset-inline-end: -7px; font-size: 8px; line-height: 1; background: var(--brand); color: var(--brand-ink); border-radius: 999px; padding: 1px 3px; font-weight: 700; }
.ruler .wd:hover .wn, .ruler .wd.cur .wn { color: var(--brand); }
.ruler .wd:hover .wc, .ruler .wd.cur .wc { background: var(--brand); border-color: var(--brand); transform: scale(1.3); }
.ruler .wd.has .wc { background: var(--s-planned); border-color: var(--s-planned); }
.ruler .wd.now .wc { border-color: var(--now); box-shadow: 0 0 0 2px color-mix(in srgb, var(--now) 40%, transparent); }
.ruler .wd.now .wn { color: var(--now); }
.ruler .wd.drop-on .wc { transform: scale(1.5); }
.ruler .mc { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; background: var(--bg2); border: 2px solid var(--line2); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: var(--ink); transition: transform .15s, border-color .15s, background .15s; }
.ruler .mc:hover { transform: scale(1.1); border-color: var(--brand-line); }
.ruler .rm.cur .mc { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); transform: scale(1.12); }
.ruler .rm.now .mc { border-color: var(--now); }
.ruler .ml { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); line-height: 1; }
.ruler .ml .cnt { background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 0 5px; }
.ruler [data-drop].drop-on { background: var(--brand-soft) !important; outline: 2px dashed var(--brand); outline-offset: -2px; }
body.dragging .ruler .wd .wc { border-color: var(--brand-line); }
.qtabs { display: none; } /* phones only (see the 760px block) */

/* ---------- v3: parking + year / quarter ---------- */
.parking { background: var(--panel); border: 1px dashed var(--line2); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; }
.parking .ph { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.parking .plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; min-height: 44px; }
.empty.sm { padding: 12px; font-size: 12.5px; grid-column: 1 / -1; }
.qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qcard.now { border-color: var(--now); }
.qcard .qh { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; }
.qcard .qh:hover { background: var(--brand-soft); }
.qcard .qh b { font-size: 15px; }
.qcard .qh small { color: var(--muted); margin-inline-start: auto; }
.qmonths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qm { background: var(--panel2); border: 1px dashed transparent; border-radius: 10px; padding: 8px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qm.now { border-color: var(--now); }
.qm .qml { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; font-size: 13px; }
.qm .qml:hover { background: var(--brand-soft); }
.qm .qml small { color: var(--muted); margin-inline-start: auto; }
.qm .pips { flex-direction: column; align-items: stretch; }
.qm .pip { white-space: normal; }
.qpark { border-top: 1px dashed var(--line); padding-top: 6px; }
.quarterv .qcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mpark { border: 1px dashed var(--line2); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; background: var(--bg2); }
.mpark .pips { margin-top: 4px; }

/* ---------- v3: stages ---------- */
.stepper { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; }
.stepper .stp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.stepper .stp i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg2); border: 1px solid var(--line2); font-size: 11.5px; }
.stepper .stp.done { color: var(--brand); }
.stepper .stp.done i { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.stepper .ln { flex: 1; height: 2px; background: var(--line2); border-radius: 2px; min-width: 14px; }
.drawer h3.stg { align-items: baseline; }
.drawer .stn { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--bg2); border: 1px solid var(--line2); font-size: 12px; flex: none; }
.drawer .stn.done { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.stage-media { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.drawer .stage-sec::after { content: ""; display: block; clear: both; }

/* ---------- v3: WYSIWYG editor ---------- */
.mdwrap { border: 1px solid var(--line2); border-radius: var(--r2); background: var(--bg2); overflow: hidden; }
.mdbar { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--panel2); flex-wrap: wrap; align-items: center; }
.mdbar .sp { flex: 1; }
.mdbar button { border: 1px solid var(--line2); background: var(--panel); border-radius: 7px; padding: 4px 9px; font-size: 12.5px; }
.mdbar button:hover { border-color: var(--brand-line); color: var(--brand); }
.mdedit { min-height: min(52vh, 480px); max-height: 65vh; overflow: auto; padding: 12px 14px; outline: none; font-size: 15px; line-height: 1.75; }
.mdedit:empty::before, .mdedit:has(> p:only-child:empty)::before { content: attr(data-placeholder); color: var(--faint); }
.mdedit h4 { color: var(--brand); font-size: 14.5px; margin: 14px 0 4px; }
.mdedit h4:first-child { margin-top: 0; }
.mdedit p { margin: 0 0 6px; }
.mdedit ul, .mdedit ol { margin: 0 0 8px; padding-inline-start: 24px; }
.mdedit li { margin-bottom: 3px; }
dialog.editor { width: min(760px, calc(100vw - 24px)); }

/* ---------- v3: viewer ---------- */
.viewer { width: min(1100px, calc(100vw - 24px)); padding: 10px; }
.viewer .vw-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.viewer .vw-body { background: #000; border-radius: 10px; overflow: hidden; }
.viewer iframe { width: 100%; height: calc(100dvh - 120px); border: 0; background: #fff; display: block; }
.viewer video { width: 100%; max-height: calc(100dvh - 120px); display: block; }
.viewer audio { width: 100%; display: block; background: var(--panel2); padding: 20px 0; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .year { grid-template-columns: repeat(3, minmax(0, 1fr)); } .parking .plist { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .ruler .wd { min-width: 12px; } .ruler .wd .wn { font-size: 8px; } }
@media (max-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .monthv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col { min-height: 200px; }
  .qgrid { grid-template-columns: minmax(0, 1fr); }
  .quarterv .qcols { grid-template-columns: minmax(0, 1fr); }
  .ruler { grid-template-columns: minmax(0, 1fr); }
  .ruler .ry { flex-direction: row; justify-content: flex-start; }
  .ruler .track { overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .ruler .rq { scroll-snap-align: center; min-width: 300px; }
}
@media (max-width: 760px) {
  body { padding-bottom: 68px; font-size: 15px; }
  .top { padding: 8px 12px; gap: 8px; }
  .brand-text small { display: none; }
  .crumbs { order: 3; flex-basis: 100%; overflow-x: auto; white-space: nowrap; font-size: 14px; }
  .tools { margin-inline-start: auto; gap: 6px; }
  #search { width: 44vw; min-width: 120px; }
  .new-idea, .user-chip { display: none; }
  .filters-wrap { padding: 8px 12px 0; overflow-x: auto; }
  .filters { flex-wrap: nowrap; }
  .filters button { white-space: nowrap; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 24px; }
  .side { position: static; max-height: none; display: none; }
  body.tab-ideas .side { display: flex; }
  body.tab-ideas .stage { display: none; }
  .year { grid-template-columns: minmax(0, 1fr); }
  .month { padding: 10px; }
  .wk { min-height: 38px; }
  .monthv { grid-template-columns: minmax(0, 1fr); }
  .col { min-height: 120px; }
  .weekv { padding: 12px; }
  .weekv .cards { grid-template-columns: minmax(0, 1fr); }
  .parking .plist { grid-template-columns: minmax(0, 1fr); }
  .qmonths { grid-template-columns: minmax(0, 1fr); }
  .qm { min-height: 0; }
  .ruler { padding: 8px 8px 10px; margin-bottom: 10px; gap: 8px; }
  .ruler .ry { justify-content: center; }
  .qtabs { display: flex; gap: 6px; }
  .qtabs button { flex: 1; border: 1px solid var(--line2); background: var(--panel2); border-radius: 10px; padding: 6px 4px; font-weight: 700; font-size: 13px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; color: var(--muted); }
  .qtabs button.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
  .qtabs button.cur:not(.on) { border-color: var(--brand-line); }
  .qtabs .cnt { font-size: 11px; }
  .ruler .track { overflow: visible; padding-bottom: 0; scroll-snap-type: none; }
  .ruler .rq { min-width: 0; }
  .ruler .track::before { bottom: 34px; }
  .ruler .rq { display: none; padding: 0; }
  .ruler .rq.show { display: flex; }
  .ruler .rq .ql { display: none; }
  .ruler .rmonths { gap: 6px; }
  .ruler .rm { padding: 4px 0 2px; }
  .ruler .wdots { gap: 4px; }
  .ruler .wd { min-width: 22px; gap: 3px; }
  .ruler .wd .wn { font-size: 11.5px; }
  .ruler .wd .wc { width: 16px; height: 16px; border-width: 2px; }
  .ruler .wd .wc b { font-size: 9.5px; top: -10px; inset-inline-end: -9px; }
  .ruler .mc { width: 42px; height: 42px; font-size: 14px; }
  .ruler .ml { font-size: 12px; }
  .card .grip { font-size: 20px; padding: 0 4px; }
  .stepper .stp { font-size: 12px; }
  .mdedit { min-height: 40vh; max-height: none; }
  dialog.scheddlg { width: 100vw; height: 100dvh; max-height: 100dvh; max-width: 100vw; border-radius: 0; margin: 0; }
  dialog.scheddlg .tgrid { grid-template-columns: 1fr 1fr; }
  .ritem.wide { grid-template-columns: 10px 56px minmax(0, 1fr); }
  .ritem.wide .rst, .ritem.wide .rwho { grid-column: 2 / -1; }
  .filters .lbl { display: none; }
  .btn.hdr span { display: none; }
  .btn.hdr { width: 38px; height: 38px; padding: 0; justify-content: center; }
  dialog.editor, .viewer { width: 100vw; height: 100dvh; max-height: 100dvh; max-width: 100vw; border-radius: 0; margin: 0; }
  .viewer iframe, .viewer video { height: calc(100dvh - 70px); max-height: none; }
  .card { padding: 11px 12px; }
  .card .t { font-size: 14.5px; }
  .drawer { width: 100vw; padding: 14px 14px 90px; border: 0; }
  .vid video { max-height: 50vh; }
  dialog { width: calc(100vw - 16px); padding: 16px; border-radius: 16px; }
  .composer { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; max-width: 100vw; }
  .sum-form .lists { grid-template-columns: 1fr; }
  .bottom { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; inset-inline: 0; z-index: 35; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bottom button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 4px 0; border-radius: 10px; }
  .bottom button .ic { width: 22px; height: 22px; }
  .bottom button.on { color: var(--brand); background: var(--brand-soft); }
  .bottom button[hidden] { display: none; }
  .bottom:has(button[data-tab="new"][hidden]) { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }