/* ───────────── Tokens ───────────── */
:root {
  --bg: #f7f4ee;
  --surface: #fffdf9;
  --surface-2: #f1ece3;
  --card: #fffdf9;
  --raised: #fffdf9;
  --field: #faf7f2;
  --basket-bg: #faf7f1;
  --chrome: #f3eee5; /* logo + account strips of the sidebar, top-right controls */
  --nav-bg: #eee8dd; /* baskets area of the sidebar */
  --hover: rgba(40, 28, 12, 0.045);
  --border: #e6dfd3;
  --border-strong: #d6cdbe;
  --pill-base: var(--card); --pill-tint: 0%; --pill-ring: 0%; /* active project highlight */
  --text: #1f1b16;
  --muted: #6f675c;
  --faint: #a79e90;
  --accent: oklch(0.57 0.13 45);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --green: #12a46b;
  --amber: #e09412;
  --red: #e0475f;

  --shadow-sm: 0 1px 2px rgba(24, 24, 16, 0.05);
  --shadow: 0 1px 2px rgba(24, 24, 16, 0.04), 0 8px 24px -10px rgba(24, 24, 16, 0.12);
  --shadow-lg: 0 2px 6px rgba(24, 24, 16, 0.04), 0 30px 70px -20px rgba(24, 24, 16, 0.22);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --tip-bg: #fffdf9;
  --tip-fg: #1f1b16;
  --tip-border: #e2dace;
  --scrim: rgba(24, 24, 16, 0.28);
  --scroll-thumb: rgba(24, 24, 16, 0.16);
  --scroll-thumb-hover: rgba(24, 24, 16, 0.3);
  color-scheme: light;
}

/* Dark theme: chosen explicitly (data-theme="dark"), or following the OS when on "System". */
:root[data-theme="dark"] {
  --bg: #0f0d0b;
  --surface: #181512;
  --surface-2: #26221d;
  --card: #201c18;
  --raised: #29241f;
  --field: #13110e;
  --basket-bg: #1e1a16; --chrome: #1f1b17; --nav-bg: #13110e;
  --hover: rgba(255, 255, 255, 0.07);
  --border: #37312a;
  --border-strong: #4d463c;
  --pill-base: #2c2620; --pill-tint: 14%; --pill-ring: 55%;
  --text: #f3efe8;
  --muted: #b0a798;
  --faint: #8a8173;
  --accent: oklch(0.73 0.11 50);
  --accent-soft: color-mix(in srgb, var(--accent) 17%, transparent);
  --green: #34c98d;
  --amber: #f3b23f;
  --red: #f4727f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  --tip-bg: #2c2620;
  --tip-fg: #f3efe8;
  --tip-border: #4d463c;
  --scrim: rgba(0, 0, 0, 0.55);
  --scroll-thumb: rgba(255, 255, 255, 0.14);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.26);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0d0b;
    --surface: #181512;
    --surface-2: #26221d;
    --card: #201c18;
    --raised: #29241f;
    --field: #13110e;
    --basket-bg: #1e1a16; --chrome: #1f1b17; --nav-bg: #13110e;
    --hover: rgba(255, 255, 255, 0.07);
    --border: #37312a;
    --border-strong: #4d463c;
    --pill-base: #2c2620; --pill-tint: 14%; --pill-ring: 55%;
    --text: #f3efe8;
    --muted: #b0a798;
    --faint: #8a8173;
    --accent: oklch(0.73 0.11 50);
    --accent-soft: color-mix(in srgb, var(--accent) 17%, transparent);
    --green: #34c98d;
    --amber: #f3b23f;
    --red: #f4727f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.75);
    --tip-bg: #2c2620;
    --tip-fg: #f3efe8;
    --tip-border: #4d463c;
    --scrim: rgba(0, 0, 0, 0.55);
    --scroll-thumb: rgba(255, 255, 255, 0.14);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.26);
    color-scheme: dark;
  }
}

/* Theme switch fallback when View Transitions aren't available */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease) !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: var(--ease); }

/* ───────────── Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.55 var(--font); letter-spacing: -0.006em;
  font-optical-sizing: auto; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }

/* Themed scrollbars: slim rounded thumbs that follow light/dark. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 99px;
  border: 3.5px solid transparent; background-clip: padding-box; min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* Icons render from an icon font; line them up like inline SVGs. */
.fi { display: inline-flex; line-height: 1; font-size: 15px; }
.fi::before { line-height: 1; }

/* Lottie players fade in once their animation has loaded, instead of popping in. */
.lottie { display: block; opacity: 0; transform: scale(0.94); transition: opacity 0.5s var(--ease), transform 0.7s var(--ease); }
.lottie.ready { opacity: 1; transform: none; }

.logo { color: var(--accent); width: 22px; height: 22px; display: inline-grid; }
.logo svg { width: 100%; height: 100%; }

/* The VerLogs mark: brackets around a stack of log lines. The lines write themselves in one by one,
   hold, fade and start over, while the brackets give a small "open" nudge. Static with reduced motion. */
.vl-mark .vl-ln { stroke-dasharray: 1; stroke-dashoffset: 0; }
.vl-mark .vl-br, .vl-mark .vl-dot { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .vl-mark .vl-dot { animation: vl-pop 3s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.16s) infinite both; }
  .vl-mark .vl-ln { animation: vl-write 3s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.16s + 0.1s) infinite both; }
  .vl-mark .vl-l { animation: vl-open-l 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
  .vl-mark .vl-r { animation: vl-open-r 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
}
@keyframes vl-write {
  0% { stroke-dashoffset: 1; opacity: 1; }
  14% { stroke-dashoffset: 0; }
  78% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes vl-pop {
  0% { transform: scale(0); opacity: 1; }
  8% { transform: none; }
  78% { transform: none; opacity: 1; }
  90%, 100% { transform: none; opacity: 0; }
}
@keyframes vl-open-l { 0%, 16%, 100% { transform: none; } 6% { transform: translateX(-1.3px); } }
@keyframes vl-open-r { 0%, 16%, 100% { transform: none; } 6% { transform: translateX(1.3px); } }

.icon-btn {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-grid; place-items: center; color: var(--muted);
  transition: background 0.2s, color 0.2s, transform 0.2s var(--spring), opacity 0.2s;
}
.icon-btn .fi { font-size: 15px; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn.danger:hover { color: var(--red); }
.icon-btn.sm { width: 24px; height: 24px; border-radius: 7px; }
.icon-btn.sm .fi { font-size: 13px; }

.btn-primary {
  height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--text); color: var(--bg); font-weight: 500;
  transition: transform 0.2s var(--spring), opacity 0.2s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { transform: scale(0.97); }

.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 8px;
  color: var(--muted); font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.ghost-btn .fi { font-size: 11px; }
.ghost-btn:hover { background: var(--hover); color: var(--text); }

.text-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 4px 8px; border-radius: 6px; transition: color 0.2s, background 0.2s; }
.text-btn .fi { font-size: 12px; }
.text-btn:hover { background: var(--hover); color: var(--text); }
.text-btn.danger:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }

.btn-secondary, .btn-danger {
  height: 36px; padding: 0 16px; border-radius: 10px; font-weight: 500; font-size: 13.5px;
  transition: transform 0.2s var(--spring), background 0.2s, box-shadow 0.25s, opacity 0.2s;
}
.btn-secondary { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn-secondary:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { opacity: 0.9; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--red) 60%, transparent); }
.btn-secondary:active, .btn-danger:active { transform: scale(0.97); }


/* Generic reveal: grid-rows trick for smooth height animation */
.reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.reveal.open { grid-template-rows: 1fr; }
.reveal > .clip { overflow: hidden; min-height: 0; }

/* ───────────── Screens ───────────── */
.screen { transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); }
.screen.entering, .screen.leaving { opacity: 0; transform: scale(0.985); }

.boot {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--bg); color: var(--muted); font-size: 13.5px;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot.done .boot-card { transform: scale(1.04); filter: blur(2px); }
.boot.overlay { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(8px); }
/* Only show the loader if loading takes a moment, so fast reloads don't flicker. */
.boot-card {
  display: grid; justify-items: center; gap: 6px;
  animation: rise 0.6s var(--ease) 0.25s both;
  transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}
.boot-art { width: 104px; height: 104px; }
.boot-line { display: flex; align-items: baseline; margin: 0; min-height: 1.5em; font-weight: 500; color: var(--text); }
#boot-msg { display: inline-block; }
.boot-dots { display: inline-flex; gap: 3px; margin-left: 3px; }
.boot-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.25; animation: dot 1.2s var(--ease) infinite; }
.boot-dots i:nth-child(2) { animation-delay: 0.15s; }
.boot-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.boot-bar { position: relative; width: 160px; height: 3px; margin-top: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.boot-line { font-size: 15px; font-weight: 550; }

/* Step checklist: every step stays readable — upcoming, current and finished. */
.boot-steps {
  list-style: none; margin: 14px 0 4px; padding: 14px 16px; display: grid; gap: 10px;
  min-width: 300px; max-width: min(380px, calc(100vw - 48px));
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  animation: rise 0.45s var(--ease) both;
}
.boot-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--faint); transition: color 0.35s var(--ease); }
.step-label { min-width: 0; overflow-wrap: anywhere; }
.step-mark {
  position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); color: transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--spring);
}
.step-mark .fi { font-size: 10px; }
.boot-steps li[data-state="active"] { color: var(--text); font-weight: 550; }
.boot-steps li[data-state="active"] .step-mark { border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.boot-steps li[data-state="done"] { color: var(--muted); }
.boot-steps li[data-state="done"] .step-mark { background: var(--green); border-color: var(--green); color: #fff; animation: step-pop 0.4s var(--spring); }
@keyframes step-pop { from { transform: scale(0.6); } }
.boot-bar span {
  position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: indeterminate 1.4s var(--ease) infinite;
}
@keyframes indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────── Login ───────────── */
.login { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 16px; }
.login-theme { position: absolute; top: 14px; right: 14px; z-index: 1; width: 34px; height: 34px; border-radius: 10px; }
.orbs span {
  position: absolute; width: 48vmax; height: 48vmax; border-radius: 50%;
  filter: blur(70px); opacity: 0.5; animation: drift 22s var(--ease) infinite alternate;
}
.orbs span:nth-child(1) { background: radial-gradient(circle, var(--accent-soft), transparent 65%); top: -18vmax; left: -10vmax; }
.orbs span:nth-child(2) { background: radial-gradient(circle, color-mix(in srgb, var(--green) 16%, transparent), transparent 65%); bottom: -22vmax; right: -12vmax; animation-delay: -7s; }
.orbs span:nth-child(3) { background: radial-gradient(circle, color-mix(in srgb, #8b5cf6 12%, transparent), color-mix(in srgb, #06b6d4 5%, transparent) 40%, transparent 65%); /* QLOOQ's violet → cyan */ top: 30%; left: 45%; width: 30vmax; height: 30vmax; animation-delay: -14s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vmax, 3vmax) scale(1.08); }
  100% { transform: translate(-3vmax, 5vmax) scale(0.96); }
}

.login-card {
  position: relative; width: min(380px, 100%);
  padding: 22px 32px 22px; text-align: center;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg);
}
.login-card > * { animation: rise 0.7s var(--ease) both; }
.login-card > :nth-child(2) { animation-delay: 0.05s; }
.login-card > :nth-child(3) { animation-delay: 0.1s; }
.login-card > :nth-child(4) { animation-delay: 0.16s; }
.login-card > :nth-child(n + 5) { animation-delay: 0.22s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.login-logo {
  display: block; width: 76px; height: 76px; margin: 14px auto 16px; color: var(--accent);
  filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--accent) 38%, transparent));
}
.login-logo svg { width: 100%; height: 100%; display: block; }

.login h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.032em; }
.tagline { margin: 6px 0 26px; color: var(--muted); }

