/* MC Command Center — surface styles
   Built on top of Optimer's colors_and_type.css.
   ----------------------------------------------------- */

/* The artboard root - one per surface */
.mc-app {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== HEADER ============================================= */
.mc-hdr {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 14px 24px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 4;
}
.mc-hdr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
}
.mc-hdr-brand img { height: 22px; display: block; }
.mc-hdr-brand .pipe { color: var(--ink-300); font-weight: var(--fw-regular); }
.mc-hdr-brand .title { font-size: 16px; letter-spacing: -0.01em; color: var(--ink-900); }
.mc-hdr-week {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mc-hdr-week b { color: var(--fg); font-weight: var(--fw-semi); }
.mc-hdr-spacer { flex: 1; }

/* energy pill */
.mc-energy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-energy:hover { border-color: var(--border-strong); }
.mc-energy .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.mc-energy.spent  .dot { background: #b35b5b; }
.mc-energy.steady .dot { background: #d4a106; }
.mc-energy.strong .dot { background: var(--success); }
.mc-energy.wired  .dot { background: var(--brand-magenta); box-shadow: 0 0 0 3px rgba(255,0,255,0.18); }

/* sync indicator */
.mc-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.mc-sync .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(30,166,114,0.5);
  animation: mc-pulse 2.4s var(--ease-standard) infinite;
}
@keyframes mc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,166,114,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(30,166,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,166,114,0); }
}
.mc-sync.saving .pulse { background: var(--warning); animation: none; }

/* ===== BURST WIDGET (compact, in header) ============== */
.mc-bw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 4px 4px 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--fg-1);
  min-width: 280px;
  max-width: 360px;
  transition: all var(--dur-2) var(--ease-standard);
}
.mc-bw.running {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
  box-shadow: var(--shadow-md);
}
.mc-bw.finished {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--ink-900);
}
.mc-bw-ring {
  width: 26px; height: 26px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-bw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mc-bw-ring .track { fill: none; stroke: var(--ink-200); stroke-width: 3; }
.mc-bw.running .mc-bw-ring .track { stroke: rgba(255,255,255,0.15); }
.mc-bw-ring .fill { fill: none; stroke: var(--indigo-500); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .8s linear; }
.mc-bw.running .mc-bw-ring .fill { stroke: url(#mc-bw-grad); }
.mc-bw.finished .mc-bw-ring .fill { stroke: var(--success); }

.mc-bw-time {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}
.mc-bw-task {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  overflow: hidden;
}
.mc-bw-task .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-bold);
}
.mc-bw.running .mc-bw-task .lbl { color: rgba(255,255,255,0.55); }
.mc-bw-task .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-bw-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.mc-bw-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-bw-btn:hover { background: rgba(0,0,0,0.06); }
.mc-bw.running .mc-bw-btn:hover { background: rgba(255,255,255,0.12); }
.mc-bw-btn.primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
  width: 30px; height: 30px;
}
.mc-bw-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mc-bw-btn.primary:active { transform: scale(0.95); }
.mc-bw.running .mc-bw-btn.primary {
  background: rgba(255,255,255,0.18);
  box-shadow: none;
}
.mc-bw-btn.primary svg { margin-left: 1px; } /* play icon optical center */
.mc-bw-btn.pause svg { margin-left: 0; }
.mc-bw-len {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  padding: 0 2px;
  letter-spacing: 0.04em;
}

.mc-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 12px;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-sm);
}

/* rituals link in the header — quiet candlelight pill, sits left of the avatar */
.mc-rituals {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: var(--radius-pill);
  background: #0a0a0a;
  border: 1px solid rgba(217,165,91,0.30);
  color: #e8c184;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-rituals:hover {
  border-color: rgba(217,165,91,0.55);
  color: #f0d49a;
}
.mc-rituals .flame {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d9a55b;
  box-shadow: 0 0 8px rgba(217,165,91,0.55);
  animation: mc-flame 3.4s var(--ease-standard) infinite;
}
@keyframes mc-flame {
  0%, 100% { opacity: 1;   box-shadow: 0 0 8px rgba(217,165,91,0.55); }
  50%      { opacity: 0.6; box-shadow: 0 0 6px rgba(217,165,91,0.35); }
}

/* mobile rituals icon — small candlelight glyph in the mobile header */
.mc-m-rituals {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 1px solid rgba(217,165,91,0.32);
  text-decoration: none;
  transition: all var(--dur-1) var(--ease-standard);
  flex-shrink: 0;
}
.mc-m-rituals:hover { border-color: rgba(217,165,91,0.6); }
.mc-m-rituals .flame {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d9a55b;
  box-shadow: 0 0 8px rgba(217,165,91,0.55);
  animation: mc-flame 3.4s var(--ease-standard) infinite;
}

