:root {
  --ground: #0E1420;
  --ground-2: #0B111C;
  --panel: #161F30;
  --panel-2: #1B263B;
  --hair: #28344C;
  --hair-soft: #1F2A3F;
  --ink: #EAF0FA;
  --muted: #8593AC;
  --faint: #5B6883;
  --amber: #F5B942;
  --green: #5FD08A;
  --red: #FF6B6B;
  /* member palette */
  --m1: #4FD1C5; /* teal */
  --m2: #FF7A66; /* coral */
  --m3: #A78BFA; /* violet */
  --m4: #5EB3F6; /* sky */
  --m5: #A3E635; /* lime */
  --radius: 16px;
  --gap: clamp(12px, 1.4vw, 22px);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.8);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* disable iOS Safari double-tap-to-zoom (keeps pinch-zoom + scrolling) */
html, body { height: 100%; margin: 0; touch-action: manipulation; }
body {
  background:
    radial-gradient(1200px 700px at 12% -10%, #1a2438 0%, transparent 55%),
    radial-gradient(1000px 800px at 108% 120%, #16213a 0%, transparent 55%),
    var(--ground);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ---------- app shell (sidebar + routed screens) ---------- */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: 250px; flex: none; background: var(--ground-2);
  border-right: 1px solid var(--hair); display: flex; flex-direction: column;
  padding: 16px 12px; gap: 8px; z-index: 70;
}
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 10px; }
.sb-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: .3px; }
.sb-close { display: block; background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 8px; }
.sb-close:hover { color: var(--ink); background: var(--panel); }

/* ---------- desktop: collapsible sidebar ---------- */
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar { display: none; }
  body.sidebar-collapsed .hamburger { display: grid; }
}
.sb-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.sb-group { display: flex; flex-direction: column; gap: 2px; }
.sb-group-h { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); padding: 6px 10px 3px; }
.sb-link {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px;
  color: var(--muted); font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: none;
  background: none; border: none; text-align: left; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-link:hover { background: var(--panel); color: var(--ink); }
.sb-link.active { background: var(--panel-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--amber); }
.sb-add { color: var(--faint); font-weight: 700; font-size: 13px; padding: 8px 12px; background: none; border: none; text-align: left; cursor: pointer; border-radius: 9px; }
.sb-add:hover { color: var(--amber); }
.sb-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--hair-soft); }
.sb-link.danger:hover { color: var(--red); }
.sidebar-backdrop { display: none; }

.main { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; position: relative; }
.screen[hidden] { display: none; }
.scr { min-height: 100vh; min-height: 100dvh; }
.scr-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--hair-soft); position: sticky; top: 0; background: var(--ground); z-index: 5; }
.scr-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.scr-back { color: var(--muted); font-weight: 700; cursor: pointer; text-decoration: none; font-size: 15px; }
.scr-back:hover { color: var(--amber); }
.scr-body { padding: 22px; max-width: 720px; }
.edit-form { max-width: 520px; }
.person-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.person-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--hair); display: grid; place-items: center; font-weight: 800; font-size: 22px; }
.person-name { font-weight: 800; font-size: 20px; }
.person-user { color: var(--faint); font-weight: 600; font-size: 14px; margin-top: 2px; }