.btn-google {
  position: relative; width: 100%; height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); font-weight: 500; box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--spring), box-shadow 0.25s var(--ease), border-color 0.2s;
}
.btn-google:hover:not(:disabled) { box-shadow: var(--shadow); border-color: var(--faint); transform: translateY(-1px); }
.btn-google:active:not(:disabled) { transform: scale(0.98); }
.btn-google:disabled { opacity: 0.55; }
.g-icon { width: 18px; height: 18px; }
.btn-spinner {
  position: absolute; right: 16px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  opacity: 0; animation: spin 0.8s linear infinite; transition: opacity 0.2s;
}
.btn-google.busy .btn-spinner { opacity: 1; }

.login-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.login-note:not(:empty) { margin-top: 12px; }
.login-note.error { color: var(--red); }

.link-btn { margin-top: 14px; font-size: 13px; color: var(--muted); padding: 4px 6px; border-radius: 6px; transition: color 0.2s; }
.link-btn:hover { color: var(--text); }

.login-points { list-style: none; margin: 22px 0 14px; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 8px; text-align: left; }
.login-points li { display: flex; gap: 9px; align-items: center; font-size: 12.5px; color: var(--muted); }
.login-points .fi { color: var(--green); font-size: 14px; }

/* ───────────── App layout ───────────── */
.app {
  display: grid; grid-template-columns: 296px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  gap: 8px; padding: 8px; height: 100dvh;
}

/* Sidebar and workspace are matching raised panels. */
.sidebar {
  display: flex; flex-direction: column; padding: 14px 10px 10px; min-height: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm);
}
/* Centered logo on its own tinted strip (the account strip at the bottom matches). */
.brand {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 44px; margin-bottom: 14px;
  background: var(--chrome); border: 1px solid var(--border); border-radius: 12px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
}
/* "Developed by" monogram in the strip's right corner → omkarpathak.com */
.dev-badge {
  position: absolute; right: 9px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 9px;
  display: grid; place-items: center; text-decoration: none; color: var(--muted);
  background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
  transition: color 0.2s, box-shadow 0.25s, transform 0.25s var(--spring);
}
.dev-mark { font-size: 13px; line-height: 1; display: grid; }
.dev-badge:hover {
  color: #fff; transform: translateY(-1px) scale(1.06);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ec4899));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.dev-badge:active { transform: scale(0.94); }
.dev-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.noscript { max-width: 560px; margin: 12vh auto; padding: 24px; line-height: 1.6; }
.noscript h2 { font-size: 24px; letter-spacing: -0.02em; }
.noscript a { color: var(--accent); }

/* ───────────── QLOOQ (qlooq.cfd — the family of apps VerLogs belongs to) ─────────────
   Its brand: an indigo → violet → cyan tile with the "oo" mark, and the "QLOOQ .cfd" wordmark. */
:root { --qlooq-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%); --qlooq: #8b5cf6; }
.qlooq-mark {
  flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--qlooq-grad); box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--qlooq) 70%, transparent);
}
.qlooq-mark svg { width: 64%; height: 64%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.qlooq-mark.sm { width: 16px; height: 16px; border-radius: 5px; box-shadow: none; }
.qlooq-mark.sm svg { stroke-width: 3; }
.qlooq-word { font-weight: 650; letter-spacing: -0.02em; }
.qlooq-tld {
  font: 600 10.5px/1 var(--mono); padding: 3px 5px; border-radius: 6px;
  color: var(--qlooq); background: color-mix(in srgb, var(--qlooq) 12%, transparent);
}
/* Login: brand chip in the top-left corner (the theme button sits top-right). */
.qlooq-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 5px; border-radius: 11px;
  color: var(--text); text-decoration: none; font-size: 13.5px;
  background: color-mix(in srgb, var(--surface) 75%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--spring), box-shadow 0.25s, border-color 0.25s;
}
.qlooq-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--qlooq) 40%, var(--border)); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--qlooq) 60%, transparent); }
.login-qlooq { position: absolute; top: 14px; left: 14px; z-index: 1; animation: rise 0.7s var(--ease) 0.3s both; }
.login-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 0; font-size: 12px; color: var(--faint);
}
.login-foot a { color: var(--muted); text-decoration: none; border-radius: 4px; transition: color 0.2s; }
.login-foot a:hover { color: var(--text); }
.login-foot-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.login-foot-brand:hover { color: var(--qlooq) !important; }
/* Sidebar logo strip: the QLOOQ tile mirrors the developer badge, in the left corner. */
.qlooq-badge {
  position: absolute; left: 9px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 9px;
  display: grid; place-items: center; text-decoration: none;
  background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
  transition: box-shadow 0.25s, transform 0.25s var(--spring);
}
.qlooq-badge .qlooq-mark { width: 20px; height: 20px; border-radius: 6px; box-shadow: none; filter: saturate(0.75); transition: filter 0.25s; }
.qlooq-badge:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--qlooq) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--qlooq) 35%, var(--border)); }
.qlooq-badge:hover .qlooq-mark { filter: none; }
.qlooq-badge:active { transform: scale(0.94); }
.qlooq-badge:focus-visible { outline: 2px solid var(--qlooq); outline-offset: 2px; }
/* About: "Part of QLOOQ" card with links to the shared privacy policy and terms. */
.qlooq-mark.lg { width: 38px; height: 38px; border-radius: 11px; }
.about-qlooq { padding: 12px 14px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--qlooq) 22%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, #6366f1 7%, var(--basket-bg)), color-mix(in srgb, #06b6d4 6%, var(--basket-bg))); }
.about-qlooq-card { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; border-radius: 10px; }
.about-qlooq-card > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.35; }
.about-qlooq-card b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.about-qlooq-card small { font-size: 12px; color: var(--muted); }
.about-qlooq-card:hover .about-dev-go { color: var(--qlooq); }
.about-qlooq-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.about-qlooq-links a {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px;
  font-size: 12px; color: var(--muted); text-decoration: none; background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
  transition: color 0.2s, box-shadow 0.2s;
}
.about-qlooq-links a .fi { font-size: 11px; }
.about-qlooq-links a:hover { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qlooq) 40%, var(--border)); }
/* Baskets area: a tinted panel between the logo and account strips; basket cards sit lighter on top. */
.side-mid {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 10px 8px 0; background: var(--nav-bg); border: 1px solid var(--border); border-radius: 12px;
}
.side-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 6px 8px; font-size: 11.5px; font-weight: 500; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.09em;
}
.side-label span { display: inline-flex; align-items: center; gap: 7px; }
.side-label span .fi { font-size: 12px; }


/* The baskets list scrolls on its own once it outgrows the sidebar; edges fade out. */
.project-nav {
  position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0;
  margin: 0 -6px; padding: 6px 4px 14px 6px;
  -webkit-mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(transparent, #000 10px, #000 calc(100% - 16px), transparent);
}
.pill {
  position: absolute; left: 0; top: 0; border-radius: 9px; opacity: 0;
  /* --pc is the active project's colour; dark mode tints the card and ring with it so it stands out. */
  background: color-mix(in srgb, var(--pc, var(--accent)) var(--pill-tint), var(--pill-base));
  box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--pc, var(--accent)) var(--pill-ring), var(--border));
  transition: transform 0.42s var(--spring), width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.2s, background 0.3s, box-shadow 0.3s;
  pointer-events: none;
}
.pill.instant { transition: opacity 0.2s; }
.basket-list { display: flex; flex-direction: column; gap: 8px; }

/* Basket: a soft tinted card holding its projects; the active project lifts out as a white card. */
.basket {
  padding: 4px; border-radius: 13px;
  background: var(--basket-bg); border: 1px solid var(--border);
  transition: background 0.25s, border-color 0.25s;
}
.basket:hover { border-color: var(--border-strong); }
.basket-head {
  display: flex; align-items: center; gap: 6px; padding: 5px 4px 5px 4px; border-radius: 9px;
  cursor: pointer; user-select: none; transition: background 0.2s;
}
.basket-head:hover { background: var(--hover); }
.chev { width: 16px; display: grid; place-items: center; color: var(--faint); transition: transform 0.3s var(--ease); }
.chev .fi { font-size: 12px; }
.basket.collapsed .chev { transform: rotate(-90deg); }
.basket-icon {
  flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); color: var(--muted);
  transition: transform 0.25s var(--spring), color 0.2s;
}
.basket-icon .fi { font-size: 12.5px; }
.basket-icon:hover { color: var(--accent); transform: scale(1.08); }
.basket-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basket-count { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; transition: opacity 0.2s; }
.basket-actions { display: flex; gap: 1px; opacity: 0; transition: opacity 0.2s; }
.basket-head:hover .basket-actions, .basket-head:focus-within .basket-actions { opacity: 1; }
.basket-head:hover .basket-count, .basket-head:focus-within .basket-count { display: none; }
.inline-edit {
  flex: 1; min-width: 0; height: 24px; padding: 0 6px; margin: 0 -6px;
  border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); outline: none;
  font-size: inherit; font-weight: inherit; box-shadow: 0 0 0 3px var(--accent-soft);
}

.basket-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.34s var(--ease); }
.basket.collapsed .basket-body { grid-template-rows: 0fr; }
.basket-body > .clip { overflow: hidden; min-height: 0; padding-left: 10px; }
.basket.collapsed .basket-body > .clip { visibility: hidden; transition: visibility 0s 0.34s; }
.project-list { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 2px; }
.basket-empty { margin: 2px 0 6px 12px; font-size: 12px; color: var(--faint); }
.basket-empty button { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

.project-item {
  position: relative; z-index: 1; display: flex; align-items: center;
  border-radius: 9px; color: var(--muted); font-size: 13px;
  transition: color 0.2s, background 0.2s;
}
.project-item:hover { color: var(--text); }
.project-item:hover:not(.active) { background: var(--hover); }
.project-item.active { color: var(--text); font-weight: 500; }
.project-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 6px 10px; text-align: left; border-radius: 9px;
}
.project-more { margin-right: 3px; opacity: 0; width: 0; overflow: hidden; transition: opacity 0.2s, width 0.2s var(--ease), background 0.2s, color 0.2s; }
.project-item:hover .project-more, .project-item:focus-within .project-more { opacity: 1; width: 24px; }
.project-item:hover .badge, .project-item:focus-within .badge { display: none; }
.project-item .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent); transition: background 0.3s; }
.project-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-item .badge { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ───────────── Project notes ───────────── */
/* Round button in the lower-right corner; a dot shows when the project has notes. */
.notes-fab {
  position: fixed; right: 26px; bottom: 24px; z-index: 40; width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center; color: var(--text);
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  transition: transform 0.3s var(--spring), box-shadow 0.25s, opacity 0.2s, color 0.2s, border-color 0.25s;
  animation: fab-in 0.5s var(--spring) both;
}
.notes-fab[hidden] { display: none; }
.notes-fab .fi { font-size: 18px; transition: transform 0.3s var(--spring); }
.notes-fab:hover { transform: translateY(-2px); color: var(--pc, var(--accent)); border-color: color-mix(in srgb, var(--pc, var(--accent)) 40%, var(--border)); }
.notes-fab:hover .fi { transform: rotate(-8deg) scale(1.08); }
.notes-fab:active { transform: scale(0.94); }
.notes-fab.open { opacity: 0; transform: scale(0.6); pointer-events: none; }
.notes-dot {
  position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pc, var(--accent)); box-shadow: 0 0 0 2px var(--card);
  transform: scale(0); transition: transform 0.3s var(--spring);
}
.notes-fab.has-notes .notes-dot { transform: scale(1); }
@keyframes fab-in { from { opacity: 0; transform: scale(0.6) translateY(10px); } }