/* ===== MAIN GRID ======================================== */
.mc-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: auto 1fr;
  gap: 20px;
  padding: 20px 24px 24px;
  overflow: auto;
  min-height: 0;
}
.mc-col-left  { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mc-col-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ===== PALATE CLEANSER ================================= */
.mc-cleanse {
  margin: 20px 24px 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--dur-3) var(--ease-emphasis);
  position: relative;
}
.mc-cleanse.idle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 18px;
}
.mc-cleanse.idle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--indigo-50) 90%, transparent) 0%,
    transparent 60%);
  pointer-events: none;
}
.mc-cleanse-idle-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--grad-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-brand);
  position: relative;
  z-index: 1;
}
.mc-cleanse-idle-body {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 10px;
  position: relative; z-index: 1;
}
.mc-cleanse-idle-body .h {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}
.mc-cleanse-idle-body .s {
  font-size: 12px;
  color: var(--fg-2);
}
.mc-cleanse-idle-streak {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  position: relative; z-index: 1;
}
.mc-cleanse-idle-streak b { color: var(--fg-1); font-weight: var(--fw-bold); font-family: var(--font-display); }
.mc-cleanse-start {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--ink-900);
  color: #fff;
  padding: 8px 14px 8px 12px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: var(--fw-semi);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--dur-1) var(--ease-standard);
  position: relative; z-index: 1;
}
.mc-cleanse-start:hover { background: var(--ink-800); transform: translateY(-1px); }

.mc-cleanse.active {
  padding: 0;
  background: linear-gradient(135deg,
    var(--ink-900) 0%, #1a1a2e 50%, #2d1b3d 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  animation: cleanse-enter .4s var(--ease-emphasis);
}
@keyframes cleanse-enter {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.mc-cleanse.active::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(42,59,225,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(228,18,241,0.15) 0%, transparent 55%);
  pointer-events: none;
}
.mc-cleanse-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 4px;
  position: relative; z-index: 1;
}
.mc-cleanse-hd .lbl {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.mc-cleanse-hd .lbl .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-magenta-hot);
  box-shadow: 0 0 10px var(--brand-magenta-hot);
  animation: mc-pulse-dot 1.6s infinite;
}
.mc-cleanse-hd .right {
  display: flex; align-items: center; gap: 14px;
}
.mc-cleanse-hd .time {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 18px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.mc-cleanse-hd .x {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-cleanse-hd .x:hover { background: rgba(255,255,255,0.12); }

.mc-cleanse-track {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 18px 0;
  position: relative; z-index: 1;
}
.mc-cleanse-track .seg {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.mc-cleanse-track .seg .bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.mc-cleanse-track .seg .bar > i {
  display: block;
  height: 100%;
  background: var(--grad-brand);
  transition: width 1s linear;
}
.mc-cleanse-track .seg.active { color: rgba(255,255,255,0.85); }
.mc-cleanse-track .seg.done   { color: rgba(255,255,255,0.55); }
.mc-cleanse-track .seg.done .bar > i { width: 100%; background: rgba(255,255,255,0.5); }

.mc-cleanse-stage {
  padding: 14px 18px 18px;
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  min-height: 180px;
}
.mc-cleanse-stage .body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.mc-cleanse-stage h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.mc-cleanse-stage p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0;
  max-width: 44ch;
}
.mc-cleanse-stage input,
.mc-cleanse-stage textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  color: #fff;
  outline: none;
  resize: none;
}
.mc-cleanse-stage input::placeholder,
.mc-cleanse-stage textarea::placeholder { color: rgba(255,255,255,0.4); }
.mc-cleanse-stage input:focus,
.mc-cleanse-stage textarea:focus {
  border-color: rgba(228,18,241,0.6);
  background: rgba(255,255,255,0.08);
}
.mc-cleanse-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-cleanse-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: var(--fw-semi);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-cleanse-btn:hover { background: rgba(255,255,255,0.16); }
.mc-cleanse-btn.primary {
  background: var(--grad-brand);
  border: 0;
  box-shadow: var(--shadow-brand);
}

/* visual: breathing circle */
.mc-cleanse-stage .visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mc-breathe {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228,18,241,0.35) 0%, rgba(122,38,234,0.15) 60%, transparent 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 4s var(--ease-standard);
}
.mc-breathe::before {
  content: '';
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  transition: inset 4s var(--ease-standard);
}
.mc-breathe.in      { transform: scale(1.15); }
.mc-breathe.in::before     { inset: 18px; }
.mc-breathe.hold-in,
.mc-breathe.hold-out { transform: scale(1.05); }
.mc-breathe.out     { transform: scale(0.85); }
.mc-breathe.out::before     { inset: 42px; }
.mc-breathe-label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #fff;
  z-index: 1;
}

