/* Bubble redesign preview — shared shell (tokens, sidebar, topbar, drawer, toast, palette).
   Every section preview links this file so all chats stay on one visual system. */

/* Inter: the UI face of Notion and Linear. opsz axis → display cut on big headings automatically. */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap');

:root {
  color-scheme: light;
  /* Neutrals tinted toward the logo's violet (hue 285) */
  --bg:         oklch(0.975 0.006 285);
  --surface:    oklch(1 0 none); /* hue "none": color-mix() keeps the other colour's hue (hue 0 turned every tint pink) */
  --rail:       oklch(0.955 0.009 285);
  --hover:      oklch(0.95 0.012 285);
  --line:       oklch(0.91 0.011 285);
  --line-soft:  oklch(0.945 0.008 285);
  --ink:        oklch(0.22 0.025 285);
  --ink-2:      oklch(0.42 0.022 285);
  --ink-3:      oklch(0.52 0.02 285);

  /* Brand — taken from the bubble logo gradient */
  --accent:      oklch(0.52 0.21 290);
  --accent-ink:  oklch(0.44 0.2 290);
  --accent-soft: oklch(0.95 0.03 290);
  --on-accent:   oklch(0.99 0 0);
  --b-magenta:   oklch(0.66 0.24 335);
  --b-violet:    oklch(0.58 0.22 295);
  --b-blue:      oklch(0.6 0.19 260);

  /* State */
  --late:       oklch(0.55 0.2 25);
  --late-soft:  oklch(0.96 0.03 25);
  --today:      oklch(0.55 0.14 60);
  --today-soft: oklch(0.96 0.04 75);
  --ok:         oklch(0.55 0.13 155);
  --ok-soft:    oklch(0.96 0.03 155);

  /* Priority (same 4 levels as the real app) */
  --p-urgent: oklch(0.55 0.21 25);
  --p-high:   oklch(0.62 0.18 45);
  --p-medium: oklch(0.68 0.15 75);
  --p-low:    oklch(0.56 0.16 255);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', monospace; /* only for <kbd> */

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --shadow-pop: 0 1px 2px oklch(0.2 0.03 285 / 0.06), 0 12px 32px -8px oklch(0.2 0.05 285 / 0.18);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);        /* strong ease-out: enter/exit, hover */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* things moving on screen (tab indicator) */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* iOS-like sheet curve */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);      /* exits: gentle start, quick leave */
  /* Motion durations. JS twins (and due thresholds) live in js/redesign/motion.js: change both together. */
  --dur-fast: 150ms;  /* press, hover, small state flips */
  --dur-base: 220ms;  /* enter/exit of rows, chips, fades */
  --dur-slow: 320ms;  /* things travelling on screen (FLIP), drawers, pulses */

  --z-sticky: 10;
  --z-scrim: 40;
  --z-drawer: 50;
  --z-palette: 60;
  --z-menu: 65;
  --z-toast: 70;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:         oklch(0.17 0.014 285);
  --surface:    oklch(0.205 0.016 285);
  --rail:       oklch(0.15 0.013 285);
  --hover:      oklch(0.25 0.02 285);
  --line:       oklch(0.29 0.02 285);
  --line-soft:  oklch(0.25 0.017 285);
  --ink:        oklch(0.95 0.006 285);
  --ink-2:      oklch(0.78 0.014 285);
  --ink-3:      oklch(0.66 0.016 285);
  --accent:      oklch(0.7 0.17 295);
  --accent-ink:  oklch(0.8 0.13 295);
  --accent-soft: oklch(0.3 0.07 295);
  --on-accent:   oklch(0.16 0.02 285);
  --late:       oklch(0.72 0.17 25);
  --late-soft:  oklch(0.3 0.07 25);
  --today:      oklch(0.8 0.13 75);
  --today-soft: oklch(0.31 0.06 70);
  --ok:         oklch(0.76 0.13 155);
  --ok-soft:    oklch(0.29 0.05 155);
  --shadow-pop: 0 1px 2px oklch(0 0 0 / 0.3), 0 16px 40px -8px oklch(0 0 0 / 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  font-optical-sizing: auto;
  font-feature-settings: 'cv11'; /* single-storey a: softer, rounder, closer to the bubble mark */
  font-variant-numeric: tabular-nums; /* counts, dates and times line up without a mono face */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; } /* component display rules must never beat the hidden attribute */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

/* ── App frame ─────────────────────────────────────── */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }
.main { min-width: 0; display: flex; flex-direction: column; }

/* ── Sidebar ───────────────────────────────────────── */
.sidebar {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px;
  background: var(--rail);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.brand svg { width: 28px; height: 28px; flex: none; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-label { padding: 0 10px 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item svg { width: 18px; height: 18px; flex: none; }
:root:not([data-admin]) .nav-item[data-nav="admin"] { display: none; } /* tasks-store init() sets data-admin for web admins */
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-soft), 0 1px 2px oklch(0.2 0.03 285 / 0.05); }
.nav-item[aria-current="page"] svg { color: var(--accent); }
.nav-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font: 600 11px/1 var(--font);
  font-variant-numeric: tabular-nums; /* the font shorthand resets it; proportional digits sat off-centre */
  text-box: trim-both cap alphabetic; /* centre the digit itself, not the ascender/descender box */
}
.sidebar-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); }
.user-chip:hover { background: var(--hover); }
.user-chip .who { min-width: 0; flex: 1; }
.user-chip strong { display: block; font-weight: 600; font-size: 13px; }
.user-chip small { display: block; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.avatar {
  --av: var(--b-violet);
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--av) 18%, var(--surface));
  color: color-mix(in oklch, var(--av) 70%, var(--ink));
  font-size: 12px; font-weight: 600;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.xs { width: 20px; height: 20px; font-size: 9px; }
