/* Jokelboard — industrial liquid glass */
@import url('/build/assets/jb-index.5ba028bf4150.css');

/* Self-hosted variable fonts (Bricolage Grotesque, Geist, Geist Mono).
   See public/fonts/fonts.css — @font-face declarations with unicode-range
   subsets, so the browser only downloads the language subsets it needs. */
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: #0a0d12;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
input, textarea { font-family: inherit; color: inherit; }

/* ───── Background scenes ───── */
.bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg::after {
  /* film grain */
  content: '';
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}

/* Hangar — slate with cyan dawn + amber strip */
.bg[data-scene="hangar"],
html[data-jb-background="hangar"] .bg {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(122, 220, 255, 0.18), transparent 55%),
    radial-gradient(60% 40% at 95% 105%, rgba(255, 184, 74, 0.20), transparent 70%),
    linear-gradient(180deg, #0e151c 0%, #0a0e14 60%, #06080c 100%);
}
.bg[data-scene="hangar"]::before,
html[data-jb-background="hangar"] .bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(255, 90, 30, 0.13) 60%, transparent 65%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 120px);
  mix-blend-mode: screen;
}

/* Concrete — warm gray with light from upper left */
.bg[data-scene="concrete"],
html[data-jb-background="concrete"] .bg {
  background:
    radial-gradient(80% 60% at 15% 0%, rgba(255, 230, 200, 0.22), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(80, 60, 50, 0.55), transparent 60%),
    linear-gradient(180deg, #2a2622 0%, #1c1916 60%, #110f0d 100%);
}
.bg[data-scene="concrete"]::before,
html[data-jb-background="concrete"] .bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.20) 0, transparent 2px);
  background-size: 4px 4px, 6px 6px;
}

/* Vapor — saturated purple → indigo */
.bg[data-scene="vapor"],
html[data-jb-background="vapor"] .bg {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(255, 90, 200, 0.30), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgba(120, 90, 255, 0.35), transparent 55%),
    linear-gradient(180deg, #15101e 0%, #0c0a18 60%, #07060e 100%);
}

/* Abyss — pure dark with pin-spot */
.bg[data-scene="abyss"],
html[data-jb-background="abyss"] .bg {
  background:
    radial-gradient(45% 35% at 50% 30%, rgba(199, 255, 94, 0.10), transparent 70%),
    radial-gradient(80% 60% at 50% 100%, rgba(122, 220, 255, 0.08), transparent 70%),
    #050608;
}

/* Neon - blue accent field */
.bg[data-scene="neon"],
html[data-jb-background="neon"] .bg {
  background:
    radial-gradient(70% 50% at 55% 0%, rgba(122, 220, 255, 0.24), transparent 62%),
    radial-gradient(55% 45% at 8% 92%, rgba(122, 220, 255, 0.16), transparent 70%),
    linear-gradient(180deg, #07141b 0%, #061016 58%, #03080d 100%);
}
.bg[data-scene="neon"]::before,
html[data-jb-background="neon"] .bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(122, 220, 255, 0.08) 48%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(122, 220, 255, 0.028) 0 1px, transparent 1px 78px);
  mix-blend-mode: screen;
}

/* Ember - orange accent furnace glow */
.bg[data-scene="ember"],
html[data-jb-background="ember"] .bg {
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(255, 186, 74, 0.24), transparent 62%),
    radial-gradient(45% 40% at 92% 8%, rgba(255, 122, 46, 0.16), transparent 66%),
    linear-gradient(180deg, #1b1208 0%, #100b07 58%, #070504 100%);
}
.bg[data-scene="ember"]::before,
html[data-jb-background="ember"] .bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255, 186, 74, 0.09) 64%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 186, 74, 0.028) 0 1px, transparent 1px 96px);
  mix-blend-mode: screen;
}

/* Coral - reddish accent wash */
.bg[data-scene="coral"],
html[data-jb-background="coral"] .bg {
  background:
    radial-gradient(70% 55% at 88% 10%, rgba(255, 138, 112, 0.25), transparent 64%),
    radial-gradient(55% 45% at 0% 100%, rgba(255, 96, 130, 0.14), transparent 68%),
    linear-gradient(180deg, #1b0d11 0%, #10080d 60%, #070407 100%);
}
.bg[data-scene="coral"]::before,
html[data-jb-background="coral"] .bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 138, 112, 0.08) 0, transparent 2px),
    radial-gradient(circle at 72% 74%, rgba(255, 255, 255, 0.035) 0, transparent 1px);
  background-size: 9px 9px, 5px 5px;
  mix-blend-mode: screen;
}

/* Arctic - white-grey accent mist */
.bg[data-scene="arctic"],
html[data-jb-background="arctic"] .bg {
  background:
    radial-gradient(75% 55% at 50% -5%, rgba(241, 244, 248, 0.20), transparent 62%),
    radial-gradient(55% 50% at 100% 92%, rgba(122, 220, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #151b21 0%, #0d1217 58%, #070a0e 100%);
}
.bg[data-scene="arctic"]::before,
html[data-jb-background="arctic"] .bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, transparent 0%, rgba(241, 244, 248, 0.055) 44%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(241, 244, 248, 0.025) 0 1px, transparent 1px 132px);
  mix-blend-mode: screen;
}

/* Server room — vertical light slabs */
.bg[data-scene="server"],
html[data-jb-background="server"] .bg {
  background:
    repeating-linear-gradient(90deg,
      rgba(122, 220, 255, 0.05) 0 2px,
      transparent 2px 90px,
      rgba(122, 220, 255, 0.02) 90px 92px,
      transparent 92px 240px),
    radial-gradient(60% 50% at 50% 0%, rgba(199, 255, 94, 0.08), transparent 60%),
    linear-gradient(180deg, #0c1318 0%, #060a0e 100%);
}

/* Autismo Blankino — same cool slate gradient as Server, no light slabs,
   no accent glow. Pure flat backdrop for users who want zero motion. */
.bg[data-scene="blank"],
html[data-jb-background="blank"] .bg {
  background: linear-gradient(180deg, #0c1318 0%, #060a0e 100%);
}
.bg[data-scene="blank"]::after,
html[data-jb-background="blank"] .bg::after { display: none; }
.bg[data-scene="blank"]::before,
html[data-jb-background="blank"] .bg::before { display: none; }

/* ───── Glass primitive ───── */
.glass {
  background: var(--glass-tint);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
  position: relative;
}
/* Specular highlight at top */
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0, rgba(255,255,255,0) 30%);
  pointer-events: none;
}

/* ───── Layout ───── */
.app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Top toolbar */
.topbar {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.10));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  z-index: 5;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.brand-mark {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--brand-logo-filter, none);
}
.topbar .brand-mark img {
  transform-origin: center;
  animation: logo-surge-spin-once 1.15s both;
}
html[data-jb-animated-navigation-jigsaw="0"] .topbar .brand-mark img {
  animation: none;
}
.app[data-animated-navigation-jigsaw="0"] .topbar .brand-mark img {
  animation: none;
}
@keyframes logo-surge-spin-once {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.12, 0.9, 0.18, 1);
  }
  18% {
    transform: rotate(430deg);
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.25);
  }
  48% {
    transform: rotate(540deg);
    animation-timing-function: cubic-bezier(0.12, 0.9, 0.18, 1);
  }
  66% {
    transform: rotate(970deg);
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.25);
  }
  100% {
    transform: rotate(1080deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .brand-mark img {
    animation: none;
  }
}

.topbar-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.10);
}
/* Variant used to flank the org/user profile menus — adds a touch more
   breathing room than the bare divider that follows the brand. */
