*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: 'Nunito', sans-serif;
  line-height: 1.8;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, .ui-label {
  font-family: 'Varela Round', sans-serif;
  line-height: 1.15;
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: 46px;
  letter-spacing: 0.04em;
}

h2 {
  font-size: 32px;
  letter-spacing: 0.04em;
}

h3 {
  font-size: 16px;
  letter-spacing: 0.06em;
}

a {
  color: var(--color-crimson);
  text-decoration: none;
}

a:hover {
  color: var(--color-crimson-hover);
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.container {
  width: 92%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Slightly tighter container for narrow flow surfaces (auth, focused forms) */

.container.narrow {
  max-width: 1080px;
}

@media (max-width: 640px) {
  /* Tighter side gutters on phones so content surfaces (kanban, chat,
       tables) get more horizontal room. 92vw still applies; only the
       inner padding shrinks. */

  .container {
    padding: 0 12px;
  }
}

.section-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-crimson);
  margin: 0 0 16px;
}

.lead {
  font-size: 16px;
  color: var(--color-text-secondary);
  max-width: 540px;
  margin: 16px 0 24px;
}

.\!btn {
  display: inline-block !important;
  font-family: 'Varela Round', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 2px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
}

.btn {
  display: inline-block;
  font-family: 'Varela Round', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.4rem 0.85rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.4;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.\!btn.primary {
  background: var(--color-crimson) !important;
  color: #fff !important;
}

.btn.primary {
  background: var(--color-crimson);
  color: #fff;
}

.\!btn.primary:hover {
  background: var(--color-crimson-hover) !important;
  color: #fff !important;
}

.btn.primary:hover {
  background: var(--color-crimson-hover);
  color: #fff;
}

.\!btn.ghost {
  background: transparent !important;
  color: var(--color-crimson) !important;
  border: 1px solid rgba(142, 35, 35, 0.35) !important;
}

.btn.ghost {
  background: transparent;
  color: var(--color-crimson);
  border: 1px solid rgba(142, 35, 35, 0.35);
}

.\!btn.ghost:hover {
  border-color: var(--color-crimson) !important;
}

.btn.ghost:hover {
  border-color: var(--color-crimson);
}

/* Destructive action: same chrome as ghost but with crimson copy + border. */

.\!btn.danger {
  background: transparent !important;
  color: var(--color-crimson) !important;
  border: 1px solid rgba(142, 35, 35, 0.35) !important;
}

.btn.danger {
  background: transparent;
  color: var(--color-crimson);
  border: 1px solid rgba(142, 35, 35, 0.35);
}

.\!btn.danger:hover {
  background: rgba(142, 35, 35, 0.05) !important;
  border-color: var(--color-crimson) !important;
}

.btn.danger:hover {
  background: rgba(142, 35, 35, 0.05);
  border-color: var(--color-crimson);
}

/* Standard "tab toolbar" — primary New X / launch button right-aligned above
     the content of a tab (Org Home Projects, Tasks, Agents, Users, etc.). */

.tab-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}

.tab-toolbar .toolbar-title {
  margin-right: auto;
  font-family: 'Varela Round', sans-serif;
  font-size: 18px;
  line-height: 1.2;
}

/* ========================================================================
     LANDING PAGE — bold, modern, edgy
     Fixed header, full-height alternating sections, big typography, hairline
     dividers, no shadows. Drinks from the same well as the logo: industrial,
     confident, crimson + near-black + light.
     ======================================================================== */

/* Fixed marketing header */

.marketing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: rgba(245, 245, 245, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--color-border);
}

.marketing-header__inner {
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.marketing-header__brand {
  display: flex;
  align-items: center;
}

.marketing-header__brand img {
  height: 26px;
  width: auto;
  display: block;
}

.marketing-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.marketing-header__nav a {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color 120ms ease;
}

.marketing-header__nav a:hover {
  color: var(--color-crimson);
}

.marketing-header__signin {
  padding: 8px 16px;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  transition: border-color 120ms ease, color 120ms ease;
}

.marketing-header__signin:hover {
  border-color: var(--color-crimson);
}

@media (max-width: 720px) {
  .marketing-header__inner {
    padding: 0 20px;
    gap: 16px;
  }

  .marketing-header__nav {
    gap: 14px;
  }

  .marketing-header__nav a:not(.marketing-header__signin) {
    display: none;
  }
}

/* Eyebrow tag — used above every section title */

.eyebrow {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-crimson);
  padding: 5px 12px;
  border: 0.5px solid var(--color-crimson);
  border-radius: 2px;
  margin: 0 0 32px;
}

/* Big landing buttons — distinct from in-app .btn */

.btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: 'Varela Round', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-lg.primary {
  background: var(--color-crimson);
  color: #fff;
}

.btn-lg.primary:hover {
  background: var(--color-crimson-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-lg.ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-emphasis);
}

.btn-lg.ghost:hover {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

/* Setup page — compact wrapper for the bootstrap onboarding card.
     No min-height, no centering: the auth-card sits near the top of the
     viewport so the form is the first thing the user sees. */

.setup {
  padding: 32px 0 48px;
}

.setup .auth-card {
  margin: 0 auto;
  padding: 32px 32px 28px;
}

.setup .auth-card h1 {
  font-size: 24px;
  margin-bottom: 4px;
}

.setup .auth-card .lead {
  font-size: 14px;
  margin: 4px 0 16px;
}

/* Hero — full viewport, centered logo + headline */

.hero {
  min-height: 100vh;
  padding: 128px 24px 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-page-bg);
  background-image:
      radial-gradient(circle at 50% 100%, rgba(142, 35, 35, 0.08), transparent 60%),
      linear-gradient(180deg, transparent 0%, rgba(22, 22, 22, 0.02) 100%);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.hero__logo {
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto 56px;
  display: block;
}

.hero__title {
  font-family: 'Varela Round', sans-serif;
  font-size: clamp(36px, 6.5vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--color-near-black);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.hero__title-accent {
  color: var(--color-crimson);
}

.hero__sub {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 24px auto 48px;
}

.hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  padding-bottom: 28px;
}

.hero__scroll-cue::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 20px;
  background: var(--color-border-emphasis);
}

/* Section primitives */

.section {
  min-height: 100vh;
  padding: 128px 24px;
  display: flex;
  align-items: center;
}

.section__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.section__inner--narrow {
  max-width: 760px;
  text-align: center;
}

.section__inner--narrow .eyebrow,
  .section__inner--narrow .section__title,
  .section__inner--narrow .section__lead {
  margin-left: auto;
  margin-right: auto;
}

.section__title {
  font-family: 'Varela Round', sans-serif;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.section__lead {
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 720px;
  margin: 0 0 56px;
}

.section__lead--close {
  margin: 48px 0 0;
}

.section__subhead {
  font-family: 'Varela Round', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: -24px 0 28px;
}

.section--dark .section__subhead {
  color: var(--color-text-light);
}

/* Dark sections */

.section--dark {
  background: var(--color-near-black);
  color: var(--color-text-light);
  border-top: 0.5px solid rgba(240, 237, 232, 0.06);
  border-bottom: 0.5px solid rgba(240, 237, 232, 0.06);
}

.section--dark .section__title {
  color: var(--color-text-light);
}

.section--dark .section__lead {
  color: rgba(240, 237, 232, 0.6);
}

.section--dark .eyebrow {
  color: #fff;
  background: var(--color-crimson);
  border-color: var(--color-crimson);
}

.section--dark .btn-lg.ghost {
  color: var(--color-text-light);
  border-color: rgba(240, 237, 232, 0.25);
}

.section--dark .btn-lg.ghost:hover {
  border-color: var(--color-crimson);
  color: #fff;
  background: var(--color-crimson);
}

.section--light {
  background: var(--color-page-bg);
}

/* Feature grid (in dark section) */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 0.5px solid rgba(240, 237, 232, 0.12);
  border-left: 0.5px solid rgba(240, 237, 232, 0.12);
}

.feature-card {
  padding: 48px 40px;
  border-right: 0.5px solid rgba(240, 237, 232, 0.12);
  border-bottom: 0.5px solid rgba(240, 237, 232, 0.12);
  background: var(--color-dark-surface);
  transition: background 150ms ease;
}

.feature-card:hover {
  background: var(--color-dark-featured);
}

.feature-card__num {
  font-family: 'Varela Round', sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--color-crimson);
  margin: 0 0 24px;
}

.feature-card__title {
  font-family: 'Varela Round', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-light);
  margin: 0 0 16px;
}

.feature-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(240, 237, 232, 0.65);
  margin: 0;
}

.feature-card__body em {
  color: var(--color-text-light);
  font-style: italic;
  font-weight: 700;
}

/* Feature grid — light variant (use in any section) */

.section--light .feature-grid,
  .feature-grid--light {
  border-top-color: var(--color-border);
  border-left-color: var(--color-border);
}

.section--light .feature-card,
  .feature-grid--light .feature-card {
  background: var(--color-surface);
  border-right-color: var(--color-border);
  border-bottom-color: var(--color-border);
}

.section--light .feature-card:hover,
  .feature-grid--light .feature-card:hover {
  background: #faecec;
}

.section--light .feature-card__title,
  .feature-grid--light .feature-card__title {
  color: var(--color-text);
}

.section--light .feature-card__body,
  .feature-grid--light .feature-card__body {
  color: var(--color-text-secondary);
}

.section--light .feature-card__body em,
  .feature-grid--light .feature-card__body em {
  color: var(--color-text);
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: 36px 28px;
  }
}

/* Pricing grid (in light section) */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
}

.pricing-card--featured {
  border-color: var(--color-crimson);
  border-width: 1px;
  box-shadow: 0 0 0 0.5px var(--color-crimson);
}

.pricing-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-crimson);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 2px;
  margin: 0;
  white-space: nowrap;
}

.pricing-card__name {
  font-family: 'Varela Round', sans-serif;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 12px;
}