.tchip.person { padding-left: 3px; gap: 6px; }

.icon-btn {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:active { transform: scale(0.96); }

/* ── Topbar ────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 28px;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-title { font-size: 15px; font-weight: 600; }
.topbar .menu-btn { display: none; margin-left: -8px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar .online-now { display: inline-flex; align-items: center; margin-right: 4px; }
.online-now .avatar + .avatar { margin-left: -4px; }
/* Same cut-out gap as .astack (project-ui.css), which not every page loads. */
.online-now .avatar:not(:last-child) { -webkit-mask: radial-gradient(ellipse 62% 62% at 133% 50%, transparent 97%, #000 100%); mask: radial-gradient(ellipse 62% 62% at 133% 50%, transparent 97%, #000 100%); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.online-now .avatar.more { --av: var(--ink-3); }
.search-trigger {
  display: flex; align-items: center; gap: 8px;
  width: 260px; height: 36px; padding: 0 8px 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-3);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.search-trigger:hover { border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.search-trigger svg { width: 16px; height: 16px; }
.search-trigger kbd { margin-left: auto; }
kbd {
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg);
  font: 500 11px/1.4 var(--mono); color: var(--ink-3);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-weight: 550; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform 120ms var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--hover); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--accent-ink); }

/* ── Drawer ────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: oklch(0.2 0.03 285 / 0.28);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: var(--z-drawer);
  width: min(460px, calc(100vw - 16px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  transform: translateX(calc(100% + 16px));
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-drawer), visibility 0s linear var(--dur-slow);
}
.drawer.is-open { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-drawer), visibility 0s; }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line-soft); }
.drawer-head .crumb { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; min-width: 0; }
.drawer-head .icon-btn { margin-left: auto; }
.drawer-body { padding: 22px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.drawer-body h2 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.props { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; font-size: 13px; }
.props dt { color: var(--ink-3); }
.props dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.drawer-note { font-size: 12px; color: var(--ink-3); padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg); }

/* ── Select + menu ─────────────────────────────────── */
.select-btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 190px;
  height: 32px; padding: 0 10px 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform 120ms var(--ease);
}
.select-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn svg { width: 14px; height: 14px; flex: none; color: var(--ink-3); transition: transform var(--dur-base) var(--ease); }
.select-btn:hover { border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.select-btn:active { transform: scale(0.98); }
.select-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c); }

.menu {
  position: fixed; z-index: var(--z-menu);
  max-height: min(320px, 60vh); overflow-y: auto;
  padding: 6px; outline: 0;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  opacity: 0; transform: scale(0.96) translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.menu.is-open { opacity: 1; transform: none; }
.menu-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer; }
.menu-opt span:not(.avatar) { flex: 1; white-space: nowrap; } /* an avatar is a span too: it stretched into an oval */
.menu-opt svg { width: 16px; height: 16px; color: var(--accent); opacity: 0; }
.menu-opt[aria-selected="true"] { font-weight: 600; }
.menu-opt[aria-selected="true"] svg { opacity: 1; }
.menu-opt.is-active { background: var(--hover); }

/* ── Command palette (topbar search) ───────────────── */
.palette {
  width: min(560px, calc(100vw - 32px));
  margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.palette::backdrop { background: oklch(0.2 0.03 285 / 0.28); }
/* ponytail: palette opens with Ctrl K dozens of times a day, so it appears instantly on purpose */
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); }
.palette-input svg { width: 18px; height: 18px; color: var(--ink-3); }
.palette-input input { flex: 1; height: 52px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; }
.palette-input input::placeholder { color: var(--ink-3); }
.palette-list { list-style: none; margin: 0; padding: 8px; max-height: 340px; overflow-y: auto; }
.palette-list .grp { padding: 8px 10px 4px; font-size: 12px; color: var(--ink-3); }
.palette-list [role="option"] { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; }
.palette-list [role="option"] svg { width: 16px; height: 16px; color: var(--ink-3); }
.palette-list [role="option"] small { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.palette-list [aria-selected="true"] { background: var(--accent-soft); }
.palette-empty { padding: 24px; text-align: center; color: var(--ink-3); }

/* ── Toast ─────────────────────────────────────────── */
.toast-host { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); transform: translateX(-50%); display: grid; gap: 8px; }
.toast {
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-pop);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  @starting-style { opacity: 0; transform: translateY(10px) scale(0.97); }
}
.toast.is-leaving { opacity: 0; transform: translateY(10px) scale(0.97); }
/* Long toast with an action (Gmail spam warning): a rounded card instead of a pill. */
.toast.has-action { display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); border-radius: var(--r-lg); line-height: 1.45; }
.toast.has-action button { justify-self: end; height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: color-mix(in oklch, var(--bg) 18%, transparent); color: var(--bg); font: inherit; font-weight: 600; cursor: pointer; }
.toast.has-action button:hover { background: color-mix(in oklch, var(--bg) 28%, transparent); }

