/* ==========================================================================
   Waypoint — design system
   Midnight graphite surface, ember/aurora AI accents, generous breathing room
   ========================================================================== */

:root {
  --sidebar-w: 232px;        /* expanded sidebar width */
  --sidebar-rail: 64px;      /* collapsed icon-rail width */
  --primary: #F97316;        /* ember orange */
  --accent: #7C5CFC;         /* aurora violet */
  --bg: #17181C;             /* midnight graphite */
  --surface: #23252B;        /* slate carbon */
  --surface-hover: #2E3138;  /* ash graphite */
  --text: #F8F7F3;           /* cloud white */
  --text-2: #A6ADB8;         /* mist grey */
  --border: #3B4048;         /* steel grey */
  --danger: #EF4444;         /* ember red */
  --warning: #FBBF24;        /* amber gold */
  --success: #22C55E;        /* evergreen */
  --info: #38BDF8;           /* horizon blue */

  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
}

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

/* The hidden attribute always wins, whatever display an element carries */
[hidden] { display: none !important; }

html { color-scheme: dark; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(124, 92, 252, 0.09), transparent 60%),
    radial-gradient(50rem 35rem at -10% 15%, rgba(249, 115, 22, 0.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  /* Left padding clears the fixed sidebar; both glide together when the
     sidebar collapses because they share --sidebar-w. */
  padding: 0 clamp(1.25rem, 4vw, 3rem) 6rem
    calc(var(--sidebar-w) + clamp(1.25rem, 3vw, 2.5rem));
  line-height: 1.6;
  transition: padding-left 0.35s var(--ease);
}

body.sidebar-collapsed { --sidebar-w: var(--sidebar-rail); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.app-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2.25rem 0 1rem;
}

.brand { display: flex; align-items: center; gap: 1rem; flex: none; }

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  box-shadow:
    0 0 18px rgba(249, 115, 22, 0.35),
    0 0 36px rgba(124, 92, 252, 0.25);
}
.brand-mark svg { width: 22px; height: 22px; }

.brand h1 {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

/* Global search */

.global-search {
  position: relative;
  flex: 1;
  max-width: 420px;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.global-search .search-icon {
  position: absolute;
  left: 0.9rem;
  width: 15px;
  height: 15px;
  color: var(--text-2);
  pointer-events: none;
}

#global-search-input {
  width: 100%;
  font: inherit;
  font-size: 0.86rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1rem 0.5rem 2.4rem;
  outline: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.35s var(--ease);
}
#global-search-input::placeholder { color: var(--text-2); opacity: 0.75; }
#global-search-input:focus {
  border-color: rgba(124, 92, 252, 0.5);
  box-shadow: 0 0 0 1px rgba(124, 92, 252, 0.25), 0 0 20px rgba(124, 92, 252, 0.14);
}

.search-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
  background: linear-gradient(170deg, #292B33 0%, var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 28px rgba(124, 92, 252, 0.1);
  z-index: 35;
  animation: rise 0.3s var(--ease);
}

.search-group-label {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 0.55rem 0.8rem 0.25rem;
}

.search-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  padding: 0.5rem 0.8rem;
  border-radius: 9px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.search-result:hover { background: var(--surface-hover); }
.search-result .search-sub {
  color: var(--text-2);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.search-empty {
  color: var(--text-2);
  font-size: 0.85rem;
  padding: 0.8rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Composer — an action input, not a chat
   -------------------------------------------------------------------------- */

/* Pinned to the top of the board so the input stays reachable however far
   the user scrolls. Rather than a solid slab, this is a soft veil: a light
   tint plus a strong blur, masked so the whole layer — blur included —
   dissolves to nothing at its lower edge. Content diffuses behind it and
   melts away instead of stopping at a hard line, so it reads as part of
   the page rather than a panel sitting on top. No border, no shadow.
   The mask keeps its fade inside the bottom padding, so the composer
   itself stays fully crisp and legible. */
.composer-zone {
  position: sticky;
  top: 0;
  z-index: 25;
  /* Full-bleed: negative margins cancel the body's side padding so the veil
     spans the whole viewport width, then matching inner padding puts the
     composer back on the content grid. This removes the vertical seams —
     the left side tucks under the fixed sidebar (which paints above it at a
     higher z-index) and the right side ends at the viewport edge, so there
     is no boundary to see on either side. */
  margin: 0 calc(-1 * clamp(1.25rem, 4vw, 3rem)) 0.25rem
    calc(-1 * (var(--sidebar-w) + clamp(1.25rem, 3vw, 2.5rem)));
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem) 1.9rem
    calc(var(--sidebar-w) + clamp(1.25rem, 3vw, 2.5rem));
  border: none;
  box-shadow: none;
  /* Glide with the sidebar collapse, like the body's padding does */
  transition: margin-left 0.35s var(--ease), padding-left 0.35s var(--ease);
  background: linear-gradient(
    to bottom,
    rgba(23, 24, 28, 0.72) 0%,
    rgba(23, 24, 28, 0.55) 60%,
    rgba(23, 24, 28, 0.35) 100%
  );
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 30px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 30px),
    transparent 100%
  );
}

