/* ============================================================
   OFFLOAD — Agenda Cockpit redesign
   Design tokens, two themes, semantic card system, motion.
   (No color-mix() — explicit rgba tints for capture/export safety)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- THEME: DARK (default) ---------- */
:root,
[data-theme="dark"] {
  --bg:          #0a0a0e;
  --bg-2:        #0d0d12;
  --panel:       #14141b;
  --panel-2:     #18181f;
  --header-bg:   #1d1d27;
  --header-bg-2: #202029;
  --border:      rgba(255,255,255,.075);
  --border-2:    rgba(255,255,255,.14);
  --text:        #eaeaf0;
  --text-dim:    #a2a2ad;
  --text-mute:   #6a6a76;
  --rail:        rgba(255,255,255,.06);
  --shadow:      0 1px 0 rgba(255,255,255,.03), 0 14px 30px -18px rgba(0,0,0,.7);
  --head-ink:    #eaeaf0;
  --head-sub:    #8c8c98;
  --glow:        0 0 0 1px rgba(99,102,241,.55), 0 0 22px -2px rgba(99,102,241,.42);
}

/* ---------- THEME: LIGHT (refined, no harsh white) ---------- */
[data-theme="light"] {
  --bg:          #e5e7ee;
  --bg-2:        #ebedf3;
  --panel:       #f8f9fc;
  --panel-2:     #f1f3f8;
  --header-bg:   #1e2330;
  --header-bg-2: #262c3b;
  --border:      #dde1ea;
  --border-2:    #c9cfdb;
  --text:        #1b2030;
  --text-dim:    #5a6377;
  --text-mute:   #98a1b2;
  --rail:        rgba(20,24,40,.05);
  --shadow:      0 1px 2px rgba(20,28,48,.05), 0 16px 34px -20px rgba(20,28,48,.22);
  --head-ink:    #eef1f7;
  --head-sub:    #a7b0c2;
  --glow:        0 0 0 1px rgba(99,102,241,.45), 0 0 18px -2px rgba(99,102,241,.34);
}