/* The notepad: grows out of the button's corner. */
.notes-panel {
  position: fixed; right: 26px; bottom: 24px; z-index: 41;
  width: min(380px, calc(100vw - 32px)); height: min(440px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--raised); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg);
  transform-origin: bottom right; animation: notes-in 0.38s var(--spring);
  transition: width 0.35s var(--ease), height 0.35s var(--ease);
}
.notes-panel[hidden] { display: none; }
.notes-panel.big { width: min(640px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 100px)); }
.notes-panel.closing { animation: notes-out 0.2s var(--ease) forwards; pointer-events: none; }
@keyframes notes-in { from { opacity: 0; transform: translateY(12px) scale(0.85); } }
@keyframes notes-out { to { opacity: 0; transform: translateY(10px) scale(0.9); } }
/* A thin bar in the project's colour along the top. */
.notes-panel::before { content: ""; height: 3px; flex: none; background: linear-gradient(90deg, var(--pc, var(--accent)), color-mix(in srgb, var(--pc, var(--accent)) 30%, transparent)); }
.notes-head { display: flex; align-items: center; gap: 4px; padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--border); }
.notes-icon {
  width: 30px; height: 30px; flex: none; margin-right: 6px; display: grid; place-items: center; border-radius: 9px;
  color: var(--pc, var(--accent)); background: color-mix(in srgb, var(--pc, var(--accent)) 13%, transparent);
}
.notes-icon .fi { font-size: 14px; }
.notes-heading { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.notes-heading b { font-size: 13.5px; font-weight: 600; }
.notes-heading small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-text {
  flex: 1; min-height: 0; width: 100%; padding: 14px 16px; border: 0; outline: none; resize: none;
  background: transparent; color: var(--text); font: 13.5px/1.65 var(--font);
  tab-size: 2; scrollbar-gutter: stable;
}
.notes-text::placeholder { color: var(--faint); }
.notes-panel:focus-within { border-color: color-mix(in srgb, var(--pc, var(--accent)) 35%, var(--border)); }
.notes-foot {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--faint); background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
.notes-meta { flex: 1; font-variant-numeric: tabular-nums; }
.notes-state { display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s; }
.notes-state[data-state="saved"] { color: var(--green); }
.notes-state[data-state="saved"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.notes-state[data-state="saving"] { color: var(--muted); }
@media (max-width: 640px) {
  .notes-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .app.drawer-open .notes-fab { opacity: 0; transform: scale(0.8); pointer-events: none; }
  .notes-panel, .notes-panel.big { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(70dvh, 560px); }
}

/* ───────────── Archive ───────────── */
/* Button at the bottom-left of the sidebar. */
/* Its own strip under the scrolling basket list (divider + spacing), so the two never run into each other. */
.side-tools { display: flex; align-items: center; padding: 2px 0 6px; }
/* Archive + account: one tinted strip at the bottom, matching the logo strip. */
.side-bottom {
  flex: none; position: relative; z-index: 2; margin-top: 8px; padding: 6px 6px 8px;
  background: var(--chrome); border: 1px solid var(--border); border-radius: 12px;
}
.side-bottom .side-foot { padding: 8px 0 0 4px; }
.side-bottom .archive-btn:hover, .side-bottom .icon-btn:hover { background: var(--hover); }
.archive-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px; border-radius: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  transition: background 0.2s, color 0.2s, transform 0.2s var(--spring);
}
.archive-btn:hover { background: var(--hover); color: var(--text); }
.archive-btn:active { transform: scale(0.97); }
.archive-btn:hover .archive-icon { color: var(--accent); }
.archive-icon {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px;
  color: var(--faint); background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); transition: color 0.2s;
}
.archive-icon .fi { font-size: 12px; }
.archive-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center;
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--surface-2);
}
.archive-count:empty { display: none; }

.about-btn { margin-left: auto; align-self: center; }
.keys-btn { align-self: center; }

/* ───────────── About window ───────────── */
.dialog.about-dialog {
  width: min(760px, calc(100% - 32px)); max-height: min(760px, calc(100dvh - 48px));
  display: none; overflow: hidden;
}
.dialog.about-dialog[open] { display: flex; flex-direction: column; animation: archive-in 0.42s var(--spring); }
.dialog.about-dialog.closing { animation: archive-out 0.26s var(--ease) forwards; }
.dialog.about-dialog.closing::backdrop { animation: fade-out 0.26s var(--ease) forwards; }
.about-hero {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 14px 18px 22px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--chrome);
}
.about-logo { width: 46px; height: 46px; flex: none; color: var(--accent); filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--accent) 35%, transparent)); }
.about-dialog[open] .about-logo { animation: badge-in 0.55s var(--spring) 0.05s both; }
.about-logo svg { width: 100%; height: 100%; display: block; }
.about-heading { flex: 1; min-width: 0; }
.about-heading h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.about-heading p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.about-ver {
  font: 500 11.5px/1 var(--mono); padding: 4px 7px; border-radius: 99px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.about-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 18px; display: grid; gap: 14px; align-content: start; }
.about-section h4 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px 2px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}
.about-section h4 .fi { font-size: 11px; }
.about-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.about-feature {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--basket-bg); border: 1px solid var(--border);
  transition: border-color 0.2s, transform 0.25s var(--spring);
}
.about-feature:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.about-dialog[open] .about-feature { animation: thumb-in 0.4s var(--spring) both; }
.about-dialog[open] .about-feature:nth-child(n+4) { animation-delay: 0.05s; }
.about-dialog[open] .about-feature:nth-child(n+7) { animation-delay: 0.1s; }
.about-feature-icon {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.about-feature-icon .fi { font-size: 13px; }
.about-feature b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 1px; }
.about-feature span:not(.about-feature-icon) { font-size: 12px; color: var(--muted); line-height: 1.45; }
.about-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.about-cols > .about-section { padding: 12px 14px; border-radius: 13px; background: var(--basket-bg); border: 1px solid var(--border); }
.about-list { margin: 0; padding: 0 0 0 16px; display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.about-list b { color: var(--text); font-weight: 600; }
.about-list a { color: var(--accent); text-decoration: none; }
.about-list a:hover { text-decoration: underline; }
.about-dev {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--border); transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s var(--spring);
}
.about-dev:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); }
.about-dev-mark {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ec4899));
}
.about-dev > span:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.about-dev b { font-size: 13.5px; }
.about-dev small { font-size: 11.5px; color: var(--muted); }
.about-dev-go { font-size: 11px; color: var(--faint); }
.about-facts { margin: 10px 0 0; display: grid; gap: 4px; }
.about-facts div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.about-facts dt { color: var(--muted); }
.about-facts dd { margin: 0; font-family: var(--mono); font-size: 12px; }
.about-notes { display: grid; gap: 8px; }
.about-release { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--basket-bg); }
.about-release.latest { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--basket-bg)); }
.about-release-ver { flex: none; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 7px; font: 550 12px var(--mono); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.about-release.latest .about-release-ver { color: var(--accent); }
.about-release ul { margin: 0; padding: 0 0 0 16px; display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* Keyboard shortcuts panel (shares the Archive window's header style). */
.dialog.keys-dialog {
  width: min(720px, calc(100% - 32px)); max-height: min(680px, calc(100dvh - 48px));
  display: none; overflow: hidden;
}
.dialog.keys-dialog[open] { display: flex; flex-direction: column; animation: archive-in 0.42s var(--spring); }
.dialog.keys-dialog.closing { animation: archive-out 0.26s var(--ease) forwards; }
.dialog.keys-dialog.closing::backdrop { animation: fade-out 0.26s var(--ease) forwards; }
.keys-dialog[open] .archive-badge { animation: badge-in 0.5s var(--spring) 0.05s both; }
.keys-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; align-content: start;
}
.keys-group { padding: 10px 12px 8px; border-radius: 13px; background: var(--basket-bg); border: 1px solid var(--border); }
.keys-dialog[open] .keys-group { animation: thumb-in 0.4s var(--spring) both; }
.keys-dialog[open] .keys-group:nth-child(2) { animation-delay: 0.04s; }
.keys-dialog[open] .keys-group:nth-child(3) { animation-delay: 0.08s; }
.keys-dialog[open] .keys-group:nth-child(4) { animation-delay: 0.12s; }
.keys-group h4 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}
.keys-group h4 .fi { font-size: 11px; }

/* Statuses window: one row per status — grip, icon (custom: opens colour & icon), name, use count,
   lock / delete. The path's rows sit on a thin line joining their icons; delete asks inline first. */
.dialog.status-dialog { width: min(520px, calc(100% - 32px)); }
.status-scroll { grid-template-columns: 1fr; }
.st-hint { margin: -2px 0 8px; font-size: 12px; line-height: 1.45; color: var(--faint); }
.st-path { position: relative; }
.st-path::before {
  content: ""; position: absolute; left: 36px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--border-strong), color-mix(in srgb, var(--green) 45%, var(--border-strong)));
  opacity: 0.6; pointer-events: none;
}
.st-list { display: flex; flex-direction: column; }
.st-edit {
  --sc: var(--faint);
  position: relative; display: grid; grid-template-columns: 14px 30px minmax(0, 1fr) auto 28px; align-items: center; column-gap: 8px;
  padding: 5px 6px; margin: 0 -6px; border-radius: 10px;
  transition: background 0.2s, box-shadow 0.25s;
}
.st-edit.movable { cursor: grab; touch-action: pan-y; }
.st-edit:hover, .st-edit:focus-within { background: var(--hover); }
.st-edit.confirming { background: color-mix(in srgb, var(--red) 7%, var(--basket-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent); }
.st-edit.drag-ghost { background: var(--raised); border-radius: 10px; cursor: grabbing; }
.st-grip { display: grid; place-items: center; color: var(--faint); font-size: 12px; opacity: 0; transition: opacity 0.2s; }
.st-edit:hover .st-grip, .st-edit.drag-ghost .st-grip { opacity: 1; }
@media (hover: none) { .st-grip { opacity: 0.6; } }
.st-look {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, var(--raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 30%, var(--border));
  transition: transform 0.2s var(--spring), color 0.3s, background 0.3s, box-shadow 0.3s;
}
.st-look .fi { font-size: 14px; }
button.st-look:hover { transform: scale(1.08); }
.st-name {
  min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; font: inherit; font-weight: 500; color: var(--text); outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.st-name.st-fixed { display: flex; align-items: center; color: var(--muted); cursor: inherit; }
input.st-name:hover { border-color: var(--border); background: var(--field); }
input.st-name:focus { border-color: var(--accent); background: var(--field); box-shadow: 0 0 0 3px var(--accent-soft); }
.st-used { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.st-lock { display: grid; place-items: center; color: var(--faint); font-size: 12px; opacity: 0.6; }
.st-edit .st-del { opacity: 0.55; transition: opacity 0.2s; }
.st-edit:hover .st-del, .st-edit .st-del:focus-visible, .st-edit.confirming .st-del { opacity: 1; }
/* Inline delete confirmation: slides open under the row. */
.st-confirm { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }
.st-edit.confirming .st-confirm { grid-template-rows: 1fr; }
.st-confirm > .clip { overflow: hidden; min-height: 0; }
.st-confirm-body {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 3px 52px;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.22s, transform 0.3s var(--ease);
}
.st-edit.confirming .st-confirm-body { opacity: 1; transform: none; transition-delay: 0.06s; }
.st-confirm p { flex: 1 1 180px; margin: 0; font-size: 12.5px; color: var(--muted); }
.st-confirm .btn-danger { height: 30px; padding: 0 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.st-add {
  display: flex; align-items: center; gap: 8px; margin: 6px -6px 2px; padding: 6px;
  border-radius: 10px; border: 1px dashed var(--border-strong); transition: border-color 0.2s;
}
.st-add-icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--faint); }
.st-add input { flex: 1; min-width: 0; height: 32px; padding: 0 4px; border: 0; background: transparent; font: inherit; color: var(--text); outline: none; }
.st-add:focus-within { border-color: var(--accent); border-style: solid; }
.status-colors { padding: 4px 6px 8px; }
.keys-group dl { margin: 0; display: grid; }
.keys-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.keys-row:first-child { border-top: 0; }
.keys-row dt { font-size: 13px; color: var(--text); }
.keys-row dd { margin: 0; flex: none; display: inline-flex; align-items: center; gap: 4px; }
kbd {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 7px;
  font: 500 11.5px/1 var(--mono); color: var(--text); background: var(--card);
  border: 1px solid var(--border-strong); border-bottom-width: 2px; box-shadow: var(--shadow-sm);
}
.archive-heading p kbd { min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; vertical-align: 1px; }
.kbd-plus, .kbd-or, .kbd-sep { font-size: 11px; color: var(--faint); }
.kbd-or { margin: 0 2px; }

/* The Archive window (".dialog.archive-dialog" so it wins over the shared popup rules further down). */
.dialog.archive-dialog {
  width: min(760px, calc(100% - 32px)); height: min(720px, calc(100dvh - 48px)); max-height: none;
  display: none; overflow: hidden;
}
.dialog.archive-dialog[open] { display: flex; flex-direction: column; animation: archive-in 0.42s var(--spring); }
.dialog.archive-dialog.closing { animation: archive-out 0.26s var(--ease) forwards; }
@keyframes archive-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } }
@keyframes archive-out { to { opacity: 0; transform: translateY(14px) scale(0.94); } }
.dialog.archive-dialog.closing::backdrop { animation: fade-out 0.26s var(--ease) forwards; }
.archive-top { display: flex; align-items: center; gap: 12px; padding: 18px 14px 14px 20px; border-bottom: 1px solid var(--border); }
.archive-badge {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 5%, transparent);
}
.archive-dialog[open] .archive-badge { animation: badge-in 0.5s var(--spring) 0.05s both; }
.archive-badge .fi { font-size: 17px; }
.archive-heading { flex: 1; min-width: 0; }
.archive-heading h3 { margin: 0; font-size: 16px; }
.archive-heading p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.archive-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 18px; display: grid; gap: 18px; align-content: start; }
.arc-section h4 {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px 4px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}
.arc-section h4 .fi { font-size: 11px; }
.arc-section > .arc-basket + .arc-basket { margin-top: 8px; }
.arc-basket, .arc-list { border-radius: 13px; background: var(--basket-bg); border: 1px solid var(--border); padding: 4px; }
.arc-list { display: grid; gap: 2px; }
.arc-basket-head { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 8px; }
.arc-basket-head .basket-icon { pointer-events: none; }
.arc-basket-list { display: grid; gap: 2px; margin: 0 0 2px 22px; padding-left: 10px; border-left: 2px solid var(--border); }
.arc-basket-list[hidden] { display: none; }
.arc-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; text-align: left; }
.arc-text b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-text small { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-project { display: flex; align-items: center; gap: 4px; padding-right: 4px; border-radius: 9px; transition: background 0.2s; }
.arc-project:hover { background: var(--hover); }
.arc-project.current { background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
.arc-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 10px; border-radius: 9px; }
.arc-open .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent); }
.arc-open:hover b { color: var(--text); }
.arc-project.nested .arc-text b { font-size: 12.5px; color: var(--muted); }
.arc-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px;
  font-size: 12px; font-weight: 500; color: var(--text); background: var(--card); box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s var(--spring);
}
.arc-btn .fi { font-size: 11.5px; color: var(--accent); }
.arc-btn:hover { background: var(--raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, var(--border)), var(--shadow-sm); }
.arc-btn:active { transform: scale(0.96); }
.arc-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 20px 30px; text-align: center; color: var(--muted); font-size: 13px; }
.arc-empty b { color: var(--text); font-size: 14px; font-weight: 600; }
.arc-empty span:last-child { max-width: 320px; }
.arc-empty em { font-style: normal; color: var(--text); }
.arc-empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 50%; color: var(--faint); background: var(--surface-2); font-size: 20px; }
@media (max-width: 520px) { .arc-btn span { display: none; } }