.composer {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(180deg, #26282F 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.6rem 0.6rem 0.6rem 0.8rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}

.composer:focus-within {
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.25),
    0 0 24px rgba(249, 115, 22, 0.18),
    0 0 54px rgba(124, 92, 252, 0.16);
}

.composer-glow {
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: linear-gradient(120deg,
    rgba(249, 115, 22, 0.16), transparent 35%,
    transparent 65%, rgba(124, 92, 252, 0.16));
}
.composer:focus-within .composer-glow { opacity: 1; }

/* Search-as-you-type project scope */

.scope-search {
  position: relative;
  flex: none;
  width: 215px;
  display: flex;
  align-items: center;
}

#scope-input {
  width: 100%;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--surface-hover);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.45rem 2rem 0.45rem 0.95rem;
  outline: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
#scope-input::placeholder { color: var(--text-2); opacity: 0.85; }
#scope-input:focus { background-color: #363A42; }
#scope-input.has-selection {
  border-color: rgba(124, 92, 252, 0.55);
  color: #C4B5FD;
  background: rgba(124, 92, 252, 0.1);
}

.scope-clear {
  position: absolute;
  right: 0.45rem;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.scope-clear:hover { color: var(--text); background: rgba(166, 173, 184, 0.15); }
.scope-clear svg { width: 11px; height: 11px; }

.scope-results {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  width: 290px;
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
  background: linear-gradient(170deg, #292B33 0%, var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(124, 92, 252, 0.08);
  z-index: 30;
  animation: rise 0.3s var(--ease);
}

.scope-results li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.8rem;
  border-radius: 9px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.scope-results li:hover,
.scope-results li.is-highlighted { background: var(--surface-hover); }
.scope-results .scope-programme {
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.scope-results .scope-empty { color: var(--text-2); cursor: default; }
.scope-results .scope-empty:hover { background: transparent; }

/* Wrap rather than squeeze: on a narrow content column the scope picker,
   input and Submit reflow onto separate lines instead of collapsing the
   textarea to nothing. Breakpoint-free, so it degrades at any width. */
.composer { align-items: flex-end; flex-wrap: wrap; }
.composer .scope-search,
.composer .btn-primary { margin-bottom: 2px; }

#composer-input {
  flex: 1;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  min-width: 160px;
  padding: 0.55rem 0;
  resize: none;
  max-height: 120px;
  overflow-y: auto;
}
#composer-input::placeholder { color: var(--text-2); opacity: 0.75; }

/* Inline clarification prompt — one question, no history */

.clarify-panel {
  max-width: 860px;
  margin: 0.9rem auto 0;
  background: linear-gradient(150deg, rgba(124, 92, 252, 0.14), rgba(124, 92, 252, 0.04));
  border: 1px solid rgba(124, 92, 252, 0.4);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1.1rem;
  box-shadow: 0 0 26px rgba(124, 92, 252, 0.14);
  animation: rise 0.4s var(--ease);
}

.clarify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clarify-kicker {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.clarify-panel .scope-clear { position: static; }

.clarify-context {
  font-size: 0.78rem;
  color: var(--text-2);
  margin: 0.3rem 0 0.1rem;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#clarify-question { font-size: 0.92rem; margin: 0.35rem 0 0.8rem; }

/* Confidence-threshold option pills */
.clarify-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.clarify-opt {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease),
    background 0.25s var(--ease);
}
.clarify-opt:hover { transform: translateY(-1px); }
.clarify-opt:disabled { opacity: 0.5; cursor: default; transform: none; }

.clarify-opt.opt-yes {
  color: #06240f;
  background: var(--success);
  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.3);
}
.clarify-opt.opt-yes:hover { box-shadow: 0 4px 18px rgba(34, 197, 94, 0.45); }

.clarify-opt.opt-no {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
}
.clarify-opt.opt-no:hover { background: var(--surface-hover); color: var(--text); }

.clarify-opt.opt-else {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 2px 12px rgba(124, 92, 252, 0.3);
}
.clarify-opt.opt-else:hover { box-shadow: 0 4px 18px rgba(124, 92, 252, 0.45); }

#clarify-form { display: flex; gap: 0.6rem; }

#clarify-input {
  flex: 1;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: rgba(23, 24, 28, 0.55);
  border: 1px solid rgba(124, 92, 252, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
#clarify-input:focus {
  border-color: rgba(124, 92, 252, 0.65);
  box-shadow: 0 0 0 1px rgba(124, 92, 252, 0.3), 0 0 16px rgba(124, 92, 252, 0.15);
}

/* Buttons */

.btn-primary {
  position: relative;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  background: linear-gradient(135deg, #FB8C33 0%, var(--primary) 55%, #E05E0A 100%);
  box-shadow: 0 2px 14px rgba(249, 115, 22, 0.35);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.2s;
}
.btn-primary:hover {
  box-shadow: 0 4px 22px rgba(249, 115, 22, 0.5);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }

.btn-ghost {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-ghost:hover { color: var(--text); background: var(--surface-hover); }

.btn-small { font-size: 0.82rem; padding: 0.5rem 1.1rem; border-radius: 12px; }

.btn-mini {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.22rem 0.72rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn-mini:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: rgba(166, 173, 184, 0.4);
}

.btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.is-busy .btn-label { display: none; }
.is-busy .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 980px;
  margin: 2.25rem auto 1rem;
  flex-wrap: wrap;
}

.filter-left {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.filter-pill {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 1.2rem;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-pill:hover { color: var(--text); background: var(--surface-hover); }
.filter-pill.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.85), rgba(124, 92, 252, 0.85));
  box-shadow: 0 0 16px rgba(124, 92, 252, 0.25);
}

.filter-menu { position: relative; }

.filter-pill-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  font-size: 0.66rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 999px;
  padding: 0 0.3rem;
}

.filter-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  width: 300px;
  background: linear-gradient(170deg, #292B33 0%, var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 28px rgba(124, 92, 252, 0.08);
  z-index: 35;
  animation: rise 0.3s var(--ease);
}

.filter-section { display: grid; gap: 0.45rem; }
.filter-section + .filter-section { margin-top: 1.1rem; }

.filter-section-label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  cursor: pointer;
  user-select: none;
  padding: 0.15rem 0;
}