.pricing-card__price {
  font-family: 'Varela Round', sans-serif;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-near-black);
  margin: 0 0 4px;
}

.pricing-card__price-suffix {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.pricing-card__hint {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  flex: 1;
}

.pricing-card__features li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  padding: 14px 0 14px 28px;
  border-bottom: 0.5px solid var(--color-border);
  position: relative;
}

.pricing-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 14px;
  height: 14px;
  background-color: var(--color-crimson);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

.pricing-card__features li:first-child {
  padding-top: 0;
}

.pricing-card__features li:first-child::before {
  top: 2px;
}

.pricing-card__features li:last-child {
  border-bottom: none;
}

.pricing-card .btn-lg {
  width: 100%;
}

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card--featured {
    order: -1;
  }
}

/* CTA section — waitlist form */

.section--cta {
  background: var(--color-page-bg);
  border-top: 0.5px solid var(--color-border);
}

.section--cta .waitlist-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  padding: 48px 40px;
  margin: 32px auto 0;
  text-align: left;
  max-width: 720px;
}

.section--cta .waitlist-card .btn-lg {
  width: 100%;
  margin-top: 8px;
}

/* Marketing footer */

.marketing-footer {
  background: var(--color-near-black);
  color: rgba(240, 237, 232, 0.5);
  padding: 56px 24px;
  border-top: 0.5px solid rgba(240, 237, 232, 0.06);
}

.marketing-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.marketing-footer__brand {
  font-family: 'Varela Round', sans-serif;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 8px;
}

.marketing-footer__brand strong {
  color: var(--color-crimson);
  font-weight: 400;
}

.marketing-footer__tag {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(240, 237, 232, 0.7);
  margin: 0;
}

.marketing-footer__legal {
  font-size: 11px;
  letter-spacing: 0.08em;
  margin: 4px 0 0;
}

/* Section padding adjustments for smaller screens */

@media (max-width: 720px) {
  .hero {
    padding: 96px 20px 80px;
  }

  .hero__logo {
    margin-bottom: 40px;
    max-width: 88vw;
  }

  .section {
    padding: 96px 20px;
    min-height: auto;
  }

  .section--cta .waitlist-card {
    padding: 32px 24px;
  }
}

.error {
  padding: 96px 0;
}

.auth {
  padding: 96px 0;
  display: flex;
  justify-content: center;
}

.auth-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 48px 40px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

/* Setup banners promoted into the project header. Same .banner
     style as the page-level banners but with tighter top margin so
     they sit close to the tabs nav rather than floating like a
     hero banner. */

.project-header-banner {
  margin-top: 8px;
  margin-bottom: 0;
}

/* Top-of-page banners (info/warn). Two visual signals each: color +
     left bar + textual title — never color alone. */

.banner {
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: 2px;
  border: 0.5px solid var(--color-border);
  border-left-width: 4px;
  background: var(--color-surface);
}

.banner__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.banner__row > div {
  min-width: 0;
}

.banner__title {
  margin: 0 0 2px;
  font-family: 'Varela Round', sans-serif;
  font-size: 14px;
}

.banner__body {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.banner code {
  font-family: 'Menlo', monospace;
  font-size: 12px;
  background: var(--color-bg-page, #f9fafb);
  padding: 1px 4px;
  border-radius: 2px;
}

.banner--info {
  border-left-color: var(--color-crimson);
  background: rgba(142, 35, 35, 0.04);
}

.banner--warn {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.06);
}

/* Onboarding checklist on the org home — shown to org owners until all
     four items are checked. Uses status-ready palette for done items so
     completion feels green-light without inventing new colors. */

.checklist {
  margin: 16px 0 24px;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
}

.checklist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.checklist__title {
  margin: 0;
  font-family: 'Varela Round', sans-serif;
  font-size: 14px;
}

.checklist__count {
  font-family: 'Varela Round', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 0.5px solid var(--color-border);
}

.checklist__item:first-child {
  border-top: 0;
}

.checklist__bullet {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--color-border-emphasis);
  margin-top: 2px;
  background: var(--color-surface);
}

.checklist__item.is-done .checklist__bullet {
  background: var(--status-ready-accent);
  border-color: var(--status-ready-accent);
  position: relative;
}

.checklist__item.is-done .checklist__bullet::after {
  content: '✓';
  position: absolute;
  top: -1px;
  left: 2px;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
}

.checklist__item.is-blocked {
  opacity: 0.5;
}

.checklist__item.is-done .checklist__label {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.checklist__label {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.checklist__hint {
  margin: 2px 0 6px;
  font-size: 12px;
}

.checklist__body .btn--xs {
  margin-top: 4px;
}

/* Git tab — repo summary, PR list, commit list */

.git-section {
  margin: 24px 0 32px;
}

.git-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--color-border);
}

.git-section__title {
  font-family: 'Varela Round', sans-serif;
  font-size: 14px;
  margin: 0;
}

.git-code {
  font-family: 'Menlo', monospace;
  font-size: 12px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Compact repo header at the top of the Git tab — repo name on the
     left, branch selector + meta on the right. Sits above the PR and
     commit tables and replaces the old multi-paragraph repo summary. */

.git-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 16px;
  margin: 8px 0 16px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
}