/* Note at the top of an archived project's page. */
.archived-note {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 9px 9px 10px;
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--card));
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
  animation: fade-in 0.3s var(--ease);
}
.archived-note[hidden] { display: none; }
.archived-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.archived-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.archived-text b { font-size: 13px; font-weight: 600; }
.archived-text small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archived-restore {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px;
  font-size: 12.5px; font-weight: 500; color: var(--text); background: var(--card); box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background 0.2s, transform 0.2s var(--spring), box-shadow 0.2s;
}
.archived-restore:hover { background: var(--raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, var(--border)), var(--shadow-sm); }
.archived-restore:active { transform: scale(0.96); }
.archived-restore .fi { font-size: 12px; color: var(--accent); }

.side-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 4px 0 6px; border-top: 1px solid var(--border); }
.user-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 550;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-text { min-width: 0; display: grid; line-height: 1.25; }
.user-text b, .user-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-text b { font-weight: 500; font-size: 13px; }
.user-text small { color: var(--faint); font-size: 11.5px; }

.scrim { display: none; }

.main {
  min-height: 0; overflow-y: auto; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm);
  scrollbar-gutter: stable;
}
/* Fixed height: the overview column sticks exactly where it naturally sits (--topbar),
   so it never shifts when the work area above/below changes height. */
.main { --topbar: 52px; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  height: var(--topbar); padding: 0 16px;
  background: linear-gradient(var(--surface) 55%, transparent);
}
.topbar-gap { flex: 1; }
/* Status chips and buttons on the right share one soft, rounded tray. */
.top-actions {
  display: flex; align-items: center; gap: 4px; padding: 3px; min-width: 0;
  background: var(--chrome); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-sm);
}
.top-actions .net { box-shadow: none; background: var(--card); }
.top-actions .net[data-state="offline"] { background: color-mix(in srgb, var(--red) 9%, var(--card)); }
.menu-btn { display: none; }
.view { max-width: 1180px; margin: 0 auto; padding: 0 28px 120px; }

/* Sync pill */
.sync {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px;
  border-radius: 99px; font-size: 12.5px; color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
.sync .fi { font-size: 14px; color: var(--green); transition: color 0.3s; }
.sync:not(:disabled):hover { background: var(--hover); color: var(--text); }
.sync[data-state="pending"] .fi { color: var(--faint); }
.sync[data-state="saving"] .fi { color: var(--accent); animation: spin 1s linear infinite; }
.sync[data-state="error"] .fi { color: var(--red); }
.sync[data-state="error"] { color: var(--text); background: var(--hover); }
/* Reconnect: a proper button with the Drive logo and a pulsing dot asking for attention. */
.sync { position: relative; }
.sync-drive { display: none; width: 15px; height: 14px; flex: none; }
.sync[data-state="auth"], .sync[data-state="connecting"] {
  padding: 0 12px 0 10px; font-weight: 500; color: var(--text); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm);
  transition: background 0.2s, color 0.2s, box-shadow 0.25s, transform 0.25s var(--spring);
}
.sync[data-state="auth"] .sync-drive, .sync[data-state="connecting"] .sync-drive { display: block; }
.sync[data-state="auth"] .fi { display: none; }
.sync[data-state="auth"]:hover {
  background: var(--raised) !important; transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, var(--border)), var(--shadow) !important;
}
.sync[data-state="auth"]:active { transform: scale(0.96); }
.sync[data-state="auth"]::before, .sync[data-state="auth"]::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--surface);
}
.sync[data-state="auth"]::before { box-shadow: none; animation: net-ping 2s var(--ease) infinite; }
.sync[data-state="connecting"] { color: var(--muted); }
.sync[data-state="connecting"] .fi { order: 2; font-size: 12px; color: var(--accent); animation: spin 1s linear infinite; }
.sync[data-state="offline"] { color: var(--red); background: color-mix(in srgb, var(--red) 11%, transparent); }
.sync[data-state="offline"] .fi { color: var(--red); }
.sync[data-state="offline"]:hover { background: color-mix(in srgb, var(--red) 17%, transparent) !important; color: var(--red) !important; }

/* Online / offline chip */
.net {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px;
  border-radius: 99px; font-size: 12px; font-weight: 500; color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border); cursor: default; user-select: none;
  transition: color 0.3s, box-shadow 0.3s, background 0.3s;
}
.net-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); transition: background 0.3s; }
.net-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: net-ping 2.4s var(--ease) infinite;
}
@keyframes net-ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.net[data-state="offline"] { color: var(--red); background: color-mix(in srgb, var(--red) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent); }
.net[data-state="offline"] .net-dot { background: var(--red); }
.net[data-state="offline"] .net-dot::after { animation-duration: 1.2s; }

/* ───────────── Popover menu ───────────── */
.menu {
  position: fixed; z-index: 80; min-width: 210px; max-width: calc(100vw - 24px);
  padding: 5px; border-radius: 12px; background: var(--raised);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  transform-origin: top left; animation: pop-in 0.22s var(--ease);
}
.menu.closing { animation: pop-out 0.14s var(--ease) forwards; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
@keyframes pop-out { to { opacity: 0; transform: scale(0.97) translateY(-2px); } }
.menu-title { padding: 6px 10px 4px; font-size: 11px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: 0.09em; }
.menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  text-align: left; font-size: 13px; color: var(--text); transition: background 0.15s, color 0.15s;
}
.menu-item .fi { font-size: 14px; color: var(--muted); width: 16px; justify-content: center; }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: none; }
.menu-item.danger, .menu-item.danger .fi { color: var(--red); }
.menu-item .check { margin-left: auto; color: var(--accent); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.icon-grid { display: grid; grid-template-columns: repeat(6, 34px); gap: 2px; padding: 4px; }
.icon-grid button { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: background 0.15s, color 0.15s, transform 0.2s var(--spring); }
.icon-grid button .fi { font-size: 16px; }
.icon-grid button:hover { background: var(--hover); color: var(--text); transform: scale(1.08); }
.icon-grid button.current { background: var(--accent-soft); color: var(--accent); }

/* ───────────── Welcome ───────────── */
/* Getting started fills the workspace height and centres itself — no page scroll. */
.view:has(> .welcome) { height: calc(100% - var(--topbar)); padding-bottom: 0; }
.welcome {
  display: grid; justify-items: center; align-content: center; text-align: center;
  height: 100%; min-height: 0; max-width: 680px; margin: 0 auto; padding: 0 0 24px;
}
.welcome-art { width: clamp(120px, 22vh, 180px); height: clamp(120px, 22vh, 180px); margin: 0 auto 4px; }
.welcome h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.032em; color: var(--text); }
.welcome p { margin: 0 0 20px; color: var(--muted); max-width: 440px; }
.welcome-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; text-align: left; }
.welcome-steps li {
  position: relative; display: grid; align-content: start; gap: 10px; padding: 14px;
  border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, transform 0.25s var(--spring);
}
.welcome-steps li:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.step-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.step-icon .fi { font-size: 15px; }
.step-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.step-text b { font-weight: 550; font-size: 14px; color: var(--text); }
.step-text small { font-size: 12.5px; color: var(--muted); }
.step-num { position: absolute; top: 12px; right: 14px; font: 550 12px var(--mono); color: var(--faint); }
.welcome-steps li.done { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.welcome-steps li.done .step-icon { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.welcome-steps li.done .step-text b { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); }
.btn-lg { height: 46px; padding: 0 18px 0 16px; border-radius: 13px; font-size: 14.5px; display: inline-flex; align-items: center; gap: 9px; box-shadow: var(--shadow); }
.btn-lg .fi { font-size: 15px; }
.welcome-cta { width: min(100%, 360px); justify-content: center; }
@media (max-width: 640px) {
  .view:has(> .welcome) { height: auto; }
  .welcome-steps { grid-template-columns: 1fr; }
}
.cta-arrow { margin-left: 2px; transition: transform 0.3s var(--spring); }
.welcome-cta:hover .cta-arrow { transform: translateX(4px); }
.welcome-alt { margin-top: 10px; }

/* ───────────── Project view ───────────── */
/* Two columns: project overview (sticky, left) and the work area (right). */
.project-view { --pc: var(--accent); display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 32px; align-items: start; }
/* Side padding (cancelled by negative margin) leaves room for the heartbeat ring,
   tile shadows and hover lift, which the scroll container would otherwise clip. */
.project-side {
  position: sticky; top: var(--topbar); max-height: calc(100dvh - var(--topbar) - 34px); overflow-y: auto; scrollbar-width: none;
  margin: 0 -18px; padding: 4px 18px 16px;
}
.project-side::-webkit-scrollbar { display: none; }
.project-work { min-width: 0; }
.project-head { padding-top: 4px; }
.basket-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px;
  padding: 3px 8px 3px 7px; border-radius: 99px; border: 1px solid var(--border);
  font-size: 12px; font-weight: 500; color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.basket-chip .fi { font-size: 11.5px; }
.basket-chip .caret { font-size: 10px; opacity: 0.7; }
.basket-chip:hover { background: var(--hover); color: var(--text); border-color: var(--border-strong); }
.title-row { display: flex; align-items: center; gap: 10px; }
.swatch {
  flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--pc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 20%, transparent);
  transition: background 0.35s, box-shadow 0.35s, transform 0.3s var(--spring);
}
.swatch:hover { scale: 1.18; }
.swatch:active { scale: 0.9; }
/* Live "heartbeat": a double beat plus a ripple ring. */
.swatch { position: relative; animation: heartbeat 2.4s ease-in-out infinite; }
.swatch::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pc);
  animation: heartbeat-ring 2.4s var(--ease) infinite; pointer-events: none;
}
@keyframes heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  8% { transform: scale(1.22); }
  16% { transform: scale(0.96); }
  24% { transform: scale(1.14); }
}
@keyframes heartbeat-ring {
  0% { transform: scale(1); opacity: 0.55; }
  60%, 100% { transform: scale(2.8); opacity: 0; }
}
.title-row { align-items: flex-start; }
.title-row .swatch { margin-top: 10px; }
.title-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 2px 4px; margin-left: -4px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.032em; border-radius: 8px; line-height: 1.25;
  resize: none; overflow: hidden; field-sizing: content; overflow-wrap: anywhere; font-family: inherit;
  transition: background 0.2s;
}
.title-input:hover, .title-input:focus { background: var(--hover); }
.title-row .delete-project { opacity: 0; }
.project-head:hover .delete-project, .delete-project:focus-visible { opacity: 1; }