.topbar-divider-pad { margin: 0 4px; }
.crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-transform: uppercase;
  /* Long board / org names used to push the rest of the topbar off-screen.
     Cap the crumb at a slice of the viewport and ellipsis each segment so
     Automations / Filter / Profile stay visible on every width. */
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: clamp(180px, 42vw, 720px);
  overflow: hidden;
}
.crumb-seg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.crumb-seg-static { flex: 0 0 auto; }
.crumb-seg-mid    { flex: 0 1 auto; max-width: 18ch; }
.crumb-seg-board  { flex: 1 1 auto; min-width: 4ch; }
.crumb-sep        { flex: 0 0 auto; color: var(--ink-faint); }
@media (max-width: 1100px) {
  .crumb            { max-width: 38vw; }
  .crumb-seg-mid    { max-width: 12ch; }
}
@media (max-width: 800px) {
  .crumb            { max-width: 32vw; }
  .crumb-seg-mid    { max-width: 8ch; }
}
.topbar .who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar .who .username {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.subscription-control {
  --upgrade-w: 74px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 0;
  isolation: isolate;
  transition: padding-left .16s ease;
}
html[data-jb-subscription-hydrating] .subscription-control {
  visibility: hidden;
}
.subscription-control::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -3px;
  right: -3px;
  bottom: -3px;
  width: calc(100% + 6px);
  border: 1px solid rgba(255,255,255,0);
  border-radius: 10px;
  background: rgba(0,0,0,0);
  box-shadow: none;
  transition: width .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.subscription-control:hover::before,
.subscription-control:focus-within::before {
  border-color: rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset;
}
.subscription-control:hover,
.subscription-control:focus-within {
  padding-left: calc(var(--upgrade-w) + 8px);
}
.subscription-upgrade,
.subscription-flair {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-left-color: var(--accent);
  border-radius: 8px;
  background: rgba(0,0,0,0.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(199,255,94,0.06);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Per-tier flair palette. The attribute selector override replaces
   colour + the accent border edge + the outer glow tint, leaving the
   pill geometry / typography from the base rule untouched. Unmapped
   tiers fall back to the FREE accent green. */

/* Personal */
/* PAID is the £5 lifetime trial. Dark green keeps it close to Preferred's
   green family while being clearly distinguishable. */
.subscription-flair[data-tier="PAID"] {
  color: #2f7a3d;
  border-left-color: #2f7a3d;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(47,122,61,0.16);
}
.subscription-flair[data-tier="PREFERRED"] {
  color: #4dc738;
  border-left-color: #4dc738;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(77,199,56,0.10);
}
/* Same colour as Preferred — PREFERRED_PLUS is the lifetime-owner upsell. */
.subscription-flair[data-tier="PREFERRED_PLUS"] {
  color: #4dc738;
  border-left-color: #4dc738;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(77,199,56,0.10);
}
.subscription-flair[data-tier="PLUS"] {
  color: #4d7dff;
  border-left-color: #4d7dff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(77,125,255,0.14);
}
.subscription-flair[data-tier="PRO"] {
  color: #22d3ee;
  border-left-color: #22d3ee;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(34,211,238,0.16);
}
.subscription-flair[data-tier="ULTRA"] {
  color: #ff2d92;
  border-color: rgba(255,45,146,0.45);
  border-left-color: #ff2d92;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(255,45,146,0.22),
    0 0 14px rgba(255,45,146,0.30);
}

/* Org */
.subscription-flair[data-tier="FREELANCE"] {
  color: #f1f4f8;
  border-left-color: #f1f4f8;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(255,255,255,0.10);
}
.subscription-flair[data-tier="FL_PRO"] {
  color: #c25c11;
  border-left-color: #c25c11;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(194,92,17,0.12);
}
.subscription-flair[data-tier="BUSINESS"] {
  color: #ff8a3c;
  border-left-color: #ff8a3c;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(255,138,60,0.16);
}
.subscription-flair[data-tier="SME_BUSINESS"] {
  color: #ff5722;
  border-color: rgba(255,87,34,0.45);
  border-left-color: #ff5722;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(255,87,34,0.22),
    0 0 14px rgba(255,87,34,0.28);
}
.subscription-flair[data-tier="ENTERPRISE"] {
  color: #ff1744;
  border-color: rgba(255,23,68,0.50);
  border-left-color: #ff1744;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.07) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 0 0 1px rgba(255,23,68,0.25),
    0 0 16px rgba(255,23,68,0.32);
}
.subscription-upgrade {
  position: absolute;
  left: 0;
  right: auto;
  width: var(--upgrade-w);
  padding: 0;
  border-color: rgba(183, 120, 255, 0.42);
  border-left-color: #b778ff;
  color: #b778ff;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition: opacity .14s ease, transform .16s ease, border-color .16s ease, background .16s ease;
  /* Now an <a> rather than a <span> — neutralise UA defaults so the
     pill renders identically. */
  text-decoration: none;
  cursor: pointer;
}
.subscription-control:hover .subscription-upgrade,
.subscription-control:focus-within .subscription-upgrade {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.search-widget {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: 0 0 300px;        /* fixed 300px; never grow, never shrink */
  width: 300px;
  max-width: 300px;
  min-width: 0;
}
.search {
  display: flex; align-items: center; gap: 8px;
  height: 32px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(0,0,0,0.30);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  transition: border-color .12s, background .12s;
  cursor: text;          /* the whole pill is clickable to focus the input */
}
.search > svg { flex: 0 0 auto; pointer-events: none; }
.search-widget.focused .search {
  border-color: var(--accent);
  background: rgba(0,0,0,0.45);
}
.search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 0;
}
.search-input::placeholder {
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
.search-clear {
  appearance: none;
  background: transparent;
  border: 0;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  flex: 0 0 auto;
}
.search-clear:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.search kbd {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  background: rgba(0,0,0,0.4);
  color: var(--ink-faint);
  pointer-events: none;  /* clicks fall through to .search */
  user-select: none;
}
.search-input { pointer-events: auto; }

/* Syntax-help dropdown */
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  padding: 12px 14px 10px;
  background: rgba(20, 24, 30, 0.96);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  animation: search-pop .12s ease-out;
}
@keyframes search-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-dropdown::before {
  /* Hover-bridge so the dropdown doesn't snap shut crossing the gap. */
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}
.search-dropdown-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.search-syntax {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.search-syntax li {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.search-syntax li:hover { background: rgba(255,255,255,0.05); }
.search-syntax code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  background: rgba(199, 255, 94, 0.06);
  border: 1px solid rgba(199, 255, 94, 0.20);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.search-syntax span {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.search-syntax span code {
  display: inline-block;
  margin: 0 2px;
  font-size: 10.5px;
  padding: 0 4px;
  /* Inline code tokens inherit the column-level `white-space: nowrap`,
     which made long examples like `^2=2026-05-01..2026-05-31` shoot past
     the dropdown’s right edge. Override here so they stay readable in a
     narrow column. */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.search-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* "Showing N of M cards" banner that appears under the topbar when
   the search query is non-empty. */
.search-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 22px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(199, 255, 94, 0.06);
  border: 1px solid rgba(199, 255, 94, 0.25);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.search-banner-text strong {
  color: var(--ink);
  font-weight: 700;
}
.search-banner-text code {
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
  color: var(--accent);
}
.search-banner-clear {
  margin-left: auto;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink-mute);
  padding: 3px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.search-banner-clear:hover { color: var(--ink); border-color: rgba(255,255,255,0.25); }
.icon-btn {
  width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--ink-soft);
  transition: all .15s;
}
.icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--ink); }

/* ── Quota widget (topbar pill + hover dropdown) ─────────────── */
.quota-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.quota-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--ink-soft);
  cursor: default;
  font-family: var(--font-mono);
  transition: background .15s, border-color .15s, color .15s;
}
.quota-widget:hover .quota-trigger,
.quota-widget.open .quota-trigger {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: var(--ink);
}
.quota-pct {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
}
.quota-bar {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.quota-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .25s ease;
}
.quota-trigger.warn .quota-bar-fill   { background: #ffba4a; }
.quota-trigger.danger .quota-bar-fill { background: #ff5e7a; }
.quota-trigger.danger .quota-pct      { color: #ff8585; }

.quota-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 320px;
  padding: 14px;
  background: rgba(20, 24, 30, 0.96);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  animation: quota-pop .12s ease-out;
}
@keyframes quota-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Bridge the gap between trigger and dropdown so the hover doesn't
   close on the cursor crossing whitespace. */
.quota-dropdown::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}
.quota-dropdown-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.quota-dropdown-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quota-dropdown-tier {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.quota-dropdown-totals {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.quota-totals-used {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.quota-totals-sep { color: var(--ink-faint); }
.quota-totals-cap { color: var(--ink-mute); }
.quota-totals-pct {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(199, 255, 94, 0.10);
  border: 1px solid rgba(199, 255, 94, 0.35);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 600;
}
.quota-dropdown-totals.warn .quota-totals-pct {
  background: rgba(255, 186, 74, 0.10);
  border-color: rgba(255, 186, 74, 0.40);
  color: #ffba4a;
}
.quota-dropdown-totals.danger .quota-totals-pct {
  background: rgba(255, 94, 122, 0.10);
  border-color: rgba(255, 94, 122, 0.40);
  color: #ff8585;
}
.quota-stack {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-bottom: 12px;
}
.quota-stack > span {
  display: block;
  height: 100%;
  min-width: 1px;
}
.quota-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quota-row {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  border-radius: 5px;
}
.quota-row.empty { opacity: 0.4; }
.quota-row:hover { background: rgba(255,255,255,0.04); }
.quota-row-marker {
  width: 8px; height: 8px;
  border-radius: 2px;
}
.quota-row-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.quota-row-bytes {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.quota-row-pct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}
.quota-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* Card-count quota — separate from the byte budget. */
.quota-cards {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.quota-cards-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.quota-cards-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--ink);
}
.quota-cards-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.quota-cards-bar {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.quota-cards-bar-fill {
  display: block;
  height: 100%;
  background: #7adcff;
  transition: width .25s ease;
}
.quota-cards.warn .quota-cards-bar-fill   { background: #ffba4a; }
.quota-cards.danger .quota-cards-bar-fill { background: #ff5e7a; }
.quota-cards.danger .quota-cards-count    { color: #ff8585; }
.quota-cards-foot {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* Cover-image quota — separate from the byte budget. Lives as a small
   N/M chip on the trigger pill, and as its own block in the dropdown. */
.quota-img {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(199,255,94,0.08);
  border: 1px solid rgba(199,255,94,0.28);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.quota-img-icon { font-size: 11px; line-height: 1; opacity: 0.85; }
.quota-img.warn {
  background: rgba(255,186,74,0.08);
  border-color: rgba(255,186,74,0.40);
  color: #ffba4a;
}
.quota-img.danger {
  background: rgba(255,94,122,0.10);
  border-color: rgba(255,94,122,0.40);
  color: #ff8585;
}

.quota-images {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.quota-images-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.quota-images-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.quota-images-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.quota-images-bar {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.quota-images-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .25s ease;
}
.quota-images.warn .quota-images-bar-fill   { background: #ffba4a; }
.quota-images.danger .quota-images-bar-fill { background: #ff5e7a; }
.quota-images.danger .quota-images-count    { color: #ff8585; }
.quota-images-foot {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.45;
}

@media (max-width: 720px) {
  .quota-trigger .quota-bar { display: none; }
  .quota-dropdown { width: min(320px, calc(100vw - 24px)); }
}

/* Board header */
.board-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 10px;
  z-index: 4;
}
.board-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  margin: -4px -8px;
  outline: none;
  /* Expand to fill the available space in .board-header so long titles
     (e.g. "AIA | Directorate Database") aren't clipped at the browser-
     default input width, while still leaving room for .board-meta on the
     right. min-width:0 keeps it shrinkable on narrow viewports. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
  width: auto;
  text-overflow: ellipsis;
}
.board-title:hover { background: rgba(255,255,255,0.04); }
.board-title:focus { background: rgba(255,255,255,0.06); border-color: var(--glass-edge); }
.board-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.board-meta {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto;
}
.board-member-stack {
  display: flex;
  align-items: center;
  max-width: 82px;
  height: 32px;
  padding: 2px 4px 4px 12px;
  overflow: hidden;
  outline: none;
  isolation: isolate;
  scrollbar-width: none;
  transition: max-width .18s ease, padding-left .18s ease;
}
.board-member-stack:hover,
.board-member-stack:focus-within {
  max-width: min(46vw, 520px);
  padding-left: 4px;
  overflow: hidden;
}
.board-member-stack::-webkit-scrollbar { display: none; }
.board-member-avatar {
  position: relative;
  flex: 0 0 auto;
  margin-left: -10px;
  transition: margin-left .18s ease, transform .18s ease;
}
.board-member-avatar.clickable {
  cursor: pointer;
}
.board-member-avatar.draggable {
  cursor: grab;
}
.board-member-avatar.draggable:active {
  cursor: grabbing;
}
.board-member-avatar.draggable:hover {
  transform: translateY(-1px);
}
.board-member-avatar.member-dragging {
  opacity: 0.55;
  transform: translateY(-2px) scale(0.96);
}
.board-member-avatar:first-child { margin-left: 0; }
.board-member-stack:hover .board-member-avatar,
.board-member-stack:focus-within .board-member-avatar {
  margin-left: 5px;
}
.board-member-stack:hover .board-member-avatar:first-child,
.board-member-stack:focus-within .board-member-avatar:first-child {
  margin-left: 0;
}
.board-member-avatar .avatar {
  box-shadow: 0 0 0 2px #0a0d12, 0 6px 16px rgba(0,0,0,0.24);
}
.board-member-access {
  position: absolute;
  left: -4px;
  bottom: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid #0a0d12;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 4px 10px rgba(0,0,0,0.35);
  color: #f7fbff;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
.board-member-access-r { background: #747d89; color: #f7fbff; }
.board-member-access-w { background: #4dc738; color: #071006; }
.board-member-access-m { background: #4d7dff; color: #f7fbff; }
.board-member-access-a { background: #ffb84a; color: #1c1200; }
.board-member-access-o { background: #ff385c; color: #fff7fa; }
.member-stack { display: flex; }
.member-stack .avatar { margin-left: -6px; box-shadow: 0 0 0 2px #0a0d12; }
.member-stack .avatar:first-child { margin-left: 0; }
.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: #0a0e07;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar.sm { width: 20px; height: 20px; font-size: 8.5px; }
.avatar.xs { width: 16px; height: 16px; font-size: 7.5px; }

/* Status bar under header */
.statusbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.statusbar .stat { display: flex; align-items: center; gap: 6px; }
.statusbar .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.statusbar .dot.amber { background: #ffb84a; box-shadow: 0 0 8px #ffb84a; }
.statusbar .dot.red { background: #ff3850; box-shadow: 0 0 8px #ff3850; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.readonly-notice {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: min(720px, calc(100vw - 32px));
  padding: 10px 10px 10px 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(13,17,22,0.88);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.readonly-notice-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.readonly-notice-dismiss {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--ink);
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.readonly-notice-dismiss:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.24);
}

/* Lists area */
.board {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 22px 22px;
  display: flex;
  align-items: stretch;
  gap: var(--col-gap);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.board::-webkit-scrollbar { height: 12px; }
.board::-webkit-scrollbar-track { background: transparent; }
.board::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 6px; }
.board::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* List */
.list {
  flex: 0 0 var(--col-w);
  width: var(--col-w);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  position: relative;
  isolation: isolate;
}
.list::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 25%);
  pointer-events: none;
  z-index: -1;
}
.list.dragging-self { opacity: 0.4; }
.list.drop-target-left { box-shadow: var(--glass-shadow), -2px 0 0 0 var(--accent); }
.list.drop-target-right { box-shadow: var(--glass-shadow), 2px 0 0 0 var(--accent); }
.list-drop-placeholder {
  flex: 0 0 var(--col-w);
  width: var(--col-w);
  min-height: 180px;
  align-self: stretch;
  background: rgba(199, 255, 94, 0.08);
  border: 1px dashed rgba(199, 255, 94, 0.45);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(199, 255, 94, 0.10), 0 0 28px rgba(199, 255, 94, 0.08);
  flex-shrink: 0;
}

.list-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 8px;
  cursor: grab;
}
.list-header:active { cursor: grabbing; }
.list-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
  outline: none;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list-title:hover { background: rgba(255,255,255,0.04); }
.list-title:focus { background: rgba(255,255,255,0.08); border-color: var(--glass-edge); }
.list-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.list-count.is-over {
  color: #ffb0b0;
  border-color: rgba(255, 80, 80, 0.45);
  background: rgba(255, 80, 80, 0.12);
}
.list-config-pop {
  width: 240px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.list-config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.list-config-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.list-config-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.list-config-close:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
.list-config-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.list-config-input {
  appearance: none;
  width: 100%;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.list-config-input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
}
.list-config-hint {
  margin: 0;
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.list-config-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.list-config-actions .btn { flex: 1; }
.list-menu {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--ink-mute);
  opacity: 0;
  transition: opacity .15s;
}
.list:hover .list-menu,
.list-menu.open { opacity: 1; }
.list-menu:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.list-menu.open { background: rgba(255,255,255,0.10); color: var(--ink); }

.list-menu-wrap {
  position: relative;
  display: inline-flex;
}
.list-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 170px;
  padding: 6px;
  background: rgba(20, 24, 30, 0.96);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: 10px;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: cd-fade .1s ease-out;
}
.list-menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.list-menu-item:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.list-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.list-menu-item:disabled:hover { background: transparent; color: var(--ink-soft); }
.list-menu-item.danger { color: #ff8585; }
.list-menu-item.danger:hover {
  background: rgba(255, 80, 80, 0.10);
  color: #ffb0b0;
}
.list-menu-item svg { width: 13px; height: 13px; flex: 0 0 auto; }

.list-cards {
  flex: 1 1 auto;
  min-height: 28px;
  overflow-y: auto;
  padding: 2px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.list-cards::-webkit-scrollbar { width: 6px; }
.list-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }

.list-footer {
  flex: 0 0 auto;
  padding: 4px 8px 10px;
}
.add-card-btn {
  width: 100%;
  text-align: left;
  height: 34px;
  padding: 0 10px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--ink-mute);
  font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
  transition: all .15s;
}
.add-card-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.20);
  color: var(--ink);
}

/* Add-card composer */
.composer {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer textarea {
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 13px;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
  min-height: 48px;
}
.composer-actions {
  display: flex; gap: 6px; align-items: center;
}

/* Two-stage composer: kind picker (Card / Filler) shown before the
   title textarea. The composer is positioned at the bottom of the list,
   so visually the picker "expands" upward into the cards area. */
.composer.composer-kind-pick {
  background: rgba(255,255,255,0.05);
  gap: 6px;
}
.composer-kind-btn {
  width: 100%;
  text-align: left;
  height: 34px;
  padding: 0 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.composer-kind-btn:hover,
.composer-kind-btn:focus-visible {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
  outline: none;
}
.composer-kind-cancel {
  width: 100%;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.composer-kind-cancel:hover { color: var(--ink); }

/* Card wrap — sibling of the draggable card so absolutely-positioned
   overlays (e.g. the Shift-hold trash button) sit outside the draggable
   region and aren't eaten by HTML5 drag detection. */
.card-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Card */
.card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.16);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px -4px rgba(0,0,0,0.40);
  cursor: grab;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: background .12s, transform .12s, border-color .12s;
}
.card:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.card:active { cursor: grabbing; }
.card.dragging-self { opacity: 0.30; transform: scale(0.98); }
.card.member-drop-enabled {
  cursor: copy;
}
.card.member-drop-over {
  background: rgba(199,255,94,0.11);
  border-color: rgba(199,255,94,0.45);
  box-shadow: 0 0 0 1px rgba(199,255,94,0.18), 0 12px 26px -14px rgba(199,255,94,0.42);
}
.card.member-drop-pulse .member-stack {
  animation: member-assignee-pulse 420ms ease both;
}
.card.member-drop-assigned {
  border-color: rgba(199,255,94,0.36);
}
.card.member-drop-duplicate {
  border-color: rgba(255,211,94,0.36);
}
.card.member-drop-duplicate .member-stack {
  animation-name: member-duplicate-pulse;
}

/* Severity bar */
.card .sev-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}

/* Compact variant (default base, density tightens) */
.card-body {
  padding: 10px 12px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: var(--ink-soft);
  border: 1px solid rgba(255,255,255,0.05);
  display: inline-flex; align-items: center; gap: 4px;
}
.tag .swatch { width: 6px; height: 6px; border-radius: 1px; }
.tag.severity {
  font-weight: 600;
  background: rgba(255,255,255,0.05);
}
.card-title {
  font-size: 13.5px;
  line-height: 1.32;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.card-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.meta svg { opacity: 0.85; }
.meta.due-overdue { color: #ff8585; }
.meta.due-soon { color: #ffd35e; }
.card-foot {
  display: flex; align-items: center; gap: 8px;
}
.card-foot .member-stack { margin-left: auto; }
.ticket {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.checklist-bar {
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.checklist-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .25s;
}

.vote-balance {
  position: relative;
  height: 18px;
  min-width: 100%;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
}
.vote-balance-fill {
  position: absolute;
  top: 0; bottom: 0;
  transition: left .18s ease, width .18s ease;
}
.vote-balance-fill.positive { background: rgba(100, 215, 120, 0.56); }
.vote-balance-fill.negative { background: rgba(255, 93, 93, 0.58); }
.vote-balance-center {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.26);
}
.vote-balance-marker {
  position: absolute;
  top: 50%;
  left: clamp(11px, var(--vote-marker-left, 50%), calc(100% - 11px));
  transform: translate(-50%, -50%);
  min-width: 18px;
  height: 14px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #161a20;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
}

/* Cover image — engages when card.image is set. Image fills the top of
   the card; title and labels render below in normal card text. We drop
   the severity bar and severity tag in image mode (per design), and the
   description / checklist bar collapse since the image IS the description. */
.card.has-image .card-body {
  padding: 12px 12px 10px 14px;
  gap: 8px;
}
.card-cover {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card.has-image .card-tags:empty { display: none; }

/* Filler card — a short, title-only section divider. No ticket, no
   meta, no severity bar. Clicking the title makes it inline-editable. */
.card.card-filler {
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.10);
  border-top-color: rgba(255,255,255,0.10);
  box-shadow: none;
  cursor: grab;
  padding: 0;
}
.card.card-filler:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
}
.card-filler-title {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 6px 10px;
  font-family: inherit;
  font-weight: 600;
  text-transform: none;
  cursor: text;
}
.card-filler-title:focus { background: rgba(255,255,255,0.04); }
.card-filler-title::placeholder {
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 400;
}
.app[data-density="compact"] .card-filler-title,
html[data-jb-density="compact"] .app .card-filler-title { padding: 4px 8px; font-size: 11px; }

/* Density variants */
.app[data-density="compact"] .card-body,
html[data-jb-density="compact"] .app .card-body { padding: 7px 10px 7px 12px; gap: 4px; }
.app[data-density="compact"] .card-title,
html[data-jb-density="compact"] .app .card-title { font-size: 12.5px; line-height: 1.3; }
.app[data-density="compact"] .card-desc,
html[data-jb-density="compact"] .app .card-desc { display: none; }
.app[data-density="compact"] .card-tags .tag,
html[data-jb-density="compact"] .app .card-tags .tag { font-size: 9px; padding: 1px 5px; }
.app[data-density="compact"] .card-meta,
html[data-jb-density="compact"] .app .card-meta { gap: 6px; }
.app[data-density="compact"] .card-tags,
html[data-jb-density="compact"] .app .card-tags { gap: 3px; }
.app[data-density="compact"] .checklist-bar,
html[data-jb-density="compact"] .app .checklist-bar { display: none; }

.app[data-density="comfortable"] .card-desc,
html[data-jb-density="comfortable"] .app .card-desc { display: none; }

.app[data-density="detailed"] .card-body,
html[data-jb-density="detailed"] .app .card-body { padding: 12px 14px 12px 16px; gap: 10px; }
.app[data-density="detailed"] .card-title,
html[data-jb-density="detailed"] .app .card-title { font-size: 14px; }

/* Drop placeholder for cards */
.card-placeholder {
  background: rgba(199, 255, 94, 0.08);
  border: 1px dashed rgba(199, 255, 94, 0.45);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* Add-list button */
.add-list {
  flex: 0 0 var(--col-w);
  width: var(--col-w);
  height: 44px;
  border-radius: var(--radius);
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.025);
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  align-self: flex-start;
  margin-top: 0;
}
.add-list:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
  color: var(--ink);
}
.add-list-form {
  flex: 0 0 var(--col-w);
  width: var(--col-w);
  align-self: flex-start;
  padding: 10px;
  background: var(--glass-tint);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.add-list-form input {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-edge);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.add-list-form input:focus { border-color: var(--accent); }

/* Drag ghost element */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: var(--col-w);
  transform: rotate(-2deg);
  opacity: 0.92;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}
.member-flight-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: member-flight 380ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,0.38));
}
.member-flight-ghost .avatar {
  width: 28px;
  height: 28px;
  box-shadow: 0 0 0 2px #0a0d12, 0 0 0 4px rgba(199,255,94,0.20);
}
@keyframes member-flight {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--member-flight-x, 0px)), calc(-50% + var(--member-flight-y, 0px))) scale(0.62);
  }
}
@keyframes member-assignee-pulse {
  0% { transform: scale(1); filter: none; }
  45% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(199,255,94,0.42)); }
  100% { transform: scale(1); filter: none; }
}
@keyframes member-duplicate-pulse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .member-flight-ghost,
  .card.member-drop-pulse .member-stack {
    animation-duration: 60ms;
  }
}

/* Logo wordmark */
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.brand-name .accent { color: var(--accent); }

/* Tweaks: glass intensity */
.app[data-glass="low"],
html[data-jb-glass="low"] .app {
  --glass-tint: rgba(255, 255, 255, 0.025);
  --glass-tint-strong: rgba(255, 255, 255, 0.05);
  --blur: 10px;
}
.app[data-glass="high"],
html[data-jb-glass="high"] .app {
  --glass-tint: rgba(255, 255, 255, 0.085);
  --glass-tint-strong: rgba(255, 255, 255, 0.13);
  --blur: 36px;
}