.git-header__title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.git-header__name {
  margin: 0;
  font-family: 'Varela Round', sans-serif;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.git-header__name a {
  color: var(--color-text);
  text-decoration: none;
}

.git-header__name a:hover {
  color: var(--color-crimson);
}

.git-header__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.git-header__branch-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.git-header__branch-form .field-label {
  margin: 0;
}

/* Override .field-input's full-width / tall-form defaults: this
     select sits inline next to other meta in the repo header, so it
     needs to size to its content with a sensible minimum. */

.git-header__branch {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 6px 10px;
  margin: 0;
  font-family: 'Menlo', monospace;
  font-size: 12px;
  min-width: 12em;
  max-width: 22em;
}

.git-header__branch-static {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.git-header__meta {
  font-size: 12px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  /* Stack title above controls so the long repo name and the branch
       selector each get their own row instead of fighting for width. */

  .git-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .git-header__controls {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  /* Tables on the Repo / Team / Search tabs are wide by nature. Rather
       than stack rows as cards (a separate, larger build), allow each
       table to scroll horizontally inside its container. Touch-friendly
       scrolling; scrollbar hidden since the table edge is visual cue
       enough. */

  .pulls-table,
    .commits-table,
    .team-table,
    .task-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pulls-table::-webkit-scrollbar,
    .commits-table::-webkit-scrollbar,
    .team-table::-webkit-scrollbar,
    .task-table::-webkit-scrollbar {
    display: none;
  }

  /* Make the inner thead/tbody behave like a table again so columns
       align across rows. width:max-content lets the table extend past
       the viewport, triggering the parent's horizontal scroll. */

  .pulls-table thead, .pulls-table tbody,
    .commits-table thead, .commits-table tbody,
    .team-table thead, .team-table tbody,
    .task-table thead, .task-table tbody {
    display: table;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
  }
}

/* Pull requests table — same visual register as commits-table, with
     dedicated columns for the head→base branch pair and an actions cell
     containing View + Merge controls. */

.pulls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pulls-table th {
  text-align: left;
  padding: 6px 12px;
  border-bottom: 0.5px solid var(--color-border);
  font-family: 'Varela Round', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 400;
}

.pulls-table td {
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--color-border);
  vertical-align: middle;
}

.pulls-table tr:last-child td {
  border-bottom: 0;
}

.pulls-table tr:hover td {
  background: rgba(142, 35, 35, 0.02);
}

.pulls-table__num {
  width: 64px;
}

.pulls-table__title a {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.pulls-table__title a:hover {
  color: var(--color-crimson);
}

.pulls-table__branches {
  width: 240px;
  font-size: 12px;
}

.pulls-table__author {
  width: 140px;
}

.pulls-table__updated {
  width: 110px;
  text-align: right;
  white-space: nowrap;
  font-family: 'Menlo', monospace;
  font-size: 12px;
}

.pulls-table__actions {
  width: 220px;
  text-align: right;
  white-space: nowrap;
}

.pulls-table__actions .btn {
  margin-left: 4px;
}

.pulls-table__actions .\!btn {
  margin-left: 4px !important;
}

.pulls-table__merge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 6px;
}

.pulls-table__merge select {
  padding: 3px 6px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
}

/* Commits table — same visual register as .task-table but with a fixed
     SHA column and right-aligned date so rows scan cleanly when there
     are 20+ entries. */

.commits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.commits-table th {
  text-align: left;
  padding: 6px 12px;
  border-bottom: 0.5px solid var(--color-border);
  font-family: 'Varela Round', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 400;
}

.commits-table td {
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--color-border);
  vertical-align: middle;
}

.commits-table tr:last-child td {
  border-bottom: 0;
}

.commits-table tr:hover td {
  background: rgba(142, 35, 35, 0.02);
}

.commits-table__sha {
  width: 80px;
}

.commits-table__sha a {
  text-decoration: none;
}

.commits-table__sha a:hover .git-code {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

.commits-table__msg {
  color: var(--color-text);
  font-weight: 500;
}

.commits-table__author {
  width: 160px;
}

.commits-table__date {
  width: 110px;
  text-align: right;
  white-space: nowrap;
  font-family: 'Menlo', monospace;
  font-size: 12px;
}

/* Settings-page integration sub-panel — matches the auth-card visual
     register but is meant to live alongside an existing form, not as the
     main page card. Tighter padding so multiple panels can stack. */

.integration-panel {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 16px 20px;
}

.integration-panel p {
  margin: 4px 0 12px;
}

.integration-panel form {
  margin: 0;
}

.integration-panel code {
  font-family: 'Menlo', monospace;
  font-size: 12px;
}

.integration-panel__hint {
  padding: 8px 12px;
  background: rgba(217, 119, 6, 0.06);
  border-left: 3px solid #d97706;
  border-radius: 2px;
  font-size: 12px;
}

.auth-card h1 {
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.field-label {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 24px 0 8px;
}

.field-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  background: var(--color-page-bg);
  border: 0.5px solid rgba(22, 22, 22, 0.18);
  border-radius: 2px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: var(--color-text);
  box-sizing: border-box;
  margin-bottom: 24px;
}

.field-input:focus {
  outline: none;
  border-color: rgba(142, 35, 35, 0.4);
}

.code-input {
  font-family: 'Varela Round', sans-serif;
  font-size: 22px;
  letter-spacing: 0.4em;
  text-align: center;
}

.error-msg {
  background: rgba(142, 35, 35, 0.08);
  color: var(--color-crimson);
  border: 0.5px solid rgba(142, 35, 35, 0.25);
  border-radius: 2px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 24px;
}

.secondary {
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.secondary a {
  color: var(--color-crimson);
}

/* App bar — header for non-landing pages (auth, org, project, etc.).
     Sits at top of body, scrolls with content. Mirrors marketing-header
     visual language but tighter and auth-aware on the right. */

.app-bar {
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
}

.app-bar__inner {
  max-width: 1600px;
  margin: 0 auto;
  height: 56px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.app-bar__brand {
  display: flex;
  align-items: center;
}

.app-bar__brand img {
  height: 22px;
  width: auto;
  display: block;
}

.app-bar__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-bar__user {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.app-bar__user:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.app-bar__form {
  margin: 0;
}

.app-bar__signout, .app-bar__signin {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 0.5px solid var(--color-border-emphasis);
  padding: 7px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.app-bar__signout:hover, .app-bar__signin:hover {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

/* Notification bell + inbox dropdown — anchors to the right side of the
     app bar. Uses --alert-* tokens for the unread badge so it matches the
     needs-input visual language used on cards and the task detail panel. */

.app-bar__inbox {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.app-bar__bell {
  position: relative;
  background: transparent;
  border: 0.5px solid transparent;
  color: var(--color-text);
  padding: 6px;
  border-radius: 2px;
  cursor: pointer;
  line-height: 0;
  transition: border-color 120ms ease, color 120ms ease;
}

.app-bar__bell:hover {
  border-color: var(--color-border-emphasis);
  color: var(--color-crimson);
}

.app-bar__bell-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--alert-accent);
  color: #fff;
  border-radius: 8px;
  font-family: 'Varela Round', sans-serif;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.app-bar__inbox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 320px;
  max-height: 400px;
  overflow: auto;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  z-index: 50;
}

.app-bar__inbox-header {
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--color-border);
  font-family: 'Varela Round', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.app-bar__inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-bar__inbox-empty {
  padding: 16px 14px;
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}

.app-bar__inbox-item a {
  display: block;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.app-bar__inbox-item a:hover {
  background: rgba(142, 35, 35, 0.04);
}

.app-bar__inbox-item-title {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}

.app-bar__inbox-item-meta {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .app-bar__inner {
    padding: 0 20px;
    gap: 12px;
  }

  .app-bar__user {
    display: none;
  }

  .app-bar__brand img {
    height: 20px;
  }

  .app-bar__inbox-dropdown {
    width: 280px;
    right: -40px;
  }
}

@media (max-width: 480px) {
  /* Phone-width app bar — tighter padding, smaller gap, smaller sign-out
       button. Bell-badge text count is hidden in favor of a dot
       (rendered separately as a pseudo-element). */

  .app-bar__inner {
    padding: 0 12px;
    gap: 8px;
  }

  .app-bar__signout, .app-bar__signin {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .app-bar__inbox-dropdown {
    width: calc(100vw - 24px);
    right: -12px;
  }
}

/* Breadcrumbs band — slim row directly under the app-bar.
     Hairline bottom border, container-width inner. */

.breadcrumbs {
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
}

.breadcrumbs .container {
  padding-top: 8px;
  padding-bottom: 8px;
}

.breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary);
}

.breadcrumbs__sep {
  margin: 0 8px;
  color: var(--color-text-muted);
}

.breadcrumbs__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumbs__link:hover {
  color: var(--color-crimson);
}

.breadcrumbs__current {
  color: var(--color-text);
  font-weight: 700;
}

@media (max-width: 640px) {
  /* Slimmer breadcrumbs on phones so chat / kanban don't lose vertical
       room to chrome. Long item labels (project names) truncate with
       ellipsis instead of wrapping the row. */

  .breadcrumbs .container {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .breadcrumbs__list {
    font-size: 10px;
    letter-spacing: 0.06em;
    gap: 0;
  }

  .breadcrumbs__sep {
    margin: 0 6px;
  }

  .breadcrumbs__link, .breadcrumbs__current {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
}

/* Entity header — compact horizontal card used by org and project pages.
     Replaces the older big-h1 .org-header. Designed to preserve vertical
     real estate for the kanban / content below. */

.entity-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
}

.entity-header__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.entity-header__label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-crimson);
  margin: 0;
}

.entity-header__name {
  font-family: 'Varela Round', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-header__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.entity-header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--color-text);
}

.entity-header__meta-label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.entity-header__meta-link {
  color: var(--color-crimson);
  text-decoration: none;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-header__meta-link:hover {
  color: var(--color-crimson-hover);
}

.entity-header__meta-value.muted {
  color: var(--color-text-muted);
}

.entity-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 3-dot overflow menu — desktop hides the trigger (the inline action
     buttons handle everything); mobile hides the inline buttons and
     reveals the trigger instead. Dropdown floats above following
     content via position:absolute. */

.entity-header__menu {
  position: relative;
  display: none;
  margin-left: auto;
}

/* Shape matches .dashboard-filters__trigger and .team-section__add-btn
     so every "small icon trigger" in the app reads as the same control. */

.entity-header__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  color: var(--color-text);
  cursor: pointer;
  line-height: 0;
  transition: border-color 120ms ease, color 120ms ease;
}

.entity-header__menu-trigger:hover,
  .entity-header__menu-trigger[aria-expanded="true"] {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

.entity-header__menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  z-index: 30;
  padding: 4px 0;
}

.entity-header__menu-list[hidden] {
  display: none;
}

.entity-header__menu-item {
  display: block;
  padding: 8px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
}

.entity-header__menu-item:hover {
  background: var(--color-bg);
  color: var(--color-crimson);
}

@media (max-width: 720px) {
  .entity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .entity-header__actions {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  /* Phone-width header collapses to a single row:
       [name + status inline]  ...  [⋯]
       The label, meta chips other than status, the inline action
       buttons, and the Edit button all hide behind the 3-dot menu.
       Status badge stays inline since it's the only chip that conveys
       real-time state. */

  .entity-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px;
  }

  .entity-header__label {
    display: none;
  }

  .entity-header__name {
    font-size: 16px;
  }

  .entity-header__main {
    flex: 1;
    min-width: 0;
  }

  .entity-header__meta {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    flex: 0 0 auto;
  }

  .entity-header__meta-item .entity-header__meta-label {
    display: none;
  }

  .entity-header__meta-item:not(:has(.status-badge)) {
    display: none;
  }

  .entity-header__actions {
    display: none;
  }

  .entity-header__menu {
    display: inline-flex;
    align-self: center;
  }
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: var(--color-text-muted);
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--color-border);
}

.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.\!btn.ghost-neutral {
  background: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid rgba(22, 22, 22, 0.2) !important;
  text-align: center !important;
}

.btn.ghost-neutral {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(22, 22, 22, 0.2);
  text-align: center;
}

.\!btn.ghost-neutral:hover {
  border-color: var(--color-crimson) !important;
  color: var(--color-crimson) !important;
}

.btn.ghost-neutral:hover {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

.oauth-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Waitlist landing card */

.waitlist-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 48px 40px;
  max-width: 720px;
  margin: 0 auto;
}

.waitlist-card h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.field {
  margin-bottom: 0;
}

.field-textarea {
  height: auto;
  padding: 12px 16px;
  line-height: 1.6;
  resize: vertical;
}

/* Admin */

.admin {
  padding: 48px 0 96px;
}

.admin-header {
  margin-bottom: 32px;
}

.admin-tabs {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  border-bottom: 0.5px solid var(--color-border);
  padding-bottom: 0;
}

.admin-tabs a {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
}

.admin-tabs a.active {
  color: var(--color-crimson);
  border-bottom-color: var(--color-crimson);
}

.admin-row {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 24px 28px;
  margin-bottom: 16px;
}

.admin-row-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.admin-row h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

/* Project Team tab — table of humans + agents with PM controls.
     Each section (People / Agents) is wrapped in .team-section with a
     header row that aligns the title and a + icon trigger. The trigger
     toggles a hidden add-card via [data-toggle-target] in header-menu.js. */

.team-section {
  margin-bottom: 24px;
}

.team-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.team-section__header .subhead {
  margin: 0;
}

.team-section__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.team-section__add-btn:hover,
  .team-section__add-btn[aria-expanded="true"] {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

.team-section__empty {
  margin: 8px 0 0;
}

.team-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  margin-bottom: 24px;
}

.team-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--color-border);
  font-family: 'Varela Round', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: normal;
}

.team-table td {
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--color-border);
  vertical-align: middle;
  font-size: 14px;
}

.team-name {
  font-weight: 500;
}