/* ── Photo colours (see projectVisual in shell.js) ──────
   .wash: the project's pastel gradient fading into the surface, like the real app's project headers.
   .glow: a border of the photo colours that follows the cursor. --g1..--g3 default to the logo gradient. */
:root { --g1: hsl(318 74% 62%); --g2: hsl(268 66% 62%); --g3: hsl(220 78% 60%); --wash-keep: 30%; --wash-alpha: 1; }
:root[data-theme="dark"] { --wash-keep: 70%; --g1: hsl(318 74% 68%); --g2: hsl(268 70% 70%); --g3: hsl(220 80% 68%); }
.wash { background:
  linear-gradient(180deg, color-mix(in oklch, var(--surface) var(--wash-keep), transparent) 0%, var(--surface) var(--wash-end, 78%)),
  var(--wash, linear-gradient(135deg, hsl(318 62% 82%), hsl(268 58% 81%) 52%, hsl(220 64% 80%))) var(--surface); }
.glow { position: relative; }
/* Edge light, like Google's "AI mode" button: an arc of the photo colours sits on the edge nearest the pointer
   and slides round the outline as the pointer moves (angle eased in JS, see shell.js). Nothing lights the inside.
   --ga = arc centre (0deg = top, clockwise) · --gi = strength 0..1 (stronger near the edge, fades out on leave). */
.glow::before, .glow::after {
  content: ''; position: absolute; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from calc(var(--ga, 0deg) - 55deg), transparent 0deg, var(--g1) 20deg, var(--g2) 55deg, var(--g3) 90deg, transparent 110deg);
  opacity: calc(var(--gi, 0) * var(--glow-alpha));
}
.glow::after { /* the lit edge */
  inset: -1px; padding: 1.25px; z-index: 1;
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glow::before { /* bloom: same arc, blurred, behind the card so only the spill outside shows */
  inset: 0; z-index: -1;
  filter: blur(12px);
  opacity: calc(var(--gi, 0) * var(--bloom-alpha));
}
/* A press scale (e.g. .bucket:active) makes a stacking context, which pulls the z-index:-1 bloom in front of the card's own background. */
.glow:active::before { opacity: 0; }
/* Same with an entrance animation (opacity/transform): keep the bloom off for exactly the card's own animation. */
.stagger > .glow::before { animation: glow-hold 1ms; animation-duration: inherit; animation-delay: inherit; animation-fill-mode: backwards; }
@keyframes glow-hold { from, to { opacity: 0; } }
:root { --glow-alpha: 1; --bloom-alpha: 0.5; }
:root[data-theme="dark"] { --glow-alpha: 0.9; --bloom-alpha: 0.3; }

/* Brand mark: the bubbles rise into place once per page load (rare = delight budget) */
.brand .mark-part { transform-box: fill-box; transform-origin: center; animation: bubble-rise 520ms var(--ease) backwards; }
.brand .mark-part + .mark-part { animation-delay: 70ms; }
.brand .mark-part + .mark-part + .mark-part { animation-delay: var(--dur-fast); }
@keyframes bubble-rise { from { opacity: 0; transform: translateY(5px) scale(0.85); } }

/* Theme switch crossfade (View Transitions; browsers without it just swap instantly) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); animation-timing-function: var(--ease); }

/* ── Task status colours (same 4 states as the real app) ── */
:root { --s-todo: oklch(0.62 0.02 285); --s-progress: oklch(0.56 0.17 255); --s-review: oklch(0.55 0.2 300); --s-done: var(--ok); }
:root[data-theme="dark"] { --s-todo: oklch(0.7 0.02 285); --s-progress: oklch(0.72 0.14 255); --s-review: oklch(0.74 0.15 300); }

/* ── Small controls shared by sections ─────────────── */
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn-danger { background: var(--late); border-color: transparent; color: var(--on-accent); }
.btn-danger:hover { background: color-mix(in oklch, var(--late) 85%, black); }
.btn-danger-ghost { border-color: transparent; background: none; color: var(--late); }
.btn-danger-ghost:hover { background: var(--late-soft); }
.field, .num-in, .time-in {
  height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; outline: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field::placeholder { color: var(--ink-3); }
.field:focus, .num-in:focus, .time-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.field { height: auto; padding: 8px 12px; resize: none; line-height: 1.5; }
.num-in { width: 64px; padding: 0 8px; text-align: center; }
.time-in { width: 92px; padding: 0 8px; border-radius: var(--r-pill); font-size: 13px; color-scheme: inherit; }
.time-in:invalid, .time-in[value=""]:not(:focus) { color: var(--ink-3); }
.time-in::-webkit-calendar-picker-indicator { display: none; } /* typed, no native clock popup */
.select-btn.wide { max-width: 100%; }
.date-btn svg:first-child { color: var(--ink-3); transform: none !important; }
.date-btn.is-empty { color: var(--ink-3); border-style: dashed; }
.date-btn[aria-expanded="true"] svg { transform: none; }

/* Switch (role="switch" checkbox) */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch svg { width: 16px; height: 16px; color: var(--ink-3); }
.switch .track { position: relative; width: 30px; height: 18px; border-radius: var(--r-pill); background: var(--line); transition: background-color var(--dur-fast) var(--ease); }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px oklch(0 0 0 / 0.2); transform-origin: left center; transition: transform var(--dur-fast) var(--ease), scale var(--dur-base) var(--m-spring, var(--ease)); }
/* Pressing the switch stretches the thumb toward where it will go, like a drop of liquid */
.switch:active .track::after { scale: 1.3 1; }
.switch input:checked + .track::after { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) { .switch:active .track::after { scale: none; } }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(12px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch.is-disabled { opacity: 0.5; cursor: not-allowed; }

/* Own checkbox (no native look). Moved here from team.html; goals.html uses it too. */
.cbx { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; display: grid; place-items: center; border: 1.5px solid color-mix(in oklch, var(--ink-3) 65%, transparent); border-radius: 5px; background: var(--surface); cursor: pointer;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), transform 120ms var(--ease); }
.cbx::after { content: ''; width: 8px; height: 4.5px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) scale(0.6); opacity: 0; transition: opacity 120ms var(--ease), transform var(--dur-fast) var(--ease); }
.cbx:checked, .cbx:indeterminate { background: var(--accent); border-color: var(--accent); }
.cbx:checked::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.cbx:indeterminate::after { width: 8px; height: 0; border-left: 0; border-bottom: 2px solid var(--on-accent); transform: none; opacity: 1; }
.cbx:active { transform: scale(0.9); }
.cbx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cbx:disabled { opacity: 0.4; cursor: not-allowed; }