/* Accent options */
.app[data-accent="amber"] { --accent: #ffba4a; }
.app[data-accent="cyan"] { --accent: #7adcff; }
.app[data-accent="coral"] { --accent: #ff8a70; }
.app[data-accent="white"] { --accent: #f1f4f8; }

/* Severity left-bar colors */
.sev-P0 { background: linear-gradient(180deg, #ff3850, #ff3850 60%, transparent); box-shadow: 0 0 12px #ff3850; }
.sev-P1 { background: linear-gradient(180deg, #ff8a3c, #ff8a3c 60%, transparent); }
.sev-P2 { background: linear-gradient(180deg, var(--accent), var(--accent) 60%, transparent); }
.sev-P3 { background: linear-gradient(180deg, #7adcff, #7adcff 60%, transparent); }

/* Subtle scroll edges */
.board-fade-left,
.board-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
}

/* ───── Card detail modal ───── */
.cd-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: start center;
  padding: 6vh 16px 16px;
  z-index: 200;
  overflow-y: auto;
  animation: cd-fade .12s ease-out;
}
.cd-modal-bg-hidden {
  visibility: hidden;
  pointer-events: none;
}
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }

.cd-modal {
  width: min(540px, 100%);
  background: rgba(20, 24, 30, 0.95);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: 18px 22px 20px;
  position: relative;
}

.cd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 6px;
}
.cd-ticket {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.cd-close {
  margin-left: auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.cd-close:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.cd-components-btn { margin-left: auto; }
.cd-components-btn + .cd-close { margin-left: 0; }
.cd-components-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 4px;
}
.cd-components-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cd-components-copy {
  margin: -6px 0 2px;
  color: var(--ink-mute);
  font-size: 12.5px;
  line-height: 1.35;
}
.cd-components-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-component-row {
  justify-content: space-between;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.035);
}
.cd-component-row input { order: 2; }

.cd-title {
  width: 100%;
  margin: 4px 0 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
}
.cd-title:hover { background: rgba(255,255,255,0.04); }
.cd-title:focus { background: rgba(255,255,255,0.08); border-color: var(--glass-edge); }

.cd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cd-row-block {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.cd-row-label {
  flex: 0 0 80px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.cd-row-block .cd-row-label { flex: 0 0 auto; margin-bottom: 2px; }

.cd-select,
.cd-input,
.cd-textarea {
  flex: 1;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}
.cd-select:focus,
.cd-input:focus,
.cd-textarea:focus { border-color: var(--accent); }
.cd-textarea {
  min-height: 84px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}
/* Description textarea is the main writing surface of the card detail
   modal; comments stay compact. The drag-to-resize handle is a native
   textarea affordance — nothing fancier is needed, but the default
   height has to start tall enough that resize is a refinement, not a
   requirement. */
.cd-desc-textarea {
  /* `.cd-textarea` carries `flex: 1` (= `1 1 0%`) so the textarea would
     normally let the flex container override its height — which made the
     bottom-right resize grabber a no-op. Pin flex to `0 0 auto` so the
     element's own height (and the user's drag-resize) actually drives the
     box, and stretch width via the flex parent's `align-items: stretch`. */
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 240px;
  height: 280px;
  max-height: 70vh;
  resize: vertical;
  box-sizing: border-box;
}
.cd-modal--voting .cd-row-block:has(.cd-desc-head) {
  margin-top: 22px;
}
.cd-modal--voting .cd-desc-textarea {
  min-height: 140px;
  height: 170px;
  max-height: 42vh;
}
.cd-modal--voting .cd-md-preview.cd-desc-preview {
  min-height: 170px;
  max-height: min(42vh, 260px);
}
.cd-md-preview.cd-desc-preview {
  min-height: min(240px, 42vh);
  max-height: min(42vh, 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.cd-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(255,255,255,0.5)' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
}
.cd-select option { background: #14181e; color: var(--ink); }

.cd-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 26px;
}
.cd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.cd-chip-x {
  appearance: none;
  background: transparent;
  border: 0;
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.cd-chip-x:hover { opacity: 1; }

.cd-chip-add {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 4px;
  color: var(--ink-mute);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.cd-chip-add:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.30);
  color: var(--ink);
}

.cd-label-form {
  margin-top: 6px;
  padding: 12px 14px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-vote-row {
  align-items: stretch;
}
.cd-vote-controls {
  display: grid;
  grid-template-columns: 56px minmax(120px, 1fr) 56px;
  gap: 8px;
  align-items: center;
}
.cd-vote-btn {
  appearance: none;
  min-height: 32px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.cd-vote-btn:hover:not(:disabled),
.cd-vote-btn.on {
  color: var(--ink);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}
.cd-vote-btn.up.on { box-shadow: inset 0 0 0 1px rgba(100,215,120,0.55); }
.cd-vote-btn.down.on { box-shadow: inset 0 0 0 1px rgba(255,93,93,0.58); }
.cd-vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cd-vote-note {
  margin-top: 6px;
  color: var(--ink-mute);
  font-size: 11px;
}
.cd-voter-strip {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 2px 2px;
}
.cd-voter-side {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  min-height: 34px;
}
.cd-voter-side.down {
  justify-content: flex-end;
}
.cd-vote-permission {
  margin-top: 8px;
}
.cd-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cd-color-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  width: 50px;
}
.cd-color {
  appearance: none;
  -webkit-appearance: none;
  width: 32px; height: 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 5px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.cd-color::-webkit-color-swatch-wrapper { padding: 0; }
.cd-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.cd-color::-moz-color-swatch { border: 0; border-radius: 4px; }

.cd-swatches {
  display: flex;
  gap: 5px;
  flex: 1;
  flex-wrap: wrap;
}
.cd-swatch {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform .1s, box-shadow .15s;
}
.cd-swatch:hover { transform: translateY(-1px); }
.cd-swatch.on {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 0 4px rgba(0,0,0,0.4);
}

.cd-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.cd-toggle-row input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--accent);
}

.cd-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255,255,255,0.08);
  margin-top: 4px;
}
.cd-preview-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  width: 50px;
}

.cd-form-actions,
.cd-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.cd-form-actions { margin-top: 4px; }
.cd-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Topbar Presets menu ────────────────────────────────────── */
.presets-menu {
  position: relative;
  display: inline-flex;
}
.presets-menu .icon-btn { color: var(--ink-soft); }
.presets-menu.open .icon-btn,
.presets-menu .icon-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.presets-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  box-sizing: border-box;
  width: min(460px, calc(100vw - 24px));
  padding: 12px 14px 14px;
  background: rgba(20, 24, 30, 0.96);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  animation: cd-fade .12s ease-out;
}
.presets-pop-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.presets-pop-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.presets-pop-count {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.presets-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  line-height: 1.45;
  padding: 6px 2px 10px;
}
.presets-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background .12s, border-color .12s;
}
.presets-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.presets-row-text { flex: 1; min-width: 0; }
.presets-row-name {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.presets-row-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 2px;
}
.presets-add-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 10px;
  width: 100%;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 6px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
}
.presets-add-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.35);
  color: var(--ink);
}
.presets-form {
  margin-top: 8px;
  padding: 10px 12px 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Modal "Apply preset" picker (inside the Checklist tab) */
.cd-preset-row { margin-bottom: 8px; }
.cd-preset-picker {
  padding: 10px 12px 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cd-preset-picker-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.cd-preset-option {
  appearance: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.cd-preset-option:hover { background: rgba(255,255,255,0.06); }
.cd-preset-option-name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.cd-preset-option-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* Tabs for the topbar Presets dropdown (Checklists / Labels). */
.presets-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-edge);
}
.presets-tab {
  appearance: none;
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.presets-tab:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.presets-tab.on {
  color: var(--ink);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.presets-tab-count {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: var(--ink-faint);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}
.presets-tab.on .presets-tab-count { color: var(--ink-soft); }

.presets-pop {
  max-height: min(760px, calc(100vh - 92px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.presets-list-frame {
  display: grid;
  gap: 6px;
  min-height: 0;
  max-height: min(420px, calc(100vh - 410px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  margin-right: -4px;
}
.presets-list-frame:empty {
  display: none;
}
.presets-list-frame::-webkit-scrollbar { width: 6px; }
.presets-list-frame::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}
.presets-list-frame--labels {
  max-height: min(430px, calc(100vh - 430px));
}
.pm-card-category {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.035);
}
.pm-category-options {
  display: grid;
  gap: 8px;
}
.pm-category-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px auto;
  align-items: center;
  gap: 8px;
}
.pm-category-option .cd-input {
  min-width: 0;
}
.pm-category-force {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.7fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  background: rgba(255,94,122,0.08);
}

/* Saved label-template chips in the card-detail Labels row. */
.cd-label-templates {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.cd-label-templates-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cd-label-templates-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cd-label-template {
  appearance: none;
  background: transparent;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.cd-label-template:hover { background: rgba(255,255,255,0.05); }
.cd-label-template.on,
.cd-label-template[disabled] {
  opacity: 0.4;
  cursor: default;
}
/* Drag affordances for the Templates strip in the card-detail modal
   and for the per-card label chips. Templates and chips both reorder
   horizontally, so the drop indicator is a left/right edge stripe in
   the same accent the rest of the DnD UI uses. */
.cd-label-template[draggable="true"]:not([disabled]) { cursor: grab; }
.cd-label-template[draggable="true"]:not([disabled]):active { cursor: grabbing; }
.cd-label-template.dragging-self { opacity: 0.4; }
.cd-label-template.drop-target-left { box-shadow: -2px 0 0 0 var(--accent, #c7ff5e); }
.cd-label-template.drop-target-right { box-shadow: 2px 0 0 0 var(--accent, #c7ff5e); }
.cd-chip[draggable="true"] { cursor: grab; }
.cd-chip[draggable="true"]:active { cursor: grabbing; }
.cd-chip.dragging-self { opacity: 0.4; }
.cd-chip.drop-target-left { box-shadow: -2px 0 0 0 var(--accent, #c7ff5e); }
.cd-chip.drop-target-right { box-shadow: 2px 0 0 0 var(--accent, #c7ff5e); }
/* Label-preset rows in the Topbar PresetsMenu reorder vertically. */
.presets-row--label[draggable="true"] { cursor: grab; }
.presets-row--label[draggable="true"]:active { cursor: grabbing; }
.presets-row--label.dragging-self { opacity: 0.4; }
.presets-row--label.drop-target-top { box-shadow: 0 -2px 0 0 var(--accent, #c7ff5e); }
.presets-row--label.drop-target-bottom { box-shadow: 0 2px 0 0 var(--accent, #c7ff5e); }

/* Board audit log modal rows. Reuses the .notification-modal shell. */
.audit-log-list { gap: 4px; }
.audit-log-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.20);
}
.audit-log-row-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.audit-log-row-user { color: var(--ink-soft); }
.audit-log-row-time { margin-left: auto; }
.audit-log-row-summary {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.audit-log-more {
  align-self: center;
  margin-top: 8px;
}
.audit-log-search-tools {
  display: flex;
  align-items: center;
  margin: 4px 0 12px;
}
.audit-log-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(0,0,0,0.30);
  color: var(--ink-mute);
  transition: border-color .12s, background .12s;
}
.audit-log-search:focus-within {
  border-color: var(--accent);
  background: rgba(0,0,0,0.45);
}
.audit-log-search > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--ink-faint);
}
.audit-log-search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.audit-log-search-input::placeholder {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.audit-log-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.audit-log-search-clear {
  appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-faint);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.audit-log-search-clear:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.audit-log-search-clear svg {
  width: 13px;
  height: 13px;
}

/* @-mention autocomplete dropdown anchored to the comment textarea.
   Background matches .presets-pop / .profile-menu for a consistent
   opaque popover look (avoids the underlying tab strip bleeding
   through). */
.cd-comment-textarea-wrap { position: relative; }
.cd-mention-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 80;
  min-width: 220px;
  max-width: 340px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(20, 24, 30, 0.98);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: 10px;
  box-shadow: var(--glass-shadow);
}
.cd-mention-option {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}
.cd-mention-option:hover,
.cd-mention-option.on {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.cd-mention-username {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
.cd-mention-name {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-faint);
  margin-left: auto;
}

/* Inline @username badge in card titles. JB users get the Jokelboard
   logo, Roblox-only users get an R glyph; shift+clicking either opens
   the Roblox profile in a new tab. The `@` is stripped from the display
   so the badge does the work. */
.card-title-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px 1px 3px;
  margin: 0 1px;
  border-radius: 4px;
  background: rgba(199, 255, 94, 0.10);
  border: 1px solid rgba(199, 255, 94, 0.20);
  font-family: inherit;
  vertical-align: 1px;
  line-height: 1;
}
.card-title-name.card-title-name-rbx {
  background: rgba(122, 220, 255, 0.10);
  border-color: rgba(122, 220, 255, 0.22);
  color: #7adcff;
}
.card-title-name.card-title-name-pending {
  background: transparent;
  border-color: transparent;
  opacity: 0.7;
}
.card-title-name-clickable { cursor: default; }
.card-title-name-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  overflow: hidden;
}
.card-title-name-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card-title-name-text { font-weight: 600; }

/* Red outline on a card that has an unread @-mention pinging the viewer.
   Cleared automatically when the user opens the card (the modal fires
   /api/notifications/mentions/seen-for-card on mount). */
.card.card-mentioned {
  outline: 2px solid #ff5e7a;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(255, 94, 122, 0.35), 0 6px 18px rgba(255, 94, 122, 0.18);
}
.card.card-mentioned:hover {
  box-shadow: 0 0 0 1px rgba(255, 94, 122, 0.5), 0 8px 22px rgba(255, 94, 122, 0.28);
}

/* Inline highlight for `@username` tokens in rendered comments. */
.cd-comment-mention {
  display: inline;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(199, 255, 94, 0.18);
  color: var(--accent, #c7ff5e);
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Notification modal: mention rows show a body excerpt under the meta. */
.notification-excerpt {
  margin-top: 4px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.25);
  border-left: 2px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Enlarged Discussion mode. The user-tweak `enlargeDiscussionTab`
   adds .cd-modal--focus-discussion on the card modal whenever the
   Discussion tab is the active tab. We hide every non-discussion
   sibling (title, severity, labels, assignees, description, the
   non-discussion tab panels) so the discussion thread fills the
   modal. The tab strip stays so the user can navigate back. */
.cd-modal--focus-discussion {
  width: min(720px, 100%);
}
.cd-modal--focus-discussion .cd-title,
.cd-modal--focus-discussion > .cd-row {
  display: none;
}
.cd-modal--focus-discussion .cd-tabs { margin-top: 0; }
.cd-modal--focus-discussion .cd-tab-panel .cd-discussion {
  min-height: 60vh;
}
.cd-discussion-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.cd-discussion-return {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Tutorial side-panel ────────────────────────────────────────────────────────────────────────
   Right-edge bookmark + slide-out panel for the in-board tutorial.
   Z-index sits above the board but below card-detail / notification
   modals (which are 200) so opening a card overlays the tutorial. */
.tutorial-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 180;
}
.tutorial-host > * { pointer-events: auto; }

.tutorial-bookmark {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 10px 10px;
  background: rgba(20, 24, 30, 0.96);
  border: 1px solid var(--glass-edge);
  border-right: none;
  border-top-color: var(--glass-edge-strong);
  border-radius: 10px 0 0 10px;
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tutorial-bookmark[hidden] {
  display: none !important;
}
.tutorial-bookmark:hover {
  transform: translateY(-50%) translateX(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 22px rgba(199,255,94,0.18);
}
.tutorial-bookmark-icon { color: var(--accent, #c7ff5e); }
.tutorial-bookmark-label { color: var(--ink); }
.tutorial-bookmark.pulse {
  animation: tutorial-pulse 1.6s ease-out 1;
}
@keyframes tutorial-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(199,255,94,0.55), var(--glass-shadow); }
  100% { box-shadow: 0 0 0 18px rgba(199,255,94,0),  var(--glass-shadow); }
}

/* Callout speech-bubble next to the bookmark on first auto-pop only.
   The right offset clears the bookmark (icon + label + padding ≈ 100px)
   so the tail has clean space to point at the bookmark instead of
   merging into it. */
.tutorial-callout {
  position: absolute;
  right: 108px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 280px;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.4));
  animation: tutorial-callout-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  z-index: 1;
}
.tutorial-callout-bubble {
  background: rgba(20, 24, 30, 0.98);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
}
.tutorial-callout-bubble strong {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  color: var(--accent, #c7ff5e);
}
.tutorial-callout-bubble p {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
}
.tutorial-callout-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.tutorial-callout-tail {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 10px solid rgba(20, 24, 30, 0.98);
  margin-left: -1px;
  flex: 0 0 auto;
}
@keyframes tutorial-callout-in {
  from { opacity: 0; transform: translate(8px, -50%); }
  to   { opacity: 1; transform: translate(0,    -50%); }
}

/* The slide-out panel itself. Translated off-canvas when minimized so
   the bookmark sits alone on the right edge. */
.tutorial-panel {
  position: absolute;
  top: 76px;
  right: 0;
  bottom: 16px;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: rgba(20, 24, 30, 0.97);
  border: 1px solid var(--glass-edge);
  border-right: none;
  border-top-color: var(--glass-edge-strong);
  border-radius: 14px 0 0 14px;
  box-shadow: -18px 24px 48px rgba(0,0,0,0.45), 0 0 24px rgba(199,255,94,0.06);
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
  overflow: hidden;
}
.tutorial-open .tutorial-panel {
  transform: translateX(0);
  opacity: 1;
}
.tutorial-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--glass-edge);
  background: linear-gradient(180deg, rgba(199,255,94,0.06) 0%, transparent 100%);
}
.tutorial-title-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent, #c7ff5e);
  display: block;
  margin-bottom: 2px;
}
.tutorial-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.tutorial-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: var(--ink-soft);
  cursor: pointer;
}
.tutorial-close:hover { color: var(--ink); background: rgba(255,255,255,0.05); }

.tutorial-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-edge);
}
.tutorial-tab {
  appearance: none;
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tutorial-tab:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
.tutorial-tab.on {
  color: var(--accent-ink, #06141a);
  background: var(--accent, #c7ff5e);
  border-color: var(--accent, #c7ff5e);
}

.tutorial-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
}
.tutorial-loading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.tutorial-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.tutorial-section:last-of-type { border-bottom: none; }
.tutorial-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.tutorial-section-body { display: flex; flex-direction: column; gap: 6px; }
.tutorial-para {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}
.tutorial-bullet {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.tutorial-bullet::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #c7ff5e);
  opacity: 0.6;
}
.tutorial-spacer { height: 4px; }
.tutorial-kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: rgba(0,0,0,0.30);
  border: 1px dashed var(--glass-edge);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
}
.tutorial-footer {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-edge);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.tutorial-footer code {
  background: rgba(0,0,0,0.35);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent, #c7ff5e);
  font-family: var(--font-mono);
}

/* Hide the panel entirely in the minimised state — the bookmark is the
   whole UI. The panel still renders so transform transitions stay valid,
   but it sits off-canvas with no pointer events. */
.tutorial-minimized .tutorial-panel {
  visibility: hidden;
  pointer-events: none;
}

/* Demo-only customisation panel. It deliberately borrows the Tutorial
   chrome so both right-edge pop-outs feel like one control family. */
.customise-bookmark {
  top: calc(50% + 56px);
}
.customise-bookmark .tutorial-bookmark-icon {
  color: #7adcff;
}
.customise-panel {
  width: min(390px, 92vw);
}
.demo-customise-body {
  gap: 14px;
}
.demo-customise-section {
  padding-bottom: 14px;
}
.demo-customise-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.demo-customise-theme {
  appearance: none;
  display: grid;
  gap: 8px;
  min-height: 74px;
  padding: 10px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.demo-customise-theme:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  transform: translateY(-1px);
}
.demo-customise-theme.on {
  border-color: var(--accent, #c7ff5e);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(199,255,94,0.18) inset;
}
.demo-customise-theme-swatches {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  height: 28px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
}
.demo-customise-theme-swatches i {
  display: block;
}
.demo-customise-controls {
  display: grid;
  gap: 10px;
}
.demo-customise-control {
  display: grid;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.demo-customise-control > span,
.demo-customise-switch > span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.demo-customise-select {
  min-height: 34px;
  padding: 7px 28px 7px 9px;
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  background: rgba(0,0,0,0.30);
  color: var(--ink);
  font: inherit;
  outline: none;
}
.demo-customise-select:focus {
  border-color: rgba(199,255,94,0.55);
  box-shadow: 0 0 0 2px rgba(199,255,94,0.14);
}
.demo-customise-swatches {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.demo-customise-swatch {
  appearance: none;
  width: 34px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 7px;
  padding: 0;
  cursor: pointer;
}
.demo-customise-swatch.on {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(199,255,94,0.25);
}
.demo-customise-switch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
}
.demo-customise-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.demo-customise-switch i {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 140ms ease, border-color 140ms ease;
}
.demo-customise-switch i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-soft);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), background 140ms ease;
}
.demo-customise-switch input:checked + i {
  background: rgba(199,255,94,0.18);
  border-color: rgba(199,255,94,0.55);
}
.demo-customise-switch input:checked + i::after {
  transform: translateX(18px);
  background: var(--accent, #c7ff5e);
}
.demo-customise-switch input:focus-visible + i {
  box-shadow: 0 0 0 2px rgba(199,255,94,0.30);
}
.demo-customise-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

/* Mobile shrink — the panel covers the full screen so reading stays
   comfortable on narrow viewports. */
@media (max-width: 640px) {
  .tutorial-panel {
    top: 60px;
    bottom: 0;
    width: 100vw;
    border-radius: 14px 14px 0 0;
    border-right: 1px solid var(--glass-edge);
  }
}

/* Accessibility: reduced motion gets a 60ms fade instead of the slide. */
@media (prefers-reduced-motion: reduce) {
  .tutorial-panel {
    transition: opacity 80ms ease;
    transform: none;
  }
  .tutorial-open .tutorial-panel { transform: none; }
  .tutorial-bookmark.pulse { animation: none; }
  .tutorial-callout { animation: none; }
}

/* Brand block acts as a homepage link — strip anchor defaults so the look
   is identical to the old <div className="brand">. */
.brand-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.brand-link:hover .brand-name { color: var(--ink); }
.brand-link:focus-visible {
  outline: 2px solid var(--accent, #c7ff5e);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Editable label chip — shift+click jumps into the edit form. Hover hints
   at the affordance with a subtle pointer/cursor change. */
.cd-chip.cd-chip-editable { cursor: default; }
.cd-chip.cd-chip-editable:hover { background: rgba(255,255,255,0.05); }
.cd-chip.on {
  background: rgba(255,255,255,0.08);
  outline: 1px dashed currentColor;
}

/* ── Card-detail Assignees row ── */
.cd-assignees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 26px;
}
.cd-assignee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.cd-assignee .avatar { flex: 0 0 auto; }
.cd-assignee-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.cd-assignee-picker {
  flex: 1 0 100%;
  margin-top: 6px;
  padding: 10px 12px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.cd-assignee-option {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.cd-assignee-option:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}

/* ── Card-detail tab bar (Due / Checklist / Attachments / Discussion) ── */
.cd-tabs {
  display: flex;
  gap: 2px;
  margin: 14px 0 0;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
  scrollbar-width: none;
}
.cd-tabs::-webkit-scrollbar { display: none; }
.cd-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.cd-tab:hover {
  color: var(--ink-soft);
  background: rgba(255,255,255,0.03);
}
.cd-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.cd-tab-count {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.cd-tab.active .cd-tab-count {
  background: rgba(199, 255, 94, 0.10);
  border-color: rgba(199, 255, 94, 0.35);
  color: var(--accent);
}
.cd-tab-count.overdue {
  background: rgba(255, 80, 80, 0.10);
  border-color: rgba(255, 80, 80, 0.35);
  color: #ff8585;
}

.cd-tab-panel {
  margin-top: 14px;
}
.cd-tab-content {
  margin-bottom: 0;
}
.cd-tab-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  padding: 6px 2px;
}

/* ── Inline count chip on the row label (e.g. "Checklist 3/6") ── */
.cd-row-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ── Due date row ── */
.cd-due-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.cd-due-row .cd-input { flex: 1; }
.cd-due-clear {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 11.5px;
}
input[type="datetime-local"].cd-input {
  color-scheme: dark;
}
.cd-due-pretty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.cd-due-pretty.overdue {
  background: rgba(255, 80, 80, 0.10);
  border-color: rgba(255, 80, 80, 0.35);
  color: #ff8585;
}

/* ── Checklist ── */
.cd-checklist-bar {
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 2px 0 4px;
}
.cd-checklist-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .25s ease;
}
.cd-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cd-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.cd-checklist-item:hover { background: rgba(255,255,255,0.04); }
.cd-checklist-item.done .cd-checklist-text {
  text-decoration: line-through;
  color: var(--ink-faint);
}
.cd-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  flex: 0 0 16px;
  border: 1px solid var(--glass-edge-strong);
  border-radius: 4px;
  background: rgba(0,0,0,0.30);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin: 0;
  transition: background .12s, border-color .12s;
}
.cd-checkbox:hover { border-color: var(--accent); }
.cd-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.cd-checkbox:checked::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg) translate(1px, -1px);
}
.cd-checklist-text {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 6px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  min-width: 0;
}
.cd-checklist-text:focus {
  background: rgba(255,255,255,0.06);
  border-color: var(--glass-edge);
}
.cd-checklist-add {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.cd-checklist-add .cd-input { flex: 1; }
.cd-checklist-add .btn { flex: 0 0 auto; }

/* ── Calendar filter modal ── */
.calendar-modal { max-width: 460px; }
.calendar-scope {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calendar-scope-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.calendar-scope-opt:hover { border-color: rgba(255,255,255,0.20); }
.calendar-scope-opt.selected {
  border-color: var(--accent);
  background: rgba(199,255,94,0.06);
}
.calendar-scope-opt input { margin-top: 3px; accent-color: var(--accent); }
.calendar-scope-text { display: flex; flex-direction: column; gap: 2px; }
.calendar-scope-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.calendar-scope-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}
.calendar-scope-sub code {
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.05);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--ink-soft);
}
.calendar-optional {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.calendar-preview {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: rgba(199,255,94,0.06);
  border: 1px solid rgba(199,255,94,0.20);
  border-radius: 6px;
  padding: 4px 8px;
  word-break: break-all;
}
.calendar-time-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  cursor: pointer;
}
.calendar-time-toggle input { accent-color: var(--accent); }
.calendar-time-toggle > span:nth-of-type(1) {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.calendar-time-toggle .calendar-scope-sub {
  grid-column: 2 / 3;
}

/* ── Tiny X button used in checklist + attachments + comments ── */
.cd-icon-btn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink-faint);
  cursor: pointer;
  flex: 0 0 24px;
  transition: background .12s, color .12s;
}
.cd-icon-btn:hover {
  background: rgba(255, 80, 80, 0.10);
  color: #ff8585;
}
.cd-icon-btn--edit:hover {
  background: rgba(180, 140, 255, 0.14);
  color: #c8b3ff;
}

/* ── Attachments ── */
.cd-attachments {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cd-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: var(--ink-soft);
}
.cd-attachment > svg { flex: 0 0 11px; opacity: 0.7; }
.cd-attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
a.cd-attachment-name:hover {
  color: var(--accent);
  text-decoration: underline;
}
.cd-attachment-form {
  margin-top: 6px;
  padding: 12px 14px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Discussion ── */
.cd-discussion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-discussion-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  padding: 4px 2px;
}
.cd-comment {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.cd-comment > .avatar { flex: 0 0 auto; margin-top: 1px; }
.cd-comment-content { flex: 1 1 auto; min-width: 0; }
.cd-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cd-comment-author {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.cd-comment-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.cd-comment-del { margin-left: auto; }
.cd-comment-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cd-comment-link {
  color: var(--accent, #c7ff5e);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.cd-comment-link:hover,
.cd-comment-link:focus-visible {
  text-decoration-thickness: 2px;
  outline: none;
}
.jb-leave-bg {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 400;
  animation: cd-fade .12s ease-out;
}
.jb-leave-modal {
  width: min(480px, 100%);
  background: rgba(22, 24, 30, 0.96);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: 22px 24px 20px;
  color: var(--ink);
}
.jb-leave-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.jb-leave-host {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.jb-leave-host-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint, var(--ink-soft));
}
.jb-leave-host-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent, #c7ff5e);
  word-break: break-all;
}
.jb-leave-body {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.jb-leave-url {
  margin: 0 0 16px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  word-break: break-all;
  max-height: 80px;
  overflow: auto;
}
.jb-leave-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.cd-comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.cd-comment-form .cd-textarea { min-height: 64px; }
.cd-comment-form .cd-textarea-docu { min-height: 120px; }

/* Bottom action row: [Comment/Docucomment toggle] [counter] [Post] */
.cd-comment-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cd-comment-mode-toggle { margin-left: 0; }
.cd-comment-mode-toggle button { padding: 3px 12px; }

/* Animated character counter — colour-shifts through ok→soft→warn→over
   as the user nears the limit. `over` pulses to make the cap obvious. */
.cd-comment-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  transition: color .25s ease, background-color .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}
.cd-comment-counter-used { font-variant-numeric: tabular-nums; }
.cd-comment-counter-max  { font-variant-numeric: tabular-nums; opacity: 0.7; }
.cd-comment-counter-sep  { opacity: 0.5; padding: 0 1px; }
.cd-comment-counter-soft { color: var(--ink); }
.cd-comment-counter-warn {
  color: #f2cc60;
  background: rgba(242, 204, 96, 0.10);
  border-color: rgba(242, 204, 96, 0.30);
}
.cd-comment-counter-over {
  color: #ff7a86;
  background: rgba(255, 122, 134, 0.16);
  border-color: rgba(255, 122, 134, 0.40);
  animation: cd-counter-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes cd-counter-pulse {
  from { box-shadow: 0 0 0 0 rgba(255, 122, 134, 0.0); }
  to   { box-shadow: 0 0 0 3px rgba(255, 122, 134, 0.22); }
}

/* Rendered, truncated docucomment body shown inline in the discussion
   list. Clicking it opens the full Markdown reader panel.
   The aggressive overflow-wrap + min/max-width belt-and-braces below is
   intentional: marked can render a single unbreakable user string as a
   <p> whose min-content size equals the longest token, which (despite
   `overflow-wrap: break-word` higher up) lets the box outgrow the modal
   because `break-word` only triggers AFTER overflow. `anywhere` counts
   the break opportunities when computing min-content, so the box can
   actually shrink to the modal width. */
.cd-comment-body-docu {
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 0 -2px;
  white-space: normal;
  transition: background-color .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cd-comment-body-docu * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}
.cd-comment-body-docu pre {
  white-space: pre-wrap;
  overflow-x: auto;
}
.cd-comment-body-docu img { height: auto; }
.cd-comment-body-docu:hover {
  background: rgba(199, 255, 94, 0.05);
  border-color: rgba(199, 255, 94, 0.20);
}
.cd-comment-body-docu:focus-visible {
  outline: 2px solid var(--accent, #c7ff5e);
  outline-offset: 1px;
}
.cd-comment-body-docu.is-truncated {
  max-height: 360px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.cd-comment-body-docu.is-truncated::after {
  content: 'Open full document →';
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #061018;
  background: var(--accent, #c7ff5e);
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
}

@media (max-width: 560px) {
  .cd-modal-bg { padding: 4vh 10px 10px; }
  .cd-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .cd-row-label { flex: 0 0 auto; }
}

/* ───── Inline card delete (Shift-hold) ───── */
.card-inline-votes {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.card-inline-vote {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.56);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, border-color .12s, transform .12s, box-shadow .12s;
}
.card-inline-vote-mark {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.card-inline-vote.no {
  border: 3px solid #ff3850;
}
.card-inline-vote.yes {
  border: 3px solid #36ff2f;
}
.card-inline-vote.no:hover,
.card-inline-vote.no.on {
  background: rgba(255, 56, 80, 0.22);
  box-shadow: 0 0 0 1px rgba(255, 56, 80, 0.32);
}
.card-inline-vote.yes:hover,
.card-inline-vote.yes.on {
  background: rgba(54, 255, 47, 0.20);
  box-shadow: 0 0 0 1px rgba(54, 255, 47, 0.30);
}
.card-inline-vote:hover {
  transform: scale(1.08);
}
.card-inline-vote:active {
  transform: scale(0.95);
}

.card-trash {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  color: #ff8585;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 80, 80, 0.40);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: background .12s, border-color .12s, transform .12s;
  user-select: none;
}
.card-trash:hover {
  background: rgba(255, 80, 80, 0.30);
  border-color: #ff5050;
  transform: scale(1.08);
  color: #ffb0b0;
}
.card-trash:active {
  transform: scale(0.95);
}

/* ───── Profile dropdown (board topbar) ───── */
.profile-menu-wrap {
  position: relative;
  display: inline-flex;
}
.profile-menu-trigger {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 999px;
  outline: none;
  transition: box-shadow .12s;
}
.profile-menu-trigger:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.10); }
.profile-menu-trigger:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.profile-menu-identity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.profile-menu-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 4px;
  background: rgba(20, 24, 30, 0.96);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-strong);
  border-radius: 10px;
  box-shadow: var(--glass-shadow);
  z-index: 100;
  animation: profile-menu-in .12s ease-out;
}
@keyframes profile-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.profile-menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.profile-menu-head-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.profile-menu-head-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  /* Make sure <button> variants don't leak the user-agent's grey/white
     background and default border — keep them visually identical to the
     <a> variants. */
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
}
.profile-menu-item[hidden] {
  display: none !important;
}
.profile-menu-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.profile-menu-item.danger { color: #ff8585; }
.profile-menu-item.danger:hover {
  background: rgba(255,80,80,0.10);
  color: #ffb0b0;
}
.profile-menu-item svg { flex: 0 0 14px; opacity: 0.85; }
.profile-menu-sep {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
}
.profile-menu-item-split {
  justify-content: space-between;
  gap: 12px;
}
.profile-menu-item-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.profile-notification-badge,
.profile-menu-notification-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff3d57;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.75);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px rgba(255,61,87,0.32), 0 0 0 2px rgba(6,8,12,0.92);
}
.profile-notification-badge[hidden],
.profile-menu-notification-badge[hidden] {
  display: none;
}
.profile-notification-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  z-index: 3;
  pointer-events: none;
}
.profile-menu-trigger[aria-expanded="true"] .profile-notification-badge {
  opacity: 0;
}
.profile-menu-notification-badge {
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(255,61,87,0.25);
}
.notification-arrival-ghost {
  position: fixed;
  left: 50%;
  z-index: 10050;
  pointer-events: none;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff3d57;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.82);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 18px 38px rgba(0,0,0,0.42),
    0 0 0 4px rgba(6,8,12,0.78),
    0 0 28px rgba(255,61,87,0.44);
  transform: translate(-50%, 0) scale(0.82);
  transform-origin: center bottom;
  animation: notification-alarm-flight 1120ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}
.notification-badge-arrived {
  animation: notification-badge-arrived 300ms ease-out 850ms both;
}
@keyframes notification-alarm-flight {
  0% {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.82) rotate(0deg);
  }
  8% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.12) rotate(-8deg);
  }
  16% { transform: translate(-50%, 0) scale(1.12) rotate(8deg); }
  24% { transform: translate(-50%, 0) scale(1.1) rotate(-7deg); }
  32% { transform: translate(-50%, 0) scale(1.08) rotate(7deg); }
  40% { transform: translate(-50%, 0) scale(1.06) rotate(-4deg); }
  50% { transform: translate(-50%, 0) scale(1.04) rotate(3deg); }
  62% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--notification-flight-x, 0px)),
      var(--notification-flight-y, 0px)
    ) scale(0.42) rotate(0deg);
  }
}
@keyframes notification-badge-arrived {
  0% { transform: scale(1); filter: none; }
  55% { transform: scale(1.22); filter: drop-shadow(0 0 10px rgba(255,61,87,0.48)); }
  100% { transform: scale(1); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .notification-arrival-ghost,
  .notification-badge-arrived {
    animation-duration: 80ms;
    animation-delay: 0ms;
  }
}
.notification-modal-bg {
  z-index: 320;
}
.notification-modal {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}
.notification-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.notification-modal-head h2 {
  margin: 0 0 3px;
}
.notification-modal-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.notification-modal-close {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 7px;
  background: rgba(0,0,0,0.24);
  color: var(--ink-soft);
  padding: 0;
}
.notification-modal-close:hover {
  color: var(--ink);
  background: rgba(255,255,255,0.06);
}
.notification-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: 14px;
}
.notification-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}
.notification-item-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(199,255,94,0.10);
  border: 1px solid rgba(199,255,94,0.32);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.notification-body {
  min-width: 0;
}
.notification-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.notification-meta {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.notification-actions {
  display: inline-flex;
  gap: 7px;
}
.notification-actions .btn {
  height: 30px;
  padding: 0 11px;
  font-size: 12px;
}
.notification-empty {
  padding: 28px 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
@media (max-width: 560px) {
  .notification-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .notification-actions {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Policy re-acceptance modal — public/policy-banner.js spawns this when
   the user's recorded ToS/Privacy acceptance lags the current canonical
   version. Stacks above notifications (z-index 320) so a coincidental
   notification popup can't hide the legal prompt. */
.policy-modal-bg {
  z-index: 360;
}
.policy-modal {
  width: min(520px, calc(100vw - 32px));
}
.policy-modal-versions {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.policy-modal-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
}
.policy-modal-links a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 12.5px;
}
.policy-modal-status {
  font-family: var(--font-mono);
  font-size: 11px;
  margin: 0 0 8px;
  color: var(--ink-mute);
}
.policy-modal-status[data-tone="danger"] { color: #ff8585; }
.policy-modal-status[data-tone="muted"]  { color: var(--ink-mute); }
.policy-modal-actions { justify-content: space-between; }

/* Org-profile dropdown — second profile menu that appears on org boards.
   Reuses the .profile-menu-* primitives; only the avatar gets a distinct
   tone so it's visually separated from the user's avatar next to it. */
.avatar.org-avatar {
  background: linear-gradient(135deg, #b778ff, #7adcff);
  color: #061018;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.avatar.org-avatar.has-image {
  background: transparent;
  color: inherit;
}
/* Inline delete-confirm panel inside the dropdown. */
.profile-menu-confirm {
  padding: 10px 12px 12px;
}
.profile-menu-confirm-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: #ff8585;
  margin-bottom: 6px;
}
.profile-menu-confirm-body {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.profile-menu-confirm-body strong { color: var(--ink); }
.profile-menu-confirm-error {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #ff8585;
  background: rgba(255,80,80,0.06);
  border: 1px solid rgba(255,80,80,0.18);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.profile-menu-confirm-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.profile-menu-confirm-actions .btn { padding: 6px 12px; font-size: 12px; }

/* When the UPGRADE node is structurally absent (e.g. a non-owner viewing
   their org's flair), don't expand the pill on hover — there's nothing
   to slide in, and the empty offset would just look broken. The :has()
   check is structural, not visual: ULTRA / ENTERPRISE keep the node and
   merely display:none it (handled by their own rules below), so this
   rule doesn't apply to them. */
.subscription-control:not(:has(.subscription-upgrade)):hover,
.subscription-control:not(:has(.subscription-upgrade)):focus-within {
  padding-left: 0;
}
.subscription-control:not(:has(.subscription-upgrade)):hover::before,
.subscription-control:not(:has(.subscription-upgrade)):focus-within::before {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Max-tier flairs (ULTRA / ENTERPRISE) — top of the ladder, no UPGRADE
   to suggest. Suppress the hover-reveal animation and hide the badge so
   the pill stays the same width whether the cursor is on it or not. */
.subscription-control:has(.subscription-flair[data-tier="ULTRA"]) .subscription-upgrade,
.subscription-control:has(.subscription-flair[data-tier="ENTERPRISE"]) .subscription-upgrade {
  display: none;
}
.subscription-control:has(.subscription-flair[data-tier="ULTRA"]):hover,
.subscription-control:has(.subscription-flair[data-tier="ULTRA"]):focus-within,
.subscription-control:has(.subscription-flair[data-tier="ENTERPRISE"]):hover,
.subscription-control:has(.subscription-flair[data-tier="ENTERPRISE"]):focus-within {
  padding-left: 0;
}
.subscription-control:has(.subscription-flair[data-tier="ULTRA"]):hover::before,
.subscription-control:has(.subscription-flair[data-tier="ULTRA"]):focus-within::before,
.subscription-control:has(.subscription-flair[data-tier="ENTERPRISE"]):hover::before,
.subscription-control:has(.subscription-flair[data-tier="ENTERPRISE"]):focus-within::before {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Modal: Description row — text/image mode toggle and image dropzone */
.cd-desc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.cd-image-mode-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-edge);
  border-radius: 6px;
  overflow: hidden;
  margin-left: auto;
}
.cd-image-mode-toggle button {
  background: transparent;
  border: 0;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.cd-image-mode-toggle button:hover { color: var(--ink); }
.cd-image-mode-toggle button.access-public { color: #48d597; }
.cd-image-mode-toggle button.access-gated { color: #f2cc60; }
.cd-image-mode-toggle button.access-roled { color: #ff9a4d; }
.cd-image-mode-toggle button.access-user { color: #ff7a86; }
.cd-image-mode-toggle button.access-private { color: #ff6b6b; }
.cd-image-mode-toggle button.on {
  background: var(--accent);
  color: #061018;
}
.cd-image-mode-toggle button.access-public.on {
  background: #48d597;
  color: #06120d;
}
.cd-image-mode-toggle button.access-gated.on {
  background: #f2cc60;
  color: #161002;
}
.cd-image-mode-toggle button.access-roled.on {
  background: #ff9a4d;
  color: #180b02;
}
.cd-image-mode-toggle button.access-user.on {
  background: #ff7a86;
  color: #1a0408;
}
.cd-image-mode-toggle button.access-private.on {
  background: #ff6b6b;
  color: #180404;
}
.access-mode-help-list {
  display: grid;
  gap: 6px;
  margin: -2px 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
}
.access-mode-help-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}
.access-mode-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.access-mode-name.access-public { color: #48d597; }
.access-mode-name.access-gated { color: #f2cc60; }
.access-mode-name.access-roled { color: #ff9a4d; }
.access-mode-name.access-user { color: #ff7a86; }
.access-mode-name.access-private { color: #ff6b6b; }
.access-mode-description {
  color: var(--ink-mute);
  font-size: 11.5px;
  line-height: 1.35;
}

.cd-image-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-dropzone {
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  color: var(--ink-mute);
  font-size: 13px;
  user-select: none;
}
.cd-dropzone:hover,
.cd-dropzone.dragging {
  border-color: var(--accent);
  background: rgba(255,255,255,0.02);
}
.cd-dropzone.busy {
  cursor: wait;
  opacity: 0.7;
}
.card-desc em {
  font-weight: 300;
  font-style: italic;
  opacity: 0.6;
  color: var(--ink-mute, inherit);
}
.jb-list-collapsed {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  flex: 0 0 40px !important;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: background .12s ease, border-color .12s ease;
}
.jb-list-collapsed:hover {
  background: rgba(255, 255, 255, 0.03);
}
.jb-list-collapsed-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 260px;
  flex: 0 1 auto;
  user-select: none;
}
.jb-list-collapsed-count {
  font-size: 10.5px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  user-select: none;
}
.jb-list-toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
  transition: background .12s ease, color .12s ease;
  flex: 0 0 auto;
}
.jb-list-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
.jb-list-toggle.jb-list-toggle-expand {
  font-size: 14px;
  padding: 4px 2px;
}
.cd-dropzone.blocked {
  cursor: not-allowed;
  opacity: 0.85;
  border-color: rgba(255, 88, 88, 0.32);
  color: #ff8a8a;
}
.cd-dropzone.blocked .cd-dropzone-hint {
  color: rgba(255, 138, 138, 0.7);
}
.cd-dropzone.blocked:hover,
.cd-dropzone.blocked.dragging {
  border-color: #ff5858;
  background: rgba(255, 88, 88, 0.06);
  color: #ff5858;
}
.cd-dropzone-hint {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.cd-image-preview {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--glass-edge);
}
.cd-image-preview img {
  width: 100%;
  display: block;
  max-height: 320px;
  object-fit: contain;
  background: #000;
}
.cd-image-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  background: rgba(0,0,0,0.4);
  border-top: 1px solid var(--glass-edge);
}
.cd-image-meta .grow { flex: 1; }
.cd-image-meta .btn { padding: 3px 8px; font-size: 11px; }
.cd-image-error {
  color: #ff8585;
  font-size: 12px;
  background: rgba(255,80,80,0.06);
  border: 1px solid rgba(255,80,80,0.18);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Description Text mode: Plain / Markdown sub-toggle + preview pane */
.cd-text-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-text-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cd-md-mode-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-edge);
  border-radius: 6px;
  overflow: hidden;
}
.cd-md-mode-toggle button {
  background: transparent;
  border: 0;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.cd-md-mode-toggle button:hover { color: var(--ink); }
.cd-md-mode-toggle button.on {
  background: var(--accent);
  color: #061018;
}
.cd-md-preview-btn {
  margin-left: auto;
  padding: 4px 12px !important;
  font-size: 11px !important;
}
.cd-md-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 42px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  background: rgba(0,0,0,0.26);
  scrollbar-width: thin;
}
.cd-md-tool {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: background .12s, color .12s, box-shadow .12s;
}
.cd-md-tool:hover,
.cd-md-tool:focus-visible {
  background: rgba(255,255,255,0.11);
  color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 1px rgba(199,255,94,0.20);
}
.cd-md-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.cd-md-tool-italic span {
  font-family: var(--font-display);
  font-style: italic;
}
.cd-md-tool-strike span {
  text-decoration: line-through;
}
.cd-md-tool-link span,
.cd-md-tool-bulleted-list span {
  font-size: 9px;
  letter-spacing: 0;
}
.cd-md-tool-separator {
  flex: 0 0 1px;
  width: 1px;
  height: 28px;
  margin: 0 4px;
  background: rgba(255,255,255,0.10);
}
.cd-md-preview {
  min-height: 84px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.cd-md-preview-clickable {
  cursor: zoom-in;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.cd-md-preview-clickable:hover,
.cd-md-preview-clickable:focus-visible {
  background: rgba(255,255,255,0.045);
  border-color: rgba(199,255,94,0.34);
  box-shadow: 0 0 0 1px rgba(199,255,94,0.10), 0 14px 32px rgba(0,0,0,0.20);
  outline: none;
}
.cd-md-preview.empty {
  color: var(--ink-faint);
  font-style: italic;
}
/* Inline element styling — kept conservative so prose looks good
   inside the modal without colliding with the rest of the design. */
.cd-md-preview p { margin: 0 0 8px; }
.cd-md-preview p:last-child { margin-bottom: 0; }
.cd-md-preview h1, .cd-md-preview h2, .cd-md-preview h3,
.cd-md-preview h4, .cd-md-preview h5, .cd-md-preview h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 14px 0 6px;
  line-height: 1.25;
}
.cd-md-preview h1 { font-size: 18px; }
.cd-md-preview h2 { font-size: 16px; }
.cd-md-preview h3 { font-size: 14.5px; }
.cd-md-preview h4 { font-size: 13.5px; }
.cd-md-preview h5,
.cd-md-preview h6 { font-size: 13px; color: var(--ink-soft); }
.cd-md-preview > :first-child { margin-top: 0; }
.cd-md-preview a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cd-md-preview a:hover { text-decoration: none; }
.cd-md-preview strong { color: var(--ink); }
.cd-md-preview em { color: var(--ink-soft); }
.cd-md-preview code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--ink);
}
.cd-md-preview pre {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
}
.cd-md-preview pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.5;
}
.cd-md-preview blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
  background: rgba(199,255,94,0.04);
  border-radius: 4px;
}
.cd-md-preview ul,
.cd-md-preview ol {
  margin: 6px 0 8px;
  padding-left: 22px;
}
.cd-md-preview li { margin: 2px 0; }
.cd-md-preview hr {
  border: 0;
  border-top: 1px dashed rgba(255,255,255,0.10);
  margin: 12px 0;
}
.cd-md-preview table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12.5px;
}
.cd-md-preview th,
.cd-md-preview td {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  text-align: left;
}
.cd-md-preview th {
  background: rgba(255,255,255,0.04);
  font-weight: 600;
  color: var(--ink);
}
.cd-md-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ───── Board API modal ───── */
.cd-md-reader-bg {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(4,6,9,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.cd-md-reader-panel {
  width: min(860px, 100%);
  max-height: min(86vh, 920px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  background: rgba(15,18,22,0.96);
  box-shadow: 0 30px 90px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.cd-md-reader-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
}
.cd-md-reader-head h2 {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}
.cd-md-reader-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cd-md-reader-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cd-md-reader-back {
  height: 32px;
  padding: 0 12px;
}
.cd-md-reader-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.cd-md-reader-close:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.24);
}
.cd-md-reader-document {
  min-height: 0;
  margin: 0;
  padding: 34px 42px;
  border: 0;
  border-radius: 0;
  background: #f7f4ec;
  color: #18202a;
  overflow: auto;
  font-size: 15px;
  line-height: 1.65;
}
.cd-md-reader-document h1,
.cd-md-reader-document h2,
.cd-md-reader-document h3,
.cd-md-reader-document h4,
.cd-md-reader-document h5,
.cd-md-reader-document h6,
.cd-md-reader-document strong {
  color: #111820;
}
.cd-md-reader-document a { color: #1c5fb8; }
.cd-md-reader-document em { color: #3d4854; }
.cd-md-reader-document code {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.08);
  color: #111820;
}
.cd-md-reader-document pre {
  background: #e9e4d8;
  border-color: rgba(0,0,0,0.08);
}
.cd-md-reader-document blockquote {
  background: rgba(28,95,184,0.06);
  border-left-color: #1c5fb8;
  color: #3d4854;
}
.cd-md-reader-document th {
  background: rgba(0,0,0,0.05);
  color: #111820;
}
.cd-md-reader-document th,
.cd-md-reader-document td {
  border-color: rgba(0,0,0,0.12);
}
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-panel {
  background: rgba(15,18,22,0.98);
}
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document {
  background: #14181e;
  color: var(--ink-soft);
}
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document h1,
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document h2,
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document h3,
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document h4,
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document h5,
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document h6,
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document strong {
  color: var(--ink);
}
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document a { color: #7adcff; }
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document em { color: var(--ink-soft); }
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document code {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: var(--ink);
}
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document pre {
  background: #0d1117;
  border-color: rgba(255,255,255,0.10);
}
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document blockquote {
  background: rgba(122,220,255,0.07);
  border-left-color: #7adcff;
  color: var(--ink-soft);
}
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document th {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document th,
html[data-jb-markdown-reading-mode="dark"] .cd-md-reader-document td {
  border-color: rgba(255,255,255,0.12);
}
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document {
  background: #d8d1c2;
  color: #20242b;
}
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document h1,
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document h2,
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document h3,
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document h4,
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document h5,
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document h6,
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document strong {
  color: #15191f;
}
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document a { color: #23557f; }
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document em { color: #4b4f55; }
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document code {
  background: rgba(32,36,43,0.08);
  border-color: rgba(32,36,43,0.12);
  color: #15191f;
}
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document pre {
  background: #c9c1b1;
  border-color: rgba(32,36,43,0.12);
}
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document blockquote {
  background: rgba(35,85,127,0.07);
  border-left-color: #23557f;
  color: #40464d;
}
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document th {
  background: rgba(32,36,43,0.05);
  color: #15191f;
}
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document th,
html[data-jb-markdown-reading-mode="modest"] .cd-md-reader-document td {
  border-color: rgba(32,36,43,0.16);
}

.api-modal-board {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.api-board-id-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.api-board-id-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-edge);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.api-board-id-value code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 560px) {
  .api-board-id-row {
    grid-template-columns: 1fr;
  }
  .api-board-id-row .btn {
    width: 100%;
    justify-content: center;
  }
}
.api-modal-banner {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--ink-soft);
}
.api-modal-banner.warn {
  background: rgba(255,186,74,0.07);
  border-color: rgba(255,186,74,0.30);
  color: var(--ink-soft);
}
.api-modal-banner.error {
  background: rgba(255,80,80,0.06);
  border-color: rgba(255,80,80,0.25);
  color: #ff8585;
}
.api-modal-banner.ok {
  background: rgba(199,255,94,0.06);
  border-color: rgba(199,255,94,0.30);
  color: var(--ink);
}
.api-modal-banner-head { margin-bottom: 8px; }
.api-modal-banner strong { color: var(--ink); }

.api-token-reveal {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.api-token-secret {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--glass-edge);
  color: var(--accent);
  overflow: auto;
  white-space: nowrap;
  word-break: break-all;
}

.api-create-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.api-scope-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.api-scope-row code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}
.api-scope-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent);
}

.api-token-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.api-token-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
}
.api-token-name {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.api-token-meta {
  grid-column: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.api-token-meta code {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-soft);
}
.api-token-scopes { color: var(--accent); }
.api-token-stamp  { color: var(--ink-faint); }
.api-token-row .btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 6px 12px;
  font-size: 12px;
}

.api-example {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--glass-edge);
  color: var(--ink-soft);
  overflow-x: auto;
  white-space: pre;
}
.api-example code { background: transparent; border: 0; padding: 0; }

/* Upgrade-required view inside the BoardApiModal */
.api-upgrade-card {
  margin: 6px 0 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(199,255,94,0.05);
  border: 1px solid rgba(199,255,94,0.30);
  color: var(--ink-soft);
}
.api-upgrade-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.api-upgrade-body {
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.api-upgrade-body strong { color: var(--accent); }
.api-upgrade-perks {
  margin: 0;
  padding-left: 22px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.api-upgrade-perks code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--ink);
}

.sub-manage {
  display: block;
  margin: 22px auto 0;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sub-manage:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
}
.sub-manage:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* ────────────────────────────────────────────────────────────────────
   Personalisation: Minimalist mode

   Strips the liquid-glass look — backdrop blur, glow shadows, glassy
   borders, and translucent tints. Everything resolves to flat opaque
   surfaces with hairline borders. Hooked on the root attribute so the
   override applies to every page (boards, workspaces, settings, etc).
   ──────────────────────────────────────────────────────────────────── */
html[data-jb-minimalist] {
  --glass-tint:        #14181e;
  --glass-tint-strong: #1a1f26;
  --glass-edge:        rgba(255,255,255,0.10);
  --glass-edge-strong: rgba(255,255,255,0.16);
  --glass-shadow:      none;
  --blur:              0px;
}
html[data-jb-minimalist] body { background: #0a0d12; }

/* Kill every backdrop-filter on the page. -webkit- variant included. */
html[data-jb-minimalist] *,
html[data-jb-minimalist] *::before,
html[data-jb-minimalist] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Specific surfaces that bake their own glass — flatten them. */
html[data-jb-minimalist] .topbar           { background: #0e131a; }
html[data-jb-minimalist] .glass            { background: #14181e; box-shadow: none; }
html[data-jb-minimalist] .glass::before    { display: none; }
html[data-jb-minimalist] .ws-tile          { background: #14181e; box-shadow: none; }
html[data-jb-minimalist] .ws-tile::before  { display: none; }
html[data-jb-minimalist] .org-card,
html[data-jb-minimalist] .settings-section,
html[data-jb-minimalist] .admin-section,
html[data-jb-minimalist] .sub-card,
html[data-jb-minimalist] .quota-dropdown,
html[data-jb-minimalist] .profile-menu,
html[data-jb-minimalist] .cd-modal,
html[data-jb-minimalist] .list,
html[data-jb-minimalist] .card,
html[data-jb-minimalist] .list-menu-pop,
html[data-jb-minimalist] .presets-pop,
html[data-jb-minimalist] .search-pop,
html[data-jb-minimalist] .composer,
html[data-jb-minimalist] .add-list-form {
  background: #14181e;
  box-shadow: none;
}
html[data-jb-minimalist] .settings-section::before,
html[data-jb-minimalist] .admin-section::before,
html[data-jb-minimalist] .sub-card::before,
html[data-jb-minimalist] .org-card::before,
html[data-jb-minimalist] .card::before { display: none; }
/* Drop the film-grain noise overlay so the page reads cleaner. */
html[data-jb-minimalist] .bg::after { display: none; }
/* Subscription / flair pills lose their accent glow. */
html[data-jb-minimalist] .subscription-flair {
  box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────────────
   Personalisation: Boxed borders

   Removes every rounded corner. Targets every element under <html>
   when the flag is set; CSS variables controlling radius are zeroed
   too so any custom rule that uses var(--radius) inherits 0.
   ──────────────────────────────────────────────────────────────────── */
html[data-jb-boxed] {
  --radius:    0;
  --radius-sm: 0;
}
html[data-jb-boxed] *,
html[data-jb-boxed] *::before,
html[data-jb-boxed] *::after {
  border-radius: 0 !important;
}
/* Pill / circle treatments need explicit overrides since they sometimes
   set their own radius inline or via more specific selectors. */
html[data-jb-boxed] .switch,
html[data-jb-boxed] .switch-track,
html[data-jb-boxed] .switch-thumb,
html[data-jb-boxed] .avatar,
html[data-jb-boxed] .avatar img,
html[data-jb-boxed] .sub-tabs,
html[data-jb-boxed] .sub-tab {
  border-radius: 0 !important;
}

/* Shared chip pickers — used by per-board ACL UI on board.html */
.setting-help { font-size: 12px; color: var(--ink-mute); margin: 4px 0 8px; line-height: 1.4; }
.default-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.radio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px; cursor: pointer; font-size: 12.5px;
}
.radio-pill:has(input:checked) {
  background: rgba(199,255,94,0.06);
  border-color: rgba(199,255,94,0.40);
  color: var(--ink);
}
.chip-multi {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 6px;
  min-height: 36px; border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; background: rgba(0,0,0,0.20);
}
.chip-pick {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px; font-size: 11.5px;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--ink-soft); font-family: inherit;
}
.chip-pick.active {
  background: rgba(199,255,94,0.10);
  border-color: rgba(199,255,94,0.50);
  color: var(--ink);
}
.chip-pick .swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* USER-mode chip variant. Avatar slot sits where the role swatch normally
   does; an <img> renders the profile picture, the initials fallback covers
   members without one. .chip-pick-orphan flags subs that no longer resolve
   to an org member so the admin can prune them. */
.chip-pick-user.active {
  background: rgba(255,122,134,0.12);
  border-color: rgba(255,122,134,0.55);
}
.chip-pick-avatar {
  width: 16px; height: 16px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); flex: 0 0 16px;
}
.chip-pick-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chip-pick-avatar-initials {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-soft); font-family: var(--font-mono);
}
.chip-pick-orphan { opacity: 0.55; font-style: italic; }

/* ── Enterprise mode ───────────────────────────────────────── */
.topbar-enterprise-tag{display:inline-block;margin-left:0.5em;color:var(--enterprise-red)!important;font-weight:700;letter-spacing:0.02em;font-size:0.92em}
.enterprise-mode .brand .accent{color:var(--accent)}
.ent-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,0.06)}
.ent-section-heading{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--ink-mute);text-transform:uppercase;margin:24px 24px 12px}
.suborg-grid,.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 24px 24px}
.suborg-card,.board-card{padding:16px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;background:rgba(255,255,255,0.02)}
.suborg-card h3,.board-card h3{margin:0 0 6px;font-size:16px}
.ent-portal .muted,.ent-suborg .muted{color:var(--ink-mute);font-size:12px}
.breadcrumb{padding:12px 24px;color:var(--ink-mute);font-size:13px}
.breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,0.18)}
.tabbar{display:flex;gap:4px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,0.06)}
.tabbar .tab{padding:8px 14px;background:transparent;border:0;color:var(--ink-soft);font-family:inherit;cursor:pointer;border-bottom:2px solid transparent}
.tabbar .tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.panes{padding:18px 24px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px}
.slug-status[data-state=ok]{color:#7ad17a}
.slug-status[data-state=taken],.slug-status[data-state=invalid]{color:#d97070}
.slug-status[data-state=pending]{color:var(--ink-mute)}

.enterprise-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(193,39,45,0.14);color:var(--enterprise-red);font-size:10px;font-weight:700;letter-spacing:0.08em;vertical-align:middle}
.org-card-meta{font-size:12px;margin:4px 0 6px}

/* ── Enterprise role grant matrix (Task G2) ────────────────────── */
.grant-matrix-layout{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:flex-start}
.grant-matrix-roles{display:flex;flex-direction:column;gap:4px;padding-right:12px;border-right:1px solid rgba(255,255,255,0.06)}
.grant-matrix-heading{font-family:var(--font-display);font-size:14px;font-weight:600;margin:0 0 10px;color:var(--ink)}
.grant-matrix-role-btn{padding:8px 10px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--ink-soft);font-family:inherit;font-size:13px;text-align:left;cursor:pointer}
.grant-matrix-role-btn:hover{background:rgba(255,255,255,0.04);color:var(--ink)}
.grant-matrix-role-btn.active{background:rgba(199,255,94,0.08);border-color:rgba(199,255,94,0.36);color:var(--ink)}
.grant-matrix-detail{min-width:0;overflow-x:auto;border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:16px}
.grant-matrix-detail .muted{color:var(--ink-mute);font-size:12.5px;margin:0 0 12px}
.grant-matrix{width:100%;border-collapse:collapse;font-size:12.5px;min-width:700px}
.grant-matrix th,.grant-matrix td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,0.05);text-align:center;vertical-align:middle}
.grant-matrix thead th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;white-space:nowrap}
.grant-matrix .grant-matrix-corner{text-align:left;color:var(--ink-soft);min-width:140px}
.grant-matrix tbody th{text-align:left;font-weight:500;color:var(--ink)}
.grant-matrix tbody tr:hover{background:rgba(255,255,255,0.025)}
.grant-matrix td.disabled{background:rgba(255,255,255,0.015);opacity:0.55;cursor:not-allowed}
.grant-matrix td.disabled input[type=checkbox]{cursor:not-allowed}
.grant-matrix-cell{display:inline-flex;align-items:center;justify-content:center;padding:4px;cursor:pointer}
.grant-matrix-cell input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--accent)}
.grant-matrix-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.grant-matrix-status{font-size:12px;color:var(--ink-mute)}
.grant-matrix-status.ok{color:#7ad17a}
.grant-matrix-status.error{color:#d97070}

/* Sub-org central editor inside enterprise manage (Task G3) */
.enterprise-suborg-panel{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:flex-start}
.enterprise-suborg-list{display:flex;flex-direction:column;gap:8px;padding-right:12px;border-right:1px solid rgba(255,255,255,0.06)}
.enterprise-suborg-list .suborg-list-head h3{margin:0 0 8px;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--ink)}
.enterprise-suborg-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.enterprise-suborg-row{padding:8px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:13px;display:flex;align-items:baseline;gap:6px}
.enterprise-suborg-row:hover{background:rgba(255,255,255,0.04);color:var(--ink)}
.enterprise-suborg-row.active{background:rgba(199,255,94,0.08);border-color:rgba(199,255,94,0.36);color:var(--ink)}
.enterprise-suborg-row .muted.small{font-size:11px;color:var(--ink-faint)}
.enterprise-suborg-create{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,0.08)}
.enterprise-suborg-create input{padding:6px 8px;background:rgba(0,0,0,0.30);border:1px solid var(--glass-edge);border-radius:6px;color:var(--ink);font-size:12px}
.enterprise-suborg-create button{padding:6px 10px}
.enterprise-suborg-detail{min-width:0}
.enterprise-suborg-detail .breadcrumb{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-mute);margin-bottom:10px}
.enterprise-suborg-detail .breadcrumb-current{color:var(--ink)}
.enterprise-suborg-mount{display:flex;flex-direction:column;gap:12px}