.team-self-tag {
  margin-left: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.team-role-label {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.team-table select {
  padding: 4px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
  font-size: 13px;
}

.team-add-card {
  padding: 16px 20px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.team-add-card .subhead {
  margin-top: 0;
}

.team-add-card select {
  padding: 6px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
  font-size: 13px;
}

/* Install-instructions code blocks on the post-create agent page.
     Plain monospace block with a hairline border + soft tint. Wrapping
     is preserved so a long .env line doesn't force horizontal scroll. */

.install-code {
  margin: 8px 0;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  font-family: 'IBM Plex Mono', 'Menlo', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

.install-code code {
  background: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
}

/* Small monospace pill next to an agent's display name showing its
     numeric id (e.g. "#3"). Lets a PM hand the id off to the runtime or
     a sibling agent ("assignee=agent:3") without grepping the DB. */

.agent-id-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  font-family: 'IBM Plex Mono', 'Menlo', monospace;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: normal;
  vertical-align: middle;
}

.row-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 4px 0;
}

.row-meta .dot {
  margin: 0 8px;
  color: var(--color-text-muted);
}

.row-meta .muted {
  color: var(--color-text-muted);
  margin-left: 6px;
}

.row-description {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 12px 0;
  line-height: 1.7;
}

.row-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.status-badge {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 4px 10px;
  white-space: nowrap;
}

.status-pending {
  background: rgba(180, 130, 0, 0.1);
  color: #8a6300;
  border: 0.5px solid rgba(180, 130, 0, 0.3);
}

.status-approved {
  background: rgba(46, 125, 50, 0.1);
  color: #1f5e22;
  border: 0.5px solid rgba(46, 125, 50, 0.3);
}

/* Task-status badge variants (separate from the generic
     pending/approved/rejected used for project/agent/invoice statuses).
     Use the --status-X-text tone for color + border so small uppercase
     badge text reads clearly against the pale tint. */

.status-badge.status-backlog {
  background: var(--status-backlog-tint);
  color: var(--status-backlog-text);
  border: 0.5px solid var(--status-backlog-text);
}

.status-badge.status-queued {
  background: var(--status-queued-tint);
  color: var(--status-queued-text);
  border: 0.5px solid var(--status-queued-text);
}

.status-badge.status-in-progress {
  background: var(--status-in-progress-tint);
  color: var(--status-in-progress-text);
  border: 0.5px solid var(--status-in-progress-text);
}

.status-badge.status-ready {
  background: var(--status-ready-tint);
  color: var(--status-ready-text);
  border: 0.5px solid var(--status-ready-text);
}

.status-badge.status-completed {
  background: var(--status-completed-tint);
  color: var(--status-completed-text);
  border: 0.5px solid var(--status-completed-text);
}

.status-badge.status-cancelled {
  background: var(--status-cancelled-tint);
  color: var(--status-cancelled-text);
  border: 0.5px solid var(--status-cancelled-text);
}

.empty-state {
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 48px 0;
  text-align: center;
}

/* Org & member pages */

.org {
  padding: 16px 0 48px;
}

/* Legacy .org-header (still rendered on a few non-org pages, e.g. error
     fallbacks). Kept compact so it doesn't reintroduce vertical bloat. */

/* Tabs sit directly below the entity-header card. */

.org-tabs {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  border-bottom: 0.5px solid var(--color-border);
}

.org-tabs a {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
}

.org-tabs a.active {
  color: var(--color-crimson);
  border-bottom-color: var(--color-crimson);
}

@media (max-width: 640px) {
  /* Phone-width tabs: tighter gap + smaller font so common layouts fit
       at 375px. Horizontal scroll as a graceful fallback when labels are
       long; scrollbar hidden because the border-underline already cues
       which row this is. */

  .org-tabs {
    gap: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .org-tabs::-webkit-scrollbar {
    display: none;
  }

  .org-tabs a {
    flex: 0 0 auto;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    padding-bottom: 10px;
  }
}

.subhead {
  font-size: 22px;
  margin: 32px 0 24px;
}

/* Org selector — cards float on the page bg with breathing room
     between them. Title hugs the app header (small top padding). */

.org-selector-page {
  padding: 24px 0 48px;
}

.section-header {
  margin-bottom: 20px;
}

.section-header h1 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 4px 0;
}

.lead-secondary {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 4px 0 0;
}

.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.org-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 24px;
  color: var(--color-text);
  display: block;
  transition: border-color 120ms ease, color 120ms ease;
}

.org-card:hover {
  border-color: var(--color-crimson);
  color: var(--color-text);
}

.org-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.org-card-cta {
  margin-top: 16px;
  font-family: 'Varela Round', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-crimson);
}

/* Project grid (org home) */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.project-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 24px 28px;
  color: var(--color-text);
  display: block;
  transition: border-color 120ms ease, background 120ms ease;
}

.project-card:hover {
  border-color: var(--color-border-emphasis);
  color: var(--color-text);
}

.project-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

/* Empty state card */

.empty-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 48px 40px;
  max-width: 560px;
}

.empty-card h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

/* ── Project documents ───────────────────────────────────────────────── */

.docs-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.docs-list__item {
  border-bottom: 0.5px solid var(--color-border);
}

.docs-list__item:first-child {
  border-top: 0.5px solid var(--color-border);
}

.docs-list__link {
  display: block;
  padding: 14px 8px;
  color: var(--color-text);
  text-decoration: none;
  transition: background 120ms ease;
}

.docs-list__link:hover {
  background: rgba(142, 35, 35, 0.04);
}

.docs-list__title {
  font-family: 'Varela Round', sans-serif;
  font-size: 16px;
  margin: 0 0 4px;
}

.docs-list__meta {
  font-size: 11px;
  margin: 0;
  color: var(--color-text-secondary);
}

.docs-list__source {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Individual doc page */

.doc-header {
  margin: 24px 0 16px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--color-border);
}

.doc-header__title {
  font-family: 'Varela Round', sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  margin: 0 0 8px;
  line-height: 1.2;
}

.doc-header__meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Project dashboard ───────────────────────────────────────────────── */

.dashboard {
  margin-top: 16px;
}

.dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 8px 0 16px;
}

.dashboard-toolbar__title {
  margin: 0;
  margin-right: auto;
}

/* Filters popover — funnel icon button + floating panel that drops
     below it. Filters are hidden by default so the charts get the first
     screen; user taps the funnel to expose the mode toggle, lookback
     quickpicks, and date range inputs. */

.dashboard-filters {
  position: relative;
  display: inline-flex;
}

.dashboard-filters__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.dashboard-filters__trigger:hover,
  .dashboard-filters__trigger[aria-expanded="true"] {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

.dashboard-filters__popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  z-index: 30;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-filters__popover[hidden] {
  display: none;
}

.dashboard-filters__popover .dashboard-modes,
  .dashboard-filters__popover .dashboard-quickpicks {
  width: 100%;
}

.dashboard-filters__popover .dashboard-mode,
  .dashboard-filters__popover .dashboard-quickpick {
  flex: 1;
}

.dashboard-filters__popover .dashboard-daterange {
  flex-wrap: wrap;
  gap: 6px 8px;
}

.dashboard-filters__popover .dashboard-daterange .field-label {
  flex: 0 0 100%;
}

.dashboard-filters__popover .dashboard-daterange .field-input {
  flex: 1;
  min-width: 0;
}

.dashboard-filters__popover .dashboard-daterange .btn.primary {
  margin-left: auto;
}

.dashboard-filters__popover .dashboard-daterange .\!btn.primary {
  margin-left: auto !important;
}

@media (max-width: 480px) {
  /* On narrow phones the popover spans the full viewport (less a
       small gutter) so date inputs aren't cramped. */

  .dashboard-filters__popover {
    right: 0;
    left: auto;
    width: calc(100vw - 24px);
    max-width: 320px;
  }
}

/* Snapshot vs Window mode toggle. Same visual idiom as quickpicks but
     with a darker active state since this controls semantics, not range. */

.dashboard-modes {
  display: inline-flex;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  overflow: hidden;
}

.dashboard-mode {
  padding: 6px 12px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  border: 0;
  border-right: 0.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.dashboard-mode:last-child {
  border-right: 0;
}

.dashboard-mode.is-active {
  background: var(--color-near-black);
  color: #fff;
}

.dashboard-quickpicks {
  display: inline-flex;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  overflow: hidden;
}

.dashboard-quickpick {
  padding: 6px 12px;
  font-size: 11px;
  border: 0;
  border-right: 0.5px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
}

.dashboard-quickpick:last-child {
  border-right: 0;
}

.dashboard-quickpick.is-active {
  background: var(--color-crimson);
  color: #fff;
  border-color: var(--color-crimson);
}

.dashboard-daterange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
}

.dashboard-daterange .field-label {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-daterange .field-input {
  padding: 6px 10px;
  font-size: 12px;
  width: auto;
  height: auto;
  margin-bottom: 0;
}

.dashboard-daterange .btn.primary {
  padding: 6px 14px;
  font-size: 11px;
}

.dashboard-daterange .\!btn.primary {
  padding: 6px 14px !important;
  font-size: 11px !important;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 880px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Phone-width dashboard toolbar: keep the title + funnel inline
       (the funnel is only 32px so it fits next to the title easily).
       Filter layout inside the popover is handled by the popover's
       own scoped rules above. */

  .dashboard-toolbar {
    gap: 8px;
  }
}

.dashboard-panel {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.dashboard-panel__header {
  margin-bottom: 12px;
}

.dashboard-panel__title {
  font-family: 'Varela Round', sans-serif;
  font-size: 15px;
  margin: 0 0 2px;
  color: var(--color-text);
}

.dashboard-panel__hint {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
}

.dashboard-panel__body {
  position: relative;
  flex: 1;
  min-height: 0;
  /* Chart.js canvas needs an explicit-ish height to render at the right
       size when the parent uses flex:1. */
  height: 240px;
}

.dashboard-panel__body canvas {
  max-height: 100%;
}

.dashboard-empty {
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 32px 0;
  text-align: center;
}

/* Status breakdown list */

.dashboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.dashboard-list__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--color-border);
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
}

.dashboard-list__row:last-child {
  border-bottom: 0;
}

.dashboard-list__loading {
  padding: 16px 0;
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

.dashboard-list__swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.dashboard-list__label {
  color: var(--color-text);
  flex: 1;
}

.dashboard-list__meta {
  color: var(--color-text-secondary);
  font-size: 12px;
}

/* Top contributors table */

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
}

.dashboard-table th,
  .dashboard-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 0.5px solid var(--color-border);
}