/* Chip (tag, reminder) with a remove × */
.tchip { --tc: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--tc) 12%, var(--surface)); color: color-mix(in oklch, var(--tc) 70%, var(--ink)); font-size: 12.5px; font-weight: 550; }
.tchip .dot { width: 7px; height: 7px; }
.tchip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; opacity: 0.6; cursor: pointer; }
.tchip button:hover { opacity: 1; background: color-mix(in oklch, var(--tc) 18%, transparent); }
.tchip button svg { width: 11px; height: 11px; }

/* Date picker popover */
.datepop { width: 272px; padding: 10px; overflow: visible; max-height: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 6px; }
.dp-head strong { font-size: 13.5px; font-weight: 600; text-transform: capitalize; }
.dp-head .icon-btn { width: 30px; height: 30px; }
.dp-head .icon-btn svg { width: 15px; height: 15px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { height: 26px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.dp-day { height: 34px; border: 0; border-radius: var(--r-sm); background: none; font-size: 13px; cursor: pointer; transition: background-color 120ms var(--ease); }
.dp-day:hover { background: var(--hover); }
.dp-day.is-out { color: var(--ink-3); }
.dp-day.is-today { color: var(--accent-ink); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 45%, transparent); }
.dp-day[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: none; }
.dp-day:focus-visible { outline-offset: 0; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.dp-link, .td-link { height: 28px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--accent-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dp-link:hover, .td-link:hover { background: var(--accent-soft); }

/* Action menu (right-click / ···) + swatches */
.action-menu { min-width: 220px; }
.action-menu .menu-opt { width: 100%; border: 0; background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); }
.action-menu .menu-opt:hover, .action-menu .menu-opt:focus-visible { background: var(--hover); outline: 0; }
.action-menu .menu-opt > svg:first-child { opacity: 1; color: var(--ink-3); }
.action-menu .menu-opt .chev { opacity: 1; color: var(--ink-3); width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); }
.action-menu .menu-opt[aria-expanded="true"] .chev { transform: rotate(180deg); }
.action-menu .menu-opt.is-danger, .action-menu .menu-opt.is-danger > svg:first-child { color: var(--late); }
.action-menu .menu-opt.is-danger:hover { background: var(--late-soft); }
.action-menu .menu-opt.is-armed, .action-menu .menu-opt.is-armed:hover, .action-menu .menu-opt.is-armed:focus-visible { background: var(--late); color: var(--on-accent); }
.action-menu .menu-opt.is-armed > svg:first-child { color: inherit; }
.action-menu .tag-opt svg:last-child { margin-left: auto; }
.action-menu .tag-opt[aria-checked="true"] svg:last-child { opacity: 1; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line-soft); }
.menu-empty { padding: 8px 10px; color: var(--ink-3); font-size: 13px; }
.swatches { display: grid; grid-template-columns: repeat(7, 28px); gap: 6px; padding: 6px 10px 10px; }
.swatch-pop { padding: 8px 0 0; }
.swatch { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sw); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1); transition: transform 120ms var(--ease); }
.swatch:hover { transform: scale(1.1); }
.swatch svg { width: 14px; height: 14px; color: oklch(0.25 0.02 285); opacity: 0; }
.swatch[aria-checked="true"] { box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1), 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.swatch[aria-checked="true"] svg { opacity: 1; }
.swatch.is-none, .swatch-dot.is-none { background: linear-gradient(135deg, transparent 46%, var(--late) 46% 54%, transparent 54%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.swatch-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.12); }

/* Confirm dialog (confirmDialog in shell.js) — centered, fades/scales from the centre */
.confirm { width: min(400px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop);
  opacity: 1; transform: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete; }