.stat-tiles { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 14px 0 0; }
.stat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label num" "sub num";
  align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, transform 0.25s var(--spring), box-shadow 0.25s;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.stat-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.stat-label .fi { font-size: 12px; }
.stat-label { grid-area: label; }
.stat b { grid-area: num; max-width: 110px; text-align: right; font-size: 20px; font-weight: 550; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat small { grid-area: sub; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Last shipped: the date sits where the number would be, the title runs full width underneath. */
.stat[data-k="last"] { grid-template-areas: "label num" "sub sub"; align-items: baseline; }
.stat[data-k="last"] b { max-width: none; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.stat[data-k="last"] small.has-title {
  margin-top: 4px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--text); letter-spacing: -0.01em;
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.stat-ver {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; vertical-align: 1px;
  font: 500 11px/1.6 var(--mono); color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent);
}

.st-planned { color: var(--faint); }
.st-building { color: var(--amber); }
.st-shipped { color: var(--green); }

.progress { height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 12px; }
.progress span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 70%, transparent), var(--pc));
  transition: width 0.7s var(--ease), background 0.35s;
}

/* Tabs */
.tabbar { display: flex; align-items: flex-end; margin-top: 4px; border-bottom: 1px solid var(--border); }
/* Tabs, the "+" and the new-tab field sit in one row that scrolls sideways together. */
.tab-list { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tab-list::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 7px 10px 10px;
  font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; user-select: none;
  border-radius: 8px 8px 0 0; white-space: nowrap; transition: color 0.2s, background 0.2s;
}
.tab:hover { color: var(--text); background: var(--hover); }
.tab.active { color: var(--text); }
.tab > .fi { font-size: 12.5px; color: var(--faint); transition: color 0.2s; }
.tab.active > .fi { color: var(--pc); }
.tab-count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 8px; }
/* The × floats over the tab's count on hover (no extra width), so tabs never shift sideways. */
.tab { position: relative; }
.tab:has(.tab-x) .tab-count { min-width: 14px; transition: opacity 0.15s; }
.tab-x {
  position: absolute; right: 5px; top: 7px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  color: var(--faint); background: var(--surface); opacity: 0; pointer-events: none; transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.tab-x .fi { font-size: 12px; }
.tab:hover .tab-x, .tab:focus-within .tab-x { opacity: 1; pointer-events: auto; }
.tab:hover:has(.tab-x) .tab-count, .tab:focus-within:has(.tab-x) .tab-count { opacity: 0; }
@media (hover: none) {
  .tab.active .tab-x { opacity: 1; pointer-events: auto; }
  .tab.active:has(.tab-x) .tab-count { opacity: 0; }
}
.tab-x:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.tab .inline-edit { width: 110px; flex: none; margin: 0; height: 22px; font-size: 13px; }
.tab-ink {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px;
  background: var(--pc); pointer-events: none;
  transition: transform 0.45s var(--spring), width 0.3s var(--ease), background 0.35s;
}
.tab-ink.instant { transition: none; }
/* Right after the last tab; when the tabs overflow it pins to the right edge so it's always reachable. */
.tab-add {
  flex: none; position: sticky; right: 0; z-index: 1; margin: 0 0 3px 4px;
  background: var(--surface); box-shadow: -10px 0 10px -4px var(--surface);
}
.tab-add:hover { background: var(--surface-2); }
.tab-new { flex: none; display: none; margin: 0 4px 3px; }
.tab-new.open { display: block; animation: rise 0.25s var(--ease); }
.tab-new input {
  width: 130px; height: 28px; padding: 0 9px; border-radius: 8px; outline: none;
  border: 1px solid color-mix(in srgb, var(--pc) 50%, var(--border)); background: var(--field);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 13%, transparent); font-size: 13px;
}

/* Composer */
.composer {
  margin: 14px 0 6px; padding: 0 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm);
  transition: border-color 0.25s, box-shadow 0.35s var(--ease);
}
.composer.open { border-color: color-mix(in srgb, var(--pc) 35%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 9%, transparent), var(--shadow); }
.composer-line { display: flex; align-items: center; gap: 10px; height: 46px; }
.composer-plus { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--faint); transition: color 0.2s, transform 0.35s var(--spring); }
.composer-plus .fi { font-size: 15px; }
.composer.open .composer-plus { color: var(--pc); transform: rotate(90deg); }
.composer-line input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: 14px; }
.composer-line input::placeholder { color: var(--faint); transition: color 0.2s; }
.composer-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s var(--ease); }
.composer.open .composer-more { grid-template-rows: 1fr; }
.composer-more > .clip { overflow: hidden; min-height: 0; }
.composer-body {
  display: grid; gap: 10px; padding: 2px 0 12px 32px;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.18s, transform 0.3s var(--ease);
}
.composer.open .composer-body { opacity: 1; transform: none; transition-delay: 0.07s; }
.composer:not(.open) .composer-body { visibility: hidden; transition: opacity 0.18s, transform 0.3s var(--ease), visibility 0s 0.36s; }
.btn-primary.sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 9px; }
.composer kbd {
  font: 500 11px var(--font); color: var(--muted); padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--surface-2);
  opacity: 0; transform: translateX(4px); transition: opacity 0.2s, transform 0.25s var(--ease);
}
.composer.has-text kbd { opacity: 1; transform: none; }

/* Updates list */
.updates { display: flex; flex-direction: column; }

/* Pinned while scrolling: tabs + new-log form under the top bar, then each version header below them. */
/* Solid all the way down (its bottom padding is the gap above the stacks), so nothing scrolling
   underneath can show between it and a pinned version header. */