/* aim chips */
.mc-aim-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.mc-aim-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  text-align: left;
  width: 100%;
}
.mc-aim-chip:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}
.mc-aim-chip .num {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--grad-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.mc-aim-chip .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-aim-chip .energy {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.mc-aim-chip.different .energy {
  color: var(--magenta-300);
  border-color: rgba(228,18,241,0.4);
  background: rgba(228,18,241,0.1);
}

/* ===== CARDS =========================================== */
.mc-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mc-card.flush { padding: 0; overflow: hidden; }
.mc-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mc-card-hd .lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.mc-card-hd .lbl .ico { color: var(--fg-2); }
.mc-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.mc-meta { font-size: 12px; color: var(--fg-3); }

/* ===== PRIORITIES ====================================== */
.mc-prio-hero { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 12px; }
.mc-prio-hero > .head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}
.mc-prio-hero > .head h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--ink-900);
}
.mc-prio-hero > .head .sub {
  font-size: 13px;
  color: var(--fg-2);
  margin-top: 6px;
}
.mc-prio-cap {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.mc-prio-cap .pip {
  width: 18px; height: 4px; border-radius: 2px;
  background: var(--ink-200);
}
.mc-prio-cap .pip.on { background: var(--grad-brand); }

/* coverage strip — shows the 5 category chips, off until covered */
.mc-coverage {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px 2px;
  font-size: 11px;
}
.mc-coverage-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-bold);
}
.mc-coverage-chips {
  display: flex; gap: 6px; flex: 1;
}
.mc-cov-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-semi);
  transition: all var(--dur-2) var(--ease-standard);
}
.mc-cov-chip .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cat-color, var(--ink-300));
  transition: all var(--dur-2) var(--ease-standard);
}
.mc-cov-chip.off {
  color: var(--fg-3);
  background: var(--ink-100);
  border: 1px solid transparent;
}
.mc-cov-chip.off .dot { opacity: 0.25; background: var(--ink-400); }
.mc-cov-chip.on {
  color: var(--cat-fg, var(--fg-1));
  background: var(--cat-bg, var(--ink-100));
  border: 1px solid color-mix(in oklch, var(--cat-color) 22%, transparent);
}
.mc-coverage-hint {
  font-size: 10px;
  font-style: italic;
  color: var(--fg-3);
  white-space: nowrap;
}

/* category chip on each priority card */
.mc-cat-chip {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-semi);
  font-family: inherit;
  background: var(--cat-bg, var(--ink-100));
  color: var(--cat-fg, var(--fg-2));
  border: 1px solid color-mix(in oklch, var(--cat-color, var(--ink-300)) 25%, transparent);
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-cat-chip:hover {
  border-color: color-mix(in oklch, var(--cat-color) 55%, transparent);
}
.mc-cat-chip .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cat-color, var(--ink-400));
}

.mc-cat-menu {
  position: absolute;
  top: 100%; left: 0;
  margin-top: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 12;
  min-width: 220px;
  display: flex; flex-direction: column; gap: 2px;
}
.mc-cat-menu-hd {
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  padding: 6px 10px 4px;
}
.mc-cat-menu button {
  appearance: none; border: 0; background: transparent;
  text-align: left; padding: 7px 10px; border-radius: 6px;
  cursor: pointer; font-family: inherit; font-size: 12px;
  color: var(--fg-1); font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: 9px;
}
.mc-cat-menu button:hover { background: var(--ink-100); }
.mc-cat-menu button.sel { background: var(--ink-100); }
.mc-cat-menu button .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cat-color, var(--ink-400));
  flex-shrink: 0;
}
.mc-cat-menu button .energy {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.mc-prio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.mc-prio {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  transition: box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard);
}
.mc-prio:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mc-prio.done {
  background: var(--success-bg);
  border-color: color-mix(in oklch, var(--success) 30%, var(--border));
}
.mc-prio.done .mc-prio-title { text-decoration: line-through; color: var(--fg-2); }
.mc-prio.transferred {
  border-style: dashed;
  border-color: var(--warning);
  background: color-mix(in oklch, var(--warning-bg) 50%, var(--bg-elev));
}
.mc-prio-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mc-prio-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 13px;
  color: #fff;
  background: var(--grad-brand);
  flex-shrink: 0;
}
.mc-prio.done .mc-prio-num { background: var(--success); }
.mc-prio.transferred .mc-prio-num { background: var(--warning); }