@starting-style { .confirm[open] { opacity: 0; transform: scale(0.96); } }
.confirm:not([open]) { opacity: 0; transform: scale(0.96); transition-duration: var(--dur-fast); } /* exit: same path back, a touch faster */
.confirm::backdrop { transition: opacity var(--dur-fast) var(--ease), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete; }
@starting-style { .confirm[open]::backdrop { opacity: 0; } }
.confirm:not([open])::backdrop { opacity: 0; }
.confirm::backdrop { background: oklch(0.2 0.03 285 / 0.28); }
.confirm h3 { font-size: 17px; font-weight: 650; }
.confirm p { margin-top: 6px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.confirm form { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Custom repetition dialog */
.rec-dialog { width: min(460px, calc(100vw - 32px)); }
.rec-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.rec-row > :not(span:first-child) { justify-self: start; }
.rec-row:first-of-type { grid-template-columns: 112px auto 1fr; }
.seg-mini { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--bg); }
.seg-mini button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 12.5px; font-weight: 550; cursor: pointer; }
.seg-mini button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-soft), 0 1px 2px oklch(0.2 0.03 285 / 0.08); }
.rec-row .day-chips { display: flex; gap: 4px; } /* scoped: the dashboard also has a .day-chips row */
.rec-row .day-chips button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.rec-row .day-chips button[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.rec-count { display: inline-flex; align-items: center; gap: 8px; }
.rec-sum { margin-top: 16px !important; padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink) !important; font-weight: 550; }

/* ── Task drawer (shared/task-drawer.js) ───────────── */
.drawer.is-task { width: min(640px, calc(100vw - 16px)); }
.td { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.td-top { padding: 14px 24px 0; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.td-parent { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-left: -6px; padding: 3px 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-3); font-size: 12.5px; cursor: pointer; }
.td-parent:hover { background: var(--hover); color: var(--ink); }
.td-parent svg { width: 14px; height: 14px; }
.td-parent strong { color: var(--ink-2); font-weight: 600; }
.td-title { width: 100%; margin: 0 -8px; padding: 4px 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); resize: none; overflow: hidden;
  font: 650 22px/1.3 var(--font); letter-spacing: -0.018em; outline: 0; transition: background-color var(--dur-fast) var(--ease); box-sizing: content-box; }
.td-title:hover { background: var(--hover); }
.td-title:focus { background: var(--bg); box-shadow: 0 0 0 2px var(--accent-soft); }
.td-tabs { position: relative; display: flex; gap: 4px; margin: 6px -4px 0; }
.td-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; background: none; color: var(--ink-3); font-size: 13.5px; font-weight: 550; cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.td-tabs [role="tab"]:hover, .td-tabs [aria-selected="true"] { color: var(--ink); }
.td-tabs .count:empty { display: none; }
.td-tabs .count { min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--line-soft); font: 600 11px/18px var(--font); color: var(--ink-2); text-align: center; }
.td-ink { position: absolute; left: 0; bottom: -1px; width: 100px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; transition: transform var(--dur-base) var(--ease-in-out); }
.td-ink.no-anim { transition: none; }
.td-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 22px; }

.td-props { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13px; }
.td-props dt { align-self: start; display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink-3); }
.td-props dt svg { width: 16px; height: 16px; flex: none; }
.td-props dd { margin: 0; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.td-dates .td-when { display: inline-flex; gap: 4px; }
.td-to svg { width: 14px; height: 14px; color: var(--ink-3); display: block; }
.td-hint { flex-basis: 100%; color: var(--ink-3); font-size: 12px; line-height: 1.45; }
.td-creator { color: var(--ink); }
.td-creator small { color: var(--ink-3); font-size: 12.5px; }
.td-add { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px dashed var(--line); border-radius: var(--r-pill); background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 550; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.td-add svg { width: 13px; height: 13px; }
.td-add:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--line)); color: var(--accent-ink); background: var(--accent-soft); }
.td-remind { flex-direction: column; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 8px !important; padding-top: 6px; }
.td-remind .td-hint { flex-basis: auto; }
.drawer-head .crumb svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.td-switches { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.td-offsets { display: flex; flex-wrap: wrap; gap: 6px; }
.td-offsets:empty { display: none; }
.td-offset-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-offset-add .num-in { height: 32px; border-radius: var(--r-pill); }

.td-sec { display: flex; flex-direction: column; gap: 10px; }
.td-sec h3, .td-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.td-sec h3 svg { width: 16px; height: 16px; color: var(--ink-3); }
.td-sec-head { display: flex; align-items: center; gap: 10px; }
.td-sec-head .count { margin-left: 2px; font-size: 12px; color: var(--ink-3); }
.td-progress { flex: 1; max-width: 160px; height: 4px; margin-left: auto; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.td-progress i { display: block; height: 100%; background: var(--ok); transform-origin: left; transition: transform var(--dur-slow) var(--ease); }
.td-desc { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.55; resize: none; overflow: hidden; outline: 0; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.td-desc:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.td-inline .td-new { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.td-inline .td-new .field { flex: 1 1 160px; height: 32px; }
.td-inline .icon-btn { width: 32px; height: 32px; }
.td-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; }
.td-empty { color: var(--ink-3); font-size: 13px; padding: 8px 0; }

.st-list { display: flex; flex-direction: column; margin: 0 -8px; }
.st-list:empty { display: none; }
.st-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px 0 8px; border-radius: var(--r-sm); transition: background-color var(--dur-fast) var(--ease); }
.st-row:hover { background: var(--hover); }
.st-row .icon-btn { width: 30px; height: 30px; opacity: 0; transition: opacity 120ms var(--ease); }
.st-row:hover .icon-btn, .st-row:focus-within .icon-btn, .st-row .icon-btn[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .st-row .icon-btn { opacity: 1; } }
.st-title { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-title:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.st-row.is-done .st-title { color: var(--ink-3); text-decoration: line-through; }
.spill { --sc: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--r-pill); background: color-mix(in oklch, var(--sc) 13%, var(--surface)); color: color-mix(in oklch, var(--sc) 80%, var(--ink)); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.spill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sc); }
.due-mini { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.due-mini.is-late { color: var(--late); font-weight: 550; }

/* Round completion check (list rows, subtasks, board) — fills green when done */
.check { width: 20px; height: 20px; flex: none; display: grid; place-items: center; padding: 0; border: 1.5px solid color-mix(in oklch, var(--ink-3) 70%, transparent); border-radius: 50%; background: none; color: transparent; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform 120ms var(--ease); }
.check svg { width: 12px; height: 12px; }
.check:hover { border-color: var(--ok); color: color-mix(in oklch, var(--ok) 60%, transparent); }
.check:active { transform: scale(0.9); }
.check[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }

.res-list { display: flex; flex-direction: column; gap: 6px; }
.res-list:empty { display: none; }
.res { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 6px; border: 1px solid var(--line-soft); border-radius: var(--r-md); transition: border-color var(--dur-fast) var(--ease); }
.res:hover { border-color: var(--line); }
.res a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px; border-radius: var(--r-sm); }
.res-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); }
.res-ic svg { width: 15px; height: 15px; }
.res-txt { min-width: 0; }
.res-txt strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-txt small { display: block; font-size: 12px; color: var(--ink-3); }
.res .icon-btn { width: 30px; height: 30px; }
.res .icon-btn svg { width: 14px; height: 14px; }