.filter-option input {
  appearance: none;
  width: 17px;
  height: 17px;
  flex: none;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s var(--ease);
}
.filter-option input:checked {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.filter-option input:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* Toggle switch style for boolean filters */
.filter-option input.toggle {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  position: relative;
}
.filter-option input.toggle::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  translate: 0 -50%;
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--text-2);
  transform: none;
  transition: left 0.25s var(--ease), background 0.25s var(--ease);
}
.filter-option input.toggle:checked::after { left: 16px; background: #fff; }

.filter-clear {
  margin-top: 1.1rem;
  width: 100%;
  text-align: center;
}

.view-controls { display: flex; gap: 0.45rem; }

/* --------------------------------------------------------------------------
   Board — programmes, projects, tasks
   -------------------------------------------------------------------------- */

.board {
  max-width: 980px;
  margin: 1.5rem auto 0;
  display: grid;
  gap: 2rem;
}

.board-loading { text-align: center; color: var(--text-2); padding: 3rem; }

.programme { animation: rise 0.5s var(--ease) both; }

/* Completed programmes/projects sink back until surfaced by a filter */
.is-dimmed { opacity: 0.5; transition: opacity 0.35s var(--ease); }
.is-dimmed:hover { opacity: 0.8; }

.programme-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.programme-head {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius-sm);
}

.programme-head h2 {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}

.programme-desc {
  color: var(--text-2);
  font-size: 0.84rem;
  margin-top: 0.05rem;
}

.chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-2);
  transition: transform 0.35s var(--ease);
}
.programme.is-open > .programme-row .chevron,
.programme.is-open > .catchall-box .programme-row .chevron,
.project.is-open > .project-row .chevron { transform: rotate(90deg); }

.count-chip {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  white-space: nowrap;
}

