:root {
  --accent: #e8b34b;
  --bg-top: #0f1420;
  --bg-bottom: #1d2433;
  --ink: 255, 255, 255;   /* rgb triplet behind every fill/border/text alpha */
  --paper: 20, 25, 37;    /* rgb triplet behind menus, inputs, panels */
  --wfg: #fff;            /* "white" foreground accents */
  --text: rgba(var(--ink), 0.92);
  --text-dim: rgba(var(--ink), 0.55);
  --cell: rgba(var(--ink), 0.05);
  --cell-border: rgba(var(--ink), 0.11);
}

/* light mode, same alphas, inverted inks (Settings → Mode).
   The derived vars must be re-declared here: custom properties resolve their
   var()s where they're DECLARED, so :root's --text would keep the dark ink. */
body.light {
  --ink: 22, 30, 42;
  --paper: 246, 249, 252;
  --wfg: #1a2330;
  /* --bg-top/--bg-bottom come from the light THEME (set inline by applyBg) */
  --text: rgba(var(--ink), 0.92);
  --text-dim: rgba(var(--ink), 0.58);
  --cell: rgba(var(--ink), 0.05);
  --cell-border: rgba(var(--ink), 0.13);
}
body.light #hand-h, body.light #hand-m { stroke: #22304a; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

input, textarea { user-select: text; }

/* ---------- background layers ---------- */
#bg, #bg-img, #bg-scrim {
  position: fixed;
  inset: 0;
  z-index: -3;
}
#bg { background: linear-gradient(160deg, var(--bg-top), var(--bg-bottom)); }
#bg-img {
  z-index: -2;
  background-size: cover;
  background-position: center;
  display: none;
}
#bg-scrim {
  z-index: -1;
  background: linear-gradient(160deg, rgba(10, 14, 22, 0.72), rgba(10, 14, 22, 0.5));
  display: none;
}
body.has-image #bg-img, body.has-image #bg-scrim { display: block; }

/* ---------- layout ---------- */
#layout {
  display: flex;
  align-items: center;
  gap: 4vw;
  height: 100vh;
  padding: 6vh 5vw;
}
#layout.flip { flex-direction: row-reverse; }

/* ---------- hero (side column) ---------- */
#hero {
  flex: 1 1 32%;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#time {
  font-size: clamp(64px, 7.5vw, 118px);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
}

#date-line {
  margin-top: 10px;
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 300;
  color: var(--text-dim);
}

.glass {
  background: rgba(var(--paper), 0.55);
  border: 1px solid rgba(var(--ink), 0.08);
  border-radius: 14px;
  backdrop-filter: blur(14px);
}

.glass .label,
#up-next .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

#up-next {
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  max-width: 420px;
}
#up-next-title { font-size: 18px; font-weight: 500; }
#up-next-when { font-size: 13px; color: var(--text-dim); margin-top: 3px; }

#weather {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 18px;
  max-width: 420px;
  font-size: 15px;
}
#weather.hidden { display: none; }
#weather-icon { font-size: 20px; }
#weather-temp { font-size: 22px; font-weight: 500; }
#weather-range { font-size: 13px; color: var(--text-dim); }

#countdown {
  font-size: 13.5px;
  color: var(--text-dim);
  padding-left: 4px;
}
#countdown.hidden { display: none; }
#countdown b { color: var(--accent); font-weight: 600; }

#timer-card { padding: 14px 18px; max-width: 420px; }
#timer-idle { display: flex; flex-direction: column; gap: 8px; }
.timer-row { display: flex; align-items: center; gap: 6px; }
.tunit { font-size: 12px; color: var(--text-dim); margin-right: 5px; }
#timer-idle.hidden, #timer-run.hidden { display: none; }
.tpre, #timer-start, #timer-pause {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 6px 11px;
  cursor: pointer;
}
.tpre:hover, #timer-start:hover, #timer-pause:hover { background: rgba(var(--ink), 0.15); }
#timer-start { background: var(--accent); border-color: var(--accent); color: #14181f; font-weight: 600; }
#timer-idle input.tval {
  width: 40px;
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  font-size: 13px;
  padding: 6px 0;
}
#timer-idle input.tval:focus { border-color: var(--accent); }
#timer-run { display: flex; align-items: center; gap: 12px; }
#timer-left {
  font-size: 30px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  min-width: 108px;
}
#timer-card.done #timer-left { color: var(--accent); animation: timer-flash 0.8s steps(1) infinite; }
@keyframes timer-flash { 50% { opacity: 0.25; } }
#timer-reset {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
}
#timer-reset:hover { color: #ff7a7a; }

#hint {
  font-size: 12.5px;
  color: rgba(var(--ink), 0.35);
}

/* clock styles */
#analog { display: none; margin-bottom: 6px; }
body[data-clock="analog"] #analog { display: block; }
body[data-clock="analog"] #time { display: none; }
body[data-clock="minimal"] #clock { display: flex; align-items: baseline; gap: 12px; }
body[data-clock="minimal"] #time { font-size: 26px; font-weight: 500; letter-spacing: 0; }
body[data-clock="minimal"] #date-line { margin-top: 0; font-size: 15px; }
body[data-clock="minimal"] #media { width: 100%; margin-top: 0; }
body[data-clock="hidden"] #clock { display: none; }

/* weather effects overlay */
#fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#fx.hidden { display: none; }
#layout, #settings-btn { position: relative; z-index: 1; }
#settings-btn { position: fixed; }

/* locked panel mode (secondary monitors) */
.locked #hero, .locked #settings-btn, .locked #view-toggle, .locked #search-btn, .locked #search-in,
.locked #search-clear, .locked #type-filter, .locked #sync-dot, .locked #undo-toast { display: none !important; }
.locked #layout { gap: 0; }
.locked #cal { flex: 1 1 100%; }
#media {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-dim);
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#media.hidden { display: none; }
#media-title { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#media button {
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  flex: none;
}
#media button:hover { color: var(--text); }

/* quick add */
#qa-box { max-width: 420px; }
#qa-in {
  width: 100%;
  background: rgba(var(--paper), 0.55);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 10px 13px;
  outline: none;
  backdrop-filter: blur(14px);
}
#qa-in:focus { border-color: var(--accent); }
#qa-status {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 5px;
  padding-left: 3px;
  min-height: 15px;
}

/* habits */
#habits-card { padding: 14px 18px; max-width: 420px; }
#habit-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.habit-row { display: flex; align-items: center; gap: 9px; }
.habit-name {
  flex: 1;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.habit-dots { display: flex; gap: 4px; }
.hdot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(var(--ink), 0.25);
  background: transparent;
  padding: 0;
  cursor: default;
}
.hdot.on { background: var(--accent); border-color: var(--accent); }
.hdot.today { cursor: pointer; border-color: rgba(var(--ink), 0.55); }
.hdot.today:hover { border-color: var(--accent); }
.habit-streak { font-size: 12px; min-width: 34px; text-align: right; }
.habit-del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  padding: 0 2px;
}
.habit-del:hover { color: #ff7a7a; }
#habit-addrow { display: flex; gap: 6px; }
#habit-in {
  flex: 1;
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 10px;
  outline: none;
}
#habit-in:focus { border-color: var(--accent); }
#habit-add {
  background: rgba(var(--ink), 0.08);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  width: 32px;
  cursor: pointer;
}
#habit-add:hover { background: rgba(var(--ink), 0.16); }