.work-head {
  position: sticky; top: var(--topbar); z-index: 4;
  margin: 0 -10px; padding: 0 10px 8px; background: var(--surface);
  transition: box-shadow 0.25s var(--ease);
}
.work-head.stuck { box-shadow: 0 1px 0 var(--border); }
/* Pinned version headers tuck 1px under the pinned area: no see-through seam. */
.updates .stack-head { position: sticky; top: calc(var(--topbar) + var(--work-h, 0px) - 1px); z-index: 3; }
/* The top bar sits on solid colour once things scroll under it. */
.topbar { background: var(--surface); }
/* Version stacks */
.stack { margin-top: 14px; }
.stack:first-child { margin-top: 4px; }
.stack-head {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 8px; padding: 9px 12px; border-radius: 12px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.4s var(--ease), margin 0.4s var(--ease);
}
/* The body folds with a grid-rows transition, so open/close is one smooth motion. */
.stack-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.42s var(--ease); }
.stack.collapsed .stack-body { grid-template-rows: 0fr; }
.stack-body > .clip { overflow: hidden; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.stack-rows { padding: 2px 0 2px; transition: opacity 0.3s var(--ease), transform 0.42s var(--ease); }
.stack.collapsed .stack-rows { opacity: 0; transform: translateY(-10px) scale(0.985); }
.stack.collapsed .stack-body > .clip { visibility: hidden; transition: visibility 0s 0.42s; }
.stack-head:hover { border-color: var(--border-strong); }
.stack-head .chev { width: 16px; color: var(--faint); transition: transform 0.3s var(--ease); }
.stack-head.collapsed .chev { transform: rotate(-90deg); }
/* Collapsed stacks show the cards "piled up" underneath. */
.stack-head.collapsed {
  margin-bottom: 10px;
  box-shadow:
    0 5px 0 -2px var(--surface), 0 5px 0 -1px var(--border),
    0 10px 0 -5px var(--surface), 0 10px 0 -4px var(--border);
}
.stack-ver { font: 550 13px/1 var(--mono); color: var(--text); padding: 4px 8px; border-radius: 7px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.stack-ver.none { font-family: var(--font); font-weight: 500; color: var(--muted); }
.stack-head { cursor: pointer; user-select: none; }
.stack-head:focus-visible { outline: 2px solid var(--pc, var(--accent)); outline-offset: 2px; }
/* Rename: a pencil next to the version (on hover; always on touch), which turns the chip into a field. */
.stack-edit { margin-left: -6px; opacity: 0; transform: scale(0.85); transition: opacity 0.18s, transform 0.2s var(--spring), background 0.2s, color 0.2s; }
.stack-edit .fi { font-size: 11.5px; }
.stack-head:hover .stack-edit, .stack-edit:focus-visible, .stack-ver.editing + .stack-edit { opacity: 1; transform: none; }
@media (hover: none) { .stack-edit { opacity: 0.8; transform: none; } }
.stack-ver.editing { padding: 0; background: none; box-shadow: none; }
/* Empty version stacks (created ahead of any log). */
.stack-head.empty .stack-count { font-style: italic; color: var(--faint); }
.stack-head.empty { border-style: dashed; }
.stack-del { margin-left: 2px; }
.stack-del[hidden] { display: none; }
.stack-body .clip { position: relative; }
.stack-rows:empty { min-height: 48px; } /* a real drop zone for dragged logs */
/* Sits over the empty drop zone right below it (so it also clears the attachments area above). */
.stack-empty {
  display: none; position: relative; margin: -46px 0 2px 18px; height: 44px; padding: 0 14px;
  align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); pointer-events: none;
  border: 1px dashed var(--border-strong); border-radius: 12px;
}

/* Paperclip on the version header: shows how many attachments the version has; toggles the area. */
.stack-clip {
  display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 6px; margin-left: -6px; border-radius: 7px;
  color: var(--faint); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 0.18s, background 0.2s, color 0.2s;
}
.stack-clip .fi { font-size: 12px; }
.stack-clip-n:empty { display: none; }
.stack-head:hover .stack-clip, .stack-clip.has, .stack-clip.on, .stack-clip:focus-visible { opacity: 1; }
.stack-clip:hover { background: var(--hover); color: var(--text); }
.stack-clip.has { color: var(--muted); }
.stack-clip.on { color: var(--pc, var(--accent)); background: color-mix(in srgb, var(--pc, var(--accent)) 11%, transparent); }
@media (hover: none) { .stack-clip { opacity: 0.8; } }
/* "Attached to this version" area at the top of the stack. */
.stack-attach {
  margin: 0 0 8px 18px; padding: 10px 12px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--pc, var(--accent)) 4%, var(--card));
  border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 22%, var(--border));
  animation: rise 0.3s var(--ease);
}
.stack-attach[hidden] { display: none; }
.stack-attach-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.stack-attach-head .fi { font-size: 11px; color: var(--pc, var(--accent)); }
.stack-attach.file-over { border-style: dashed; border-color: var(--pc, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc, var(--accent)) 12%, transparent); }
@media (max-width: 760px) { .stack-attach { margin-left: 12px; } }
.stack-rows:empty + .stack-empty { display: flex; }
.stack-empty .fi { font-size: 13px; }
.stack-empty .link-btn { pointer-events: auto; margin: 0 0 0 -4px; padding: 2px 4px; font-size: 12.5px; color: var(--pc, var(--accent)); text-decoration: underline; text-underline-offset: 2px; }
html.dragging-log .stack-rows:empty + .stack-empty { border-color: var(--accent); color: var(--accent); }
/* "New version" button at the end of the tab row. */
.version-add { flex: none; margin: 0 0 4px auto; padding: 0 9px; }
.version-add .fi { font-size: 12px; }
/* New version popover: a small card with suggestions. */
.menu.version-menu { width: min(320px, calc(100vw - 24px)); padding: 0; overflow: hidden; border-radius: 16px; }
.version-form { display: grid; gap: 12px; padding: 14px; }
.vf-head { display: flex; align-items: center; gap: 11px; }
.vf-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
  color: var(--pc, var(--accent)); background: color-mix(in srgb, var(--pc, var(--accent)) 13%, transparent);
}
.vf-icon .fi { font-size: 15px; }
.vf-head div { display: grid; line-height: 1.3; }
.vf-head b { font-size: 14px; font-weight: 600; }
.vf-head small { font-size: 12px; color: var(--muted); }
.vf-field { display: grid; gap: 5px; }
.vf-field span, .vf-ideas > span { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.vf-field input {
  height: 40px; padding: 0 12px; border-radius: 10px; outline: none; font: 550 15px var(--mono); letter-spacing: 0.01em;
  border: 1px solid var(--border-strong); background: var(--field); color: var(--text);
  transition: border-color 0.2s, box-shadow 0.25s;
}
.vf-field input:focus { border-color: var(--pc, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc, var(--accent)) 14%, transparent); }
.vf-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vf-ideas > span { width: 100%; }
.vf-chip {
  height: 28px; padding: 0 10px; border-radius: 99px; font: 500 12.5px var(--mono); color: var(--muted);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
  transition: color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s var(--spring);
}
.vf-chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); transform: translateY(-1px); }
.vf-chip.on { color: var(--pc, var(--accent)); background: color-mix(in srgb, var(--pc, var(--accent)) 10%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, var(--accent)) 45%, transparent); }
.vf-hint { margin: -4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--faint); }
.vf-hint.dup { color: var(--amber); }
.vf-actions {
  display: grid; grid-template-columns: auto 1fr; gap: 8px;
  margin: 0 -14px -14px; padding: 12px 14px 14px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
.vf-actions button { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.vf-create:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 520px) { .version-add span { display: none; } }
.stack-ver .inline-edit {
  width: 120px; height: 26px; margin: 0; padding: 0 8px; font: 550 13px var(--mono); color: var(--text);
  border-radius: 7px; border: 1px solid var(--pc, var(--accent)); background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, var(--accent)) 15%, transparent);
}
.stack-head.complete .stack-ver { color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }
.stack-count { font-size: 12.5px; color: var(--muted); }
.stack-status { display: flex; gap: 10px; margin-left: auto; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stack-status span { display: inline-flex; align-items: center; gap: 4px; }
.stack-status .fi { font-size: 11.5px; }
.stack-bar { width: 64px; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; }
.stack-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green); transition: width 0.6s var(--ease); }
/* Logs inside a stack sit on a rail. */
.updates .row { margin-left: 18px; position: relative; }
.updates .row::before {
  content: ""; position: absolute; left: -12px; top: -7px; bottom: -1px; width: 2px; border-radius: 2px;
  background: var(--border);
}
.updates .row .ver { display: none; }

.row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0 10px;
  margin-bottom: 6px; padding: 9px 8px 9px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: background 0.2s, border-color 0.25s, box-shadow 0.3s var(--ease), margin 0.3s var(--ease), padding 0.3s var(--ease);
}
.row:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.row.open { border-color: color-mix(in srgb, var(--pc) 30%, var(--border)); box-shadow: var(--shadow); margin: 4px 0 10px; padding: 11px 12px 12px; }

.status-btn { position: relative; width: 24px; height: 24px; display: grid; place-items: center; margin-top: -1px; border-radius: 50%; }
.status-btn svg { width: 20px; height: 20px; overflow: visible; transition: transform 0.25s var(--spring); }
.status-btn:hover svg { transform: scale(1.12); }
.status-btn:active svg { transform: scale(0.88); }
.status-btn .ring { fill: none; stroke: var(--border-strong); stroke-width: 1.8; transform-box: fill-box; transform-origin: center; transition: stroke 0.3s, stroke-dasharray 0.4s var(--ease); stroke-dasharray: 57 0; }
.status-btn .fill { fill: var(--green); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.35s var(--spring); }
.status-btn .check { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 0.3s var(--ease); }
.row:hover .status-btn .ring { stroke: var(--faint); }
/* Progress arc: grows (with a little spring) to the log's step along the status path — --p is 0…100 —
   in that status's colour, and breathes softly while the log is in progress. Shipped completes it. */
.status-btn .arc {
  fill: none; stroke: var(--sc, var(--amber)); stroke-width: 2.3; stroke-linecap: round;
  stroke-dasharray: calc(var(--p, 0) * 1px) 100px; opacity: 0;
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
  transition: stroke-dasharray 0.7s cubic-bezier(0.34, 1.3, 0.64, 1), stroke 0.35s, opacity 0.25s;
}
.row.in-progress .arc, .row[data-status="shipped"] .arc { opacity: 1; }
.row.in-progress .ring { stroke: color-mix(in srgb, var(--sc) 22%, var(--border)); }
.row.in-progress .arc { animation: arc-breathe 2.6s ease-in-out 0.7s infinite; }
@keyframes arc-breathe { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .status-btn .arc { transition: none; } .row.in-progress .arc { animation: none; } }
.row[data-status="shipped"] .ring { stroke: var(--green); }
.row[data-status="shipped"] .fill { transform: scale(1); }
.row[data-status="shipped"] .check { stroke-dashoffset: 0; transition-delay: 0.12s; }

.row-body { min-width: 0; }
/* Quick delete: fades in on hover (always shown on touch); the open row uses its own Delete button. */
.row-del { align-self: start; margin: -1px 0 0 -4px; color: var(--faint); opacity: 0; transform: scale(0.85); }
.row-del:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.row:hover .row-del, .row-del:focus-visible { opacity: 1; transform: none; }
.row.open .row-del { width: 0; margin: 0 -10px 0 0; opacity: 0; transform: scale(0.85); pointer-events: none; }
@media (hover: none) { .row:not(.open) .row-del { opacity: 1; transform: none; } }
.row-line { display: flex; align-items: baseline; gap: 8px; min-height: 22px; cursor: pointer; border-radius: 6px; outline-offset: 4px; }
.ver {
  flex: none; font: 500 11px/1 var(--mono); padding: 4px 6px; border-radius: 6px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  transform: translateY(-1px);
}
.row[data-status="shipped"] .ver { color: var(--green); background: color-mix(in srgb, var(--green) 9%, transparent); border-color: color-mix(in srgb, var(--green) 20%, transparent); }
.title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s; }
.row[data-status="shipped"] .title { color: var(--muted); }
.tab-tag {
  flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--muted);
  padding: 2px 7px; border-radius: 99px; background: var(--surface-2); transform: translateY(-1px);
}
.tab-tag .fi { font-size: 9.5px; }
.line-gap { flex: 1; }
.meta { flex: none; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.preview { margin: 1px 0 0; font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.open .preview { display: none; }

/* Expanding detail */
.detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--ease); }
.row.open .detail { grid-template-rows: 1fr; }
.detail-clip { overflow: hidden; min-height: 0; }
.detail-body {
  display: grid; gap: 10px; padding-top: 12px;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.18s, transform 0.3s var(--ease);
}
.row.open .detail-body { opacity: 1; transform: none; transition-delay: 0.07s; }
.fields { display: flex; gap: 10px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field.grow { flex: 1; }
.field.ver-field { width: 110px; }
.field > span { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--field); outline: none; resize: none;
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}
.field select { appearance: none; padding-right: 26px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 10px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
.field.tab-field { width: 140px; }
.field textarea { min-height: 70px; field-sizing: content; max-height: 280px; line-height: 1.55; }
.field input[data-f="version"] { font-family: var(--mono); font-size: 12.5px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: color-mix(in srgb, var(--pc) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 13%, transparent); background-color: var(--surface); }
/* ───────────── Images on logs ───────────── */
.img-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.img-thumb {
  position: relative; width: 76px; height: 58px; flex: none; border-radius: 9px; overflow: hidden;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  animation: thumb-in 0.32s var(--spring) both;
}
@keyframes thumb-in { from { opacity: 0; transform: scale(0.8); } }
/* Shimmer while loading, picture icon if it can't be loaded on this device. */
.img-thumb::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 6%, transparent) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.img-thumb.loaded::before, .img-thumb.missing::before { display: none; }
.img-miss { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; color: var(--faint); pointer-events: none; }
@keyframes shimmer { to { background-position: -200% 0; } }
.img-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: zoom-in; border-radius: inherit; }
/* The whole image is shown (no cropping), letterboxed on a soft backdrop. */
.img-open img {
  width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}
.img-thumb.loaded img { opacity: 1; }
.img-open:hover img { transform: scale(1.03); }
.img-open:focus-visible { outline: 2px solid var(--pc, var(--accent)); outline-offset: -2px; }
.img-x {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
  opacity: 0; transform: scale(0.8); transition: opacity 0.18s, transform 0.2s var(--spring), background 0.2s;
}
.img-x .fi { font-size: 13px; }
.img-thumb:hover .img-x, .img-x:focus-visible { opacity: 1; transform: none; }
.img-x:hover { background: var(--red); }
@media (hover: none) { .img-x { opacity: 1; transform: none; } }
.img-add {
  height: 58px; min-width: 76px; padding: 0 14px; border-radius: 9px; flex: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px; font-weight: 500; color: var(--muted);
  border: 1px dashed var(--border-strong); background: transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--spring);
}
.img-add .fi { font-size: 16px; }
.img-add:hover { color: var(--pc, var(--accent)); border-color: color-mix(in srgb, var(--pc, var(--accent)) 50%, var(--border)); background: color-mix(in srgb, var(--pc, var(--accent)) 6%, transparent); }
.img-add:active { transform: scale(0.96); }
.img-grid.empty .img-add { flex-direction: row; gap: 8px; height: 40px; width: 100%; }

/* Images and Files sit side by side, half the width each (stacked on narrow screens). */
.attach-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
/* Phones: stay side by side while empty (two buttons); stack once there are thumbnails / files to show. */
@media (max-width: 640px) { .attach-row:has(.img-thumb, .file-chip) { grid-template-columns: minmax(0, 1fr); } }
.attach-row .file-chip { flex: 1 1 100%; }
.attach-row .file-text b { max-width: none; }