.cm-compose { display: flex; gap: 10px; align-items: flex-start; }
.cm-box { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.cm-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cm-box textarea { display: block; width: 100%; min-height: 40px; padding: 10px 12px 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.5; resize: none; overflow: hidden; outline: 0; }
.cm-box textarea::placeholder { color: var(--ink-3); }
.cm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 6px; }
.cm-actions small { margin-right: auto; padding-left: 6px; color: var(--ink-3); font-size: 11.5px; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cm { display: flex; gap: 10px; padding: 10px 0; }
.cm.is-new { transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); @starting-style { opacity: 0; transform: translateY(-4px); } }
.cm-main { flex: 1; min-width: 0; }
.cm-head { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13px; }
.cm-head time, .cm-head small { color: var(--ink-3); font-size: 12px; }
.cm-head .icon-btn { width: 28px; height: 28px; margin-left: auto; opacity: 0; transition: opacity 120ms var(--ease); }
.cm:hover .cm-head .icon-btn, .cm:focus-within .cm-head .icon-btn, .cm-head .icon-btn[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .cm-head .icon-btn { opacity: 1; } }
.cm-text { margin-top: 2px; padding: 10px 12px; border-radius: 4px var(--r-md) var(--r-md) var(--r-md); background: var(--bg); color: var(--ink); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-edit { margin-top: 4px; }
.cm-edit .field { width: 100%; }

.tm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tm-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.tm-card span { font-size: 12.5px; color: var(--ink-3); }
.tm-card strong { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.tm-card small { font-size: 12px; color: var(--ink-3); }
.tm-people { list-style: none; margin: -8px 0 0; padding: 0; }
.tm-people li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 120px auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.tm-who strong { display: block; font-size: 13.5px; font-weight: 600; }
.tm-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); font-weight: 550; }
.tm-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: live-pulse 1.6s var(--ease) infinite; }
@keyframes live-pulse { 50% { opacity: 0.35; } }
.tm-bar { height: 6px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.tm-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.tm-sec { font-size: 13px; font-weight: 600; white-space: nowrap; }

@media (max-width: 600px) {
  .td-top, .td-body { padding-left: 16px; padding-right: 16px; }
  .td-props { grid-template-columns: 1fr; gap: 2px; }
  .td-props dt { min-height: 24px; margin-top: 8px; }
  .tm-people li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .tm-bar { display: none; }
  .rec-row, .rec-row:first-of-type { grid-template-columns: 1fr; }
}

/* ── Responsive shell ──────────────────────────────── */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer);
    width: 272px;
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-drawer);
    box-shadow: var(--shadow-pop);
  }
  .sidebar.is-open { transform: none; }
  .topbar { padding: 0 16px; }
  .topbar .menu-btn { display: grid; }
  .search-trigger { width: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .btn-friends span { display: none; }
  .btn-friends { width: 36px; padding: 0; }
}
@media (max-width: 480px) {
  .btn-new span { display: none; }
  .btn-new { width: 36px; padding: 0; }
}

/* Press feedback for controls that had none (tabs, menu rows, dashed adds, date cells) */
.menu-opt, .td-tabs [role="tab"], .td-add, .dp-day { transition-property: background-color, color, border-color, transform; transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast); transition-timing-function: var(--ease); }
.menu-opt:active, .td-tabs [role="tab"]:active, .td-add:active, .dp-day:active { transform: scale(0.97); }