/* ---------- calendar ---------- */
#cal {
  flex: 1 1 62%;
  display: flex;
  flex-direction: column;
  height: 86vh;
  min-width: 520px;
}

#cal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

#month-label {
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 300;
  letter-spacing: 0.01em;
}

#head-right { display: flex; align-items: center; gap: 12px; }

#search-btn {
  background: var(--cell);
  border: 1px solid var(--cell-border);
  border-radius: 8px;
  font-size: 14px;
  height: 32px;
  min-width: 36px;
  cursor: pointer;
  filter: grayscale(1) brightness(1.6);
}
#search-btn:hover { background: rgba(var(--ink), 0.12); }
#search-clear {
  background: var(--cell);
  border: 1px solid var(--cell-border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 16px;
  height: 32px;
  min-width: 30px;
  cursor: pointer;
}
#search-clear:hover { color: var(--text); background: rgba(var(--ink), 0.12); }
#search-clear.hidden { display: none; }
#search-in {
  width: 220px;
  background: rgba(var(--paper), 0.7);
  border: 1px solid rgba(var(--ink), 0.14);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 7px 11px;
  outline: none;
}
#search-in:focus { border-color: var(--accent); }
#search-in.hidden { display: none; }

#view-toggle {
  display: flex;
  background: var(--cell);
  border: 1px solid var(--cell-border);
  border-radius: 8px;
  overflow: hidden;
}
#view-toggle button {
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  padding: 7px 13px;
  cursor: pointer;
}
#view-toggle button:hover { color: var(--text); }
#view-toggle button.sel {
  background: rgba(var(--ink), 0.14);
  color: var(--text);
  font-weight: 600;
}

#nav { display: flex; gap: 8px; }
#nav button {
  background: var(--cell);
  border: 1px solid var(--cell-border);
  color: var(--text);
  border-radius: 8px;
  min-width: 36px;
  height: 32px;
  padding: 0 12px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
#nav button:hover { background: rgba(var(--ink), 0.12); }
#today-btn { font-size: 13px !important; }
#today-btn.away {
  background: var(--accent);
  border-color: var(--accent);
  color: #14181f;
  font-weight: 600;
}

#weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
#weekdays div {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-left: 10px;
  transition: color 0.12s;
}
#weekdays div.collite { color: var(--accent); }
#weekdays.hidden { display: none; }

#grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
  min-height: 0;
}
#grid.week { grid-template-rows: 1fr; }

.cell {
  background: var(--cell);
  border: 1px solid var(--cell-border);
  border-radius: 10px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cell:hover,
.cell.hover {
  background: rgba(var(--ink), 0.16);
  border-color: rgba(var(--ink), 0.45);
  box-shadow: 0 0 14px -4px rgba(var(--ink), 0.25);
}
.cell.rowlite {
  background: rgba(var(--ink), 0.09);
  border-color: rgba(var(--ink), 0.16);
}
.cell.out { opacity: 0.35; }
.cell.today {
  border-color: var(--accent);
  box-shadow: 0 0 18px -6px var(--accent), inset 0 0 22px -14px var(--accent);
}

.num { font-size: 15px; font-weight: 600; color: rgba(var(--ink), 0.8); }
.cell:hover .num, .cell.hover .num { color: var(--wfg); }
.cell.today .num { color: var(--accent); font-weight: 700; }

/* week view columns */
.cell.wk { gap: 5px; }
.wkhead { display: flex; flex-direction: column; margin-bottom: 4px; }
.wkhead .wkday {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.wkhead .wknum { font-size: 22px; font-weight: 300; }
.cell.today .wknum { color: var(--accent); font-weight: 500; }

.chip {
  --c: var(--accent);
  font-size: 11px;
  line-height: 1.25;
  padding: 2px 6px 2px 7px;
  border-radius: 5px;
  border-left: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 26%, transparent);
  color: var(--wfg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.chip .t { opacity: 0.75; font-size: 10px; margin-right: 4px; }
.chip-cat {
  margin-left: 5px; font-size: 9.5px; opacity: 0.85;
  background: rgba(0, 0, 0, 0.22); border-radius: 3px; padding: 0 4px; vertical-align: 1px;
}
.chip.ics {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-left: 3px solid var(--c);
  cursor: default;
}
.cell.wk .chip { font-size: 12px; padding: 4px 8px; white-space: normal; }

.rep-mark { margin-left: 4px; opacity: 0.65; font-size: 10px; }
.chip.done { opacity: 0.55; text-decoration: line-through; }
.joinb {
  margin-left: 5px;
  color: var(--c);
  font-size: 9px;
  cursor: pointer;
  filter: brightness(1.4);
}
.joinb:hover { filter: brightness(2); }
#event-list .joinbtn {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--wfg);
  font: inherit;
  font-size: 11.5px;
  padding: 3px 9px;
  cursor: pointer;
  flex-shrink: 0;
}
#event-list .joinbtn:hover { background: var(--accent); color: #14181f; }

.more {
  font-size: 10.5px;
  color: var(--text-dim);
  padding-left: 3px;
}

/* agenda view */
/* ---------- time grid (day & week) ---------- */
#grid.tg { display: flex; flex-direction: column; min-height: 0; }
.tg-head { display: grid; gap: 0 6px; margin-bottom: 4px; flex: none; }
.tg-hcell {
  border-radius: 8px;
  padding: 4px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 46px;
  cursor: pointer;
}
.tg-hcell:hover, .tg-hcell.droptarget { background: rgba(var(--ink), 0.06); }
.tg-dname { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.tg-hcell.today .tg-dname { color: var(--accent); font-weight: 600; }
.tg-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid rgba(var(--ink), 0.1);
  scrollbar-width: thin;
}
.tg-body { display: grid; gap: 0 6px; position: relative; height: 1152px; /* 24 × 48px */ }
.tg-gutter { position: relative; }
.tg-hlabel {
  height: 48px;
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
  padding-right: 8px;
  transform: translateY(-7px);
  user-select: none;
}
.tg-col { position: relative; background: rgba(var(--ink), 0.025); border-radius: 0 0 8px 8px; }
.tg-col.today { background: rgba(var(--ink), 0.055); }
.tg-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(var(--ink), 0.07); pointer-events: none; }
.tg-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #e5484d;
  box-shadow: 0 0 6px rgba(229, 72, 77, 0.8);
  z-index: 3;
  pointer-events: none;
}
.tgev {
  position: absolute;
  --c: var(--accent);
  background: color-mix(in srgb, var(--c) 32%, rgba(var(--paper), 0.55));
  border-left: 3px solid var(--c);
  border-radius: 6px;
  padding: 3px 7px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  z-index: 2;
  font-size: 11px;
  color: var(--wfg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  min-height: 12px;
}
.tgev.dragging { opacity: 0.85; z-index: 5; cursor: grabbing; }
.tgev.ro {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-left: 3px solid var(--c);
  cursor: default;
}
.tgev.done { opacity: 0.55; text-decoration: line-through; }
.tgev-t { font-size: 9.5px; opacity: 0.75; line-height: 1.2; }
.tgev-n { line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tgev-rz { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.tg-col.droptarget { outline: 2px dashed var(--accent); outline-offset: -2px; }

#grid.agenda { display: flex; flex-direction: column; gap: 8px; }
.cell.ag {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  padding: 10px 14px;
}
.ag .agdate { width: 122px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.cell.ag.today .agdate { color: var(--accent); }
.agchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.agchips .chip { font-size: 12px; padding: 3px 8px; }
.ag-empty { color: var(--text-dim); font-size: 14px; padding: 22px 6px; }

/* notes view */
#grid.notesv {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
}
.notes-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
#note-add {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #14181f;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.todo-col {
  background: var(--cell);
  border: 1px solid var(--cell-border);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-y: auto;
}
.todo-add { display: flex; gap: 6px; margin-bottom: 10px; }
#todo-in {
  flex: 1;
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
}
#todo-in:focus { border-color: var(--accent); }
#todo-addbtn {
  background: rgba(var(--ink), 0.08);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  width: 34px;
  cursor: pointer;
}
.todo-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(var(--ink), 0.05);
  font-size: 13.5px;
}
.todo-row .chk {
  background: none;
  border: 1px solid var(--text-dim);
  border-radius: 5px;
  width: 18px;
  height: 18px;
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.todo-row .chk.on { border-color: var(--accent); }
.todo-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.todo-row.done .todo-text { text-decoration: line-through; opacity: 0.5; }
.todo-row .del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
}
.todo-row .del:hover { color: #ff7a7a; }
.notes-board { min-width: 0; overflow-y: auto; }
.notes-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.note {
  --c: var(--accent);
  background: color-mix(in srgb, var(--c) 13%, rgba(var(--paper), 0.6));
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-top: 3px solid var(--c);
  border-radius: 10px;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}
.note textarea {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 90px;
}
.note-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.note-color {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: none;
  background: var(--c);
  cursor: pointer;
  padding: 0;
}
.note-date { flex: 1; font-size: 11px; color: var(--text-dim); }
.note .del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
}
.note .del:hover { color: #ff7a7a; }

/* templates */
#tpl-row { display: flex; flex-wrap: wrap; gap: 6px; }
#tpl-row:empty { display: none; }
.tpl-chip {
  --c: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--c) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 12px;
  color: var(--wfg);
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}
.tpl-x { opacity: 0.6; font-size: 13px; }
.tpl-x:hover { opacity: 1; color: #ff7a7a; }
.tpl-save {
  background: none;
  border: 1px dashed rgba(var(--ink), 0.25);
  border-radius: 12px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}
.tpl-save:hover { color: var(--text); border-color: var(--accent); }

/* multi-day span row */
#span-row { display: flex; align-items: center; gap: 8px; }
#span-row.hidden { display: none; }
#span-days {
  width: 48px;
  background: rgba(var(--ink), 0.07) !important;
  border: 1px solid rgba(var(--ink), 0.12) !important;
  border-radius: 7px !important;
  font-size: 14px;
  padding: 5px 0;
}
#span-days:focus { border-color: var(--accent) !important; }