.mc-prio-actions {
  display: flex;
  gap: 4px;
  opacity: 0.4;
  transition: opacity var(--dur-1) var(--ease-standard);
}
.mc-prio:hover .mc-prio-actions { opacity: 1; }
.mc-iconbtn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-iconbtn:hover { background: var(--ink-100); color: var(--fg); }
.mc-iconbtn.danger:hover { background: var(--danger-bg); color: var(--danger); }
.mc-iconbtn:disabled { opacity: 0.3; cursor: not-allowed; }

.mc-prio-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0;
  cursor: text;
}
.mc-prio-title:focus { outline: none; }

.mc-prio-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
}
.mc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}
.mc-tag.urgent { background: var(--danger-bg); color: var(--danger); }
.mc-tag.warn { background: var(--warning-bg); color: var(--warning); }
.mc-tag.info { background: var(--info-bg); color: var(--info); }

.mc-prio-tasks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.mc-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--fg-1);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--dur-1) var(--ease-standard);
}
.mc-task:hover { background: var(--ink-100); padding-left: 6px; }
.mc-task-check {
  width: 16px; height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-task.done .mc-task-check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.mc-task.done .mc-task-label {
  text-decoration: line-through;
  color: var(--fg-3);
}
.mc-task-label { flex: 1; min-width: 0; }
.mc-task-burst {
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-standard);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo-500);
  font-weight: var(--fw-semi);
}
.mc-task:hover .mc-task-burst { opacity: 1; }
.mc-prio-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--fg-3);
}
.mc-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: var(--fw-semi);
}
.mc-progress .bar {
  width: 60px; height: 3px; border-radius: 2px;
  background: var(--ink-200);
  overflow: hidden;
}
.mc-progress .bar > i {
  display: block; height: 100%;
  background: var(--grad-brand);
  transition: width var(--dur-3) var(--ease-emphasis);
}

.mc-add-task {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--fw-medium);
  text-align: left;
  margin-top: 4px;
  transition: all var(--dur-1) var(--ease-standard);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-add-task:hover { border-color: var(--indigo-400); color: var(--indigo-500); }

/* slot for empty priority */
.mc-prio-empty {
  border: 1.5px dashed var(--border-strong);
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-standard);
}
.mc-prio-empty:hover { border-color: var(--indigo-400); color: var(--indigo-500); background: var(--indigo-50); }

/* ===== BRAIN DUMP / IDEAS ============================== */
.mc-bd {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.mc-bd-tabs {
  display: inline-flex;
  background: var(--ink-100);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 0;
  align-self: flex-start;
  font-size: 12px;
}
.mc-bd-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semi);
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  font-family: inherit;
}
.mc-bd-tab.active { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-xs); }
.mc-bd-input {
  display: flex;
  gap: 6px;
  align-items: center;
}
.mc-bd-input input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--fg);
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-bd-input input:focus {
  outline: none;
  border-color: var(--indigo-400);
  background: var(--bg-elev);
  box-shadow: var(--focus-ring);
}
.mc-bd-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  margin: -4px;
  padding: 4px;
}
.mc-bd-item {
  display: grid;
  grid-template-columns: 20px auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  background: var(--bg);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-1);
  transition: all var(--dur-1) var(--ease-standard);
  border-left: 3px solid transparent;
  margin-left: -3px;
}
.mc-bd-item:hover { background: var(--ink-100); }
.mc-bd-item .text { min-width: 0; overflow-wrap: anywhere; }
.mc-bd-item .age { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); flex-shrink: 0; }
.mc-bd-item.idea {
  background: linear-gradient(135deg, color-mix(in oklch, var(--magenta-50) 60%, var(--bg)) 0%, var(--bg) 100%);
}
.mc-bd-item.flagged { border-left-color: var(--danger); }
.mc-bd-item.flagged .text { font-weight: var(--fw-semi); color: var(--ink-900); }
.mc-bd-item.is-done .text { text-decoration: line-through; color: var(--fg-3); }
.mc-bd-item.is-done { opacity: 0.7; }
.mc-bd-item.is-done.flagged { border-left-color: var(--ink-300); }

.mc-bd-check {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: transparent;
  transition: all var(--dur-1) var(--ease-standard);
  background: var(--bg-elev);
  flex-shrink: 0;
}
.mc-bd-check:hover { border-color: var(--indigo-400); }
.mc-bd-item.is-done .mc-bd-check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.mc-bd-kind {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--fg-3);
}
.mc-bd-item.idea .mc-bd-kind { color: var(--magenta-500); background: rgba(228,18,241,0.08); }