/* ---------- task row: open button + progress chips ---------- */
.task-open { flex: 1; min-width: 0; background: none; border: none; text-align: left; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.subchip { font-size: clamp(9px, .78vw, 12px); font-weight: 800; color: var(--muted); background: var(--panel); border: 1px solid var(--hair); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.scr-edit { margin-left: auto; color: var(--muted); font-weight: 700; cursor: pointer; font-size: 14px; }
.scr-edit:hover { color: var(--amber); }

/* ---------- task detail ---------- */
.task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.subtask { display: flex; align-items: center; gap: 12px; background: var(--ground-2); border: 1px solid var(--hair-soft); border-radius: 10px; padding: 8px 10px; }
.subtask.done .label { text-decoration: line-through; text-decoration-color: var(--faint); color: var(--muted); }
.subtask.blocked { opacity: .7; }
.subtask .box.locked { border: none; background: none; font-size: 16px; cursor: not-allowed; }
.subtask .box.checked { background: var(--green); border-color: var(--green); }
.subtask .box.checked svg { opacity: 1; transform: scale(1); }
.sub-body { flex: 1; min-width: 0; background: none; border: none; text-align: left; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.sub-body .label { font-weight: 700; font-size: 15px; }
.sub-body .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 600; }
.sub-body .dep { color: var(--m4); }
.sub-body .cond { color: var(--amber); }
.subeditor { background: var(--ground-2); border: 1px solid var(--hair); border-radius: 12px; padding: 14px; }
.subeditor .deps { display: flex; flex-wrap: wrap; gap: 8px; }
.depchip { background: var(--panel-2); border: 1px solid var(--hair); color: var(--muted); font-weight: 700; font-size: 13px; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.depchip.on { background: rgba(94,179,246,.16); border-color: var(--m4); color: var(--m4); }

/* ---------- activity timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.tl-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; }
.tl-item + .tl-item { border-top: 1px solid var(--hair-soft); }
.tl-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--panel-2); border: 1px solid var(--hair); color: var(--muted); }
.tl-item[data-kind="event"] .tl-dot { color: var(--green); border-color: var(--green); }
.tl-body { flex: 1; min-width: 0; }
.tl-text { font-weight: 600; font-size: 14.5px; }
.tl-meta { color: var(--faint); font-size: 12px; font-weight: 600; margin-top: 2px; }

/* sub-tasks shown in the same timeline style, with a checkbox dot */
.tl { display: flex; flex-direction: column; }
.tl .tl-item + .tl-item { border-top: 1px solid var(--hair-soft); }
.tl-item.sub { padding: 10px 4px; }
.tl-dot.check { cursor: pointer; padding: 0; font-family: inherit; font-size: 13px; transition: all .12s ease; }
.tl-dot.check:hover { border-color: var(--green); }
.tl-dot.check.done { background: var(--green); border-color: var(--green); color: #0B111C; }
.tl-dot.lock { cursor: default; }
.tl-item.sub .tl-text { font-weight: 700; font-size: 15px; }
.tl-item.sub.done .tl-text { text-decoration: line-through; text-decoration-color: var(--faint); color: var(--muted); }
.tl-item.sub .tl-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-item.sub .dep { color: var(--m4); }
.tl-item.sub .cond { color: var(--amber); }
.tl-ctrls { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.mini-ic.ghost { visibility: hidden; }
.scr-edit.on { color: var(--amber); }
h1.editable { cursor: pointer; }
h1.editable:hover { text-decoration: underline dotted var(--faint); text-underline-offset: 5px; }

.stage {
  height: 100vh;
  padding: var(--gap);
  padding: max(var(--gap), env(safe-area-inset-top)) var(--gap) max(var(--gap), env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gap);
}

/* ---------- top bar ---------- */
.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap);
}
.menu-wrap { position: relative; }
.hamburger {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--panel); border: 1px solid var(--hair); color: var(--ink);
  font-size: 19px; line-height: 1; cursor: pointer; display: none; place-items: center;
}
.hamburger:hover { border-color: var(--amber); color: var(--amber); }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 230px;
  background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 6px;
  box-shadow: 0 26px 55px -22px rgba(0,0,0,.85);
}
.menu[hidden] { display: none; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 15px;
  padding: 11px 12px; border-radius: 9px; cursor: pointer;
}
.menu-item:hover { background: var(--panel-2); }
.menu-item.danger:hover { color: var(--red); }
.menu-sep { height: 1px; background: var(--hair-soft); margin: 5px 4px; }
.menu-teams { padding: 4px; }
.menu-teams .mt-label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); padding: 6px 8px 4px; }
.mt-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.mt-row:hover { background: var(--panel-2); }
.mt-row input { accent-color: var(--amber); width: 16px; height: 16px; }
.mt-row .mt-name { flex: 1; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-row .mt-active {
  border: 1px solid var(--hair); background: var(--panel-2); color: var(--faint);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 7px; border-radius: 6px; cursor: pointer;
}
.mt-row .mt-active.on { color: var(--amber); border-color: var(--amber); }
.brand { display: flex; align-items: baseline; gap: 14px; }
.brand .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 5px rgba(245,185,66,.14);
  align-self: center;
}
.brand h1 {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 800;
  letter-spacing: .4px;
}
.brand h1.editable { cursor: pointer; }
.brand h1.editable:hover { text-decoration: underline dotted var(--faint); text-underline-offset: 4px; }
.brand .sub {
  color: var(--faint);
  font-size: clamp(11px, .95vw, 15px);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
}
.status { display: flex; gap: 10px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--hair);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: clamp(12px, 1vw, 15px);
  color: var(--muted);
  font-weight: 600;
}
.chip b { color: var(--ink); font-weight: 700; }
.chip .live { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(95,208,138,.6); animation: pulse 2.4s infinite; }
.chip.offline .live { background: var(--red); animation: none; }
.chip.offline { color: var(--red); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(95,208,138,.5); }
  70% { box-shadow: 0 0 0 8px rgba(95,208,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(95,208,138,0); }
}