/* settings tabs */
#set-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: rgba(var(--ink), 0.05);
  border-radius: 9px;
  padding: 3px;
}
.stab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  padding: 7px 0;
  cursor: pointer;
}
.stab:hover { color: var(--text); }
.stab.sel { background: rgba(var(--ink), 0.12); color: var(--text); font-weight: 600; }
#tab-main { display: flex; flex-direction: column; gap: 14px; }
#tab-main.hidden, #tab-keys.hidden, #tab-guide.hidden { display: none; }
#tab-keys, #tab-guide { display: flex; flex-direction: column; gap: 9px; }
.guide-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
}
.guide-item {
  background: rgba(var(--ink), 0.04);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.5px;
}
.guide-item b { display: block; font-weight: 600; margin-bottom: 2px; }
.guide-item span { color: var(--text-dim); line-height: 1.45; }

/* type visibility toggles */
/* type filter pills — live above the calendar grid, not in settings */
/* categories (left) and type toggles (right) share one row above the grid */
#filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 8px; }
#type-filter { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; margin-left: auto; }
#type-filter button {
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 12px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  opacity: 0.6;
}
#type-filter button.on {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: var(--accent);
  color: var(--text);
  opacity: 1;
}
#hide-desktop { margin-left: 14px; }
#hide-desktop.hidden { display: none; }

/* chime + volume */
#chime-btns, #vol-btns { display: flex; gap: 4px; }
#chime-btns button, #vol-btns button {
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 7px;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}
#chime-btns button.sel, #vol-btns button.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #14181f;
  font-weight: 600;
}
#fx-toggle {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
}
#fx-toggle.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #14181f;
  font-weight: 600;
}

/* holiday chips */
.chip.ics[data-hol], .chip.holiday { border-style: dotted; }

/* settings extras */
#clock-btns, #edstyle-btns, #corner-btns { display: flex; gap: 6px; }
#prio-btns, #mode-btns { display: flex; gap: 4px; }
#prio-btns button,
#mode-btns button,
#edstyle-btns button,
#corner-btns button,
#clock-btns button {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
}
#prio-btns button.sel,
#mode-btns button.sel,
#edstyle-btns button.sel,
#corner-btns button.sel,
#clock-btns button.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #14181f;
  font-weight: 600;
}
#sound-toggle, #brief-toggle {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
}
#sound-toggle.on, #brief-toggle.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #14181f;
  font-weight: 600;
}
#brief-time { width: 56px; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 7px !important; font-size: 13px; padding: 5px 0; }

/* onboarding */
#onboard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(6, 9, 14, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#onboard-backdrop.hidden { display: none; }
#onboard {
  width: 420px;
  max-width: 90vw;
  padding: 26px 28px;
  background: rgba(var(--paper), 0.95);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.85);
}
#ob-title { font-size: 20px; font-weight: 500; margin-bottom: 10px; }
#ob-body { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin-bottom: 18px; }
#ob-next {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #14181f;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  cursor: pointer;
}