/* Hover-revealed manual actions — present, but out of the way */
.row-actions {
  display: flex;
  gap: 0.4rem;
  flex: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.programme-row:hover .row-actions,
.programme-row:focus-within .row-actions,
.project-row:hover .row-actions,
.project-row:focus-within .row-actions { opacity: 1; }

/* Collapse machinery — grid-rows animates smoothly without fixed heights.
   Padding lives on the body wrapper INSIDE the clipped element, so a
   collapsed card shows its header row and nothing else. */
.collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.collapse > .collapse-inner { overflow: hidden; min-height: 0; }
.is-open > .collapse { grid-template-rows: 1fr; }

.programme-body {
  display: grid;
  gap: 1.1rem;
  padding: 0.75rem 0 0.5rem;
}

/* Catch-all containers for ungrouped work — dashed, same shape */

.catchall {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 1.1rem 0.35rem;
}
.catchall .programme-body { padding-bottom: 0.85rem; }

.project.catchall-tasks {
  background: transparent;
  border: 1.5px dashed var(--border);
  box-shadow: none;
}
.project.catchall-tasks:hover { transform: none; box-shadow: none; }

/* Project cards — floating, no heavy borders */

.project {
  background: linear-gradient(165deg, #26282F 0%, var(--surface) 70%);
  border: 1px solid rgba(59, 64, 72, 0.6);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.project:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.project-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-right: 1.1rem;
}

.project-head {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 1.15rem 0 1.15rem 1.4rem;
  border-radius: var(--radius);
}

.project-head h3 { font-weight: 600; font-size: 0.98rem; }

.project-status {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  white-space: nowrap;
}
.project-status.not_started { color: var(--text-2); background: rgba(166, 173, 184, 0.12); }
.project-status.in_progress { color: var(--info); background: rgba(56, 189, 248, 0.12); }
.project-status.complete { color: var(--success); background: rgba(34, 197, 94, 0.12); }
.project-status.on_hold { color: var(--warning); background: rgba(251, 191, 36, 0.12); }
.project-status.cancelled { color: var(--text-2); background: rgba(166, 173, 184, 0.08); }

.project-body {
  display: grid;
  gap: 0.35rem;
  padding: 0.15rem 1.4rem 1.2rem;
}

.empty-note {
  color: var(--text-2);
  font-size: 0.85rem;
  padding: 0.5rem 0.2rem 0.75rem;
}

/* Tasks */

.task {
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  transition: background 0.3s var(--ease);
}
.task:hover { background: var(--surface-hover); }

.task-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.task-title { font-size: 0.92rem; }
.task.status-complete .task-title,
.task.status-cancelled .task-title {
  color: var(--text-2);
  text-decoration: line-through;
  text-decoration-color: rgba(166, 173, 184, 0.5);
}

.task-actions {
  margin-left: auto;
  display: flex;
  gap: 0.35rem;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.task:hover .task-actions,
.task:focus-within .task-actions { opacity: 1; }

.badge {
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.16rem 0.65rem;
  white-space: nowrap;
}
.badge.not_started { color: var(--text-2); background: rgba(166, 173, 184, 0.12); }
.badge.in_progress { color: var(--info); background: rgba(56, 189, 248, 0.13); }
.badge.complete { color: var(--success); background: rgba(34, 197, 94, 0.13); }
.badge.on_hold { color: var(--warning); background: rgba(251, 191, 36, 0.13); }
.badge.cancelled { color: var(--text-2); background: rgba(166, 173, 184, 0.08); }

.meta {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.meta svg { width: 13px; height: 13px; }
.meta.priority-high { color: var(--warning); }

/* Blockers & risks nested under a task */

.task-links {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding-left: 0.35rem;
}

.link-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.82rem;
  border-left: 2px solid transparent;
  padding: 0.35rem 0.75rem;
  border-radius: 0 10px 10px 0;
}

.link-item .link-kicker {
  flex: none;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.link-item .link-actions {
  margin-left: auto;
  flex: none;
  display: flex;
  gap: 0.35rem;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.link-item:hover .link-actions,
.link-item:focus-within .link-actions { opacity: 1; }

.link-blocker.open,
.link-blocker.in_progress {
  color: #FCA5A5;
  border-left-color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
}
.link-blocker.open .link-kicker,
.link-blocker.in_progress .link-kicker { color: var(--danger); }

/* Resolved blockers / closed risks stay visible but dimmed — active work
   reads first, settled items recede without disappearing. */
.link-blocker.resolved {
  color: var(--text-2);
  border-left-color: var(--border);
  background: rgba(166, 173, 184, 0.05);
  opacity: 0.6;
}
.link-blocker.resolved:hover { opacity: 1; }
.link-blocker.resolved .link-kicker { color: var(--text-2); }

.link-risk {
  color: #C4B5FD;
  border-left-color: var(--accent);
  background: rgba(124, 92, 252, 0.07);
}
.link-risk .link-kicker { color: var(--accent); }
.link-risk.closed-out {
  color: var(--text-2);
  border-left-color: var(--border);
  background: rgba(166, 173, 184, 0.05);
  opacity: 0.6;
}
.link-risk.closed-out:hover { opacity: 1; }
.link-risk.closed-out .link-kicker { color: var(--text-2); }

.link-note { color: var(--text-2); font-size: 0.76rem; }

/* Search hit highlight — a brief ember pulse */

.is-search-hit { animation: searchhit 2s var(--ease); }
@keyframes searchhit {
  0%, 35% {
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.7), 0 0 34px rgba(249, 115, 22, 0.3);
    border-radius: var(--radius-sm);
  }
  100% { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   Modals — diff card + entity forms
   -------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(13, 14, 17, 0.72);
  backdrop-filter: blur(6px);
  z-index: 40;
  animation: fade 0.3s var(--ease);
  overflow-y: auto;
  padding: 2rem 0;
}

.modal {
  width: min(560px, calc(100vw - 2.5rem));
  background: linear-gradient(170deg, #292B33 0%, var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.9rem 2rem;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(124, 92, 252, 0.12);
  animation: rise 0.4s var(--ease);
}

.modal h2 { font-weight: 600; font-size: 1.15rem; }

.modal-subtitle {
  color: var(--text-2);
  font-size: 0.86rem;
  margin-top: 0.35rem;
}

.modal-changes {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin: 1.4rem 0 1.7rem;
}

.modal-changes li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.9rem;
  background: rgba(23, 24, 28, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}

.modal-changes li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  transform: translateY(-1px);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
}

/* Entity forms */

.form-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 1.6rem;
}

.form-field { display: grid; gap: 0.4rem; }

.form-field label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: rgba(23, 24, 28, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  outline: none;
  width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.form-field textarea { min-height: 84px; resize: vertical; }
.form-field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A6ADB8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.2), 0 0 16px rgba(249, 115, 22, 0.12);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-2); opacity: 0.6; }

/* Read-only / coming-soon fields */
.form-field input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  border-style: dashed;
}
.form-note {
  font-size: 0.85rem;
  color: var(--text-2);
  background: rgba(23, 24, 28, 0.4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
}

/* Native pickers (date) render legibly on the dark surface */
.form-field input::-webkit-calendar-picker-indicator { filter: invert(0.7); }

.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-error {
  color: var(--danger);
  font-size: 0.83rem;
  margin: -0.4rem 0 1.1rem;
}

/* Activity type picker inside the New Activity modal */

.segment-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  background: rgba(23, 24, 28, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem;
}

.segment {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.segment:hover { color: var(--text); background: var(--surface-hover); }
.segment.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.85), rgba(124, 92, 252, 0.85));
  box-shadow: 0 0 14px rgba(124, 92, 252, 0.2);
}