.dashboard-table th {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.dashboard-table th.num,
  .dashboard-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dashboard-table tbody tr:last-child td {
  border-bottom: 0;
}

.dashboard-table__loading td {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
  padding: 16px 0;
}

/* Project meta row (status / GitHub / actions) */

.project-meta-row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 20px 24px;
  margin: 24px 0 32px;
  flex-wrap: wrap;
}

.project-meta-row .section-label {
  margin: 0 0 6px;
}

.project-meta-row p {
  margin: 0;
  font-size: 14px;
}

.project-tabs {
  margin-top: 16px;
}

/* Kanban board — vertical columns side-by-side, cards stack within each.
     Four active-board columns: Backlog → Queued → In Progress → Ready. */

.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  overflow-x: auto;
}

/* Selection bar — appears above the kanban when ≥1 card is selected.
     Hidden by default via the [hidden] attribute. */

.kanban-selection-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(142, 35, 35, 0.06);
  border: 0.5px solid var(--color-crimson);
  border-radius: 2px;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
}

.kanban-selection-bar[hidden] {
  display: none;
}

.kanban-selection-bar__n {
  font-size: 13px;
}

.kanban-selection-bar__clear {
  padding: 4px 10px;
  font-size: 11px;
}

/* ── Project chat (#general for v1) ──────────────────────────────────
     Same full-viewport-anchored shape as the kanban so the message stream
     fills the available space and scrolls internally. */

.org--chat {
  height: calc(100dvh - 89px);
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
}

.org--chat > .container:first-of-type {
  flex: 0 0 auto;
}

.org--chat__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}

/* Sidebar layout: channel list on the left, chat surface on the right.
     Sidebar is fixed-width; chat-main takes the rest. Both inherit the
     full-height behavior of .org--chat__body so the stream scrolls
     independently of the page. */

.chat-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
}

.chat-sidebar {
  flex: 0 0 220px;
  overflow-y: auto;
  padding: 12px 8px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
}

.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-sidebar__section {
  margin-bottom: 18px;
}

.chat-sidebar__section-title {
  margin: 0 0 6px;
  padding: 0 8px;
  font-family: 'Varela Round', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: normal;
}

.chat-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chat-sidebar__item {
  margin: 0;
}

.chat-sidebar__item a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 2px;
  font-size: 13px;
}

.chat-sidebar__item a:hover {
  background: var(--color-bg);
}

.chat-sidebar__item--active a {
  background: var(--color-bg);
  font-weight: 600;
}

.chat-sidebar__tag {
  font-family: 'Varela Round', sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 1px 5px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  margin-left: auto;
}

.chat-sidebar__empty {
  padding: 4px 10px;
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Teammates without an in-flight DM render in a slightly muted color
     to hint "no conversation yet" without being noisy. Clicking still
     opens (creating the DM transparently). */

.chat-sidebar__item-new {
  color: var(--color-text-secondary);
}

.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
}

.chat__header {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--color-border);
}

.chat__channel-name {
  font-family: 'Varela Round', sans-serif;
  font-size: 18px;
  margin: 0;
}

.chat__channel-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 2px 0 0;
}

.chat__stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat__loading {
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 24px 0;
}

/* A single chat message — author + time on the head row, body below,
     optional attachment grid under the body. */

.chat__msg {
  border-left: 3px solid transparent;
  padding: 4px 8px 4px 10px;
  border-radius: 2px;
  transition: background 240ms ease;
}

.chat__msg:hover .chat__msg-delete {
  opacity: 1;
}

/* Two visual signals for agents: distinct left-border color + a tag
     prefix in the head, per the style-guide rule. */

.chat__msg--agent {
  border-left-color: var(--color-crimson);
  background: rgba(142, 35, 35, 0.025);
}

.chat__msg--flash {
  animation: rushworks-card-pulse 900ms ease-out;
}

.chat__msg--deleted .chat__msg-body {
  color: var(--color-text-muted);
}

.chat__msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
}

.chat__msg-author {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text);
}

.chat__msg-agent-tag {
  display: inline-block;
  background: var(--color-crimson);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  vertical-align: 1px;
}

/* System messages — task lifecycle notifications posted by the server
     itself (task → Ready, needs_input, input_resolved). Muted, italic,
     no avatar. Visually de-emphasized so they read as ambient signal
     rather than primary content. */

.chat__msg--system {
  border-left-color: var(--color-border);
  background: var(--color-surface);
  opacity: 0.85;
}

.chat__msg--system .chat__msg-body {
  font-style: italic;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.chat__msg-system-tag {
  display: inline-block;
  background: var(--color-text-muted);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  vertical-align: 1px;
}

.chat__msg-time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.chat__msg-delete {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

.chat__msg-delete:hover {
  color: var(--color-crimson);
}

.chat__msg-body {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: var(--color-text);
  margin-top: 2px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat__msg-body a {
  color: var(--color-crimson);
  text-decoration: underline;
}

.chat__msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.chat__msg-attachment {
  display: inline-block;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  max-width: 320px;
  max-height: 240px;
  line-height: 0;
}

.chat__msg-attachment img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Attachments tray — preview thumbnails before send. */

.chat__attachments-tray {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 16px 0;
  border-top: 0.5px solid var(--color-border);
}

.chat__attachments-tray[hidden] {
  display: none;
}

.chat__tray-item {
  position: relative;
  width: 64px;
  height: 64px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.chat__tray-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.chat__tray-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.7);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* Composer — multi-line textarea with paperclip + send button. */

.chat__composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 0.5px solid var(--color-border);
  transition: background 120ms ease;
  position: relative;
  /* anchor for the autocomplete dropdown */
}

/* @-mention autocomplete dropdown — floats above the textarea while
     the user is typing an @-prefixed token. Closes on Escape, blur, or
     when the token is no longer being typed. */

.mention-autocomplete {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 16px;
  right: 16px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.mention-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text);
}

.mention-autocomplete__item--active,
  .mention-autocomplete__item:hover {
  background: var(--color-surface);
}

.mention-autocomplete__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-autocomplete__tag {
  font-family: 'Varela Round', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 1px 6px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
}

.chat__composer--dragover {
  background: rgba(142, 35, 35, 0.04);
  outline: 2px dashed var(--color-crimson);
  outline-offset: -8px;
}

.chat__textarea {
  flex: 1;
  resize: vertical;
  min-height: 38px;
  max-height: 200px;
  padding: 8px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  background: var(--color-surface);
  color: var(--color-text);
}

.chat__textarea:focus {
  outline: none;
  border-color: var(--color-crimson);
}

.chat__composer-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.chat__attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.chat__attach:hover {
  color: var(--color-crimson);
  border-color: var(--color-crimson);
}

/* Send button is now an icon-only square that matches the attach
     button's footprint — both stack vertically inside chat__composer-actions
     so the textarea claims the freed horizontal space. */

.chat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* ── Mobile chat: slide-over sidebar drawer ──────────────────────────
     At <=768px the sidebar leaves the inline flow and becomes a fixed
     panel that slides in from the left when the Channels toggle in the
     chat header is tapped. A tinted scrim covers the message area while
     the drawer is open; tapping it (or pressing Escape, or selecting a
     channel) dismisses the drawer. Above 768px everything reverts to
     the existing two-column flex layout.

     Toggle button + scrim are hidden by default; only the mobile rules
     below make them visible. */

.chat__channels-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  padding: 6px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}

.chat__channels-toggle:hover {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

.chat__header-title {
  min-width: 0;
  flex: 1;
}

.chat-sidebar__scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 49;
}

@media (max-width: 768px) {
  /* Header becomes a row so the Channels button sits to the left of
       the title. On desktop the header is block layout (h2 + p stacked),
       so flex only applies inside this breakpoint. */

  .chat__header {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .chat__channels-toggle {
    display: inline-flex;
  }

  /* Sidebar leaves the flex flow and slides in from the left as a
       fixed panel. Width caps at 84vw on phones so a sliver of the
       message area is always visible behind the scrim. */

  .chat-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform 200ms ease;
    z-index: 50;
    border-radius: 0;
    border-right: 0.5px solid var(--color-border);
  }

  .chat-layout--sidebar-open .chat-sidebar {
    transform: translateX(0);
  }

  .chat-sidebar__scrim {
    display: block;
  }

  .chat-layout--sidebar-open .chat-sidebar__scrim {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 640px) {
  /* Phone-width density tweaks: trim header / stream / composer
       padding so message content reaches more pixels, and shrink the
       channel name + composer button a notch. The Send button keeps
       its label (icon-only would lose the affordance for first-time
       phone users). */

  .chat__header {
    padding: 8px 12px;
    gap: 8px;
  }

  .chat__channel-name {
    font-size: 16px;
  }

  .chat__channel-desc {
    font-size: 12px;
  }

  .chat__stream {
    padding: 12px;
  }

  .chat__msg {
    gap: 6px;
  }

  .chat__msg-head {
    font-size: 12px;
  }

  .chat__composer {
    padding: 10px 12px;
    gap: 6px;
  }

  .chat__textarea {
    font-size: 14px;
    min-height: 36px;
    padding: 7px 10px;
  }

  .chat__attach {
    width: 32px;
    height: 32px;
  }

  .chat__send {
    width: 32px;
    height: 32px;
  }

  .mention-autocomplete {
    left: 12px;
    right: 12px;
  }

  /* The chat container fills the body width; sidebar gap collapses
       because the sidebar is off-canvas. */

  .chat-layout {
    gap: 0;
  }

  .org--chat__body {
    padding-bottom: 8px;
  }

  /* Re-tighten the chrome offset for the chat height calc since
       breadcrumbs are slimmer at this width too (see breadcrumbs rules
       elsewhere). 12px less than desktop = 77px. */

  .org--chat {
    height: calc(100dvh - 77px);
  }
}

/* Full-height board variant: page anchors to viewport, kanban grows to
     fill remaining space, columns scroll internally when full. Chrome above
     the board: app-bar (56px) + breadcrumbs band (~33px) = ~89px. */

.org--board {
  height: calc(100dvh - 89px);
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
}

.org--board > .container:first-of-type {
  flex: 0 0 auto;
}

.org--board__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}