/* year view */
#grid.year {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
}
.mini {
  background: var(--cell);
  border: 1px solid var(--cell-border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s;
}
.mini:hover { background: rgba(var(--ink), 0.1); }
.mini.cur { border-color: var(--accent); }
.mini-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-dim); }
.mini.cur .mini-title { color: var(--accent); }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-day {
  font-size: 10px;
  text-align: center;
  color: var(--text-dim);
  border-radius: 4px;
  padding: 1px 0;
}
.mini-day.has { color: var(--wfg); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.mini-day.today { background: var(--accent); color: #14181f; font-weight: 700; }

/* ---------- shared overlay panels ---------- */
#editor-backdrop, #settings-backdrop, #notes-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(6, 9, 14, 0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#editor-backdrop.hidden, #settings-backdrop.hidden, #notes-backdrop.hidden { display: none; }

/* shared-calendar notes panel */
#snotes {
  width: 460px; max-width: 92vw; max-height: 82vh;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px;
  background: rgba(var(--paper), 0.92);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.8);
  animation: pop 0.16s ease-out;
}
#snotes-head { display: flex; align-items: center; justify-content: space-between; }
#snotes-title { font-size: 16px; font-weight: 600; }
#snotes-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#snotes-close:hover { color: var(--text); }
#snotes-sub { font-size: 12px; color: var(--text-dim); margin: -2px 0 0; }
#snotes-text {
  width: 100%; min-height: 300px; resize: none; flex: 1;
  background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; line-height: 1.5;
  padding: 12px 14px; outline: none;
}
#snotes-text:focus { border-color: var(--accent); }
#snotes-foot { min-height: 16px; }
#snotes-status { font-size: 12px; color: var(--accent); }

/* shared-tab dropdown caret + its menu */
.cal-tab-menu {
  background: none; border: none; color: var(--text-dim);
  font-size: 11px; cursor: pointer; padding: 2px 6px; margin-left: -4px; align-self: center;
}
.cal-tab-menu:hover { color: var(--text); }
.cal-menu {
  position: fixed; z-index: 30; min-width: 150px;
  background: rgba(var(--paper), 0.97); border: 1px solid rgba(var(--ink), 0.15);
  border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  padding: 5px; animation: pop 0.12s ease-out;
}
.cal-menu-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); font: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
}
.cal-menu-item:hover { background: rgba(var(--ink), 0.1); }

#editor { position: relative; }
#editor, #settings {
  width: 370px;
  max-width: 92vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: rgba(var(--paper), 0.9);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.8);
  animation: pop 0.16s ease-out;
  overflow-y: auto;
}
@keyframes pop {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

#layout-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.layout-chip { display: inline-flex; align-items: center; background: rgba(var(--ink), 0.08); border-radius: 6px; overflow: hidden; }
.layout-chip button { background: none; border: none; color: var(--text); padding: 4px 8px; cursor: pointer; font-size: 13px; }
.layout-chip button:hover { background: rgba(var(--ink), 0.06); }
.layout-chip .layout-del { padding: 4px 7px; color: var(--text-dim); }
.layout-chip .layout-del:hover { color: #ff6b6b; background: none; }
#layout-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#layout-name { width: 120px; }

#editor-head, #settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
#editor-date, #settings-head h2 { font-size: 18px; font-weight: 500; }
#editor-close, #settings-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
#editor-close:hover, #settings-close:hover { color: var(--wfg); }

#event-list {
  list-style: none;
  overflow-y: auto;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  max-height: 30vh;
}
#event-list:empty { display: none; }
#event-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(var(--ink), 0.05);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  cursor: pointer;
  border: 1px solid transparent;
}
#event-list li:hover { background: rgba(var(--ink), 0.09); }
#event-list li.editing { border-color: var(--accent); }
#event-list li.ro { cursor: default; }
#event-list .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
#event-list .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#event-list .when { color: var(--text-dim); font-size: 12px; flex-shrink: 0; }
#event-list .del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 17px;
  cursor: pointer;
  padding: 0 3px;
  flex-shrink: 0;
}
#event-list .del:hover { color: #ff7a7a; }
#event-list .chk {
  background: none;
  border: 1px solid var(--text-dim);
  border-radius: 5px;
  width: 18px;
  height: 18px;
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
#event-list .chk.on { border-color: var(--accent); }
#event-list li.done-ev .title { text-decoration: line-through; opacity: 0.6; }

#event-form { display: flex; flex-direction: column; gap: 10px; }
#event-form input[type="text"] {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  outline: none;
}
#event-form input:focus { border-color: var(--accent); }
#ev-title { width: 100%; }

/* custom time picker — plain buttons so it works with forwarded wallpaper clicks */
#time-picker { display: flex; align-items: center; min-height: 32px; }
#time-add {
  width: 100%;
  background: rgba(var(--ink), 0.05);
  border: 1px dashed rgba(var(--ink), 0.22);
  border-radius: 8px;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
}
#time-add:hover { color: var(--text); border-color: var(--accent); }
#time-add.hidden, #time-controls.hidden { display: none; }
#time-controls { display: flex; align-items: center; gap: 8px; width: 100%; }
.tfield {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 6px;
  outline: none;
}
.tfield:focus { border-color: var(--accent); }
.tdash { color: var(--text-dim); }
#time-dd, #search-dd {
  position: fixed; /* viewport-anchored — the editor panel can't clip it */
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(var(--paper), 0.98);
  border: 1px solid rgba(var(--ink), 0.14);
  border-radius: 9px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.8);
}
#time-dd.hidden, #search-dd.hidden { display: none; }

/* Ctrl+Shift+right-click menu — body-level like the dropdowns (never inside .glass) */
#ctx-menu {
  position: fixed;
  z-index: 30;
  min-width: 175px;
  background: rgba(var(--paper), 0.98);
  border: 1px solid rgba(var(--ink), 0.14);
  border-radius: 9px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.8);
}
#ctx-menu.hidden { display: none; }
.ctx-item {
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ctx-item:hover { background: rgba(var(--ink), 0.1); }

/* storage-offline warning (engine handshake failed this session) */
#storage-offline {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 640px;
  background: rgba(120, 30, 30, 0.95);
  border: 1px solid rgba(255, 120, 120, 0.6);
  border-radius: 10px;
  color: #ffe0e0;
  font-size: 13px;
  padding: 10px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* undo toast */
#undo-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(var(--paper), 0.97);
  border: 1px solid rgba(var(--ink), 0.16);
  border-radius: 999px;
  padding: 9px 10px 9px 18px;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
#undo-toast.hidden { display: none; }
#undo-btn {
  background: var(--accent);
  border: none;
  border-radius: 999px;
  color: #14181f;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
}