.org-manage-embedded{display:flex;flex-direction:column;gap:12px}
.org-manage-head .org-manage-title{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink)}
.org-manage-tabs{display:flex;gap:2px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:4px}
.org-manage-tab{background:transparent;border:0;color:var(--ink-mute);font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;padding:8px 12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s}
.org-manage-tab:hover{color:var(--ink-soft)}
.org-manage-tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.org-manage-pane{padding-top:10px;min-height:80px}
.org-manage-actions{margin-top:6px;display:flex;gap:8px;justify-content:flex-end}
.org-info-kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.org-info-kv dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-mute)}
.org-info-kv dd{margin:0;font-size:13px;color:var(--ink)}
.org-manage-members{display:flex;flex-direction:column;gap:6px}
.org-manage-member-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:8px;font-size:13px}
.org-manage-member-name{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.org-manage-member-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);letter-spacing:0.04em}
.org-manage-role-chips{display:inline-flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.org-manage-role-chip{padding:2px 6px;border-radius:999px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);font-family:var(--font-mono);font-size:9.5px;color:var(--ink-soft);letter-spacing:0.04em}
.org-manage-roles{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.org-manage-role-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.05);border-radius:6px;font-size:12.5px}
.org-manage-role-swatch{width:10px;height:10px;border-radius:2px;flex:0 0 10px}
.org-manage-role-name{flex:1;color:var(--ink)}
.org-manage-role-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint)}
.org-manage-boards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.org-manage-board-row{display:flex;align-items:center;gap:10px;padding:6px 8px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.05);border-radius:6px;font-size:13px}
.org-manage-board-name{flex:1;color:var(--ink)}
.org-manage-settings{display:flex;flex-direction:column;gap:8px}
.org-manage-settings .small{font-size:11.5px}