/* Search-as-you-type parent selector inside forms */

.form-search { position: relative; }

.form-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  background: linear-gradient(170deg, #2C2E36 0%, var(--surface-hover) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
  z-index: 10;
}

.form-search-results li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.form-search-results li:hover { background: rgba(166, 173, 184, 0.12); }
.form-search-results .scope-programme {
  color: var(--text-2);
  font-size: 0.68rem;
  white-space: nowrap;
}

#ff-programme_id-text.has-selection,
#ff-project_id-text.has-selection {
  border-color: rgba(124, 92, 252, 0.55);
  color: #C4B5FD;
}

/* Due-date overrun warning banner on parent cards */

.warn-banner {
  display: grid;
  gap: 0.15rem;
  background: rgba(251, 191, 36, 0.09);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.84rem;
  color: #FDE68A;
  animation: rise 0.4s var(--ease);
}
.warn-banner .warn-detail {
  color: var(--text-2);
  font-size: 0.76rem;
}
.programme > .warn-banner { margin: 0.35rem 0 0.6rem 2.1rem; }
.project .warn-banner { margin: 0 1.4rem 0.9rem; }

/* Stale-project nudge banner */

.nudge-banner {
  background: linear-gradient(150deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.03));
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--radius);
  animation: rise 0.45s var(--ease);
}

.nudge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  color: #FDE68A;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.85rem 1.2rem;
}
.nudge-head .chevron { transform: rotate(90deg); }
.nudge-banner.is-open .nudge-head .chevron { transform: rotate(-90deg); }

.nudge-list {
  display: grid;
  gap: 0.3rem;
  padding: 0 0.9rem 0.9rem;
}