/* ---------- main grid ---------- */
.grid {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr 1.15fr;
  gap: var(--gap);
  min-height: 0;
}
.panel {
  background: linear-gradient(180deg, var(--panel) 0%, var(--ground-2) 140%);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 1.5vw, 26px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel > header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.eyebrow {
  font-size: clamp(10px, .8vw, 13px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}
.count {
  font-size: clamp(11px, .9vw, 14px);
  color: var(--muted);
  font-weight: 700;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  padding: 3px 10px; border-radius: 999px;
}
.cal-head-right { display: flex; align-items: center; gap: 10px; }
.range-select {
  appearance: none; -webkit-appearance: none;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 999px;
  font: inherit; font-size: clamp(11px, .9vw, 14px); font-weight: 700;
  padding: 5px 14px; cursor: pointer;
}
.range-select:hover { border-color: var(--amber); }
.range-select:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.range-select option { background: var(--panel); color: var(--ink); }

/* ---------- NOW column ---------- */
.now { justify-content: space-between; }
.clockwrap { text-align: left; }
.clock {
  font-size: clamp(56px, 8vw, 132px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -3px;
  display: flex;
  align-items: baseline;
  gap: .1em;
}
.clock .sec {
  font-size: .34em;
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0;
}
.clock .ampm { font-size: .3em; color: var(--muted); font-weight: 700; }
.dateline {
  margin-top: 10px;
  font-size: clamp(18px, 2vw, 34px);
  font-weight: 700;
}
.dateline .wd { color: var(--amber); }
.weather {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--hair-soft);
}
.wx-temp { font-size: clamp(40px, 4vw, 66px); font-weight: 800; line-height: 1; }
.wx-emoji { font-size: clamp(38px, 4vw, 60px); line-height: 1; }
.wx-meta { color: var(--muted); font-weight: 600; font-size: clamp(12px, 1vw, 16px); }
.wx-meta b { color: var(--ink); }
.wx-row { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Agenda column ---------- */
.agenda-scroll { overflow: hidden auto; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.daygroup { }
.daylabel {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 800; letter-spacing: .5px;
  color: var(--ink);
  margin: 6px 0 8px;
}
.daylabel .badge {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ground); background: var(--amber);
  padding: 2px 8px; border-radius: 6px; font-weight: 800;
}
.daylabel .rest { color: var(--faint); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 10px; }
.daylabel .rule { flex: 1; height: 1px; background: var(--hair-soft); }
.event {
  display: grid;
  grid-template-columns: auto 4px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: clamp(9px, .9vw, 14px) 14px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--hair-soft);
  margin-bottom: 8px;
  position: relative;
}
.event .time {
  font-weight: 800; font-size: clamp(13px, 1.05vw, 17px);
  color: var(--ink); min-width: 66px;
}
.event .time small { display: block; color: var(--faint); font-weight: 700; font-size: .72em; }
.event .bar { width: 4px; align-self: stretch; border-radius: 3px; background: var(--m4); }
.event .body .t { font-weight: 700; font-size: clamp(13px, 1.05vw, 18px); }
.event .body .loc { color: var(--muted); font-size: clamp(11px, .9vw, 14px); margin-top: 2px; }
.event[data-id] { cursor: pointer; }
.event[data-id]:hover { border-color: var(--hair); }
.who { display: flex; gap: -6px; }
.avatar {
  width: clamp(24px, 2.2vw, 34px); height: clamp(24px, 2.2vw, 34px);
  border-radius: 50%; display: grid; place-items: center;
  font-size: clamp(11px, .9vw, 14px); font-weight: 800; color: #0B111C;
  border: 2px solid var(--panel); margin-left: -8px;
}
.who .avatar:first-child { margin-left: 0; }

/* ---------- Tasks column ---------- */
.tasklist { overflow: hidden auto; display: flex; flex-direction: column; gap: 9px; -webkit-overflow-scrolling: touch; }
.task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: clamp(9px, .9vw, 14px) 14px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--hair-soft);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, opacity .2s ease;
}
.task:hover { border-color: var(--hair); transform: translateX(2px); }
.task .box {
  width: clamp(20px, 1.7vw, 26px); height: clamp(20px, 1.7vw, 26px);
  border-radius: 8px; border: 2px solid var(--faint);
  display: grid; place-items: center; flex: none;
  transition: all .15s ease;
}
.task .box svg { width: 60%; height: 60%; opacity: 0; transform: scale(.5); transition: all .15s ease; }
.task .label { font-weight: 700; font-size: clamp(13px, 1.05vw, 18px); }
.task .meta { color: var(--muted); font-size: clamp(10px, .85vw, 13px); font-weight: 600; margin-top: 3px; display: flex; gap: 8px; align-items: center; }
.task .due { font-weight: 800; padding: 4px 9px; border-radius: 7px; font-size: clamp(10px, .85vw, 13px); white-space: nowrap; }
.due.today { color: var(--amber); background: rgba(245,185,66,.12); }
.due.over { color: var(--red); background: rgba(255,107,107,.12); }
.due.soon { color: var(--muted); background: var(--panel); }
.task.done { opacity: .45; }
.task.done .label { text-decoration: line-through; text-decoration-color: var(--faint); }
.task.done .box { background: var(--green); border-color: var(--green); }
.task.done .box svg { opacity: 1; transform: scale(1); }
.task .pill {
  font-size: clamp(9px, .75vw, 12px); font-weight: 800; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 6px; text-transform: uppercase;
}
.task .pill.ghost { color: var(--muted); background: rgba(255,255,255,.05); }