@media (max-width:780px){
  .enterprise-suborg-panel{grid-template-columns:1fr}
  .enterprise-suborg-list{padding-right:0;border-right:0;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:12px}
}

/* Admin wizard form layout — one row per label */
#entWizardForm{display:flex;flex-direction:column;gap:16px;max-width:none}
.admin-section.enterprise-provision-card{overflow:hidden;border-color:rgba(193,39,45,0.32);background:linear-gradient(145deg,rgba(193,39,45,0.10),rgba(255,255,255,0.035) 38%,rgba(0,0,0,0.18))}
.admin-section.enterprise-provision-card::after{content:'';position:absolute;top:0;right:0;width:180px;height:180px;background:radial-gradient(circle at top right,rgba(193,39,45,0.22),transparent 62%);pointer-events:none;z-index:-1}
.enterprise-provision-head{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;max-width:680px}
.admin-eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--enterprise-red);font-weight:700}
.enterprise-provision-form{display:flex;flex-direction:column;gap:16px;max-width:none}
.ent-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ent-mode-option{position:relative;display:grid;gap:4px;padding:12px 14px 12px 36px;border:1px solid rgba(255,255,255,0.10);border-radius:8px;background:rgba(0,0,0,0.22);cursor:pointer;transition:border-color .14s,background .14s,box-shadow .14s}
.ent-mode-option:hover{border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.045)}
.ent-mode-option input{position:absolute;left:13px;top:15px;accent-color:var(--enterprise-red)}
.ent-mode-option:has(input:checked){border-color:rgba(193,39,45,0.78);background:rgba(193,39,45,0.10);box-shadow:0 0 0 1px rgba(193,39,45,0.20) inset}
.ent-mode-title{font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--ink)}
.ent-mode-copy{font-size:11.5px;line-height:1.35;color:var(--ink-mute)}
.ent-convert-row{display:grid;grid-template-columns:minmax(0,1fr);padding:12px;border:1px dashed rgba(193,39,45,0.38);border-radius:8px;background:rgba(193,39,45,0.055)}
.ent-convert-row[hidden]{display:none!important}
.ent-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ent-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12.5px;color:var(--ink-soft)}
.ent-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-mute);font-weight:700}
.ent-hint{font-size:11px;line-height:1.35;color:var(--ink-faint)}
.ent-field input[type=text],.ent-field select{width:100%;min-height:36px;padding:8px 10px;border-radius:7px;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.26);color:var(--ink);font-family:inherit;font-size:13px;box-sizing:border-box}
.ent-field input[type=text]:focus,.ent-field select:focus{outline:0;border-color:rgba(193,39,45,0.72);box-shadow:0 0 0 2px rgba(193,39,45,0.18)}
.ent-input-affix{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;border:1px solid rgba(255,255,255,0.12);border-radius:7px;background:rgba(0,0,0,0.26);overflow:hidden}
.ent-input-affix:focus-within{border-color:rgba(193,39,45,0.72);box-shadow:0 0 0 2px rgba(193,39,45,0.18)}
.ent-input-affix input{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.ent-affix{padding-left:10px;font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);white-space:nowrap}
.ent-status-chip{align-self:flex-start;margin-top:0;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-faint);background:rgba(255,255,255,0.035)}
.ent-status-chip[data-state="pending"]{color:#ffba4a;border-color:rgba(255,186,74,0.38);background:rgba(255,186,74,0.08)}
.ent-status-chip[data-state="ok"]{color:var(--accent);border-color:rgba(199,255,94,0.42);background:rgba(199,255,94,0.08)}
.ent-status-chip[data-state="taken"],.ent-status-chip[data-state="invalid"]{color:#ff8585;border-color:rgba(255,133,133,0.38);background:rgba(255,133,133,0.08)}
.ent-quota-panel{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,0.08);border-radius:8px;background:rgba(255,255,255,0.035)}
.ent-quota-panel p{margin:4px 0 0;color:var(--ink-mute);font-size:12px;line-height:1.4}
.ent-quota-badge{flex:0 0 auto;padding:5px 9px;border-radius:999px;border:1px solid rgba(199,255,94,0.30);font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);background:rgba(199,255,94,0.07)}
.admin-actions.ent-submit-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-top:0;padding-top:2px}
.ent-submit-row .admin-status{margin:0;min-height:0}