/* pinned countdown tiles */
#pins { display: flex; flex-direction: column; gap: 8px; }
#pins.hidden { display: none; }
.pin-tile {
  --c: var(--accent);
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.12);
  border-left: 3px solid var(--c);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
}
.pin-tile:hover { background: rgba(var(--ink), 0.09); }
.pin-n { font-size: 26px; font-weight: 300; color: var(--c); filter: brightness(1.15); min-width: 34px; }
.pin-l { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pro tag + license */
.pro-tag {
  display: inline-block;
  background: var(--accent);
  color: #14181f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 1.5px 5px;
  vertical-align: 2px;
}
#lic-row.hidden { display: none; }
body.pro .pro-tag, body.pro .free-hint { display: none; } /* you bought it, stop selling it */
#lic-buy { background: var(--accent) !important; border-color: var(--accent) !important; color: #14181f !important; font-weight: 600; }
#lic-buy.hidden { display: none; }

/* Google sync health dot */
#sync-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #6fbf85;
  cursor: pointer;
  flex: none;
}
#sync-dot.err { background: #e5b34b; box-shadow: 0 0 6px #e5b34b; }
#sync-dot.hidden { display: none; }
.dd-item {
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.dd-item:hover { background: rgba(var(--ink), 0.1); }
.dd-item.sel { background: var(--accent); color: #14181f; font-weight: 600; }
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 9px;
  padding: 3px 5px;
}
.slot-b {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 3px 12px;
}
.slot-b:hover { color: var(--accent); }
input.tval {
  text-align: center;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.slot input.tval { width: 42px; font-size: 18px; padding: 1px 0; }
input.tval:focus { color: var(--accent); }
#ampm {
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  width: 42px;
}
#ampm:hover { color: var(--accent); }
.colon { color: var(--text-dim); font-size: 18px; }

/* repeat + event-type pickers */
#repeat-row, #alert-row, #type-row { display: flex; gap: 5px; }
.rep, .alt, .etype {
  flex: 1;
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 8px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  padding: 7px 0;
  cursor: pointer;
}
.rep:hover, .alt:hover, .etype:hover { color: var(--text); background: rgba(var(--ink), 0.12); }
.rep.sel, .alt.sel, .etype.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #14181f;
  font-weight: 600;
}
/* top category bar (all categories for the current tab; click to filter) */
#cat-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#cat-bar.hidden { display: none; }
.cat-pill {
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 20px;
  color: var(--text-dim);
  font: inherit; font-size: 12px;
  padding: 4px 12px; cursor: pointer;
}
.cat-pill:hover { color: var(--text); }
.cat-pill.on { background: rgba(var(--ink), 0.12); border-color: var(--accent); color: var(--wfg); }

/* custom categories row (below the built-in types) */
#custom-type-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
#custom-type-row:empty { display: none; }
.etype.custom { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 7px 9px; }
.etype-x { color: var(--text-dim); font-size: 13px; line-height: 1; }
.etype.custom:hover .etype-x { color: var(--wfg); }
.etype.custom.sel .etype-x { color: #14181f; }
#type-add {
  flex: 0 0 auto; background: rgba(var(--ink), 0.05);
  border: 1px dashed rgba(var(--ink), 0.22); border-radius: 8px;
  color: var(--text-dim); font: inherit; font-size: 15px; line-height: 1;
  padding: 6px 11px; cursor: pointer;
}
#type-add:hover { color: var(--text); border-color: var(--accent); }
#type-add-in {
  flex: 0 0 auto; width: 128px; background: rgba(var(--ink), 0.07);
  border: 1px solid var(--accent); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 12px; padding: 6px 9px; outline: none;
}
#type-add-ok {
  flex: 0 0 auto; background: var(--accent); color: #14181f;
  border: none; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 10px; cursor: pointer; line-height: 1;
}
.cat-tag {
  display: inline-block; margin-left: 7px; font-size: 10.5px;
  color: var(--text-dim); background: rgba(var(--ink), 0.1);
  border-radius: 4px; padding: 1px 6px; vertical-align: 1px;
}

#repeat-opts { display: flex; align-items: center; gap: 8px; }
#repeat-opts.hidden { display: none; }
.rep-lbl { font-size: 13px; color: var(--text-dim); }
#rep-count, #rem-mins {
  width: 48px;
  background: rgba(var(--ink), 0.07) !important;
  border: 1px solid rgba(var(--ink), 0.12) !important;
  border-radius: 7px !important;
  font-size: 14px;
  padding: 5px 0;
}
#rep-count:focus, #rem-mins:focus { border-color: var(--accent) !important; }
#rep-count::placeholder { color: var(--text-dim); }
#skip-wk {
  margin-left: auto;
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 14px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
#skip-wk:hover { color: var(--text); }
#skip-wk.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #14181f;
  font-weight: 600;
}

#form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#ev-add { flex: 1; }

#swatches { display: flex; gap: 7px; }
.swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch.sel { border-color: var(--wfg); }

#ev-add {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #14181f;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: filter 0.15s;
}
#ev-add:hover { filter: brightness(1.1); }

#edit-cancel {
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px;
}
#edit-cancel:hover { color: var(--text); }
#edit-cancel.hidden { display: none; }

/* editor: New / Edit tabs + labeled rows */
#editor { overflow-x: hidden; max-height: 90vh; padding: 14px 18px; } /* roomier + no sideways scroll */
#event-list.hidden, #event-form.hidden { display: none; }
#ed-tabs {
  display: flex; gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 11px; padding: 4px; margin-bottom: 14px;
}
#ed-tabs button {
  flex: 1; background: none; border: none;
  color: var(--text-dim); font: inherit; font-size: 13.5px;
  padding: 9px; border-radius: 8px; cursor: pointer;
}
#ed-tabs button.sel { background: var(--accent); color: #14181f; font-weight: 600; }
#ed-tabs.solo { display: none; } /* only "New event" makes sense with nothing to edit */
#et-edit.hidden { display: none; }
#ed-count { background: rgba(var(--ink), 0.16); font-size: 11px; font-weight: 600; border-radius: 20px; padding: 1px 7px; margin-left: 2px; }
#et-edit.sel #ed-count { background: rgba(20, 24, 31, 0.22); }

.ed-line {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 2px; border-top: 1px solid rgba(var(--ink), 0.07);
}
.ed-lbl { width: 58px; flex: none; font-size: 13px; color: var(--text-dim); }
.ed-ctl { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; position: relative; flex-wrap: wrap; }
.ed-ctl #swatches { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 4px; flex-wrap: nowrap; }
.ed-ctl #time-picker { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 7px; }
.ed-ctl #time-add { width: auto; flex: 1; }

#rep-toggle, #alert-toggle {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 8px; color: var(--text);
  font: inherit; font-size: 12.5px; padding: 7px 11px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
#rep-toggle .ar, #alert-toggle .ar { color: var(--text-dim); font-size: 10px; }
#repeat-row, #alert-row {
  position: absolute; bottom: calc(100% + 5px); right: 0; z-index: 15;
  flex-direction: column; min-width: 128px;
  background: rgba(var(--paper), 0.98);
  border: 1px solid rgba(var(--ink), 0.16);
  border-radius: 9px; padding: 4px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7);
}
#repeat-row.hidden, #alert-row.hidden { display: none; }
#repeat-row .rep, #alert-row .alt { flex: none; text-align: left; padding: 8px 11px; }

/* ---------- settings ---------- */
#settings-btn {
  position: fixed;
  right: 16px;
  top: 12px; /* top corner — the taskbar covers the bottom of the wallpaper */
  z-index: 5;
  background: none;
  border: none;
  color: rgba(var(--ink), 0.35);
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
}
#settings-btn:hover { color: var(--text); }