.org--board__body .task-subtabs {
  flex: 0 0 auto;
}

.org--board .kanban {
  flex: 1;
  min-height: 0;
}

.org--board .kanban-col {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.org--board .kanban-col-header {
  flex: 0 0 auto;
}

.org--board .kanban-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* Six-column variant for the Phase 3c placeholder; keeps responsive parity */

.kanban-col {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 16px;
  min-height: 240px;
  transition: background 120ms ease;
}

.kanban-col.kanban-col-hover {
  background: rgba(142, 35, 35, 0.04);
}

/* Drag-time UX: columns that aren't a valid destination for the
     currently-dragged card get dimmed and lose their hover affordance.
     Server-side canTransition is still the source of truth — this is
     just a visual hint to keep the user out of bad drops. */

.kanban-col.kanban-col--invalid-drop {
  opacity: 0.35;
}

/* Bottom row of a Backlog card — assignee dropdown shares a line with
     the activate arrow. Dropdown grows; button stays shrink-fit on right. */

.kanban-card__bottom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* Pill-shaped select that reads like a button — fills the bottom row
     except for the activate button on the right. Compact uppercase label
     so it visually grounds. The native chevron is hidden in favour of a
     custom one via background-image. */

.kanban-card__assign-select {
  flex: 1;
  min-width: 0;
  height: 24px;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 22px 0 8px;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238E2323' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  color: var(--color-text);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.kanban-card__assign-select:hover {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

.kanban-card__assign-select:focus {
  outline: none;
  border-color: var(--color-crimson);
  box-shadow: 0 0 0 1px rgba(142, 35, 35, 0.15);
}

/* The dropdown menu itself can't be fully restyled cross-browser, but
     this keeps the native picker readable when it pops open. */

.kanban-card__assign-select option {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* Activate button on Backlog cards — sits at the right end of the
     bottom row, sharing the line with the assignee dropdown. Pink (Queued
     status color) signals "this is about to become a Queued task." */

.kanban-card__activate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: var(--status-queued-text);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background 120ms ease, transform 120ms ease;
}

.kanban-card__activate:hover {
  background: #9d1349;
  transform: translateX(1px) scale(1.05);
}

.kanban-card__activate[hidden] {
  display: none;
}

.kanban-card__activate:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* Reject button on Ready cards — sits left of Complete, pink because
     rejection sends the task back to Queued (Queued status color matches
     the destination, same convention as Activate on Backlog). */

.kanban-card__reject {
  position: absolute;
  bottom: 8px;
  right: 36px;
  /* 8px gutter + 20px Complete + 8px gap = 36px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: var(--status-queued-text);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background 120ms ease, transform 120ms ease;
}

.kanban-card__reject:hover {
  background: #9d1349;
  transform: scale(1.08);
}

.kanban-card__reject:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* Complete button on Ready cards — anchored bottom-right of the card.
     Blue (Completed status color) signals "this is about to become a
     Completed task." Same slot/shape as the Activate button on Backlog. */

.kanban-card__complete {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: var(--status-completed-text);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background 120ms ease, transform 120ms ease;
}

.kanban-card__complete:hover {
  background: #1e40af;
  transform: scale(1.08);
}

.kanban-card__complete:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* Dim unassigned Backlog cards so it's obvious they need an assignee
     before they can move forward. */

.kanban-card[data-status="Backlog"][data-assigned="false"] .kanban-card__title-link {
  color: var(--color-text-secondary);
}

/* Live activity line on Queued / In Progress cards. Written by the
     agent runtime via POST /api/agent/tasks/:id/activity each iter. */

.kanban-card__activity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.kanban-card__activity-icon {
  color: var(--status-in-progress-accent);
  font-style: normal;
  font-weight: 700;
  animation: kanban-activity-pulse 1.6s ease-in-out infinite;
}

.kanban-card__activity-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

@keyframes kanban-activity-pulse {
  0%, 100% {
    opacity: 0.35;
  }

  50%      {
    opacity: 1;
  }
}

/* When the activity is older than ~5 min the JS adds this class to
     signal a likely-stuck agent: gray everything out, kill the pulse. */

.kanban-card__activity--stale {
  opacity: 0.5;
}

.kanban-card__activity--stale .kanban-card__activity-icon {
  animation: none;
  color: var(--color-text-muted);
}

/* Activity line is meaningless on Backlog (not started), Ready
     (handed off), Completed/Cancelled (terminal). Hide outside its
     useful range. */

.kanban-card:not([data-status="Queued"]):not([data-status="In Progress"]) .kanban-card__activity {
  display: none;
}

/* Action buttons are status-scoped: Reject/Complete only on Ready,
     Activate (and the dropdown row) only on Backlog. When the WS
     broadcast or a drag moves a card to a different column, its
     data-status is updated and these rules hide buttons that no longer
     belong — even though they may still be present in the DOM from the
     original render. */

.kanban-card:not([data-status="Ready"]) .kanban-card__reject,
  .kanban-card:not([data-status="Ready"]) .kanban-card__complete {
  display: none;
}

.kanban-card:not([data-status="Backlog"]) .kanban-card__bottom-row {
  display: none;
}

.kanban-col.kanban-col--invalid-drop.kanban-col-hover {
  background: var(--color-surface);
  cursor: not-allowed;
}

/* Rejection flash — when the user releases on an invalid target the
     column briefly pulses to confirm the drop was refused. */

@keyframes kanban-col-reject-shake {
  0%, 100% {
    transform: translateX(0);
  }

  20%      {
    transform: translateX(-3px);
  }

  40%      {
    transform: translateX(3px);
  }

  60%      {
    transform: translateX(-2px);
  }

  80%      {
    transform: translateX(2px);
  }
}

.kanban-col.kanban-col--reject {
  animation: kanban-col-reject-shake 0.4s ease;
  border-color: var(--color-crimson);
}

/* Within-column drag: dragged cards fade so the user can see the marker
     showing the destination position. */

.kanban-card.kanban-card--dragging {
  opacity: 0.4;
}

/* Insertion marker — a thin crimson line with circular end-caps shown
     between cards when a within-column drag is in flight. */

.kanban-drop-marker {
  position: relative;
  height: 2px;
  margin: 2px 0;
  background: var(--color-crimson);
  border-radius: 1px;
  pointer-events: none;
}

.kanban-drop-marker::before,
  .kanban-drop-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--color-crimson);
  border-radius: 50%;
  transform: translateY(-50%);
}

.kanban-drop-marker::before {
  left: -3px;
}

.kanban-drop-marker::after  {
  right: -3px;
}

.kanban-col-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border-emphasis);
}

/* Column-header status accents — the bottom border (decoration) uses the
     bright accent tone; the section-label text uses the darker text tone
     so small uppercase reads cleanly. Card left-borders use the accent. */

.kanban-col[data-status="Backlog"]     .kanban-col-header {
  border-bottom-color: var(--status-backlog-accent);
}

.kanban-col[data-status="Queued"]      .kanban-col-header {
  border-bottom-color: var(--status-queued-accent);
}

.kanban-col[data-status="In Progress"] .kanban-col-header {
  border-bottom-color: var(--status-in-progress-accent);
}

.kanban-col[data-status="Ready"]       .kanban-col-header {
  border-bottom-color: var(--status-ready-accent);
}

.kanban-col[data-status="Completed"]   .kanban-col-header {
  border-bottom-color: var(--status-completed-accent);
}

.kanban-col[data-status="Cancelled"]   .kanban-col-header {
  border-bottom-color: var(--status-cancelled-accent);
}

.kanban-col[data-status="Backlog"]     .kanban-col-header .section-label {
  color: var(--status-backlog-text);
}

.kanban-col[data-status="Queued"]      .kanban-col-header .section-label {
  color: var(--status-queued-text);
}

.kanban-col[data-status="In Progress"] .kanban-col-header .section-label {
  color: var(--status-in-progress-text);
}

.kanban-col[data-status="Ready"]       .kanban-col-header .section-label {
  color: var(--status-ready-text);
}

.kanban-col[data-status="Completed"]   .kanban-col-header .section-label {
  color: var(--status-completed-text);
}

.kanban-col[data-status="Cancelled"]   .kanban-col-header .section-label {
  color: var(--status-cancelled-text);
}

.kanban-col[data-status="Backlog"]     .kanban-card {
  border-left: 4px solid var(--status-backlog-accent);
}

.kanban-col[data-status="Queued"]      .kanban-card {
  border-left: 4px solid var(--status-queued-accent);
}

.kanban-col[data-status="In Progress"] .kanban-card {
  border-left: 4px solid var(--status-in-progress-accent);
}

.kanban-col[data-status="Ready"]       .kanban-card {
  border-left: 4px solid var(--status-ready-accent);
}

.kanban-col[data-status="Completed"]   .kanban-card {
  border-left: 4px solid var(--status-completed-accent);
}

.kanban-col[data-status="Cancelled"]   .kanban-card {
  border-left: 4px solid var(--status-cancelled-accent);
}

/* Needs-input alert overlay — applied to any card (regardless of column)
     when needs_input_from_user_id is set. Two visual signals: red outline
     + 'Awaiting [name]' pill. The pill is the textual signal required by
     the style guide for state communication (color is decoration). */

/* Awaiting-input card: card-wide tint + thicker outline so it's
     immediately readable from across the board, not just a subtle
     bottom bar. */

.kanban-card.kanban-card--alert {
  box-shadow: 0 0 0 2px var(--alert-accent);
  background: var(--alert-tint);
}

/* Top-right pause badge — at-a-glance signal that the card is blocked
     on a human response. The pause-icon shape reads as "stopped"
     universally. Pulses subtly to draw the eye without being noisy. */