@media (max-width:720px){
  .ent-mode-grid{grid-template-columns:1fr}
  .ent-form-grid{grid-template-columns:1fr}
  .ent-submit-row{grid-template-columns:1fr}
  .ent-quota-panel{align-items:flex-start;flex-direction:column}
}

/* Enterprise portal uses the same surface grammar as /workspaces. */
.enterprise-mode .ws-page{max-width:1280px;margin:0 auto;padding:24px 32px 48px;flex:1;min-height:0;overflow-y:auto;width:100%;box-sizing:border-box}
.enterprise-mode .ent-portal-page{scrollbar-width:none;-ms-overflow-style:none}
.enterprise-mode .ent-portal-page::-webkit-scrollbar{display:none}
.enterprise-mode .ws-page > h1{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.02em;margin:0 0 28px;color:var(--ink)}
.enterprise-mode .ws-page > h1 .accent{color:var(--accent)}
.enterprise-mode .ws-section{margin-bottom:36px}
.enterprise-mode .ws-section-header{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.10em;text-transform:uppercase;color:var(--ink-mute)}
.enterprise-mode .ws-section-header svg{width:14px;height:14px;opacity:0.7;flex:0 0 14px}
.enterprise-mode .ent-management-section{margin-bottom:42px}
.enterprise-mode .ent-suborg-section-tools{display:flex;align-items:center;margin:-4px 0 16px;max-width:640px}
.enterprise-mode .ent-suborg-search{display:flex;align-items:center;gap:8px;width:100%;max-width:360px;height:34px;padding:0 10px;border:1px solid rgba(255,255,255,0.10);border-radius:8px;background:rgba(0,0,0,0.30);color:var(--ink-mute);transition:border-color .12s,background .12s}
.enterprise-mode .ent-suborg-search:focus-within{border-color:var(--accent);background:rgba(0,0,0,0.45)}
.enterprise-mode .ent-suborg-search svg{width:14px;height:14px;flex:0 0 14px;color:var(--ink-faint)}
.enterprise-mode .ent-suborg-search input{flex:1;min-width:0;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em}
.enterprise-mode .ent-suborg-search input::placeholder{color:var(--ink-faint);font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase}
.enterprise-mode .ent-suborg-search-clear{appearance:none;width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--ink-faint);display:grid;place-items:center;cursor:pointer}
.enterprise-mode .ent-suborg-search-clear:hover{background:rgba(255,255,255,0.06);color:var(--ink)}
.enterprise-mode .ent-suborg-search-clear svg{width:13px;height:13px}
.enterprise-mode .ent-suborg-no-results{padding:12px 14px;border:1px dashed rgba(255,255,255,0.12);border-radius:8px;background:rgba(255,255,255,0.025)}
.enterprise-mode .ent-suborg-stack{display:flex;flex-direction:column;gap:26px;max-width:640px}
.enterprise-mode .ws-org{margin-bottom:0}
.enterprise-mode .ws-org-header{display:flex;align-items:center;gap:10px;margin:0 0 12px;min-width:0}
.enterprise-mode .ws-org-header h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-0.01em;color:var(--ink);line-height:1.2}
.enterprise-mode .ws-org-header .org-mark{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--accent),rgba(255,255,255,0.55));display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:10.5px;color:var(--accent-ink);letter-spacing:0.04em;flex:0 0 28px;overflow:hidden}
.enterprise-mode .ws-org-header .org-mark img{width:100%;height:100%;object-fit:cover;display:block}
.enterprise-mode .ws-org-header .org-mark.has-image{background:transparent;color:inherit}
.enterprise-mode .ws-org-manage{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 9px;margin-left:4px;border:1px solid rgba(199,255,94,0.28);border-radius:5px;background:rgba(199,255,94,0.07);color:var(--accent);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.06em;text-decoration:none;text-transform:uppercase;transition:background .12s,border-color .12s,color .12s}
.enterprise-mode .ws-org-manage:hover{background:rgba(199,255,94,0.14);border-color:rgba(199,255,94,0.48);color:var(--accent)}
.enterprise-mode .role-badge{align-self:center;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid rgba(255,255,255,0.10);color:var(--ink-soft);background:rgba(255,255,255,0.04)}
.enterprise-mode .role-badge.owner{color:var(--accent);border-color:rgba(199,255,94,0.30);background:rgba(199,255,94,0.06)}
.enterprise-mode .role-badge.enterprise-ghost{color:#ff8585;border-color:rgba(217,112,112,0.30);background:rgba(217,112,112,0.06)}
.enterprise-mode .ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.enterprise-mode .ent-suborg-board-grid{max-width:520px}
.enterprise-mode .ent-create-plus{font-size:30px;line-height:0.9;color:currentColor}
.enterprise-mode .ent-suborg-empty-create-tile{max-width:260px}

/* Enterprise content wrapper — mirrors .ws-page (workspaces.html) layout. */
.ent-page{flex:1;min-height:0;overflow-y:auto;width:100%;max-width:1280px;margin:0 auto;padding:24px 32px 48px;box-sizing:border-box}
.ent-page > .ent-head{padding:0 0 16px;margin:0 0 14px;border-bottom:1px solid rgba(255,255,255,0.06)}
.ent-page > .ent-head h1{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.02em;margin:0}
.ent-page .ent-actions{display:flex;gap:8px;align-items:center}
.ent-page .ent-actions a.btn,.ent-page .ent-actions button.btn{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:7px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s}
.ent-page .ent-actions a.btn:hover,.ent-page .ent-actions button.btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.20)}
.ent-page .breadcrumb{padding:0 0 12px;color:var(--ink-mute);font-size:12px;font-family:var(--font-mono);letter-spacing:0.04em}
.ent-page .breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,0.18)}
.ent-page .ent-section-heading{margin:24px 0 12px}
.ent-page .suborg-grid,.ent-page .board-grid{padding:0;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ent-page .suborg-card,.ent-page .board-card{background:var(--glass-tint);backdrop-filter:blur(var(--blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-edge);border-top-color:var(--glass-edge-strong);box-shadow:var(--glass-shadow);padding:16px;border-radius:var(--radius)}
.ent-page .suborg-card a.btn-primary,.ent-page .board-card a.btn-primary{display:inline-flex;align-items:center;height:30px;padding:0 12px;margin-top:8px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:12px;text-decoration:none}
.ent-page .tabbar{padding:0;margin-bottom:14px}
.ent-page .panes{padding:0}
.ent-page .kv dt{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);letter-spacing:0.05em}
.ent-page .kv dd{margin:0;font-size:13.5px;color:var(--ink)}
.ent-page .empty-note,.ent-page .muted{color:var(--ink-mute)}
.ent-page .error{color:#ff8585}
.ent-page .ent-welcome{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.02em;margin:0 0 6px;color:var(--ink)}
.ent-page .ent-welcome .accent{color:var(--accent)}
.ent-page .ent-page-title{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-0.02em;margin:20px 0 4px;color:var(--ink)}
.ent-page .org-subtitle{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-mute);margin:0 0 28px}
.ent-page .section{margin-bottom:32px}
.ent-page .section-header{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.10em;text-transform:uppercase;color:var(--ink-mute)}
.ent-page .section-header svg{width:14px;height:14px;opacity:0.7}
.ent-page .org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ent-page .org-card{position:relative;padding:16px 18px 14px;background:var(--glass-tint);backdrop-filter:blur(var(--blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-edge);border-top-color:var(--glass-edge-strong);border-radius:var(--radius);box-shadow:var(--glass-shadow);display:flex;flex-direction:column;gap:6px;isolation:isolate}
.ent-page .org-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,0.06) 0,rgba(255,255,255,0) 30%);pointer-events:none;z-index:-1}
.ent-page .org-card-head{display:flex;align-items:center;gap:10px}
.ent-page .org-mark{width:32px;height:32px;border-radius:7px;background:linear-gradient(135deg,var(--accent),rgba(255,255,255,0.5));display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:11px;color:var(--accent-ink);flex:0 0 32px;overflow:hidden}
.ent-page .org-mark img{width:100%;height:100%;object-fit:cover;display:block}
.ent-page .org-mark.has-image{background:transparent;color:inherit}
.ent-page .org-card-name{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--ink);margin:0}
.ent-page .role-badge{align-self:flex-start;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid rgba(255,255,255,0.10);color:var(--ink-soft);background:rgba(255,255,255,0.04)}
.ent-page .role-badge.owner{color:var(--accent);border-color:rgba(199,255,94,0.30);background:rgba(199,255,94,0.06)}
.ent-page .role-badge.enterprise-ghost{color:#ff8585;border-color:rgba(217,112,112,0.30);background:rgba(217,112,112,0.06)}
.ent-page .org-card-meta{font-size:12px;margin:4px 0 6px;color:var(--ink-mute)}
.ent-page .org-card-actions{margin-top:8px;display:flex;gap:6px}
.ent-page .btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border:1px solid rgba(255,255,255,0.10);border-radius:6px;background:rgba(255,255,255,0.04);color:var(--ink);font-family:inherit;font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .12s,border-color .12s,transform .12s}
.ent-page .btn:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.20)}
.ent-page .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.ent-page .btn-primary:hover{background:color-mix(in oklch,var(--accent),white 10%);color:var(--accent-ink)}
.ent-page .org-create-tile{min-height:116px;display:grid;place-items:center;background:rgba(255,255,255,0.025);border:1px dashed rgba(255,255,255,0.18);border-radius:var(--radius);color:var(--ink-mute);cursor:pointer;gap:6px;transition:all .15s;font-family:inherit}
.ent-page .org-create-tile:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.30);color:var(--ink);transform:translateY(-2px)}
.ent-page .org-create-tile svg{width:22px;height:22px}
.ent-page .org-create-tile span{font-size:13px;font-weight:500}
.ent-manage-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 18px}
.ent-manage-heading h1{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-0.02em;margin:0 0 4px}
.ent-manage-shell{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:start}
.ent-manage-nav{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius);background:rgba(255,255,255,0.025)}
.ent-manage-tab{height:34px;padding:0 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink-mute);font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-align:left;text-transform:uppercase;cursor:pointer}
.ent-manage-tab:hover{background:rgba(255,255,255,0.04);color:var(--ink)}
.ent-manage-tab.active{background:rgba(199,255,94,0.08);border-color:rgba(199,255,94,0.32);color:var(--ink)}
.ent-manage-card{min-width:0;min-height:360px;padding:18px 20px;background:var(--glass-tint);backdrop-filter:blur(var(--blur)) saturate(180%);-webkit-backdrop-filter:blur(var(--blur)) saturate(180%);border:1px solid var(--glass-edge);border-top-color:var(--glass-edge-strong);border-radius:var(--radius);box-shadow:var(--glass-shadow)}
.ent-manage-card-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.08)}
.ent-manage-card-head h2{margin:0;font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--ink)}
.ent-manage-pane{min-width:0}
.enterprise-mode .ent-manage-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 18px;padding:12px;border:1px solid rgba(255,255,255,0.08);border-radius:8px;background:rgba(255,255,255,0.025)}
.enterprise-mode .ent-manage-overview strong{display:block;font-family:var(--font-display);font-size:15px;color:var(--ink);margin-top:3px}
.enterprise-mode .org-info-panel{display:grid;gap:14px}
.enterprise-mode .org-image-editor{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start}
.enterprise-mode .org-image-preview{width:96px;height:96px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--accent),rgba(255,255,255,0.5));color:var(--accent-ink);font-family:var(--font-mono);font-size:24px;font-weight:800}
.enterprise-mode .org-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.enterprise-mode .org-image-preview.has-image{background:transparent}
.enterprise-mode .org-image-dropzone{min-height:74px;display:grid;place-items:center;padding:12px;border:1px dashed rgba(255,255,255,0.20);border-radius:8px;background:rgba(255,255,255,0.03);color:var(--ink-mute);cursor:pointer;text-align:center;font-size:12px;font-weight:600;transition:all .15s;width:100%}
.enterprise-mode .org-image-dropzone:hover,.enterprise-mode .org-image-dropzone.dragging{border-color:rgba(199,255,94,0.46);background:rgba(199,255,94,0.06);color:var(--ink)}
.enterprise-mode .org-image-dropzone.busy{cursor:wait;opacity:.7}
.enterprise-mode .org-image-dropzone[hidden]{display:none}
.enterprise-mode .org-image-meta{margin:8px 0 0;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute);min-height:14px}
.enterprise-mode .org-image-error{margin:8px 0 0;font-size:11px;color:#ff9a9a;min-height:14px}
.enterprise-mode .org-image-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.enterprise-mode .members-list{display:flex;flex-direction:column;gap:6px}
.enterprise-mode .member-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:8px}
.enterprise-mode .member-row .avatar{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--accent),rgba(255,255,255,0.55));display:grid;place-items:center;overflow:hidden;color:var(--accent-ink);font-family:var(--font-mono);font-weight:800;font-size:11px}
.enterprise-mode .member-row .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.enterprise-mode .member-name{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink)}
.enterprise-mode .member-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);letter-spacing:.04em}
.enterprise-mode .row-spacer{margin-left:auto}
.enterprise-mode .member-row .role-chips{display:flex;flex-wrap:wrap;gap:4px;margin-left:8px}
.enterprise-mode .role-chip{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);color:var(--ink-soft);display:inline-flex;align-items:center;gap:4px}
.enterprise-mode .role-chip .swatch{width:7px;height:7px;border-radius:50%;display:inline-block}
.enterprise-mode .member-row .assign-roles-btn{background:transparent;border:1px solid rgba(255,255,255,0.10);color:var(--ink-mute);border-radius:6px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer}
.enterprise-mode .member-row .assign-roles-btn:hover{color:var(--ink);border-color:rgba(255,255,255,0.20)}
.enterprise-mode .member-row .kick-btn{background:transparent;border:1px solid rgba(255,80,80,0.18);color:#ff8585;border-radius:6px;padding:2px 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.enterprise-mode .member-row .kick-btn:hover{background:rgba(255,80,80,0.10)}
.enterprise-mode .roles-pane{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(330px,1.1fr);gap:16px;margin-bottom:16px}
.enterprise-mode .roles-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.enterprise-mode .roles-head .modal-label{margin:0;line-height:1.2;white-space:nowrap}
.enterprise-mode .roles-list{display:flex;flex-direction:column;gap:6px}
.enterprise-mode .role-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:8px;color:inherit;text-align:left;cursor:pointer}
.enterprise-mode .role-row:hover{background:rgba(255,255,255,0.06)}
.enterprise-mode .role-row.selected{border-color:var(--accent);background:rgba(199,255,94,0.06)}
.enterprise-mode .role-row.everyone{opacity:.85}
.enterprise-mode .role-swatch{width:12px;height:12px;border-radius:3px;flex:0 0 12px}
.enterprise-mode .role-row-name{font-weight:600;color:var(--ink);flex:1}
.enterprise-mode .role-row-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint)}
.enterprise-mode .roles-editor-col{padding-left:12px;border-left:1px solid rgba(255,255,255,0.06)}
.enterprise-mode #enterpriseRoleEditName{width:100%;box-sizing:border-box;background:rgba(0,0,0,0.30);border:1px solid var(--glass-edge);border-radius:8px;padding:8px 10px;color:var(--ink);font-family:var(--font-sans);font-size:13px;outline:none}
.enterprise-mode #enterpriseRoleEditName:focus{border-color:var(--accent)}
.enterprise-mode .role-color-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.enterprise-mode .role-color-row .modal-label{margin:0}
.enterprise-mode .role-color-row input[type=color]{width:36px;height:28px;border:1px solid var(--glass-edge);border-radius:6px;background:transparent;cursor:pointer}
.enterprise-mode .role-color-hex{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint)}
.enterprise-mode .role-default-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
.enterprise-mode .role-perms-grid{display:grid;grid-template-columns:1fr;gap:6px;padding:4px;border:1px solid rgba(255,255,255,0.06);border-radius:8px;max-height:min(50vh,420px);overflow-y:auto}
.enterprise-mode .role-perm-row{display:flex;align-items:flex-start;gap:8px;padding:6px;border-radius:6px;cursor:pointer}
.enterprise-mode .role-perm-row:hover{background:rgba(255,255,255,0.04)}
.enterprise-mode .role-perm-row.role-perm-row-disabled{opacity:.45;cursor:not-allowed}
.enterprise-mode .role-perm-row.role-perm-row-disabled:hover{background:transparent}
.enterprise-mode .role-perm-row.role-perm-row-disabled input{cursor:not-allowed}
.enterprise-mode .role-perm-row input{margin-top:3px}
.enterprise-mode .role-perm-name{font-weight:600;font-size:12.5px;color:var(--ink)}
.enterprise-mode .role-perm-desc{font-size:11.5px;color:var(--ink-mute);margin-top:1px;line-height:1.3}
.enterprise-mode .role-edit-msg{margin:6px 0 0;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute);min-height:14px}
.enterprise-mode .role-editor-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.enterprise-mode .enterprise-role-grants{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08)}
.enterprise-mode .enterprise-grants-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.enterprise-mode .role-popover{position:fixed;width:260px;max-height:60vh;overflow-y:auto;background:rgba(20,24,30,.98);border:1px solid var(--glass-edge);border-top-color:var(--glass-edge-strong);border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.6);padding:12px;z-index:200}
.enterprise-mode .role-popover[hidden]{display:none}
.enterprise-mode .role-popover-list{display:flex;flex-direction:column;gap:4px;max-height:40vh;overflow-y:auto}
.enterprise-mode .role-popover-list label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer}
.enterprise-mode .role-popover-list label:hover{background:rgba(255,255,255,0.04)}
.enterprise-mode .role-popover-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.enterprise-mode .org-quota-panel{display:grid;gap:14px;margin-bottom:16px}
.enterprise-mode .org-quota-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.enterprise-mode .org-quota-title{margin:0 0 4px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink)}
.enterprise-mode .org-quota-tier{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.enterprise-mode .org-quota-total{display:flex;align-items:baseline;gap:6px;font-family:var(--font-mono)}
.enterprise-mode .org-quota-used{font-size:18px;font-weight:800;color:var(--accent)}
.enterprise-mode .org-quota-cap,.enterprise-mode .org-quota-sep{font-size:12px;color:var(--ink-soft)}
.enterprise-mode .org-quota-pct{margin-left:auto;padding:2px 6px;border:1px solid rgba(199,255,94,0.30);color:var(--accent);font-size:11px;font-weight:700}
.enterprise-mode .org-quota-stack{display:flex;height:7px;overflow:hidden;background:rgba(255,255,255,0.08);border-radius:2px}
.enterprise-mode .org-quota-stack>span{display:block;min-width:1px}
.enterprise-mode .org-quota-breakdown{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.enterprise-mode .org-quota-row{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:10px;font-size:12px;color:var(--ink-soft)}
.enterprise-mode .org-quota-row.empty{opacity:.45}
.enterprise-mode .org-quota-marker{width:8px;height:8px;border-radius:1px}
.enterprise-mode .org-quota-bytes,.enterprise-mode .org-quota-row-pct{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute);min-width:56px;text-align:right}
.enterprise-mode .org-quota-row-pct{min-width:36px;color:var(--ink-faint)}
.enterprise-mode .org-quota-note{padding-top:12px;border-top:1px solid rgba(255,255,255,0.06);font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute);line-height:1.5}
.enterprise-mode .ent-quota-mode-card{max-width:680px;padding:14px;border:1px solid rgba(255,255,255,0.08);border-radius:8px;background:rgba(255,255,255,0.025)}
.enterprise-mode .ent-quota-mode-card .default-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.enterprise-mode .ent-quota-mode-card .radio-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(255,255,255,0.10);border-radius:999px;background:rgba(0,0,0,0.18);font-size:12.5px;cursor:pointer;text-transform:capitalize}
.enterprise-mode .ent-quota-mode-card .radio-pill:has(input:checked){border-color:rgba(199,255,94,0.45);background:rgba(199,255,94,0.08);color:var(--ink)}
.enterprise-mode .ent-quota-mode-card .quota-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
.enterprise-mode .ent-quota-mode-card .quota-status{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute)}
@media (max-width:760px){.ent-manage-heading{flex-direction:column}.ent-manage-shell{grid-template-columns:1fr}.ent-manage-nav{flex-direction:row;overflow:auto}.ent-manage-tab{flex:0 0 auto}}
.ent-page form.inline-form{display:flex;gap:6px;align-items:center;margin-top:14px}
.ent-page form.inline-form input,.ent-page form.inline-form button{padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.10);background:rgba(0,0,0,0.30);color:var(--ink);font-family:inherit;font-size:12.5px}
.ent-page form.inline-form button{background:var(--accent);color:var(--accent-ink);font-weight:600;border:0;cursor:pointer}
.ent-page .quota-form{display:flex;flex-direction:column;gap:14px;max-width:560px;margin-top:14px}
.ent-page .quota-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);font-size:12.5px}
.ent-page .alloc-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 0}
.ent-page .alloc-row input{padding:5px 8px;border-radius:5px;border:1px solid rgba(255,255,255,0.10);background:rgba(0,0,0,0.30);color:var(--ink);font-family:var(--font-mono);width:140px}
.ent-page .member-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.ent-page .member-list li{padding:8px 12px;border-radius:6px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);font-size:13px}
.ent-suborg-panel{display:grid;grid-template-columns:240px 1fr;gap:18px}
.enterprise-suborg-list{padding:0;list-style:none}
.enterprise-suborg-rows{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.enterprise-suborg-rows li{padding:8px 10px;border-radius:6px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);cursor:pointer;font-size:13px}
.enterprise-suborg-rows li.active{background:rgba(199,255,94,0.08);border-color:rgba(199,255,94,0.30)}
.enterprise-suborg-detail{padding:14px 16px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);min-height:240px}
/* ── Card fields mode ── */
.cd-fields-wrap { display: flex; flex-direction: column; gap: 10px; }
.cd-fields-desc { min-height: 52px; height: 72px; max-height: 140px; resize: vertical; font-size: 13px; }
.cd-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.cd-field-item {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 8px 10px;
}
.cd-field-name {
  font-size: 11px; font-family: var(--font-mono);
  color: var(--ink-mute); letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-field-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.cd-field-text {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px; padding: 3px 6px;
  font-size: 12px; color: var(--ink); width: 100%;
}
.cd-fields-empty { font-size: 12px; color: var(--ink-faint); margin: 0; }
/* ── Presets panel — Fields section ── */
.pm-field-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0;
}
.pm-field-name-input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px; padding: 4px 8px; font-size: 12px; color: var(--ink);
}
.pm-field-type-toggle {
  font-size: 11px; font-family: var(--font-mono);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px; padding: 3px 7px; cursor: pointer; white-space: nowrap;
}
.pm-field-type-toggle.active { background: rgba(199,255,94,0.12); border-color: rgba(199,255,94,0.3); color: var(--accent); }
.pm-field-new-form .pm-field-type-picker {
  display: flex; align-items: center; gap: 6px;
}
.pm-field-type-label {
  font-size: 11px; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pm-card-template-form { gap: 10px; }
.pm-card-component-row {
  justify-content: space-between;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}
.pm-card-component-row input { order: 2; }
.save-status.is-error {
  color: #ff4f64;
  font-weight: 800;
}

/* ───── Mobile topbar + burger drawer ─────────────────────────── */
/* Below 640px the full topbar can't fit; we collapse the secondary
   controls (crumb, quota, automations, presets, filter, access, org,
   profile) into a right-side drawer launched by the burger button.
   Keep search visible alongside the burger so the primary action is
   one tap away. */

.topbar-burger { display: none; }
.mobile-drawer-host { display: none; }

@media (max-width: 640px) {
  .topbar--mobile {
    gap: 8px;
    padding: 0 10px;
  }
  .topbar--mobile .brand--mobile {
    gap: 6px;
    font-size: 14px;
    flex: 0 0 auto;
    min-width: 0;
  }
  /* Drop the wordmark to give search more room. Enterprise tag stays. */
  .topbar--mobile .brand-name { display: none; }
  .topbar--mobile .topbar-enterprise-tag {
    margin-left: 0;
    font-size: 0.82em;
    letter-spacing: 0.02em;
  }
  /* Search expands to take whatever space remains. */
  .topbar--mobile .search-widget {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: 0;
  }
  /* The full search syntax dropdown is too wide for phones; the input
     itself still works fine. */
  .topbar--mobile .search-dropdown { display: none; }

  .topbar-burger {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    color: var(--ink-soft);
    transition: background .15s, color .15s, border-color .15s;
  }
  .topbar-burger:hover,
  .topbar-burger:focus-visible {
    background: rgba(255,255,255,0.06);
    color: var(--ink);
    outline: none;
  }
  .topbar-burger-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
  }
  .topbar-burger-lines span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }
  .topbar-burger-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff3d57;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
  }
}