#settings { gap: 14px; }
.set-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-col { display: flex; flex-direction: column; gap: 6px; }
.set-lbl { font-size: 12px; color: var(--text-dim); min-width: 74px; }
.set-hint { font-size: 11.5px; color: rgba(var(--ink), 0.4); }
.set-line { display: flex; gap: 7px; }
.set-line input {
  flex: 1;
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
  outline: none;
}
.set-line input:focus { border-color: var(--accent); }
.set-line button, #layout-btns button, #theme-btns button, #rem-toggle, #layout-actions button {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
}
.set-line button:hover, #layout-btns button:hover, #theme-btns button:hover, #rem-toggle:hover, #layout-actions button:hover {
  background: rgba(var(--ink), 0.15);
}
#layout-name, #sc-name, #sc-code {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 10px;
}
#layout-name::placeholder, #sc-name::placeholder, #sc-code::placeholder { color: var(--text-dim); }
#layout-name:focus, #sc-name:focus, #sc-code:focus { border-color: var(--accent); outline: none; }
#sc-name, #sc-code { width: 150px; }
#sc-actions { flex-wrap: wrap; }
#sc-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#sc-hint.confirming {
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 10px;
  padding: 11px 12px;
  margin-top: 8px;
}
.sc-confirm-msg { color: var(--text); font-size: 13px; margin-bottom: 9px; }
.sc-confirm-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.sc-confirm-leave, .sc-confirm-yes, .sc-confirm-no {
  border-radius: 7px; font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer;
  border: 1px solid rgba(var(--ink), 0.14); background: rgba(var(--ink), 0.08); color: var(--text);
}
.sc-confirm-yes { background: rgba(226, 75, 74, 0.22); border-color: rgba(226, 75, 74, 0.5); color: #ff9a9a; }
.sc-confirm-yes:hover { background: rgba(226, 75, 74, 0.36); }
.sc-confirm-leave:hover, .sc-confirm-no:hover { background: rgba(var(--ink), 0.16); }
.sc-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 0.5px;
}

/* calendar tabs (My stuff / each shared calendar) above the grid */
#cal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(var(--ink), 0.1);
}
#cal-tabs.hidden { display: none; }
.cal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
}
.cal-tab:hover { color: var(--text); }
.cal-tab.sel {
  color: var(--wfg);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
#mycal-rename {
  width: 110px;
  background: rgba(var(--ink), 0.07);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
}
#type-filter button.hidden { display: none; }

/* on-screen scroll arrows for panels (native scrollbar can't be grabbed here) */
.panel-scroll {
  position: sticky;
  bottom: 6px;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0 -8px auto; /* hug the bottom-right, don't add panel height */
  z-index: 5;
}
.panel-scroll.hidden { display: none; }
.ps-btn {
  width: 30px;
  height: 26px;
  border: 1px solid rgba(var(--ink), 0.16);
  border-radius: 7px;
  background: rgba(var(--paper), 0.92);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none;
  user-select: none;
}
.ps-btn:hover { background: rgba(var(--ink), 0.14); }
.ps-btn.dim { opacity: 0.3; }

/* Settings: category rail + panes so nothing ever needs scrolling */
#settings { width: 600px; }
#tab-main { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; }
#set-cats {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid rgba(var(--ink), 0.1);
  padding-right: 8px;
}
.scat {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
}
.scat:hover { background: rgba(var(--ink), 0.05); color: var(--text); }
.scat.sel { background: rgba(var(--ink), 0.1); color: var(--wfg); font-weight: 600; }
#set-panes { flex: 1; min-width: 0; min-height: 356px; }
.set-pane { display: flex; flex-direction: column; gap: 15px; }
.set-pane.hidden { display: none; }
@media (max-width: 560px) {
  #settings { width: 380px; }
  #tab-main { flex-direction: column; gap: 8px; }
  #set-cats { flex-direction: row; flex: none; border-right: none; border-bottom: 1px solid rgba(var(--ink), 0.1); padding: 0 0 6px; }
  #set-panes { min-height: 0; }
}
#layout-btns, #theme-btns { display: flex; gap: 6px; flex-wrap: wrap; }
#layout-btns button.sel, #theme-btns button.sel, #rem-toggle.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #14181f;
  font-weight: 600;
}
#accent-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
#accent-swatches .swatch { width: 22px; height: 22px; }
#g-connect { background: var(--accent) !important; border-color: var(--accent) !important; color: #14181f !important; font-weight: 600; }
#g-connect.hidden, #g-disconnect.hidden { display: none; }

/* ---------- drag to move ---------- */
#drag-ghost {
  position: fixed;
  z-index: 50;
  transform: translate(-50%, -130%);
  pointer-events: none;
  padding: 4px 11px;
  border-radius: 6px;
  border-left: 3px solid var(--c);
  background: rgba(var(--paper), 0.92);
  color: var(--wfg);
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.7);
}
.cell.droptarget {
  border-style: dashed;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---------- synthetic caret ---------- */
#editor input[type="text"], #settings input[type="text"], #timer-card input { caret-color: transparent; }
#fake-caret {
  position: fixed;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  pointer-events: none;
  z-index: 60;
  display: none;
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
#caret-meas {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  left: -9999px;
}

/* ---------- small screens (browser testing) ---------- */
@media (max-width: 1000px) {
  #layout { flex-direction: column; align-items: stretch; gap: 20px; padding: 3vh 4vw; overflow-y: auto; }
  #cal { min-width: 0; height: auto; }
  #grid { grid-auto-rows: 84px; }
  #time { font-size: 56px; }
}

/* ---------- v2.0 ticket editor: the event's color IS the design ----------
   The picked color drives var(--sel) (set by setSelColor): it paints the
   spine down the left edge, the Add button, the selected type stamp and the
   active tab underline. Pick pink, the ticket turns pink. */
#editor {
  --sel: #e8b34b;
  border-left: 11px solid var(--sel);
  border-radius: 12px;
  padding: 16px 18px 16px 21px;
  /* no border-color transition: WebView2 leaves var()-driven transitions stuck
     at the old color, so the spine would never visually change */
}
#editor-head { margin-bottom: 8px; }
#editor-date { font-size: 15px; font-weight: 600; color: var(--text); }

/* tabs: quiet text stamps with a colored underline instead of a filled bar */
#ed-tabs {
  background: none; border: none; border-radius: 0; padding: 0;
  gap: 18px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(var(--ink), 0.09);
}
#ed-tabs button {
  flex: 0 0 auto; padding: 2px 1px 8px; border-radius: 0; margin-bottom: -1px;
  font-size: 13px; font-weight: 500;
  border-bottom: 2px solid transparent;
}
#ed-tabs button.sel {
  background: none; color: var(--wfg); font-weight: 600;
  border-bottom-color: var(--sel);
}
#et-edit.sel #ed-count { background: rgba(var(--ink), 0.16); }

/* title + notes write on dotted rules instead of sitting in boxes */
#event-form { gap: 9px; }
#event-form #ev-title {
  background: none; border: none; border-radius: 0;
  border-bottom: 1px dotted rgba(var(--ink), 0.34);
  font-size: 17px; padding: 5px 1px 10px;
}
#event-form #ev-title:focus { border-bottom-color: var(--sel); }
#event-form #ev-notes {
  background: none; border: none; border-radius: 0;
  border-bottom: 1px dotted rgba(var(--ink), 0.2);
  font-size: 13px; padding: 4px 1px 8px;
}
#event-form #ev-notes:focus { border-bottom-color: var(--sel); }