.nudge-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  font: inherit;
  font-size: 0.87rem;
  text-align: left;
  color: var(--text);
  background: rgba(23, 24, 28, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.nudge-item:hover { background: var(--surface-hover); }
.nudge-item .nudge-meta {
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Programme status report panel */

.report-panel {
  background: linear-gradient(170deg, #26282F 0%, var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  margin: 0.5rem 0 0.9rem;
  padding: 1.1rem 1.4rem 0.9rem;
  animation: rise 0.4s var(--ease);
}

.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}

.report-title {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.report-actions { display: flex; gap: 0.4rem; }

.report-body {
  max-height: 420px;
  overflow-y: auto;
  font-size: 0.86rem;
  color: var(--text);
  padding-right: 0.5rem;
}
.report-body h2 { font-size: 1.05rem; font-weight: 700; margin: 0.4rem 0 0.2rem; }
.report-body h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 1.1rem 0 0.35rem;
}
.report-body h4 { font-size: 0.92rem; font-weight: 600; margin: 0.8rem 0 0.25rem; }
.report-body p { margin: 0.3rem 0; }
.report-body em { color: var(--text-2); font-style: normal; font-size: 0.8rem; }
.report-body ul { list-style: none; margin: 0.2rem 0; display: grid; gap: 0.18rem; }
.report-body ul li { padding-left: 1rem; position: relative; }
.report-body ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.report-body ul.md-sub { margin-left: 1rem; }
.report-body ul.md-sub li::before { background: var(--text-2); }

.report-note {
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

/* System-generated completion date — read-only, mist grey */

.completed-meta {
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Prominent, always-visible report button on programme rows */

.report-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  opacity: 1;
  color: var(--text);
  border-color: rgba(166, 173, 184, 0.35);
}
.report-btn svg { width: 12px; height: 12px; }
.report-btn:hover {
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.15);
}

/* Completion note inside edit modals */

.form-completion-note {
  font-size: 0.8rem;
  color: var(--info);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem;
  animation: rise 0.3s var(--ease);
}

/* Task activity feed */

.activity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-2);
  background: rgba(166, 173, 184, 0.08);
  border: none;
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.activity-toggle:hover { color: var(--text); background: rgba(166, 173, 184, 0.18); }
.activity-toggle svg { width: 11px; height: 11px; }

.activity-list {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding: 0.55rem 0.85rem;
  background: rgba(23, 24, 28, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  animation: rise 0.3s var(--ease);
}

.activity-entry {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--text-2);
}
.activity-entry strong { color: var(--info); font-weight: 500; }
.activity-entry .activity-date {
  margin-left: 0.5rem;
  font-size: 0.68rem;
  opacity: 0.7;
  white-space: nowrap;
}
.activity-entry .activity-src {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
  font-style: italic;
}

.activity-icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  transform: translateY(2px);
}
.activity-icon svg { width: 11px; height: 11px; }
.activity-icon.is-effort { color: var(--info); background: rgba(56, 189, 248, 0.12); }
.activity-icon.is-audit { color: var(--primary); background: rgba(249, 115, 22, 0.12); }
.activity-icon.is-comment { color: var(--accent); background: rgba(124, 92, 252, 0.12); }

.activity-empty { color: var(--text-2); font-size: 0.78rem; }

/* Effort logging */

.task-sub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  padding-left: 0.15rem;
}

.effort-total {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--info);
  background: rgba(56, 189, 248, 0.1);
  border: none;
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.effort-total:hover { background: rgba(56, 189, 248, 0.2); }

.effort-list {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.45rem;
  padding: 0.55rem 0.85rem;
  background: rgba(23, 24, 28, 0.45);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  animation: rise 0.3s var(--ease);
}

.effort-entry {
  display: grid;
  grid-template-columns: 90px 52px 1fr;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-2);
}
.effort-entry .effort-hours { color: var(--info); font-weight: 500; }

/* --------------------------------------------------------------------------
   Toast — success and error, dismissible
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 3rem));
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: linear-gradient(150deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.05)), var(--surface);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem 0.9rem 1.3rem;
  font-size: 0.88rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 26px rgba(34, 197, 94, 0.12);
  z-index: 50;
  animation: rise 0.45s var(--ease);
}
.toast.is-error {
  background: linear-gradient(150deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.05)), var(--surface);
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 26px rgba(239, 68, 68, 0.14);
}
.toast.is-leaving { animation: sink 0.4s var(--ease) forwards; }
.toast ul { list-style: none; }
.toast .toast-kicker {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 0.2rem;
}
.toast.is-error .toast-kicker { color: var(--danger); }
.toast .toast-close {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 0.1rem;
  transition: color 0.2s, background 0.2s;
}
.toast .toast-close:hover { color: var(--text); background: rgba(166, 173, 184, 0.15); }
.toast .toast-close svg { width: 11px; height: 11px; }

/* Flash highlight on freshly refreshed project sections */
.project.is-flashing { animation: flash 1.6s var(--ease); }
@keyframes flash {
  0% { box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.6), 0 0 30px rgba(249, 115, 22, 0.25); }
  100% { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); }
}

/* --------------------------------------------------------------------------
   Auth screen (Phase 6.2) — opaque full-screen layer; nothing behind it
   is visible or reachable without a session
   -------------------------------------------------------------------------- */

/* Pre-auth gate: while <body> carries .auth-pending (its initial state
   in the HTML), nothing but the neutral loading mark can render. The
   class is removed by app.js only after the session check resolves. */
body.auth-pending > :not(#auth-loading) { display: none !important; }

.auth-loading { display: none; }
body.auth-pending .auth-loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 70;
}
.auth-loading .brand-mark {
  width: 54px;
  height: 54px;
  animation: authpulse 1.6s var(--ease) infinite;
}
@keyframes authpulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
}