/* Drawer host: portaled at body level. On mobile we keep it mounted at
   all times — even when the burger is closed — so the ProfileMenu inside
   keeps polling /api/notifications and the burger badge stays live.
   Visibility, pointer events, and the slide animation are driven off the
   .is-open class instead of conditional mounting. */
.mobile-drawer-host {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  pointer-events: none;
}
.mobile-drawer-host.is-open { pointer-events: auto; }
.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .15s ease;
}
.mobile-drawer-host.is-open .mobile-drawer-backdrop { opacity: 1; }
.mobile-drawer {
  position: relative;
  margin-left: auto;
  width: min(360px, 88vw);
  height: 100%;
  background: rgba(14, 18, 24, 0.985);
  border-left: 1px solid var(--glass-edge, rgba(255,255,255,0.10));
  box-shadow: -10px 0 30px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .18s ease-out;
}
.mobile-drawer-host.is-open .mobile-drawer { transform: translateX(0); }
/* Don't render the drawer at all above the mobile breakpoint. */
@media (min-width: 641px) {
  .mobile-drawer-host { display: none; }
}
.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
}
.mobile-drawer-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mobile-drawer-close {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--ink-soft);
}
.mobile-drawer-close:hover { background: rgba(255,255,255,0.06); color: var(--ink); }