/* type picker: stamp chips; the selected one is inked in the event color */
#type-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
#type-row .etype, #custom-type-row .etype.custom {
  flex: 0 0 auto;
  background: none;
  border: 1px solid rgba(var(--ink), 0.24);
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 500;
  padding: 6px 11px; opacity: 1;
}
#type-row .etype:hover, #custom-type-row .etype.custom:hover {
  color: var(--text); background: rgba(var(--ink), 0.07);
}
#type-row .etype.sel, #custom-type-row .etype.custom.sel {
  background: var(--sel); border-color: var(--sel); color: #14181f; font-weight: 600;
}
#custom-type-row .etype.custom .etype-x { font-size: 12px; }
#type-add {
  background: none;
  border: 1px dashed rgba(var(--ink), 0.28); border-radius: 5px;
  color: var(--text-dim); font-size: 13px; padding: 5px 10px;
}

/* new-category box, ticket style: dotted writing line + color-inked ✓ */
#event-form #type-add-in, #custom-type-row #type-add-in {
  background: none; border: none; border-radius: 0;
  border-bottom: 1px dotted rgba(var(--ink), 0.35);
  width: 118px; color: var(--text); font-size: 12.5px; padding: 5px 2px;
}
#event-form #type-add-in:focus, #custom-type-row #type-add-in:focus { border-bottom-color: var(--sel); }
#type-add-ok {
  background: var(--sel); color: #14181f;
  border: none; border-radius: 5px; font-size: 12px; font-weight: 700;
  padding: 5px 10px; line-height: 1.2;
}

/* labeled rows: tiny etched labels, no boxy chrome */
.ed-line { border-top: none; padding: 6px 1px; }
.ed-lbl { font-size: 13px; color: var(--text-dim); }
.ed-ctl #time-add {
  flex: 0 0 auto; width: auto;
  background: none; border: none; border-radius: 0;
  border-bottom: 1px dotted rgba(var(--ink), 0.35);
  font-size: 12.5px; padding: 3px 2px;
}
#rep-toggle, #alert-toggle {
  background: none;
  border: 1px solid rgba(var(--ink), 0.24); border-radius: 5px;
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 500;
  padding: 6px 11px;
}
#rep-toggle:hover, #alert-toggle:hover { color: var(--text); }

/* perforated tear line above the footer (full bleed past the padding) */
#event-form .perf {
  border-top: 2px dashed rgba(var(--ink), 0.15);
  margin: 5px -18px 1px -21px;
}

/* footer: smaller dots; the Add button takes the event's color */
.swatch { width: 15px; height: 15px; }
#ev-add {
  background: var(--sel); color: #14181f;
  font-size: 13.5px; font-weight: 700; border-radius: 7px; padding: 11px;
  transition: filter 0.15s; /* hover only, see the var() transition note above */
}

/* ---------- v2.1: Edit-tab accordion + visible resize grip ---------- */

/* Edit tab: clicking a row drops the form down inside it (▾ flips) */
#event-list li .exp-ar { color: var(--text-dim); font-size: 10px; flex-shrink: 0; transition: transform 0.15s; }
#event-list li.expanded .exp-ar { transform: rotate(180deg); }
#event-list li.expanded { flex-wrap: wrap; background: rgba(var(--ink), 0.08); }
#event-list li.expanded > #event-form {
  width: 100%; margin-top: 9px; padding-top: 11px;
  border-top: 1px dashed rgba(var(--ink), 0.16);
  cursor: default;
}
/* an open drawer needs room, lift the list's height cap so the panel (and its
   scroll arrows) manage overflow instead of a cramped inner scrollbar */
#event-list:has(li.expanded) { max-height: none; overflow: visible; }

/* Day/Week views: a real grip bar at the bottom of each block, obvious to
   grab, generous hit zone (spills 3px past the edge), resizes in 15-min steps */
.tgev-rz {
  left: 0; right: 0; bottom: -3px;
  height: min(16px, 55%);
  cursor: ns-resize; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
}
.tgev-rz::after {
  content: ""; width: 30px; height: 4px; border-radius: 3px;
  background: var(--c); opacity: 0.55; margin-bottom: 2px;
  pointer-events: none; /* the whole strip is the handle, not just the bar */
}
.tgev:hover .tgev-rz::after, .tgev.dragging .tgev-rz::after { opacity: 1; }

/* ---------- v2.2: steady Settings height + editor style variants ---------- */

/* Stack every category pane in the same grid cell: the pane area is always as
   tall as the TALLEST pane, so switching categories never resizes the panel.
   Hidden panes stay in the layout (visibility) instead of collapsing away. */
#set-panes { display: grid; }
#set-panes .set-pane { grid-area: 1 / 1; }
#set-panes .set-pane.hidden { display: flex; visibility: hidden; }

/*, Paper: nothing boxed, hairlines and text; accent-colored, no spine, */
#editor.ed-paper {
  border-left: 1px solid rgba(var(--ink), 0.08);
  border-radius: 16px; padding: 18px 24px;
}
#editor.ed-paper #editor-date { font-size: 19px; font-weight: 650; }
#editor.ed-paper #ed-tabs button.sel { border-bottom-color: var(--accent); }
#editor.ed-paper #event-form #ev-title { border-bottom: 1px solid rgba(var(--ink), 0.18); font-size: 18px; }
#editor.ed-paper #event-form #ev-title:focus { border-bottom-color: var(--accent); }
#editor.ed-paper #event-form #ev-notes { border-bottom: 1px solid rgba(var(--ink), 0.1); }
#editor.ed-paper #event-form #ev-notes:focus { border-bottom-color: var(--accent); }
#editor.ed-paper #type-row { gap: 14px; }
#editor.ed-paper #type-row .etype, #editor.ed-paper #custom-type-row .etype.custom {
  border: none; border-radius: 0; padding: 3px 1px 6px;
  border-bottom: 2px solid transparent;
}
#editor.ed-paper #type-row .etype.sel, #editor.ed-paper #custom-type-row .etype.custom.sel {
  background: none; color: var(--accent); font-weight: 600; border-bottom-color: var(--accent);
}
#editor.ed-paper #custom-type-row .etype.custom.sel .etype-x { color: var(--accent); }
#editor.ed-paper #type-add { border: none; padding: 3px 2px; }
#editor.ed-paper #type-add-ok { background: var(--accent); }
#editor.ed-paper #rep-toggle, #editor.ed-paper #alert-toggle {
  border: none; border-radius: 0; padding: 4px 1px;
  border-bottom: 1px dotted rgba(var(--ink), 0.35);
}
#editor.ed-paper .perf { display: none; }
#editor.ed-paper #ev-add { background: var(--accent); border-radius: 9px; }