/* ───────────── Files attached to logs ───────────── */
.file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip {
  display: flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; padding-right: 4px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.25s; animation: thumb-in 0.32s var(--spring) both;
}
.file-chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.file-main { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 6px 6px 7px; border-radius: 9px; text-align: left; }
.file-icon {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px;
  color: var(--pc, var(--accent)); background: color-mix(in srgb, var(--pc, var(--accent)) 11%, transparent);
}
.file-icon .fi { font-size: 14px; }
.file-text { display: grid; min-width: 0; line-height: 1.25; }
.file-text b { font-size: 12.5px; font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-text small { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.file-main:hover b { color: var(--pc, var(--accent)); }
.file-drive, .file-x { color: var(--faint); }
.file-add {
  height: 44px; padding: 0 14px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  border: 1px dashed var(--border-strong); background: transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--spring);
}
.file-add .fi { font-size: 14px; }
.file-add:hover { color: var(--pc, var(--accent)); border-color: color-mix(in srgb, var(--pc, var(--accent)) 50%, var(--border)); background: color-mix(in srgb, var(--pc, var(--accent)) 6%, transparent); }
.file-add:active { transform: scale(0.97); }
.file-list.empty .file-add { width: 100%; height: 40px; }
/* Paperclip count on a closed log. */
.file-tag {
  flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--muted);
  padding: 2px 7px; border-radius: 99px; background: var(--surface-2); transform: translateY(-1px);
}
.file-tag[hidden] { display: none; }
.file-tag .fi { font-size: 10px; }

/* Strip of small previews under a closed log. */
.img-strip { display: flex; gap: 6px; margin-top: 7px; }
.img-strip[hidden], .row.open .img-strip { display: none; }
.img-strip .img-thumb { width: 62px; height: 40px; border-radius: 7px; animation: none; }
.img-strip .img-thumb.more::after {
  content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.5);
}

/* Dragging image files from the computer onto a log or the composer. */
.row.file-over, .composer.file-over {
  border-color: var(--pc, var(--accent)) !important; border-style: dashed;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc, var(--accent)) 12%, transparent) !important;
}

.detail-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stamp { flex: 1; font-size: 12px; color: var(--faint); }

/* Status switch: one button per status (built from the status list); --i is the selected one's position.
   With many statuses it scrolls sideways instead of squeezing. */
.seg-wrap { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.seg-scroll { min-width: 0; overflow-x: auto; scrollbar-width: none; border-radius: 9px; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg {
  --n: 3; --i: 0;
  /* Full natural width (the wrapper scrolls), so every button gets the same width and the thumb lines up. */
  position: relative; display: inline-grid; grid-template-columns: repeat(var(--n), 1fr); vertical-align: top; width: max-content;
  padding: 2px; border-radius: 9px; background: var(--surface-2);
}
.seg .thumb {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n));
  border-radius: 7px; background: var(--raised); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.4s var(--spring), background 0.25s, box-shadow 0.25s;
}
.seg[data-status="discarded"] .thumb {
  background: color-mix(in srgb, var(--red) 10%, var(--raised)); box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--red) 35%, var(--border));
}
.seg.custom .thumb {
  background: color-mix(in srgb, var(--sc) 12%, var(--raised)); box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--sc) 40%, var(--border));
}
.seg .seg-custom[aria-pressed="true"], .seg .seg-custom:not([aria-pressed="true"]):hover { color: var(--sc); }
.seg-edit { flex: none; color: var(--faint); }
.seg-edit:hover { color: var(--accent); }
.seg .seg-discard[aria-pressed="true"] { color: var(--red); }
.seg .seg-discard:not([aria-pressed="true"]):hover { color: var(--red); }

/* Discarded logs: a dashed red ring with a cross, struck-through title, dimmed. */
.status-btn .cross { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 0.2s, transform 0.3s var(--spring); }
.row[data-status="discarded"] .ring { stroke: color-mix(in srgb, var(--red) 60%, transparent); stroke-dasharray: 4 3.1; }
.row[data-status="discarded"] .cross { opacity: 1; transform: none; }
.row[data-status="discarded"] .title { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent); }
.row[data-status="discarded"] .ver, .row[data-status="discarded"] .preview, .row[data-status="discarded"] .img-strip { opacity: 0.6; }
.st-discarded { color: color-mix(in srgb, var(--red) 75%, var(--muted)); }
.seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 11px; font-size: 12px; font-weight: 500; color: var(--muted); transition: color 0.25s; }
.seg button .fi { font-size: 11px; }
.seg button[aria-pressed="true"] { color: var(--text); }

/* Empty list */
.empty-list { display: none; text-align: center; padding: 28px 0 0; color: var(--muted); }
.project-view.is-empty .empty-list { display: block; animation: rise 0.5s var(--ease) both; }
.empty-art { width: 150px; height: 150px; flex: none; aspect-ratio: 1; margin: 0 auto 2px; }
.empty-list p { margin: 0 0 4px; color: var(--text); font-weight: 500; }
.empty-list span { font-size: 13px; }
.empty-list code { font-family: var(--mono); font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); }

/* ───────────── Drag and drop ───────────── */
.basket-head, .project-main, .row-line { touch-action: manipulation; }
html.is-dragging, html.is-dragging * { cursor: grabbing !important; user-select: none; }
html.is-dragging .pill { opacity: 0 !important; }
.drag-ghost {
  position: fixed !important; z-index: 300; margin: 0 !important; pointer-events: none;
  background: var(--card); border-radius: 12px; opacity: 0.97;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-strong) !important;
}
.drag-ghost.project-item { border-radius: 9px; }
/* The real item stays in the list as a dashed placeholder showing where it will land. */
.drag-source { position: relative; }
.drag-source > * { opacity: 0; }
.drag-source::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border-strong));
  background: var(--accent-soft);
}
.row.drag-source::before { opacity: 0; }
.basket.drag-source, .row.drag-source { box-shadow: none; }
/* Lists that can take the drop light up; empty ones get room to drop into. */
html.dragging-project .basket:not(.collapsed) .project-list { min-height: 32px; border-radius: 9px; transition: background 0.2s; }
html.dragging-log .stack:not(.collapsed) .stack-rows { min-height: 40px; }
.project-list.drop-target, .stack-rows.drop-target { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 12px; }
html.dragging-project .basket-head:hover, html.dragging-log .stack-head:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Confetti burst when an update ships */
.burst { position: fixed; z-index: 70; width: 200px; height: 200px; transform: translate(-50%, -50%); pointer-events: none; }

/* ───────────── Confirm dialog ───────────── */
.dialog {
  width: min(380px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 18px;
  background: var(--raised); color: var(--text); box-shadow: var(--shadow-lg); overflow: visible;
}
.dialog[open] { animation: dialog-in 0.32s var(--spring); }
.dialog[open]::backdrop { background: var(--scrim); backdrop-filter: blur(3px); animation: fade-in 0.25s var(--ease); }
.dialog.closing { animation: dialog-out 0.16s var(--ease) forwards; }
.dialog.closing::backdrop { animation: fade-out 0.16s var(--ease) forwards; }
/* Image viewer: full-window, image fitted in the middle, bar on top, arrows on the sides. */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: #f4f4f6; overflow: hidden; outline: none;
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lightbox::backdrop { background: rgba(8, 8, 12, 0.86); backdrop-filter: blur(10px); }
.lightbox[open]::backdrop { animation: fade-in 0.25s var(--ease); }
.lightbox.closing { animation: fade-out 0.16s var(--ease) forwards; }
.lightbox.closing::backdrop { animation: fade-out 0.16s var(--ease) forwards; }
.lb-bar {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px 0 22px; z-index: 2;
  animation: fade-in 0.3s var(--ease) 0.05s both;
}
.lb-title { flex: 1; min-width: 0; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-count { font: 500 12px var(--mono); color: rgba(244, 244, 246, 0.6); }
.lightbox .icon-btn { color: rgba(244, 244, 246, 0.75); }
.lightbox .icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.lightbox .lb-close .fi { font-size: 20px; }
.lb-drive[hidden] { display: none; }
.lb-stage {
  position: relative; min-height: 0; display: grid; place-items: center; padding: 16px clamp(72px, 12vw, 160px) 56px; overflow: hidden;
}
/* Fitted with room around it (never enlarged past its real size); click to see it full size. */
.lb-img {
  max-width: min(100%, 1280px); max-height: min(100%, 72vh); object-fit: contain; border-radius: 10px; cursor: default;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); background: rgba(255, 255, 255, 0.04);
}
.lightbox[open] .lb-img { animation: lb-in 0.36s var(--spring); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.94); } }
/* Zoomed: the image at its real size; scroll to look around. */
.lb-stage.zoomed { place-items: start center; overflow: auto; padding: 6px 24px 24px; }
.lb-img.can-zoom { cursor: zoom-in; }
.lb-stage.zoomed .lb-img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-stage.loading::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 26px; height: 26px; margin: -13px;
  border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite;
}
.lb-missing { display: flex; align-items: center; gap: 10px; color: rgba(244, 244, 246, 0.7); font-size: 13.5px; text-align: center; max-width: 320px; }
.lb-missing[hidden] { display: none; }
.lb-missing .fi { font-size: 22px; }
.lb-nav {
  position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.2s var(--spring);
}
.lb-nav .fi { font-size: 22px; }
.lb-nav:hover { background: rgba(255, 255, 255, 0.2); }
.lb-nav:active { transform: scale(0.92); }
.lb-nav[hidden] { display: none; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (max-width: 640px) {
  .lb-stage { padding: 4px 12px 70px; }
  .lb-nav { top: auto; bottom: 14px; margin: 0; }
  .lb-prev { left: calc(50% - 54px); }
  .lb-next { right: calc(50% - 54px); }
}

/* Sound toggle */
.sound-btn.muted { color: var(--faint); }

@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(6px) scale(0.97); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.dialog-body { padding: 22px 22px 18px; }
.dialog-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px;
  background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red);
}
.dialog-icon .fi { font-size: 17px; }
.dialog h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.dialog p { margin: 0; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }

/* Delete confirmation */
.confirm-dialog { width: min(400px, calc(100% - 32px)); overflow: hidden; }
.confirm-dialog .dialog-body { display: grid; justify-items: center; text-align: center; padding: 28px 26px 18px; }
.danger-badge {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px;
  background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--red);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--red) 6%, transparent);
}
.danger-badge .fi { font-size: 22px; }
.btn-accent { height: 36px; padding: 0 16px; border-radius: 10px; font-weight: 500; font-size: 13.5px; background: var(--text); color: var(--bg); transition: transform 0.2s var(--spring), opacity 0.2s, box-shadow 0.25s; }
.btn-accent:hover { opacity: 0.9; box-shadow: var(--shadow); }
.btn-accent:active { transform: scale(0.97); }
.confirm-dialog[open] .danger-badge { animation: badge-in 0.5s var(--spring) 0.05s both; }
.confirm-dialog[open] .danger-badge .fi { animation: wobble 0.6s var(--ease) 0.3s both; }
@keyframes badge-in { from { transform: scale(0.6); opacity: 0; } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-4deg); } }
.confirm-dialog h3 { font-size: 17px; margin-bottom: 6px; }
.confirm-dialog #confirm-msg { max-width: 320px; }
.confirm-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 16px 0 0; padding: 0; }
.confirm-details li {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 500; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.confirm-details .fi { font-size: 11.5px; color: var(--muted); }
.confirm-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px !important; font-size: 12px !important; color: var(--faint) !important; }
.confirm-note .fi { font-size: 12px; }
.confirm-note[hidden] { display: none; }
.dialog-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.dialog-foot button { width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.dialog-foot .fi { font-size: 13px; }
.dialog-foot { border-radius: 0 0 17px 17px; }

/* Add / edit popup */
#edit-dialog { width: min(470px, calc(100% - 32px)); }
.edit-body { padding: 20px 22px 20px; }
.edit-head { display: flex; align-items: flex-start; gap: 14px; }
.edit-head .dialog-icon { flex: none; margin: 0; width: 44px; height: 44px; border-radius: 13px; }
.edit-head .dialog-icon .fi { font-size: 19px; }
.edit-titles { flex: 1; min-width: 0; padding-top: 2px; }
.edit-titles h3 { margin: 0 0 3px; font-size: 17px; }
.edit-titles p { font-size: 13px; }
.edit-close { margin: -4px -6px 0 0; }
.edit-preview {
  margin-top: 18px; padding: 12px 14px 14px; border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface-2);
  border: 1px dashed var(--border-strong);
}
.pv-label { display: block; margin-bottom: 8px; font-size: 10.5px; font-weight: 550; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pv-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
}
.pv-icon { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pv-icon .fi { font-size: 14px; }
.pv-dot { flex: none; width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; transition: background 0.3s; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent); }
.pv-name { flex: 1; min-width: 0; font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s; }
.pv-name.empty { color: var(--faint); font-weight: 500; }
.pv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.pv-chip:empty { display: none; }
.pv-chip .fi { font-size: 11px; }
.edit-body .dialog-field { margin-top: 16px; }
#edit-dialog .icon-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
#edit-dialog .icon-grid button { width: auto; height: auto; aspect-ratio: 1; border-radius: 10px; background: var(--field); }
#edit-dialog .icon-grid button .fi { font-size: 16px; }
#edit-dialog .icon-grid button.current { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.edit-body .color-row { gap: 12px; padding: 2px 2px 4px; }
.edit-body .color-row button { width: 30px; height: 30px; }
#edit-dialog .dialog-foot .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; font-size: 13.5px; }
@media (max-width: 520px) {
  #edit-dialog .icon-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.dialog-foot button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 10px; }

/* Themed dropdowns (wrapping a hidden native <select>) */
.native-select { display: none !important; }
.select-btn {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field);
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}
.select-btn:hover { border-color: var(--border-strong); }
.select-btn:focus-visible, .select-btn.open { outline: none; border-color: color-mix(in srgb, var(--pc, var(--accent)) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, var(--accent)) 13%, transparent); background: var(--card); }
.select-icon { display: inline-flex; color: var(--muted); }
.select-icon:empty { display: none; }
.select-icon .fi { font-size: 13px; }
.select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-caret { color: var(--faint); font-size: 13px; transition: transform 0.25s var(--ease); }
.select-btn.open .select-caret { transform: rotate(180deg); }
.dialog-field .select-btn { height: 38px; padding: 0 12px; border-radius: 10px; border-color: var(--border-strong); font-size: 14px; }
.select-menu { max-height: 280px; overflow-y: auto; }
.select-menu .menu-item.selected { background: var(--accent-soft); }
.select-menu .menu-item.selected:hover, .select-menu .menu-item.selected:focus-visible { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.dialog-icon.accent { background: var(--accent-soft); color: var(--accent); }
.dialog-field { display: grid; gap: 6px; margin-top: 14px; }
.dialog-field > span { font-size: 12px; font-weight: 500; color: var(--muted); }
.dialog-field input, .dialog-field select {
  width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; outline: none;
  border: 1px solid var(--border-strong); background: var(--field); font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}
.dialog-field select { appearance: none; cursor: pointer; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.dialog-field input:focus, .dialog-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background-color: var(--surface); }
.dialog .icon-grid { grid-template-columns: repeat(auto-fill, 36px); gap: 4px; padding: 0; }
.dialog .icon-grid button { width: 36px; height: 36px; box-shadow: inset 0 0 0 1px var(--border); }
.dialog .icon-grid button.current { box-shadow: inset 0 0 0 1.5px var(--accent); }
.color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.color-row button {
  width: 26px; height: 26px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 0 var(--surface), 0 0 0 0 var(--c);
  transition: transform 0.25s var(--spring), box-shadow 0.25s var(--ease);
}
.color-row button:hover { transform: scale(1.1); }
.color-row button.current { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c); }

/* ───────────── Tooltips ───────────── */
.tip {
  position: fixed; z-index: 95; left: 0; top: 0; width: max-content; max-width: min(264px, calc(100vw - 16px));
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--tip-border);
  background: var(--tip-bg); color: var(--tip-fg);
  font-size: 12px; font-weight: 500; line-height: 1.4; text-wrap: balance; overflow-wrap: break-word;
  box-shadow: var(--shadow); pointer-events: none;
  opacity: 0; transform: translateY(4px) scale(0.96); transform-origin: 50% 100%;
  transition: opacity 0.14s var(--ease), transform 0.22s var(--ease);
}
.tip[data-side="bottom"] { transform: translateY(-4px) scale(0.96); transform-origin: 50% 0; }
.tip.show { opacity: 1; transform: none; }

/* ───────────── Toasts ───────────── */
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: calc(100% - 32px); }
/* Toasts are raised cards in the current theme; the tone sets icon + accent colour. */
.toast {
  --tone: var(--accent);
  position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: center; gap: 12px; max-width: min(460px, 100%);
  padding: 8px 8px 8px 10px; border-radius: 14px;
  background: var(--raised); color: var(--text); font-size: 13px;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.toast[data-tone="danger"] { --tone: var(--red); }
.toast[data-tone="success"] { --tone: var(--green); }
.toast[data-tone="warning"] { --tone: var(--amber); }
.toast[data-tone="archive"] { --tone: var(--accent); }
.toast:not(:has(.toast-action)) { padding-right: 16px; }
.toast-icon {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone);
}
.toast-icon .fi { font-size: 13px; }
.toast-text { flex: 1; min-width: 0; line-height: 1.4; }
.toast-action {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px;
  font-weight: 500; font-size: 12.5px; color: var(--accent);
  background: var(--accent-soft); transition: background 0.2s, transform 0.2s var(--spring);
}
.toast-action .fi { font-size: 12px; }
.toast-action:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.toast-action:active { transform: scale(0.96); }
.toast-timer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left;
  background: color-mix(in srgb, var(--tone) 55%, transparent);
}

/* Narrower workspaces: overview moves above the work area. */
@media (max-width: 1040px) {
  .project-view { grid-template-columns: minmax(0, 1fr); }
  .project-side { position: static; max-height: none; overflow: visible; margin: 0; padding: 4px 0 0; }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabbar { margin-top: 20px; }
}

/* ───────────── Mobile: sidebar becomes a drawer ───────────── */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .sidebar {
    position: fixed; z-index: 40; inset: 8px auto 8px 8px; width: min(300px, 84vw);
    box-shadow: var(--shadow-lg);
    transform: translateX(-110%); transition: transform 0.38s var(--ease);
  }
  .app.drawer-open .sidebar { transform: none; }
  .scrim {
    display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.32);
    opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
  }
  .app.drawer-open .scrim { opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-grid; }
  .basket-actions { opacity: 1; }
  .project-more { opacity: 1; width: 24px; }
  #net-label { display: none; }
  .net { padding: 0 10px; }
  .composer-body { padding-left: 0; }
  .basket-head .basket-count { display: none; }
  .main { margin: 0; border: 0; border-radius: 0; }
  .topbar { padding: 10px 12px; }
  .view { padding: 0 16px 120px; }
  .title-input { font-size: 20px; }
  .title-row .delete-project { opacity: 1; }
  .stack-bar { display: none; }
  .meta { display: none; }
  .fields { flex-direction: column; }
  .field.ver-field, .field.tab-field { width: 100%; }
  .welcome { padding-top: 4vh; }
  /* While the new-log form is open on a phone, let it scroll away so the keyboard + form don't fill the screen. */
  .work-head:has(.composer.open) { position: static; }
  .project-view:has(.composer.open) .updates .stack-head { top: calc(var(--topbar) - 1px); }
}

/* ───────────── Phones: denser, thumb-friendly layout ───────────── */
@media (max-width: 760px) {
  /* Stats: compact tiles whose sub-line wraps instead of being cut off. */
  .stat { padding: 9px 11px; }
  .stat small { white-space: normal; line-height: 1.35; }
  .stat b { font-size: 18px; }
  /* Log rows: the title wraps (up to 2 lines); tags flow underneath when there's no room. */
  .row-line { flex-wrap: wrap; row-gap: 4px; align-items: center; }
  .row-line .title {
    flex: 0 1 auto; white-space: normal; overflow: hidden; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .row.open .row-line .title { -webkit-line-clamp: unset; }
  .row-line .tab-tag, .row-line .file-tag { transform: none; }
  /* Edit form fields: title on its own row, version + tab side by side. */
  .fields { flex-direction: row; flex-wrap: wrap; }
  .field.grow { flex: 1 1 100%; }
  .field.ver-field, .field.tab-field { flex: 1 1 0; width: auto; min-width: 0; }
  /* Footer: the status switch spans the full width; actions sit below it. */
  .detail-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
  .detail-foot .seg-wrap { grid-column: 1 / -1; width: 100%; }
  .detail-foot .seg-scroll { flex: 1; }
  .detail-foot .seg { min-width: 100%; } /* fills the row; with many statuses it scrolls sideways */
  .seg button { padding: 7px 4px; gap: 4px; }
  .composer .detail-foot { grid-template-columns: auto minmax(0, 1fr); }
  .composer .detail-foot .stamp { display: none; }
  .composer .detail-foot .btn-primary { width: 100%; height: 40px; font-size: 14px; }
  .composer-cancel { height: 40px; padding: 0 14px; }
  /* An open log's fields use the full card width (not indented behind the status circle). */
  .row.open .detail { margin-left: -34px; }
  .updates .row { margin-left: 12px; }
  .updates .row::before { left: -9px; }
  /* Tabs row: a little more room for the tabs themselves. */
  .tab { padding: 8px 9px 11px; gap: 6px; }
  .version-add { padding: 0 8px; }
}
@media (max-width: 380px) {
  .seg button .fi { display: none; } /* four statuses fit on the smallest phones */
}
/* Phones: the Archive and About windows become bottom sheets that slide up from the edge. */
@media (max-width: 520px) {
  .dialog.archive-dialog, .dialog.about-dialog, .dialog.status-dialog {
    width: 100%; max-width: 100%; height: auto; max-height: 90dvh; margin: auto 0 0;
    border-radius: 22px 22px 0 0; border-bottom: 0;
  }
  .dialog.archive-dialog { height: 90dvh; }
  .dialog.archive-dialog[open], .dialog.about-dialog[open], .dialog.status-dialog[open] { animation: sheet-in 0.42s var(--ease); }
  .dialog.archive-dialog.closing, .dialog.about-dialog.closing, .dialog.status-dialog.closing { animation: sheet-out 0.26s var(--ease) forwards; }
  .archive-top::before, .about-hero::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
    border-radius: 99px; background: var(--border-strong);
  }
  .archive-top { position: relative; padding-top: 22px; }
  .about-hero { padding-top: 24px; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }

/* Narrow phones: keep the top bar on one line. */
@media (max-width: 520px) {
  .top-actions { gap: 2px; }
  .drive-link-text { display: none; }
  #drive-link { padding: 0 8px; }
  #sync-label { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sync { padding: 0 9px; }
}

/* Touch screens: bigger invisible tap areas around small buttons, and no zoom-in when a field is tapped. */
@media (pointer: coarse) {
  .status-btn::before, .row-del::before, .icon-btn.sm::before, .swatch::before, .img-x::before {
    content: ""; position: absolute; inset: -8px; border-radius: inherit;
  }
  .row-del, .icon-btn.sm, .img-x { position: relative; }
  .tab-list > .tab-add { position: sticky; } /* keep the tab "+" pinned to the right edge */
  .img-x { width: 26px; height: 26px; }
  /* The quick delete on every row stays, but quietly (the open log has the full Delete). */
  .row:not(.open) .row-del { opacity: 0.45 !important; }
  /* No physical keyboard on phones/tablets: hide the shortcuts button and the key hints. */
  .keys-btn, .composer .stamp, kbd { display: none; }
  /* iOS zooms into any field under 16px; the big project title is already larger. */
  :where(input, textarea, select):not(.title-input) { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}