.mc-bd-item-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-standard);
}
.mc-bd-item:hover .mc-bd-item-actions { opacity: 1; }
.mc-bd-item .mc-bd-item-actions .flagged-on { opacity: 1; color: var(--danger); }
.mc-bd-item.flagged .mc-bd-item-actions { opacity: 1; }
.mc-bd-hint {
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
  padding: 16px 8px;
}

/* ===== DEADLINES =========================== */
.mc-deadlines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-dl {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border-left: 3px solid transparent;
}
.mc-dl .days {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.mc-dl .days small {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.mc-dl .what { min-width: 0; }
.mc-dl .what .name { font-weight: var(--fw-semi); font-size: 13px; color: var(--fg); }
.mc-dl .what .ctx  { font-size: 11px; color: var(--fg-3); margin-top: 1px; }
.mc-dl .when { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.mc-dl.crit { border-left-color: var(--danger); background: color-mix(in oklch, var(--danger-bg) 50%, var(--bg)); }
.mc-dl.warn { border-left-color: var(--warning); }
.mc-dl.soon { border-left-color: var(--indigo-500); }

/* ===== ADMIN AUTO-PILOT ==================== */
.mc-admin {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mc-admin-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-admin-item:hover { border-color: var(--indigo-300); background: var(--indigo-50); }
.mc-admin-item .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--fg-3);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-admin-item .count {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  line-height: 1.05;
}
.mc-admin-item .what {
  font-size: 12px;
  color: var(--fg-1);
  line-height: 1.35;
}
.mc-admin-item .when {
  font-size: 11px;
  color: var(--fg-3);
  font-family: var(--font-mono);
}
.mc-admin-item .pill {
  position: absolute;
  top: 10px; right: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.mc-admin-item.crit .pill  { background: var(--danger); animation: mc-pulse-dot 1.8s infinite; }
.mc-admin-item.crit .count { color: var(--danger); }
.mc-admin-item.warn .pill  { background: var(--warning); }
.mc-admin-item.ok   .pill  { background: var(--success); }
.mc-admin-item.calm .pill  { background: var(--ink-300); }
@keyframes mc-pulse-dot {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.mc-admin-item .do {
  margin-top: 4px;
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--indigo-500);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ===== MONEY  ================================== */
.mc-money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mc-money-num {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.mc-money-num.out { color: var(--ink-700); }
.mc-money-row { display: flex; flex-direction: column; gap: 6px; }
.mc-money-spark {
  display: flex; align-items: flex-end;
  gap: 2px; height: 28px; margin-top: 6px;
}
.mc-money-spark i {
  flex: 1; min-width: 4px;
  background: var(--indigo-300);
  border-radius: 2px 2px 0 0;
}
.mc-money-spark.out i { background: var(--ink-300); }
.mc-money-net {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--fg-2);
}
.mc-money-net b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--success);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.mc-money-net .outstanding b { color: var(--warning); }

/* ===== PIPELINE =========================== */
.mc-pipe {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.mc-pipe-lane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mc-pipe-lane .lane-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  padding: 0 2px 4px;
  border-bottom: 1px solid var(--border);
}
.mc-pipe-lane .lane-hd b { color: var(--ink-900); font-family: var(--font-display); font-size: 12px; }
.mc-pipe-deal {
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-pipe-deal:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); border-color: var(--indigo-300); }
.mc-pipe-deal .name { font-weight: var(--fw-semi); color: var(--fg); }
.mc-pipe-deal .val  { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
.mc-pipe-deal.hot { border-color: var(--magenta-300); }
.mc-pipe-deal.hot .val { color: var(--magenta-500); }

/* ===== WINS ============================== */
.mc-wins {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-win {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  font-size: 13px;
}
.mc-win .check {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--success-bg);
  color: var(--success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mc-win .text { color: var(--fg-1); }
.mc-win .when { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }

/* ===== WRAP-UP RITUAL OVERLAY ============================ */
.mc-wrap {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(17,16,24,0.42);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  animation: mc-fade-in var(--dur-2) var(--ease-emphasis);
}
.mc-wrap-card {
  width: min(720px, 100%);
  max-height: 92%;
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  animation: wrap-rise .35s var(--ease-emphasis);
}
@keyframes wrap-rise {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.mc-wrap-hd {
  padding: 18px 22px 12px;
  position: relative;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--indigo-50) 80%, var(--bg-elev)) 0%,
    color-mix(in oklch, var(--magenta-50) 50%, var(--bg-elev)) 100%);
  border-bottom: 1px solid var(--border);
}
.mc-wrap-hd .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: var(--fw-bold);
}
.mc-wrap-hd .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px var(--success);
}
.mc-wrap-hd h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 6px 0 2px;
  color: var(--ink-900);
}
.mc-wrap-hd .src {
  font-size: 13px; color: var(--fg-2);
}
.mc-wrap-hd .x {
  position: absolute; top: 14px; right: 14px;
  appearance: none; border: 1px solid var(--border);
  background: var(--bg-elev);
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.mc-wrap-hd .x:hover { background: var(--ink-100); color: var(--fg); }

.mc-wrap-body {
  padding: 16px 22px 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1; min-height: 0;
}
.mc-wrap-sect {
  display: flex; flex-direction: column; gap: 8px;
}
.mc-wrap-sect .hd {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.mc-wrap-sect .hint { font-size: 11px; color: var(--fg-3); text-transform: none; letter-spacing: 0; font-weight: 400; }
.mc-wrap-input {
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--fg);
  outline: none;
  width: 100%;
  resize: none;
}
.mc-wrap-input:focus {
  border-color: var(--indigo-400);
  background: var(--bg-elev);
  box-shadow: var(--focus-ring);
}

.mc-loop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 13px;
  transition: all var(--dur-2) var(--ease-standard);
}
.mc-loop.routed {
  background: var(--success-bg);
  border-color: color-mix(in oklch, var(--success) 30%, var(--border));
  color: var(--fg-2);
}
.mc-loop.routed .text { text-decoration: line-through; }
.mc-loop .text { flex: 1; min-width: 0; }
.mc-loop .routed-to {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: var(--fw-semi);
  color: var(--success);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
}
.mc-loop-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.mc-loop-btn {
  appearance: none;
  cursor: pointer;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--fw-semi);
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 4px;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-loop-btn:hover { border-color: var(--indigo-400); color: var(--indigo-500); background: var(--indigo-50); }
.mc-loop-btn.idea:hover { border-color: var(--magenta-400); color: var(--magenta-600); background: var(--magenta-50); }
.mc-loop-btn.priority:hover { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); }
.mc-loop-btn.discard:hover { border-color: var(--ink-400); color: var(--ink-500); background: var(--ink-100); }