.auth-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(249, 115, 22, 0.09), transparent 60%),
    radial-gradient(900px 520px at 90% 110%, rgba(124, 92, 252, 0.12), transparent 60%),
    var(--bg);
  z-index: 60;
  padding: 2rem 1.25rem;
  overflow-y: auto;
}

.auth-card {
  width: min(420px, 100%);
  background: linear-gradient(170deg, #292B33 0%, var(--surface) 60%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem 2.2rem 1.9rem;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(124, 92, 252, 0.12);
  animation: rise 0.4s var(--ease);
}

.auth-brand { justify-content: center; margin-bottom: 0.9rem; }

.auth-tagline {
  text-align: center;
  color: var(--text-2);
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}

.auth-submit { width: 100%; }

.form-row-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.auth-message {
  color: var(--info);
  font-size: 0.85rem;
  margin: -0.4rem 0 1.1rem;
}

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.3rem;
}

.auth-link {
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0;
  transition: color 0.25s var(--ease);
}
.auth-link:hover { color: var(--accent); }

.auth-resend { margin: -0.3rem 0 1rem; color: var(--info); }

.account-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* Workspace switcher + members modal (Phase 6.3) */

.workspace-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workspace-select {
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.45rem 0.7rem;
  max-width: 200px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.25s var(--ease);
}
.workspace-select:focus { border-color: rgba(124, 92, 252, 0.5); }

.member-list {
  list-style: none;
  display: grid;
  gap: 0.4rem;
  margin: 1.1rem 0;
}

.member-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  background: rgba(23, 24, 28, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem;
  font-size: 0.86rem;
}

.member-name { color: var(--text); }
.member-email { color: var(--text-2); font-size: 0.76rem; }