/* Cross-page navigation: short crossfade instead of a hard cut (same-origin MPA) */
@view-transition { navigation: auto; types: nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-fast); animation-timing-function: var(--ease); }
/* The sidebar stays put while the content fades: shell.js paints it before first render, so old and new match
   and swap in one frame (only the active item changes). Scoped to navigation so the theme switch still fades it. */
:root:active-view-transition-type(nav) .sidebar { view-transition-name: sidebar; }
::view-transition-group(sidebar), ::view-transition-old(sidebar), ::view-transition-new(sidebar) { animation: none; }
::view-transition-old(sidebar) { display: none; }

/* One-shot accent wash on a row/card that just appeared or was changed by someone else (motion.js highlight).
   Overlay opacity only; holds briefly, then fades. Hosts are position: relative; isolation + z-index -1 keep it
   above the row's own background but under its text. */
.m-flash { isolation: isolate; }
.m-flash::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent-soft); pointer-events: none;
  animation: m-flash var(--dur-slow) var(--ease-in) 700ms both; }
@keyframes m-flash { from { opacity: 0.9; } to { opacity: 0; } }

/* Live due states (js/redesign/motion.js): soon → today → imminent → late. Base .due / .is-today / .is-late live with
   each page; these add the rest. Colour always comes with a text hint ("En 45 min ·", "Vencida ·"), never colour alone. */
.due { transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.due.is-soon { color: var(--ink); }
.due.is-imminent { background: color-mix(in oklch, var(--today) 24%, var(--surface)); color: var(--today); font-weight: 600; }
.due[data-due-hint]::before, .when[data-due-hint]::before { content: attr(data-due-hint) " ·"; font-weight: 600; }
.due svg { order: -1; }

/* Animated icons (js/redesign/icon-motion.js): a paper plane may fly past its own box */
svg[data-glyph] { overflow: visible; }
/* Due chip about to expire gets a ticking clock (icon-motion.js); it stands in for the calendar icon */
.due .due-clock { display: inline-block; width: 12px; height: 12px; flex: none; vertical-align: -2px; margin-right: 3px; }
.due .due-clock ~ svg { display: none; }

/* Completion check: the tick grows in when pressed (re-rendered checks start full, so no replay) */
.check svg { scale: 0.7; transition: scale var(--dur-base) var(--ease); }
.check[aria-pressed="true"] svg { scale: 1; }

/* Reduced motion: keep fades that explain state, drop movement */
@media (prefers-reduced-motion: reduce) {
  .drawer { transform: none; opacity: 0; transition: opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base); }
  .drawer.is-open { opacity: 1; transition: opacity var(--dur-base) var(--ease), visibility 0s; }
  .toast, .toast.is-leaving, .menu { transform: none; }
  .brand .mark-part { animation: none; }
  .sidebar { transition-property: opacity; }
  .btn:active, .icon-btn:active, .check:active, .swatch:hover, .menu-opt:active, .td-tabs [role="tab"]:active, .td-add:active, .dp-day:active { transform: none; }
  .td-ink { transition: none; }
  .check svg { scale: 1; }
  .cm.is-new { transition: opacity var(--dur-base) var(--ease); @starting-style { transform: none; } }
  .confirm { transform: none; }
}

/* ── Timesheets timer widget (sidebar, above the profile; real css/components/timesheet-widget.css) ── */
.tw { flex: none; margin-top: auto; margin-bottom: 4px; padding: 12px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-md); --wash-end: 100%;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
@starting-style { .tw { opacity: 0; transform: translateY(8px); } }
.tw.is-leaving { opacity: 0; transform: translateY(8px); transition-duration: var(--dur-fast); }
.tw + .sidebar-foot { margin-top: 0; }
.tw-ctx { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.tw-tile { width: 32px; height: 32px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: color-mix(in oklch, var(--pc) 16%, var(--surface)); color: var(--pc); }
.tw-tile img { width: 100%; height: 100%; object-fit: cover; }
.tw-tile svg { width: 17px; height: 17px; }
.tw-copy { min-width: 0; display: flex; flex-direction: column; }
.tw-copy small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-copy strong { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .tw-ctx:hover strong { color: var(--accent-ink); } }
.tw-details { display: flex; flex-wrap: wrap; gap: 4px; }
.tw-details span { height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: color-mix(in oklch, var(--surface) 75%, transparent); color: var(--ink-2); font-size: 11px; font-weight: 550; }
.tw-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tw-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok); }
.tw-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tw-rec 1.6s ease-in-out infinite; }
.tw.is-paused .tw-status { color: var(--today); }
.tw.is-paused .tw-status i { animation: none; }
@keyframes tw-rec { 50% { opacity: 0.25; } }
.tw-clock { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; }
.tw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tw-actions .btn { justify-content: center; gap: 6px; padding: 0 8px; background: var(--surface); }
.tw-actions .btn svg { width: 12px; height: 12px; }
.tw-actions .btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .tw, .tw.is-leaving { transform: none; } .tw-status i { animation: none; } }