/*, Ledger: boxed fields, dense and utilitarian; accent-colored, no spine, */
#editor.ed-ledger {
  border: 1px solid rgba(var(--ink), 0.14);
  border-radius: 8px; padding: 16px 18px;
}
#editor.ed-ledger #editor-date { font-size: 14px; }
#editor.ed-ledger #ed-tabs button.sel { border-bottom-color: var(--accent); }
#editor.ed-ledger #event-form #ev-title, #editor.ed-ledger #event-form #ev-notes {
  background: rgba(var(--ink), 0.07); border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 5px; padding: 8px 10px;
}
#editor.ed-ledger #event-form #ev-title { font-size: 14px; }
#editor.ed-ledger #event-form #ev-title:focus, #editor.ed-ledger #event-form #ev-notes:focus { border-color: var(--accent); }
#editor.ed-ledger #type-row .etype, #editor.ed-ledger #custom-type-row .etype.custom {
  background: rgba(var(--ink), 0.05); border: 1px solid rgba(var(--ink), 0.13); border-radius: 4px;
}
#editor.ed-ledger #type-row .etype.sel, #editor.ed-ledger #custom-type-row .etype.custom.sel {
  background: var(--accent); border-color: var(--accent); color: #14181f;
}
#editor.ed-ledger #type-add-ok { background: var(--accent); }
#editor.ed-ledger .ed-line { border-top: 1px solid rgba(var(--ink), 0.07); }
#editor.ed-ledger .perf { display: none; }
#editor.ed-ledger .swatch { border-radius: 4px; }
#editor.ed-ledger #rep-toggle, #editor.ed-ledger #alert-toggle { background: rgba(var(--ink), 0.07); border-radius: 4px; }
#editor.ed-ledger #ev-add { background: var(--accent); border-radius: 5px; }

/* ---------- v2.3: shared to-dos panel + who-name input ---------- */
#todos-backdrop {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(6, 9, 14, 0.35); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
#todos-backdrop.hidden { display: none; }
#stodos {
  width: 420px; max-width: 92vw; max-height: 82vh;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px;
  background: rgba(var(--paper), 0.92);
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.8);
  animation: pop 0.16s ease-out;
}
#stodos-head { display: flex; align-items: center; justify-content: space-between; }
#stodos-title { font-size: 16px; font-weight: 600; }
#stodos-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#stodos-close:hover { color: var(--text); }
#stodos-sub { font-size: 12px; color: var(--text-dim); margin: -2px 0 0; }
#stodo-add-row { display: flex; gap: 8px; }
#stodo-in {
  flex: 1; background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.13);
  border-radius: 9px; color: var(--text); font: inherit; font-size: 13.5px;
  padding: 9px 12px; outline: none;
}
#stodo-in:focus { border-color: var(--accent); }
#stodo-add {
  background: var(--accent); border: none; border-radius: 9px; color: #14181f;
  font: inherit; font-size: 17px; font-weight: 700; padding: 0 14px; cursor: pointer;
}
#stodo-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 120px; }
.stodo-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(var(--ink), 0.05); border-radius: 8px; padding: 8px 10px;
  font-size: 13.5px;
}
.stodo-row.done .stodo-text { text-decoration: line-through; opacity: 0.55; }
.stodo-chk {
  background: none; border: 1px solid var(--text-dim); border-radius: 5px;
  width: 19px; height: 19px; color: var(--accent); font-size: 12px; line-height: 1;
  cursor: pointer; flex-shrink: 0; padding: 0;
}
.stodo-chk.on { border-color: var(--accent); }
.stodo-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.stodo-del {
  background: none; border: none; color: var(--text-dim);
  font-size: 17px; cursor: pointer; padding: 0 3px; flex-shrink: 0;
}
.stodo-del:hover { color: #ff7a7a; }
.stodo-empty { color: var(--text-dim); font-size: 13px; padding: 8px 2px; }
#stodos-foot { min-height: 16px; }
#stodos-status { font-size: 12px; color: var(--accent); }

#who-name {
  background: rgba(var(--ink), 0.07); border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 8px; color: var(--text); font: inherit; font-size: 13px;
  padding: 7px 10px; outline: none; width: 150px;
}
#who-name:focus { border-color: var(--accent); }

/* ---------- v2.4: read-only/editable tags, Google refresh, per-event Google toggle ---------- */

/* little capability badges next to Google / iCal section labels */
.ro-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-dim); background: rgba(var(--ink), 0.09);
  border: 1px solid rgba(var(--ink), 0.14); border-radius: 5px;
  padding: 1px 7px; vertical-align: 1px; text-transform: none;
}
.ro-tag.edit { color: #7ee0a3; border-color: rgba(126, 224, 163, 0.35); background: rgba(126, 224, 163, 0.1); }

#g-refresh.hidden { display: none; }

/* editor: per-event "sync to Google" toggle (matches the repeat/alert toggles) */
#gsync-toggle {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 8px; color: var(--text-dim);
  font: inherit; font-size: 12.5px; padding: 7px 11px; cursor: pointer;
}
#gsync-toggle:hover { color: var(--text); }
#gsync-toggle.on { background: var(--accent); border-color: var(--accent); color: #14181f; font-weight: 600; }
#gsync-line.hidden { display: none; }
/* paper / ledger editor styles keep the toggle on-brand */
#editor.ed-paper #gsync-toggle { border: none; border-bottom: 1px dotted rgba(var(--ink), 0.35); border-radius: 0; padding: 4px 1px; }
#editor.ed-paper #gsync-toggle.on { background: none; color: var(--accent); border-bottom-color: var(--accent); }
#editor.ed-ledger #gsync-toggle { border-radius: 4px; }

/* ---------- v2.5: sharp-corners mode ---------- */
/* One switch flattens every rounded box in the app (2px reads as square
   without pixel aliasing). True circles, color dots, sync dot, swatches , 
   are excluded and stay round. Pseudo-elements (spine punch holes, the
   resize grip pill) are untouched by design. */
body.sq *:not(.swatch):not(.dot):not(.hdot):not(.sc-dot):not(#sync-dot):not(.note-color) {
  border-radius: 2px !important;
}

/* ---------- v2.7: day view first (list with details + add at the bottom) ---------- */
#event-list li { flex-wrap: wrap; }
#event-list .title { min-width: 0; }
#event-list .ev-note { /* detail line under the row */
  flex-basis: 100%; margin: 3px 0 0 19px;
  font-size: 12px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-edit {
  background: rgba(var(--ink), 0.07);
  border: 1px solid rgba(var(--ink), 0.14);
  border-radius: 6px; color: var(--text-dim);
  font: inherit; font-size: 11.5px; padding: 3px 10px; cursor: pointer; flex-shrink: 0;
}
.row-edit:hover { color: var(--text); border-color: var(--accent); }
#event-list li.expanded .row-edit { background: var(--accent); border-color: var(--accent); color: #14181f; font-weight: 600; }
#event-list li.add-new {
  justify-content: center;
  background: none;
  border: 1px dashed rgba(var(--ink), 0.25);
  color: var(--text-dim); font-size: 13px;
}
#event-list li.add-new:hover { color: var(--text); border-color: var(--accent); background: none; }

/* ---------- first-run: "where did you find us" ---------- */
#ob-heard { display: grid; gap: 7px; margin: 4px 0 14px; }
#ob-heard.hidden { display: none; }
#ob-heard .heard {
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.14);
  border-radius: 8px;
  color: var(--text);
  font: inherit; font-size: 13.5px;
  padding: 9px 13px; text-align: left; cursor: pointer;
}
#ob-heard .heard:hover { background: rgba(var(--ink), 0.11); border-color: var(--accent); }