/* ---------- task-detail: unified tiles ---------- */
#task-tiles { margin-bottom: 16px; }
.task.parent { box-shadow: inset 3px 0 0 var(--amber); border-color: var(--hair); }
.task.status { align-items: center; }
.task .marker {
  width: clamp(20px, 1.7vw, 26px); height: clamp(20px, 1.7vw, 26px); flex: none;
  border-radius: 50%; border: 2px solid var(--faint); color: var(--muted);
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.task .marker.done { color: var(--green); border-color: var(--green); }
.task .stamp { color: var(--faint); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task .addedby { color: var(--faint); font-weight: 600; white-space: nowrap; }
.task .stamp.tag { text-transform: uppercase; letter-spacing: .8px; color: var(--amber); }
.tile-end { display: flex; align-items: center; gap: 8px; }
.tile-edit {
  flex: none; border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 8px;
  transition: color .12s ease, background .12s ease;
}
.tile-edit:hover { color: var(--amber); background: rgba(245,185,66,.12); }
.tile-add-btn { width: 100%; justify-content: center; padding: 12px; }
#msg-modal.overlay { z-index: 80; }
#msg-modal .modal h2 { margin-bottom: 18px; }
#mm-text { width: 100%; background: var(--ground-2); border: 1px solid var(--hair); color: var(--ink); border-radius: 10px; padding: 12px 14px; font-size: 16px; font-weight: 600; font-family: inherit; resize: vertical; }
#mm-text:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }

/* ---------- task detail: header details toggle ---------- */
.icon-btn {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--hair); color: var(--muted);
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.icon-btn:hover { border-color: var(--amber); color: var(--amber); }
.icon-btn.on { color: var(--amber); border-color: var(--amber); background: rgba(245,185,66,.1); }

/* ---------- task detail: message thread ---------- */
.thread { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; }
.log-divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.log-divider::before, .log-divider::after { content: ""; flex: 1; height: 1px; background: var(--hair-soft); }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg-main { flex: 1; min-width: 0; }
.msg-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: #0B111C; font-weight: 800; font-size: 15px; margin-top: 2px;
}
.bubble {
  display: inline-block; background: var(--panel-2); border: 2px solid var(--hair);
  border-radius: 4px 14px 14px 14px; padding: 10px 14px; font-weight: 600; font-size: 15px;
  line-height: 1.4; white-space: pre-wrap; word-break: break-word; max-width: 100%;
}
.toolcall {
  background: var(--ground-2); border: 1px solid var(--hair); border-radius: 10px;
  padding: 10px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px;
  overflow-wrap: anywhere; word-break: break-word;
}
.toolcall .ns { font-weight: 700; }
.toolcall .fn { color: var(--amber); font-weight: 700; }
.toolcall .pn { color: var(--faint); }
.toolcall .args { color: var(--ink); }
.toolcall .resp { margin-top: 6px; color: var(--green); font-weight: 600; }
.toolcall .resp .ar { color: var(--faint); }
.msg.done .bubble, .msg.done .toolcall { opacity: .55; }
.msg-stamp { color: var(--faint); font-weight: 700; font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--hair-soft);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.mchip .cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mchip.due.today { color: var(--amber); border-color: rgba(245,185,66,.4); }
.mchip.due.over { color: var(--red); border-color: rgba(255,107,107,.4); }
.mchip.status.on { color: var(--green); border-color: var(--green); }
.msg-actions { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.msg-check {
  width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--faint); background: none;
  color: #0B111C; font-weight: 800; font-size: 14px; cursor: pointer; display: grid; place-items: center;
  transition: all .12s ease;
}
.msg-check:hover { border-color: var(--green); }
.msg-check.done { background: var(--green); border-color: var(--green); }
/* global show/hide details — also hides the per-item edit buttons */
.hide-details .msg-chips, .hide-details .msg-stamp, .hide-details .tile-edit { display: none; }
/* desktop: center the task thread and widen it to 80% of the content area */
@media (min-width: 901px) {
  #screen-task .scr-body { max-width: 80%; margin-inline: auto; }
}

/* ---------- delete affordance ---------- */
.del {
  border: none; background: transparent; color: var(--faint);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px;
  border-radius: 8px; opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
  flex: none;
}
.event:hover .del, .task:hover .del { opacity: .6; }
.del:hover { color: var(--red); background: rgba(255,107,107,.12); opacity: 1; }
.event .del { position: absolute; top: 6px; right: 8px; }
@media (hover: none) { .del { opacity: .5; } }

/* ---------- footer legend / ticker ---------- */
.footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 10px 20px;
  box-shadow: var(--shadow);
}
.legend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.legend .who-tag { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: clamp(12px, 1vw, 15px); }
.legend .swatch { width: 12px; height: 12px; border-radius: 4px; }
.ticker { overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-block; padding-left: 100%; animation: scroll 34s linear infinite; color: var(--muted); font-weight: 600; font-size: clamp(12px, 1vw, 15px); }
.ticker-track .sep { color: var(--amber); margin: 0 14px; font-weight: 800; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.actions { display: flex; gap: 10px; }
.btn {
  border: 1px solid var(--hair); background: var(--panel-2); color: var(--ink);
  font-weight: 700; font-size: clamp(12px, 1vw, 15px);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .12s ease;
}
.btn:hover { border-color: var(--amber); color: var(--amber); }
.btn.primary { background: var(--amber); color: #0B111C; border-color: var(--amber); }
.btn.primary:hover { filter: brightness(1.08); color: #0B111C; }
.btn.danger-btn { border-color: rgba(255,107,107,.4); color: var(--red); }
.btn.danger-btn:hover { background: var(--red); border-color: var(--red); color: #0B111C; }

/* progress meter in tasks header */
.progress { display: flex; align-items: center; gap: 10px; }
.bar-track { width: clamp(70px, 8vw, 130px); height: 7px; border-radius: 4px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--hair); }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--green), #8fe6ad); border-radius: 4px; transition: width .4s ease; }

/* ---------- modal ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(6,10,18,.72);
  backdrop-filter: blur(4px); display: none; place-items: center; z-index: 50;
  padding: 16px;
}
.overlay.open { display: grid; }
.modal {
  width: min(520px, 92vw); background: var(--panel);
  border: 1px solid var(--hair); border-radius: 20px; padding: 26px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
  max-height: 92vh; overflow: auto;
}
.modal h2 { margin: 0 0 4px; font-size: 22px; }
.modal p.hint { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 7px; }
.field input, .field select {
  width: 100%; background: var(--ground-2); border: 1px solid var(--hair);
  color: var(--ink); border-radius: 10px; padding: 12px 14px; font-size: 16px; font-weight: 600;
  font-family: inherit;
}
.field input:focus, .field select:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button {
  flex: 1; min-width: 68px; padding: 10px; border-radius: 10px; border: 1px solid var(--hair);
  background: var(--ground-2); color: var(--muted); font-weight: 700; cursor: pointer; font-size: 14px;
}
.seg button.on { background: var(--amber); color: #0B111C; border-color: var(--amber); }

.empty { color: var(--faint); font-weight: 600; text-align: center; padding: 30px 0; font-size: 15px; }

/* ---------- settings button + weather city ---------- */
.chip-btn { cursor: pointer; font-family: inherit; line-height: 1; }
.chip-btn:hover { border-color: var(--amber); color: var(--amber); }
.wx-city {
  justify-self: start;
  background: var(--panel-2); border: 1px solid var(--hair-soft);
  color: var(--muted); font-weight: 700; font-size: clamp(12px, 1vw, 15px);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-family: inherit;
  margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wx-city:hover { border-color: var(--amber); color: var(--ink); }

/* ---------- feed (subscribed) events ---------- */
.event.feed { background: var(--ground-2); }
.feedpill {
  font-size: clamp(9px, .78vw, 12px); font-weight: 800; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid;
  background: rgba(255,255,255,.04); white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- settings modal ---------- */
.modal.settings { width: min(560px, 94vw); }
.settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.settings-head h2 { margin: 0; font-size: 22px; }
.settings-sec { padding: 16px 0; border-top: 1px solid var(--hair-soft); }
.settings-sec:first-of-type { border-top: none; }
.sec-head h3 { margin: 0 0 2px; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.mini-list { display: flex; flex-direction: column; gap: 7px; margin: 10px 0; }
.mini-list.results:empty { margin: 0; }
.mini-empty { color: var(--faint); font-weight: 600; font-size: 13px; padding: 8px 2px; }
.mini-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--ground-2); border: 1px solid var(--hair-soft);
  border-radius: 10px; padding: 6px 8px 6px 10px;
}
.mini-row.active { border-color: var(--amber); }
.mini-main {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  background: none; border: none; color: var(--ink); font: inherit; font-weight: 700;
  cursor: pointer; text-align: left; padding: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-main .dotmark { color: var(--amber); font-size: 12px; width: 14px; flex: none; text-align: center; }
.mini-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--hair); color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.mini-ic:hover { border-color: var(--amber); color: var(--amber); }
.mini-ic.danger:hover { border-color: var(--red); color: var(--red); }
.swatch-lg, .mini-row > .swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.addrow { display: flex; gap: 8px; margin-top: 10px; }
.addrow input {
  flex: 1; min-width: 0; background: var(--ground-2); border: 1px solid var(--hair);
  color: var(--ink); border-radius: 10px; padding: 11px 13px; font-size: 15px; font-weight: 600; font-family: inherit;
}
.addrow input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.addrow .btn { flex: none; }

/* toggle switch */
.tgl { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.tgl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tgl-track {
  width: 40px; height: 23px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--hair); position: relative; transition: background .15s ease, border-color .15s ease;
}
.tgl-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--faint); transition: transform .15s ease, background .15s ease;
}
.tgl input:checked + .tgl-track { background: rgba(95,208,138,.25); border-color: var(--green); }
.tgl input:checked + .tgl-track::after { transform: translateX(17px); background: var(--green); }

/* ---------- auth pages (login / invite) ---------- */
.auth-body { display: grid; place-items: center; min-height: 100vh; overflow: auto; padding: 24px; }
.auth-card {
  width: min(400px, 94vw); background: var(--panel);
  border: 1px solid var(--hair); border-radius: 20px; padding: 30px 28px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
}
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .4px; }
.auth-brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(245,185,66,.14); }
.auth-sub { color: var(--muted); font-weight: 600; margin: 8px 0 22px; font-size: 15px; }
.auth-submit { width: 100%; justify-content: center; padding: 13px; margin-top: 4px; font-size: 15px; }
.auth-err { color: var(--red); font-weight: 700; font-size: 13.5px; min-height: 18px; margin: 4px 0 10px; }