/* ---------- SEMANTIC ACCENTS + per-type tints ---------- */
:root {
  --c-timetable:#64748b; --c-school:#6366f1; --c-project:#10b981; --c-private:#f97316;
  --radius:11px; --radius-sm:8px; --gap:18px; --pad:16px;
  --fs:1rem; --fs-sm:.8125rem; --fs-xs:.6875rem;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.4,0,.2,1);
}
.--timetable { --accent:#64748b; --fill:rgba(100,116,139,.16); --edge:rgba(100,116,139,.42); --ink:#9aa6b8; }
.--school    { --accent:#6366f1; --fill:rgba(99,102,241,.17);  --edge:rgba(99,102,241,.44);  --ink:#9799f7; }
.--project   { --accent:#10b981; --fill:rgba(16,185,129,.16);  --edge:rgba(16,185,129,.42);  --ink:#3fd6a4; }
.--private   { --accent:#f97316; --fill:rgba(249,115,22,.16);  --edge:rgba(249,115,22,.44);  --ink:#fb9347; }
[data-theme="light"] .--timetable { --fill:rgba(100,116,139,.13); --ink:#566476; }
[data-theme="light"] .--school    { --fill:rgba(99,102,241,.12);  --ink:#4f52d8; }
[data-theme="light"] .--project   { --fill:rgba(16,185,129,.12);  --ink:#0a8f63; }
[data-theme="light"] .--private   { --fill:rgba(249,115,22,.13);  --ink:#c75c10; }

/* accent palette variant: warm */
[data-accent="warm"] { --c-school:#e0995a; --c-project:#d97757; --c-private:#cf5b4e; --c-timetable:#9c8b76; }
[data-accent="warm"] .--school  { --accent:#d97757; --fill:rgba(217,119,87,.17); --edge:rgba(217,119,87,.44); --ink:#e08a6c; }
[data-accent="warm"] .--project { --accent:#e0995a; --fill:rgba(224,153,90,.17); --edge:rgba(224,153,90,.44); --ink:#e6a772; }
[data-accent="warm"] .--private { --accent:#cf5b4e; --fill:rgba(207,91,78,.17);  --edge:rgba(207,91,78,.46);  --ink:#db7064; }

/* density */
[data-density="compact"] { --gap:12px; --pad:11px; --fs:.94rem; --fs-sm:.78rem; }
[data-density="comfy"]   { --gap:24px; --pad:22px; --fs:1.06rem; --fs-sm:.85rem; }

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Outfit', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}

/* ============================================================ GRID */
.stage { flex:1; min-height:0; display:grid; grid-template-columns:minmax(330px, 38%) 1fr; gap:var(--gap); padding:var(--gap); }
.right { min-height:0; display:grid; grid-template-rows:auto 1fr; gap:var(--gap); }
.pool  { min-height:0; display:grid; grid-template-columns:1.15fr .85fr; gap:var(--gap); }

/* ============================================================ PANEL */
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.panel__head { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:13px 16px; background:linear-gradient(180deg, var(--header-bg), var(--header-bg-2)); border-bottom:1px solid var(--border); color:var(--head-ink); }
.panel__head .tag { display:flex; align-items:center; gap:8px; font:700 .76rem/1 'Outfit'; letter-spacing:.13em; text-transform:uppercase; color:var(--head-ink); white-space:nowrap; }
.panel__head .tag svg { color:#9aa6ff; }
.panel__head .sub { font-size:.74rem; color:var(--head-sub); font-weight:500; letter-spacing:.02em; }
.panel__head .grow { flex:1; }
.panel__head .icon-btn { color:var(--head-sub); border-color:rgba(255,255,255,.16); }
.panel__head .icon-btn:hover { color:#fff; background:rgba(255,255,255,.08); }
.panel__body { flex:1; min-height:0; overflow-y:auto; padding:var(--pad); }
.panel__body::-webkit-scrollbar { width:9px; }
.panel__body::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:9px; border:3px solid transparent; background-clip:padding-box; }

/* ============================================================ CARDS */
.card {
  --accent:#6366f1; --fill:rgba(99,102,241,.17); --edge:rgba(99,102,241,.44); --ink:#9799f7;
  position:relative; border-radius:var(--radius-sm); padding:11px 13px 11px 16px;
  background:var(--fill); border:1px solid var(--edge);
  display:flex; align-items:center; gap:11px; cursor:grab;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), opacity .3s var(--ease);
}
.card::before { content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:3px; background:var(--accent); }
.card:hover { transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(0,0,0,.5); }

[data-cards="outline"] .card { background:transparent; }
[data-cards="stripe"]  .card { background:var(--panel-2); border-color:var(--border); }

.card .time { font:600 .74rem/1.2 var(--mono); color:var(--ink); white-space:nowrap; }
.card .body { flex:1; min-width:0; }
.card .title { font-weight:600; font-size:var(--fs-sm); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .meta { font-size:var(--fs-xs); color:var(--text-mute); margin-top:2px; display:flex; align-items:center; gap:5px; }
.card .pill { font:600 .62rem/1 'Outfit'; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--fill); padding:3px 6px; border-radius:5px; }

.card.--timetable { padding-left:18px; }
.card.--timetable::before { width:4px; background:repeating-linear-gradient(180deg, var(--accent) 0 5px, transparent 5px 9px); }
.card.--timetable .title { color:var(--text-dim); }

.card .actions { display:flex; align-items:center; gap:4px; opacity:0; transition:opacity .15s; }
.card:hover .actions, .card:focus-within .actions { opacity:1; }
.cbx { appearance:none; width:18px; height:18px; flex:0 0 auto; border:1.5px solid var(--edge); border-radius:6px; cursor:pointer; position:relative; transition:.15s var(--ease); }
.cbx:hover { border-color:var(--accent); }
.cbx:checked { background:var(--accent); border-color:var(--accent); }
.cbx:checked::after { content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg); }
.x-btn { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:var(--text-mute); background:transparent; border:none; cursor:pointer; transition:var(--ease) .15s; }
.x-btn:hover { color:var(--c-private); background:rgba(249,115,22,.14); }
.bolt-btn { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; color:var(--c-private); background:transparent; border:none; cursor:pointer; transition:var(--ease) .15s; }
.bolt-btn:hover { background:rgba(249,115,22,.16); }
.card.done { opacity:0; transform:translateX(14px); pointer-events:none; }

[data-glow="on"] .card.next-action { box-shadow:var(--glow); border-color:var(--accent); opacity:1 !important; }
[data-glow="on"] #today-undated-checklist:has(.next-action) .card:not(.next-action) { opacity: .55; }

/* ============================================================ MODULE A */
.seg { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:5px 10px; font-size:.74rem; font-weight:600; color:var(--head-sub); background:transparent; cursor:pointer; transition:var(--ease) .18s; }
.seg:hover { color:#fff; background:rgba(255,255,255,.05); }
.seg .sw { color:var(--c-project); }
.daynav { display:flex; align-items:center; gap:6px; }
.daynav .date { font:600 .82rem/1.1 'Outfit'; color:var(--head-ink); text-align:right; }
.daynav .date small { display:block; font:500 .68rem/1 var(--mono); color:var(--head-sub); }
.btn-today { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:7px; color:#5ee0b4; border:1px solid rgba(16,185,129,.4); background:rgba(16,185,129,.14); cursor:pointer; transition:var(--ease) .18s; }
.btn-today:hover { background:rgba(16,185,129,.22); }

#timelineBody { display:flex; flex-direction:column; gap:9px; transition:transform .34s var(--ease), opacity .34s var(--ease); }
#timelineBody.warp-out-next { transform:translateX(-26px); opacity:0; }
#timelineBody.warp-out-prev { transform:translateX(26px); opacity:0; }
#timelineBody.warp-in-next  { animation:inFromRight .36s var(--ease); }
#timelineBody.warp-in-prev  { animation:inFromLeft .36s var(--ease); }
@keyframes inFromRight { from{transform:translateX(26px);opacity:0} to{transform:none;opacity:1} }
@keyframes inFromLeft  { from{transform:translateX(-26px);opacity:0} to{transform:none;opacity:1} }
.gap-rule { display:flex; align-items:center; gap:10px; padding:3px 4px; color:var(--text-mute); font-size:.72rem; font-weight:500; }
.gap-rule::before, .gap-rule::after { content:""; flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--border-2) 0 4px, transparent 4px 8px); }
.empty-state { color:var(--text-mute); font-size:.82rem; text-align:center; padding:30px 10px; }

/* drag & drop */
.card[data-drag] { cursor:grab; }
.card.dragging { opacity:.4; }
.ghost {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-sm);
  border:1.5px dashed var(--c-school); background:rgba(99,102,241,.1); color:var(--c-school);
  font-size:.78rem; font-weight:600; animation:ghostPulse 1s var(--ease) infinite;
}
.ghost .time { font:600 .74rem var(--mono); }
.ghost .lbl { opacity:.7; }
@keyframes ghostPulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.gap-rule.slot { cursor:copy; transition:color .15s; }
.gap-rule.slot.over { color:var(--c-school); font-weight:700; }
.gap-rule.slot.over::before, .gap-rule.slot.over::after { background:var(--c-school); }
.card .resize { position:absolute; left:14px; right:10px; bottom:-4px; height:9px; cursor:ns-resize; opacity:0; touch-action:none; }
.card .resize::after { content:""; position:absolute; left:50%; bottom:3px; transform:translateX(-50%); width:28px; height:3px; border-radius:3px; background:var(--edge); }
.card:hover .resize { opacity:1; }
.card.resizing { box-shadow:var(--glow); }
body.resizing { cursor:ns-resize; user-select:none; }
.card.just-dropped { animation:justDropped .7s var(--ease); }
@keyframes justDropped { 0%{box-shadow:0 0 0 2px var(--accent); transform:scale(1.015)} 100%{box-shadow:none; transform:none} }

/* ============================================================ MODULE B */
.radar-window { overflow:hidden; flex:1; min-height:0; }
.radar-track { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--gap); height:100%; transition:transform .38s var(--ease); }
.radar-track.no-anim { transition:none; }
.rcol { display:flex; flex-direction:column; min-width:0; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; transition:border-color .18s var(--ease), transform .38s var(--ease), opacity .38s var(--ease); }
.rcol:hover { border-color:var(--border-2); }
.rcol.is-target { border-color:rgba(99,102,241,.55); box-shadow:var(--glow); }
.rcol.warp { transform:scale(1.05); opacity:.5; }
.rcol__head { display:flex; align-items:baseline; justify-content:space-between; padding:9px 11px 7px; border-bottom:1px solid var(--border); }
.rcol__head .wd { font-weight:700; font-size:.82rem; }
.rcol__head .dt { font:500 .68rem/1 var(--mono); color:var(--text-mute); }
.rcol__body { flex:1; padding:8px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.rcard { --accent:#6366f1; --fill:rgba(99,102,241,.17); --edge:rgba(99,102,241,.44); --ink:#9799f7; position:relative; padding:6px 8px 6px 11px; border-radius:6px; background:var(--fill); border:1px solid var(--edge); font-size:.72rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rcard::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:2.5px; border-radius:3px; background:var(--accent); }
.rcard .rt { font:600 .64rem var(--mono); color:var(--ink); margin-right:4px; }
.rcol .free { margin:auto; color:var(--text-mute); font-size:.72rem; font-style:italic; }

/* ============================================================ MODULE C */
.section-label { display:flex; align-items:center; gap:7px; margin:2px 2px 9px; font:700 .68rem/1 'Outfit'; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.section-label svg { width:13px; height:13px; }
.section-label .n { color:var(--text-mute); font-weight:600; }
.subhead { margin:22px 2px 9px; }
.backlog { border:1px solid rgba(249,115,22,.3); background:rgba(249,115,22,.09); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:18px; }
.backlog__head { display:flex; align-items:center; gap:8px; cursor:pointer; color:#f3a86a; }
[data-theme="light"] .backlog__head { color:#c75c10; }
.backlog__head .lbl { font:700 .7rem/1 'Outfit'; letter-spacing:.09em; text-transform:uppercase; }
.backlog__head .chev { margin-left:auto; transition:transform .25s var(--ease); }
.backlog.collapsed .chev { transform:rotate(-90deg); }
.backlog__items { display:flex; flex-direction:column; gap:7px; margin-top:10px; overflow:hidden; transition:max-height .3s var(--ease), opacity .25s, margin .25s; max-height:400px; }
.backlog.collapsed .backlog__items { max-height:0; opacity:0; margin-top:0; }

#inboxPreview .day-sep { margin:14px 2px 7px; font:600 .7rem/1 'Outfit'; color:var(--text-mute); letter-spacing:.02em; }
#inboxPreview .day-sep:first-child { margin-top:2px; }
#inboxPreview .horizon-1 { opacity:1; }
#inboxPreview .horizon-2 { opacity:.72; }
#inboxPreview .horizon-3 { opacity:.46; }
#inboxPreview > div > .card { margin-bottom:7px; }

.pins-empty { margin:auto; max-width:230px; text-align:center; color:var(--text-mute); font-size:.8rem; font-style:italic; line-height:1.55; padding:30px 0; }
.pin-group { margin-bottom:16px; }
.pin-group__head { display:flex; align-items:center; gap:7px; margin-bottom:8px; font-weight:700; font-size:.78rem; }
.pin-group__head .dot { width:8px; height:8px; border-radius:3px; }
.pin-group .card { margin-bottom:7px; }

@media (max-width:1100px){
  .stage{ grid-template-columns:1fr; grid-auto-rows:min-content; overflow-y:auto; }
  #app{ height:auto; min-height:100vh; }
}

@keyframes pulse-red {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 6px rgba(239,68,68,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}