.mobile-drawer-profile {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Re-flow ProfileMenu so its trigger reads as a drawer row and its
   popover renders inline beneath it instead of as an absolute card. */
.mobile-drawer-profile .profile-menu-wrap {
  display: block;
  width: 100%;
}
.mobile-drawer-profile .profile-menu-trigger {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.mobile-drawer-profile .profile-menu-trigger:hover { box-shadow: none; background: rgba(255,255,255,0.06); }
.mobile-drawer-profile .profile-menu-identity {
  flex: 1 1 auto;
  min-width: 0;
}
.mobile-drawer-profile .profile-menu-name {
  max-width: none;
  font-size: 12px;
}
.mobile-drawer-profile .profile-menu {
  position: static;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding: 4px;
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: none;
}
.mobile-drawer-profile .subscription-control {
  /* No hover-expand inside the cramped drawer trigger — just show the
     flair pill and let the dedicated Subscribe item open the page. */
  padding-left: 0 !important;
}
.mobile-drawer-profile .subscription-control:hover,
.mobile-drawer-profile .subscription-control:focus-within {
  padding-left: 0 !important;
}
.mobile-drawer-profile .subscription-upgrade { display: none; }

/* In profile-mode, drawer body is replaced by the profile items. */
.mobile-drawer-host[data-profile-open="true"] .mobile-drawer-secondary { display: none; }

.mobile-drawer-secondary {
  padding: 12px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-drawer-crumb {
  padding: 4px 2px 6px;
}
.mobile-drawer-crumb .crumb {
  flex-wrap: wrap;
  max-width: none !important;
  white-space: normal;
}
.mobile-drawer-crumb .crumb-seg-mid,
.mobile-drawer-crumb .crumb-seg-board {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.mobile-drawer-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}
.mobile-drawer-row::before {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  content: attr(data-row);
}
.mobile-drawer-row[data-row="quota"]::before       { content: "Quota usage"; }
.mobile-drawer-row[data-row="automations"]::before { content: "Automations"; }
.mobile-drawer-row[data-row="presets"]::before     { content: "Presets"; }
.mobile-drawer-row[data-row="filter"]::before      { content: "Filter"; }
.mobile-drawer-row[data-row="access"]::before      { content: "Board access"; }
.mobile-drawer-row[data-row="org"]::before         { content: "Organisation"; }

/* Triggers fill row width so they're a comfortable tap target. */
.mobile-drawer-row .profile-menu-wrap,
.mobile-drawer-row .presets-menu,
.mobile-drawer-row .quota-widget {
  display: block;
  width: 100%;
}
.mobile-drawer-row .icon-btn,
.mobile-drawer-row .profile-menu-trigger,
.mobile-drawer-row .quota-trigger {
  width: 100%;
  min-height: 36px;
  height: auto;
  justify-content: flex-start;
  padding: 0 10px;
  border-radius: 8px;
}
.mobile-drawer-row .icon-btn { gap: 8px; }

/* Reuse existing dropdowns inline — each menu's popover, when open,
   flows into the drawer instead of floating as an absolute card. */
.mobile-drawer-row .profile-menu,
.mobile-drawer-row .presets-pop,
.mobile-drawer-row .quota-dropdown {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  margin-top: 6px;
  animation: none;
  box-sizing: border-box;
}
.mobile-drawer-row .presets-pop {
  width: 100%;
  padding: 10px;
}
.mobile-drawer-row .presets-list-frame {
  max-height: 40vh;
}

/* Some triggers' aria-expanded styling already exists, but the static
   popover inside the drawer wants to look attached to its trigger. */
.mobile-drawer-row .quota-dropdown::before { content: none; }

/* OrgProfileMenu and ProfileMenu inside row mode — force long names to
   wrap rather than ellipsis. */
.mobile-drawer-row .profile-menu-name {
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* The drawer is tall; let the search-banner (Cmd-K result list) and any
   open card modal sit on top of it. The drawer is z=200; modal-bg uses
   z=300+ from its existing rules, so this is automatic, but the search
   syntax dropdown anchored to the topbar input would otherwise float
   below the drawer — hide it once burger is open. */
.mobile-drawer-host ~ .search-dropdown { display: none; }

/* L9: global :focus-visible fallback so keyboard users always see
   focus, even on controls whose hover rule clears the outline.
   Specific component rules earlier in the file with stronger
   specificity still win (e.g. .brand-link, .profile-menu-trigger). */
:focus-visible {
  outline: 2px solid var(--accent, #c7ff5e);
  outline-offset: 2px;
}
/* Re-assert on buttons that wear outline:none on :hover — their
   :focus-visible state would otherwise inherit the cleared outline. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent, #c7ff5e);
  outline-offset: 2px;
}
/* L9 follow-up: four pre-existing component-specific :focus-visible
   rules explicitly cleared the outline. They still win on specificity
   over the generic rule above, so re-assert at equal specificity in
   source order so the latest declaration wins. */
.composer-kind-btn:focus-visible,
.cd-md-tool:focus-visible,
.cd-md-preview-clickable:focus-visible,
.topbar-burger:focus-visible {
  outline: 2px solid var(--accent, #c7ff5e);
  outline-offset: 2px;
}