/* ---------- admin (users & teams) ---------- */
.role-tag { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.role-tag.admin { color: var(--amber); background: rgba(245,185,66,.14); }
.role-tag.member { color: var(--muted); background: var(--panel-2); }
.status-tag { font-size: 10px; font-weight: 700; color: var(--faint); }
.status-tag.invited { color: var(--m4); }
.mini-sub { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mini-sub .row1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mini-sub .row1 .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-sub .row2 { color: var(--faint); font-size: 11px; font-weight: 600; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn {
  border: 1px solid var(--hair); background: var(--panel-2); color: var(--m4);
  font-weight: 700; font-size: 11px; padding: 5px 9px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.link-btn:hover { border-color: var(--m4); }
.link-btn.copied { color: var(--green); border-color: var(--green); }
.addrow select {
  background: var(--ground-2); border: 1px solid var(--hair); color: var(--ink);
  border-radius: 10px; padding: 11px 12px; font: inherit; font-weight: 600; font-size: 14px;
}
.admin-note { color: var(--faint); font-size: 12px; margin-top: 8px; }
.team-card { border: 1px solid var(--hair); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: rgba(255,255,255,.015); }
.team-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.team-card-head .tc-name { flex: 1; font-weight: 800; font-size: 15px; }
.tc-invite { margin-top: 10px; }
.tc-invite .inv-username { flex: 1; min-width: 0; }
.tc-invite select { background: var(--ground-2); border: 1px solid var(--hair); color: var(--ink); border-radius: 10px; padding: 0 10px; font: inherit; font-weight: 600; font-size: 14px; }
.acct-edit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair-soft); }
.acct-edit .addrow { margin-top: 0; }
.acct-sep { height: 1px; background: var(--hair-soft); margin: 14px 0; }

@media (max-width: 900px) {
  .app { display: block; height: auto; overflow: visible; }
  .main { height: auto; overflow: visible; }
  body { overflow: auto; font-size: 20px; }  /* 20px floor for any inherited text */
  .hamburger { display: grid; }
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100%; width: 84vw; max-width: 300px;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  body.drawer-open .sidebar { transform: none; }
  .sb-close { display: block; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(6,10,18,.6);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 65;
  }
  body.drawer-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  .grid { grid-template-columns: 1fr; grid-auto-rows: minmax(0, auto); overflow: visible; }
  .stage { height: auto; min-height: 100vh; min-height: 100dvh; }
  .agenda-scroll, .tasklist { overflow: visible; }
  .topbar { grid-template-columns: auto 1fr; }
  .status { grid-column: 1 / -1; flex-wrap: wrap; }
  .footer { grid-template-columns: 1fr; gap: 12px; border-radius: 20px; }
  .ticker { display: none; }
  .actions { justify-content: stretch; }
  .actions .btn { flex: 1; justify-content: center; padding: 12px; }
  .scr-body { padding: 16px; }

  /* keyboard-safe modals: top-align and cap to the visible viewport (--app-vh is
     kept in sync with window.visualViewport, which shrinks when the keyboard
     opens) so fields stay reachable above the keyboard and scroll internally. */
  .overlay { align-items: flex-start; }
  .overlay.open { height: var(--app-vh, 100dvh); bottom: auto; }
  .modal { max-height: calc(var(--app-vh, 100dvh) - 28px); }

  /* Minimum readable font size on phones/tablets: floor every text element at
     20px. Genuinely large display text (clock, weather temp, headings ≥20px)
     is left untouched; proportional/relative bits use max() so they keep
     scaling but never drop below 20px. */
  .sb-brand, .sb-close, .sb-group-h, .sb-link, .sb-add, .scr-back, .scr-edit,
  .person-user, .subchip, .subtask .box.locked, .sub-body .label, .sub-body .meta,
  .depchip, .tl-dot, .tl-text, .tl-meta, .tl-dot.check, .tl-item.sub .tl-text,
  .hamburger, .menu-item, .menu-teams .mt-label, .mt-row .mt-name, .mt-row .mt-active,
  .brand .sub, .chip, .eyebrow, .count, .range-select, .wx-meta,
  .daylabel, .daylabel .badge, .daylabel .rest,
  .event .time, .event .body .t, .event .body .loc, .avatar,
  .task .label, .task .meta, .task .due, .task .pill, .task .marker, .del, .tile-edit,
  .bubble, .toolcall, .msg-stamp, .mchip, .msg-avatar, .msg-check, #mm-text, .log-divider,
  .legend .who-tag, .ticker-track, .btn, .wx-city, .feedpill,
  .modal p.hint, .field label, .field input, .field select, .seg button, .empty,
  .sec-head h3, .mini-empty, .mini-main .dotmark, .mini-ic, .addrow input, .addrow select,
  .auth-sub, .auth-submit, .auth-err, .role-tag, .status-tag,
  .mini-sub .row2, .link-btn, .admin-note, .team-card-head .tc-name, .tc-invite select {
    font-size: 20px;
  }
  .brand h1 { font-size: max(20px, clamp(18px, 1.8vw, 30px)); }
  .dateline { font-size: max(20px, clamp(18px, 2vw, 34px)); }
  .clock .sec { font-size: max(20px, .34em); }
  .clock .ampm { font-size: max(20px, .3em); }
  .event .time small { font-size: max(20px, .72em); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; padding-left: 0; }
  .chip .live { animation: none; }
}