.mc-priority-menu {
  position: absolute;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 12;
  min-width: 220px;
  display: flex; flex-direction: column; gap: 2px;
}
.mc-priority-menu button {
  appearance: none; border: 0; background: transparent;
  text-align: left; padding: 8px 10px; border-radius: 6px;
  cursor: pointer; font-family: inherit; font-size: 12px;
  color: var(--fg-1); font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: 8px;
}
.mc-priority-menu button:hover { background: var(--ink-100); }

.mc-wrap-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  gap: 12px;
  flex-wrap: wrap;
}
.mc-wrap-foot .stats {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--fg-3);
}
.mc-wrap-foot .stats b { color: var(--fg-1); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px; }
.mc-wrap-foot .actions { display: flex; gap: 8px; }
.mc-wrap-foot .actions button {
  appearance: none; cursor: pointer;
  font-family: inherit; font-weight: var(--fw-semi); font-size: 13px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  transition: all var(--dur-1) var(--ease-standard);
  display: inline-flex; align-items: center; gap: 6px;
}
.mc-wrap-foot .actions .skip {
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--border-strong);
}
.mc-wrap-foot .actions .skip:hover { color: var(--fg); border-color: var(--fg-2); }
.mc-wrap-foot .actions .done {
  background: var(--ink-900); color: #fff; border: 0;
}
.mc-wrap-foot .actions .done:hover { background: var(--ink-800); transform: translateY(-1px); }
.mc-burst {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--ink-950);
  color: var(--ink-50);
  display: flex;
  flex-direction: column;
  animation: mc-fade-in var(--dur-3) var(--ease-emphasis);
  overflow: hidden;
}
@keyframes mc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.mc-burst::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(42,59,225,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(228,18,241,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.mc-burst-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  position: relative;
  z-index: 1;
}
.mc-burst-hd .lbl {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.mc-burst-hd .lbl .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-magenta-hot);
  box-shadow: 0 0 12px var(--brand-magenta-hot);
  animation: mc-pulse-dot 1.6s infinite;
}
.mc-burst-close {
  appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-1) var(--ease-standard);
}
.mc-burst-close:hover { background: rgba(255,255,255,0.15); }
.mc-burst-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 24px;
  gap: 28px;
}
.mc-burst-task {
  max-width: 580px;
}
.mc-burst-task .step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta-300);
  margin-bottom: 10px;
}
.mc-burst-task h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 6px;
  color: #fff;
  text-wrap: balance;
}
.mc-burst-task .src {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.mc-ring {
  position: relative;
  width: 320px;
  height: 320px;
}
.mc-ring svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.mc-ring .track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.mc-ring .fill  { fill: none; stroke: url(#mc-grad); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.mc-ring .clock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
}
.mc-ring .clock .time {
  font-size: 84px;
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.mc-ring .clock .phase {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.mc-burst-controls { display: flex; gap: 12px; align-items: center; }
.mc-burst-controls .btn {
  appearance: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semi);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}
.mc-burst-controls .btn:hover { background: rgba(255,255,255,0.14); }
.mc-burst-controls .btn.primary {
  background: var(--grad-brand);
  border: 0;
  box-shadow: var(--shadow-brand);
}
.mc-burst-foot {
  padding: 18px 24px 22px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.mc-burst-foot .stats {
  display: flex;
  gap: 28px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.mc-burst-foot .stats b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.mc-burst-foot .siblings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  max-width: 360px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.mc-burst-foot .siblings .ti {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.mc-burst-foot .siblings .ti:hover { color: rgba(255,255,255,0.85); }
.mc-burst-foot .siblings .ti .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); }

/* ===== MOBILE  ============================== */
.mc-m {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mc-m-hd {
  padding: 18px 20px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.mc-m-hd .avatar { width: 36px; height: 36px; font-size: 13px; }
.mc-m-hd .who {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.mc-m-hd .who .name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.mc-m-hd .who .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  text-transform: uppercase;
  margin-top: 4px;
}
.mc-m-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.mc-m-energy {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  align-items: center;
}
.mc-m-energy > span:first-child {
  font-size: 11px;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  flex: 1;
}
.mc-m-energy .pill {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: var(--fw-semi);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-3);
  cursor: pointer;
}
.mc-m-energy .pill.active {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}
.mc-m-burst-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
  cursor: pointer;
}
.mc-m-burst-cta .l {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.mc-m-burst-cta .s { font-size: 11px; opacity: 0.85; margin-top: 2px; }
.mc-m-burst-cta .ico { background: rgba(255,255,255,0.18); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.mc-m-prio {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-m-prio .row1 { display: flex; align-items: center; gap: 10px; }
.mc-m-prio .num {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mc-m-prio .ttl {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}
.mc-m-prio .row2 {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--fg-3);
}
.mc-m-prio .bar { width: 60px; height: 3px; background: var(--ink-200); border-radius: 2px; overflow: hidden; }
.mc-m-prio .bar i { display: block; height: 100%; background: var(--grad-brand); }

.mc-m-tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px 8px 24px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  gap: 2px;
}
.mc-m-tabbar .tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--fg-3);
  font-size: 10px;
  font-family: inherit;
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.mc-m-tabbar .tab.active { color: var(--indigo-500); }
.mc-m-tabbar .tab svg { width: 22px; height: 22px; }

/* ===== EDIT-IN-PLACE ===================== */
[contenteditable] { outline: none; }
[contenteditable]:focus { box-shadow: 0 0 0 2px var(--indigo-300); border-radius: 4px; padding: 0 4px; margin: 0 -4px; background: var(--bg-elev); }

/* ===== density tweak ===================== */
.mc-app.dense .mc-card { padding: 12px 14px; }
.mc-app.dense .mc-prio { padding: 12px 14px 10px; }
.mc-app.dense .mc-prio-title { font-size: 15px; }
.mc-app.dense .mc-prio-hero > .head h1 { font-size: 28px; }
.mc-app.dense .mc-main { gap: 14px; padding: 14px 18px; }

/* hide scrollbars in cards */
.mc-bd-list::-webkit-scrollbar,
.mc-m-body::-webkit-scrollbar { width: 0; }

/* ================================================================
   WEEKLY ESCALATION SYSTEM
   WeekPressure banner · card stage rails · nudge strips · tags
   ================================================================ */

/* ── WeekPressure banner ── */
.mc-weekpress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  min-height: 36px;
  background: var(--bg);
  flex-wrap: wrap;
}
.mc-weekpress--calm    { background: var(--bg); }
.mc-weekpress--warming { background: #fffbf0; border-left: 3px solid var(--warning); }
.mc-weekpress--urgent  { background: #fff5f5; border-left: 3px solid var(--danger); }
.mc-weekpress--closing { background: #fdf0ff; border-left: 3px solid var(--brand-magenta); }

.mc-weekpress-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.mc-weekpress-day {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--danger);
}
.mc-weekpress--warming .mc-weekpress-day { color: var(--warning); }
.mc-weekpress--closing .mc-weekpress-day { color: var(--brand-magenta); }

.mc-weekpress-msg {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
}

/* ── Day ribbon ── */
.mc-weekribbon {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
.mc-weekribbon--solo {
  margin-left: auto;
}
.mc-weekribbon-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.mc-weekribbon-day.past {
  color: var(--fg-muted);
  opacity: 0.45;
}
.mc-weekribbon-day.today {
  background: var(--indigo-500);
  color: #fff;
}
.mc-weekpress--urgent  .mc-weekribbon-day.today { background: var(--danger); }
.mc-weekpress--closing .mc-weekribbon-day.today { background: var(--brand-magenta); }
.mc-weekribbon-line {
  margin-left: 8px;
  font-size: 9px;
  color: var(--fg-muted);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* ── Priority card stage rails ── */
/* fresh: no extra styling */

/* Last chance — fresh priority on Fri/Sat */
.mc-prio.last-chance {
  border-left: 5px solid var(--warning);
  background: linear-gradient(to right, rgba(212,136,6,0.07) 0%, transparent 55%);
}
.mc-prio.last-chance .mc-prio-num { background: var(--warning); color: #fff; }

/* Rolled — carried over from last week, must close */
.mc-prio.stage-rolled {
  border-left: 5px solid var(--danger);
  background: linear-gradient(to right, rgba(224,51,78,0.09) 0%, transparent 55%);
  box-shadow: 0 0 0 1px rgba(224,51,78,0.18), var(--shadow-sm);
}
.mc-prio.stage-rolled .mc-prio-num { background: var(--danger); color: #fff; }
.mc-prio.stage-rolled:hover {
  box-shadow: 0 0 0 1px rgba(224,51,78,0.30), var(--shadow-md);
  transform: translateY(-1px);
}

/* Final — extension used, absolutely last week */
.mc-prio.stage-final {
  border-left: 5px solid #8b1c1c;
  background: linear-gradient(to right, rgba(139,28,28,0.10) 0%, transparent 55%);
  box-shadow: 0 0 0 1px rgba(139,28,28,0.22), var(--shadow-sm);
}
.mc-prio.stage-final .mc-prio-num { background: #8b1c1c; color: #ffc8c8; }
.mc-prio.stage-final:hover {
  box-shadow: 0 0 0 1px rgba(139,28,28,0.35), var(--shadow-md);
  transform: translateY(-1px);
}

/* ── Top urgency banners ── */
.mc-urgency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.45;
}
.mc-urgency-body {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.mc-urgency-icon { flex-shrink: 0; font-size: 13px; line-height: 1.3; }
.mc-urgency strong { font-weight: 700; }

.mc-urgency--amber {
  background: var(--warning-bg);
  color: #7a4000;
  border: 1px solid rgba(212,136,6,0.30);
}
.mc-urgency--red {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(224,51,78,0.28);
}
.mc-urgency--dark {
  background: #2d0a0a;
  color: #ff9898;
  border: 1px solid rgba(255,100,100,0.22);
}

/* Urgency action buttons */
.mc-urgency-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s;
}
.mc-urgency-btn:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.mc-urgency-btn--ghost {
  opacity: 0.70;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.mc-urgency-btn--ghost:hover { opacity: 1; }

/* Extension link (confirm flow) */
.ext-link {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 0;
  opacity: 0.85;
  flex-shrink: 0;
}
.ext-link:hover { opacity: 1; }
.ext-confirm {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--danger);
  flex-shrink: 0;
}

/* Foot status label colour by stage */
.mc-prio-foot-status.stage-rolled { color: var(--danger); font-weight: 600; }
.mc-prio-foot-status.stage-final  { color: #cc4444; font-weight: 600; }

/* ── Tags — stage variants ── */
.mc-tag.last {
  background: var(--warning-bg);
  color: #7a4a00;
  border: 1px solid rgba(212,136,6,0.3);
}
.mc-tag.crit {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(224,51,78,0.25);
}

/* ── Day Focus widget ─────────────────────────────────────────────────────── */
.mc-dayfocus {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--indigo-400);
  border-radius: 12px;
  padding: 11px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mc-df-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}
.mc-df-time { font-weight: 700; font-size: 11px; color: var(--fg-2); }
.mc-df-sep  { opacity: 0.35; }
.mc-df-block {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--indigo-500);
}
.mc-df-tip { opacity: 0.55; font-style: italic; }

.mc-df-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.mc-df-row--then { opacity: 0.75; }

.mc-df-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  flex-shrink: 0;
  line-height: 1.6;
}
.mc-df-badge--then {
  background: transparent !important;
  color: var(--fg-muted) !important;
  border: 1px solid var(--border);
}

.mc-df-body {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mc-df-prio {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-df-row--then .mc-df-prio { font-size: 13px; color: var(--fg-2); }

.mc-df-step {
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.mc-df-step.all-done { color: var(--success); font-style: italic; }

.mc-df-why {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}
.mc-df-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
  letter-spacing: 0.03em;
}