.member-unconfirmed {
  color: var(--warning);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

.member-role {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.invite-heading {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 1.4rem 0 0.6rem;
}

.invite-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.invite-row input,
.invite-row select {
  font: inherit;
  font-size: 0.86rem;
  color: var(--text);
  background: rgba(23, 24, 28, 0.55);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem 0.8rem;
  outline: none;
}
.invite-row input:focus,
.invite-row select:focus { border-color: rgba(124, 92, 252, 0.5); }

.invite-revoke {
  font: inherit;
  font-size: 0.76rem;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
}
.invite-revoke:hover { text-decoration: underline; }

.account-email {
  color: var(--text-2);
  font-size: 0.8rem;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sidebar — primary navigation (collapsible to an icon rail)
   -------------------------------------------------------------------------- */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 0.75rem;
  background: linear-gradient(180deg, #1B1C22 0%, var(--bg) 85%);
  border-right: 1px solid var(--border);
  z-index: 30;
  transition: width 0.35s var(--ease);
  overflow: visible; /* the avatar menu flies out past the rail */
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 46px;
}

.sidebar-brand { gap: 0.7rem; overflow: hidden; }
.sidebar-brand h1 { font-size: 1.1rem; white-space: nowrap; }
.sidebar-brand .brand-mark { flex: none; width: 40px; height: 40px; border-radius: 12px; }

.sidebar-toggle {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
    transform 0.35s var(--ease);
}
.sidebar-toggle:hover { color: var(--text); background: var(--surface-hover); }
.sidebar-toggle svg { width: 15px; height: 15px; }
body.sidebar-collapsed .sidebar-toggle { transform: rotate(180deg); }

.sidebar-workspace { display: grid; }
.sidebar-workspace .workspace-select { width: 100%; max-width: none; }

.workspace-rail {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  display: none; /* rail mode only (see collapsed/media rules) */
  place-items: center;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #C4B5FD;
  background: rgba(124, 92, 252, 0.12);
  border: 1px solid rgba(124, 92, 252, 0.4);
  border-radius: 12px;
  cursor: pointer;
}

.sidebar-nav { display: grid; gap: 0.25rem; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-item svg { flex: none; width: 19px; height: 19px; }
.nav-item:hover { color: var(--text); background: var(--surface-hover); }
.nav-item.is-active {
  color: var(--text);
  background: linear-gradient(120deg, rgba(249, 115, 22, 0.14), rgba(124, 92, 252, 0.14));
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.25);
}

.sidebar-bottom { margin-top: auto; position: relative; }

.avatar-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 0.45rem 0.5rem;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s var(--ease);
}
.avatar-button:hover { background: var(--surface-hover); }
.avatar-button .sidebar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-circle {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.25);
}

.avatar-menu {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 0.4rem;
  width: 208px;
  background: linear-gradient(170deg, #292B33 0%, var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 28px rgba(124, 92, 252, 0.1);
  z-index: 46;
  animation: rise 0.25s var(--ease);
}

.avatar-menu-head {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.7rem 0.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.35rem;
}
.avatar-menu-name { font-size: 0.86rem; font-weight: 600; }
.avatar-menu-email {
  font-size: 0.72rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-menu-item {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.84rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.avatar-menu-item:hover { background: var(--surface-hover); }
.avatar-menu-danger { color: var(--danger); }
.avatar-menu-divider { height: 1px; background: var(--border); margin: 0.35rem 0; }

/* Collapsed rail: labels vanish, icons center, switcher becomes the
   workspace-initial button */
body.sidebar-collapsed .sidebar-label { display: none; }
body.sidebar-collapsed .sidebar-top { justify-content: center; flex-direction: column; gap: 0.7rem; }
body.sidebar-collapsed .sidebar-workspace .workspace-select { display: none; }
body.sidebar-collapsed .workspace-rail { display: grid; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 0.6rem 0; }
body.sidebar-collapsed .avatar-button { justify-content: center; padding: 0.45rem 0; }

/* Narrow screens: always the rail — the board gets the space. The
   toggle is hidden because there is nothing to expand into. */
@media (max-width: 900px) {
  body { --sidebar-w: var(--sidebar-rail) !important; }
  body .sidebar-label { display: none; }
  body .sidebar-top { justify-content: center; flex-direction: column; gap: 0.7rem; }
  body .sidebar-workspace .workspace-select { display: none; }
  body .workspace-rail { display: grid; }
  body .nav-item { justify-content: center; padding: 0.6rem 0; }
  body .avatar-button { justify-content: center; padding: 0.45rem 0; }
  .sidebar-toggle { display: none; }
}

/* Stub views (Reports, Help) */
.view-stub {
  max-width: 560px;
  margin-top: 4rem;
  background: linear-gradient(170deg, #24262D 0%, var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
}
.view-stub h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.4rem; }
.view-stub p { color: var(--text-2); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Settings views (Account, Workspace)
   -------------------------------------------------------------------------- */

.settings-view {
  max-width: 620px;
  margin: 2.25rem 0 0;
  display: grid;
  gap: 1.1rem;
}

.settings-head { margin-bottom: 0.2rem; }
.settings-head h2 { font-size: 1.35rem; font-weight: 600; }
.settings-sub { color: var(--text-2); font-size: 0.9rem; margin-top: 0.25rem; }

.settings-ws-switcher {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.settings-ws-switcher label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.settings-ws-switcher .workspace-select { max-width: 280px; }

.settings-card {
  background: linear-gradient(170deg, #24262D 0%, var(--surface) 75%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
}
.settings-card-muted { opacity: 0.75; }

.settings-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.settings-form { display: grid; gap: 1rem; }
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.settings-note {
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.settings-note:last-child { margin-bottom: 0; }
.settings-note strong { color: var(--text); font-weight: 600; }

.settings-actions { display: flex; justify-content: flex-end; }

.settings-feedback { font-size: 0.83rem; margin: 0; }
.settings-feedback.is-error { color: var(--danger); }
.settings-feedback.is-success { color: var(--success); }
.settings-feedback.is-pending { color: var(--info); }

/* Settings inputs share the modal form-field look */
.settings-card .form-field input {
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: rgba(23, 24, 28, 0.55);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.55rem 0.85rem;
  outline: none;
  width: 100%;
  transition: border-color 0.25s var(--ease);
}
.settings-card .form-field input:focus { border-color: rgba(124, 92, 252, 0.5); }

/* Plan & usage */
.usage-plan {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.usage-plan-name {
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: capitalize;
}
.usage-plan-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(124, 92, 252, 0.4);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.usage-meter { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.usage-meter:last-child { margin-bottom: 0; }
.usage-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-2);
}
.usage-meter-label strong { color: var(--text); font-weight: 600; }
.usage-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(23, 24, 28, 0.7);
  overflow: hidden;
}
.usage-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.4s var(--ease);
}
.usage-bar-fill.is-full { background: var(--danger); }

/* Member management rows (in Workspace settings) */
.member-list li.member-manage {
  align-items: center;
}
.member-manage-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.role-select {
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: rgba(23, 24, 28, 0.7);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.3rem 0.5rem;
  outline: none;
  cursor: pointer;
}
.role-select:focus { border-color: rgba(124, 92, 252, 0.5); }
.member-remove {
  font: inherit;
  font-size: 0.76rem;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}
.member-remove:hover { text-decoration: underline; }
.member-you {
  font-size: 0.68rem;
  color: var(--text-2);
  font-weight: 500;
}

/* Shared motion */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sink {
  to { opacity: 0; transform: translate(-50%, 12px); }
}
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}