/* Per-card move menu — touch-friendly drag-and-drop alternative.
     Hidden on desktop (drag-and-drop works there); revealed at
     <=768px. Sits top-right of the card; alert badges nudge below it
     when both are present so they don't collide. */

.kanban-card__move-menu {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 0;
  padding: 0;
  transition: border-color 120ms ease, color 120ms ease;
  z-index: 2;
}

.kanban-card__move-menu:hover,
  .kanban-card__move-menu[aria-expanded="true"] {
  border-color: var(--color-crimson);
  color: var(--color-crimson);
}

.kanban-card__move-popover {
  position: absolute;
  top: 32px;
  right: 4px;
  min-width: 160px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border-emphasis);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  z-index: 5;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}

.kanban-card__move-item {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}

.kanban-card__move-item:hover {
  background: var(--color-bg);
  color: var(--color-crimson);
}

@media (max-width: 768px) {
  .kanban-card__move-menu {
    display: inline-flex;
  }

  /* When the move kebab is visible, alert badges shift left so they
       don't sit underneath the kebab in the top-right corner. */

  .kanban-card__move-menu ~ .kanban-card__alert-badge {
    right: 34px;
  }
}

.kanban-card__alert-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--alert-accent);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  animation: kanban-alert-pulse 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes kanban-alert-pulse {
  0%, 100% {
    transform: scale(1);
  }

  50%      {
    transform: scale(1.12);
  }
}

.kanban-card__alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 6px;
  background: var(--alert-tint);
  color: var(--alert-text);
  border: 0.5px solid var(--alert-text);
  border-radius: 2px;
  font-family: 'Varela Round', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.kanban-card__alert::before {
  content: '⚑';
  font-size: 10px;
  line-height: 1;
}

/* Needs-review variant — amber palette, triangle-glyph badge. Same
     pulse animation as awaiting-input so both classes of "blocked" cards
     are visually live, but the colour + glyph keep them distinct. */

.kanban-card.kanban-card--alert-review {
  box-shadow: 0 0 0 2px var(--review-accent);
  background: var(--review-tint);
}

.kanban-card__alert-badge--review {
  background: var(--review-accent);
}

.kanban-card--alert-review .kanban-card__alert {
  background: var(--review-tint);
  color: var(--review-text);
  border-color: var(--review-text);
}

.kanban-card--alert-review .kanban-card__alert::before {
  content: '⚠';
}

.kanban-card__intervention-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.kanban-card__retry,
  .kanban-card__cancel {
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.3;
}

.kanban-count {
  font-family: 'Varela Round', sans-serif;
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kanban-empty {
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
  padding: 16px 0;
  margin: 0;
}

.kanban-card {
  position: relative;
  display: block;
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  /* Right padding used to be 32px to clear the pencil icon, which is now
       gone. Trim to 8px so the bottom-row (dropdown + activate) extends to
       roughly the same right edge as the absolute-positioned Complete
       button on Ready cards. */
  padding: 12px 8px 12px 14px;
  color: var(--color-text);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card:hover {
  border-color: var(--color-border-emphasis);
  color: var(--color-text);
}

.kanban-card:hover .kanban-card__edit {
  opacity: 1;
}

.kanban-card:focus-visible {
  outline: 2px solid var(--color-crimson);
  outline-offset: 1px;
}

/* Selected state — applied by MultiSelect via the .kanban-card--selected
     class. The inset shadow provides the crimson "selected" ring while the
     left-border stays the status colour, so both signals coexist. */

.kanban-card.kanban-card--selected {
  background: rgba(142, 35, 35, 0.06);
  box-shadow: inset 0 0 0 2px var(--color-crimson);
}

/* Pencil icon — top-right corner of each card. Click navigates to the
     task detail page; click on the rest of the card selects. */

@keyframes rushworks-card-pulse {
  0%   {
    box-shadow: 0 0 0 0 rgba(142, 35, 35, 0.45);
    border-color: var(--color-crimson);
  }

  60%  {
    box-shadow: 0 0 0 6px rgba(142, 35, 35, 0);
    border-color: var(--color-crimson);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(142, 35, 35, 0);
    border-color: var(--color-border);
  }
}

.kanban-card--remote-update {
  animation: rushworks-card-pulse 900ms ease-out;
}

.kanban-card h4 {
  font-family: 'Varela Round', sans-serif;
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 4px;
  line-height: 1.3;
}

.kanban-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card-meta {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: var(--color-text-muted);
}

.assignee-tag {
  background: rgba(22, 22, 22, 0.05);
  border: 0.5px solid var(--color-border);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--color-text);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.assignee-tag.assignee-agent {
  background: rgba(142, 35, 35, 0.08);
  border-color: rgba(142, 35, 35, 0.25);
  color: var(--color-crimson);
}

.assignee-tag.muted {
  background: transparent;
  border-color: rgba(22, 22, 22, 0.05);
  color: var(--color-text-muted);
}

/* Needs-input panel — shown on task detail when needs_input_* is set */

.needs-input-panel {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--alert-tint);
  border: 0.5px solid var(--alert-text);
  border-left: 4px solid var(--alert-accent);
  border-radius: 2px;
}

.needs-input-panel__title {
  margin: 0 0 6px;
  font-family: 'Varela Round', sans-serif;
  font-size: 14px;
  color: var(--alert-text);
}

.needs-input-panel__icon {
  display: inline-block;
  margin-right: 4px;
}

.needs-input-panel__note {
  margin: 6px 0;
  font-size: 14px;
  color: var(--color-text);
}

.needs-input-panel__byline {
  margin: 4px 0 0;
  font-size: 12px;
}

.needs-input-panel__resolve {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.needs-input-panel__resolve input[type="text"] {
  flex: 1;
  padding: 6px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
}

/* Intervention panel — shown on task detail when intervention_required
     is set. Amber to match the kanban card variant. PM gets explicit
     Retry / Cancel buttons here. */

.intervention-panel {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--review-tint);
  border: 0.5px solid var(--review-text);
  border-left: 4px solid var(--review-accent);
  border-radius: 2px;
}

.intervention-panel__title {
  margin: 0 0 6px;
  font-family: 'Varela Round', sans-serif;
  font-size: 14px;
  color: var(--review-text);
}

.intervention-panel__icon {
  display: inline-block;
  margin-right: 4px;
}

.intervention-panel__note {
  margin: 6px 0;
  font-size: 14px;
  color: var(--color-text);
  white-space: pre-wrap;
}

.intervention-panel__byline {
  margin: 4px 0 0;
  font-size: 12px;
}

.intervention-panel__guidance {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
}

.intervention-panel__guidance-title {
  margin: 0 0 6px;
  font-family: 'Varela Round', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.intervention-panel__guidance ul {
  margin: 0;
  padding-left: 18px;
}

.intervention-panel__guidance li {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text);
}

.intervention-panel__guidance strong {
  color: var(--review-text);
}

.intervention-panel__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.intervention-panel__actions form {
  margin: 0;
}

/* Task action bar — Activate / Request input / Cancel */

.task-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.task-actions form {
  margin: 0;
}

/* Inline request-input form on the task detail page */

.task-request-input-form {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
}

.task-request-input-form label {
  display: block;
  margin-top: 8px;
}

.task-request-input-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.task-request-input-form select,
  .task-request-input-form textarea {
  width: 100%;
  padding: 6px 8px;
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
}

.task-request-input-form__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Task detail event table — structured rendering of task_events rows so
     the activity feed reads as a real changelog instead of dumped JSON. */

.activity-table {
  width: 100%;
  margin-top: 16px;
  font-size: 13px;
  border-collapse: collapse;
}

.activity-table thead th {
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--color-text-secondary);
  padding: 8px 12px 6px;
  border-bottom: 0.5px solid var(--color-border);
}

.activity-table tbody td {
  padding: 8px 12px;
  border-bottom: 0.5px solid var(--color-border);
  vertical-align: top;
}

.activity-table tbody tr:last-child td {
  border-bottom: none;
}

.activity-table__time {
  white-space: nowrap;
  font-family: 'Menlo', monospace;
  font-size: 11px;
  width: 140px;
}

.activity-table__actor {
  white-space: nowrap;
  width: 160px;
}

.activity-table__actor--agent {
  color: var(--color-crimson);
}

.activity-table__type {
  white-space: nowrap;
  width: 140px;
  font-weight: 600;
}

.activity-table__detail .status-badge {
  font-size: 11px;
  padding: 2px 6px;
}

.activity-table__comment-body {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  padding: 6px 10px;
  border-left: 2px solid var(--color-border);
  background: var(--color-page-bg);
  margin-top: 2px;
}

.activity-table__note {
  font-style: italic;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.activity-table__raw summary {
  cursor: pointer;
}

.activity-table__raw pre {
  font-family: 'Menlo', monospace;
  font-size: 11px;
  background: var(--color-page-bg);
  padding: 6px 8px;
  margin-top: 4px;
  overflow-x: auto;
}

/* Task subtabs (Active Board / All Tasks) */

.task-subtabs {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 16px 0;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--color-border);
}

.task-subtabs a {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -14px;
  padding-bottom: 14px;
}

.task-subtabs a.active {
  color: var(--color-crimson);
  border-bottom-color: var(--color-crimson);
}

.task-subtabs a.btn {
  margin-bottom: 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid transparent;
}

.task-subtabs a.\!btn {
  margin-bottom: 0 !important;
  padding: 0.4rem 0.85rem !important;
  border: 1px solid transparent !important;
}

.task-subtabs a.btn.primary {
  color: #fff;
  border-color: var(--color-crimson);
}

.task-subtabs a.\!btn.primary {
  color: #fff !important;
  border-color: var(--color-crimson) !important;
}

.task-subtabs .spacer {
  flex: 1;
}