/* ── Collapsed sidebar rail (Settings › Apariencia «Menú colapsado por defecto»; desktop only) ── */
@media (min-width: 961px) {
  :root[data-rail] .app { grid-template-columns: 68px 1fr; }
  :root[data-rail] .sidebar { padding: 16px 10px; align-items: center; }
  :root[data-rail] .brand { padding: 4px 0 16px; }
  /* labels stay for screen readers (visually hidden), the rest goes */
  :root[data-rail] .brand span,
  :root[data-rail] .nav-item > span:not(.nav-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root[data-rail] [data-theme-toggle] { width: 40px !important; }
  :root[data-rail] .nav-label,
  :root[data-rail] .user-chip .who,
  :root[data-rail] .user-chip .icon-btn,
  :root[data-rail] .tw { display: none; }
  :root[data-rail] .nav-group { align-items: center; }
  :root[data-rail] .nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  :root[data-rail] .nav-item { position: relative; width: 40px; padding: 0; justify-content: center; }
  :root[data-rail] .nav-badge { position: absolute; top: 1px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  :root[data-rail] .sidebar-foot { align-items: center; }
  :root[data-rail] .user-chip { padding: 4px; }
}

/* ══ Iris (js/components/ai-assistant.js + css/components/ai-assistant.css, unchanged) ══
   Its stylesheet uses the old base.css tokens; map them onto the redesign ones so it follows light/dark. */
.ai-assistant {
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3);
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --fw-medium: 550; --radius-xl: var(--r-lg);
  --border: var(--line-soft); --border-focus: var(--accent);
  --bg-surface: var(--surface); --bg-page: var(--bg); --bg-overlay: var(--hover);
  --accent-light: var(--accent-soft); --accent-text: var(--accent-ink);
  --status-done-bg: var(--ok-soft); --status-done-text: var(--ok);
  --status-inprog-bg: color-mix(in oklch, var(--p-low) 14%, var(--surface)); --status-inprog-text: var(--p-low);
  --status-review-bg: var(--accent-soft); --status-review-text: var(--accent-ink);
  --status-warning-bg: var(--today-soft); --status-warning-text: var(--today);
  --error-bg: var(--late-soft);
  z-index: var(--z-drawer);
  color: var(--ink);
}
/* ai-assistant.css hard-codes light colours (it predates dark mode): give them dark counterparts. */
:root[data-theme="dark"] .ai-assistant .ai-message-bubble { background: var(--hover); }
:root[data-theme="dark"] .ai-assistant .ai-message--assistant .ai-message-bubble { background: var(--bg); }
:root[data-theme="dark"] .ai-assistant .ai-message--rich .ai-message-bubble { background: transparent; }
:root[data-theme="dark"] .ai-assistant .ai-message--user .ai-message-bubble { background: var(--accent-soft); color: var(--ink); }
:root[data-theme="dark"] .ai-assistant .ai-message--error .ai-message-bubble { background: var(--error-bg); color: var(--ink); }
:root[data-theme="dark"] .ai-assistant .ai-avatar { background: var(--surface); }
:root[data-theme="dark"] .ai-assistant :is(.ai-preview-details dt, .ai-field-icon) { color: var(--ink-3); }
:root[data-theme="dark"] .ai-assistant .ai-value-chip--low { background: color-mix(in oklch, var(--p-low) 18%, var(--surface)); color: var(--ink); }
:root[data-theme="dark"] .ai-assistant .ai-value-chip--medium { background: color-mix(in oklch, var(--p-medium) 18%, var(--surface)); color: var(--ink); }
:root[data-theme="dark"] .ai-assistant :is(.ai-value-chip--high, .ai-value-chip--urgent) { background: var(--late-soft); color: var(--ink); }
:root[data-theme="dark"] .ai-assistant .ai-preview-note { color: var(--ok); }
:root[data-theme="dark"] .ai-assistant .ai-audio-button { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--line); }
:root[data-theme="dark"] .ai-assistant .ai-audio-button:hover { background: var(--hover); }
:root[data-theme="dark"] .ai-assistant :is(.ai-audio-time, .ai-audio-status) { color: var(--ink-2); }
:root[data-theme="dark"] .ai-assistant .ai-recording { background: var(--late-soft); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .ai-assistant .ai-recording .ai-audio-button { background: var(--surface); color: var(--late); border-color: var(--line); }

/* ── Segmented tabs with counter («Tu foco», Recordatorios). Moved from index.html; the ink is placed by JS (moveInk). ── */
.tabs { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--bg); }
.tab { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: var(--ink-2); font-weight: 550; transition: color var(--dur-fast) var(--ease); }
.tab svg { width: 16px; height: 16px; }
.tab:hover, .tab[aria-selected="true"] { color: var(--ink); }
.tab .count { min-width: 22px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--line-soft); font: 600 11px/18px var(--font); color: var(--ink-2); }
.tab[data-tab="overdue"] .count.has { background: var(--late-soft); color: var(--late); }
.tab[aria-selected="true"] .count { background: var(--accent-soft); color: var(--accent-ink); }
.tab-ink { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 9px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-soft), 0 1px 3px oklch(0.2 0.03 285 / 0.08); transition: transform 250ms var(--ease-in-out); }

/* Persistent shell (app.html + js/redesign/embed.js): the sidebar lives in app.html and the section in a frame.
   The frame spans the whole window, so the section's breakpoints see the same width as before; its own sidebar
   only keeps its column (invisible) and the shell's sidebar sits on top of it. */
:root[data-embed]:not([data-cover]) .sidebar { visibility: hidden; }
.shell-frame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; }
/* An overlay of the section covers the sidebar column (shell.js): the frame goes on top, its own sidebar under it */
.shell-frame[data-cover] { z-index: 2; }
.app:has(> .main > .shell-frame) > .sidebar { z-index: 1; }