@media (max-width: 640px) {
  /* Phone-width sub-tabs: the New-task button keeps its right-align via
       order on a wrapped row so the sub-tab links and button always sit
       on their own rows when the row would otherwise overflow. */

  .task-subtabs {
    gap: 12px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-bottom: 10px;
  }

  .task-subtabs a:not(.btn) {
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  .task-subtabs .spacer {
    display: none;
  }

  .task-subtabs a.btn.primary {
    margin-left: auto;
    padding: 0.35rem 0.7rem;
    font-size: 11px;
  }

  /* Phone-width sub-tabs: the New-task button keeps its right-align via
       order on a wrapped row so the sub-tab links and button always sit
       on their own rows when the row would otherwise overflow. */

  .task-subtabs a:not(.\!btn) {
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
  }

  .task-subtabs a.\!btn.primary {
    margin-left: auto !important;
    padding: 0.35rem 0.7rem !important;
    font-size: 11px !important;
  }
}

/* Filter bar (All Tasks) */

.filter-bar {
  display: grid;
  grid-template-columns: 180px 220px 1fr auto;
  gap: 12px;
  align-items: end;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
  padding: 16px;
  margin-bottom: 16px;
}

.filter-bar .filter-field {
  display: flex;
  flex-direction: column;
}

.filter-bar .field-label {
  margin: 0 0 4px;
}

.filter-bar .field-input {
  margin-bottom: 0;
  height: 36px;
  padding: 6px 10px;
  font-size: 13px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: end;
}

@media (max-width: 768px) {
  .filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .filter-bar .filter-search {
    grid-column: 1 / -1;
  }

  .filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .filter-bar {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .filter-actions {
    flex-wrap: wrap;
  }

  .filter-actions .btn {
    flex: 1;
    min-width: 100px;
  }

  .filter-actions .\!btn {
    flex: 1 !important;
    min-width: 100px !important;
  }
}

/* Task table */

.task-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 2px;
}

.task-table th {
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--color-border);
}

.task-table td {
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--color-border);
  font-size: 13px;
  vertical-align: top;
}

.task-table tr:last-child td {
  border-bottom: 0;
}

.task-table a {
  font-weight: 700;
}

.task-table .row-meta {
  margin: 4px 0 0;
  font-size: 11px;
}

/* Right-aligned hint shown in place of New project button when a free
     tier org has hit its 1-project cap. */

.tab-toolbar__limit {
  font-size: 12px;
}

.tab-toolbar__limit a {
  color: var(--color-crimson);
  text-decoration: none;
  font-weight: 700;
}

.tab-toolbar__limit a:hover {
  text-decoration: underline;
}

/* Linked pull requests on the task detail page. */

.linked-prs {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}

.linked-prs__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--color-border);
}

.linked-prs__item:last-child {
  border-bottom: 0;
}

.linked-prs__link {
  flex: 1;
  color: var(--color-text);
  text-decoration: none;
  min-width: 0;
}

.linked-prs__link:hover {
  color: var(--color-crimson);
}

.linked-prs__link span {
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linked-prs__state {
  flex: 0 0 auto;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.linked-prs__state.pr-open {
  color: var(--status-in-progress-text);
}

.linked-prs__state.pr-merged {
  color: var(--status-completed-text);
}

.linked-prs__state.pr-closed {
  color: var(--status-cancelled-text);
}

.linked-prs__unlink {
  margin: 0;
}

.linked-prs__hint {
  margin: 4px 0 0;
  font-size: 12px;
}

/* Stacked checkbox rows — used in the invite form for role selection. */

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
  margin: 0;
}

/* Compact button modifier — used inline in dense tables */

.\!btn.btn--xs {
  padding: 3px 8px !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

.btn.btn--xs {
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* Per-row action cell — right-align so the button hugs the row edge */

.task-table__actions {
  text-align: right;
  white-space: nowrap;
}

.task-table__actions form {
  display: inline-block;
  margin: 0;
}

/* Inline hint shown next to disabled-by-state actions on task detail */

.task-actions__hint {
  font-size: 12px;
  font-style: italic;
}

/* Needs-input flag in the All Tasks table — same pill style as the
     kanban card alert (red text/border on pale red background, with
     a flag glyph). The row gets a subtle red left border for scanability. */

.task-table tr.task-row--alert td:first-child {
  box-shadow: inset 3px 0 0 var(--alert-accent);
}

.task-row__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--alert-tint);
  color: var(--alert-text);
  border: 0.5px solid var(--alert-text);
  border-radius: 2px;
  font-family: 'Varela Round', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.task-row__flag::before {
  content: '⚑';
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 1024px) {
  .kanban,
    .kanban-placeholder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  /* Horizontal scroll with snap so all four columns stay reachable on
       a phone. The 1-col stack we had before collapsed the kanban
       metaphor entirely; swiping columns is more usable than a 200-card
       vertical list. Column width = 85vw so one column reads and the
       next is hinted at the edge.

       width:100% + min-width:0 are critical: without them the kanban
       (a flex item inside .org--board__body) resolves to content-width
       (4 * 85vw = 340vw) and the page horizontal-scrolls instead of
       the kanban scrolling internally. */

  .kanban,
    .kanban-placeholder {
    grid-template-columns: repeat(4, 85vw);
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .kanban::-webkit-scrollbar,
    .kanban-placeholder::-webkit-scrollbar {
    display: none;
  }

  .kanban-col {
    scroll-snap-align: start;
    min-width: 0;
  }
}

.muted {
  color: var(--color-text-muted);
}

.visible {
  visibility: visible;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.z-40 {
  z-index: 40;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.me-1 {
  margin-inline-end: 0.25rem;
}

.me-2 {
  margin-inline-end: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.ms-1 {
  margin-inline-start: 0.25rem;
}

.ms-2 {
  margin-inline-start: 0.5rem;
}

.ms-3 {
  margin-inline-start: 0.75rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-8 {
  height: 2rem;
}

.h-full {
  height: 100%;
}

.w-16 {
  width: 4rem;
}

.w-8 {
  width: 2rem;
}

.w-full {
  width: 100%;
}

.max-w-6xl {
  max-width: 72rem;
}

.table-auto {
  table-layout: auto;
}

.border-collapse {
  border-collapse: collapse;
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.overflow-hidden {
  overflow: hidden;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.text-center {
  text-align: center;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.no-underline {
  text-decoration-line: none;
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

:root {
  --color-crimson: #8E2323;
  --color-crimson-hover: #af3b3b;
  --color-near-black: #161616;
  --color-page-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-dark-section: #161616;
  --color-dark-surface: #1a1a1a;
  --color-dark-featured: #1f0e0e;
  --color-text: #161616;
  --color-text-secondary: rgba(22, 22, 22, 0.55);
  --color-text-muted: rgba(22, 22, 22, 0.35);
  --color-text-light: #f0ede8;
  --color-border: rgba(22, 22, 22, 0.08);
  --color-border-emphasis: rgba(22, 22, 22, 0.15);
  --color-border-accent: var(--color-crimson);
  /* Aliases for common/components/* mixins — map their var names to ours */
  --color-primary: var(--color-crimson);
  --color-secondary: var(--color-near-black);
  --color-bg-card: var(--color-surface);
  --color-bg-muted: var(--color-page-bg);
  --color-text-primary: var(--color-text);
  --color-text-on-primary: #ffffff;
  --color-muted: var(--color-text-muted);
  --color-danger: var(--color-crimson);
  /* ── Task status palette ────────────────────────────────────────────────
     Single source of truth for task statuses. Each status defines three
     variants:
       --status-X-accent  bright tone — card left-border, column-header bar,
                          chart bars (decoration; contrast secondary)
       --status-X-text    darker tone — badge text + border + section-label
                          (legibility-critical; meets contrast on white)
       --status-X-tint    pale bg     — badge background, chart fills
     Active board uses Queued / In Progress / Ready. Backlog, Completed and
     Cancelled live in All Tasks. The red palette (formerly --status-blocked-)
     is repurposed as --alert-* for the needs_input flag.
     ───────────────────────────────────────────────────────────────────── */
  --status-backlog-accent:        #9ca3af;
  --status-backlog-text:          #4b5563;
  --status-backlog-tint:          #f3f4f6;
  --status-queued-accent:         #f9a8d4;
  --status-queued-text:           #be185d;
  --status-queued-tint:           #fce7f3;
  --status-in-progress-accent:    #eab308;
  --status-in-progress-text:      #a16207;
  --status-in-progress-tint:      #fef9c3;
  --status-ready-accent:          #22c55e;
  --status-ready-text:            #15803d;
  --status-ready-tint:            #dcfce7;
  --status-completed-accent:      #3b82f6;
  --status-completed-text:        #1d4ed8;
  --status-completed-tint:        #dbeafe;
  --status-cancelled-accent:      #d1d5db;
  --status-cancelled-text:        #6b7280;
  --status-cancelled-tint:        #f9fafb;
  /* Alert palette — used for tasks with an open needs_input flag (card
     outline + pill). Distinct from any status so it overlays cleanly on
     whatever column the card lives in. */
  --alert-accent:                 #ef4444;
  --alert-text:                   #b91c1c;
  --alert-tint:                   #fee2e2;
  /* Review palette — used when an agent has flagged a task as needing
     human intervention (fixation_loop, max_iterations). Amber to read as
     "warning, not error" — distinct from the awaiting-input red so a PM
     can tell a stuck agent task from one waiting on a human at a glance. */
  --review-accent:                #f59e0b;
  --review-text:                  #b45309;
  --review-tint:                  #fef3c7;
}

/* Common mixin styling overrides — flatten radii and remove shadows so
   their pre-built UI bits match our brand language (2px corners, hairline
   borders, no shadows). */

.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-md, .rounded-sm {
  border-radius: 2px !important;
}

.shadow-lg, .shadow-xl, .shadow-md, .shadow {
  box-shadow: none !important;
}

.form-input, .form-textarea {
  font-family: 'Nunito', sans-serif;
  border: 0.5px solid rgba(22, 22, 22, 0.18) !important;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: rgba(142, 35, 35, 0.4) !important;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary) !important;
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:p-8 {
    padding: 2rem;
  }
}