/* UI kit: Linear's shell and components. Values are measured from linear.app (light
   theme, CSS px); the dark theme follows Linear's dark tokens. Everything is scoped to
   .ui-* classes and --ui-* variables, so loading this file changes no existing page
   until it opts in with class="ui-app" on <body> (ui/shell.html does). */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2-variations"),
       url("../vendor/inter/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* type: the font and the text scale (docs/ui-spec.md, "Type") */
  --ui-font: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ui-mono: "Berkeley Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --ui-text-micro: .6875rem;
  --ui-text-mini: .75rem;
  --ui-text-small: .8125rem;
  --ui-text-regular: .9375rem;
  --ui-text-large: 1.125rem;
  --ui-text-title3: 1.25rem;
  --ui-text-title2: 1.5rem;
  --ui-text-title1: 2.25rem;
  --ui-weight-normal: 450;
  --ui-weight-medium: 500;
  --ui-weight-semibold: 600;

  /* layout */
  --ui-page-margin: 8px;
  --ui-main-radius: 12px;
  --ui-sidebar-width: 192px;
  --ui-sidebar-padding: 12px;
  --ui-sidebar-button: 28px;
  --ui-header-height: 44px;
  --ui-list-header-height: 36px;
  --ui-row-height: 44px;
  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-radius-pill: 9999px;
  --ui-control-radius: 8px;

  /* layers (z-index) */
  --ui-z-elevated: 10;
  --ui-z-sticky: 30;
  --ui-z-sidebar-backdrop: 95;
  --ui-z-sidebar: 96;
  --ui-z-modal-backdrop: 100;
  --ui-z-popover: 500;
  --ui-z-toast: 580;
  --ui-z-command-backdrop: 599;
  --ui-z-command: 600;
  --ui-z-peek: 650;
  --ui-z-dialog: 700;
  --ui-z-drag: 1000;
  --ui-z-tooltip: 1100;

  /* motion */
  --ui-ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ui-ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ui-ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ui-ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ui-ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ui-speed-quick: .1s;
  --ui-speed-regular: .25s;
  --ui-speed-slow: .35s;
  --ui-speed-hover: .15s;
  /* Linear's springs (static/js/motion.js), which motion.js overwrites with the springs
     themselves as linear() easings and their settle times; these are the fallback. */
  --ui-spring-pop-in: var(--ui-ease-out-expo);
  --ui-spring-pop-in-fade: linear;
  --ui-spring-pop-in-ms: 200ms;
  --ui-spring-menu-in: var(--ui-ease-out-expo);
  --ui-spring-menu-in-fade: linear;
  --ui-spring-menu-in-ms: 200ms;
  --ui-spring-pop-out: var(--ui-ease-out-quad);
  --ui-spring-pop-out-fade: var(--ui-ease-out-quad);
  --ui-spring-pop-out-ms: 110ms;
  --ui-spring-menu-out: var(--ui-ease-out-quad);
  --ui-spring-menu-out-fade: var(--ui-ease-out-quad);
  --ui-spring-menu-out-ms: 110ms;
  --ui-spring-slide: var(--ui-ease-out-quart);
  --ui-spring-slide-fade: var(--ui-ease-out-quart);
  --ui-spring-slide-ms: 300ms;

  /* state colours (the workflow defaults) */
  --ui-status-triage: lch(66% 80 48);       /* #FC7840 -> orange */
  --ui-status-backlog: #bec2c8;
  --ui-status-unstarted: #e2e2e2;
  --ui-status-started: lch(80% 90 85);      /* #f2c94c -> yellow */
  --ui-status-completed: lch(48% 59.31 288.43);   /* #5e6ad2 -> purple */
  --ui-status-canceled: #95a2b3;
  --ui-status-duplicate: #95a2b3;
  --ui-status-review: var(--ui-green);       /* a custom green started state, as in the reference workspace */

  /* elevation */
  --ui-shadow-card: 0 0 0 1px var(--ui-card-ring), var(--ui-shadow-low);
  --ui-shadow-drag: var(--ui-shadow-high);

  /* the page level's field colours, resolved here so a field inside the sidebar (the
     settings menu's Search) keeps them under the sidebar's own tokens */
  --ui-page-field-bg: var(--ui-control-secondary);
  --ui-page-field-border: var(--ui-border-faint);
}

/* @tokens:begin (generated by templates/ui/theme/generate_tokens.py) */
/* Light: base lch(97.94% 0.5 282), accent lch(53% 52.26 286.91), contrast 30. */
:root {
  --ui-bg-sub: lch(94.44% 0.5 282);
  --ui-bg-sub-hover: lch(89.44% 0.5 282);
  --ui-bg-base: lch(97.94% 0.5 282);
  --ui-bg-base-hover: lch(94.44% 0.5 282);
  --ui-bg-shade: lch(92.44% 0.5 282);
  --ui-bg-shade-hover: lch(90.94% 0.5 282);
  --ui-bg-selected: lch(92.254% 5.903 282.518);
  --ui-bg-selected-hover: lch(90.254% 5.903 282.518);
  --ui-bg-focus: lch(92.94% 0.5 282);
  --ui-border: lch(88.49% 0 282);
  --ui-border-hover: lch(85.79% 0 282);
  --ui-border-faint: lch(95.24% 0 282);
  --ui-border-faint-hover: lch(92.54% 0 282);
  --ui-border-solid: lch(84.44% 0 282);
  --ui-border-solid-hover: lch(73.64% 0 282);
  --ui-border-strong: lch(52.04% 0 282);
  --ui-label-title: lch(9.794% 0 282);
  --ui-label-base: lch(19.588% 1.25 282);
  --ui-label-muted: lch(39.176% 1.25 282);
  --ui-label-faint: lch(64.64% 1.25 282);
  --ui-label-link: lch(44.073% 70 286.91);
  --ui-control-primary: lch(53% 52.26 286.91);
  --ui-control-primary-hover: lch(47% 50.26 286.91);
  --ui-control-primary-label: lch(100% 5 286.91);
  --ui-control-secondary: lch(99.997% 0.5 282);
  --ui-control-secondary-hover: lch(95.883% 0.157 282);
  --ui-control-secondary-selected: lch(94.854% 0.157 282);
  --ui-control-tertiary: lch(99.997% 0.5 282);
  --ui-control-tertiary-hover: lch(94.854% 0.5 282);
  --ui-control-tertiary-selected: lch(93.483% 0.5 282);
  --ui-focus-color: lch(53% 52.26 286.91);
  --ui-sidebar-link-bg: lch(95.14% 0.5 282);
  --ui-sidebar-link-bg-active: lch(93.04% 0.5 282);
  --ui-overlay: lch(0% 0 0 / 0.25);
  --ui-scrollbar: lch(64.94% 1.25 282);
  --ui-bg-group-head: lch(94.44% 0.5 282);
  --ui-control-ghost-hover: lch(0% 0 0 / 0.06);
  --ui-control-quiet-hover: lch(94.44% 0.5 282);
  --ui-toggle-off: lch(82.484% 0.054 281.837);
  --ui-shadow-low: 0 3px 6px -2px lch(0% 0 0 / 0.02), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-shadow-medium: 0 6px 18px lch(0% 0 0 / 0.02), 0 3px 9px lch(0% 0 0 / 0.04), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-shadow-high: 0 9px 48px lch(0% 0 0 / 0.08), 0 6px 24px lch(0% 0 0 / 0.1), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-control-ring: lch(0% 0 0 / 0.105);
  --ui-card-ring: lch(0% 0 0 / 0.029);
  --ui-control-ring-hover: lch(0% 0 0 / 0.15);
  --ui-blue: lch(80% 70 267);
  --ui-teal: lch(67.5% 45 210);
  --ui-green: lch(68% 64.37 141.95);
  --ui-yellow: lch(80% 90 85);
  --ui-orange: lch(66% 80 48);
  --ui-red: lch(58% 73 29);
  --ui-purple: lch(48% 59.31 288.43);
  --ui-group-tint-l: 94.44%;
  --ui-group-tint-c: 0.03;
  --ui-group-count-l: 37.776%;
  --ui-group-count-c: 0.25;
  color-scheme: light;
}
.ui-sidebar {
  --ui-bg-sub: lch(90.94% 0.5 282);
  --ui-bg-sub-hover: lch(85.94% 0.5 282);
  --ui-bg-base: lch(94.44% 0.5 282);
  --ui-bg-base-hover: lch(90.94% 0.5 282);
  --ui-bg-shade: lch(88.94% 0.5 282);
  --ui-bg-shade-hover: lch(87.44% 0.5 282);
  --ui-bg-selected: lch(89.091% 6.22 282.548);
  --ui-bg-selected-hover: lch(87.091% 6.22 282.548);
  --ui-bg-focus: lch(89.44% 0.5 282);
  --ui-border: lch(84.99% 0 282);
  --ui-border-hover: lch(82.29% 0 282);
  --ui-border-faint: lch(91.74% 0 282);
  --ui-border-faint-hover: lch(89.04% 0 282);
  --ui-border-solid: lch(80.94% 0 282);
  --ui-border-solid-hover: lch(70.14% 0 282);
  --ui-border-strong: lch(48.54% 0 282);
  --ui-label-title: lch(9.444% 0 282);
  --ui-label-base: lch(18.888% 1.25 282);
  --ui-label-muted: lch(37.776% 1.25 282);
  --ui-label-faint: lch(62.33% 1.25 282);
  --ui-label-link: lch(42.498% 70 286.91);
  --ui-control-primary: lch(53% 52.26 286.91);
  --ui-control-primary-hover: lch(47% 50.26 286.91);
  --ui-control-primary-label: lch(100% 5 286.91);
  --ui-control-secondary: lch(97.94% 0.5 282);
  --ui-control-secondary-hover: lch(94.44% 0.5 282);
  --ui-control-secondary-selected: lch(91.354% 0.157 282);
  --ui-control-tertiary: lch(96.497% 0.5 282);
  --ui-control-tertiary-hover: lch(0% 0 0 / 0.06);
  --ui-control-tertiary-selected: lch(89.983% 0.5 282);
  --ui-focus-color: lch(53% 52.26 286.91);
  --ui-sidebar-link-bg: lch(91.64% 0.5 282);
  --ui-sidebar-link-bg-active: lch(89.54% 0.5 282);
  --ui-overlay: lch(0% 0 0 / 0.25);
  --ui-scrollbar: lch(62.63% 1.25 282);
  --ui-shadow-low: 0 3px 6px -2px lch(0% 0 0 / 0.02), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-shadow-medium: 0 6px 18px lch(0% 0 0 / 0.02), 0 3px 9px lch(0% 0 0 / 0.04), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-shadow-high: 0 9px 48px lch(0% 0 0 / 0.08), 0 6px 24px lch(0% 0 0 / 0.1), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-control-ring: lch(0% 0 0 / 0.105);
  --ui-card-ring: lch(0% 0 0 / 0.029);
  --ui-control-ring-hover: lch(0% 0 0 / 0.15);
}
.ui-card, .ui-composer, .ui-comment, .ui-settings-card, .ui-modal, .ui-peek, .ui-session-card, .ui-chat, .ui-chat-pull {
  --ui-bg-sub: lch(96.5% 0 282);
  --ui-bg-sub-hover: lch(91.5% 0 282);
  --ui-bg-base: lch(100% 0 282);
  --ui-bg-base-hover: lch(96.5% 0 282);
  --ui-bg-shade: lch(94.5% 0 282);
  --ui-bg-shade-hover: lch(93% 0 282);
  --ui-bg-selected: lch(94.222% 5.203 282.49);
  --ui-bg-selected-hover: lch(92.222% 5.203 282.49);
  --ui-bg-focus: lch(95% 0 282);
  --ui-border: lch(90.55% 0 282);
  --ui-border-hover: lch(87.85% 0 282);
  --ui-border-faint: lch(97.3% 0 282);
  --ui-border-faint-hover: lch(94.6% 0 282);
  --ui-border-solid: lch(86.5% 0 282);
  --ui-border-solid-hover: lch(75.7% 0 282);
  --ui-border-strong: lch(54.1% 0 282);
  --ui-label-title: lch(10% 0 282);
  --ui-label-base: lch(20% 1 282);
  --ui-label-muted: lch(40% 1 282);
  --ui-label-faint: lch(66% 1 282);
  --ui-label-link: lch(45% 70 286.91);
  --ui-control-primary: lch(53% 52.26 286.91);
  --ui-control-primary-hover: lch(47% 50.26 286.91);
  --ui-control-primary-label: lch(100% 5 286.91);
  --ui-control-secondary: lch(100% 0 282);
  --ui-control-secondary-hover: lch(95.886% 0 282);
  --ui-control-secondary-selected: lch(94.857% 0 282);
  --ui-control-tertiary: lch(100% 0 282);
  --ui-control-tertiary-hover: lch(96.914% 0 282);
  --ui-control-tertiary-selected: lch(95.543% 0 282);
  --ui-focus-color: lch(53% 52.26 286.91);
  --ui-sidebar-link-bg: lch(97.2% 0 282);
  --ui-sidebar-link-bg-active: lch(95.1% 0 282);
  --ui-overlay: lch(0% 0 0 / 0.25);
  --ui-scrollbar: lch(66.3% 1 282);
  --ui-shadow-low: 0 3px 6px -2px lch(0% 0 0 / 0.02), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-shadow-medium: 0 6px 18px lch(0% 0 0 / 0.02), 0 3px 9px lch(0% 0 0 / 0.04), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-shadow-high: 0 9px 48px lch(0% 0 0 / 0.08), 0 6px 24px lch(0% 0 0 / 0.1), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-control-ring: lch(0% 0 0 / 0.105);
  --ui-card-ring: lch(0% 0 0 / 0.029);
  --ui-control-ring-hover: lch(0% 0 0 / 0.15);
}
.ui-popover, .ui-hovercard, .ui-outline-pop, .ui-palette, .ui-toast, .ui-help, .ui-tooltip, .ui-drag-ghost, .ui-dialog, .ui-sheet {
  --ui-bg-sub: lch(96.5% 0 282);
  --ui-bg-sub-hover: lch(91.5% 0 282);
  --ui-bg-base: lch(100% 0 282);
  --ui-bg-base-hover: lch(96.5% 0 282);
  --ui-bg-shade: lch(94.5% 0 282);
  --ui-bg-shade-hover: lch(93% 0 282);
  --ui-bg-selected: lch(94.222% 5.203 282.49);
  --ui-bg-selected-hover: lch(92.222% 5.203 282.49);
  --ui-bg-focus: lch(95% 0 282);
  --ui-border: lch(90.55% 0 282);
  --ui-border-hover: lch(87.85% 0 282);
  --ui-border-faint: lch(97.3% 0 282);
  --ui-border-faint-hover: lch(94.6% 0 282);
  --ui-border-solid: lch(86.5% 0 282);
  --ui-border-solid-hover: lch(75.7% 0 282);
  --ui-border-strong: lch(54.1% 0 282);
  --ui-label-title: lch(10% 0 282);
  --ui-label-base: lch(20% 1 282);
  --ui-label-muted: lch(40% 1 282);
  --ui-label-faint: lch(66% 1 282);
  --ui-label-link: lch(45% 70 286.91);
  --ui-control-primary: lch(53% 52.26 286.91);
  --ui-control-primary-hover: lch(47% 50.26 286.91);
  --ui-control-primary-label: lch(100% 5 286.91);
  --ui-control-secondary: lch(100% 0 282);
  --ui-control-secondary-hover: lch(95.886% 0 282);
  --ui-control-secondary-selected: lch(94.857% 0 282);
  --ui-control-tertiary: lch(100% 0 282);
  --ui-control-tertiary-hover: lch(96.914% 0 282);
  --ui-control-tertiary-selected: lch(95.543% 0 282);
  --ui-focus-color: lch(53% 52.26 286.91);
  --ui-sidebar-link-bg: lch(97.2% 0 282);
  --ui-sidebar-link-bg-active: lch(95.1% 0 282);
  --ui-overlay: lch(0% 0 0 / 0.25);
  --ui-scrollbar: lch(66.3% 1 282);
  --ui-shadow-low: 0 3px 6px -2px lch(0% 0 0 / 0.02), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-shadow-medium: 0 6px 18px lch(0% 0 0 / 0.02), 0 3px 9px lch(0% 0 0 / 0.04), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-shadow-high: 0 9px 48px lch(0% 0 0 / 0.08), 0 6px 24px lch(0% 0 0 / 0.1), 0 1px 1px lch(0% 0 0 / 0.04);
  --ui-control-ring: lch(0% 0 0 / 0.105);
  --ui-card-ring: lch(0% 0 0 / 0.029);
  --ui-control-ring-hover: lch(0% 0 0 / 0.15);
}
/* Dark: base lch(5.52% 0.4 272), accent lch(47.918% 59.303 288.421), contrast 27.
   System dark unless data-theme says light; data-theme="dark" forces it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --ui-bg-sub: lch(2.595% 0.4 272);
      --ui-bg-sub-hover: lch(4.845% 3.1 272);
      --ui-bg-base: lch(5.52% 0.4 272);
      --ui-bg-base-hover: lch(9.345% 0.85 272);
      --ui-bg-shade: lch(7.32% 0.85 272);
      --ui-bg-shade-hover: lch(8.22% 1.3 272);
      --ui-bg-selected: lch(12.141% 17.792 286.444);
      --ui-bg-selected-hover: lch(14.391% 19.592 286.444);
      --ui-bg-focus: lch(13.62% 0.85 272);
      --ui-border: lch(14.16% 1.48 272);
      --ui-border-hover: lch(16.32% 1.48 272);
      --ui-border-faint: lch(9.84% 1.48 272);
      --ui-border-faint-hover: lch(11.46% 1.48 272);
      --ui-border-solid: lch(16.32% 1.48 272);
      --ui-border-solid-hover: lch(20.64% 1.48 272);
      --ui-border-strong: lch(48.72% 1.48 272);
      --ui-label-title: lch(100% 0 272);
      --ui-label-base: lch(90.451% 1.2 272);
      --ui-label-muted: lch(61.803% 1.2 272);
      --ui-label-faint: lch(36.975% 1.2 272);
      --ui-label-link: lch(57.028% 70 288.421);
      --ui-control-primary: lch(47.918% 59.303 288.421);
      --ui-control-primary-hover: lch(52.418% 61.103 288.421);
      --ui-control-primary-label: lch(100% 5 288.421);
      --ui-control-secondary: lch(10.149% 0.689 272);
      --ui-control-secondary-hover: lch(14.777% 1.075 272);
      --ui-control-secondary-selected: lch(18.634% 1.075 272);
      --ui-control-tertiary: lch(10.149% 0.593 272);
      --ui-control-tertiary-hover: lch(14.006% 0.593 272);
      --ui-control-tertiary-selected: lch(16.706% 0.979 272);
      --ui-focus-color: lch(47.918% 59.303 288.421);
      --ui-sidebar-link-bg: lch(11.37% 1.3 272);
      --ui-sidebar-link-bg-active: lch(16.77% 1.3 272);
      --ui-overlay: lch(0% 0 0 / 0.4);
      --ui-scrollbar: lch(37.275% 1.2 272);
      --ui-bg-group-head: lch(9.232% 0.85 272);
      --ui-control-ghost-hover: lch(18.634% 1.075 272);
      --ui-control-quiet-hover: lch(14.006% 0.593 272);
      --ui-toggle-off: lch(48.39% 0.7 272);
      --ui-shadow-low: 0 0.5px 1px 1px lch(0% 0 0 / 0.3);
      --ui-shadow-medium: 0 3px 8px lch(0% 0 0 / 0.125), 0 2px 5px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
      --ui-shadow-high: 0 4px 40px lch(0% 0 0 / 0.1), 0 3px 20px lch(0% 0 0 / 0.125), 0 3px 12px lch(0% 0 0 / 0.125), 0 2px 8px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
      --ui-control-ring: lch(100% 0 0 / 0.08);
      --ui-card-ring: lch(100% 0 0 / 0.047);
      --ui-control-ring-hover: lch(100% 0 0 / 0.114);
      --ui-blue: lch(80% 70 267);
      --ui-teal: lch(67.5% 45 210);
      --ui-green: lch(60% 64.37 141.95);
      --ui-yellow: lch(80% 90 85);
      --ui-orange: lch(66% 80 48);
      --ui-red: lch(58% 73 29);
      --ui-purple: lch(48% 59.31 288.43);
      --ui-group-tint-l: 10.633%;
      --ui-group-tint-c: 0.06;
      --ui-group-count-l: 63.403%;
      --ui-group-count-c: 0.14;
      color-scheme: dark;
    }
  :root:not([data-theme="light"]) .ui-sidebar {
      --ui-bg-sub: lch(0% 0.4 272);
      --ui-bg-sub-hover: lch(2.25% 3.1 272);
      --ui-bg-base: lch(2.595% 0.4 272);
      --ui-bg-base-hover: lch(6.42% 0.85 272);
      --ui-bg-shade: lch(4.395% 0.85 272);
      --ui-bg-shade-hover: lch(5.295% 1.3 272);
      --ui-bg-selected: lch(9.957% 19.755 287.247);
      --ui-bg-selected-hover: lch(12.207% 21.555 287.247);
      --ui-bg-focus: lch(10.695% 0.85 272);
      --ui-border: lch(11.235% 1.48 272);
      --ui-border-hover: lch(13.395% 1.48 272);
      --ui-border-faint: lch(6.915% 1.48 272);
      --ui-border-faint-hover: lch(8.535% 1.48 272);
      --ui-border-solid: lch(13.395% 1.48 272);
      --ui-border-solid-hover: lch(17.715% 1.48 272);
      --ui-border-strong: lch(45.795% 1.48 272);
      --ui-label-title: lch(100% 0 272);
      --ui-label-base: lch(90.155% 1.2 272);
      --ui-label-muted: lch(60.621% 1.2 272);
      --ui-label-faint: lch(35.024% 1.2 272);
      --ui-label-link: lch(55.698% 70 288.421);
      --ui-control-primary: lch(47.918% 59.303 288.421);
      --ui-control-primary-hover: lch(52.418% 61.103 288.421);
      --ui-control-primary-label: lch(100% 5 288.421);
      --ui-control-secondary: lch(10.149% 0.689 272);
      --ui-control-secondary-hover: lch(14.777% 1.075 272);
      --ui-control-secondary-selected: lch(15.709% 1.075 272);
      --ui-control-tertiary: lch(7.224% 0.593 272);
      --ui-control-tertiary-hover: lch(10.149% 0.689 272);
      --ui-control-tertiary-selected: lch(13.781% 0.979 272);
      --ui-focus-color: lch(47.918% 59.303 288.421);
      --ui-sidebar-link-bg: lch(8.445% 1.3 272);
      --ui-sidebar-link-bg-active: lch(13.845% 1.3 272);
      --ui-overlay: lch(0% 0 0 / 0.4);
      --ui-scrollbar: lch(35.324% 1.2 272);
      --ui-shadow-low: 0 0.5px 1px 1px lch(0% 0 0 / 0.3);
      --ui-shadow-medium: 0 3px 8px lch(0% 0 0 / 0.125), 0 2px 5px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
      --ui-shadow-high: 0 4px 40px lch(0% 0 0 / 0.1), 0 3px 20px lch(0% 0 0 / 0.125), 0 3px 12px lch(0% 0 0 / 0.125), 0 2px 8px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
      --ui-control-ring: lch(100% 0 0 / 0.08);
      --ui-card-ring: lch(100% 0 0 / 0.047);
      --ui-control-ring-hover: lch(100% 0 0 / 0.114);
    }
  :root:not([data-theme="light"]) .ui-card, :root:not([data-theme="light"]) .ui-composer, :root:not([data-theme="light"]) .ui-comment, :root:not([data-theme="light"]) .ui-settings-card, :root:not([data-theme="light"]) .ui-modal, :root:not([data-theme="light"]) .ui-peek {
      --ui-bg-sub: lch(6.307% 0.85 272);
      --ui-bg-sub-hover: lch(8.557% 3.55 272);
      --ui-bg-base: lch(9.232% 0.85 272);
      --ui-bg-base-hover: lch(13.058% 1.3 272);
      --ui-bg-shade: lch(11.033% 1.3 272);
      --ui-bg-shade-hover: lch(11.933% 1.75 272);
      --ui-bg-selected: lch(14.605% 16.228 285.614);
      --ui-bg-selected-hover: lch(16.855% 18.028 285.614);
      --ui-bg-focus: lch(17.332% 1.3 272);
      --ui-border: lch(17.873% 1.93 272);
      --ui-border-hover: lch(20.032% 1.93 272);
      --ui-border-faint: lch(13.553% 1.93 272);
      --ui-border-faint-hover: lch(15.172% 1.93 272);
      --ui-border-solid: lch(20.032% 1.93 272);
      --ui-border-solid-hover: lch(24.352% 1.93 272);
      --ui-border-strong: lch(52.433% 1.93 272);
      --ui-label-title: lch(100% 0 272);
      --ui-label-base: lch(90.826% 1.425 272);
      --ui-label-muted: lch(63.304% 1.425 272);
      --ui-label-faint: lch(39.452% 1.425 272);
      --ui-label-link: lch(58.717% 70 288.421);
      --ui-control-primary: lch(47.918% 59.303 288.421);
      --ui-control-primary-hover: lch(52.418% 61.103 288.421);
      --ui-control-primary-label: lch(100% 5 288.421);
      --ui-control-secondary: lch(13.861% 1.139 272);
      --ui-control-secondary-hover: lch(18.49% 1.525 272);
      --ui-control-secondary-selected: lch(22.347% 1.525 272);
      --ui-control-tertiary: lch(13.861% 1.043 272);
      --ui-control-tertiary-hover: lch(17.718% 1.043 272);
      --ui-control-tertiary-selected: lch(20.418% 1.429 272);
      --ui-focus-color: lch(47.918% 59.303 288.421);
      --ui-sidebar-link-bg: lch(15.082% 1.75 272);
      --ui-sidebar-link-bg-active: lch(20.483% 1.75 272);
      --ui-overlay: lch(0% 0 0 / 0.4);
      --ui-scrollbar: lch(39.752% 1.425 272);
      --ui-shadow-low: 0 0.5px 1px 1px lch(0% 0 0 / 0.3);
      --ui-shadow-medium: 0 3px 8px lch(0% 0 0 / 0.125), 0 2px 5px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
      --ui-shadow-high: 0 4px 40px lch(0% 0 0 / 0.1), 0 3px 20px lch(0% 0 0 / 0.125), 0 3px 12px lch(0% 0 0 / 0.125), 0 2px 8px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
      --ui-control-ring: lch(100% 0 0 / 0.08);
      --ui-card-ring: lch(100% 0 0 / 0.047);
      --ui-control-ring-hover: lch(100% 0 0 / 0.114);
    }
  :root:not([data-theme="light"]) .ui-popover, :root:not([data-theme="light"]) .ui-hovercard, :root:not([data-theme="light"]) .ui-outline-pop, :root:not([data-theme="light"]) .ui-palette, :root:not([data-theme="light"]) .ui-toast, :root:not([data-theme="light"]) .ui-help, :root:not([data-theme="light"]) .ui-tooltip, :root:not([data-theme="light"]) .ui-drag-ghost, :root:not([data-theme="light"]) .ui-dialog, :root:not([data-theme="light"]) .ui-sheet {
      --ui-bg-sub: lch(9.795% 0.85 272);
      --ui-bg-sub-hover: lch(12.045% 3.55 272);
      --ui-bg-base: lch(12.72% 0.85 272);
      --ui-bg-base-hover: lch(16.545% 1.3 272);
      --ui-bg-shade: lch(14.52% 1.3 272);
      --ui-bg-shade-hover: lch(15.42% 1.75 272);
      --ui-bg-selected: lch(16.988% 14.654 284.983);
      --ui-bg-selected-hover: lch(19.238% 16.454 284.983);
      --ui-bg-focus: lch(20.82% 1.3 272);
      --ui-border: lch(21.36% 1.93 272);
      --ui-border-hover: lch(23.52% 1.93 272);
      --ui-border-faint: lch(17.04% 1.93 272);
      --ui-border-faint-hover: lch(18.66% 1.93 272);
      --ui-border-solid: lch(23.52% 1.93 272);
      --ui-border-solid-hover: lch(27.84% 1.93 272);
      --ui-border-strong: lch(55.92% 1.93 272);
      --ui-label-title: lch(100% 0 272);
      --ui-label-base: lch(91.178% 1.425 272);
      --ui-label-muted: lch(64.714% 1.425 272);
      --ui-label-faint: lch(41.778% 1.425 272);
      --ui-label-link: lch(60.303% 70 288.421);
      --ui-control-primary: lch(47.918% 59.303 288.421);
      --ui-control-primary-hover: lch(52.418% 61.103 288.421);
      --ui-control-primary-label: lch(100% 5 288.421);
      --ui-control-secondary: lch(17.349% 1.139 272);
      --ui-control-secondary-hover: lch(21.977% 1.525 272);
      --ui-control-secondary-selected: lch(25.834% 1.525 272);
      --ui-control-tertiary: lch(17.349% 1.043 272);
      --ui-control-tertiary-hover: lch(21.206% 1.043 272);
      --ui-control-tertiary-selected: lch(23.906% 1.429 272);
      --ui-focus-color: lch(47.918% 59.303 288.421);
      --ui-sidebar-link-bg: lch(18.57% 1.75 272);
      --ui-sidebar-link-bg-active: lch(23.97% 1.75 272);
      --ui-overlay: lch(0% 0 0 / 0.4);
      --ui-scrollbar: lch(42.078% 1.425 272);
      --ui-shadow-low: 0 0.5px 1px 1px lch(0% 0 0 / 0.3);
      --ui-shadow-medium: 0 3px 8px lch(0% 0 0 / 0.125), 0 2px 5px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
      --ui-shadow-high: 0 4px 40px lch(0% 0 0 / 0.1), 0 3px 20px lch(0% 0 0 / 0.125), 0 3px 12px lch(0% 0 0 / 0.125), 0 2px 8px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
      --ui-control-ring: lch(100% 0 0 / 0.08);
      --ui-card-ring: lch(100% 0 0 / 0.047);
      --ui-control-ring-hover: lch(100% 0 0 / 0.114);
    }
}
:root[data-theme="dark"] {
  --ui-bg-sub: lch(2.595% 0.4 272);
  --ui-bg-sub-hover: lch(4.845% 3.1 272);
  --ui-bg-base: lch(5.52% 0.4 272);
  --ui-bg-base-hover: lch(9.345% 0.85 272);
  --ui-bg-shade: lch(7.32% 0.85 272);
  --ui-bg-shade-hover: lch(8.22% 1.3 272);
  --ui-bg-selected: lch(12.141% 17.792 286.444);
  --ui-bg-selected-hover: lch(14.391% 19.592 286.444);
  --ui-bg-focus: lch(13.62% 0.85 272);
  --ui-border: lch(14.16% 1.48 272);
  --ui-border-hover: lch(16.32% 1.48 272);
  --ui-border-faint: lch(9.84% 1.48 272);
  --ui-border-faint-hover: lch(11.46% 1.48 272);
  --ui-border-solid: lch(16.32% 1.48 272);
  --ui-border-solid-hover: lch(20.64% 1.48 272);
  --ui-border-strong: lch(48.72% 1.48 272);
  --ui-label-title: lch(100% 0 272);
  --ui-label-base: lch(90.451% 1.2 272);
  --ui-label-muted: lch(61.803% 1.2 272);
  --ui-label-faint: lch(36.975% 1.2 272);
  --ui-label-link: lch(57.028% 70 288.421);
  --ui-control-primary: lch(47.918% 59.303 288.421);
  --ui-control-primary-hover: lch(52.418% 61.103 288.421);
  --ui-control-primary-label: lch(100% 5 288.421);
  --ui-control-secondary: lch(10.149% 0.689 272);
  --ui-control-secondary-hover: lch(14.777% 1.075 272);
  --ui-control-secondary-selected: lch(18.634% 1.075 272);
  --ui-control-tertiary: lch(10.149% 0.593 272);
  --ui-control-tertiary-hover: lch(14.006% 0.593 272);
  --ui-control-tertiary-selected: lch(16.706% 0.979 272);
  --ui-focus-color: lch(47.918% 59.303 288.421);
  --ui-sidebar-link-bg: lch(11.37% 1.3 272);
  --ui-sidebar-link-bg-active: lch(16.77% 1.3 272);
  --ui-overlay: lch(0% 0 0 / 0.4);
  --ui-scrollbar: lch(37.275% 1.2 272);
  --ui-bg-group-head: lch(9.232% 0.85 272);
  --ui-control-ghost-hover: lch(18.634% 1.075 272);
  --ui-control-quiet-hover: lch(14.006% 0.593 272);
  --ui-toggle-off: lch(48.39% 0.7 272);
  --ui-shadow-low: 0 0.5px 1px 1px lch(0% 0 0 / 0.3);
  --ui-shadow-medium: 0 3px 8px lch(0% 0 0 / 0.125), 0 2px 5px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
  --ui-shadow-high: 0 4px 40px lch(0% 0 0 / 0.1), 0 3px 20px lch(0% 0 0 / 0.125), 0 3px 12px lch(0% 0 0 / 0.125), 0 2px 8px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
  --ui-control-ring: lch(100% 0 0 / 0.08);
  --ui-card-ring: lch(100% 0 0 / 0.047);
  --ui-control-ring-hover: lch(100% 0 0 / 0.114);
  --ui-blue: lch(80% 70 267);
  --ui-teal: lch(67.5% 45 210);
  --ui-green: lch(60% 64.37 141.95);
  --ui-yellow: lch(80% 90 85);
  --ui-orange: lch(66% 80 48);
  --ui-red: lch(58% 73 29);
  --ui-purple: lch(48% 59.31 288.43);
  --ui-group-tint-l: 10.633%;
  --ui-group-tint-c: 0.06;
  --ui-group-count-l: 63.403%;
  --ui-group-count-c: 0.14;
  color-scheme: dark;
}
:root[data-theme="dark"] .ui-sidebar {
  --ui-bg-sub: lch(0% 0.4 272);
  --ui-bg-sub-hover: lch(2.25% 3.1 272);
  --ui-bg-base: lch(2.595% 0.4 272);
  --ui-bg-base-hover: lch(6.42% 0.85 272);
  --ui-bg-shade: lch(4.395% 0.85 272);
  --ui-bg-shade-hover: lch(5.295% 1.3 272);
  --ui-bg-selected: lch(9.957% 19.755 287.247);
  --ui-bg-selected-hover: lch(12.207% 21.555 287.247);
  --ui-bg-focus: lch(10.695% 0.85 272);
  --ui-border: lch(11.235% 1.48 272);
  --ui-border-hover: lch(13.395% 1.48 272);
  --ui-border-faint: lch(6.915% 1.48 272);
  --ui-border-faint-hover: lch(8.535% 1.48 272);
  --ui-border-solid: lch(13.395% 1.48 272);
  --ui-border-solid-hover: lch(17.715% 1.48 272);
  --ui-border-strong: lch(45.795% 1.48 272);
  --ui-label-title: lch(100% 0 272);
  --ui-label-base: lch(90.155% 1.2 272);
  --ui-label-muted: lch(60.621% 1.2 272);
  --ui-label-faint: lch(35.024% 1.2 272);
  --ui-label-link: lch(55.698% 70 288.421);
  --ui-control-primary: lch(47.918% 59.303 288.421);
  --ui-control-primary-hover: lch(52.418% 61.103 288.421);
  --ui-control-primary-label: lch(100% 5 288.421);
  --ui-control-secondary: lch(10.149% 0.689 272);
  --ui-control-secondary-hover: lch(14.777% 1.075 272);
  --ui-control-secondary-selected: lch(15.709% 1.075 272);
  --ui-control-tertiary: lch(7.224% 0.593 272);
  --ui-control-tertiary-hover: lch(10.149% 0.689 272);
  --ui-control-tertiary-selected: lch(13.781% 0.979 272);
  --ui-focus-color: lch(47.918% 59.303 288.421);
  --ui-sidebar-link-bg: lch(8.445% 1.3 272);
  --ui-sidebar-link-bg-active: lch(13.845% 1.3 272);
  --ui-overlay: lch(0% 0 0 / 0.4);
  --ui-scrollbar: lch(35.324% 1.2 272);
  --ui-shadow-low: 0 0.5px 1px 1px lch(0% 0 0 / 0.3);
  --ui-shadow-medium: 0 3px 8px lch(0% 0 0 / 0.125), 0 2px 5px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
  --ui-shadow-high: 0 4px 40px lch(0% 0 0 / 0.1), 0 3px 20px lch(0% 0 0 / 0.125), 0 3px 12px lch(0% 0 0 / 0.125), 0 2px 8px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
  --ui-control-ring: lch(100% 0 0 / 0.08);
  --ui-card-ring: lch(100% 0 0 / 0.047);
  --ui-control-ring-hover: lch(100% 0 0 / 0.114);
}
:root[data-theme="dark"] .ui-card, :root[data-theme="dark"] .ui-composer, :root[data-theme="dark"] .ui-comment, :root[data-theme="dark"] .ui-settings-card, :root[data-theme="dark"] .ui-modal, :root[data-theme="dark"] .ui-peek {
  --ui-bg-sub: lch(6.307% 0.85 272);
  --ui-bg-sub-hover: lch(8.557% 3.55 272);
  --ui-bg-base: lch(9.232% 0.85 272);
  --ui-bg-base-hover: lch(13.058% 1.3 272);
  --ui-bg-shade: lch(11.033% 1.3 272);
  --ui-bg-shade-hover: lch(11.933% 1.75 272);
  --ui-bg-selected: lch(14.605% 16.228 285.614);
  --ui-bg-selected-hover: lch(16.855% 18.028 285.614);
  --ui-bg-focus: lch(17.332% 1.3 272);
  --ui-border: lch(17.873% 1.93 272);
  --ui-border-hover: lch(20.032% 1.93 272);
  --ui-border-faint: lch(13.553% 1.93 272);
  --ui-border-faint-hover: lch(15.172% 1.93 272);
  --ui-border-solid: lch(20.032% 1.93 272);
  --ui-border-solid-hover: lch(24.352% 1.93 272);
  --ui-border-strong: lch(52.433% 1.93 272);
  --ui-label-title: lch(100% 0 272);
  --ui-label-base: lch(90.826% 1.425 272);
  --ui-label-muted: lch(63.304% 1.425 272);
  --ui-label-faint: lch(39.452% 1.425 272);
  --ui-label-link: lch(58.717% 70 288.421);
  --ui-control-primary: lch(47.918% 59.303 288.421);
  --ui-control-primary-hover: lch(52.418% 61.103 288.421);
  --ui-control-primary-label: lch(100% 5 288.421);
  --ui-control-secondary: lch(13.861% 1.139 272);
  --ui-control-secondary-hover: lch(18.49% 1.525 272);
  --ui-control-secondary-selected: lch(22.347% 1.525 272);
  --ui-control-tertiary: lch(13.861% 1.043 272);
  --ui-control-tertiary-hover: lch(17.718% 1.043 272);
  --ui-control-tertiary-selected: lch(20.418% 1.429 272);
  --ui-focus-color: lch(47.918% 59.303 288.421);
  --ui-sidebar-link-bg: lch(15.082% 1.75 272);
  --ui-sidebar-link-bg-active: lch(20.483% 1.75 272);
  --ui-overlay: lch(0% 0 0 / 0.4);
  --ui-scrollbar: lch(39.752% 1.425 272);
  --ui-shadow-low: 0 0.5px 1px 1px lch(0% 0 0 / 0.3);
  --ui-shadow-medium: 0 3px 8px lch(0% 0 0 / 0.125), 0 2px 5px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
  --ui-shadow-high: 0 4px 40px lch(0% 0 0 / 0.1), 0 3px 20px lch(0% 0 0 / 0.125), 0 3px 12px lch(0% 0 0 / 0.125), 0 2px 8px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
  --ui-control-ring: lch(100% 0 0 / 0.08);
  --ui-card-ring: lch(100% 0 0 / 0.047);
  --ui-control-ring-hover: lch(100% 0 0 / 0.114);
}
:root[data-theme="dark"] .ui-popover, :root[data-theme="dark"] .ui-hovercard, :root[data-theme="dark"] .ui-outline-pop, :root[data-theme="dark"] .ui-palette, :root[data-theme="dark"] .ui-toast, :root[data-theme="dark"] .ui-help, :root[data-theme="dark"] .ui-tooltip, :root[data-theme="dark"] .ui-drag-ghost, :root[data-theme="dark"] .ui-dialog, :root[data-theme="dark"] .ui-sheet {
  --ui-bg-sub: lch(9.795% 0.85 272);
  --ui-bg-sub-hover: lch(12.045% 3.55 272);
  --ui-bg-base: lch(12.72% 0.85 272);
  --ui-bg-base-hover: lch(16.545% 1.3 272);
  --ui-bg-shade: lch(14.52% 1.3 272);
  --ui-bg-shade-hover: lch(15.42% 1.75 272);
  --ui-bg-selected: lch(16.988% 14.654 284.983);
  --ui-bg-selected-hover: lch(19.238% 16.454 284.983);
  --ui-bg-focus: lch(20.82% 1.3 272);
  --ui-border: lch(21.36% 1.93 272);
  --ui-border-hover: lch(23.52% 1.93 272);
  --ui-border-faint: lch(17.04% 1.93 272);
  --ui-border-faint-hover: lch(18.66% 1.93 272);
  --ui-border-solid: lch(23.52% 1.93 272);
  --ui-border-solid-hover: lch(27.84% 1.93 272);
  --ui-border-strong: lch(55.92% 1.93 272);
  --ui-label-title: lch(100% 0 272);
  --ui-label-base: lch(91.178% 1.425 272);
  --ui-label-muted: lch(64.714% 1.425 272);
  --ui-label-faint: lch(41.778% 1.425 272);
  --ui-label-link: lch(60.303% 70 288.421);
  --ui-control-primary: lch(47.918% 59.303 288.421);
  --ui-control-primary-hover: lch(52.418% 61.103 288.421);
  --ui-control-primary-label: lch(100% 5 288.421);
  --ui-control-secondary: lch(17.349% 1.139 272);
  --ui-control-secondary-hover: lch(21.977% 1.525 272);
  --ui-control-secondary-selected: lch(25.834% 1.525 272);
  --ui-control-tertiary: lch(17.349% 1.043 272);
  --ui-control-tertiary-hover: lch(21.206% 1.043 272);
  --ui-control-tertiary-selected: lch(23.906% 1.429 272);
  --ui-focus-color: lch(47.918% 59.303 288.421);
  --ui-sidebar-link-bg: lch(18.57% 1.75 272);
  --ui-sidebar-link-bg-active: lch(23.97% 1.75 272);
  --ui-overlay: lch(0% 0 0 / 0.4);
  --ui-scrollbar: lch(42.078% 1.425 272);
  --ui-shadow-low: 0 0.5px 1px 1px lch(0% 0 0 / 0.3);
  --ui-shadow-medium: 0 3px 8px lch(0% 0 0 / 0.125), 0 2px 5px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
  --ui-shadow-high: 0 4px 40px lch(0% 0 0 / 0.1), 0 3px 20px lch(0% 0 0 / 0.125), 0 3px 12px lch(0% 0 0 / 0.125), 0 2px 8px lch(0% 0 0 / 0.125), 0 1px 1px lch(0% 0 0 / 0.125);
  --ui-control-ring: lch(100% 0 0 / 0.08);
  --ui-card-ring: lch(100% 0 0 / 0.047);
  --ui-control-ring-hover: lch(100% 0 0 / 0.114);
}
/* @tokens:end */

/* ---------- base ---------- */

.ui-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ui-app {
  margin: 0;
  background: var(--ui-bg-sub);
  color: var(--ui-label-title);
  font-family: var(--ui-font);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 450;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* ---------- base layer: Linear's element and state rules (docs/ui-spec.md, "Base
   layer"). Element defaults sit in :where() so any component rule wins; the state
   rules (focus, selection, caret, placeholder, scrollbars, hover timing) are the whole
   app's, and components do not repeat them. ---------- */

.ui-app *, .ui-app *::before, .ui-app *::after,
#ui-overlays *, #ui-overlays *::before, #ui-overlays *::after { box-sizing: border-box; }
html:has(> body.ui-app), body.ui-app {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-x pan-y;
}
/* The app chrome is not selectable text; what you type, read or copy is. */
.ui-app { user-select: none; }
:where(.ui-app) :is(input, textarea, [contenteditable]:not([contenteditable="false"]), .ui-md, .ui-ed-content, .ui-issue-title, pre, code) { user-select: text; }
:where(.ui-app) :is(button, input, select, textarea, optgroup) { font: inherit; color: inherit; }
:where(.ui-app) a { color: inherit; text-decoration: none; cursor: inherit; }
/* Links stay the arrow cursor; one leaving the app shows the hand. */
:where(.ui-app) :is(a[target="_blank"], a[href^="mailto:"], a[href^="http"]:not([href*="tempo."])) { cursor: pointer; }
:where(.ui-app) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"]), textarea, [contenteditable]:not([contenteditable="false"])) { cursor: text; }
:where(.ui-app) :is(svg, img) { flex-shrink: 0; }
:where(.ui-app) :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: var(--ui-weight-medium); line-height: 1.25; }
:where(.ui-app) :is(strong, b) { font-weight: var(--ui-weight-semibold); }
:where(.ui-app) :is(pre, code, kbd) { font-family: var(--ui-mono); font-feature-settings: normal; }
.ui-app [hidden] { display: none !important; }

/* Focus. Keyboard focus draws a 1px accent outline on the element's own edge; mouse
   focus draws nothing (:focus-visible). Text fields are always :focus-visible, so a
   field draws no outline unless it has a border of its own (.ui-input, .ui-textarea):
   that one takes the ring 1px inside its edge, over the border (the selector names the
   tag so it outranks the field rule above). As the reference: a breadcrumb or back link
   rings 1px outside its edge, a primary button and a switch 2px outside; a sidebar
   section heading and a team's row ring the whole row 1px inside (the row's own rules). */
.ui-app :focus-visible, #ui-overlays :focus-visible { outline: 1px solid var(--ui-focus-color); outline-offset: 0; }
.ui-app :focus:not(:focus-visible), #ui-overlays :focus:not(:focus-visible) { outline: none; }
:is(.ui-app, #ui-overlays) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="file"]), textarea, [contenteditable]:not([contenteditable="false"])):focus-visible { outline: none; }
:is(.ui-app, #ui-overlays) :is(input.ui-input, textarea.ui-textarea, .ui-input, .ui-textarea):focus-visible { outline: 1px solid var(--ui-focus-color); outline-offset: -1px; }
:is(.ui-app, #ui-overlays) :is(.ui-crumb, .ui-settings-back, .ui-settings-backapp):focus-visible { outline-offset: 1px; }
:is(.ui-app, #ui-overlays) :is(.ui-btn-primary, .ui-switch):focus-visible { outline-offset: 2px; }

/* Selection: grey on the page, accent in the field being typed in. */
.ui-app ::selection, #ui-overlays ::selection { background: color-mix(in srgb, var(--ui-label-muted) 20%, transparent); }
:is(.ui-app, #ui-overlays) :is(input:focus, textarea:focus, [contenteditable]:not([contenteditable="false"]):focus)::selection,
:is(.ui-app, #ui-overlays) [contenteditable]:not([contenteditable="false"]):focus ::selection { background: color-mix(in srgb, var(--ui-focus-color) 40%, transparent); }

/* Caret: the text colour in a form field; the accent in a menu's or the palette's search. */
:is(.ui-app, #ui-overlays) :is(.ui-menu-input, .ui-palette-input, .ui-emoji-search, .ui-help-search) { caret-color: var(--ui-focus-color); }

/* Placeholders: faint in a form field or an editor, muted in a menu's search. */
:is(.ui-app, #ui-overlays) :is(input, textarea)::placeholder { color: var(--ui-label-faint); opacity: 1; }
:is(.ui-app, #ui-overlays) :is(.ui-menu-input, .ui-palette-input, .ui-emoji-search, .ui-help-search, .ui-settings-search input, .ui-settings-filter input)::placeholder { color: var(--ui-label-muted); }

/* Scrollbars: thin, the theme's scrollbar colour on a clear track, everywhere. */
.ui-app, .ui-app *, #ui-overlays * { scrollbar-width: thin; scrollbar-color: var(--ui-scrollbar) transparent; }
.ui-app svg, .ui-app svg * { scrollbar-width: auto; scrollbar-color: initial; }

/* Hover and press highlights come on at once and fade out over 150ms; only a device
   that hovers shows them (the kit's hover rules are written for one). */
.ui-app :is(.ui-btn, .ui-nav-item, .ui-menu-item, .ui-prop, .ui-tab, .ui-chip, .ui-row) { transition-duration: var(--ui-speed-hover); }
.ui-app :is(.ui-btn, .ui-nav-item, .ui-menu-item, .ui-prop, .ui-tab, .ui-chip, .ui-row):is(:hover, :active, [aria-expanded="true"]) { transition-duration: 0s; }

/* Disabled controls: the arrow cursor and no hover; each control sets its own colour. */
:where(.ui-app, #ui-overlays) :is(button, input, select, textarea):disabled,
:where(.ui-app, #ui-overlays) [aria-disabled="true"] { cursor: default; }

/* No browser autofill tint or Firefox invalid glow on the kit's fields. */
:is(.ui-app, #ui-overlays) input:autofill { box-shadow: inset 0 0 0 1000px var(--ui-bg-base); -webkit-text-fill-color: var(--ui-label-title); }
:is(.ui-app, #ui-overlays) :-moz-ui-invalid { box-shadow: none; }

.ui-icon { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; color: inherit; }
.ui-icon-14 { width: 14px; height: 14px; }
.ui-icon-12 { width: 12px; height: 12px; }

/* A workflow state's icon (ui/_status_icon.html, icons.js statusSvg): the svg keeps the
   text colour, its shapes take the state's, the glyph on a filled icon the surface's.
   The state's colour is drawn as the reference draws it: the four preset colours it names
   (yellow, purple, orange, green) as the theme's own (--ui-status-fixed, set by the
   state_colour filter / icons.js); any other (--ui-status-c) as set unless it lacks text
   contrast on the page, then at the nearest lightness that has it: in light, past L 68.621
   it draws at L 67.969 (#e2e2e2 and #bec2c8 do); in dark, under L 33.666 at L 34.375. */
.ui-status-triage { --ui-status-fixed: var(--ui-orange); }
.ui-status-backlog { --ui-status-c: var(--ui-status-backlog); }
.ui-status-unstarted { --ui-status-c: var(--ui-status-unstarted); }
.ui-status-started { --ui-status-fixed: var(--ui-yellow); }
.ui-status-review { --ui-status-fixed: var(--ui-green); }
.ui-status-completed { --ui-status-fixed: var(--ui-purple); }
.ui-status-canceled { --ui-status-c: var(--ui-status-canceled); }
.ui-status-duplicate { --ui-status-c: var(--ui-status-duplicate); }
.ui-status {
  --ui-status-paint: var(--ui-status-fixed, lch(from var(--ui-status-c, currentColor) calc(l - clamp(0, (l - 68.621) * 1000, 1) * (l - 67.969)) c h));
  fill: none;
}
.ui-status-ring, .ui-status-fill, .ui-status-pie { fill: none; stroke: var(--ui-status-paint); }
.ui-status-glyph { fill: none; stroke: var(--ui-status-glyph, var(--ui-bg-base)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ui-status { --ui-status-paint: var(--ui-status-fixed, lch(from var(--ui-status-c, currentColor) calc(l + clamp(0, (33.666 - l) * 1000, 1) * (34.375 - l)) c h)); }
}
:root[data-theme="dark"] .ui-status { --ui-status-paint: var(--ui-status-fixed, lch(from var(--ui-status-c, currentColor) calc(l + clamp(0, (33.666 - l) * 1000, 1) * (34.375 - l)) c h)); }
.ui-priority { color: var(--ui-label-muted); }
.ui-priority-urgent { color: var(--ui-orange); }
.ui-priority-none { color: var(--ui-label-muted); }
.ui-status { width: 14px; height: 14px; }

.ui-avatar {
  --avatar: #8a8f98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--avatar);
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  line-height: 0;
  letter-spacing: .02em;
  overflow: hidden;
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar-20 { width: 20px; height: 20px; font-size: 9.5px; }
.ui-avatar-empty { background: transparent; color: var(--ui-label-faint); border: 1px dashed currentColor; }

.ui-dot { --dot: var(--ui-label-faint); width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; display: inline-block; }

.ui-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 19px;
  padding: 2px;
  border: 1px solid var(--ui-border-faint);
  border-radius: 4px;
  background: transparent;
  color: var(--ui-label-muted);
  font: 400 12px/1.1 var(--ui-font);
  font-feature-settings: "cv08", "zero";
  text-align: center;
  white-space: nowrap;
}
.ui-kbd + .ui-kbd { margin-left: 3px; }
.ui-kbd-then { color: var(--ui-label-faint); font-size: 11px; margin: 0 4px; }

/* ---------- buttons ---------- */

.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-label-muted);
  font: 500 12px/normal var(--ui-font);
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--ui-speed-hover), color var(--ui-speed-hover), box-shadow var(--ui-speed-hover);
}
.ui-btn:hover { background: var(--ui-control-tertiary-hover); color: var(--ui-label-base); }
.ui-btn .ui-icon { width: 14px; height: 14px; }
.ui-btn-outline, .ui-tab { position: relative; background: var(--ui-control-secondary); color: var(--ui-label-base); }
.ui-btn-outline::after, .ui-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--ui-control-ring), var(--ui-shadow-low);
  pointer-events: none;
  transition: box-shadow var(--ui-speed-hover);
}
.ui-btn-outline:hover::after, .ui-tab:hover::after { box-shadow: 0 0 0 1px var(--ui-control-ring-hover), var(--ui-shadow-low); }
.ui-btn-outline:hover { background: var(--ui-control-secondary-hover); }
.ui-btn-primary { background: var(--ui-control-primary); color: var(--ui-control-primary-label); box-shadow: var(--ui-shadow-low); }
.ui-btn-primary:hover { background: var(--ui-control-primary-hover); color: var(--ui-control-primary-label); }
/* An icon button's glyph paints muted and brightens to the title colour on hover. */
.ui-icon-btn { flex: none; width: 28px; padding: 0 2px; justify-content: center; color: var(--ui-label-muted); }
.ui-icon-btn:not(.ui-btn-outline):hover { color: var(--ui-label-title); }
.ui-btn.is-modified { position: relative; }
.ui-btn.is-modified::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-control-primary-hover);
}

/* ---------- shell ---------- */

.ui-shell {
  display: grid;
  grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}
.ui-sidebar-collapsed .ui-shell { grid-template-columns: 0 minmax(0, 1fr); }
.ui-sidebar-collapsed .ui-sidebar { visibility: hidden; }
.ui-sidebar-collapsed .ui-main { margin-left: 8px; }

.ui-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 8px 8px 8px 0;
  background: var(--ui-bg-base);
  border: 1px solid var(--ui-border-faint);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-low);
  overflow: hidden;
}

/* Phone: the sidebar becomes an off-canvas drawer over the page, opened by the menu
   button at the top left of the main panel (ui.js toggleSidebar); the main panel takes
   the whole screen, square and edge to edge as Linear draws it. */
.ui-app { --ui-page-bg: var(--ui-bg-sub); }
.ui-menu-toggle, .ui-sidebar-backdrop { display: none; }
@media (max-width: 768px) {
  .ui-shell, .ui-sidebar-collapsed .ui-shell { display: block; height: 100vh; height: 100dvh; }
  .ui-main, .ui-sidebar-collapsed .ui-main { height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .ui-sidebar, .ui-sidebar-collapsed .ui-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--ui-z-sidebar);
    width: min(330px, calc(100vw - 60px));
    height: 100%;
    background: var(--ui-page-bg);
    box-shadow: var(--ui-shadow-high);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--ui-speed-regular) var(--ui-ease-out-quart), visibility 0s linear var(--ui-speed-regular);
  }
  .ui-sidebar-open .ui-sidebar {
    visibility: visible;
    transform: none;
    transition: transform var(--ui-speed-regular) var(--ui-ease-out-quart);
  }
  .ui-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-sidebar-backdrop);
    background: lch(0% 0 0 / .32);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ui-speed-regular);
  }
  .ui-sidebar-open .ui-sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .ui-menu-toggle {
    display: inline-flex;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: var(--ui-z-elevated);
    color: var(--ui-label-base);
  }
  .ui-ws-name { max-width: 120px; }
}

/* ---------- sidebar ---------- */

.ui-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 12px 0;
  overflow: hidden;
}
.ui-sidebar-top { display: flex; align-items: center; gap: 4px; height: 44px; flex: none; }
.ui-ws, .ui-app .ui-ws {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 28px;
  padding: 0 9px 0 5px;
  max-width: calc(100% - 68px);
  margin-right: auto;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-label-base);
  font: 500 13px/1 var(--ui-font);
  text-align: left;
}
.ui-ws:hover { background: var(--ui-sidebar-link-bg); }
.ui-ws-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  background: #7c8f2f;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
  flex: none;
}
.ui-ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52px; font-weight: 550; line-height: 23px; letter-spacing: -0.1px; }
.ui-ws .ui-icon { width: 8px; height: 8px; color: var(--ui-label-muted); }
.ui-sidebar-top .ui-icon-btn { color: var(--ui-label-muted); }
.ui-sidebar-top .ui-btn:hover { background: var(--ui-control-tertiary-hover); color: var(--ui-label-title); }
.ui-compose { background: var(--ui-control-secondary); }
.ui-sidebar-top .ui-compose { color: var(--ui-label-title); }
.ui-sidebar-top .ui-compose:hover { background: var(--ui-control-secondary-hover); color: var(--ui-label-title); }

/* no scrollbar gutter: the links keep the sidebar's full width, as Linear's do */
.ui-sidebar-scroll { flex: 1; overflow-y: auto; margin: 0 -12px; padding: 4px 12px 16px; scrollbar-width: none; }
.ui-sidebar-scroll::-webkit-scrollbar { display: none; }
.ui-nav { display: flex; flex-direction: column; }
.ui-nav-item, .ui-app .ui-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin: 1px 0;
  padding: 0 9px 0 8px;
  border-radius: var(--ui-radius);
  color: var(--ui-label-muted);
  font: 500 13px/normal var(--ui-font);
  white-space: nowrap;
  transition: color var(--ui-speed-hover);
}
.ui-nav-item:hover { background: var(--ui-sidebar-link-bg); color: var(--ui-label-title); }
.ui-nav-item .ui-icon { width: 14px; height: 14px; }
.ui-nav-item:focus-visible { outline-offset: -1px; }
.ui-nav-item[aria-current="page"], .ui-nav-item.is-current { background: var(--ui-sidebar-link-bg-active); color: var(--ui-label-title); }
.ui-nav-item .ui-icon { color: var(--ui-label-muted); }
.ui-nav-item:hover .ui-icon, .ui-nav-item[aria-current="page"] .ui-icon, .ui-nav-item.is-current .ui-icon { color: var(--ui-label-title); }
.ui-nav-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-nav-more { width: 100%; border: 0; background: none; text-align: left; }
.ui-nav-count { display: flex; justify-content: flex-end; min-width: 23px; margin: 0 -2px 0 auto; color: var(--ui-label-muted); font: 500 13px/normal var(--ui-font); }
.ui-nav-count.is-dot { min-width: 0; width: 6px; height: 6px; margin: 0 4px 0 auto; border-radius: 50%; background: var(--ui-label-muted); }
.ui-nav-sub > .ui-nav-item { margin-left: 19px; padding-left: 6px; }
.ui-nav-tree, .ui-app .ui-nav-tree { position: relative; margin-left: 39px; padding-left: 6px; }
.ui-nav-tree-wrap { position: relative; }
.ui-nav-tree-wrap::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--ui-border);
}

.ui-nav-section, .ui-app .ui-nav-section {
  display: flex;
  align-items: center;
  gap: 0;
  width: calc(100% - 5px);
  height: 28px;
  margin: 16px 0 0 5px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--ui-label-muted);
  font: 500 12px/normal var(--ui-font);
  text-align: left;
}
.ui-nav-section:hover { color: var(--ui-label-title); }
.ui-nav-section .ui-icon { width: 16px; height: 16px; margin: 1px 0 0 2px; transition: transform var(--ui-speed-hover) var(--ui-ease-out-quad); }
.ui-nav-section[aria-expanded="false"] .ui-icon { transform: rotate(-90deg); }
/* Keyboard focus rings the heading's whole row (the button sits 5px in), 1px inside. */
.ui-nav-section { position: relative; }
.ui-app .ui-nav-section:focus-visible { outline: none; }
.ui-nav-section:focus-visible::after { content: ""; position: absolute; inset: 0 0 0 -5px; border-radius: var(--ui-radius); outline: 1px solid var(--ui-focus-color); outline-offset: -1px; pointer-events: none; }

.ui-team, .ui-app .ui-team {
  display: flex;
  align-items: center;
  gap: 7px;
  width: calc(100% - 2px);
  height: 28px;
  margin: 0;
  padding: 0 0 0 9px;
  border: 0;
  border-radius: var(--ui-radius);
  background: transparent;
  color: var(--ui-label-muted);
  font: 500 13px/normal var(--ui-font);
  text-align: left;
  white-space: nowrap;
}
.ui-team:hover, .ui-team:hover .ui-caret { color: var(--ui-label-title); }
.ui-team .ui-team-icon { width: 14px; height: 14px; }
.ui-team-icon {
  --team: #4cb782;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--team) 18%, transparent);
  color: var(--team);
  font-size: 8.5px;
  font-weight: 650;
  flex: none;
}
/* a team's own icon (apps/core/icons.py): an emoji, or a drawn glyph in the team colour */
.ui-team-icon.is-emoji, .ui-team-icon.is-glyph { background: transparent; }
.ui-team-icon.is-emoji { border-radius: 0; color: inherit; font-size: 12px; font-weight: 400; line-height: 1; text-align: center; white-space: nowrap; }
.ui-team .ui-team-icon.is-emoji { color: var(--ui-label-base); font-size: 11px; line-height: 14px; }
.ui-team-icon.is-glyph .ui-icon { width: 14px; height: 14px; }
.ui-chip .ui-project-icon { width: 14px; height: 14px; font-size: 11px; }
.ui-emoji-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; font-size: 13px; line-height: 1; }
.ui-team .ui-nav-label { flex: none; }
.ui-team .ui-caret { width: 16px; height: 16px; color: var(--ui-label-faint); transition: transform var(--ui-speed-hover) var(--ui-ease-out-quad); }
.ui-team[aria-expanded="false"] .ui-caret { transform: rotate(-90deg); }

.ui-sidebar-foot { display: flex; align-items: center; gap: 4px; height: 40px; flex: none; }

/* ---------- page header ---------- */

.ui-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--ui-header-height);
  flex: none;
  padding: 0 9px 0 8px;
  border-bottom: 1px solid var(--ui-border-faint);
}
.ui-crumbs { display: flex; align-items: center; min-width: 0; margin-left: 11px; font: 500 13px/normal var(--ui-font); color: var(--ui-label-base); }
.ui-crumb { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 5px 0 4px; margin: 0 -5px 0 -4px; border-radius: 8px; white-space: nowrap; }
.ui-crumb:hover { background: var(--ui-control-tertiary-hover); color: var(--ui-label-title); }
span.ui-crumb { height: auto; padding: 0; margin: 0; border-radius: 0; }
span.ui-crumb:hover { background: none; }
.ui-crumb-sep { flex: none; margin: -2px 8px 0; color: var(--ui-label-muted); }
.ui-crumb-sep.ui-icon { width: 12px; height: 12px; margin: 0 4px; }
.ui-crumbs > .ui-btn { margin-left: 8px; }
.ui-crumb-id { color: var(--ui-label-base); font-weight: 500; }
.ui-crumb-menu { border: 0; background: none; color: var(--ui-label-title); font: inherit; cursor: default; }
.ui-crumb-caret { width: 10px; height: 10px; color: var(--ui-label-muted); }
.ui-header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ui-header .ui-icon-btn { color: var(--ui-label-muted); }
.ui-viewbar .ui-btn:hover > .ui-icon { color: var(--ui-label-title); }
.ui-header-new { padding: 0 10px 0 8px; }
@media (max-width: 768px) {
  /* room for the shell's menu button; "New issue" shrinks to its plus */
  .ui-header { gap: 4px; padding: 0 8px; }
  .ui-crumbs { margin-left: 40px; }
  .ui-main > :first-child + :not(.ui-header) { padding-left: 44px; }
  .ui-crumbs { flex: 1 1 auto; overflow: hidden; }
  .ui-crumb { min-width: 0; }
  .ui-crumb > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .ui-header-new { width: 28px; padding: 0 2px; justify-content: center; }
  .ui-header-new .ui-btn-label { display: none; }
}

/* the row under the header: view tabs and the filter / display buttons */
.ui-viewbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 43px;
  flex: none;
  padding: 0 9px 0 8px;
}
.ui-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  color: var(--ui-label-muted);
  font: 500 12px/normal var(--ui-font);
  white-space: nowrap;
  transition: background-color var(--ui-speed-hover), color var(--ui-speed-hover);
}
.ui-tab:hover { color: var(--ui-label-base); background: var(--ui-control-tertiary-hover); }
.ui-tab:focus-visible { outline-offset: -1px; }
.ui-tab.is-active, .ui-tab[aria-current="page"] { background: var(--ui-control-tertiary-selected); color: var(--ui-label-title); }
.ui-tab.is-active::after, .ui-tab[aria-current="page"]::after { box-shadow: 0 0 0 1px var(--ui-control-ring), 0 0 0 0 transparent; }
.ui-tab .ui-icon { width: 14px; height: 14px; }
/* A tab's count (the Inbox's Priority 99+ / Other 2): 6px after the label, muted 450. */
.ui-tab-count { margin-left: 6px; color: var(--ui-label-muted); font-weight: 450; }
.ui-inbox-boxes { flex: none; }
.ui-viewbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ui-viewbar [data-ui-panel-toggle].is-active { background: var(--ui-control-tertiary-selected); }
@media (max-width: 768px) {
  /* the tabs scroll sideways under the filter and display buttons, which stay put */
  .ui-viewbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 8px; }
  .ui-viewbar::-webkit-scrollbar { display: none; }
  .ui-viewbar-actions { position: sticky; right: 0; padding-left: 6px; background: var(--ui-bg-base); box-shadow: -12px 0 12px -4px var(--ui-bg-base); }
}

/* ---------- filter bar ---------- */

.ui-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0 8px 4px;
  padding: 6px 8px 6px 10px;
  border-radius: var(--ui-radius);
  background: var(--ui-bg-sub);
}
[data-ui-filter]:not(.has-filters) .ui-filterbar { display: none; }
.ui-filter-chips { display: contents; }
.ui-filter-chip {
  display: inline-flex;
  align-items: stretch;
  height: 24px;
  border-radius: 6px;
  background: var(--ui-bg-base);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  font: 450 12px/1 var(--ui-font);
  color: var(--ui-label-base);
  overflow: hidden;
}
.ui-filter-seg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
.ui-filter-seg + .ui-filter-seg { box-shadow: inset 1px 0 0 var(--ui-border); }
.ui-filter-seg .ui-icon { width: 14px; height: 14px; }
.ui-filter-seg.is-field { color: var(--ui-label-base); font-weight: 500; }
.ui-filter-seg.is-op { color: var(--ui-label-muted); }
button.ui-filter-seg:hover { background: var(--ui-bg-base-hover); }
.ui-filter-seg.is-remove { padding: 0 5px; color: var(--ui-label-muted); }
.ui-filter-seg.is-remove .ui-icon { width: 12px; height: 12px; }
.ui-filterbar-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ---------- list ---------- */

.ui-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.ui-scroll[data-layout="board"] { overflow: hidden; padding-top: 4px; }
.ui-list { padding: 0 0 2px; outline: none; }
.ui-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 0 8px;
  padding: 0 8px 0 0;
  border-radius: var(--ui-radius);
  background-color: var(--ui-bg-group-head);
  /* Linear tints a status group's header from its state's colour at the left edge
     (--ui-group-tint, set by ui/_list.html); other groupings stay flat. */
  background-image: linear-gradient(90deg, var(--ui-group-tint-start, var(--ui-bg-group-head)) 0%, var(--ui-bg-group-head) 100%), none;
  color: var(--ui-label-base);
  font: 500 13px/1.21 var(--ui-font);
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
}
.ui-group-head[style*="--ui-group-tint"] {
  --ui-group-tint-start: lch(from var(--ui-group-tint) var(--ui-group-tint-l) calc(c * var(--ui-group-tint-c)) h);
}
.ui-group + .ui-group .ui-group-head, .ui-group-head + .ui-group-head { margin-top: 2px; }
.ui-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  margin-right: -6px;
  border: 0;
  background: transparent;
  color: var(--ui-label-faint);
}
/* The state icon sits in a 16px slot, as Linear's does. */
.ui-group-head > .ui-status { margin: 0 1px; }
.ui-group-toggle .ui-icon { width: 16px; height: 16px; transition: transform .15s ease; /* Linear's collapse arrow */ }
.ui-group-toggle[aria-expanded="false"] .ui-icon { transform: rotate(-90deg); }
.ui-group-head .ui-icon-14 { width: 14px; height: 14px; }
.ui-group-count { color: var(--ui-label-muted); font-weight: 450; font-variant-numeric: tabular-nums; text-align: right; }
.ui-group-head[style*="--ui-group-tint"] .ui-group-count { color: lch(from var(--ui-group-tint) var(--ui-group-count-l) calc(c * var(--ui-group-count-c)) h); }
.ui-group-head .ui-group-add { margin-left: auto; width: 24px; height: 24px; padding: 0 2px; gap: 0; border: 1px solid transparent; color: var(--ui-label-base); }
.ui-group-head .ui-group-add:hover { background: var(--ui-control-ghost-hover); color: var(--ui-label-title); }

.ui-row {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--ui-row-height);
  margin: 0 8px;
  padding: 0 18px 0 12px;
  border-radius: var(--ui-radius);
  color: var(--ui-label-title);
  cursor: default;
  user-select: none;
}
.ui-row:hover, .ui-row.is-focused { background: var(--ui-bg-base-hover); }
.ui-row.is-selected { background: var(--ui-bg-selected); }
.ui-row:focus { outline: none; }
.ui-row:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ui-border); }
/* An issue row spans the list edge to edge, as Linear's does; its hover, focus and
   selection fill is a ::before inset 8px each side, so the fill keeps the list's
   gutter while the row's own box (and its click target) does not. */
.ui-list .ui-row {
  isolation: isolate;
  margin: 0;
  padding: 0 26px 0 16px;
}
.ui-list .ui-row::before {
  content: "";
  position: absolute;
  inset: 0 8px;
  z-index: -1;
  border-radius: var(--ui-radius);
}
.ui-list .ui-row:hover, .ui-list .ui-row.is-focused, .ui-list .ui-row.is-selected { background: none; }
.ui-list .ui-row:hover::before, .ui-list .ui-row.is-focused::before { background: var(--ui-bg-base-hover); }
.ui-list .ui-row.is-selected::before { background: var(--ui-bg-selected); }
.ui-list .ui-row.is-selected:hover::before, .ui-list .ui-row.is-selected.is-focused::before { background: var(--ui-bg-selected-hover); }
.ui-list .ui-row:focus-visible { box-shadow: none; }
.ui-row-check {
  width: 14px;
  height: 14px;
  margin: 0 12px 0 0;
  flex: none;
  opacity: 0;
  accent-color: var(--ui-control-primary);
}
/* Linear: the box shows on the row under the pointer or focus and on selected rows, not
   on every row once something is selected. */
.ui-row:hover .ui-row-check, .ui-row.is-focused .ui-row-check, .ui-row-check:checked { opacity: 1; }
.ui-row-priority { display: inline-flex; width: 16px; margin-right: 8px; flex: none; }
.ui-row-priority svg { fill: currentColor; }
.ui-status { fill: none; }
/* Linear's identifier column is a fixed 66px (it grows only for a longer key). Row,
   group-head and chip text sets Inter's normal line height, 1.21, by number: the
   bundled build reports 1.23 for `normal`. */
.ui-row-id {
  min-width: 66px;
  margin-right: 11px;
  color: var(--ui-label-muted);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.21;
  letter-spacing: -.02em;
  font-feature-settings: "tnum", "cpsp", "calt";
  text-align: left;
  white-space: nowrap;
  flex: none;
}
.ui-row-status { display: inline-flex; margin-right: 9px; flex: none; }
.ui-row-status .ui-icon { width: 14px; height: 14px; }
.ui-row-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.21;
  text-align: left;
  color: var(--ui-label-title);
}
.ui-row-sub { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; flex: none; }
.ui-row-spacer { flex: 1 1 16px; min-width: 16px; }
/* Out of room, the chips shrink from their right edge (each truncates its own text), as
   Linear's do; the meta never overflows to the left. */
.ui-row-meta { display: flex; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.ui-row-meta > .ui-chip, .ui-row-meta > .ui-row-meta { flex: 0 1 auto; min-width: 0; }
.ui-row-meta .ui-chip { text-overflow: clip; }
.ui-row-meta .ui-chip > .ui-icon, .ui-row-meta .ui-chip > .ui-dot { flex: none; }
.ui-row-assignee { display: inline-flex; margin-left: 8px; flex: none; }
/* The date column is a fixed 54px; the date sits at its right edge. */
.ui-row-date {
  display: flex;
  justify-content: flex-end;
  width: 54px;
  margin-left: 12px;
  color: var(--ui-label-muted);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.21;
  white-space: nowrap;
  flex: none;
}
.ui-row-date > span { text-align: right; }
/* My issues: Activity's "Changed status on Nov 15" in place of the date. */
.ui-row-date.is-activity { width: auto; min-width: 54px; margin-left: 16px; }
.ui-list .ui-row-child { padding-left: 42px; }
.ui-row-child::after {
  content: "";
  position: absolute;
  left: 58px;
  top: -10px;
  width: 10px;
  height: 22px;
  border-left: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  border-bottom-left-radius: 6px;
}
.ui-row.is-dim .ui-row-title, .ui-row.is-dim .ui-row-id { color: var(--ui-label-faint); }
.ui-row.is-dim .ui-row-check { visibility: hidden; }
@media (max-width: 768px) {
  /* Linear's phone rows: priority, status, title, assignee; the identifier and the
     property chips go (the Display menu's choices still apply above this width) */
  .ui-list .ui-row { padding: 0 19px 0 18px; }
  .ui-row-priority { margin-right: 9px; }
  .ui-row-check, .ui-row-id, .ui-row-meta, .ui-row-date { display: none; }
  .ui-row-title { flex: 1 1 auto; }
  .ui-row-spacer { flex: 0 0 8px; min-width: 8px; }
  .ui-list .ui-row-child { padding-left: 38px; }
  .ui-row-child::after { left: 24px; }
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--ui-border-solid);
  border-radius: 48px;
  background: var(--ui-bg-base);
  color: var(--ui-label-muted);
  font: 450 12px/normal var(--ui-font);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
}
.ui-chip:hover { background: var(--ui-control-tertiary-selected); }
.ui-chip .ui-icon { width: 14px; height: 14px; }
.ui-chip .ui-dot { width: 9px; height: 9px; margin: 0 2.5px; }
/* Linear's chip text: 6px after the icon, 1px before the edge, the font's own line height. */
.ui-chip-text { margin: 0 1px 0 6px; overflow: hidden; text-overflow: ellipsis; line-height: 1.21; text-align: left; }
.ui-chip-text:first-child { margin-left: 0; }
.ui-chip:has(> .ui-chip-text), .ui-chip-icon-only { gap: 0; }
.ui-chip-icon-only { padding: 0 4.5px; }
.ui-chip-blocked .ui-icon { color: var(--ui-red); }

.ui-empty { padding: 48px 16px; text-align: center; color: var(--ui-label-muted); }
.ui-empty-state { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 0 16px 24px; }
.ui-empty-state-box { width: 340px; max-width: 100%; }
.ui-empty-state-art { display: block; width: 80px; height: 80px; margin-bottom: 20px; color: var(--ui-label-faint); }
.ui-empty-state h2 { margin: 0 0 8px; color: var(--ui-label-base); font: 600 15px/23px var(--ui-font); }
.ui-empty-state p { margin: 0; color: var(--ui-label-muted); font: 450 13px/18.2px var(--ui-font); }
.ui-empty-state p + p { margin-top: 17px; }
.ui-empty-state-actions { display: flex; gap: 8px; margin-top: 24px; }
.ui-empty-state-actions .ui-btn { height: 28px; padding: 0 10px; font: 500 12px/1 var(--ui-font); }
.ui-empty-state-actions .ui-kbd { margin-left: 6px; font-weight: inherit; border-color: currentColor; background: none; color: inherit; opacity: .85; }
.ui-empty-error { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ui-empty-error .ui-icon { width: 20px; height: 20px; color: var(--ui-red); }
.ui-empty-error p { margin: 0; max-width: 480px; color: var(--ui-label-base); }

/* Sub-groups (Display "Sub-grouping") and "Show n more" (kit extension, apps.web). */
/* Linear's sub-group heading: 36px, its fold caret, the name (13px/500) 2px in, the
   count, then a rule to the row's end. */
.ui-subgroup-head {
  display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 8px; padding: 0 8px 0 0;
  color: var(--ui-label-base); font: 500 13px/16px var(--ui-font);
}
.ui-subgroup-head .ui-icon { width: 14px; height: 14px; }
.ui-subgroup-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 28px; margin-left: 6px; padding: 0; border: 0; background: transparent; color: var(--ui-label-faint); }
.ui-subgroup-head .ui-subgroup-toggle .ui-icon { width: 16px; height: 16px; transition: transform .15s ease; }
.ui-subgroup-toggle[aria-expanded="false"] .ui-icon { transform: rotate(-90deg); }
.ui-subgroup-label { margin-left: 2px; white-space: nowrap; }
.ui-subgroup-head .ui-group-count { font-weight: 450; }
.ui-subgroup-rule { flex: 1; min-width: 0; height: 1px; background: var(--ui-border-solid); }
.ui-subgroup-head:not(:has(.ui-subgroup-toggle)) { padding-left: 34px; }
.ui-group-head .ui-avatar, .ui-subgroup-head .ui-avatar, .ui-col-head .ui-avatar, .ui-lane-head .ui-avatar { flex: none; }
.ui-more {
  display: flex; align-items: center; width: calc(100% - 16px); height: 32px; margin: 0 8px; padding: 0 12px 0 40px;
  border: 0; border-radius: var(--ui-radius); background: transparent;
  color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); cursor: default;
}
.ui-more:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-more-card { width: 100%; margin: 0; padding: 0 12px; justify-content: center; flex: none; }
.ui-more.htmx-request { opacity: .6; }

/* ---------- board ---------- */

.ui-board {
  display: flex;
  align-items: flex-start;
  gap: 0;
  height: 100%;
  padding: 0 0 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.ui-col {
  display: flex;
  flex-direction: column;
  width: 343px;
  flex: none;
  max-height: 100%;
  padding: 1px 0 0 16px;
}
.ui-col:last-child { width: 359px; padding-right: 16px; }
@media (max-width: 768px) {
  /* Linear's phone columns: 264px cards. */
  .ui-col { width: 282px; padding-left: 16px; }
  .ui-col:last-child { width: 298px; padding-right: 16px; }
}
.ui-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  flex: none;
  margin: 0 4px 0 5px;
  padding: 0;
  color: var(--ui-label-base);
  font: 500 13px/1.21 var(--ui-font);
}
.ui-col-head .ui-icon-14 { width: 14px; height: 14px; }
.ui-col-count { color: var(--ui-label-muted); font-weight: 450; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* Linear's column ⋯ and + : 24px pill buttons, flush right. */
.ui-col-actions { margin-left: auto; display: flex; gap: 2px; }
.ui-col-actions .ui-icon-btn { width: 24px; height: 24px; padding: 0 2px; gap: 0; border: 1px solid transparent; color: var(--ui-label-muted); }
.ui-col-actions .ui-icon-btn:hover { background: var(--ui-control-quiet-hover); color: var(--ui-label-title); }
.ui-col-body { flex: 1; min-height: 60px; overflow-y: auto; padding: 8px 1px 8px; scrollbar-width: thin; display: flex; flex-direction: column; gap: 8px; border-radius: var(--ui-radius); transition: background-color var(--ui-speed-hover); }
.ui-col.is-drop-target .ui-col-body, .ui-col-body.is-drop-target { background: color-mix(in srgb, var(--ui-control-primary) 5%, transparent); }

/* Linear's card (computed): padding 8; the identifier (12/450, 15px) and title
   (13/500/16px, two lines) inset 4px and keep 34px clear on the right for the avatar
   (18px, top right); chips 10px below, "Created" 6px below them in a 24px row. A
   card with a two-line title, chips and the date is 133px. */
.ui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--ui-radius);
  background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-card);
  color: var(--ui-label-title);
  cursor: default;
  user-select: none;
  transition: box-shadow var(--ui-speed-hover);
}
.ui-card:hover, .ui-card.is-focused { background: var(--ui-bg-base-hover); }
.ui-card.is-selected { box-shadow: 0 0 0 1px var(--ui-control-primary-hover), var(--ui-shadow-card); }
.ui-card:focus { outline: none; }
.ui-card-top { display: flex; align-items: center; gap: 6px; min-height: 15px; padding: 0 34px 0 4px; line-height: 15px; }
.ui-card-id { flex: none; color: var(--ui-label-muted); font-size: 12px; font-weight: 450; line-height: 1.21; letter-spacing: -.02em; font-feature-settings: "tnum", "cpsp", "calt"; text-align: left; white-space: nowrap; }
.ui-card-top [data-prop="assignee"] { position: absolute; top: 8px; right: 8px; display: inline-flex; }
.ui-card-parent { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; color: var(--ui-label-muted); font-size: 12px; font-weight: 450; white-space: nowrap; text-overflow: ellipsis; }
.ui-card-parent .ui-icon { width: 10px; height: 10px; flex: none; color: var(--ui-label-faint); }
.ui-card-title { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 0 34px 0 4px; font-size: 13px; font-weight: 500; line-height: 16px; }
.ui-card-title .ui-icon { width: 14px; height: 14px; margin-top: -4px; }
.ui-card-title-text { text-align: left; }
.ui-card-title-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.ui-card-meta .ui-chip { max-width: 100%; }
.ui-card-foot { display: flex; align-items: center; height: 24px; margin: 6px 0 0 1px; color: var(--ui-label-muted); font-size: 12px; font-weight: 450; line-height: 1.21; white-space: nowrap; }
.ui-card-foot > span { margin: 0 3px 0 1px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ui-board-frame { display: flex; flex-direction: column; height: 100%; }
.ui-board-frame > .ui-board { flex: 1; min-height: 0; height: auto; }

/* Board rows (Display "Rows"): column heads on top, a folding swimlane per row value
   (kit extension, apps.web). */
.ui-board-rows { overflow: auto; height: auto; min-height: 100%; }
.ui-board-heads { position: sticky; top: 0; z-index: 2; display: flex; background: var(--ui-bg-base); }
.ui-board-heads .ui-col-head { width: 318px; flex: none; margin: 0 4px 0 21px; }
.ui-lane { flex: none; }
.ui-lane-head {
  position: sticky; left: 0; display: flex; align-items: center; gap: 8px; height: 35px; width: max-content; min-width: calc(100% - 24px);
  margin: 4px 12px 0; padding: 0; color: var(--ui-label-base); font: 500 13px/1.21 var(--ui-font);
}
.ui-lane-head .ui-group-toggle { margin-left: 5px; }
.ui-lane-head .ui-icon-14 { width: 14px; height: 14px; }
.ui-lane-cells { display: flex; padding-bottom: 8px; }
.ui-lane-cells .ui-col-body { width: 327px; flex: none; margin-left: 16px; overflow: visible; }
.ui-lane-cells .ui-col-body:last-child { margin-right: 16px; }
@media (max-width: 768px) {
  .ui-board-heads .ui-col-head { width: 260px; margin: 0 1px 0 21px; }
  .ui-lane-cells .ui-col-body { width: 266px; }
}

/* Board column and row menus, hidden columns and rows (static/js/board.js; Linear's
   computed values): a lane head spans the visible board width with its ⋯ at the
   right; "Hidden columns" is a 338px column 20px right of the last one (a sticky 50px
   head, 37px cards 10px apart: 4px 12px padding, 8px radius, mark 12px from the name,
   13/500 name, 13/450 muted count); "Hidden rows" sits under the swimlanes. */
.ui-board-rows { flex-direction: row; align-items: flex-start; container-type: inline-size; }
.ui-board-main { display: flex; flex-direction: column; flex: none; }
.ui-board-main:only-child { min-width: 100%; }
.ui-board-rows .ui-lane-head { width: auto; min-width: 0; max-width: calc(100cqw - 24px); }
.ui-lane-menu { margin-left: auto; width: 24px; height: 24px; padding: 0 2px; border: 1px solid transparent; color: var(--ui-label-muted); }
.ui-lane-menu:hover { background: var(--ui-control-quiet-hover); color: var(--ui-label-title); }
.ui-col-head[data-board-column] .ui-col-actions [aria-expanded="true"], .ui-lane-menu[aria-expanded="true"] { background: var(--ui-control-quiet-hover); color: var(--ui-label-title); }
.ui-board-hidden-cols {
  position: sticky; top: 0; display: flex; flex-direction: column; flex: none; width: 350px; max-height: 100%;
  margin-left: 20px; padding-right: 12px; overflow-y: auto; scrollbar-width: thin;
}
.ui-board-hidden-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 4px; height: 50px; flex: none;
  background: var(--ui-bg-base);
}
.ui-board-hidden-toggle {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px 0 6px; border: 0; border-radius: 9999px;
  background: transparent; color: var(--ui-label-base); font: 500 12px/1 var(--ui-font); cursor: default;
}
.ui-board-hidden-toggle:hover { background: var(--ui-control-quiet-hover); color: var(--ui-label-title); }
.ui-board-hidden-toggle .ui-icon { width: 18px; height: 18px; margin-right: 2px; color: var(--ui-label-faint); transition: transform var(--ui-speed-hover) var(--ui-ease-out-quad); }
.ui-board-hidden-toggle[aria-expanded="false"] .ui-icon { transform: rotate(-90deg); }
.ui-board-hidden-count { margin-left: 6px; color: var(--ui-label-muted); font-weight: 450; }
.ui-board-hidden-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.ui-board-hidden-card {
  display: flex; align-items: center; gap: 12px; min-height: 37px; padding: 4px 12px; border-radius: 8px;
  background: var(--ui-bg-base); box-shadow: var(--ui-shadow-card); color: var(--ui-label-title);
  font: 500 13px/18px var(--ui-font); transition: background-color var(--ui-speed-hover);
}
.ui-board-hidden-card .ui-icon-14 { width: 14px; height: 14px; flex: none; }
.ui-board-hidden-card.is-drop-target { background: color-mix(in srgb, var(--ui-control-primary) 8%, var(--ui-bg-base)); }
.ui-board-hidden-name { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-board-hidden-num { flex: none; color: var(--ui-label-muted); font-weight: 450; font-variant-numeric: tabular-nums; }
.ui-board-hidden-card .ui-icon-btn { flex: none; width: 24px; height: 24px; margin-right: -6px; padding: 0 2px; border: 1px solid transparent; color: var(--ui-label-muted); opacity: 0; }
.ui-board-hidden-card:hover .ui-icon-btn, .ui-board-hidden-card .ui-icon-btn:focus-visible, .ui-board-hidden-card .ui-icon-btn[aria-expanded="true"] { opacity: 1; }
.ui-board-hidden-card .ui-icon-btn:hover { background: var(--ui-control-quiet-hover); color: var(--ui-label-title); }
.ui-board-hidden-rows { position: sticky; left: 0; max-width: calc(100cqw - 24px); margin: 8px 12px 0; }
.ui-board-hidden-rows .ui-board-hidden-head { position: static; height: 40px; background: none; }
.ui-board-hidden-rows .ui-board-hidden-list { flex-flow: row wrap; }
.ui-board-hidden-rows .ui-board-hidden-card { width: 326px; }
@media (max-width: 768px) {
  .ui-board-hidden-cols { width: 280px; }
  .ui-board-hidden-rows .ui-board-hidden-card { width: 266px; }
}

/* drag and drop */
.ui-dragging, .ui-dragging * { cursor: grabbing !important; }
.ui-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--ui-z-drag);
  margin: 0 !important;
  pointer-events: none;
  box-shadow: var(--ui-shadow-drag) !important;
  will-change: transform;
}
.ui-row.ui-drag-ghost { background: var(--ui-bg-base); }
/* The dragged item keeps its slot, invisible, while its copy follows the pointer
   (dnd.js); in the issue list it stays, dimmed, and a line marks the landing spot. */
.ui-dragging [data-ui-drop] { position: relative; }
.is-drag-hidden { opacity: 0 !important; }
.ui-list .is-drag-source:not(.ui-drag-ghost) { opacity: .5; }
/* The faint block in the gap a board column or sortable list opens: it fades in
   400ms after a 150ms wait, out in 100ms. */
.ui-drop-gap {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  border-radius: var(--ui-radius);
  background: var(--ui-border);
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms cubic-bezier(.25, .46, .45, .94);
}
.ui-drop-gap.is-visible { opacity: 1; transition: opacity 400ms cubic-bezier(.25, .46, .45, .94) 150ms; }
.ui-drop-spacer { flex: none; transition: height 200ms cubic-bezier(.25, .46, .45, .94) 50ms, width 200ms cubic-bezier(.25, .46, .45, .94) 50ms; }
/* The issue list's landing line: 1px accent on the row's top (or bottom) edge with a
   7px ring at its left end. */
.ui-drop-line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: -.5px;
  z-index: 9;
  height: 0;
  border-top: 1px solid var(--ui-control-primary);
  pointer-events: none;
}
.ui-drop-line.is-after { top: auto; bottom: -.5px; }
.ui-drop-line::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -4px;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border: 1px solid var(--ui-control-primary);
  border-radius: 50%;
  background: var(--ui-bg-base);
}
@media (prefers-reduced-motion: reduce) {
  .ui-drop-gap, .ui-drop-gap.is-visible, .ui-drop-spacer { transition: none; }
}

/* ---------- issue page ---------- */

.ui-issue { display: grid; grid-template-columns: minmax(0, 1fr) 320px; flex: 1; min-height: 0; }
.ui-issue-main { overflow-y: auto; padding: 48px 32px 64px 42px; }
.ui-issue-body { max-width: 600px; margin: 0 auto; }
.ui-issue-title {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-label-title);
  font: 600 24px/1.6 var(--ui-font);
  letter-spacing: -.004em;
  outline: none;
  width: 100%;
}
.ui-issue-parent { display: flex; align-items: center; gap: 6px; color: var(--ui-label-muted); font-size: 13px; font-weight: 450; margin-bottom: 12px; }
.ui-issue-parent b { color: var(--ui-label-base); font-weight: 500; }
.ui-issue-desc {
  margin: 0 -14px;
  padding: 10px 14px 16px;
  color: var(--ui-label-base);
  font: 450 15px/24px var(--ui-font);
  font-feature-settings: "calt";
  letter-spacing: -.0067em;
  outline: none;
  white-space: pre-wrap;
}
.ui-issue-desc:empty::before { content: attr(data-placeholder); color: var(--ui-label-faint); }
.ui-issue-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 4px 0 16px -4px; color: var(--ui-label-muted); }
.ui-issue-section { border-top: 1px solid var(--ui-border-faint); margin-top: 24px; padding-top: 24px; }
.ui-activity-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ui-activity-head h3 { margin: 0; font: 600 15px/23px var(--ui-font); color: var(--ui-label-title); }
.ui-activity { position: relative; display: flex; flex-direction: column; margin-bottom: 16px; }
.ui-activity-item {
  position: relative;
  display: flex;
  width: calc(100% - 10px);
  align-items: flex-start;
  margin: -4px 0 4px;
  padding: 5px 0;
  border-radius: 8px;
  overflow: hidden;
  color: var(--ui-label-muted);
  font: 450 12px/16.8px var(--ui-font);
}
.ui-activity-item b { color: inherit; font-weight: 500; }
.ui-activity-item .ui-activity-icon { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 18px; padding: 2px 11px; background: var(--ui-bg-base); }
.ui-activity-item .ui-activity-icon .ui-avatar, .ui-activity-item .ui-activity-icon > .ui-status { width: 14px; height: 14px; font-size: 6.5px; }
.ui-activity-item + .ui-activity-item::before {
  content: "";
  position: absolute;
  left: 17.5px;
  top: 0;
  height: 6px;
  width: 1px;
  background: var(--ui-border);
}
.ui-activity-time { color: var(--ui-label-faint); }
.ui-activity-item .ui-activity-time { display: inline-block; flex: none; color: inherit; }
.ui-comment {
  margin: 8px 0;
  padding: 12px 16px;
  border-radius: var(--ui-radius);
  background: var(--ui-bg-base);
  box-shadow: inset 0 0 0 1px var(--ui-border-faint), 0 3px 6px -2px rgba(0, 0, 0, .02), 0 1px 1px rgba(0, 0, 0, .04);
}
.ui-comment-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-label-muted); margin-bottom: 6px; }
.ui-comment-head b { color: var(--ui-label-title); font-weight: 500; line-height: normal; white-space: nowrap; }
.ui-comment-body { font: 450 15px/24px var(--ui-font); color: var(--ui-label-base); }
.ui-composer-form { display: block; margin: 0 -8px; }
.ui-composer {
  position: relative;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--ui-radius);
  background: var(--ui-bg-base);
  box-shadow: inset 0 0 0 1px var(--ui-border-faint), 0 3px 6px -2px rgba(0, 0, 0, .02), 0 1px 1px rgba(0, 0, 0, .04);
}
.ui-composer-input {
  display: block;
  width: 100%;
  min-height: 24px;
  max-height: 320px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-label-base);
  font: 450 15px/24px var(--ui-font);
  resize: none;
  outline: none;
}
.ui-composer-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.ui-composer-actions .ui-icon-btn { color: var(--ui-label-muted); }
.ui-send { width: 28px; height: 28px; border-radius: 50%; }

.ui-issue-side { overflow-y: auto; padding: 16px 16px 32px 8px; }
.ui-side-tools { display: flex; justify-content: flex-end; gap: 6px; height: 28px; margin-bottom: 20px; }
.ui-prop-section { margin-bottom: 26px; }
.ui-prop-section h3 { margin: 0 0 8px; padding: 0 8px; color: var(--ui-label-muted); font: 500 13px/1 var(--ui-font); }
.ui-issue-page .ui-prop-section h3 { width: fit-content; margin: 0; line-height: normal; }
.ui-issue-page .ui-prop-section h3 + * { margin-top: 10px; }
.ui-prop-list { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.ui-prop {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  max-width: 100%;
  height: 28px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-label-base);
  font: 500 13px/1 var(--ui-font);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--ui-speed-hover);
}
.ui-app .ui-prop { font: 500 13px/1 var(--ui-font); color: var(--ui-label-base); } /* over the shell's `.ui-app button { font: inherit }` */
.ui-prop:hover, .ui-prop[aria-expanded="true"] { background: var(--ui-control-tertiary-hover); }
.ui-prop:focus-visible { background: var(--ui-control-tertiary-selected); }
.ui-prop.is-empty, .ui-app .ui-prop.is-empty { color: var(--ui-label-muted); }
.ui-prop .ui-icon { width: 16px; height: 16px; }
.ui-prop [data-ui-picker-chips] { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-prop-labels { height: auto; min-height: 28px; padding: 2px 6px; flex-wrap: wrap; white-space: normal; }

/* ---------- issue page: markdown, sub-issues, links, threads, panel rows ----------
   apps.issue_pages: the content column, the rendered editor and the activity threads. */

/* Linear's issue view: the page is one scroller (thin overlay-style bar) and a container,
   holding a grid of 1fr | content up to 80ch (805px) | panel 280-400px | 1fr, with the
   panel and gaps sized from the scroller's width (Linear's own clamp()s). The panel is
   sticky, so a panel taller than the view shows its end as the page reaches its own. */
.ui-issue-page {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar) transparent;
  scrollbar-gutter: stable;
  container: issue-page / inline-size;
}
/* Linear's app chrome: the arrow cursor and left-set text, a text cursor only where you type. */
.ui-issue-page { cursor: default; text-align: left; }
.ui-issue-page .ui-issue-title, .ui-issue-page .ui-comment-body { cursor: text; }
.ui-issue-page .ui-issue-title, .ui-issue-page .ui-issue-desc { text-align: start; }
.ui-issue-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 805px) minmax(0, clamp(280px, 26.087cqw + 66.087px, 400px)) 1fr;
  column-gap: clamp(16px, 8.696cqw - 55.304px, 56px);
  align-items: start;
}
.ui-issue-page .ui-issue-main { grid-column: 2; min-width: 0; overflow: visible; padding: 59px 0 64px 14px; }
.ui-issue-page .ui-issue-body { max-width: none; }
.ui-issue-page .ui-issue-side { grid-column: 3; position: sticky; top: 0; min-width: 0; overflow: visible; padding: 7px 0 54px; }
.ui-issue-page .ui-issue-title { font-feature-settings: "calt"; min-height: 32px; margin-bottom: 8px; border-radius: 4px; line-height: 32px; letter-spacing: -.16px; overflow-wrap: break-word; }
.ui-issue-page .ui-issue-parent { gap: 2px; min-height: 26px; margin: -6px 0 24px; }
.ui-issue-page .ui-issue-title:has(+ .ui-issue-parent) { margin-bottom: 14px; }
.ui-issue-page .ui-side-tools { margin-bottom: 40px; }
.ui-issue-page .ui-side-tools .ui-icon-btn .ui-icon { width: 16px; height: 16px; }
.ui-app .ui-issue-side .ui-prop { line-height: normal; }
/* The status button's icon is 14px, inset 1px each side (Linear's); the rest are 16px. */
.ui-issue-page .ui-issue-side .ui-prop[data-ui-picker*='"field": "state"'] > .ui-icon { width: 14px; height: 14px; margin-left: 1px; }
.ui-issue-page .ui-issue-side .ui-prop[data-ui-picker*='"field": "state"'] > [data-ui-picker-label] { margin-left: 1px; }
.ui-issue-page .ui-issue-side .ui-prop > [data-ui-picker-label] { overflow: hidden; text-overflow: ellipsis; }
.ui-issue-page .ui-prop-list { gap: 4px; }
.ui-side-phone { display: none; }
/* Labels: each label a 25px outlined pill (dot, name), then a round "+" (Linear's panel). */
.ui-label-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.ui-issue-side .ui-prop-labels:not(.is-empty) { height: auto; min-height: 25px; padding: 0; background: none; }
.ui-issue-side .ui-prop-labels [data-ui-picker-chips] { gap: 6px; }
.ui-issue-side .ui-prop-labels .ui-chip { height: 25px; padding: 0 7px; gap: 0; overflow: visible; border: 1px solid var(--ui-border); border-radius: 30px; background: var(--ui-bg-base); box-shadow: none; color: var(--ui-label-base); font: 500 13px/normal var(--ui-font); }
.ui-issue-side .ui-prop-labels .ui-chip > .ui-dot { margin-right: 6px; }
.ui-issue-side .ui-prop-labels .ui-chip:hover { background: var(--ui-bg-focus); }
.ui-label-add { width: 25px; height: 25px; color: var(--ui-label-base); }
.ui-label-add .ui-icon { width: 16px; height: 16px; }

/* Phone: one column. The panel's properties become a wrapping row of outlined chips
   under the title (Linear's mobile issue view); pull requests and relations each
   collapse into a count chip; the copy tools and section headings go. */
@media (max-width: 768px) {
  .ui-issue-page { scrollbar-gutter: auto; scrollbar-width: none; }
  .ui-issue-page .ui-issue-grid { display: flex; flex-direction: column; align-items: stretch; padding: 24px 14px 48px; }
  .ui-issue-page .ui-issue-main, .ui-issue-page .ui-issue-body { display: contents; }
  .ui-issue-page .ui-issue-body > * { order: 2; min-width: 0; }
  .ui-issue-page .ui-issue-body > .ui-issue-banner, .ui-issue-page .ui-issue-body > .ui-issue-title, .ui-issue-page .ui-issue-body > .ui-issue-parent { order: 0; }
  .ui-issue-page .ui-issue-title { font-size: 24px; }
  .ui-issue-page .ui-issue-parent { margin-bottom: 0; white-space: nowrap; }
  .ui-issue-page .ui-issue-parent .ui-progress-chip { flex: none; }
  .ui-issue-page .ui-issue-side { order: 1; position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 24px 0 16px; padding: 0; }
  .ui-issue-page .ui-issue-side .ui-prop-section, .ui-issue-page .ui-issue-side .ui-prop-list, .ui-issue-page .ui-issue-side .ui-label-row, .ui-issue-page .ui-issue-side .ui-prop-tree { display: contents; }
  .ui-issue-page .ui-issue-side .ui-side-tools, .ui-issue-page .ui-issue-side h3, .ui-issue-page .ui-issue-side .ui-prop-section[data-issue-fold], .ui-issue-page .ui-issue-side .ui-label-add { display: none; }
  .ui-issue-page .ui-issue-parent-link { flex: 0 1 auto; }
  .ui-issue-page .ui-issue-parent .ui-crumb-id { white-space: nowrap; }
  .ui-issue-page .ui-issue-side .ui-prop-tree::before { display: none; }
  .ui-issue-page .ui-issue-side .ui-side-phone { display: inline-flex; }
  .ui-issue-page .ui-issue-side .ui-prop { height: 24px; padding: 0 8px 0 6px; gap: 5px; box-shadow: inset 0 0 0 1px var(--ui-border); font-size: 12px; }
  .ui-issue-page .ui-issue-side .ui-prop .ui-icon, .ui-issue-page .ui-issue-side .ui-prop .ui-avatar { width: 14px; height: 14px; }
  .ui-issue-page .ui-issue-side .ui-prop-labels:not(.is-empty) { padding: 0; box-shadow: none; }
  .ui-issue-page .ui-issue-side .ui-prop-labels .ui-chip { height: 24px; font-size: 12px; }
  .ui-issue-page .ui-issue-parent-link b { min-width: 0; }
  .ui-issue-page .ui-issue-side .ui-prop-latent { display: none; }
  .ui-issue-page .ui-issue-side > script { display: none; }
}
.ui-issue-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 12px; border-radius: var(--ui-radius); background: var(--ui-bg-sub); color: var(--ui-label-muted); font-size: 13px; }
.ui-issue-banner .ui-btn { margin-left: auto; }
.ui-issue-parent-link { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 26px; padding: 5px 4px; margin: 0 2px 0 0; border: 1px solid transparent; border-radius: 8px; line-height: normal; cursor: default; }
.ui-issue-parent-link:hover { border-color: var(--ui-border); background: var(--ui-bg-shade); }
.ui-issue-parent-link b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-progress-chip { display: inline-flex; flex: none; align-items: center; max-width: 224px; height: 26px; padding: 0 8px; overflow: hidden; border: 1px solid var(--ui-border-solid); border-radius: var(--ui-radius-pill); background: var(--ui-bg-base); color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-progress-chip > svg:first-child { margin-right: 7px; }
.ui-progress-ring { color: var(--ui-status-completed); }

/* rendered markdown (descriptions, comments, previews) */
.ui-md { white-space: normal; overflow-wrap: anywhere; }
.ui-md > :first-child { margin-top: 0; }
.ui-md > :last-child { margin-bottom: 0; }
.ui-md p { margin: 0 0 12px; }
.ui-md h1, .ui-md h2, .ui-md h3, .ui-md h4 { margin: 24px 0 8px; color: var(--ui-label-title); letter-spacing: -.01em; }
.ui-md h1 { font: 600 20px/28px var(--ui-font); }
.ui-md h2 { margin: 32px 0 16px; font: 600 19px/28px var(--ui-font); letter-spacing: .05px; }
.ui-md h3, .ui-md h4 { font: 600 15px/24px var(--ui-font); }
.ui-md ul, .ui-md ol { margin: 0 0 12px; padding-left: 24px; }
.ui-md li { margin: 0; }
.ui-md li + li, .ui-md li > ul, .ui-md li > ol { margin-top: 6px; }
.ui-md li > ul, .ui-md li > ol { margin-bottom: 0; }
.ui-md li > p { margin: 0; }
/* A checklist item: the box hangs in the list's indent, so wrapped lines line up with the first. */
.ui-md li:has(> .ui-task), .ui-md li:has(> p > .ui-task) { position: relative; list-style: none; }
.ui-md li:has(> .ui-task:checked), .ui-md li:has(> p > .ui-task:checked) { color: var(--ui-label-muted); }
.ui-md .ui-task {
  appearance: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 5px;
  left: -24px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 3px;
  background: var(--ui-bg-base) center / 10px no-repeat;
  opacity: 1;
}
.ui-md .ui-task:checked {
  border-color: var(--ui-label-base);
  background-color: var(--ui-label-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 5.2 2 2L8 3' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .ui-md .ui-task:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 5.2 2 2L8 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-md .ui-task:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2 5.2 2 2L8 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } }
.ui-md a { color: var(--ui-label-link); }
.ui-md a:hover { text-decoration: underline; }
.ui-md strong { color: var(--ui-label-title); font-weight: 600; }
.ui-md code { padding: 0 .25em; border-radius: .2em; background: var(--ui-md-code-bg); box-shadow: inset 0 0 0 1px var(--ui-border-solid); font: 450 .9375em/1.3 var(--ui-mono); letter-spacing: -.1px; white-space: pre-wrap; }
:root { --ui-md-code-bg: lch(20% 50 286.91 / .05); }
:root[data-theme="dark"] { --ui-md-code-bg: lch(100% 0 0 / .07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ui-md-code-bg: lch(100% 0 0 / .07); } }
.ui-md pre { margin: 0 0 12px; padding: 12px 16px; border-radius: 6px; background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border); overflow-x: auto; color: var(--ui-label-title); font: 450 12px/20px var(--ui-mono); } /* as the editor draws a code block */
.ui-md pre code { padding: 0; background: none; box-shadow: none; font: inherit; }
.ui-md blockquote { margin: 0 0 12px; padding: 0 0 0 14px; border-left: 2px solid var(--ui-border-solid); color: var(--ui-label-muted); }
/* Linear's callout (a `> [!NOTE]` quote): a tinted box in its kind's colour with an icon,
   the text in the body colour. The editor draws the same box (.ui-ed-callout). */
:is(.ui-md blockquote[data-callout], .ui-ed-callout) { --ui-callout: var(--ui-teal); position: relative; margin: 0 0 12px; padding: 10px 14px 10px 40px; border: 0; border-radius: 8px; background: color-mix(in lch, var(--ui-callout) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in lch, var(--ui-callout) 26%, transparent); color: var(--ui-label-base); }
:is(.ui-md blockquote[data-callout], .ui-ed-callout)[data-callout="tip"] { --ui-callout: var(--ui-green); }
:is(.ui-md blockquote[data-callout], .ui-ed-callout)[data-callout="important"] { --ui-callout: var(--ui-control-primary); }
:is(.ui-md blockquote[data-callout], .ui-ed-callout)[data-callout="warning"] { --ui-callout: var(--ui-orange); }
:is(.ui-md blockquote[data-callout], .ui-ed-callout)[data-callout="caution"] { --ui-callout: var(--ui-red); }
.ui-md blockquote[data-callout]::before { content: ""; position: absolute; top: 14px; left: 14px; width: 16px; height: 16px; background: var(--ui-callout); -webkit-mask: var(--ui-callout-icon) center / 16px no-repeat; mask: var(--ui-callout-icon) center / 16px no-repeat; --ui-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 12.25h4M6.5 14h3M8 2a4.25 4.25 0 0 0-2.5 7.7c.4.3.6.7.6 1.2v.35h3.8v-.35c0-.5.2-.9.6-1.2A4.25 4.25 0 0 0 8 2Z' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ui-md blockquote[data-callout="important"]::before { --ui-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.75 6.5v3a1 1 0 0 0 1 1H5l5.25 2.75V2.75L5 5.5H3.75a1 1 0 0 0-1 1ZM12.5 6.25a2.25 2.25 0 0 1 0 3.5M5.5 10.5l.75 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ui-md blockquote:is([data-callout="warning"], [data-callout="caution"])::before { --ui-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.13 2.5a1 1 0 0 1 1.74 0l5.4 9.5a1 1 0 0 1-.87 1.5H2.6a1 1 0 0 1-.87-1.5Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6.25v3' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='.8'/%3E%3C/svg%3E"); }
:is(.ui-md blockquote[data-callout], .ui-ed-callout-body) > :last-child { margin-bottom: 0; }
.ui-ed-callout-icon { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ui-callout); cursor: pointer; }
.ui-ed-callout-icon:hover { background: color-mix(in lch, var(--ui-callout) 14%, transparent); }
.ui-ed-callout-icon .ui-icon { width: 16px; height: 16px; }
/* ```math and ```mermaid: the formula or diagram (editor/languages.js) */
:is(.ui-md-preview, .ui-ed-code-preview) { overflow-x: auto; color: var(--ui-label-title); text-align: center; }
.ui-md-preview { margin: 0 0 12px; padding: 12px 16px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ui-border); cursor: pointer; }
.ui-ed-code-preview { grid-column: 1 / -1; padding: 12px 16px; border-top: 1px solid var(--ui-border); font: 450 14px/1.4 var(--ui-font); white-space: normal; }
.ui-ed-code-preview[hidden] { display: none; }
:is(.ui-md-preview, .ui-ed-code-preview) svg { max-width: 100%; height: auto; }
:is(.ui-md-preview, .ui-ed-code-preview):is(.is-empty, .is-error) { color: var(--ui-label-faint); font: 450 12px/20px var(--ui-mono); text-align: left; }
:is(.ui-md-preview, .ui-ed-code-preview).is-error { color: var(--ui-red); }
.ui-md hr { height: 1px; margin: 20px 0; border: 0; background: var(--ui-border); }
/* Linear's collapsible section (`+++ Title`): a filled caret in the gutter, closed by default. */
.ui-md details { margin: 0 0 12px; padding-left: 20px; }
.ui-md summary { position: relative; margin-left: -20px; padding-left: 20px; list-style: none; cursor: pointer; }
.ui-md summary::-webkit-details-marker { display: none; }
.ui-md summary::before {
  content: "";
  position: absolute;
  top: calc(.5lh - 8px);
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--ui-label-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.606 11.822c-.49.287-1.106-.067-1.106-.635v-6.45c0-.568.616-.922 1.106-.636l5.529 3.225a.73.73 0 0 1 0 1.271z'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .15s;
}
.ui-md details[open] > summary::before { transform: rotate(90deg); }
.ui-md details[open] > summary { margin-bottom: 8px; }
.ui-md img { max-width: 100%; height: auto; border-radius: var(--ui-radius); }
.ui-md table { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.ui-md th, .ui-md td { padding: 6px 8px; border: 1px solid var(--ui-border); text-align: left; vertical-align: top; }
.ui-md th { background: var(--ui-bg-sub); color: var(--ui-label-title); font-weight: 500; }
.ui-md-placeholder { color: var(--ui-label-faint); }
.ui-md-source { display: none; }
.ui-issue-desc.ui-md[data-editable] { cursor: text; border-radius: var(--ui-radius); }
.ui-issue-desc :is(h1, h2, h3, h4) { font-feature-settings: "calt"; }
.ui-issue-desc.ui-md[data-editable]:focus-visible { outline: none; }
.ui-md-editor { margin: 0 -14px; padding: 10px 14px 8px; }
.ui-md-input { display: block; width: 100%; min-height: 72px; padding: 0; border: 0; background: transparent; color: var(--ui-label-base); font: 450 15px/24px var(--ui-font); letter-spacing: -.0067em; resize: none; outline: none; }
.ui-md-input.is-drop, .ui-composer-input.is-drop, .ui-reply-input.is-drop { background: var(--ui-bg-selected); border-radius: 6px; }
/* A picker opened from the peek (s / p / a on the peeked issue) sits above it. */
.ui-peek-open #ui-overlays .ui-popover { z-index: calc(var(--ui-z-peek) + 1); }
.ui-md-suggest { width: 260px; max-height: 280px; z-index: var(--ui-z-popover); }

/* chips inside markdown: an issue reference, a mention */
.ui-ref { display: inline; padding: 1px 5px 2px; border-radius: 4px; background: var(--ui-bg-shade); color: var(--ui-label-base) !important; text-decoration: none !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ui-ref:hover { background: var(--ui-bg-shade-hover); }
.ui-ref .ui-status { vertical-align: -2px; margin-right: 4px; }
.ui-ref-id { color: var(--ui-label-muted); margin-right: 4px; }
.ui-mention { padding: 1px 4px; border-radius: 4px; background: var(--ui-bg-selected); color: var(--ui-label-title); font-weight: 500; }

/* links attached to the issue */
.ui-links { display: flex; flex-direction: column; margin: 0 -8px 16px; }
.ui-link-row { position: relative; display: flex; align-items: center; border-radius: var(--ui-radius); }
.ui-link-row:hover { background: var(--ui-bg-base-hover); }
.ui-link-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 34px; padding: 0 8px; font-size: 13px; }
.ui-link-icon { display: inline-flex; color: var(--ui-label-muted); }
.ui-link-title { color: var(--ui-label-base); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-link-sub { color: var(--ui-label-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-link-time { margin-left: auto; color: var(--ui-label-faint); font-size: 12px; flex: none; }
.ui-row-remove { flex: none; width: 24px; height: 24px; margin-right: 4px; color: var(--ui-label-muted); opacity: 0; }
.ui-link-row:hover .ui-row-remove, .ui-side-row:hover .ui-row-remove, .ui-row-remove:focus-visible { opacity: 1; }

/* sub-issues */
.ui-subissues { margin: 8px 0; }
.ui-subissues-head { display: flex; align-items: center; gap: 8px; height: 32px; }
/* The toggle starts 6px left of the column, its caret in line with the text above. */
.ui-app .ui-subissues-toggle { display: inline-flex; align-items: center; height: 24px; margin: 0; padding: 0 12px 0 6px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ui-label-base); font: 500 12px/normal var(--ui-font); }
.ui-subissues-head { margin-left: -6px; }
.ui-app .ui-subissues-toggle:hover { background: var(--ui-control-tertiary-hover); color: var(--ui-label-title); }
.ui-subissues-toggle .ui-caret { width: 14px; height: 14px; margin-right: 3px; color: var(--ui-label-muted); transition: transform var(--ui-speed-hover); }
.ui-subissues-toggle[aria-expanded="false"] .ui-caret { transform: rotate(-90deg); }
.ui-subissues-progress { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-label-muted); font: 450 12px/normal var(--ui-font); }
.ui-icon-btn-sm { width: 24px; height: 24px; }
.ui-subissues-head .ui-icon-btn { height: 28px; border-radius: var(--ui-radius-pill); }
.ui-subissues-add { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: var(--ui-radius-pill); background: none; color: var(--ui-label-muted); font: 500 12px/1 var(--ui-font); }
.ui-subissues-add:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-subissues-add .ui-icon { width: 12px; height: 12px; }
/* Rows run from 6px left of the column to its right edge; the status sits 39px in
   (Linear's leading gutter), the title 9px after it. */
.ui-subissues-list { margin: 4px 0 0 -6px; }
.ui-subissue { display: flex; align-items: center; height: 36px; padding: 0; border-radius: var(--ui-radius); color: var(--ui-label-base); font: 500 13px/normal var(--ui-font); cursor: default; }
.ui-subissue > .ui-subissue-status { margin: 0 9px 0 39px; }
.ui-subissue > :not(.ui-subissue-status):not(.ui-subissue-title):not(.ui-row-spacer) { margin-left: 8px; }
.ui-subissue > :last-child { margin-right: 8px; }
.ui-subissue:hover, .ui-subissue.is-focused { background: var(--ui-bg-base-hover); }
.ui-subissue-status { display: inline-flex; flex: none; }
.ui-subissue-id { flex: none; min-width: 0; color: var(--ui-label-muted); font-weight: 450; letter-spacing: -.02em; }
.ui-subissue-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-label-title); text-align: left; }
.ui-subissue-priority, .ui-subissue-assignee { display: inline-flex; flex: none; }
.ui-subissue-chip { color: var(--ui-label-muted); }
/* The sub-issue composer (web/_sub_issue_composer.html), Linear's card: 6px left of the
   column, the status and a 13px/600 title, the 15px description, then the pills and, at
   the right, the paperclip, Cancel and Create. */
.ui-subissue-slot:empty { display: none; }
.ui-subissue-composer { display: flex; flex-direction: column; margin: 8px 0 0 -6px; padding: 6px 10px; border-radius: var(--ui-radius); background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border-faint), 0 6px 18px rgba(0, 0, 0, .02), 0 3px 9px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .04); }
.ui-subissue-composer:focus-within { box-shadow: inset 0 0 0 1px var(--ui-control-ring-hover), 0 6px 18px rgba(0, 0, 0, .02), 0 3px 9px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .04); }
.ui-subissue-composer-head { display: flex; align-items: center; gap: 4px; padding-top: 2px; }
.ui-app .ui-subissue-composer-status { width: 24px; height: 24px; margin-left: -3px; padding: 0; border-radius: var(--ui-radius-pill); }
.ui-subissue-composer-status [data-web-prop-icon] { display: inline-flex; }
.ui-subissue-composer-status .ui-icon { width: 14px; height: 14px; }
.ui-subissue-composer-title { flex: 1; min-width: 0; height: 24px; padding: 0; border: 0; background: none; color: var(--ui-label-title); font: 600 13px/24px var(--ui-font); outline: none; }
.ui-subissue-composer-desc { display: block; width: 100%; min-height: 0; padding: 6px 0 12px; border: 0; background: none; color: var(--ui-label-base); font: 450 15px/20px var(--ui-font); resize: none; outline: none; }
.ui-subissue-composer .ui-ed-host { padding: 6px 0 12px; }
.ui-ed-subissue .ui-ed-content { min-height: 20px; max-height: 320px; overflow-y: auto; font-size: 15px; line-height: 20px; }
.ui-subissue-composer .ui-modal-files { padding: 0 0 8px; }
.ui-subissue-composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 4px 10px; }
.ui-subissue-composer-foot .ui-row-spacer { flex: 1 1 8px; min-width: 8px; }
.ui-subissue-composer-foot .ui-pill { font-weight: 500; }
.ui-subissue-composer-foot .ui-team-icon { width: 14px; height: 14px; }
.ui-subissue-composer-foot .ui-modal-error { flex-basis: 100%; order: 1; }
.ui-subissue-composer-foot [data-web-prop="parent"] { display: none; } /* the parent is the issue it opens on */
.ui-app .ui-subissue-composer-foot .ui-btn:not(.ui-icon-btn) { height: 24px; padding: 0 8px; border-radius: var(--ui-radius-pill); font: 500 12px/1 var(--ui-font); }
.ui-subissue-composer-foot .ui-icon-btn { border-radius: var(--ui-radius-pill); }

/* the panel's row lists: pull requests, relations */
/* Each row a fit-content pill like the property buttons, leaving room on its right for
   the hover remove button. */
.ui-side-rows { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ui-side-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 100%; }
.ui-side-row.is-folded { display: none; }
.ui-app .ui-side-row-main { position: relative; display: inline-flex; align-items: center; column-gap: 6px; width: fit-content; max-width: calc(100% - 38px); min-width: 0; height: 28px; padding: 0 10px 0 6px; border-radius: var(--ui-radius-pill); color: var(--ui-label-base); font: 500 13px/normal var(--ui-font); white-space: nowrap; cursor: default; transition: background-color var(--ui-speed-hover); }
.ui-app .ui-side-row-main:hover { background: var(--ui-control-tertiary-hover); }
.ui-side-row-main > .ui-status { width: 14px; height: 14px; margin-left: 1px; }
.ui-app .ui-pr .ui-side-row-main { padding: 0 6px; column-gap: 0; }
.ui-pr .ui-side-row-main > .ui-icon { margin-right: 6px; }
.ui-side-row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a pull request's reviewers and checks, after its title (github/_pr_review.html) */
.ui-pr-review { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; flex: none; }
.ui-pr-reviewer { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ui-control-tertiary-hover); color: var(--ui-label-muted); font: 600 8px/1 var(--ui-font); box-shadow: 0 0 0 1.5px var(--ui-label-faint, var(--ui-border)); }
.ui-pr-reviewer.is-approved { box-shadow: 0 0 0 1.5px var(--ui-green); }
.ui-pr-reviewer.is-changes_requested { box-shadow: 0 0 0 1.5px var(--ui-red); }
.ui-pr-review .ui-pr-check { width: 14px; height: 14px; margin: 0; color: var(--ui-label-muted); }
.ui-pr-review .ui-pr-check.is-success { color: var(--ui-green); }
.ui-pr-review .ui-pr-check.is-failure { color: var(--ui-red); }
.ui-pr-review .ui-pr-check.is-pending { color: var(--ui-yellow); }
/* a branch rule's card head (github/_team_settings.html) */
.ui-github-rule-head { display: inline-flex; align-items: center; gap: 8px; }
.ui-side-row .ui-row-remove { position: absolute; right: 2px; top: 2px; }
.ui-app .ui-side-more { display: inline-flex; align-items: center; column-gap: 6px; min-width: 0; height: 28px; padding: 0 10px 0 6px; border: 0; border-radius: var(--ui-radius-pill); background: none; color: var(--ui-label-muted); font: 500 13px/normal var(--ui-font); text-align: left; white-space: nowrap; }
.ui-app .ui-side-more:hover { background: var(--ui-control-tertiary-hover); color: var(--ui-label-base); }
.ui-side-more .ui-icon { width: 16px; height: 16px; }
.ui-prop.is-static { cursor: default; }
.ui-prop.is-static:hover { background: transparent; }
.ui-prop.is-overdue, .ui-chip.is-overdue { color: var(--ui-red); }
.ui-prop-latent { display: block; height: 0; margin-top: -7px; overflow: hidden; }
.ui-prop-labels:not(.is-empty) > .ui-icon { display: none; }
.ui-prop-tree { position: relative; padding-left: 23px; }
.ui-prop-tree::before { content: ""; position: absolute; left: 13px; top: -6px; width: 10px; height: 20px; border-left: 1px solid var(--ui-border-solid); border-bottom: 1px solid var(--ui-border-solid); border-bottom-left-radius: 6px; }

/* activity: heading, folded runs, threads */
.ui-activity-head-actions { display: flex; align-items: center; gap: 6px; }
.ui-app .ui-activity-head-actions > .ui-btn:not(.ui-icon-btn) { justify-content: center; flex: none; min-width: 32px; height: 32px; padding: 0 12px; column-gap: 0; row-gap: 0; border: 1px solid transparent; border-radius: 16px; color: var(--ui-label-muted); font: 500 12px/normal var(--ui-font); }
.ui-app .ui-activity-head-actions > .ui-btn:not(.ui-icon-btn):hover { color: var(--ui-label-base); }
.ui-avatar-stack { display: inline-flex; align-items: center; padding: 0 2px; border: 0; background: none; }
.ui-avatar-stack .ui-avatar { box-shadow: 0 0 0 2px var(--ui-bg-base); }
.ui-avatar-stack .ui-avatar + .ui-avatar { margin-left: -4px; }
.ui-avatar-more { margin-left: 4px; color: var(--ui-label-muted); font-size: 12px; }
.ui-activity-run { display: flex; flex-direction: column; }
.ui-activity-run .ui-activity-item:first-child::before { display: none; }
.ui-activity-text { flex: 1; min-width: 0; margin: -3px -4px; padding: 4px; overflow: hidden; overflow-wrap: anywhere; }
.ui-activity-text b { color: inherit; font-weight: 500; }
.ui-activity-sep { color: var(--ui-label-faint); }
.ui-activity-ref { color: inherit; }
.ui-activity-ref:hover b { text-decoration: underline; }
.ui-activity-item .ui-activity-icon > .ui-icon { width: 14px; height: 14px; color: var(--ui-label-muted); }
.ui-activity-fold { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 0; border: 0; background: none; color: var(--ui-label-muted); font: 450 12px/16.8px var(--ui-font); text-align: left; }
.ui-activity-fold:hover { color: var(--ui-label-title); }
.ui-activity-fold .ui-icon { width: 14px; height: 14px; margin: 0 1px 0 11px; }
.ui-thread { padding: 0; margin: 10px -8px; overflow: clip; border: 1px solid var(--ui-border-faint); box-shadow: var(--ui-shadow-low); }
.ui-thread-body { display: flex; flex-direction: column; }
.ui-thread-resolved { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; border: 0; background: none; color: var(--ui-label-muted); font: 450 13px/1 var(--ui-font); text-align: left; }
.ui-thread-resolved .ui-icon { color: var(--ui-status-completed); }
.ui-thread-resolved b { color: var(--ui-label-base); font-weight: 500; }
.ui-thread.is-resolved .ui-thread-resolved + .ui-thread-body:not([hidden]) { border-top: 1px solid var(--ui-border-faint); }
.ui-comment-item { padding: 12px 16px; scroll-margin: 80px; }
.ui-comment-item + .ui-comment-item { padding-top: 4px; }
.ui-comment-item.is-highlighted { animation: ui-comment-flash 2.4s var(--ui-ease-out-quad); }
@keyframes ui-comment-flash { 0%, 30% { background: var(--ui-bg-selected); } 100% { background: transparent; } }
.ui-comment-head .ui-activity-time:hover { text-decoration: underline; }
.ui-comment-menu { width: 24px; height: 24px; margin: -4px -6px -4px 0; color: var(--ui-label-muted); opacity: 0; }
.ui-comment-item:hover .ui-comment-menu, .ui-comment-menu:focus-visible, .ui-comment-menu[aria-expanded="true"] { opacity: 1; }
.ui-comment-body.ui-md { font: 450 15px/24px var(--ui-font); color: var(--ui-label-base); }
.ui-comment-edit { margin-top: 4px; }
.ui-reply { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px 8px 16px; border-top: 1px solid var(--ui-border-faint); }
.ui-reply .ui-avatar { width: 18px; height: 18px; }
.ui-reply-input { flex: 1; min-width: 0; max-height: 240px; padding: 3px 0; border: 0; background: transparent; color: var(--ui-label-base); font: 450 14px/20px var(--ui-font); resize: none; outline: none; }
.ui-reply .ui-icon-btn { width: 24px; height: 24px; color: var(--ui-label-muted); }
/* An agent session's card in an issue's activity (templates/agents/_card.html), as
   Linear's: who started it, then its state and the agent's latest words; it opens the chat. */
.ui-session-card { display: block; margin: 10px -8px; overflow: clip; border: 1px solid var(--ui-border-faint); border-radius: 8px; background: var(--ui-bg-base); box-shadow: var(--ui-shadow-low); color: var(--ui-label-muted); font: 500 13px/normal var(--ui-font); text-decoration: none; }
.ui-session-card:hover .ui-session-card-preview { color: var(--ui-label-muted); }
.ui-session-card-head, .ui-session-card-state { display: flex; align-items: center; gap: 8px; height: 40px; padding: 6px 16px; }
.ui-session-card-head { gap: 4px; }
.ui-session-card-head .ui-avatar { width: 18px; height: 18px; margin-right: 4px; font-size: 8px; }
.ui-session-card-head b, .ui-session-card-label { color: var(--ui-label-base); font-weight: 500; white-space: nowrap; }
.ui-session-card-head time { margin-left: 4px; white-space: nowrap; }
.ui-session-card-state { border-top: 1px solid var(--ui-border-faint); }
.ui-session-card-label { color: var(--ui-label-muted); }
.ui-session-card-preview { flex: 1; min-width: 0; overflow: hidden; color: var(--ui-label-faint); text-overflow: ellipsis; white-space: nowrap; }
.ui-session-card-state > .ui-icon { flex: none; width: 16px; height: 16px; color: var(--ui-label-muted); }
.ui-session-dot { flex: none; width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: var(--ui-label-faint); }
.ui-session-dot.is-pending, .ui-session-dot.is-active { background: var(--ui-status-started); animation: ui-session-pulse 1.2s ease-in-out infinite; }
.ui-session-dot.is-awaiting_input { background: var(--ui-status-triage); }
.ui-session-dot.is-complete { background: var(--ui-status-completed); }
.ui-session-dot.is-error { background: var(--ui-red); }
/* An ask's synced thread (apps.asks): whom the conversation is with, over what. */
.ui-synced-head { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px; border-bottom: 1px solid var(--ui-border-faint); background: var(--ui-bg-shade); color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-synced-head .ui-icon { flex: none; }
.ui-synced-who { display: inline-flex; gap: 6px; min-width: 0; overflow: hidden; margin-left: auto; text-overflow: ellipsis; white-space: nowrap; }
.ui-synced-who b { color: var(--ui-label-base); font-weight: 500; }
.ui-synced-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--ui-border-faint); color: var(--ui-label-muted); font: 450 12px/1.4 var(--ui-font); }
.ui-synced-note .ui-icon { flex: none; }
.ui-ask-requester { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; color: var(--ui-label-base); font: 450 13px/18px var(--ui-font); }
.ui-ask-requester > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ui-ask-requester a { overflow: hidden; color: var(--ui-label-muted); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.ui-ask-source { display: inline-flex; align-items: center; gap: 6px; height: 22px; margin-left: 8px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: 11px; color: var(--ui-label-muted); font: 500 12px/1 var(--ui-font); vertical-align: middle; }
@keyframes ui-session-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .ui-session-dot { animation: none !important; } }

/* A menu row under the one above it (an assignee's delegate), as Linear's: indented,
   joined by a line, with the word "Agent" outlined after its name. */
.ui-menu-item.is-nested { position: relative; padding-left: 30px; }
.ui-menu-item.is-nested::before { content: ""; position: absolute; left: 16px; top: -4px; width: 9px; height: 18px; border-left: 1px solid var(--ui-border-solid); border-bottom: 1px solid var(--ui-border-solid); border-bottom-left-radius: 6px; }
.ui-menu-badge { flex: none; margin-left: 6px; padding: 1px 5px; border: 1px solid var(--ui-border); border-radius: 4px; color: var(--ui-label-muted); font: 500 11px/14px var(--ui-font); }

/* The conversation with an agent that is in a comment thread (a mention): its state,
   above the reply box, opening its chat. */
.ui-thread-agent { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-top: 1px solid var(--ui-border-faint); color: var(--ui-label-muted); font: 500 12px/normal var(--ui-font); text-decoration: none; }
.ui-thread-agent:hover { color: var(--ui-label-title); }
.ui-thread-agent .ui-session-dot { margin: 0 3px 0 4px; }
.ui-thread-agent-name { flex: 1; color: var(--ui-label-faint); }
.ui-thread-agent > .ui-icon { flex: none; width: 14px; height: 14px; }

/* The Agent page (templates/agents/agent.html): the viewer's sessions, as Linear lists chats. */
.ui-agent-page { flex: 1; min-height: 0; overflow-y: auto; padding: 48px 16px; }
.ui-agent-list { display: flex; flex-direction: column; width: 100%; max-width: 584px; margin: 0 auto; }
.ui-agent-list h2 { margin: 0 0 12px; padding: 0 14px; color: var(--ui-label-muted); font: 500 12px/normal var(--ui-font); }
.ui-agent-row { display: flex; align-items: center; gap: 8px; height: 27px; padding: 0 14px; border-radius: 6px; color: var(--ui-label-base); font: 450 13px/normal var(--ui-font); text-decoration: none; }
.ui-agent-row:hover { background: var(--ui-bg-base-hover); }
.ui-agent-row .ui-session-dot { margin: 0 2px 0 0; }
.ui-agent-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-agent-row-meta { flex: none; color: var(--ui-label-muted); font-weight: 500; white-space: nowrap; }
.ui-agent-empty { padding: 0 14px; color: var(--ui-label-muted); font: 450 13px/20px var(--ui-font); }

/* An agent session's own view (templates/agents/session.html), as Linear's: the issue's
   pull requests on the left, the chat on the right. */
.ui-chat-page { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 826px); min-height: 0; }
.ui-chat-changes { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 24px; overflow-y: auto; }
.ui-chat-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--ui-label-muted); font: 450 14px/normal var(--ui-font); }
.ui-chat-empty b { color: var(--ui-label-title); font: 600 15px/normal var(--ui-font); }
.ui-chat-pulls { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 480px; }
.ui-chat-pull { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ui-border-faint); border-radius: 8px; background: var(--ui-bg-base); box-shadow: var(--ui-shadow-low); color: var(--ui-label-base); font: 450 13px/18px var(--ui-font); text-decoration: none; }
.ui-chat-pull .ui-icon { flex: none; width: 16px; height: 16px; color: var(--ui-label-muted); }
.ui-chat-pull-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ui-chat-pull-text b { overflow: hidden; color: var(--ui-label-title); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-chat-pull-text span { color: var(--ui-label-muted); font-size: 12px; }
.ui-chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 12px 12px 8px 0; border: 1px solid var(--ui-border-faint); border-radius: 8px; background: var(--ui-bg-base); box-shadow: var(--ui-shadow-low); }
.ui-chat-head { display: flex; flex: none; align-items: center; gap: 8px; height: 48px; padding: 0 16px; color: var(--ui-label-muted); font: 500 13px/normal var(--ui-font); }
.ui-chat-head .ui-avatar { width: 18px; height: 18px; font-size: 8px; }
.ui-chat-head b { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ui-label-title); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ui-chat-head .ui-session-dot { margin: 0 0 0 8px; }
.ui-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 12px; }
.ui-chat-turns { display: flex; flex-direction: column; gap: 26px; }
.ui-chat-turn { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ui-chat-start { margin: 0; color: var(--ui-label-muted); font: 500 12px/normal var(--ui-font); }
.ui-chat-link { padding: 0; border: 0; background: none; color: var(--ui-label-faint); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.ui-chat-link:hover { color: var(--ui-label-title); }
.ui-chat-instructions, .ui-chat-detail pre { max-height: 320px; margin: 0; padding: 8px 10px; overflow: auto; border-radius: 6px; background: var(--ui-bg-shade); color: var(--ui-label-base); font: 12px/17px var(--ui-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-chat-bubble { display: flex; flex-direction: column; gap: 4px; align-self: flex-end; max-width: 80%; padding: 8px 12px; border-radius: 8px; background: var(--ui-bg-shade); color: var(--ui-label-base); font: 450 13px/20.8px var(--ui-font); }
.ui-chat-bubble-head { display: flex; align-items: center; gap: 6px; padding-top: 2px; font: 500 12px/normal var(--ui-font); }
.ui-chat-bubble-head .ui-avatar { width: 14px; height: 14px; font-size: 6.5px; }
.ui-chat-bubble-head b { color: var(--ui-label-base); font-weight: 500; }
.ui-chat-bubble-head time { color: var(--ui-label-faint); }
.ui-chat-bubble .ui-md, .ui-chat-answer.ui-md { font: 450 13px/20.8px var(--ui-font); color: var(--ui-label-base); }
.ui-chat-bubble-note { margin: 0; color: var(--ui-label-faint); font: 450 12px/16px var(--ui-font); }
.ui-chat-bubble.is-failed .ui-chat-bubble-note, .ui-chat-answer.is-failed, .ui-chat-thought.is-failed { color: var(--ui-red); }
.ui-chat-worked { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; height: 20px; margin: 0 -8px; padding: 0 8px; border: 0; border-radius: 4px; background: none; color: var(--ui-label-muted); font: 500 12px/normal var(--ui-font); }
.ui-chat-worked:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-chat-worked .ui-icon, .ui-chat-action-line .ui-icon { flex: none; width: 12px; height: 12px; transition: transform 0.12s; }
.ui-chat-worked[aria-expanded="true"] .ui-icon, .ui-chat-action-line[aria-expanded="true"] .ui-icon { transform: rotate(90deg); }
.ui-chat-turn[data-turn-live] .ui-chat-worked span::after { content: "…"; }
.ui-chat-worked.is-private { margin: 0; padding: 0; cursor: default; }
.ui-chat-worked.is-private:hover { background: none; color: var(--ui-label-muted); }
.ui-chat-marker time { color: var(--ui-label-faint); }
.ui-chat-steps { display: flex; flex-direction: column; gap: 12px; padding: 0 10px; }
.ui-chat-thought { padding-left: 12px; border-left: 2px solid var(--ui-border-solid, var(--ui-border)); color: var(--ui-label-muted); font: 450 12px/19.2px var(--ui-font); overflow-wrap: anywhere; }
.ui-chat-thought .ui-md { color: inherit; font: inherit; }
.ui-chat-thought .ui-md > :first-child { margin-top: 0; }
.ui-chat-thought .ui-md > :last-child { margin-bottom: 0; }
.ui-chat-action-line { display: flex; align-items: center; gap: 6px; width: calc(100% + 16px); height: 20px; margin: 0 -8px; padding: 0 8px; border: 0; border-radius: 4px; background: none; color: var(--ui-label-muted); font: 500 12px/normal var(--ui-font); text-align: left; }
.ui-chat-action-line:hover { background: var(--ui-bg-base-hover); }
.ui-chat-tool { flex: none; font: 500 12px/normal var(--ui-mono); }
.ui-chat-action-line code { flex: 1; min-width: 0; overflow: hidden; color: var(--ui-label-muted); font: 12px/normal var(--ui-mono); text-overflow: ellipsis; white-space: nowrap; }
.ui-chat-action.is-failed code { color: var(--ui-red); }
.ui-chat-action.is-running .ui-chat-tool::after { content: "…"; }
.ui-chat-detail { padding: 6px 0 2px; }
.ui-chat-detail pre.is-failed { color: var(--ui-red); }
.ui-session-part { margin: 6px 0 2px; color: var(--ui-label-faint); font: 500 11px/16px var(--ui-font); }
.ui-chat-answer > :first-child { margin-top: 0; }
.ui-chat-answer > :last-child { margin-bottom: 0; }
.ui-chat-latest { position: absolute; left: 50%; bottom: 96px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; transform: translateX(-50%); border: 1px solid var(--ui-border); border-radius: 13px; background: var(--ui-bg-base); box-shadow: var(--ui-shadow-low); color: var(--ui-label-base); font: 500 12px/normal var(--ui-font); }
.ui-chat-latest .ui-icon { width: 12px; height: 12px; }
/* Linear's agent composer (measured): 1px border, radius 8, padding 6/8/8/2, the low
   shadow, border-color .1s ease-out-quart; focus changes nothing. */
.ui-chat-composer { display: flex; flex: none; flex-direction: column; gap: 6px; margin: 0 8px 8px; padding: 6px 8px 8px 2px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-bg-base); box-shadow: var(--ui-shadow-low); transition: border-color .1s var(--ui-ease-out-quart); }
.ui-chat-hint { margin: 0; padding: 0 6px; color: var(--ui-label-faint); font: 450 12px/normal var(--ui-font); }
.ui-chat-composer textarea { min-height: 24px; max-height: 240px; padding: 2px 6px; border: 0; background: transparent; color: var(--ui-label-base); font: 450 13px/20.8px var(--ui-font); resize: none; outline: none; }
.ui-chat-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ui-chat-composer-actions .ui-icon-btn { width: 24px; height: 24px; color: var(--ui-label-muted); }
.ui-chat-stop { height: 24px; padding: 0 8px; font-size: 12px; }
.ui-chat-readonly { flex: none; margin: 0; padding: 12px 18px 16px; color: var(--ui-label-faint); font: 450 12px/normal var(--ui-font); }
@media (max-width: 900px) {
  .ui-chat-page { grid-template-columns: minmax(0, 1fr); }
  .ui-chat-changes { display: none; }
  .ui-chat { margin: 8px; }
}

/* ---- Reviews: a pull request's changes (templates/reviews; docs/reviews.md) ----
   Linear's Diff tab, measured on its live page: a toolbar card, then each file as a card
   across the width (a sticky 36px header over its rows), the file list panel at the left
   when Files is on. The pane fills the review page, and the left of an agent session's
   chat. Colours Linear sets for the diff alone are the --diff-* tokens below. */
.ui-review {
  --diff-page: var(--ui-bg-base);
  --diff-card: lch(100% 0 282);
  --diff-line: lch(97.3% 0 282);
  --diff-rule: lch(86.5% 0 282);
  --diff-input-line: lch(84.44% 0 282);
  --diff-text: lch(19.588% 1.25 282);
  --diff-title: lch(9.794% 0 282);
  --diff-control: lch(20% 1 282);
  --diff-muted: lch(40% 1 282);
  --diff-faint: lch(64.64% 1.25 282);
  --diff-count: lch(66% 1 282);
  --diff-hover: lch(96.914% 0 282);
  --diff-pressed: lch(95.543% 0 282);
  --diff-add: lch(97.94% 3.829 148.469);
  --diff-del: lch(97.112% 3.635 17.957);
  --diff-add-mark: lch(94.733% 9.903 148.136);
  --diff-del-mark: lch(92.62% 9.55 18.428);
  --diff-add-no: lch(62.32% 31.708 142.675);
  --diff-del-no: lch(57.32% 36.322 28.057);
  --diff-add-bar: lch(60% 64.37 141.95);
  --diff-del-bar: lch(50% 73 29);
  --diff-add-count: lch(50% 80 141.95);
  --diff-del-count: lch(50% 80 29);
  --diff-box-line: lch(54.1% 0 282);
  --diff-pill: lch(95.542% 0.067 281.853);
  --diff-path-hover: lch(96.914% 0 282);
  --diff-pill-text: lch(20% 1 282);
  --diff-tok-comment: lch(39.176% 1.25 282);
  --diff-tok-key: lch(48.4% 72.9 338.1);
  --diff-tok-plain: lch(19.5% 1.3 285.3);
  --diff-tok-param: lch(52.7% 72.3 58.2);
  --diff-tok-literal: lch(48.5% 64.5 285.7);
  --diff-tok-call: lch(47.7% 31.2 196.5);
  --diff-tok-keyword: lch(47% 68 308.2);
  --diff-tok-type: lch(57.9% 43.3 246.2);
  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--diff-page);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ui-review {
    --diff-page: lch(5.52% 0.4 272); --diff-card: lch(9.232% 0.85 272); --diff-line: lch(13.553% 1.93 272);
    --diff-rule: lch(20.032% 1.93 272); --diff-input-line: lch(24% 1.93 272); --diff-text: lch(90.451% 1.2 272);
    --diff-title: #fff; --diff-control: #e4e5e7; --diff-muted: #98999c; --diff-faint: #565759; --diff-count: #5c5d5f;
    --diff-hover: #2b2b2d; --diff-pressed: #2b2b2d; --diff-add: lch(14.102% 7.717 153.557); --diff-del: lch(13.958% 8.596 15.613);
    --diff-add-mark: #1c3724; --diff-del-mark: #53282a; --diff-add-no: lch(52.088% 31.802 142.777);
    --diff-del-no: lch(51.088% 36.232 28.155); --diff-add-bar: lch(67.2% 64.37 141.95); --diff-del-bar: lch(65.2% 73 29);
    --diff-add-count: lch(80% 80 141.95); --diff-del-count: lch(80% 80 29); --diff-box-line: lch(52.433% 1.93 272);
    --diff-pill: lch(14.256% 0.892 271.982); --diff-pill-text: lch(90.826% 1.425 272); --diff-path-hover: #212223;
    --diff-tok-comment: lch(61.803% 1.2 272); --diff-tok-key: lch(75.5% 46.4 334.6); --diff-tok-plain: lch(90.4% 36 81.9);
    --diff-tok-param: lch(81.6% 37.9 64.9); --diff-tok-literal: lch(69.1% 48.3 280.7); --diff-tok-call: lch(82.2% 29.3 197.6);
    --diff-tok-keyword: lch(71.5% 52.1 306.8); --diff-tok-type: lch(78.7% 34.3 234.6);
  }
}
:root[data-theme="dark"] .ui-review {
    --diff-page: lch(5.52% 0.4 272); --diff-card: lch(9.232% 0.85 272); --diff-line: lch(13.553% 1.93 272);
    --diff-rule: lch(20.032% 1.93 272); --diff-input-line: lch(24% 1.93 272); --diff-text: lch(90.451% 1.2 272);
    --diff-title: #fff; --diff-control: #e4e5e7; --diff-muted: #98999c; --diff-faint: #565759; --diff-count: #5c5d5f;
    --diff-hover: #2b2b2d; --diff-pressed: #2b2b2d; --diff-add: lch(14.102% 7.717 153.557); --diff-del: lch(13.958% 8.596 15.613);
    --diff-add-mark: #1c3724; --diff-del-mark: #53282a; --diff-add-no: lch(52.088% 31.802 142.777);
    --diff-del-no: lch(51.088% 36.232 28.155); --diff-add-bar: lch(67.2% 64.37 141.95); --diff-del-bar: lch(65.2% 73 29);
    --diff-add-count: lch(80% 80 141.95); --diff-del-count: lch(80% 80 29); --diff-box-line: lch(52.433% 1.93 272);
    --diff-pill: lch(14.256% 0.892 271.982); --diff-pill-text: lch(90.826% 1.425 272); --diff-path-hover: #212223;
    --diff-tok-comment: lch(61.803% 1.2 272); --diff-tok-key: lch(75.5% 46.4 334.6); --diff-tok-plain: lch(90.4% 36 81.9);
    --diff-tok-param: lch(81.6% 37.9 64.9); --diff-tok-literal: lch(69.1% 48.3 280.7); --diff-tok-call: lch(82.2% 29.3 197.6);
    --diff-tok-keyword: lch(71.5% 52.1 306.8); --diff-tok-type: lch(78.7% 34.3 234.6);
}
.ui-review-page { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ui-review-tabs { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 24px 2px 18px; }
.ui-review-tabs .ui-diff-counts { margin-left: 2px; }
.ui-review > .ui-chat-empty { flex: 1; justify-content: center; }
.ui-review-head { flex: none; display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 14px 24px 2px; }
.ui-review-pull { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ui-label-title); font: 600 15px/22px var(--ui-font); text-decoration: none; }
.ui-review-pull b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ui-review-pull .ui-icon { flex: none; width: 16px; height: 16px; }
.ui-review-meta { flex: none; color: var(--ui-label-muted); font: 450 12px/18px var(--ui-font); white-space: nowrap; }
.ui-review-meta code { padding: 0; background: none; font: 450 11.5px/18px var(--ui-mono); }

/* The toolbar: a 36px card, 6px 10px 6px 12px in; its buttons are 24px pills. */
.ui-review-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px;
  margin: 0 10px 8px 14px; padding: 6px 10px 6px 12px; border: 1px solid var(--diff-line); border-radius: 8px;
  background: var(--diff-card); color: var(--diff-title); font: 400 16px/24px var(--ui-font); overflow: hidden;
}
.ui-review-bar-start, .ui-review-bar-end { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-review-bar-end { gap: 8px; }
.ui-review-tool {
  flex: none; display: inline-flex; align-items: center; height: 24px; margin: 0; padding: 0 10px 0 6px;
  border: 1px solid transparent; border-radius: 9999px; background: none; color: var(--diff-muted);
  font: 500 12px/normal var(--ui-font); white-space: nowrap; cursor: default;
}
/* Linear's buttons: border, background, colour and opacity ease back over .15s and
   change at once while hovered or open. */
.ui-review :is(.ui-review-tool, .ui-diff-reviewed, .ui-diff-actions, .ui-diff-gap-btn, button.ui-diff-gap-all, .ui-diff-view) {
  transition: border var(--ui-speed-hover), background-color var(--ui-speed-hover), color var(--ui-speed-hover), opacity var(--ui-speed-hover);
}
.ui-review :is(.ui-review-tool, .ui-diff-reviewed, .ui-diff-actions, .ui-diff-gap-btn, button.ui-diff-gap-all, .ui-diff-view):is(:hover, [aria-expanded="true"]) { transition-duration: 0s; }
.ui-review .ui-review-tool > span:not(.ui-review-tool-count), .ui-review .ui-diff-reviewed > span:last-child { transition: all .15s; }
.ui-review :is(.ui-review-tool, .ui-diff-actions) .ui-icon { overflow: visible; transition: fill var(--ui-speed-hover), stroke var(--ui-speed-hover); }
.ui-review :is(.ui-review-tool, .ui-diff-actions):is(:hover, [aria-expanded="true"]) .ui-icon { color: var(--diff-title); transition-duration: 0s; }
.ui-review-tool > .ui-icon { flex: none; width: 14px; height: 14px; margin-right: 6px; color: var(--diff-muted); }
.ui-review-tool > span:not(.ui-review-tool-count) { color: var(--diff-muted); font-weight: 450; text-align: left; }
.ui-review-tool-count { margin-left: 6px; color: var(--diff-count); font-variant-numeric: tabular-nums; text-align: right; }
.ui-review-tool:hover, .ui-review-tool[aria-expanded="true"] { background: var(--diff-hover); }
.ui-review-tool[aria-pressed="true"] { background: var(--diff-pressed); }
.ui-review-tool[aria-pressed="true"] > span:not(.ui-review-tool-count) { color: var(--diff-control); }
.ui-review-tool.is-icon { justify-content: center; width: 28px; height: 28px; padding: 0 2px; color: var(--diff-control); }
.ui-review-tool.is-icon > .ui-icon { margin: 0; }
.ui-review-tool[hidden] { display: none; }

.ui-review-body { flex: 1; display: flex; min-height: 0; }
.ui-review-files { position: relative; flex: 1; min-width: 0; min-height: 0; padding: 0 0 24px 14px; overflow-y: auto; }
.ui-review.has-tree .ui-review-files { padding-left: 0; }

/* The file list panel (Files): 280px with its 12px gutter; a 28px filter, 28px rows. */
.ui-review-tree { flex: none; display: flex; flex-direction: column; width: 280px; min-height: 0; margin-left: 14px; padding: 0 12px 0 0; overflow: hidden; background: var(--diff-page); }
.ui-review-tree[hidden] { display: none; }
.ui-review-filter { position: relative; flex: none; display: flex; height: 28px; margin: 4px 0 6px; }
.ui-review-filter .ui-icon { position: absolute; top: 7px; left: 8px; width: 14px; height: 14px; color: var(--ui-label-muted); pointer-events: none; }
.ui-review-filter input {
  width: 100%; height: 28px; margin: 0; padding: 6px 28px 6px 26px; border: 1px solid var(--diff-input-line); border-radius: 8px;
  background: var(--diff-page); color: var(--diff-title); font: 450 12px/normal var(--ui-font); outline: none;
}
.ui-review-filter input:focus { border-color: var(--ui-focus-color); box-shadow: none; }
.ui-review-tree-list { display: flex; flex-direction: column; min-height: 0; padding-bottom: 16px; overflow-y: auto; }
.ui-review-tree-file {
  flex: none; display: flex; align-items: center; gap: 8px; height: 28px; margin: 0 0 0 -5px; padding: 5px;
  border-radius: 5px; color: var(--diff-text); font: 450 13px/19.5px var(--ui-font); text-decoration: none; white-space: nowrap;
}
.ui-review-tree-file:hover { background: var(--diff-hover); }
.ui-review-tree-file.is-current { background: var(--diff-pressed); }
.ui-review-tree-file[hidden] { display: none; }
.ui-review-tree-file > .ui-icon { flex: none; width: 14px; height: 14px; }
.ui-review-tree-name { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.ui-review-tree-name b { flex: none; max-width: 80%; overflow: hidden; color: var(--diff-text); font: 450 12px/normal var(--ui-font); text-overflow: ellipsis; }
.ui-review-tree-name span { min-width: 0; overflow: hidden; color: var(--diff-muted); font: 450 12px/normal var(--ui-font); text-overflow: ellipsis; }
.ui-review-tree-file.is-reviewed b { color: var(--diff-muted); }
.ui-review-tree-file .ui-diff-counts { margin: 0; }
.ui-review-tree-dir { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 5px; color: var(--diff-muted); font: 450 12px/normal var(--ui-font); white-space: nowrap; }
.ui-review-tree-dir .ui-icon { width: 14px; height: 14px; }
.ui-review-tree-none { margin: 8px; color: var(--diff-faint); font: 450 12px/normal var(--ui-font); }
.ui-review-group { margin: 4px 0 8px; color: var(--diff-muted); font: 500 12px/24px var(--ui-font); }

/* The strip at the left of the files: a dash per file, the one in view dark; hover
   lists the files. */
.ui-review-strip { position: sticky; top: 50%; z-index: 31; float: left; width: 0; height: 0; }
.ui-review-strip-dashes { position: absolute; left: -18px; display: flex; flex-direction: column; width: 22px; padding: 4px 8px; transform: translateY(-50%); }
.ui-review-strip-dash { display: flex; align-items: center; justify-content: flex-end; width: 6px; height: 12px; }
.ui-review-strip-dash span { width: 6px; height: 1px; background: var(--diff-faint); }
.ui-review-strip-dash.is-near span { background: var(--ui-label-muted); }
.ui-review-strip-dash.is-current span { background: var(--diff-title); }
.ui-review.has-tree .ui-review-strip { display: none; }
.ui-review-strip-pop { width: 262px; max-height: 520px; padding: 4px 0; overflow-y: auto; }
.ui-review-strip-pop-head { display: flex; align-items: center; height: 32px; padding: 0 12px; color: var(--ui-label-muted); font: 500 12px/normal var(--ui-font); }

/* A changed file: Linear's card. The header sticks (z 30) on a band of the page's
   colour, so rows scrolling under it never show above its rounded top. */
.ui-review-list { display: flex; flex-direction: column; }
.ui-diff-file { position: relative; flex: none; margin: 0 0 8px; border-radius: 8px; scroll-margin-top: 0; }
.ui-diff-file[hidden] { display: none; }
.ui-diff-head { position: sticky; top: 0; z-index: 30; height: 36px; background: var(--diff-page); }
.ui-diff-head-in {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 6px 12px 6px 16px;
  border: 1px solid var(--diff-line); border-radius: 8px 8px 0 0; background: var(--diff-card); white-space: nowrap;
}
.ui-diff-file.is-folded .ui-diff-head-in { border-radius: 8px; }
.ui-diff-head-start { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ui-diff-head-end { flex: none; display: flex; align-items: center; gap: 10px; }
.ui-diff-fold {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin: 0 0 0 -4px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--diff-muted);
}
.ui-diff-fold .ui-icon { width: 16px; height: 16px; }
.ui-diff-fold .ui-diff-chevron { display: none; width: 16px; height: 16px; transition: transform .15s ease; }
.ui-diff-fold:hover .ui-diff-type, .ui-diff-fold:focus-visible .ui-diff-type { display: none; }
.ui-diff-fold:hover .ui-diff-chevron, .ui-diff-fold:focus-visible .ui-diff-chevron { display: block; }
.ui-diff-file.is-folded .ui-diff-chevron { transform: rotate(-90deg); }
.ui-diff-path { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; margin: -2px -6px; padding: 2px 6px; border-radius: 6px; cursor: default; }
.ui-diff-path:hover { background: var(--diff-path-hover); }
.ui-diff-name { flex: none; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--diff-control); font: 450 12px/normal var(--ui-font); }
.ui-diff-dir { min-width: 0; text-align: left; overflow: hidden; color: var(--diff-muted); font: 450 12px/normal var(--ui-font); text-overflow: ellipsis; }
.ui-diff-copy.ui-icon { flex: none; width: 12px; height: 12px; color: var(--diff-muted); opacity: 0; }
.ui-diff-path:hover .ui-diff-copy, .ui-diff-path:focus-visible .ui-diff-copy { opacity: 1; }
.ui-diff-status { flex: none; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--diff-hover); color: var(--diff-muted); font: 450 11px/normal var(--ui-font); }
.ui-diff-counts { display: inline-flex; gap: 3px; font: 450 12px/normal var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-diff-counts > span { white-space: normal; text-align: left; }
.ui-diff-counts .is-add { color: var(--diff-add-count); }
.ui-diff-counts .is-del { color: var(--diff-del-count); }
.ui-review.is-statless [data-review-stats] { display: none; }
.ui-diff-reviewed {
  flex: none; display: flex; align-items: center; height: 24px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 9999px; background: none; color: var(--diff-control); font: 500 12px/normal var(--ui-font);
}
.ui-diff-reviewed > span:last-child { color: var(--diff-muted); font-weight: 450; text-align: left; }
.ui-diff-reviewed:hover { background: var(--diff-hover); }
.ui-diff-check {
  display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin: 0 8px 0 0; padding: 2px;
  border: 1px solid var(--diff-box-line); border-radius: 3px; background: transparent; color: lch(100% 5 286.91);
  transition: background-color .08s ease-out, border-color .08s ease-out, opacity .08s ease-out;
}
.ui-diff-check .ui-icon { width: 10px; height: 10px; opacity: 0; transition: opacity .08s ease-out; }
.ui-diff-reviewed[aria-pressed="true"] .ui-diff-check { border-color: var(--ui-control-primary); background: var(--ui-control-primary); }
.ui-diff-reviewed[aria-pressed="true"] .ui-diff-check .ui-icon { opacity: 1; }
.ui-diff-reviewed:disabled { opacity: .5; }
.ui-diff-actions {
  flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 2px;
  border: 1px solid transparent; border-radius: 9999px; background: none; color: var(--diff-muted);
}
.ui-diff-actions .ui-icon { width: 14px; height: 14px; }
.ui-diff-actions:hover, .ui-diff-actions[aria-expanded="true"] { background: var(--diff-hover); color: var(--diff-control); }
.ui-diff-views { display: inline-flex; align-items: center; height: 24px; padding: 0; border-radius: 9999px; }
.ui-diff-view { height: 22px; padding: 0 8px; border: 1px solid transparent; border-radius: 9999px; background: none; color: var(--diff-muted); font: 500 12px/normal var(--ui-font); }
.ui-diff-view[aria-checked="true"] { background: var(--diff-pressed); color: var(--diff-title); }
.ui-diff-body {
  margin-top: -8px; padding-top: 7px; border: 1px solid var(--diff-line); border-top-color: transparent; border-radius: 8px;
  background: var(--diff-card); overflow: clip; outline: none; container-type: inline-size; cursor: auto;
}
.ui-diff-file, .ui-diff-head, .ui-diff-gap, .ui-diff-no { cursor: auto; }
.ui-diff-body[hidden] { display: none; }
.ui-diff-note { margin: 0; padding: 12px 16px; color: var(--diff-muted); font: 450 12px/18px var(--ui-font); }
.ui-review > .ui-diff-note { padding: 0 24px 10px; }
.ui-diff-preview { padding: 16px 24px; color: var(--diff-text); font: 450 14px/22px var(--ui-font); }

/* The rows: one column as wide as the longest line, so a tint reaches the end of it
   when the file scrolls sideways; the number stays at the left. */
.ui-diff-rows { cursor: text; display: grid; grid-template-columns: minmax(100%, max-content); overflow-x: auto; color: var(--diff-text); font: 400 12px/20px var(--ui-mono); tab-size: 2; }
.ui-diff-row { position: relative; display: flex; height: 20px; }
.ui-diff-no {
  position: sticky; left: 0; z-index: 2; flex: none; display: flex; justify-content: flex-end; width: 50px; height: 20px; text-align: right;
  padding: 0 10px; border-left: 1px solid transparent; background: var(--diff-card); color: var(--diff-faint); user-select: none;
}
.ui-diff-no::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.ui-diff-code { display: block; flex: 1; height: 20px; padding: 0 10px; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; white-space: pre; }
.ui-diff-row.is-add .ui-diff-code { background: var(--diff-add); }
.ui-diff-row.is-del .ui-diff-code { background: var(--diff-del); }
.ui-diff-row.is-add .ui-diff-no { border-left-color: var(--diff-add-bar); color: var(--diff-add-no); }
.ui-diff-row.is-del .ui-diff-no { border-left-color: var(--diff-del-bar); color: var(--diff-del-no); }
.ui-diff-row.is-add .ui-diff-no::before { background: var(--diff-add); }
.ui-diff-row.is-del .ui-diff-no::before { background: var(--diff-del); }
.ui-diff-minus { position: relative; width: 12px; height: 20px; }
.ui-diff-minus::before { content: ""; position: absolute; top: 9.25px; right: 2px; width: 6px; height: 1.5px; border-radius: 1px; background: currentColor; }
.ui-diff-row .ui-diff-mark { padding: 2px 0; border-radius: 4px; }
.ui-diff-row.is-add .ui-diff-mark { background: var(--diff-add-mark); }
.ui-diff-row.is-del .ui-diff-mark { background: var(--diff-del-mark); }
.ui-review.is-wrapped .ui-diff-rows { grid-template-columns: minmax(0, 1fr); }
.ui-review.is-wrapped .ui-diff-row, .ui-review.is-wrapped .ui-diff-code, .ui-review.is-wrapped .ui-diff-no { height: auto; min-height: 20px; }
.ui-review.is-wrapped .ui-diff-code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Syntax: Linear's "Linear Light" code theme over the highlighter's classes. */
.ui-review .ui-diff-code :is(.hljs-comment, .hljs-quote, .hljs-meta) { color: var(--diff-tok-comment); }
.ui-review .ui-diff-code :is(.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-tag, .hljs-tag, .hljs-name) { color: var(--diff-tok-key); }
.ui-review .ui-diff-code :is(.hljs-string, .hljs-bullet, .hljs-number, .hljs-symbol, .hljs-regexp, .hljs-link, .hljs-subst, .hljs-addition, .hljs-deletion, .hljs-section) { color: var(--diff-tok-plain); }
.ui-review .ui-diff-code :is(.hljs-params, .hljs-variable, .hljs-template-variable) { color: var(--diff-tok-param); }
.ui-review .ui-diff-code :is(.hljs-literal, .hljs-variable.constant_) { color: var(--diff-tok-literal); }
.ui-review .ui-diff-code :is(.hljs-title, .hljs-title.function_) { color: var(--diff-tok-call); }
.ui-review .ui-diff-code :is(.hljs-keyword, .hljs-operator, .hljs-selector-id, .hljs-selector-class) { color: var(--diff-tok-keyword); }
.ui-review .ui-diff-code :is(.hljs-built_in, .hljs-type, .hljs-title.class_) { color: var(--diff-tok-type); }
.ui-review .ui-diff-code .hljs-punctuation { color: var(--diff-text); }
.ui-review .ui-diff-mark { color: var(--diff-text); }

/* Commenting on a line: the button over the number on hover, then the composer. */
/* Linear's add-comment control: a 42px pill over the number, shown at once. */
.ui-diff-comment-btn {
  position: absolute; top: 0; left: 4px; z-index: 3; display: none; align-items: center; justify-content: center; width: 42px; height: 20px;
  padding: 0 2px; border: 1px solid transparent; border-radius: 9999px; background: var(--diff-pill); color: var(--diff-pill-text);
  font: 500 12px/normal var(--ui-font); cursor: default;
}
.ui-diff-comment-btn .ui-icon { width: 14px; height: 14px; }
.ui-review.can-comment .ui-diff-row:hover .ui-diff-comment-btn { display: inline-flex; }
.ui-diff-comment-btn:hover { background: lch(93.296% 0.102 281.858); color: lch(10% 0 282); }

/* A gap: the lines a patch leaves out. 28px above the first hunk and after the last,
   50px between hunks (a rule through the count, an expand button for each side). */
.ui-diff-gap { position: relative; display: flex; align-items: center; height: 28px; color: var(--diff-text); font: 400 16px/24px var(--ui-font); }
.ui-diff-gap.is-between { height: 50px; }
.ui-diff-gap-gutter { position: absolute; top: 2px; left: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; width: 50px; height: 24px; padding: 0 4px 0 0; }
.ui-diff-gap.is-between .ui-diff-gap-gutter { top: 1px; height: 48px; }
.ui-diff-gap-btn {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 2px;
  border: 1px solid transparent; border-radius: 9999px; background: var(--diff-card); color: var(--diff-muted);
}
.ui-diff-gap-btn .ui-icon { width: 14px; height: 14px; }
.ui-diff-gap-btn:hover { background: var(--diff-hover); color: var(--diff-control); }
.ui-diff-gap-section {
  position: absolute; left: 56px; z-index: 2; display: flex; max-width: calc(50% - 140px); height: 18px;
  background: var(--diff-card); color: var(--diff-muted); font: 400 12px/18px var(--ui-font);
}
.ui-diff-gap-section > span { display: block; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.ui-diff-gap.is-between .ui-diff-gap-section { top: 29px; }
.ui-diff-gap-section > [role="button"]:hover { color: var(--diff-control); }
.ui-diff-gap-mid { position: sticky; left: 50px; display: flex; align-items: center; justify-content: center; height: 26px; width: calc(100cqw - 50px); margin-left: 50px; }
.ui-diff-gap.is-between .ui-diff-gap-mid::before, .ui-diff-gap.is-between .ui-diff-gap-mid::after { content: ""; flex: 1; height: 1px; background: var(--diff-rule); }
.ui-diff-gap-all {
  flex: none; display: inline-flex; align-items: center; height: 24px; margin: 0; padding: 0 8px 0 6px;
  border: 1px solid transparent; border-radius: 9999px; background: transparent; color: var(--diff-muted); font: 500 12px/12px var(--ui-font); white-space: nowrap;
}
.ui-diff-gap-all .ui-icon { width: 14px; height: 14px; margin-right: 6px; color: var(--diff-muted); overflow: visible; transition: fill var(--ui-speed-hover), stroke var(--ui-speed-hover); }
.ui-diff-gap-all > span { display: flex; align-items: center; height: 15px; color: var(--diff-muted); font: 500 12px/12px var(--ui-font); text-align: center; cursor: default; }
button.ui-diff-gap-all:hover { background: var(--diff-hover); }
.ui-diff-gap-mid { background: transparent; }
.ui-diff-gap-btn .ui-icon { overflow: visible; transition: fill var(--ui-speed-hover), stroke var(--ui-speed-hover); }
.ui-diff-gap-btn:hover .ui-icon { color: var(--diff-title); }
.ui-diff-gap.is-loading { opacity: .6; pointer-events: none; }

/* Review comments under their line. */
.ui-diff-thread { position: sticky; left: 0; width: 100cqw; padding: 8px 12px 8px 50px; font: 450 13px/20px var(--ui-font); white-space: normal; }
.ui-diff-thread.is-outdated { padding-left: 12px; }
.ui-diff-thread-card { max-width: 720px; border: 1px solid var(--diff-line); border-radius: 8px; background: var(--diff-card); box-shadow: var(--ui-shadow-low); }
.ui-diff-comment { padding: 10px 12px; }
.ui-diff-comment + .ui-diff-comment { border-top: 1px solid var(--diff-line); }
.ui-diff-comment-head { display: flex; align-items: center; gap: 8px; color: var(--diff-muted); font: 450 12px/20px var(--ui-font); }
.ui-diff-comment-head b { color: var(--diff-title); font-weight: 500; }
.ui-diff-comment-link { margin-left: auto; display: inline-flex; color: var(--diff-faint); }
.ui-diff-comment-link .ui-icon { width: 14px; height: 14px; }
.ui-diff-outdated { padding: 0 6px; border-radius: 4px; background: var(--diff-hover); font-size: 11px; }
.ui-diff-comment-body { margin: 4px 0 0 28px; color: var(--diff-text); }
.ui-diff-comment-body > :last-child { margin-bottom: 0; }
/* The composer: Linear's card under the line, 6px in, 12px 16px inside. */
.ui-diff-thread[data-composer] { padding: 6px 6px 6px 6px; }
.ui-diff-composer { display: flex; flex-direction: column; gap: 8px; max-width: 1188px; padding: 12px 16px; border-color: lch(90.55% 0 282); box-shadow: var(--ui-shadow-low); }
.ui-diff-composer textarea { min-height: 46px; padding: 0; border: 0; background: none; color: lch(20% 1 282); font: 450 15px/24px var(--ui-font); resize: none; field-sizing: content; outline: none; }
.ui-diff-composer-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Split view: the old file on the left, the new on the right. */
.ui-diff-rows.is-split { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.ui-diff-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ui-diff-pair > .ui-diff-row { min-width: 0; overflow: hidden; }
.ui-diff-pair > .ui-diff-row:first-child { border-right: 1px solid var(--diff-line); }
.ui-diff-row.is-blank, .ui-diff-row.is-blank .ui-diff-no { background: var(--diff-page); }

/* Select commit: Linear's 458px dialog, 32px rows. */
.ui-review-commits { width: 458px; padding: 6px 0; }
.ui-review-commit-row {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 12px); height: 32px; margin: 0 6px; padding: 0 8px;
  border: 0; border-radius: 6px; background: none; color: var(--ui-label-title); font: 450 13px/20px var(--ui-font); text-align: left;
}
.ui-review-commit-row:hover { background: var(--ui-bg-base-hover); }
.ui-review-commit-row.is-all { font-weight: 500; }
.ui-review-commit-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-review-commit-sha { flex: none; color: var(--ui-label-muted); font: 400 12px/18px var(--ui-mono); }
.ui-review-commit-when { flex: none; color: var(--ui-label-muted); font: 450 12px/18px var(--ui-font); }
.ui-review-commit-tick.ui-icon { width: 16px; height: 16px; color: var(--ui-label-muted); }
.ui-review-commits-sep { height: 13px; margin: 0; border: 0; background: linear-gradient(var(--ui-border), var(--ui-border)) center / 100% 1px no-repeat; }
.ui-review-commits-head { display: flex; align-items: center; height: 32px; padding: 0 14px; color: var(--ui-label-title); font: 500 13px/20px var(--ui-font); }
.ui-review-commit-row .ui-diff-check { flex: none; width: 12px; height: 12px; padding: 0; }
.ui-review-commit-row .ui-diff-check .ui-icon { width: 8px; height: 8px; }
.ui-review-commit-row .ui-diff-check.is-on { border-color: var(--ui-control-primary); background: var(--ui-control-primary); color: #fff; }
.ui-review-commit-row .ui-diff-check.is-on .ui-icon { opacity: 1; }
.ui-review-display .ui-segmented { width: 100%; }
.ui-review-display .ui-segment { flex: 1; justify-content: center; }
.ui-review-sortdir { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ui-label-muted); }
.ui-review-sortdir + .ui-select { margin-left: 0; }
.ui-review-sortdir.is-desc .ui-icon { transform: scaleY(-1); }
.ui-review-tree-file.is-nested { padding-left: 23px; }
.ui-review-tree .ui-review-group { margin: 8px 0 2px; }
.ui-review-strip-pop .ui-review-tree-file { margin: 0 6px; }
.ui-review.is-range .ui-diff-reviewed { display: none; }

/* Beside an agent session's chat: the pane takes the left, and the chat narrows to
   Linear's agent panel. */
.ui-chat-changes.has-changes { align-items: stretch; justify-content: flex-start; padding: 0; overflow: hidden; }
.ui-chat-page.has-changes { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
.ui-chat-changes .ui-review-bar { margin-top: 8px; }
@media (max-width: 1100px) {
  .ui-review-tree { display: none; }
}

/* the peek card */
/* Linear's peek: the identifier 13/500 muted with tabular figures, the title 18px right
   under it, both at the font's normal line height (1.21). */
.ui-peek-issue .ui-peek-id {
  margin: 0 64px 6px 0; color: var(--ui-label-muted); font-size: 13px; font-weight: 500; line-height: 1.21;
  letter-spacing: -.02em; font-feature-settings: "tnum", "cpsp", "calt"; text-align: left; white-space: nowrap;
}
.ui-peek-issue .ui-peek-id .ui-crumb-id { display: inline-block; color: inherit; font-weight: inherit; }
.ui-peek-props { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px -6px 4px; }
.ui-peek-props .ui-prop { height: 26px; font-size: 12px; }
.ui-peek-labels { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ui-peek-foot { margin: 12px 0 0; color: var(--ui-label-faint); font-size: 12px; }
/* ---------- projects, timeline, cycles and charts ----------
   Kit extension for apps.project_pages: Linear's project list (48px rows, Name |
   Health | Priority | Lead | Target date | Issues | Status columns), project board
   cards, the project page, the timeline, the cycles rail and the inline-SVG charts.
   Chart series colours are the dataviz reference palette's categorical order
   (validated light and dark); scope/started/completed follow Linear's burn-up. */

:root {
  --ui-chart-scope: var(--ui-label-faint);
  --ui-chart-started: var(--ui-yellow);
  --ui-chart-completed: var(--ui-control-primary);
  --ui-series-0: #2a78d6; --ui-series-1: #eb6834; --ui-series-2: #1baf7a; --ui-series-3: #eda100;
  --ui-series-4: #e87ba4; --ui-series-5: #008300; --ui-series-6: var(--ui-label-faint);
  --ui-tl-side: 302px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-series-0: #3987e5; --ui-series-1: #d95926; --ui-series-2: #199e70; --ui-series-3: #c98500;
    --ui-series-4: #d55181; --ui-series-5: #0ca30c;
  }
}
:root[data-theme="dark"] {
  --ui-series-0: #3987e5; --ui-series-1: #d95926; --ui-series-2: #199e70; --ui-series-3: #c98500;
  --ui-series-4: #d55181; --ui-series-5: #0ca30c;
}

.ui-muted { color: var(--ui-label-muted); }
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px;
  background: var(--ui-bg-shade); color: var(--ui-label-muted); font: 500 12px/1 var(--ui-font); flex: none;
}
.ui-segmented.ui-seg-inline, .ui-viewbar .ui-segmented { display: inline-flex; gap: 0; }
.ui-viewbar .ui-segmented .ui-segment { padding: 0 10px; border-radius: 0; }
.ui-viewbar .ui-segmented .ui-segment:first-child { border-radius: var(--ui-radius-pill) 0 0 var(--ui-radius-pill); }
.ui-viewbar .ui-segmented .ui-segment:last-child { border-radius: 0 var(--ui-radius-pill) var(--ui-radius-pill) 0; }
.ui-segment input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ui-segment { position: relative; }
.ui-viewbar select.ui-select { width: auto; height: 28px; border-radius: var(--ui-radius-pill); padding: 0 10px; font-weight: 500; }

/* icons: project, health, progress ring, milestone */
.ui-project-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; font-size: 13px; line-height: 1; }
/* The project page's icon: a 36px tile tinted with the project's colour, a 24px emoji. */
.ui-project-icon-lg {
  width: 36px; height: 36px; padding: 0 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--project-colour, var(--ui-label-muted)) 12.5%, transparent);
}
.ui-project-icon-lg .ui-project-emoji { font-size: 21px; line-height: 24px; }
.ui-project-icon-lg .ui-icon { width: 20px; height: 20px; }
.ui-health { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-label-muted); font: 500 12px/1 var(--ui-font); white-space: nowrap; }
.ui-health-none { color: var(--ui-label-faint); }
.ui-health-none span { color: var(--ui-label-muted); }
.ui-ring { width: 14px; height: 14px; flex: none; }
.ui-ring circle { fill: none; stroke-width: 2; }
.ui-ring-track { stroke: var(--ui-border-solid); }
.ui-ring-fill { stroke: var(--ui-status-started); stroke-linecap: butt; }
.ui-ring.is-done .ui-ring-fill { stroke: var(--ui-status-completed); }
/* A completed cycle's success: the completed colour on the faint track (Linear's). */
.ui-ring.is-accent .ui-ring-track { stroke: var(--ui-border); }
.ui-ring.is-accent .ui-ring-fill { stroke: var(--ui-status-completed); }
.ui-milestone-icon { width: 14px; height: 14px; color: var(--ui-yellow); }
.is-done > * > .ui-milestone-icon, .ui-milestone-icon.ui-i-milestone-done { color: var(--ui-status-completed); }
.is-overdue, .ui-chip.is-overdue { color: var(--ui-red); }

/* project list: Linear's grid of 6px gaps, the name 38px in, 14px after the last column;
   each cell holds a 28px pill (a 24px one for health) and the hover is an inset 8px card. */
.ui-plist { padding: 0 0 8px; outline: none; }
.ui-plist { container-type: inline-size; }
.ui-plist-head, .ui-row.ui-prow { display: flex; align-items: center; column-gap: 6px; margin: 0; padding: 0; }
.ui-plist-head::after, .ui-prow::after { content: ""; flex: none; width: 8px; }
.ui-plist-head > *, .ui-prow > * { flex: none; display: flex; align-items: center; min-width: 0; }
.ui-plist-head > .ui-pcol-name, .ui-prow > .ui-pcol-name { flex: 1; margin-left: 38px; }
.ui-row.ui-prow { isolation: isolate; border-radius: 8px; background: none; font: 400 16px/24px var(--ui-font); }
.ui-prow::before { content: ""; position: absolute; inset: 0 8px; z-index: -1; border-radius: 8px; }
.ui-row.ui-prow:hover, .ui-row.ui-prow.is-focused, .ui-row.ui-prow.is-selected { background: none; }
.ui-prow:hover::before, .ui-prow.is-focused::before { background: var(--ui-bg-base-hover); }
.ui-prow.is-selected::before { background: var(--ui-bg-selected); }
.ui-pcol-health { width: 130px; }
.ui-pcol-priority { width: 68px; }
.ui-plist .ui-pcol-lead { width: 120px; }
.ui-pcol-members { width: 96px; }
.ui-pcol-members .ui-avatar + .ui-avatar { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--ui-bg-base); }
.ui-prow-more { margin-left: 4px; color: var(--ui-label-muted); font-size: 12px; }
.ui-pcol-teams { gap: 4px; width: 72px; }
.ui-plist .ui-pcol-date { width: 91px; }
.ui-pcol-issues { width: 49px; justify-content: flex-end; }
.ui-plist .ui-pcol-status { width: 108px; }
.ui-prow-summary { margin-left: 12px; color: var(--ui-label-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.ui-plist-head {
  position: sticky; top: 0; z-index: 2; height: 36px;
  background: var(--ui-bg-base); border-bottom: 1px solid var(--ui-border-faint);
}
/* A column title: Linear's order-by pill. */
.ui-phead {
  display: flex; align-items: center; height: 24px; padding: 0 6px; border-radius: 9999px;
  gap: 2px; color: var(--ui-label-base); font: 500 12px/normal var(--ui-font); text-align: center; white-space: nowrap;
}
.ui-plist-head > .ui-pcol-name > .ui-phead { margin-left: 0; }
.ui-plist .ui-group-head { top: 36px; }
.ui-prow { height: 48px; }
.ui-prow .ui-project-icon { width: 28px; height: 28px; margin-right: 6px; padding: 6px; border-radius: 8px; }
.ui-prow .ui-project-icon .ui-icon { width: 16px; height: 16px; }
.ui-prow-name { text-align: left; color: var(--ui-label-title); font-size: 13px; font-weight: 500; line-height: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-prow-milestone { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; padding: 0 4px; color: var(--ui-label-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
/* A cell's control: 28px high, 3px 6px in, a pill. */
.ui-pbtn {
  display: flex; align-items: center; min-height: 28px; min-width: 0; padding: 3px 6px; border-radius: 9999px;
  color: var(--ui-label-title); font: 450 12px/normal var(--ui-font); white-space: nowrap;
}
.ui-pbtn > .ui-icon, .ui-pbtn > .ui-ring { width: 16px; height: 16px; flex: none; }
.ui-pbtn > .ui-avatar { width: 16px; height: 16px; }
.ui-pbtn-health { min-height: 24px; height: 24px; padding: 0 8px; border: 1px solid transparent; font-weight: 500; overflow: clip; }
.ui-pbtn-health .ui-health { gap: 8px; }
.ui-pbtn-health .ui-health .ui-icon { width: 16px; height: 16px; }
.ui-prow-lead { margin-left: 6px; color: var(--ui-label-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pcol-date { color: var(--ui-label-base); font-size: 12px; }
.ui-pdate { display: block; width: 100%; height: 28px; border-radius: 8px; }
.ui-pdate .ui-pbtn { width: max-content; max-width: 100%; gap: 6px; color: var(--ui-label-title); font-weight: 400; }
.ui-pdate .ui-icon { color: var(--ui-label-muted); }
.ui-pcol-date.is-empty .ui-pdate { opacity: 0; }
.ui-prow:hover .ui-pcol-date.is-empty .ui-pdate { opacity: 1; }
/* With the details panel open Linear shows only the lead's avatar. */
.ui-projects-page:not(.is-panel-hidden) .ui-prow-lead { display: none; }
.ui-pcol-date.is-overdue .ui-pdate .ui-pbtn { color: var(--ui-red); }
.ui-pstatus { display: flex; align-items: center; gap: 4px; }
.ui-pstatus .ui-pbtn { gap: 8px; color: var(--ui-label-base); }
.ui-plist [hidden] { display: none !important; }
/* Linear drops the health text when the list is narrow. */
@container (max-width: 980px) {
  .ui-prow .ui-pbtn-health .ui-health > span, .ui-prow-lead { display: none; }
  .ui-pcol-health { width: 56px; }
}

/* project board cards: Linear's tile (8px radius, 5px 6px in): the icon, name and the
   status, priority and lead buttons (28px each) on one line, the summary (12px/18px,
   two lines), then chips and "N issues" as 28px pill buttons. */
.ui-pcard { gap: 0; padding: 5px 6px; border-radius: 8px; }
.ui-pcard-head { display: flex; align-items: flex-start; gap: 8px; min-height: 28px; }
.ui-pcard-title { display: flex; flex: 1; min-width: 0; gap: 10px; align-items: flex-start; padding: 6px 0 0 6px; color: var(--ui-label-title); font: 500 13px/16px var(--ui-font); }
.ui-pcard-title .ui-project-icon { flex: none; width: 16px; height: 16px; }
.ui-pcard-props { display: flex; flex: none; align-items: center; }
.ui-pcard-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9999px; color: var(--ui-label-muted); }
.ui-pcard-btn[role=button]:hover { background: var(--ui-bg-shade); }
.ui-pcard-btn .ui-icon { width: 14px; height: 14px; }
.ui-pcard-btn .ui-avatar { width: 16px; height: 16px; font-size: 7px; }
.ui-pcard-summary { padding: 2px 4px 3px; color: var(--ui-label-base); font: 450 12px/18px var(--ui-font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-pcard-chips { display: flex; flex-wrap: wrap; align-items: center; }
.ui-pcard-chips:empty { display: none; }
.ui-pcard-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 28px; padding: 3px 6px; border-radius: 9999px; color: var(--ui-label-base); font: 450 12px/normal var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-pcard-chip .ui-icon { width: 14px; height: 14px; flex: none; color: var(--ui-label-muted); }
.ui-pcard-chip.is-overdue { color: var(--ui-red); }
.ui-pcard-foot { display: flex; align-items: center; }
.ui-pcard [hidden] { display: none !important; }
/* Pickers in the list's cells. */
.ui-pbtn[role=button] { cursor: default; }
.ui-pbtn[role=button]:hover { background: var(--ui-bg-shade); }
.ui-pbtn-multi { gap: 4px; }
.ui-pbtn-multi [data-ui-picker-chips] { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.ui-pbtn-multi.is-empty::before { content: "\2013"; color: var(--ui-label-faint); }
.ui-pcol-members [data-ui-picker-chips] .ui-avatar + .ui-avatar { margin-left: -8px; box-shadow: 0 0 0 1.5px var(--ui-bg-base); }
.ui-pcol-labels { width: 160px; min-width: 0; }
.ui-pcol-labels .ui-chip { max-width: 100%; }
.ui-pcol-deps { width: 140px; min-width: 0; }
.ui-pcol-deps .ui-prop { height: 24px; max-width: 100%; }
.ui-pstatus .ui-pbtn .ui-status { width: 14px; height: 14px; }

/* the project page */
.ui-project-body { max-width: 720px; margin: 0 auto; }
.ui-project-heading { display: grid; gap: 4px; margin: 12px 0 20px; }
.ui-project-title.ui-issue-title { height: 32px; margin: 0; font-size: 24px; line-height: 32px; letter-spacing: -0.16px; }
.ui-project-summary {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; outline: none;
  color: var(--ui-label-muted); font: 450 15px/23px var(--ui-font); letter-spacing: -0.1px; resize: none; field-sizing: content; overflow: hidden;
}
.ui-project-propline .ui-chip { max-width: 240px; color: var(--ui-label-base); }
.ui-project-section { margin-top: 28px; }
.ui-project-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ui-project-section-head h3 { margin: 0; color: var(--ui-label-muted); font: 500 13px/1 var(--ui-font); }
.ui-project-desc { color: var(--ui-label-base); font: 450 15px/24px var(--ui-font); white-space: normal; margin: 0; padding: 0; }
.ui-markdown > :first-child { margin-top: 0; }
.ui-markdown table { border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.ui-markdown th, .ui-markdown td { border: 1px solid var(--ui-border); padding: 4px 8px; text-align: left; }
.ui-markdown a { color: var(--ui-label-link); }
.ui-markdown code { font-family: var(--ui-font-mono, monospace); font-size: .9em; padding: 1px 4px; border-radius: 4px; background: var(--ui-bg-shade); }
.ui-markdown pre { overflow: auto; padding: 10px 12px; border-radius: var(--ui-radius); background: var(--ui-bg-shade); }
.ui-markdown pre code { padding: 0; background: none; }
.ui-markdown img { max-width: 100%; }
/* "Write first project update": a bordered card 16px out from the column, a pill inside. */
.ui-update-cta {
  display: flex; justify-content: center; margin: 16px -16px 24px; padding: 16px;
  border: 1px solid var(--ui-border); border-radius: 10px;
  color: var(--ui-label-title); font: 400 16px/24px var(--ui-font);
}
.ui-update-cta-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px;
  border: 1px solid transparent; border-radius: 9999px; color: var(--ui-label-base); font: 500 13px/normal var(--ui-font);
}
.ui-update-cta-btn .ui-icon { width: 16px; height: 16px; color: var(--ui-label-muted); }
.ui-update-cta-btn:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-update-cta:hover .ui-update-cta-btn .ui-icon { color: var(--ui-label-base); }
.ui-update .ui-comment-head { flex-wrap: wrap; }
.ui-update-edit { margin-left: auto; width: 24px; height: 24px; }
.ui-update-composer { margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.ui-health-select { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ui-health-select .ui-segment { padding: 0 10px; }
.ui-pp-editor { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ui-pp-textarea { min-height: 160px; padding: 10px 12px; border-radius: var(--ui-radius); box-shadow: inset 0 0 0 1px var(--ui-border); resize: vertical; }
/* A milestone on the overview: a 31px head (16px icon, the name 22px in, the counts on the right). */
.ui-milestone { padding: 12px 0; }
.ui-milestone-head { display: flex; align-items: center; height: 31px; padding: 0 2px 0 0; }
.ui-milestone-head > .ui-milestone-icon { width: 16px; height: 16px; flex: none; margin-right: 6px; }
.ui-milestone-title { flex: none; padding: 4px 2px 4px 4px; }
.ui-milestone-name { display: block; font: 600 15px/23px var(--ui-font); letter-spacing: -0.1px; color: var(--ui-label-base); }
.ui-milestone-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--ui-label-muted); font-size: 12px; white-space: nowrap; }
.ui-milestone-desc { margin: 6px 0 0; color: var(--ui-label-base); font: 450 15px/24px var(--ui-font); letter-spacing: -0.1px; }
.ui-project-side .ui-prop-section h3 { padding: 0 8px; }
.ui-prop-date { position: relative; cursor: default; }
.ui-prop-date input { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; outline: none; color-scheme: light dark; }
.ui-prop-date.is-empty input { color: var(--ui-label-faint); }
.ui-plink { max-width: 100%; }
.ui-plink-label { overflow: hidden; text-overflow: ellipsis; }
.ui-inline-form { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; }
.ui-side-milestones { display: flex; flex-direction: column; gap: 2px; }
.ui-side-milestone { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px; border-radius: var(--ui-radius); font: 500 13px/1.2 var(--ui-font); color: var(--ui-label-base); }
.ui-side-milestone:hover { background: var(--ui-bg-base-hover); }
.ui-side-milestone-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-side-milestone-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-label-muted); font-size: 12px; font-weight: 450; }
.ui-progress-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 8px; }
.ui-progress-stats > div { display: flex; flex-direction: column; gap: 4px; color: var(--ui-label-muted); font-size: 12px; }
.ui-progress-stats b { color: var(--ui-label-title); font: 500 15px/1 var(--ui-font); }
.ui-progress-stats small { color: var(--ui-label-muted); }
.ui-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--ui-label-faint); flex: none; }
.ui-legend-dot.is-scope { background: var(--ui-chart-scope); }
.ui-legend-dot.is-started { background: var(--ui-chart-started); }
.ui-legend-dot.is-completed { background: var(--ui-chart-completed); }
.ui-legend-dot.is-created { background: var(--ui-series-1); }

/* the timeline (static/js/timeline.js documents the bar rules; colours read from
   Linear's: the solid bar is the secondary control on the solid border, the projected
   part a dashed accent outline at half strength over a fade into the accent, today a
   1px accent line fading downward) */
.ui-tl { position: relative; flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.ui-tl-inner { width: calc(var(--ui-tl-side) + var(--tl-width, 2000px)); min-height: 100%; position: relative; }
.ui-tl-head { position: sticky; top: 0; z-index: 6; display: flex; height: calc(44px + var(--tl-cycle-rows, 0) * 16px); background: var(--ui-bg-base); }
/* Display's "Show cycles" (Linear's chronology cycle rows): per team a 16px strip; each
   cycle its label on the page colour and a 3px band of 3px checks in its tint (grey;
   the current cycle the accent; the one under the pointer darker; past ones at 75%). */
.ui-tl-cycles { position: absolute; left: 0; right: 0; height: 16px; }
.ui-tl-cycle {
  --tl-cycle-tint: color-mix(in srgb, transparent 50%, var(--ui-label-faint)); --tl-cycle-text: color-mix(in srgb, transparent 50%, var(--ui-label-faint));
  position: absolute; top: 0; height: 16px; display: flex; align-items: center; min-width: 0; cursor: default;
}
.ui-tl-cycle:hover { --tl-cycle-tint: var(--ui-label-faint); --tl-cycle-text: var(--ui-label-faint); }
.ui-tl-cycle.is-highlighted { --tl-cycle-tint: color-mix(in srgb, transparent 50%, var(--ui-label-muted)); --tl-cycle-text: color-mix(in srgb, transparent 50%, var(--ui-label-muted)); }
.ui-tl-cycle.is-highlighted:hover { --tl-cycle-tint: var(--ui-label-muted); --tl-cycle-text: var(--ui-label-muted); }
.ui-tl-cycle.is-active { --tl-cycle-tint: color-mix(in srgb, transparent 50%, var(--ui-control-primary)); --tl-cycle-text: color-mix(in srgb, transparent 50%, var(--ui-control-primary)); }
.ui-tl-cycle.is-active:hover { --tl-cycle-tint: var(--ui-control-primary); --tl-cycle-text: var(--ui-control-primary); }
.ui-tl-cycle.is-completed { opacity: .75; }
.ui-tl-cycle.is-completed:hover { opacity: 1; }
.ui-tl-cycle-label { flex: none; max-width: 100%; margin-left: -2px; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--ui-bg-base); color: var(--tl-cycle-text); font: 500 10px/16px var(--ui-font); }
.ui-tl-cycle-band { flex: 1; height: 3px; background-image: repeating-conic-gradient(var(--tl-cycle-tint) 0% 25%, transparent 0% 50%); background-size: 3px 3px; }
.ui-tl-cycles-team { position: absolute; top: 0; z-index: 1; padding: 0 8px; background: var(--ui-bg-base); color: var(--ui-label-muted); font: 500 10px/16px var(--ui-font); text-transform: uppercase; }
/* A dragged row's place (manual ordering). */
.ui-tl-drop { position: absolute; left: 0; right: 0; height: 2px; z-index: 8; background: var(--ui-control-primary); pointer-events: none; }
.ui-tl.is-sorting, .ui-tl.is-sorting * { cursor: grabbing !important; }
.ui-tl-corner {
  position: sticky; left: 0; z-index: 2; width: var(--ui-tl-side); flex: none; display: flex; align-items: center; padding: 0 20px;
  background: var(--ui-bg-base); color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font);
}
.ui-tl-axis { position: relative; flex: 1; overflow: hidden; }
.ui-tl-tick { position: absolute; transform: translateX(-50%); color: var(--ui-label-muted); white-space: nowrap; }
.ui-tl-tick.is-month { top: 8px; transform: none; color: var(--ui-label-title); font: 500 12px/14px var(--ui-font); text-transform: uppercase; }
.ui-tl-tick.is-day { top: 25px; color: var(--ui-label-muted); font: 450 11px/14px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-tl-today-label, .ui-tl-hover-label {
  position: absolute; top: 23px; transform: translateX(-50%); padding: 1px 4px; border-radius: 8px; z-index: 1;
  font: 500 12px/14px var(--ui-font); text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.ui-tl-today-label { background: var(--ui-control-primary); color: var(--ui-control-primary-label); }
.ui-tl-hover-label { z-index: 2; background: var(--ui-bg-base); color: var(--ui-label-base); }
.ui-tl-controls { position: sticky; right: 0; z-index: 2; display: flex; align-items: center; gap: 6px; flex: none; margin-left: calc(-1 * 160px); width: 160px; justify-content: flex-end; padding-right: 12px; background: linear-gradient(90deg, transparent, var(--ui-bg-base) 24px); }
.ui-tl-zoom .ui-icon { width: 12px; height: 12px; margin-left: 2px; color: var(--ui-label-muted); }
.ui-tl-body { position: relative; padding-bottom: 64px; outline: none; }
.ui-tl-grid { position: absolute; top: 0; bottom: 0; left: var(--ui-tl-side); right: 0; pointer-events: none; }
.ui-tl-grid.has-weekends {
  --tl-weekend: color-mix(in lch, var(--ui-control-ghost-hover) 40%, transparent);
  background: repeating-linear-gradient(90deg, var(--tl-weekend) 0 calc(2 * var(--tl-day)), transparent calc(2 * var(--tl-day)) calc(7 * var(--tl-day)));
  background-position-x: var(--tl-weekend-x, 0);
}
.ui-tl-gridline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ui-border-faint); }
.ui-tl-today { position: absolute; top: -21px; bottom: 0; width: 1px; z-index: 1; opacity: .6; background: linear-gradient(0deg, transparent, var(--ui-control-primary)); }
.ui-tl-links { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; z-index: 3; pointer-events: none; }
/* Linear's dependency: a 2px dotted purple curve at 60% (70% for the selected project's,
   30% for the others while one is selected), red at 90% when the blocked project starts
   first; a dot on an end with no date. The wide transparent copy takes the click. */
.ui-tl-link { --tl-link: var(--ui-purple); opacity: .6; }
.ui-tl-link.is-related { opacity: .7; }
.ui-tl-link.is-faded { opacity: .3; }
.ui-tl-link.is-late { --tl-link: var(--ui-red); opacity: .9; }
.ui-tl-link-line { fill: none; stroke: var(--tl-link, var(--ui-purple)); stroke-width: 2; stroke-dasharray: 1 3; stroke-linecap: round; }
.ui-tl-link-hit { fill: none; stroke: transparent; stroke-width: 10; pointer-events: stroke; cursor: pointer; }
.ui-tl-link-end { fill: var(--tl-link); }
.ui-tl-link-warn { fill: var(--ui-red); stroke: var(--ui-bg-base); stroke-width: 3; paint-order: stroke; pointer-events: all; cursor: pointer; }
.ui-tl-link-bang { stroke: #fff; stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
/* The dependency being drawn: grey until it reaches a bar it can join. */
.ui-tl-link-line.is-drawing { opacity: .7; filter: saturate(0) brightness(2); }
.ui-tl-link-line.is-drawing.is-applicable { filter: none; }
:root[data-theme="dark"] .ui-tl-link-line.is-drawing:not(.is-applicable) { filter: saturate(0) brightness(1.4); }
.ui-tl-hover-line { position: absolute; top: -21px; bottom: 0; width: 1px; z-index: 1; background: var(--ui-border-solid); }
.ui-tl-row { position: relative; display: flex; height: 72px; }
.ui-tl-group { position: relative; display: flex; height: 36px; }
.ui-tl-cell {
  position: sticky; left: 0; z-index: 5; width: var(--ui-tl-side); flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 20px 0 20px; background: var(--ui-bg-base);
  color: var(--ui-label-title); font: 500 13px/1 var(--ui-font); min-width: 0;
}
/* Linear's row highlight: a rounded block inset in the left column. */
.ui-tl-row > .ui-tl-cell::before { content: ""; position: absolute; inset: 8px 8px 8px 8px; border-radius: 8px; z-index: -1; }
.ui-tl-row > .ui-tl-cell { isolation: isolate; }
.ui-tl-group .ui-tl-cell { color: var(--ui-label-base); background: var(--ui-bg-sub); }
.ui-tl-group { background: var(--ui-bg-sub); }
.ui-tl-row > .ui-tl-cell { cursor: default; user-select: none; }
.ui-tl-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ui-tl-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Linear's "Open project": a 24px round chevron after the name while the row is hovered. */
.ui-tl-open {
  display: none; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 2px;
  border-radius: var(--ui-radius-pill); color: var(--ui-label-faint);
}
.ui-tl-open .ui-icon { width: 16px; height: 16px; }
.ui-tl-row:hover .ui-tl-open { display: inline-flex; }
.ui-tl-open:hover { background: var(--ui-control-secondary-hover); color: var(--ui-label-muted); }
.ui-tl-members { display: inline-flex; }
.ui-tl-members > * + * { margin-left: -4px; }
/* Display's "Show project list" off: the bars take the whole width. */
.ui-tl.is-listless { --ui-tl-side: 0px; }
.ui-tl.is-listless .ui-tl-row > .ui-tl-cell, .ui-tl.is-listless .ui-tl-count { display: none; }
.ui-tl.is-listless .ui-tl-group .ui-tl-cell { width: auto; }
.ui-tl.is-listless .ui-tl-bar-label { display: inline-flex; align-items: center; gap: 4px; }
.ui-tl.is-listless .ui-tl-bar-label > :first-child { flex: none; width: 12px; height: 12px; }
.ui-tl-bar-label .ui-tl-props { display: inline-flex; align-items: center; margin-left: 2px; gap: 2px; }
.ui-tl-bar-label .ui-tl-props .ui-icon, .ui-tl-bar-label .ui-tl-props svg { width: 12px; height: 12px; }
.ui-tl-props { display: flex; align-items: center; gap: 10px; flex: none; color: var(--ui-label-muted); }
.ui-tl-props > span { display: inline-flex; }
.ui-tl-row:hover > .ui-tl-cell::before, .ui-tl-row.is-focused > .ui-tl-cell::before { background: var(--ui-control-secondary-selected); }
.ui-tl-row.is-selected > .ui-tl-cell::before, .ui-tl-row.is-tl-selected > .ui-tl-cell::before { background: var(--ui-bg-selected); }
.ui-tl-row.is-tl-selected .ui-tl-bar, .ui-tl-row.is-tl-target .ui-tl-bar { background: var(--ui-control-secondary-selected); border-color: var(--ui-purple); }
.ui-tl-row:focus { outline: none; }
.ui-tl-track { position: relative; flex: 1; overflow: hidden; }
.ui-tl-bar-label {
  position: absolute; top: 4px; z-index: 3; color: var(--ui-label-base); font: 500 13px/16px var(--ui-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.ui-tl-bar {
  position: absolute; top: 24px; height: 24px; min-width: 6px; box-sizing: border-box;
  border: 1px solid var(--ui-border-solid); border-radius: 6px; background: var(--ui-control-secondary); box-shadow: var(--ui-shadow-low);
  z-index: 2; touch-action: none; cursor: default;
}
.ui-tl-row:hover .ui-tl-bar, .ui-tl-row.is-focused .ui-tl-bar { background: var(--ui-control-secondary-selected); border-color: var(--ui-control-ring-hover); }
.ui-tl-bar.is-open-right { border-radius: 6px 0 0 6px; }
/* One date only: the far side fades out (Linear's mask, 75% to 95%). */
.ui-tl-bar.is-fade-left { border-radius: 0 6px 6px 0; -webkit-mask: linear-gradient(to left, #000 75%, transparent 95%); mask: linear-gradient(to left, #000 75%, transparent 95%); }
.ui-tl-bar.is-fade-right { border-radius: 6px 0 0 6px; -webkit-mask: linear-gradient(to right, #000 75%, transparent 95%); mask: linear-gradient(to right, #000 75%, transparent 95%); }
.ui-tl-projected {
  position: absolute; top: 24px; height: 24px; box-sizing: border-box; z-index: 1; border-radius: 0 6px 6px 0;
  background: linear-gradient(to right, var(--ui-bg-base), color-mix(in lch, var(--ui-control-primary) 10%, var(--ui-bg-base)));
}
.ui-tl-projected::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px dashed var(--ui-control-primary); border-left: 0; opacity: .5; pointer-events: none;
}
.ui-tl-projected.is-fade { -webkit-mask: linear-gradient(to right, #000 60%, transparent 95%); mask: linear-gradient(to right, #000 60%, transparent 95%); }
.ui-tl.is-dragging, .ui-tl.is-dragging * { cursor: ew-resize !important; }
.ui-tl-bar.is-editable { cursor: default; }
/* Linear's bar ends: a 44px zone on each end; hovering it shows the circle a dependency
   is dragged from (12px, its centre 18px past the end), the 28px handle inside it
   resizes, with a 2px grip 4px past the end while hovered. */
.ui-tl-end { position: absolute; top: 25px; width: 44px; height: 22px; z-index: 4; }
.ui-tl-handle { position: absolute; top: 0; width: 28px; height: 22px; cursor: col-resize; }
.ui-tl-end.is-start .ui-tl-handle { left: 0; }
.ui-tl-end.is-end .ui-tl-handle { left: 16px; }
.ui-tl-grip { position: absolute; top: 2px; width: 2px; height: 18px; border-radius: 2px; background: var(--ui-border-solid); opacity: 0; transition: opacity var(--ui-dur-fast, .1s); }
.ui-tl-end.is-start .ui-tl-grip { left: 16px; }
.ui-tl-end.is-end .ui-tl-grip { left: 10px; }
.ui-tl-handle:hover .ui-tl-grip, .ui-tl.is-dragging .ui-tl-grip { opacity: 1; }
.ui-tl-link-handle {
  position: absolute; top: 5px; width: 12px; height: 12px; box-sizing: border-box; border: 1px solid var(--ui-border-solid); border-radius: 50%;
  background: var(--ui-bg-base); opacity: 0; pointer-events: none;
}
.ui-tl-end.is-start .ui-tl-link-handle { left: -2px; }
.ui-tl-end.is-end .ui-tl-link-handle { left: 34px; }
.ui-tl-end:hover .ui-tl-link-handle { opacity: 1; pointer-events: auto; }
.ui-tl-link-handle:hover { border-color: var(--ui-purple); }
.ui-tl.is-dragging .ui-tl-link-handle, .ui-tl.is-linking .ui-tl-end { display: none; }
.ui-tl.is-linking, .ui-tl.is-linking * { cursor: default !important; }
/* The drag readout (Linear's): the dates a drag sets, 5px above the bar. */
.ui-tl-readout {
  position: absolute; z-index: 500; padding: 4px 8px; border: 1px solid var(--ui-border); border-radius: 8px;
  background: var(--ui-bg-base); box-shadow: var(--ui-shadow-low); color: var(--ui-label-title);
  font: 500 12px/14px var(--ui-font); white-space: nowrap; pointer-events: none;
}
.ui-tl-diamond {
  display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1.5px; box-sizing: border-box;
  background: var(--ui-label-faint); box-shadow: 0 0 0 1.5px var(--ui-control-secondary);
}
.ui-tl-diamond.is-outline { background: transparent; box-shadow: none; border: 1px solid var(--ui-label-faint); width: 7px; height: 7px; }
.ui-tl-milestone {
  position: absolute; top: 30px; height: 12px; z-index: 4; display: inline-flex; align-items: center; padding: 0 2px; margin: 0;
  border: 0; background: none; transform: translateX(-50%); cursor: default;
}
/* A stack: its diamonds overlap. */
.ui-tl-milestone.is-stack .ui-tl-diamond + .ui-tl-diamond { margin-left: -3px; }
.ui-tl-milestone-label, .ui-tl-next {
  position: absolute; z-index: 3; color: var(--ui-label-faint); font: 450 12px/14px var(--ui-font); white-space: nowrap; pointer-events: none;
}
/* A milestone's name, centred under its marker; one that would run into a neighbour
   starts at its marker and fades before the next (--tl-mask); the one nearest the
   pointer shows in full, over its neighbours. */
.ui-tl-milestone-label { top: 53px; transform: translateX(-50%); }
.ui-tl-milestone-label.is-occluded { transform: none; -webkit-mask-image: var(--tl-mask); mask-image: var(--tl-mask); }
.ui-tl-milestone-label.is-closest { z-index: 5; -webkit-mask-image: none; mask-image: none; padding: 0 3px; margin-left: -3px; border-radius: 4px; background: var(--ui-bg-base); color: var(--ui-label-muted); }
.ui-tl-next { top: 5px; display: inline-flex; align-items: center; gap: 4px; }
.ui-tl-next-diamonds { display: inline-flex; }
.ui-tl-next-diamonds .ui-tl-diamond + .ui-tl-diamond { margin-left: -3px; }
.ui-tl-offscreen {
  position: absolute; top: 28px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; border: 0; background: none;
  color: var(--ui-label-faint); font: 450 12px/16px var(--ui-font); white-space: nowrap; cursor: pointer;
}
.ui-tl-offscreen::before { content: "←"; color: var(--ui-label-muted); }
.ui-tl-offscreen.is-right::before { content: none; }
.ui-tl-offscreen.is-right::after { content: "→"; color: var(--ui-label-muted); }
.ui-tl-offscreen:hover { color: var(--ui-label-muted); }
.ui-tl-ghost {
  position: absolute; top: 25px; z-index: 4; width: 22px; height: 22px; margin-left: -11px; padding: 0; border-radius: 50%;
  border: 1px solid var(--ui-border-solid); background: var(--ui-control-secondary); box-shadow: var(--ui-shadow-low);
  color: var(--ui-label-muted); font: 500 14px/20px var(--ui-font); cursor: pointer;
}
.ui-tl-ghost-plus { display: block; text-align: center; }
.ui-tl-ghost-date {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 8px; border: 1px solid var(--ui-border); border-radius: 8px;
  background: var(--ui-bg-base); box-shadow: var(--ui-shadow-low); color: var(--ui-label-title); font: 500 12px/14px var(--ui-font); white-space: nowrap; pointer-events: none;
}
.ui-tl-foot { position: sticky; left: 0; bottom: 0; z-index: 7; display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; background: linear-gradient(transparent, var(--ui-bg-base) 40%); color: var(--ui-label-muted); font: 450 13px/1 var(--ui-font); width: 100%; }
.ui-tl-foot b { color: var(--ui-label-title); font-weight: 500; }
.ui-tl-foot .ui-btn { margin-left: 8px; }
.ui-tl-foot .ui-btn .ui-icon { width: 12px; height: 12px; margin-left: 4px; }
.ui-projects-page > .ui-tl { min-width: 0; }
@media (max-width: 768px) {
  .ui-tl { --ui-tl-side: 148px; }
  .ui-tl-props, .ui-tl-count { display: none; }
  .ui-tl-cell { padding: 0 8px 0 12px; }
}

/* cycles */
/* Cycles list: Linear's 114px date rail, the cycle 126px in, a 70px head; the current
   cycle's burn-up is a 210px frame (10px in, 20px out) with a 300px legend. */
.ui-cycles { padding: 8px 0 48px; outline: none; }
.ui-cycle-row { position: relative; display: flex; gap: 0; color: var(--ui-label-title); border-radius: 8px; }
.ui-cycle-row:hover .ui-cycle-main, .ui-cycle-row.is-focused .ui-cycle-main { background: var(--ui-bg-base-hover); }
.ui-cycle-rail { position: relative; width: 114px; flex: none; }
.ui-cycle-rail::before { content: ""; position: absolute; left: 74px; top: 0; bottom: 0; width: 1px; background: var(--ui-border); }
.ui-cycle-row.is-current .ui-cycle-rail::before, .ui-cycle-row.is-current ~ .ui-cycle-row .ui-cycle-rail::before { background: var(--ui-border-solid); }
.ui-cycle-date { position: absolute; right: 63px; bottom: -9px; text-align: right; color: var(--ui-label-muted); font: 450 12px/15px var(--ui-font); }
.ui-cycle-node { position: absolute; left: 70px; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ui-bg-base); box-shadow: inset 0 0 0 1.5px var(--ui-border-strong); z-index: 1; }
.ui-cycle-row.is-completed .ui-cycle-node { background: var(--ui-label-faint); box-shadow: none; }
.ui-cycle-row.is-current .ui-cycle-node { background: var(--ui-control-primary); box-shadow: none; }
.ui-cycle-main { flex: 1; min-width: 0; padding: 0 56px 0 12px; border-bottom: 1px solid var(--ui-border-faint); border-radius: 8px; }
.ui-cycle-head { display: flex; align-items: center; gap: 12px; height: 70px; font: 500 13px/normal var(--ui-font); }
.ui-cycle-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ui-cycle-name { min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ui-cycle-icon { flex: none; color: var(--ui-label-faint); }
.ui-cycle-icon-play { fill: var(--ui-label-base); }
.ui-cycle-icon.is-completed { color: var(--ui-label-faint); }
.ui-cycle-icon.is-current .ui-cycle-icon-play { fill: var(--ui-label-title); }
.ui-cycle-icon-elapsed { stroke: var(--ui-control-primary); }
.ui-cycle-head .ui-badge { height: auto; padding: 2px 6px; border-radius: 2px; text-align: left; font: 450 13px/normal var(--ui-font); }
.ui-cycle-stat { display: inline-flex; align-items: center; color: var(--ui-label-muted); font: 450 13px/normal var(--ui-font); white-space: nowrap; }
.ui-cycle-stat b { margin-right: 5px; color: var(--ui-label-title); font-weight: 500; }
.ui-cycle-stat > .ui-ring { width: 16px; height: 16px; margin-right: 8px; }
.ui-cycle-stat > .ui-ring + b { color: var(--ui-label-base); }
.ui-cycle-stat.is-over .ui-ring-fill, .ui-cycle-stat.is-over .ui-ring-track { stroke: var(--ui-red); }
.ui-cycle-chart { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; margin: -12px -56px 0 0; padding: 0 60px 20px 0; }
.ui-breakdown-tabs { display: inline-flex; margin-bottom: 12px; }
.ui-breakdown-tabs .ui-segment { padding: 0 10px; }
.ui-breakdown { display: flex; flex-direction: column; gap: 2px; }
.ui-breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 76px; align-items: center; gap: 10px; min-height: 28px; font-size: 12px; }
.ui-breakdown-name { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-label-base); font-weight: 500; }
.ui-breakdown-bar { height: 6px; border-radius: 3px; background: var(--ui-bg-shade); overflow: hidden; }
.ui-breakdown-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--ui-chart-completed); }
.ui-breakdown-num { color: var(--ui-label-muted); text-align: right; white-space: nowrap; }

/* charts (inline SVG) */
.ui-chart { display: block; width: 100%; height: 100%; overflow: visible; }
.ui-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart-line.is-scope { stroke: var(--ui-chart-scope); }
.ui-chart-line.is-started { stroke: var(--ui-chart-started); }
.ui-chart-line.is-completed { stroke: var(--ui-chart-completed); }
.ui-chart-line.is-created { stroke: var(--ui-series-1); }
.ui-chart-axis { stroke: var(--ui-border-solid); stroke-width: 1; }
.ui-chart-grid { stroke: var(--ui-border-faint); stroke-width: 1; }
.ui-chart-hit { fill: transparent; }
.ui-chart-hit:hover { fill: color-mix(in srgb, var(--ui-label-faint) 12%, transparent); }
.ui-chart-bar { stroke: var(--ui-bg-base); stroke-width: 1; }
.ui-chart-bar.is-series-0, .ui-legend-dot.is-series-0 { fill: var(--ui-series-0); background: var(--ui-series-0); }
.ui-chart-bar.is-series-1, .ui-legend-dot.is-series-1 { fill: var(--ui-series-1); background: var(--ui-series-1); }
.ui-chart-bar.is-series-2, .ui-legend-dot.is-series-2 { fill: var(--ui-series-2); background: var(--ui-series-2); }
.ui-chart-bar.is-series-3, .ui-legend-dot.is-series-3 { fill: var(--ui-series-3); background: var(--ui-series-3); }
.ui-chart-bar.is-series-4, .ui-legend-dot.is-series-4 { fill: var(--ui-series-4); background: var(--ui-series-4); }
.ui-chart-bar.is-series-5, .ui-legend-dot.is-series-5 { fill: var(--ui-series-5); background: var(--ui-series-5); }
.ui-chart-bar.is-series-6, .ui-legend-dot.is-series-6 { fill: var(--ui-series-6); background: var(--ui-series-6); }
.ui-chart-bar:hover { opacity: .8; }
.ui-insights { max-width: 960px; margin: 0 auto; padding: 24px 32px 64px; display: flex; flex-direction: column; gap: 20px; }
.ui-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ui-stat { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--ui-radius-lg); box-shadow: inset 0 0 0 1px var(--ui-border-faint); color: var(--ui-label-muted); font-size: 12px; }
.ui-stat b { color: var(--ui-label-title); font: 500 24px/1 var(--ui-font); }
.ui-chart-card { padding: 16px 18px; border-radius: var(--ui-radius-lg); box-shadow: inset 0 0 0 1px var(--ui-border-faint); }
.ui-chart-card h3 { margin: 0 0 14px; color: var(--ui-label-title); font: 500 13px/1.2 var(--ui-font); }
.ui-chart-card h3 small { margin-left: 6px; color: var(--ui-label-muted); font-weight: 450; }
.ui-chart-frame { position: relative; height: 180px; margin-left: 28px; }
.ui-chart-yticks span { position: absolute; left: -28px; width: 22px; transform: translateY(-50%); text-align: right; color: var(--ui-label-faint); font: 450 11px/1 var(--ui-font); }
.ui-chart-xlabels { display: flex; margin: 6px 0 0 28px; }
.ui-chart-xlabels span { flex: 1; text-align: center; color: var(--ui-label-muted); font: 450 11px/1 var(--ui-font); white-space: nowrap; }
.ui-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--ui-label-base); font-size: 12px; }
.ui-chart-legend li { display: inline-flex; align-items: center; }
.ui-chart-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 11px; color: var(--ui-label-muted); }
.ui-chart-table th, .ui-chart-table td { padding: 4px 6px; border-top: 1px solid var(--ui-border-faint); text-align: right; font-weight: 450; }
.ui-chart-table th:first-child { text-align: left; color: var(--ui-label-base); font-weight: 500; }
.ui-slice-table { font-size: 12px; }

/* ---------- popovers and menus ---------- */

#ui-overlays { position: relative; font-family: var(--ui-font); }
.ui-popover {
  position: fixed;
  z-index: var(--ui-z-popover);
  min-width: 180px;
  max-height: calc(100vh - 16px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-medium);
  color: var(--ui-label-base);
  font: 450 13px/normal var(--ui-font);
  opacity: 0;
  transform: scale(.98);
  transform-origin: top left;
  transition: opacity var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in-fade), transform var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in);
  outline: none;
  -webkit-font-smoothing: antialiased;
}
.ui-popover.is-shown { opacity: 1; transform: none; }
/* Closing: a popover's spring (tension 2000), a menu's (Linear's contextual menu, 2500);
   a submenu opens and closes at once, as Linear's (immediate). */
/* A contextual menu opens on its own spring (precision .001, Linear's getContextualMenuSpringConfig). */
.ui-popover.ui-menu { transition: opacity var(--ui-spring-menu-in-ms) var(--ui-spring-menu-in-fade), transform var(--ui-spring-menu-in-ms) var(--ui-spring-menu-in); }
.ui-popover.is-leaving { opacity: 0; transform: scale(.98); transition: opacity var(--ui-spring-pop-out-ms) var(--ui-spring-pop-out-fade), transform var(--ui-spring-pop-out-ms) var(--ui-spring-pop-out); pointer-events: none; }
.ui-popover.ui-menu.is-leaving { transition: opacity var(--ui-spring-menu-out-ms) var(--ui-spring-menu-out-fade), transform var(--ui-spring-menu-out-ms) var(--ui-spring-menu-out); }
.ui-popover.is-submenu, .ui-popover.is-submenu.is-leaving { transition: none; }
.ui-menu { width: max-content; min-width: 242px; max-width: 500px; }
.ui-menu-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 37px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--ui-border-faint);
  flex: none;
}
.ui-menu-input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 36px;
  padding: 10px 0 9px;
  border: 0;
  background: transparent;
  color: var(--ui-label-base);
  font: 400 13px var(--ui-font);
  outline: none !important;
}
.ui-menu-list { overflow-y: auto; padding: 6px 0; scrollbar-width: thin; outline: none; }
/* A row's context menu (and the bulk bar's Actions) is as tall as Linear's: the window. */
.ui-popover.ui-context-menu { max-height: calc(100vh - 16px); }
.ui-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 18px 0 14px;
  color: var(--ui-label-base);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.ui-menu-item::before {
  content: "";
  position: absolute;
  inset: 0 6px;
  border-radius: var(--ui-radius);
  background: transparent;
  z-index: -1;
}
.ui-menu-item { isolation: isolate; }
.ui-menu-item.is-active::before { background: var(--ui-bg-focus); }
.ui-menu-item[aria-disabled="true"] { color: var(--ui-label-faint); }
.ui-menu-icon { display: inline-flex; align-items: center; width: 16px; justify-content: center; flex: none; color: var(--ui-label-muted); }
.ui-menu-icon .ui-icon { width: 14px; height: 14px; }
.ui-menu-icon .ui-avatar { width: 18px; height: 18px; }
.ui-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-menu-label mark { background: none; color: var(--ui-label-title); font-weight: 600; }
.ui-menu-desc { color: var(--ui-label-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
/* A description sits right after the label ("Start date… Oct 10"), as Linear's. */
.ui-menu-item:has(> .ui-menu-desc) .ui-menu-label { flex: 0 1 auto; }
.ui-menu-tail { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; color: var(--ui-label-muted); }
.ui-menu-hint { color: var(--ui-label-faint); font-size: 12px; }
.ui-menu-shortcut { display: inline-flex; align-items: center; color: var(--ui-label-muted); font: 500 12px/1.1 var(--ui-font); font-feature-settings: "cv08", "zero"; text-align: center; white-space: nowrap; }
.ui-menu-shortcut .ui-kbd { display: inline; min-width: 0; height: auto; padding: 0; border: 0; color: var(--ui-label-muted); font: inherit; }
.ui-menu-shortcut { gap: 3px; }
.ui-menu-shortcut .ui-kbd + .ui-kbd { margin-left: 0; }
.ui-menu-shortcut .ui-kbd-then { margin: 0; color: var(--ui-label-muted); font-size: 12px; font-weight: 450; }
.ui-menu-search .ui-menu-shortcut .ui-kbd { display: block; min-width: 18px; height: 19px; padding: 2px; border: 1px solid var(--ui-border-faint); font-weight: 400; }
.ui-menu-tick { width: 14px; height: 14px; color: var(--ui-label-base); }
/* The submenu arrow: Linear's small solid triangle, faint, flush with the row's end. */
.ui-menu-caret { width: 16px; height: 16px; flex: none; color: var(--ui-label-faint); }
.ui-context-menu .ui-menu-icon .ui-icon { width: 16px; height: 16px; }
.ui-menu-header { padding: 10px 14px 6px; color: var(--ui-label-faint); font-size: 12px; font-weight: 500; }
.ui-menu-divider { height: 12px; padding: 6px 0; }
.ui-menu-divider::before { content: ""; display: block; height: 1px; background: var(--ui-border); }
.ui-menu-empty { padding: 10px 14px 12px; color: var(--ui-label-faint); }
.ui-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--ui-border-solid);
  color: transparent;
  transition: background-color 80ms ease-out, box-shadow 80ms ease-out, opacity 80ms ease-out;  /* Linear's checkbox */
}
.ui-check .ui-icon { width: 12px; height: 12px; }
.ui-check.is-checked { background: var(--ui-control-primary); box-shadow: none; color: var(--ui-control-primary-label); }
.ui-menu-item:not(.is-active) .ui-check:not(.is-checked) { opacity: 0; } /* Linear shows the box on hover or once ticked */
.ui-menu.is-loading .ui-menu-search::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--ui-border);
  border-top-color: var(--ui-label-muted);
  animation: ui-spin .6s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------- display menu ---------- */

.ui-display-panel { width: 302px; overflow-y: auto; display: block; }
.ui-display-section { padding: 12px 16px; }
.ui-display-section + .ui-display-section { border-top: 1px solid var(--ui-border); }
.ui-display-section:first-child { padding: 10px 10px; }
.ui-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ui-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-bg-base);
  box-shadow: inset 0 0 0 1px var(--ui-control-ring);
  color: var(--ui-label-muted);
  font: 500 12px/1 var(--ui-font);
}
.ui-segment:hover { color: var(--ui-label-title); }
.ui-segment.is-active { background: var(--ui-control-secondary-selected); box-shadow: inset 0 0 0 1px var(--ui-border); color: var(--ui-label-title); }
.ui-segment .ui-icon { width: 14px; height: 14px; }
/* Linear's Display menu: a 32px layout switch flush with the panel's 8px inset, 32px
   rows (label left at its own width, control right), headings and labels at the font's
   normal line height (1.21). */
.ui-display-panel .ui-display-section:first-child { padding: 16px 8px 5px; }
.ui-display-panel .ui-segmented { gap: 2px; margin: -2px 0; border-radius: 5px; background: var(--ui-bg-base); }
.ui-display-panel .ui-segment { height: 32px; gap: 0; background: none; box-shadow: none; }
.ui-display-panel .ui-segment .ui-icon { margin-right: 6px; }
.ui-display-panel .ui-segment.is-active { background: var(--ui-control-secondary-selected); box-shadow: none; }
.ui-display-row { display: flex; align-items: center; gap: 0; min-height: 32px; color: var(--ui-label-muted); font: 500 12px/1.21 var(--ui-font); }
.ui-display-label { flex: 0 1 auto; min-width: 0; text-align: left; }
.ui-display-row > .ui-select, .ui-display-row > .ui-switch { margin-left: auto; }
.ui-display-row > .ui-select { width: 117px; margin-top: 1px; margin-bottom: 1px; }
.ui-display-row-icon { width: 14px; height: 14px; margin: 0 8px 0 auto; color: var(--ui-label-muted); }
.ui-display-row > .ui-display-row-icon + .ui-select { margin-left: 0; }
.ui-display-heading { margin: 8px 0 2px; color: var(--ui-label-base); font: 500 12px/1.21 var(--ui-font); text-align: left; }
.ui-display-heading.is-sub { margin: 8px 0 4px; color: var(--ui-label-muted); }
.ui-select {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 117px;
  max-width: 160px;
  height: 24px;
  margin: 1px 0;
  padding: 1px 18px 1px 8px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius);
  background: var(--ui-control-secondary);
  color: var(--ui-label-base);
  font: 400 12px/normal var(--ui-font);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: none;
}
.ui-select:hover { background: var(--ui-control-secondary-hover); }
.ui-select-caret { width: 12px; height: 12px; color: var(--ui-label-muted); }
.ui-select > .ui-select-caret { position: absolute; top: 0; right: 4px; width: 10px; height: 100%; }
.ui-switch {
  appearance: none;
  position: relative;
  width: 22px;
  height: 14px;
  margin: 0;
  border-radius: 72px;
  background: var(--ui-toggle-off);
  flex: none;
  transition: background-color var(--ui-speed-hover) ease-out;
}
.ui-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 10px;
  height: 10px;
  border-radius: 5px;
  background: #fff;
  font-family: var(--ui-font);
  /* Linear's: the knob's edges move .1s ease-out, the leading one first and the
     trailing one 50ms after, so it stretches on its way across. */
  transition: left .1s ease-out 50ms, right .1s ease-out 0s;
}
.ui-switch:checked { background: var(--ui-control-primary); }
.ui-switch:checked:not(:disabled):hover { background: var(--ui-control-primary-hover); }
.ui-switch:checked::after { left: 10px; right: 2px; transition-delay: 0s, 50ms; }
.ui-display-props { display: flex; flex-wrap: wrap; gap: 0; margin-top: 8px; }
/* (.ui-display-props raises these over `.ui-app button`'s font reset.) */
.ui-display-props .ui-prop-chip {
  height: 24px;
  margin: 0 4px 4px 0;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-control-secondary);
  color: var(--ui-label-muted);
  font: 500 12px/1.21 var(--ui-font);
  white-space: nowrap;
}
.ui-display-props .ui-prop-chip.is-on { background: var(--ui-control-secondary-selected); color: var(--ui-label-title); }
/* Linear's footer while the options differ from the page's default: Reset and "Set
   default for everyone", 24px pills right-aligned under a hairline. */
.ui-display-foot { display: flex; justify-content: flex-end; gap: 4px; padding: 8px; border-top: 1px solid var(--ui-border); }
.ui-display-foot .ui-btn { height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--ui-radius-pill); background: none; box-shadow: none; color: var(--ui-label-title); font: 500 12px/1 var(--ui-font); }
.ui-display-foot .ui-btn:hover { background: var(--ui-control-secondary-hover, var(--ui-control-secondary-selected)); }
.ui-display-foot .ui-display-publish { color: var(--ui-label-link); }

/* ---------- command palette ---------- */

.ui-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--ui-z-command);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 13vh;
  background: transparent;
}
.ui-palette {
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 32px));
  max-height: min(450px, 76vh);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-high);
  color: var(--ui-label-base);
  font: 400 15px/1.5 var(--ui-font);
  overflow: hidden;
  opacity: 0;
  transform: scale(.98);
  transition: opacity var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in-fade), transform var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in);
}
.ui-palette-backdrop.is-shown .ui-palette { opacity: 1; transform: none; }
/* Linear's command menu closes to scale .96 on the menu spring (tension 2500). */
.ui-palette-backdrop.is-leaving .ui-palette { opacity: 0; transform: scale(.96); transition: opacity var(--ui-spring-menu-out-ms) var(--ui-spring-menu-out-fade), transform var(--ui-spring-menu-out-ms) var(--ui-spring-menu-out); }
.ui-palette-chips { display: flex; gap: 6px; min-width: 0; padding: 14px 16px 0; }
.ui-palette-chips[hidden] { display: none; }
/* The target chip: "RED-12 ⋅ Title" and its ⌫ (clear context) button. */
.ui-palette-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  height: 22px;
  padding: 0 3px 0 7px;
  border-radius: 6px;
  background: var(--ui-bg-focus);
  color: var(--ui-label-base);
  font: 450 12px/18px var(--ui-font);
  white-space: nowrap;
}
.ui-palette-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-palette-chip-id { color: var(--ui-label-muted); }
.ui-palette-chip-clear { display: inline-flex; flex: none; padding: 0; border: 0; background: none; color: var(--ui-label-muted); cursor: default; }
.ui-palette-chip-clear .ui-kbd { min-width: 16px; height: 16px; padding: 0 3px; border: 0; background: none; font-size: 11px; }
.ui-palette-chip-clear:hover { color: var(--ui-label-title); }
.ui-palette-input {
  height: 40px;
  margin: 6px 4px 0 6px;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ui-label-base);
  font: 400 13px var(--ui-font);
  outline: none !important;
  flex: none;
}
.ui-palette-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ui-palette-body::-webkit-scrollbar { display: none; }
.ui-palette-list { padding: 6px 7px 8px 6px; }
.ui-palette-item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 12px;
  color: var(--ui-label-base);
  font-size: 15px;
  white-space: nowrap;
  cursor: default;
}
.ui-palette-item::before { content: ""; position: absolute; inset: 0; border-radius: var(--ui-radius); z-index: -1; }
.ui-palette-item .ui-menu-label { flex: 0 1 auto; font: 450 13px/1.2 var(--ui-font); }
.ui-palette-item.is-active { color: var(--ui-label-title); }
.ui-palette-item.is-active::before { background: var(--ui-bg-focus); }
.ui-palette-item .ui-menu-icon .ui-icon { width: 16px; height: 16px; }
.ui-palette-item .ui-menu-icon { color: var(--ui-label-muted); }
.ui-palette-item.is-active .ui-menu-icon { color: var(--ui-label-title); }
.ui-palette-item .ui-menu-shortcut .ui-kbd { display: block; border: 1px solid var(--ui-border-faint); border-radius: 3px; background: transparent; min-width: 20px; height: auto; padding: 4px; color: var(--ui-label-muted); font: 450 12px/1.1 var(--ui-font); }
.ui-palette-list .ui-menu-header { padding: 8px 12px; color: var(--ui-label-muted); line-height: 1.2; white-space: nowrap; }
.ui-palette-status:empty { display: none; }
.ui-palette-status { padding: 18px 24px 22px; color: var(--ui-label-faint); }
.ui-palette-item .ui-menu-prefix { margin-right: 8px; color: var(--ui-label-muted); }
.ui-palette-item .ui-menu-hint { color: var(--ui-label-faint); }
/* Search results' footer: Open, Open in new tab, Quick look. */
.ui-palette-foot { display: flex; align-items: center; gap: 18px; flex: none; height: 36px; padding: 0 16px; border-top: 1px solid var(--ui-border-faint); color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-palette-foot[hidden] { display: none; }
.ui-palette-hint { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ui-palette-hint.is-end { margin-left: auto; }
.ui-palette-hint .ui-kbd { min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; }
.ui-palette.is-loading .ui-palette-input { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-control-primary) 40%, transparent), transparent); background-size: 40% 1px; background-repeat: no-repeat; background-position: -40% 100%; animation: ui-load 1s linear infinite; }
@keyframes ui-load { to { background-position: 140% 100%; } }

/* ---------- peek panel ---------- */

.ui-peek {
  position: fixed;
  z-index: var(--ui-z-peek);
  top: calc(var(--ui-header-height) * 2);
  right: 24px;
  width: min(417px, calc(100vw - 48px));
  max-height: min(600px, calc(100vh - var(--ui-header-height) * 2 - 48px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-high);
  color: var(--ui-label-title);
  overflow: hidden auto;
  /* Linear's peek: 20px from the right and opacity, on the slide spring, both ways. */
  transform: translateX(20px);
  opacity: 0;
  transition: opacity var(--ui-spring-slide-ms) var(--ui-spring-slide), transform var(--ui-spring-slide-ms) var(--ui-spring-slide);
}
.ui-peek.is-shown { transform: none; opacity: 1; }
.ui-peek-head { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; align-items: center; gap: 2px; }
.ui-peek-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px; }
.ui-peek-body .ui-issue-title { font-size: 18px; line-height: 1.21; letter-spacing: normal; font-weight: var(--ui-weight-medium); text-align: left; margin: 0 0 6px; }
.ui-peek-body .ui-issue-desc { font-size: var(--ui-text-small); line-height: 1.6; margin: 0; padding: 8px 0; }
.ui-peek-body[aria-busy="true"] { opacity: .5; transition: opacity var(--ui-speed-hover) 150ms; }
.ui-peek-error { color: var(--ui-label-muted); }

/* ---------- toasts ---------- */

.ui-toasts {
  position: fixed;
  z-index: var(--ui-z-toast);
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 384px;
  max-width: calc(100vw - 64px);
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-high);
  color: var(--ui-label-base);
  font: 450 13px/18px var(--ui-font);
  pointer-events: auto;
  /* Linear's toasts are Sonner's: in from a full height below, out a full height up,
     transform and opacity .4s (the toast leaves the page 200ms in). */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .4s, transform .4s, box-shadow .2s;
}
.ui-toast.is-shown { opacity: 1; transform: none; }
.ui-toast.is-leaving { opacity: 0; transform: translateY(-100%); }
.ui-toast-icon { width: 16px; height: 16px; margin-top: 1px; color: var(--ui-label-muted); }
.ui-toast-warning .ui-toast-icon { color: var(--ui-yellow); }
.ui-toast-success .ui-toast-icon { color: var(--ui-green); }
.ui-toast-error .ui-toast-icon { color: var(--ui-red); }
.ui-toast-body { flex: 1; min-width: 0; }
.ui-toast-title { color: var(--ui-label-title); font-size: var(--ui-text-small); font-weight: var(--ui-weight-medium); }
.ui-toast-desc { color: var(--ui-label-muted); font-size: var(--ui-text-small); font-weight: var(--ui-weight-normal); margin-top: 6px; }
.ui-toast-action { height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--ui-bg-focus); color: var(--ui-label-title); font: 500 12px/1 var(--ui-font); }
.ui-toast-action:hover { background: var(--ui-bg-base-hover); }
.ui-toast-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 6px; border: 0; border-radius: var(--ui-radius-pill); background: transparent; color: var(--ui-label-faint); }
.ui-toast-close:hover { background: var(--ui-bg-focus); color: var(--ui-label-base); }
.ui-toast-close .ui-icon { width: 12px; height: 12px; }

/* ---------- help sheet ---------- */

/* Linear's: a card inset 12px from the right, top and bottom, 360px wide, over a dimmed
   page; the title without an icon; a search field with a magnifier and an accent ring. */
.ui-help {
  position: fixed;
  inset: 12px 12px 12px auto;
  width: 360px;
  max-width: calc(100vw - 24px);
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ui-border-faint);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-high);
  color: var(--ui-label-base);
  font: 450 13px/1.4 var(--ui-font);
  overflow: hidden;
}
.ui-help[open] { display: flex; flex-direction: column; animation: ui-slide-in var(--ui-spring-slide-ms) var(--ui-spring-slide); }
.ui-help::backdrop { background: var(--ui-overlay); }
.ui-help-head { display: flex; align-items: center; gap: 8px; padding: 16px 14px 0 20px; font: 600 15px/23px var(--ui-font); color: var(--ui-label-title); }
.ui-help-head form { margin-left: auto; }
.ui-help-find { position: relative; display: block; margin: 14px 20px 6px; }
.ui-help-find > .ui-icon { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ui-label-title); pointer-events: none; }
.ui-help-search {
  width: 100%; height: 44px; padding: 0 12px 0 36px;
  border: 1px solid var(--ui-border-solid); border-radius: 10px;
  background: var(--ui-bg-base); color: var(--ui-label-title); font: 400 13px var(--ui-font); outline: none;
}
.ui-app .ui-help-search:focus-visible, .ui-help-search:focus { outline: 1px solid var(--ui-focus-color); outline-offset: 0; border-color: var(--ui-focus-color); }
.ui-help-body { flex: 1; overflow-y: auto; padding: 0 20px 24px; }
.ui-help-group h3 { margin: 20px 0 8px; color: var(--ui-label-title); font: 500 13px/1 var(--ui-font); }
.ui-help-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; color: var(--ui-label-muted); font-weight: 500; }
.ui-help-keys { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.ui-help-keys .ui-kbd { min-width: 20px; height: 23px; padding: 0 4px; border: 1px solid var(--ui-border-faint); border-radius: 3px; background: transparent; color: var(--ui-label-muted); font-size: 12px; }
@keyframes ui-slide-in { from { opacity: 0; transform: translateX(20px); } }

/* ---------- tooltips ---------- */

.ui-tooltip {
  position: fixed;
  z-index: var(--ui-z-tooltip);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  padding: 5px 8px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-low);
  color: var(--ui-label-base);
  font: 450 var(--ui-text-mini)/1.4 var(--ui-font);
  pointer-events: none;
  opacity: 0;
  transform: scale(.98);
  transition: opacity var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in-fade), transform var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in);
}
.ui-tooltip.is-shown { opacity: 1; transform: none; }
.ui-tooltip .ui-kbd { height: 19px; min-width: 18px; }
.ui-tooltip-keys { display: inline-flex; align-items: center; gap: 3px; margin-right: -3px; }  /* the caps end 5px inside the edge */
.ui-tooltip .ui-kbd + .ui-kbd { margin-left: 0; }
.ui-tooltip .ui-kbd-then { margin: 0 1px; }
.ui-tooltip.is-steps { flex-direction: column; align-items: flex-start; gap: 6px; }
.ui-tooltip-step { white-space: nowrap; }
.ui-tooltip-step > .ui-tooltip-keys { margin-right: 0; vertical-align: middle; }

/* ---------- modal and bulk bar ----------
   The new-issue modal (Linear's: 740px, top 15vh, menu surface, shadowHigh, a dimmed
   page) and the floating bar of bulk actions over a selection (kit extension, apps.web). */

.ui-modal-backdrop {
  position: fixed; inset: 0; z-index: var(--ui-z-modal-backdrop);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 13vh;
  background: var(--ui-overlay); opacity: 0; transition: opacity var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in-fade);
}
.ui-modal-backdrop.is-shown { opacity: 1; }
.ui-modal {
  width: min(750px, calc(100vw - 32px)); max-height: 80vh; display: flex; flex-direction: column;
  border: 1px solid var(--ui-border); border-radius: 21px;
  background: var(--ui-bg-base); box-shadow: var(--ui-shadow-high); color: var(--ui-label-base);
  transform: scale(.98); transition: transform var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in);
}
.ui-modal-backdrop.is-shown .ui-modal { transform: none; }
.ui-modal-form { display: flex; flex-direction: column; min-height: 0; }
.ui-modal-head { display: flex; align-items: center; gap: 6px; padding: 14px 14px 0 18px; font: 500 12px/1 var(--ui-font); }
.ui-modal-team {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 6px; border: 0;
  border-radius: var(--ui-radius); background: var(--ui-control-secondary); color: var(--ui-label-base);
  box-shadow: 0 0 0 1px var(--ui-control-ring); font: 500 12px/1 var(--ui-font);
}
.ui-modal-title { color: var(--ui-label-title); }
.ui-modal-close { margin-left: auto; color: var(--ui-label-base); }
.ui-app .ui-modal-close.ui-icon-btn { width: 32px; height: 32px; border-radius: 16px; }
.ui-modal-close .ui-icon { width: 16px; height: 16px; }
.ui-modal-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 4px; overflow: auto; }
.ui-modal-input-title, .ui-modal-input-desc {
  width: 100%; border: 0; padding: 0; background: transparent; color: var(--ui-label-title); resize: none; outline: none;
}
.ui-modal-input-title { font: 600 18px/1.6 var(--ui-font); }
.ui-modal-input-desc { min-height: 64px; color: var(--ui-label-base); font: 450 15px/24px var(--ui-font); }
.ui-modal-props { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 18px 14px; }
.ui-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 220px; padding: 0 8px 0 6px;
  border: 0; border-radius: var(--ui-radius-pill); background: var(--ui-control-secondary); color: var(--ui-label-muted);
  box-shadow: 0 0 0 1px var(--ui-border-solid); font: 450 12px/1 var(--ui-font); white-space: nowrap; cursor: default;
}
.ui-pill span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ui-pill:hover { background: var(--ui-control-secondary-hover); color: var(--ui-label-title); }
.ui-pill.is-set { color: var(--ui-label-base); }
.ui-pill [data-web-prop-icon] { display: inline-flex; }
.ui-pill .ui-icon { width: 14px; height: 14px; }
.ui-pill .ui-avatar { width: 14px; height: 14px; font-size: 7px; }
.ui-modal-foot { display: flex; align-items: center; gap: 12px; padding: 10px 14px 14px; }
.ui-modal-expand { margin-left: auto; color: var(--ui-label-base); }
.ui-modal-expand + .ui-modal-close { margin-left: 0; }
.ui-pill-icon { padding: 0 5px; }
.ui-pill [hidden], .ui-pill[hidden] { display: none; }
/* Expanded: a larger editor, the description taking the height. */
.ui-modal.is-expanded { width: min(820px, calc(100vw - 24px)); height: calc(100vh - 112px); max-height: none; }
.ui-modal-backdrop:has(.ui-modal.is-expanded) { padding-top: 56px; }
.ui-modal.is-expanded .ui-modal-form, .ui-modal.is-expanded .ui-modal-body, .ui-modal.is-expanded .ui-modal-input-desc { flex: 1; }
.ui-modal-more { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-modal-error { margin: 0; color: var(--ui-red); font: 450 12px/1.4 var(--ui-font); }

/* Linear's selection bar: "n selected", a suggested move, Actions, close; one line. */
.ui-bulkbar {
  position: absolute; left: 50%; bottom: 24px; z-index: var(--ui-z-sticky); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; height: 44px; max-width: calc(100% - 32px); padding: 8px;
  border-radius: 22px; background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-medium); color: var(--ui-label-base); white-space: nowrap;
}
.ui-bulkbar-count { flex: none; padding: 0 2px 0 12px; color: var(--ui-label-title); font: 400 12px/18px var(--ui-font); }
.ui-bulkbar-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; min-width: 0; padding: 0 10px; border: 0;
  border-radius: var(--ui-radius); background: var(--ui-control-secondary); box-shadow: inset 0 0 0 1px var(--ui-border-solid);
  color: var(--ui-label-base); font: 500 13px/1 var(--ui-font); white-space: nowrap; cursor: default;
}
.ui-bulkbar-btn:hover { background: var(--ui-control-secondary-hover); color: var(--ui-label-title); }
.ui-bulkbar-btn .ui-icon { width: 14px; height: 14px; flex: none; }
.ui-bulkbar-icon { display: inline-flex; flex: none; }
.ui-bulkbar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-bulkbar-key { flex: none; color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-bulkbar-close { flex: none; color: var(--ui-label-muted); }
@media (max-width: 768px) {
  /* a phone: the bar spans the width, 12px in from each edge, above the home bar */
  .ui-bulkbar { left: 12px; right: 12px; bottom: 16px; max-width: none; transform: none; padding-left: 12px; }
  .ui-bulkbar-btn[data-web-bulk-suggest] { flex: 0 1 auto; }
  .ui-bulkbar-close { margin-left: auto; }
}
@media (max-width: 480px) {
  .ui-bulkbar-key { display: none; }
  .ui-bulkbar-count { margin-right: 2px; }
}

/* ---------- sign-in page ----------
   Linear's login: the page base, a centred column of 48px buttons under the mark
   and a 24px title (kit extension for apps.web's login). */

.ui-auth-page { min-height: 100vh; display: grid; place-items: center; background: var(--ui-bg-base); }
.ui-auth { width: 320px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; align-items: center; padding-bottom: 10vh; }
.ui-auth-logo {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 32px;
  border-radius: 12px; background: var(--ui-control-primary); color: var(--ui-control-primary-label);
  font: 600 22px/1 var(--ui-font);
}
.ui-auth-title { margin: 0 0 32px; font: 500 var(--ui-text-title2)/2rem var(--ui-font); letter-spacing: -0.01rem; color: var(--ui-label-title); }
.ui-auth-actions, .ui-auth-form, .ui-auth-email { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ui-auth-email > summary { list-style: none; }
.ui-auth-email > summary::-webkit-details-marker { display: none; }
.ui-auth-email[open] > summary { display: none; }
.ui-auth-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 16px;
  border: 0; border-radius: var(--ui-radius); background: var(--ui-control-secondary); color: var(--ui-label-title);
  box-shadow: 0 0 0 1px var(--ui-control-ring), var(--ui-shadow-low);
  font: 500 var(--ui-text-small)/1 var(--ui-font); cursor: pointer;
  transition: background-color var(--ui-speed-hover);
}
.ui-auth-btn:hover { background: var(--ui-control-secondary-hover); }
.ui-auth-btn-primary, .ui-app .ui-auth-btn-primary { background: var(--ui-control-primary); color: var(--ui-control-primary-label); box-shadow: var(--ui-shadow-low); }
.ui-auth-btn-primary:hover { background: var(--ui-control-primary-hover); }
.ui-auth-input {
  width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: var(--ui-radius);
  background: var(--ui-control-secondary); color: var(--ui-label-title);
  box-shadow: 0 0 0 1px var(--ui-border); font: 450 var(--ui-text-small)/1 var(--ui-font);
}
.ui-auth-input::placeholder { color: var(--ui-label-faint); }
.ui-auth-input:focus { outline: none; box-shadow: 0 0 0 1px var(--ui-focus-color); }
.ui-auth-error { margin: -16px 0 16px; color: var(--ui-red); font: 450 var(--ui-text-small)/1.4 var(--ui-font); text-align: center; }
.ui-auth-note { margin: 0; color: var(--ui-label-muted); font: 450 var(--ui-text-small)/1.4 var(--ui-font); text-align: center; }

/* ---------- views, favourites, dialogs and settings ----------
   Kit extension for apps.view_pages. Values measured on linear.app (light): settings
   column 640px, cards radius 10 on the elevated surface with the board card's ring,
   rows padding 16, section titles 15px/500, page titles 24px/500; the Views list
   rows 58px (name and description); the new-view header and its Save-to menu. */

.ui-avatar-24 { width: 24px; height: 24px; font-size: 10px; }
.ui-avatar-32 { width: 32px; height: 32px; font-size: 12px; }


/* the header star */
.ui-star .ui-star-on { display: none; }
.ui-star.is-on .ui-star-on { display: inline-block; color: var(--ui-yellow); }
.ui-star.is-on .ui-star-off { display: none; }
.ui-save-view { margin-left: 2px; color: var(--ui-label-muted); }

/* sidebar favourites */
.ui-favorites .ui-nav-item .ui-status { width: 14px; height: 14px; margin: 0 1px; }
.ui-fav-folder .ui-team { color: var(--ui-label-muted); }
.ui-fav-children { min-height: 4px; }
.ui-favorites [data-ui-drop].is-drop-target { border-radius: var(--ui-radius); background: var(--ui-sidebar-link-bg); }

/* form controls */
.ui-input {
  height: 32px;
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ui-radius);
  background: var(--ui-control-secondary);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-label-title);
  font: 450 13px/1 var(--ui-font);
  transition: box-shadow var(--ui-speed-hover);
}
.ui-input:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ui-border-hover); }
.ui-input:disabled { color: var(--ui-label-muted); background: transparent; }
.ui-input-select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--ui-label-muted) 50%), linear-gradient(135deg, var(--ui-label-muted) 50%, transparent 50%); background-position: calc(100% - 15px) 14px, calc(100% - 11px) 14px; background-size: 4px 4px; background-repeat: no-repeat; }
.ui-input-compact { height: 28px; width: auto; }
.ui-input-compact.ui-input-select { background-position: calc(100% - 15px) 12px, calc(100% - 11px) 12px; }
.ui-input-short { width: 64px; }
.ui-input-multi { height: auto; min-height: 64px; padding: 6px 8px; }
.ui-input-bare { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
.ui-input-bare:focus { box-shadow: 0 1px 0 var(--ui-focus-color); }
.ui-input-group { display: flex; align-items: center; gap: 0; }
.ui-input-group .ui-input { border-radius: 0 var(--ui-radius) var(--ui-radius) 0; }
.ui-colour-input { width: 34px; height: 32px; flex: none; padding: 8px; border: 0; border-radius: var(--ui-radius) 0 0 var(--ui-radius); background: var(--ui-bg-focus); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-colour-input::-webkit-color-swatch-wrapper { padding: 0; }
.ui-colour-input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ui-colour-input::-moz-color-swatch { border: 0; border-radius: 50%; }
.ui-colour-dot { position: relative; display: inline-flex; width: 16px; height: 16px; flex: none; align-items: center; justify-content: center; }
.ui-colour-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--ui-label-faint)); }
.ui-colour-dot input, .ui-settings-state-icon input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ui-btn-danger { background: var(--ui-red); color: #fff; }
.ui-btn-danger:hover { background: color-mix(in srgb, var(--ui-red) 88%, black); color: #fff; }
/* a settings row's switch (linear.app: a 30x20 track, a 14px knob 3px in) */
.ui-switch-lg { width: 30px; height: 20px; }
.ui-switch-lg::after { top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 7px; }
.ui-switch-lg:checked::after { transform: translateX(10px); }

/* The kit's form controls (static/js/select.js): the button a select, a date or a colour
   is chosen with. A select button is the field's own .ui-input-select box with Linear's
   chevron; the native field stays hidden as the form's value. */
/* Linear's select button (computed, settings): 30px, padding 1px 28px 1px 10px, radius
   8, the control surface with the outline ring (1px + shadowLow) drawn by ::after, 13px
   400 in the base label colour, a 10px chevron 11px from the right in the muted colour;
   as wide as its value. */
.ui-select-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 30px;
  padding: 1px 28px 1px 10px;
  border: 1px solid transparent;
  border-radius: var(--ui-control-radius);
  background: var(--ui-control-secondary);
  color: var(--ui-label-base);
  font: 400 13px/normal var(--ui-font);
  text-align: left;
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--ui-speed-hover);
}
.ui-select-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px var(--ui-control-ring), var(--ui-shadow-low); pointer-events: none; transition: box-shadow var(--ui-speed-hover); }
.ui-select-button .ui-select-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-select-button .ui-select-icon { width: 14px; height: 14px; flex: none; margin-right: 6px; }
.ui-select-button .ui-select-chevron { position: absolute; top: 50%; right: 11px; width: 10px; height: 10px; margin-top: -5px; color: var(--ui-label-muted); }
@media (any-hover: hover) and (any-pointer: fine) {
  .ui-select-button:not(:disabled):hover { background: var(--ui-control-secondary-hover); }
  .ui-select-button:not(:disabled):hover::after { box-shadow: 0 0 0 1px var(--ui-control-ring-hover), var(--ui-shadow-low); }
}
.ui-select-button[aria-expanded="true"] { background: var(--ui-control-secondary-hover); }
.ui-select-button:disabled { color: var(--ui-label-muted); }
.ui-select-button:disabled::after { box-shadow: 0 0 0 1px var(--ui-control-ring); }
.ui-date-button.is-empty .ui-select-label { color: var(--ui-label-faint); }
/* Linear's colour picker (select.js colourPicker): its nine swatches in a row and the
   custom-colour toggle; custom mode is a HEX field over a hue and shade area. */
.ui-colour-picker { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; }
.ui-colour-picker-row { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.ui-colour-swatch { position: relative; width: 16px; height: 16px; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--dot); }
.ui-colour-swatch.is-active { box-shadow: 0 0 0 2px var(--ui-bg-base), 0 0 0 3.5px var(--dot); }
.ui-colour-swatch.is-invalid { background: transparent; box-shadow: inset 0 0 0 1px var(--ui-border-solid); }
.ui-colour-picker-toggle { position: relative; width: 16px; height: 16px; flex: none; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: conic-gradient(#eb5757, #f2c94c, #4cb782, #26b5ce, #5e6ad2, #eb5757); }
.ui-colour-picker.is-custom .ui-colour-picker-toggle { border-radius: 4px; }
.ui-colour-hex-label { color: var(--ui-label-faint); font: 500 13px/1 var(--ui-font); }
.ui-colour-hex { flex: 1; min-width: 0; width: 80px; height: 24px; padding: 0; border: 0; background: none; color: var(--ui-label-title); font: 500 13px/1 var(--ui-font); }
.ui-colour-area { width: 230px; height: 100px; border-radius: 6px; background: linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: crosshair; touch-action: none; }
.ui-colour-button { display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.ui-colour-button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--dot, var(--ui-label-faint)); }
.ui-colour-dot[role="button"], .ui-settings-state-icon[role="button"] { cursor: default; border-radius: 4px; }

/* An inline popover a page draws ([data-ui-pop], static/js/views.js): its panel hangs
   under its button. */
[data-ui-pop] { position: relative; display: inline-block; }
[data-ui-pop] > .ui-popover { position: absolute; top: calc(100% + 4px); left: 0; opacity: 1; transform: none; z-index: var(--ui-z-popover); }
[data-ui-pop] > .ui-popover[hidden] { display: none; }

/* Linear's day dates (UI.daypicker). The calendar is react-day-picker as Linear draws it:
   26px round days 8px apart, 13px numerals, the weekend columns a shaded band, today
   a grey disc (500), the value the primary colour, a typed preview ringed. */
.ui-daypicker { width: 278px; padding: 12px 10px 4px; }
.ui-daypicker > .ui-daypicker-field { margin: 0 6px; }
.ui-daypicker-field { position: relative; }
.ui-daypicker-input.ui-input { width: 100%; height: 32px; padding: 6px 28px 6px 12px; border-radius: 8px; font: 400 12px var(--ui-font); }
.ui-daypicker-clear { position: absolute; top: 8px; right: 8px; display: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--ui-label-faint); color: var(--ui-bg-base); place-items: center; cursor: default; }
.ui-daypicker-clear .ui-icon { width: 10px; height: 10px; }
.ui-daypicker-field.has-value:hover .ui-daypicker-clear, .ui-daypicker-field.has-value:focus-within .ui-daypicker-clear { display: grid; }
.ui-daypicker-field.is-invalid .ui-daypicker-input { box-shadow: 0 0 0 1px var(--ui-red); }
.ui-daypicker-error { color: var(--ui-red); font: 450 11px/1.4 var(--ui-font); }
.ui-daypicker-error:empty { display: none; }
.ui-daypicker-error:not(:empty) { padding-top: 4px; }
.ui-daypicker-cal { display: flex; gap: 32px; margin: 16px -6px 0; color: var(--ui-label-base); }
.ui-daypicker-month { flex: 1; min-width: 0; }
.ui-daypicker-caption { display: flex; align-items: center; height: 36px; padding: 0 8px; color: var(--ui-label-base); font: 400 12px/18px var(--ui-font); }
.ui-daypicker-caption-text { flex: 1; }
.ui-daypicker-nav { display: flex; gap: 4px; margin-right: -6px; }
.ui-app .ui-daypicker-step.ui-icon-btn { width: 28px; height: 28px; border-radius: 9999px; color: var(--ui-label-muted); }
.ui-daypicker-grid { border-collapse: separate; border-spacing: 8px; margin: -8px 0 0; }
.ui-daypicker-dow { width: 26px; height: 28px; padding: 0; color: var(--ui-label-muted); font: 400 13px var(--ui-font); text-align: center; }
.ui-daypicker-dow.is-weekend { border-radius: 8px 8px 0 0; background: var(--ui-bg-sub); box-shadow: 0 8px 0 0 var(--ui-bg-sub); }
.ui-daypicker-dow.is-weekend:has(+ .is-weekend) { border-top-right-radius: 0; }
.ui-daypicker-dow.is-weekend + .ui-daypicker-dow.is-weekend { border-top-left-radius: 0; box-shadow: -8px 0 0 0 var(--ui-bg-sub), -8px 8px 0 0 var(--ui-bg-sub), 0 8px 0 0 var(--ui-bg-sub); }
.ui-daypicker-cell { width: 26px; height: 26px; padding: 0; }
.ui-daypicker-cell.is-weekend { background: var(--ui-bg-sub); box-shadow: 0 8px 0 0 var(--ui-bg-sub); }
.ui-daypicker-cell.is-weekend + .ui-daypicker-cell.is-weekend { box-shadow: -8px 0 0 0 var(--ui-bg-sub), -8px 8px 0 0 var(--ui-bg-sub), 0 8px 0 0 var(--ui-bg-sub); }
.ui-daypicker-cell.is-weekend.is-last-row { border-radius: 0 0 8px 8px; box-shadow: none; }
.ui-daypicker-cell.is-weekend.is-last-row:has(+ .is-weekend) { border-bottom-right-radius: 0; }
.ui-daypicker-cell.is-weekend.is-last-row + .ui-daypicker-cell.is-weekend.is-last-row { border-radius: 0 0 8px 0; box-shadow: -8px 0 0 0 var(--ui-bg-sub); }
.ui-daypicker-day { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ui-label-base); font: 400 13px/20px var(--ui-font); font-variant-numeric: tabular-nums; cursor: default; }
.is-weekend > .ui-daypicker-day { color: var(--ui-label-muted); }
.ui-daypicker-day.is-outside { color: var(--ui-label-faint); }
.ui-daypicker-day.is-today { background: var(--ui-bg-shade); color: var(--ui-label-title); font-weight: 500; }
.ui-daypicker-day.is-highlighted { background: color-mix(in lch, var(--ui-control-primary) 10%, var(--ui-bg-base)); box-shadow: inset 0 0 0 1px var(--ui-control-primary); color: var(--ui-label-title); }
.ui-daypicker-day.is-picked { background: var(--ui-control-primary); color: var(--ui-control-primary-label); font-weight: 500; }
.ui-daypicker-day:disabled { color: var(--ui-label-faint); opacity: .5; }
@media (any-hover: hover) and (any-pointer: fine) {
  .ui-daypicker-day:not(.is-picked):not(:disabled):hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
  .ui-daypicker-day.is-picked:hover { background: var(--ui-control-primary-hover, var(--ui-control-primary)); }
}
/* The Custom… dialog: "Set due date", the field with its help, two months, the footer. */
.ui-daypicker-dialog > * { padding: 0 16px; }
.ui-daypicker-dialog-head { display: flex; align-items: center; height: 55px; }
.ui-daypicker-dialog-title { flex: 1; color: var(--ui-label-title); font: 500 13px var(--ui-font); }
.ui-daypicker-dialog-verb { color: var(--ui-label-muted); }
.ui-app .ui-daypicker-dialog-close.ui-icon-btn { width: 24px; height: 24px; margin-right: -4px; }
.ui-daypicker-dialog-label { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px; }
.ui-daypicker-dialog-name { color: var(--ui-label-base); font: 500 12px var(--ui-font); }
.ui-daypicker-dialog-help { color: var(--ui-label-muted); font: 400 11px var(--ui-font); }
.ui-daypicker-dialog-foot { display: flex; align-items: center; gap: 6px; padding-top: 16px; padding-bottom: 16px; }
.ui-daypicker-dialog-spacer { flex: 1; }
.ui-daypicker-dialog-foot .ui-btn { height: 24px; padding: 0 8px; border-radius: var(--ui-radius-pill); font: 500 12px var(--ui-font); }
@media (max-width: 640px) {
  .ui-daypicker-dialog .ui-daypicker-month + .ui-daypicker-month { display: none; }
}
/* A due date's qualifier on a row or the issue's property (Linear's icon colours):
   due today and overdue red, due within a week orange. */
.ui-chip.is-due-soon .ui-icon, .ui-prop.is-due-soon .ui-icon { color: var(--ui-orange); }
.ui-chip.is-due-today .ui-icon, .ui-prop.is-due-today .ui-icon,
.ui-chip.is-due-overdue .ui-icon, .ui-prop.is-due-overdue .ui-icon { color: var(--ui-red); }

/* dialogs (Save as view) */
.ui-view-form-head { display: flex; gap: 10px; padding: 16px 16px 8px; }
.ui-view-iconbtn { width: 28px; height: 28px; border-radius: var(--ui-radius); background: var(--ui-bg-focus); }
.ui-view-iconbtn .ui-icon { color: inherit; }
.ui-view-iconpanel { top: 34px; left: 0; width: 324px; padding: 12px; gap: 12px; }
.ui-view-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-border); }
.ui-view-swatch { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ui-view-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ui-bg-base), 0 0 0 3.5px var(--swatch); }
.ui-view-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-view-icons [aria-checked="true"] { background: var(--ui-bg-focus); color: var(--ui-label-title); }
.ui-view-form-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ui-view-name { height: 28px; padding: 0; border: 0; background: transparent; color: var(--ui-label-title); font: 500 18px/28px var(--ui-font); outline: none; }
.ui-view-desc { padding: 0; border: 0; background: transparent; color: var(--ui-label-base); font: 450 13px/20px var(--ui-font); outline: none; }
.ui-view-form-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ui-border); }
.ui-view-saveto { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-label-muted); font: 500 12px/1 var(--ui-font); }
.ui-view-scope > button .ui-icon, .ui-view-scope > button .ui-team-icon { width: 14px; height: 14px; }
.ui-view-scopes { top: 32px; left: 0; width: 220px; }
.ui-view-scopes .ui-menu-item { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }
.ui-view-scopes .ui-menu-item:hover::before { background: var(--ui-bg-focus); }
.ui-view-scopes .ui-menu-item[aria-checked="true"]::after { content: "\2713"; margin-left: auto; color: var(--ui-label-base); }
.ui-view-form-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.ui-view-form .ui-settings-error { margin: 0 16px 8px; }

/* the Views page */
.ui-table-head { height: 36px; padding: 0 24px; border-bottom: 1px solid var(--ui-border-faint); color: var(--ui-label-muted); font: 500 12px/36px var(--ui-font); }
/* Views list: Linear's row is 60px, 18px in and 34px out, with 120px property columns. */
.ui-views-cols { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--views-cols, 1), 120px); align-items: center; gap: 12px; }
.ui-table-head.ui-views-cols { padding: 0 34px 0 18px; border-bottom: 0; font-weight: 450; }
.ui-viewbar-count { padding: 0 8px 0 4px; color: var(--ui-label-base); font: 450 13px/1 var(--ui-font); white-space: nowrap; }
.ui-views-date { color: var(--ui-label-muted); font: 450 13px/1 var(--ui-font); white-space: nowrap; }
.ui-views-lock { margin-left: 4px; color: var(--ui-label-faint); vertical-align: -1px; }
.ui-views-row { position: relative; display: block; padding: 0; border-radius: 8px; color: var(--ui-label-base); }
.ui-views-inner { min-height: 60px; padding: 0 34px 0 18px; }
.ui-views-row::before { content: ""; position: absolute; inset: 0 8px; z-index: -1; border-radius: 8px; }
.ui-views-row { isolation: isolate; }
.ui-views-row:hover::before, .ui-views-row.is-focused::before { background: var(--ui-bg-base-hover); }
.ui-views-name { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ui-views-icon { display: inline-flex; color: var(--ui-label-muted); }
.ui-views-icon > .ui-icon { width: 16px; height: 16px; margin: 4px 3px 4px 0; }
.ui-views-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ui-views-title { overflow: hidden; color: var(--ui-label-title); font: 500 13px/24px var(--ui-font); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ui-views-desc { color: var(--ui-label-muted); font: 450 13px/normal var(--ui-font); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The owner: a 28px pill, the avatar then the name 8px on. */
.ui-views-owner { display: flex; align-items: center; height: 28px; min-width: 0; padding: 3px 6px; border-radius: 9999px; font: 450 13px/normal var(--ui-font); white-space: nowrap; }
.ui-views-owner-name { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.ui-views-owner-name > span { overflow: hidden; color: var(--ui-label-title); text-align: left; }
.ui-views-star { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); }
.ui-views-star .ui-star:not(.is-on) { opacity: 0; }
.ui-views-row:hover .ui-views-star .ui-star { opacity: 1; }
/* linear.app: 13px/1.4 muted text, 28px pill buttons 12px/500 */
/* Linear's empty Views page: a 340px column centred in the list area (14px above the
   middle), the illustration 24px above the title (15px/23px 600), the text 8px under
   it, paragraphs 16px apart, the buttons 24px under the text. */
.ui-scroll:has(> .ui-views-empty) { display: flex; flex-direction: column; padding-bottom: 29px; }
.ui-views-empty { width: 340px; max-width: calc(100% - 32px); margin: auto; color: var(--ui-label-muted); font: 450 13px/1.4 var(--ui-font); }
.ui-views-empty > .ui-illo { display: block; margin-bottom: 24px; }
.ui-views-empty .ui-btn { height: 28px; padding: 0 10px; border-radius: var(--ui-radius-pill); font: 500 12px/1 var(--ui-font); }
.ui-views-empty h2 { margin: 0 0 8px; color: var(--ui-label-base); font: 600 15px/23px var(--ui-font); }
.ui-views-empty p { margin: 0 0 16px; }
.ui-views-empty p:last-of-type { margin-bottom: 24px; }
.ui-views-empty .ui-btn + .ui-btn { margin-left: 6px; }
.ui-views-empty .ui-btn-primary { color: var(--ui-control-primary-label); } /* an <a>: .ui-app a inherits otherwise */

/* empty-state illustrations (ui/_icons.html ui-i-illo-*), sized as Linear draws them */
.ui-icon.ui-illo { color: var(--ui-label-title); }
.ui-icon.ui-i-illo-triage { width: 105px; height: 66px; }
.ui-icon.ui-i-illo-inbox { width: 95px; height: 98px; }
.ui-icon.ui-i-illo-views { width: 66px; height: 80px; }
.ui-icon.ui-i-illo-filter { width: 153px; height: 90px; }

/* settings */
.ui-settings-backapp { margin-left: 4px; padding: 0 12px 0 6px; color: var(--ui-label-muted); font: 500 13px/1 var(--ui-font); }
/* the menu (linear.app): a group's 16px head 6px above its links, 16px between groups;
   links 28px with 1px margins that collapse (block, not flex), so 29px apart */
.ui-settings-nav .ui-sidebar-scroll { padding-top: 29px; }
.ui-settings-nav-group { margin-bottom: 16px; }
.ui-settings-nav-group > .ui-nav { display: block; }
.ui-settings-nav-head { margin: 0 0 6px; padding: 0 0 0 10px; color: var(--ui-label-muted); font: 500 13px/16px var(--ui-font); }
/* the menu's Search (linear.app: a 28px field in the page's colours, not the sidebar's) */
.ui-settings-search { position: relative; display: flex; margin: 4px 0 0; color: var(--ui-label-muted); }
.ui-settings-search input { flex: 1; min-width: 0; height: 28px; padding: 6px 25px 6px 32px; border: 0.67px solid var(--ui-page-field-border); border-radius: 8px; background: var(--ui-page-field-bg); box-shadow: var(--ui-shadow-low); color: var(--ui-label-title); font: 500 13px/1 var(--ui-font); }
/* the settings filters: the field is the input, its icon laid over it (linear.app) */
:is(.ui-settings-search, .ui-settings-filter) > .ui-icon { position: absolute; top: 50%; left: 10px; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; }
:is(.ui-app, #ui-overlays) :is(.ui-settings-search, .ui-settings-filter) input:focus-visible { outline: 1px solid var(--ui-focus-color); outline-offset: -1px; }
.ui-settings-nav-empty { margin: 12px 8px; color: var(--ui-label-muted); font: 450 13px/1.4 var(--ui-font); }
.ui-pointer-cursors :is(button, a, [role="button"], select, label, summary) { cursor: pointer; }
.ui-settings-top { display: flex; align-items: flex-start; height: 48px; flex: none; padding: 10px 8px; }
.ui-settings-back { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: var(--ui-radius-pill); color: var(--ui-label-muted); font: 500 13px/1 var(--ui-font); }
.ui-settings-back:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-settings-back > .ui-icon { color: var(--ui-label-muted); }
/* linear.app rings the settings chrome's links 1px outside their edge */
.ui-settings { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ui-settings-page { width: 640px; max-width: calc(100% - 32px); margin: 0 auto; padding: 16px 0 96px; }
/* a table page (members, labels) spans the content, 56px in from its edges (linear.app) */
.ui-settings-page-wide { width: auto; max-width: none; margin: 0 56px; container-type: inline-size; }
.ui-settings-page-wide .ui-settings-title { margin-left: 0; margin-right: 0; }
.ui-settings-title { margin: 0 16px 4px; color: var(--ui-label-title); font: 500 24px/32px var(--ui-font); letter-spacing: -0.01rem; text-align: left; }
.ui-settings-desc { margin: 0 16px 32px; color: var(--ui-label-muted); font: 450 13px/22px var(--ui-font); }
/* the description under a title with a link at its right (a team's Team overview; linear.app) */
.ui-settings-descbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 24px; margin: 0 16px 32px; }
.ui-settings-descbar .ui-settings-desc { margin: 0; }
.ui-btn.ui-settings-overview:hover, .ui-btn.ui-settings-cardhead-btn:hover { color: var(--ui-label-title); }
.ui-btn.ui-settings-overview { flex: none; height: 24px; margin-right: -6px; padding: 0 6px 0 8px; gap: 2px; color: var(--ui-label-base); font: 500 12px/normal var(--ui-font); }
.ui-settings-title + form, .ui-settings-title + #settings-form, .ui-settings-title + .ui-settings-table { margin-top: 28px; }
.ui-settings-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
/* a table page's title row (linear.app): its actions beside the title, a hairline under both
   that runs the content's whole width */
.ui-settings-page-wide .ui-settings-titlebar { margin: 0 -56px; padding: 0 56px 12px; border-bottom: 0.67px solid var(--ui-border-faint); }
.ui-settings-page-wide .ui-settings-titlebar .ui-settings-title { margin-bottom: 0; }
.ui-settings-titlebar-actions .ui-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.ui-settings-titlebar .ui-settings-desc { margin-bottom: 0; }
.ui-settings-titlebar-actions, .ui-settings-inline { display: inline-flex; align-items: center; gap: 8px; }
.ui-settings-inline .ui-input { width: auto; }
.ui-settings-section { margin: 48px 16px 0; color: var(--ui-label-title); font: 500 15px/23px var(--ui-font); }
/* linear.app: 32px under the title, 48px under a card, the card 16px under its head */
.ui-settings-section:first-child, input[type="hidden"]:first-child + .ui-settings-section { margin-top: 32px; }
.ui-settings-section-desc { margin: 2px 16px 0; color: var(--ui-label-muted); font: 450 13px/22px var(--ui-font); }
:is(.ui-settings-section, .ui-settings-section-desc) + .ui-settings-card { margin-top: 16px; }
/* a group inside one section (a channel's notification groups; linear.app: 13px, 24px under the card above, 12px over its own) */
.ui-settings-subhead { margin: 24px 16px 0; color: var(--ui-label-base); font: 500 13px/16px var(--ui-font); }
.ui-settings-subhead + .ui-settings-card { margin-top: 12px; }
.ui-settings-card {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 10px;
  background: var(--ui-bg-base);
  box-shadow: 0 0 0 1px var(--ui-border-faint), var(--ui-shadow-low);
  color: var(--ui-label-base);
}
.ui-settings-card-pad { padding: 16px; }
.ui-settings-card-pad > .ui-textarea { box-shadow: none; padding: 0; background: transparent; min-height: 88px; resize: none; }
.ui-settings-stack { display: flex; flex-direction: column; gap: 8px; }
.ui-settings-stack > .ui-textarea { box-shadow: inset 0 0 0 1px var(--ui-border); padding: 10px 12px; background: var(--ui-control-secondary); }
/* A settings row: Linear's 16px in, 12px between label and control, a 32px field. */
.ui-settings-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 16px; }
/* a card's rows part with a hairline 16px in from its sides that takes no height (linear.app) */
:is(.ui-settings-card > .ui-settings-row + .ui-settings-row, .ui-settings-links li + li, .ui-settings-card > .ui-settings-card-pad + .ui-settings-row, .ui-settings-card-rows > .ui-settings-row) { position: relative; }
:is(.ui-settings-card > .ui-settings-row + .ui-settings-row, .ui-settings-links li + li, .ui-settings-card > .ui-settings-card-pad + .ui-settings-row, .ui-settings-card-rows > .ui-settings-row)::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 0.67px solid var(--ui-card-ring); pointer-events: none; }
.ui-settings-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ui-settings-label { align-self: flex-start; color: var(--ui-label-title); font: 500 13px/normal var(--ui-font); text-align: left; }
.ui-settings-control > .ui-input:not(select) { width: 180px; height: 32px; padding: 6px 12px; border: 1px solid var(--ui-border-solid); border-radius: 8px; background: var(--ui-bg-base); box-shadow: none; font: 400 13px/normal var(--ui-font); }
.ui-settings-control > .ui-input:not(select):hover:not(:disabled) { border-color: var(--ui-border-solid-hover); box-shadow: none; }
/* a colour (or icon) square joined to its field, one 200px control (a team's Name; linear.app) */
.ui-settings-control.ui-input-group { gap: 0; }
.ui-settings-control.ui-input-group > .ui-colour-input { width: 32px; height: 32px; padding: 0; border: 1px solid var(--ui-border-solid); border-radius: 8px 0 0 8px; background: color-mix(in lch, var(--dot, var(--ui-label-faint)) 12.5%, transparent); box-shadow: none; }
.ui-settings-control.ui-input-group > .ui-input:not(select) { width: 168px; border-left: 0; border-radius: 0 8px 8px 0; }
/* The settings menu: links 10px in, the label 6px after its icon; the scroller keeps a gutter. */
.ui-settings-nav .ui-nav-item { gap: 0; padding: 0 0 0 10px; }
.ui-settings-nav .ui-nav-item > .ui-icon { width: 16px; height: 16px; }
.ui-settings-nav .ui-nav-label { padding: 0 9px 0 6px; }
.ui-settings-nav .ui-sidebar-scroll { padding-right: 22px; }
.ui-settings-hint { color: var(--ui-label-muted); font: 450 12px/normal var(--ui-font); }
.ui-settings-control { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ui-settings-control > .ui-switch { margin-right: 6px; }
/* a row's text button (Preferences' Customize; linear.app: a bare 32px pill that overhangs the row's padding) */
.ui-btn.ui-settings-textbtn { height: 32px; margin-right: -6px; padding: 0 12px; color: var(--ui-label-base); font: 500 13px/normal var(--ui-font); }
.ui-settings-value { color: var(--ui-label-base); font: 450 13px/1 var(--ui-font); width: auto; }
.ui-settings-avatar { width: 320px; }
.ui-settings-schedule { width: auto; color: var(--ui-label-base); }
.ui-settings-schedule .ui-input { width: auto; }
/* a weekly schedule takes a weekday, a monthly one a day of the month, a daily one neither */
.ui-settings-schedule:has([name="unit"] option[value="weeks"]:checked) [name="day_of_month"],
.ui-settings-schedule:has([name="unit"] option[value="months"]:checked) [name="weekday"],
.ui-settings-schedule:has([name="unit"] option[value="days"]:checked) :is([name="weekday"], [name="day_of_month"], .ui-settings-hint) { display: none; }
.ui-settings-error { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--ui-radius); background: color-mix(in srgb, var(--ui-red) 12%, transparent); color: var(--ui-label-title); font: 450 13px/1.45 var(--ui-font); }
.ui-settings-error p { margin: 0; }
.ui-settings-field-error { color: var(--ui-red); font: 450 12px/1.4 var(--ui-font); }
.ui-settings-note { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; color: var(--ui-label-muted); font: 450 13px/1 var(--ui-font); }
.ui-settings-note .ui-icon { width: 14px; height: 14px; }
.ui-settings-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 3px; background: var(--ui-bg-shade); color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-settings-badge.is-admin { background: color-mix(in lch, var(--ui-status-completed) 8%, transparent); color: var(--ui-status-completed); }
.ui-settings-foot { margin: 24px 0; text-align: center; color: var(--ui-label-muted); font: 450 13px/1 var(--ui-font); }
.ui-settings-foot strong { color: var(--ui-label-base); font-weight: 500; }
.ui-settings-foot a { color: var(--ui-label-link); }
.ui-settings-form-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--ui-border-faint); }
.ui-settings-recurring-form { margin-bottom: 24px; }
/* a list card's head: its count at the left, its add button at the right (Recurring issues; linear.app) */
.ui-settings-cardhead { justify-content: space-between; min-height: 60px; }
.ui-settings-cardhead-text { color: var(--ui-label-muted); font: 450 13px/18px var(--ui-font); }
.ui-btn.ui-settings-cardhead-btn { height: 24px; gap: 4px; padding: 0 8px 0 6px; color: var(--ui-label-base); }
.ui-settings-card-next { margin-top: 12px; }
.ui-settings-row-compact { min-height: 48px; padding: 8px 16px; }
.ui-settings-pill { height: 32px; padding: 0 12px; border-radius: var(--ui-radius-pill); }
.ui-settings-control .ui-settings-pill { height: 28px; padding: 0 10px 0 8px; gap: 6px; }
.ui-settings-control .ui-settings-pill .ui-avatar { width: 16px; height: 16px; font-size: 8px; }
/* a row's picker that opens a dialog, drawn as the kit's select (Triage's responsibility; linear.app) */
.ui-select-button.ui-settings-pick { gap: 6px; min-width: 120px; }
.ui-settings-pick > .ui-avatar { width: 16px; height: 16px; font-size: 8px; }
.ui-settings-pick > .ui-icon:not(.ui-select-chevron) { width: 14px; height: 14px; color: var(--ui-label-muted); }
/* a card of schedule selects, all one width (Cycles; linear.app: 212px) */
.ui-settings-wide-selects .ui-select-button { width: 212px; }
.ui-settings-control form { display: inline-flex; }
/* members and labels: search, role filter and actions above the table (linear.app: 32px controls, 300px search) */
/* Settings > Asks (apps.asks): an auto-reply's body, the address test, blocked senders, previews. */
.ui-asks-body { display: block; min-height: 0; padding: 0 16px 16px; }
.ui-asks-body .ui-textarea { width: 100%; }
.ui-asks-test.is-internal { color: var(--ui-status-completed); }
.ui-asks-test.is-external { color: var(--ui-label-muted); }
.ui-asks-block { gap: 8px; }
.ui-asks-block .ui-input { flex: 1; min-width: 0; }
.ui-asks-preview { margin: 0 16px 16px; overflow: hidden; border: 1px solid var(--ui-border-faint); border-radius: var(--ui-radius); }
.ui-asks-preview-head { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border-faint); color: var(--ui-label-title); font: 500 13px/normal var(--ui-font); }
.ui-asks-preview-body { padding: 12px; color: var(--ui-label-base); font: 450 13px/20px var(--ui-font); }
.ui-settings-toolbar { display: flex; align-items: center; gap: 8px; margin: 16px 0 19px; }
.ui-settings-toolbar-end { margin-left: auto; display: inline-flex; gap: 8px; }
.ui-settings-filter { position: relative; display: inline-flex; width: 300px; max-width: 100%; color: var(--ui-label-muted); }
.ui-settings-filter input { flex: 1; min-width: 0; height: 32px; padding: 6px 25px 6px 32px; border: 0.67px solid var(--ui-border-solid); border-radius: 8px; background: var(--ui-control-secondary); color: var(--ui-label-title); font: 500 13px/1 var(--ui-font); }
.ui-settings-filter input:hover { border-color: var(--ui-border-solid-hover); }
/* the labels pages' filter under the title row (linear.app: a 28px pill without a border) */
.ui-settings-filter-bare { display: flex; margin: 8px 0 7px -6px; }
.ui-settings-filter-bare input, .ui-settings-filter-bare input:hover { height: 28px; border-color: transparent; border-radius: var(--ui-radius-pill); background: var(--ui-bg-base); }
.ui-settings-role-filter { min-width: 72px; }
.ui-settings-nomatch td { color: var(--ui-label-muted); text-align: center; }
/* linear.app's columns: name and description share what the fixed columns (Used in, Issues,
   Last applied, Created: 390px) leave, about 2:3; a label's name field ends where its column does */

/* a link row (team overview) */
.ui-settings-link { color: inherit; border-radius: inherit; }
.ui-settings-link:hover { background: var(--ui-bg-base-hover); }
.ui-settings-links li:first-child .ui-settings-link { border-radius: 10px 10px 0 0; }
.ui-settings-links li:last-child .ui-settings-link { border-radius: 0 0 10px 10px; }
.ui-settings-links li:only-child .ui-settings-link { border-radius: 10px; }
/* linear.app team settings: 65px rows, a 32px icon tile with a 16px icon */
.ui-settings-link { min-height: 64px; }
.ui-settings-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 6px; background: var(--ui-bg-focus); color: var(--ui-label-muted); }
.ui-settings-link-icon .ui-icon { width: 16px; height: 16px; }
.ui-settings-state-line { display: inline-flex; align-items: center; gap: 4px; }
.ui-settings-onoff { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-label-faint); }
.ui-settings-onoff.is-on { background: var(--ui-green); }
.ui-settings-summary { color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); white-space: nowrap; }
.ui-settings-chevron { width: 16px; height: 16px; color: var(--ui-label-muted); }
/* a second card under the first in one section (AI & agents: the agents, then their guidance) */
.ui-settings-card + .ui-settings-card-gap { margin-top: 16px; }
.ui-settings-row > .ui-settings-person { flex: 1; min-width: 0; }
/* agent guidance (linear.app: an editor card about 200px tall; Save and who last edited under it) */
.ui-guidance .ui-ed-guidance .ui-ed-content, .ui-guidance-input { min-height: 168px; }
.ui-guidance-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.ui-guidance-foot::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 0.67px solid var(--ui-card-ring); }
.ui-guidance-foot .ui-btn { height: 28px; padding: 0 12px; }
.ui-guidance-text { color: var(--ui-label-base); font: 450 14px/22px var(--ui-font); }
.ui-guidance-text > :first-child { margin-top: 0; }
.ui-guidance-text > :last-child { margin-bottom: 0; }
.ui-settings-links .ui-settings-link[aria-current] { background: var(--ui-bg-selected); }

/* notification matrix */

/* tables (members, teams, labels) */
.ui-settings-table { width: 100%; border-collapse: collapse; color: var(--ui-label-muted); font: 450 12px/normal var(--ui-font); }
/* linear.app: no rules between rows; a 32px head, 44px rows (50px with an avatar), cells
   16px apart, figures and dates 12px muted, names 13px */
.ui-settings-table th { height: 32px; padding: 0 16px 0 0; color: var(--ui-label-muted); font: 450 12px/normal var(--ui-font); text-align: left; }
.ui-settings-table td { height: 44px; padding: 0 16px 0 0; }
.ui-settings-table :is(th, td):first-child { padding-left: 4px; }
/* the column tables size their columns from the head row (widths below), not their content */
:is(.ui-members-table, .ui-team-members-table, .ui-teams-table) { table-layout: fixed; }
.ui-settings-table th:last-child:empty { width: 36px; }
.ui-settings-table tr:has(.ui-settings-person) td { height: 50px; }
.ui-settings-table .ui-settings-person .ui-settings-label { color: var(--ui-label-base); }
.ui-settings-table .ui-settings-person .ui-settings-hint { font-weight: 500; }
.ui-settings-table tr:hover td { background: var(--ui-bg-base-hover); }
.ui-settings-table .ui-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-settings-table-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-label-base); font: 500 13px/normal var(--ui-font); }
.ui-settings-table-actions { width: 48px; text-align: right; }
.ui-settings-table-name:focus-visible { outline-offset: -1px; }
.ui-teams-key { color: var(--ui-label-faint); }
.ui-teams-table th:first-child { width: 320px; }
.ui-teams-table td { font-weight: 500; }
.ui-teams-table .ui-teams-col:nth-child(3) { width: 120px; }
.ui-teams-table .ui-teams-col:nth-child(4) { width: 92px; }
.ui-teams-table .ui-teams-col:nth-child(5) { width: 82px; }
.ui-teams-table .ui-teams-col:nth-child(6) { width: 97px; }
.ui-teams-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.ui-settings-table-actions .ui-btn, .ui-settings-state-actions { opacity: 0; transition: opacity var(--ui-speed-hover); }
tr:hover .ui-settings-table-actions .ui-btn, .ui-settings-state:hover .ui-settings-state-actions, .ui-settings-row:hover .ui-settings-state-actions, .ui-settings-state-actions:focus-within, .ui-settings-state-actions:has([data-ui-pop].is-open) { opacity: 1; }
.ui-settings-person { display: inline-flex; align-items: center; gap: 10px; }
.ui-settings-person > span:last-child { display: flex; flex-direction: column; }
.ui-settings-label-new { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--ui-bg-sub); }
.ui-settings-label-new .ui-input { width: auto; flex: 1; }

/* workflow and project statuses */
/* linear.app: each type's head a 36px band 12px in from the card's sides, its statuses 60px
   rows under it, parted by an inset hairline */
.ui-settings-states { padding: 16px 0 12px; }
.ui-settings-group-head { display: flex; align-items: center; justify-content: space-between; height: 36px; margin: 0 12px; padding: 4px 6px 4px 16px; border-radius: 6px; background: var(--ui-bg-shade); color: var(--ui-label-muted); font: 500 13px/normal var(--ui-font); }
.ui-settings-state { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; }
.ui-settings-state + .ui-settings-state::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 0.67px solid var(--ui-card-ring); pointer-events: none; }
.ui-settings-state[data-ui-drag] { cursor: grab; }
.ui-settings-state-form { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ui-settings-state-icon { --state: var(--ui-label-muted); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; flex: none; border-radius: 6px; background: color-mix(in srgb, var(--state) 25%, transparent); }
.ui-settings-state-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ui-settings-state-name { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ui-label-title); font: 500 13px/16px var(--ui-font); }
.ui-settings-state-name .ui-input-bare { width: auto; field-sizing: content; min-width: 4ch; }
.ui-settings-state-text .ui-settings-hint .ui-input-bare { width: 60%; }
.ui-settings-state-name .ui-settings-hint { font-size: 13px; }
.ui-settings-state-text > .ui-settings-hint { font-weight: 500; }
.ui-settings-state-actions { display: inline-flex; align-items: center; gap: 4px; }
.ui-settings-state-error { position: absolute; left: 58px; bottom: 2px; }
.ui-settings-state-new { padding-left: 6px; }
.ui-settings-state-new .ui-input { width: auto; flex: 1; }
[data-ui-pop] > .ui-settings-delete-panel { top: 32px; right: 0; left: auto; width: 280px; padding: 14px; gap: 10px; }
.ui-settings-delete-actions { display: flex; justify-content: flex-end; }
/* Connected accounts (linear.app, measured): a card of 64px rows, the hairline between
   them as the other cards'; the account's icon on a 32px tile in the label's colour;
   Connect / Connected as a 32px pill whose hover is the row hover's grey, 0.15s. */
.ui-settings-card-list { margin: 0; padding: 0; list-style: none; }
.ui-settings-card-list > .ui-settings-row + .ui-settings-row { position: relative; }
.ui-settings-card-list > .ui-settings-row + .ui-settings-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 0.67px solid var(--ui-card-ring); pointer-events: none; }
.ui-settings-card-list > .ui-settings-row:first-child { border-radius: 10px 10px 0 0; }
.ui-settings-card-list > .ui-settings-row:last-child { border-radius: 0 0 10px 10px; }
.ui-settings-card-list > .ui-settings-row:only-child { border-radius: 10px; }
.ui-settings-account-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 6px; background: var(--ui-bg-shade); color: var(--ui-label-title); }
.ui-settings-account-icon .ui-icon { width: 16px; height: 16px; }
.ui-settings-account-login { color: var(--ui-label-muted); }
.ui-settings-account-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 32px; margin-right: -6px; padding: 0 12px; border: 1px solid transparent; border-radius: 9999px; background: transparent; color: var(--ui-label-base); font: 500 13px/normal var(--ui-font); text-decoration: none; cursor: default; transition: border .15s, background-color .15s, color .15s, opacity .15s; }
.ui-settings-account-btn:hover, .ui-settings-account-btn[aria-expanded="true"] { background: var(--ui-bg-base-hover); color: var(--ui-label-title); transition-duration: 0s; }
.ui-settings-account-state { color: var(--ui-label-title); font-weight: 450; }
/* Linear's icons here take `fill` (their paths set none), so it can ease as Linear's do. */
.ui-settings-account-btn .ui-icon { width: 16px; height: 16px; fill: var(--ui-label-base); transition: fill .15s; }
.ui-settings-account-btn:hover .ui-icon, .ui-settings-account-btn[aria-expanded="true"] .ui-icon { fill: var(--ui-label-title); }
.ui-settings-account-arrow { margin-left: -2px; }
.ui-settings-account-chevron { width: 12px !important; margin-left: -2px; }
.ui-settings-account-org:has(.ui-settings-account-btn:hover, .ui-settings-account-btn[aria-expanded="true"]) { background: var(--ui-bg-base-hover); }

/* Phone: views list keeps the name (columns drop at 480px); settings stack their rows. */
@media (max-width: 768px) {
  .ui-views-cols { gap: 8px; }
  .ui-views-star .ui-star:not(.is-on) { opacity: 1; }
  .ui-views-empty { margin: auto 16px; }
  .ui-settings-top { padding: 10px 4px; }
  .ui-settings-page { max-width: calc(100% - 24px); padding-top: 12px; }
  .ui-settings-page-wide { margin: 0 12px; }
  .ui-settings-page-wide .ui-settings-titlebar { margin: 0 -12px; padding: 0 12px 12px; }
  .ui-settings-table .ui-members-group td::before { inset: 0 -8px; }
  :is(.ui-members-table, .ui-team-members-table, .ui-teams-table) { table-layout: auto; }
  :is(.ui-members-table, .ui-team-members-table, .ui-teams-table) th:first-child { width: auto; }
  .ui-teams-table th:nth-child(2), .ui-teams-table td:nth-child(2), .ui-teams-table .ui-teams-col:nth-child(3), .ui-teams-table .ui-teams-col:nth-child(6), .ui-teams-table tr:not(.ui-members-group) td:nth-child(3), .ui-teams-table tr:not(.ui-members-group) td:nth-child(6) { display: none; }
  .ui-settings-title, .ui-settings-desc, .ui-settings-section, .ui-settings-section-desc { margin-left: 4px; margin-right: 4px; }
  .ui-settings-titlebar { flex-wrap: wrap; }
  .ui-settings-row { flex-wrap: wrap; gap: 8px 16px; }
  .ui-settings-control { width: auto; max-width: 100%; }
  .ui-settings-row:has(.ui-input:not(.ui-input-compact):not([type="checkbox"])) .ui-settings-control { width: 100%; justify-content: flex-start; }
  .ui-settings-link { flex-wrap: nowrap; }
  .ui-settings-toolbar { flex-wrap: wrap; }
  .ui-settings-filter:not(.ui-settings-filter-bare) { width: 100%; }
  .ui-settings-toolbar-end { margin-left: 0; }
  .ui-settings-avatar { width: 100%; }
  #members-table th:nth-child(2), #members-table td:nth-child(2) { display: none; }
}
@media (max-width: 480px) {
  .ui-views-cols { grid-template-columns: minmax(0, 1fr); }
  [class*="ui-views-col-"] { display: none; }
  .ui-settings-table td, .ui-settings-table th { padding-left: 8px; padding-right: 8px; }
}

/* ---------- settings: labels (labels.html, static/js/labels.js) ----------
   Linear's label settings list: a full-width grid (60px selection gutter, Name, Description,
   Team, Used in 75, Issues 75, Last applied 102, Created 82, the menu), a 32px header of
   pill sort buttons, 44px rows with an 8px radius; groups fold their labels under a tree
   line. Description and Team go at tablet width, the counts at laptop width, the dates
   on a phone. */
.ui-labels { --labels-cols: 60px minmax(150px, 2fr) minmax(200px, 3fr) 75px 75px 102px 82px 60px; }
.ui-labels:has(.ui-labels-table.has-team) { --labels-cols: 60px minmax(150px, 2fr) minmax(200px, 3fr) minmax(100px, 220px) 75px 75px 102px 82px 60px; }
.ui-labels:not(:has(.ui-labels-head .ui-labels-used)) { --labels-cols: 60px minmax(150px, 2fr) minmax(200px, 3fr) 70px 102px 82px 60px; }
.ui-labels-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; }
.ui-labels-toolbar .ui-settings-filter-bare { margin: 0 0 0 -6px; }
.ui-labels-tools { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.ui-labels-tool { width: 28px; height: 28px; border-radius: var(--ui-radius-pill); box-shadow: inset 0 0 0 0.67px var(--ui-border-solid); color: var(--ui-label-base); }
.ui-labels-table { margin: 0 -46px 0 -56px; }
.ui-labels-head, .ui-labels-row { display: grid; grid-template-columns: var(--labels-cols); align-items: center; }
.ui-labels-head { height: 32px; }
.ui-labels-cell { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 16px; color: var(--ui-label-muted); font: 450 12px/normal var(--ui-font); }
.ui-labels-sort { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: -7px; padding: 0 6px; border: 0; border-radius: var(--ui-radius-pill); background: none; color: var(--ui-label-base); font: 500 12px/1 var(--ui-font); white-space: nowrap; }
.ui-labels-sort:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-labels-sort .ui-icon { width: 12px; height: 12px; }
.ui-labels-row { position: relative; height: 44px; border-radius: 8px; outline: none; }
.ui-labels-row[hidden] { display: none; }
.ui-labels-row:hover, .ui-labels-row.is-focused, .ui-labels-row.is-editing { background: var(--ui-bg-base-hover); }
.ui-labels-row.is-selected { background: var(--ui-control-secondary-selected, var(--ui-bg-base-hover)); }
.ui-labels-row.is-archived .ui-labels-name-text { color: var(--ui-label-muted); }
.ui-labels-row.is-previewed { opacity: 0.5; }
.ui-labels-gutter { display: flex; justify-content: center; }
.ui-labels-check { width: 14px; height: 14px; margin: 0; opacity: 0; }
.ui-labels-row:hover .ui-labels-check, .ui-labels-row.is-focused .ui-labels-check, .ui-labels-table.has-selection .ui-labels-check, .ui-labels-check:checked { opacity: 1; }
.ui-labels-name { position: relative; gap: 10px; }
.ui-labels-row.is-child .ui-labels-name { padding-left: 27px; }
.ui-labels-row.is-child .ui-labels-name::before { content: ""; position: absolute; left: 7px; top: -22px; width: 10px; height: 44px; border-bottom: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); border-bottom-left-radius: 4px; }
.ui-labels-caret { position: absolute; left: -20px; display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; color: var(--ui-label-muted); }
.ui-labels-caret .ui-icon { width: 10px; height: 10px; transition: transform var(--ui-speed-hover) var(--ui-ease-out-quad); }
.ui-labels-row.is-open .ui-labels-caret .ui-icon { transform: rotate(90deg); }
.ui-colour-dot.is-group::before { width: 12px; height: 12px; border-radius: 0; box-shadow: none; background: radial-gradient(circle at 50% 16%, var(--dot) 1.7px, transparent 2.1px), radial-gradient(circle at 16% 50%, var(--dot) 1.7px, transparent 2.1px), radial-gradient(circle at 84% 50%, var(--dot) 1.7px, transparent 2.1px), radial-gradient(circle at 50% 84%, var(--dot) 1.7px, transparent 2.1px); }
.ui-labels-text { display: block; min-width: 0; max-width: 100%; height: 28px; margin-left: -6px; padding: 0 6px; overflow: hidden; border: 0; border-radius: 6px; background: none; color: var(--ui-label-base); font: 500 13px/28px var(--ui-font); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.ui-labels-text:disabled { cursor: default; }
.ui-labels-name .ui-labels-text { flex: 0 1 auto; }
.ui-labels-desc .ui-labels-text { flex: 0 1 auto; }
.ui-labels-desc .ui-labels-text.is-empty { flex: 1; }
.ui-labels .ui-settings-title { flex: 1; }
.ui-labels-desc .ui-labels-text.is-empty::before { content: "Add label description\2026"; color: var(--ui-label-faint); opacity: 0; }
.ui-labels-row:is(:hover, .is-focused) .ui-labels-desc .ui-labels-text.is-empty::before { opacity: 1; }
.ui-labels-input { flex: 1; min-width: 150px; height: 28px; margin-left: -6px; padding: 0 6px; border: 0.67px solid var(--ui-border-solid); border-radius: 6px; background: var(--ui-bg-base); color: var(--ui-label-title); font: 500 13px/1 var(--ui-font); }
.ui-labels-badge { flex: none; padding: 1px 6px; border-radius: var(--ui-radius-pill); box-shadow: inset 0 0 0 0.67px var(--ui-border-solid); color: var(--ui-label-muted); font: 500 11px/16px var(--ui-font); }
.ui-labels-count { height: 24px; margin-left: -6px; padding: 0 6px; border: 0; border-radius: var(--ui-radius-pill); background: none; color: var(--ui-label-base); font: 500 12px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-labels-count:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-labels-applied, .ui-labels-created { white-space: nowrap; }
.ui-labels-menu { display: flex; justify-content: center; }
.ui-labels-menu .ui-btn { width: 32px; height: 32px; opacity: 0; }
.ui-labels-row:is(:hover, .is-focused) .ui-labels-menu .ui-btn, .ui-labels-menu .ui-btn[aria-expanded="true"] { opacity: 1; }
.ui-labels-none .ui-labels-cell { grid-column: 2 / -1; font-size: 13px; }
.ui-labels-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 96px 0; color: var(--ui-label-muted); font: 500 13px/1 var(--ui-font); }
.ui-labels-empty[hidden] { display: none; }
.ui-labels-empty-art { width: 161px; height: 93px; }
.ui-labels-foot { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 24px 0; color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-labels-inherited { padding: 4px 6px; border-radius: 6px; color: var(--ui-label-base); font-weight: 500; text-decoration: none; }
.ui-labels-inherited:hover { background: var(--ui-bg-base-hover); }
.ui-labels-usage-pop { display: flex; flex-direction: column; gap: 8px; width: 256px; max-height: 250px; padding: 10px 12px; overflow-y: auto; }
.ui-labels-usage-head { color: var(--ui-label-muted); font: 500 11px/1.4 var(--ui-font); }
.ui-labels-usage-row { display: flex; justify-content: space-between; gap: 8px; color: var(--ui-label-base); font: 450 12px/1.4 var(--ui-font); text-decoration: none; }
.ui-labels-usage-n { color: var(--ui-label-muted); font-variant-numeric: tabular-nums; }
.ui-labels-dialog p { margin: 0 0 8px; color: var(--ui-label-muted); font: 450 13px/1.5 var(--ui-font); }
.ui-labels-dialog-list { margin: 0 0 8px; padding-left: 18px; color: var(--ui-label-base); font: 450 13px/1.6 var(--ui-font); }
.ui-labels-dialog-prompt { display: flex; flex-direction: column; gap: 6px; color: var(--ui-label-muted); font: 450 12px/1.4 var(--ui-font); }
#labels-bulkbar { position: fixed; }
@media (max-width: 1280px) {
  .ui-labels, .ui-labels:not(:has(.ui-labels-head .ui-labels-used)) { --labels-cols: 60px minmax(150px, 2fr) minmax(200px, 3fr) 102px 82px 60px; }
  .ui-labels:has(.ui-labels-table.has-team) { --labels-cols: 60px minmax(150px, 2fr) minmax(200px, 3fr) minmax(100px, 220px) 102px 82px 60px; }
  .ui-labels-used, .ui-labels-usage { display: none; }
}
@media (max-width: 1024px) {
  .ui-labels, .ui-labels:not(:has(.ui-labels-head .ui-labels-used)), .ui-labels:has(.ui-labels-table.has-team) { --labels-cols: 44px minmax(0, 1fr) 102px 82px 48px; }
  .ui-labels-desc, .ui-labels-team { display: none; }
}
@media (max-width: 640px) {
  .ui-labels, .ui-labels:not(:has(.ui-labels-head .ui-labels-used)), .ui-labels:has(.ui-labels-table.has-team) { --labels-cols: 36px minmax(0, 1fr) 44px; }
  .ui-labels-applied, .ui-labels-created { display: none; }
  .ui-labels-table { margin: 0 -8px; }
  .ui-labels-toolbar .ui-settings-filter-bare { flex: 1; width: auto; }
  .ui-labels-menu .ui-btn { opacity: 1; }
  .ui-labels-table:not(.has-selection) .ui-labels-row .ui-labels-check { opacity: 0; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ui-popover, .ui-palette, .ui-peek, .ui-toast, .ui-tooltip, .ui-help[open], .ui-switch, .ui-switch::after,
  .ui-nav-section .ui-icon, .ui-team .ui-caret, .ui-group-toggle .ui-icon, .ui-card, .ui-col-body,
  .ui-modal, .ui-modal-backdrop, .ui-dialog[open], .ui-check, .ui-palette-backdrop .ui-palette {
    transition: none !important;
    animation: none !important;
  }
  .ui-popover, .ui-palette, .ui-peek, .ui-toast, .ui-modal { transform: none !important; }
}

/* ---------- split pane: a queue beside the selected item (Triage, Inbox) ----------
   Linear's queue column is 400px (computed: 399px incl. its border) with its own 44px
   header; rows are 55px: a 32px avatar with a 16px type badge, then two lines,
   13px/500 and 12px/450 (computed on the Inbox). */

.ui-split { display: grid; grid-template-columns: 400px minmax(0, 1fr); flex: 1; min-height: 0; }
.ui-split-list .ui-header, .ui-split-empty { cursor: default; text-align: left; }
.ui-split-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--ui-border-faint); }
.ui-split-list .ui-header { padding: 0 9px 0 8px; }
.ui-split-list .ui-header > .ui-crumbs { margin-left: 10px; }
.ui-split-list .ui-header .ui-triage-responsible { width: 24px; height: 24px; border-radius: 12px; }
.ui-triage-responsible .ui-icon { width: 18px; height: 18px; }
.ui-triage-responsible .ui-avatar { width: 18px; height: 18px; font-size: 8px; }
.ui-split-title { overflow: hidden; color: var(--ui-label-base); font: 500 13px/normal var(--ui-font); text-overflow: ellipsis; white-space: nowrap; }
.ui-split-detail { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ui-split-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
/* Empty pane (computed on linear.app, triage): a 105×66 line illustration, 16px, the
   text 13px/500, 20px, then a 24px pill button. */
.ui-split-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-bottom: 75px; color: var(--ui-label-muted); font: 500 13px/normal var(--ui-font); }
.ui-split-empty > .ui-illo { margin-bottom: 4px; }
.ui-split-empty .ui-icon:not(.ui-illo) { width: 64px; height: 64px; color: var(--ui-label-faint); stroke-width: .6; }
.ui-app .ui-split-empty-action { column-gap: 0; row-gap: 0; height: 24px; margin-top: 8px; padding: 0 8px 0 6px; border: 1px solid transparent; border-radius: var(--ui-radius-pill); color: var(--ui-label-base); font: 500 12px/normal var(--ui-font); text-align: center; }
.ui-split-empty .ui-split-empty-action .ui-icon { width: 14px; height: 14px; margin-right: 6px; color: inherit; }
.ui-split-list .ui-list { padding: 4px 9px 8px 0; }
.ui-split-filter { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px 18px; color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
/* Reviews (computed on linear.app/red-mills/reviews): a 481px list pane; group heads 28px
   pills inset 10px; rows 40px, the icon, title, badges and time 8px apart; the empty pane
   a 143×152 illustration, 24px, then the count. */
.ui-split.ui-reviews { grid-template-columns: 482px minmax(0, 1fr); }
.ui-reviews .ui-split-list .ui-header, .ui-reviews .ui-inbox-boxes { padding: 0 10px 0 8px; }
.ui-reviews .ui-tab { gap: 0; padding: 0 9px; }
.ui-reviews .ui-tab-count { border-radius: 4px; font-variant-numeric: tabular-nums; }
.ui-reviews .ui-split-body { padding-bottom: 8px; overflow-x: hidden; }
h2.ui-split-title { margin: 0; }
.ui-review-list { padding: 0 10px 0 0; outline: none; }
.ui-review-group + .ui-review-group { margin-top: 2px; }
.ui-review-group-head { position: sticky; top: 0; z-index: 1; height: 28px; }
.ui-app .ui-review-group-toggle { display: flex; align-items: center; gap: 6px; width: calc(100% - 10px); height: 28px; margin: 0 0 0 10px; padding: 0 9px 0 10px; border: 0; border-radius: 8px; background: var(--ui-bg-group-head); color: var(--ui-label-muted); font: 500 12px/normal var(--ui-font); text-align: left; cursor: default; }
.ui-review-group-in { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ui-review-group-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-review-group-end { display: flex; align-items: center; flex: none; }
.ui-review-group-count { border-radius: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-review-group-caret.ui-icon { width: 16px; height: 16px; color: lch(from var(--ui-label-faint) calc(l - 2.31) c h); fill: currentColor; transition: opacity .15s, rotate .15s; }
.ui-review-group-toggle:hover .ui-review-group-caret { color: var(--ui-label-title); }
.ui-review-group-toggle:not([aria-expanded="false"]) .ui-review-group-caret { rotate: 90deg; }
.ui-review-group-rows { margin-top: 2px; }
.ui-review-row { display: block; border-radius: 8px; color: var(--ui-label-title); text-decoration: none; cursor: default; transition: color .15s; }
.ui-review-row:focus { outline: none; }
.ui-review-row-in { display: flex; align-items: center; gap: 8px; height: 40px; margin-left: 10px; padding: 0 8px; border-radius: 8px; }
.ui-review-row:hover .ui-review-row-in, .ui-review-row.is-focused .ui-review-row-in { background: var(--ui-bg-base-hover); }
.ui-review-row-status.ui-icon { width: 14px; height: 14px; flex: none; fill: currentColor; }
.ui-review-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ui-label-title); font: 500 13px/16px var(--ui-font); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ui-review-row-badge { display: flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; padding: 2px; border-radius: 4px; background: color-mix(in srgb, var(--ui-label-muted) 20%, transparent); color: var(--ui-label-muted); }
.ui-review-row-badge .ui-icon { width: 12px; height: 12px; fill: currentColor; }
.ui-review-row-time { flex: none; min-width: 25px; color: var(--ui-label-muted); font: 450 13px/16px var(--ui-font); text-align: right; white-space: nowrap; }
.ui-split-empty.ui-reviews-empty { gap: 24px; padding: 3px; }
.ui-reviews-empty .ui-split-empty-text { white-space: nowrap; }
.ui-reviews-illo { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; }
.ui-reviews-illo > svg { flex: none; }

/* The row spans the list (which keeps a 9px scrollbar gutter); the highlight is the
   inset pill inside it, as Linear's. */
.ui-notice {
  display: flex;
  height: 55px;
  margin: 0;
  padding: 0;
  border-radius: var(--ui-radius);
  color: var(--ui-label-base);
  text-decoration: none;
  outline: none;
  cursor: default;
}
.ui-notice-in { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; margin: 0 8px; padding: 0 0 0 9px; border-radius: var(--ui-radius); }
.ui-notice:hover .ui-notice-in, .ui-notice.is-focused .ui-notice-in { background: var(--ui-bg-base-hover); }
.ui-notice.is-current .ui-notice-in { background: var(--ui-bg-selected); }
.ui-notice-avatar { position: relative; flex: none; width: 32px; height: 32px; }
.ui-notice-avatar .ui-avatar { width: 32px; height: 32px; font-size: 12px; }
.ui-notice-avatar .ui-avatar-sys { background: var(--ui-bg-shade); color: var(--ui-label-muted); }
.ui-notice-avatar .ui-avatar-sys .ui-icon { width: 16px; height: 16px; }
.ui-notice-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ui-bg-base);
  color: var(--ui-label-muted);
}
.ui-notice-badge .ui-icon { width: 12px; height: 12px; }
.ui-notice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-notice-top, .ui-notice-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ui-notice-top { font: 500 13px/17px var(--ui-font); color: var(--ui-label-muted); }
.ui-notice.is-unread .ui-notice-top { color: var(--ui-label-title); }
.ui-notice-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-control-primary); }
.ui-notice-id { flex: none; color: inherit; letter-spacing: -.26px; }
.ui-notice-title, .ui-notice-line { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-notice-sub { font: 450 12px/15px var(--ui-font); color: var(--ui-label-muted); }
.ui-notice-time { flex: none; margin-left: auto; color: var(--ui-label-muted); font: 450 12px/15px var(--ui-font); }
.ui-notice-top .ui-status, .ui-notice-top .ui-icon { flex: none; }
.ui-notice-sub .ui-chip { height: 18px; padding: 0 6px; font-size: 11px; }
.ui-notice.is-snoozed .ui-notice-avatar { opacity: .55; }

.ui-panel { max-width: 720px; margin: 0 auto; padding: 32px 40px 64px; }

/* Triage's queue, Linear's rows (computed, light): a 59px row whose highlight is a card
   inset 10px from both edges (radius 8, padding 0 14px); two lines 6px apart in 10px of
   padding: the title (13px/500) and ID (13px/450, muted), then who it came from (16px
   avatar, 12px/450 muted), the due date, the priority and the age (12px/450 muted). The
   open or highlighted row is bgFocus, a hovered one bgBaseHover. A row that has left the
   queue (triaged, snoozed) stays muted until it is removed. */
.ui-split-list .ui-triage-list { padding: 8px 10px 8px 0; }
.ui-triage-row:focus-visible { outline: none; }
.ui-triage-row { display: flex; height: 59px; color: var(--ui-label-title); text-decoration: none; outline: none; cursor: default; }
.ui-triage-row-in {
  display: flex; flex: 1; flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0;
  margin-left: 10px; padding: 10px 14px; border-radius: 8px;
}
.ui-triage-row:hover .ui-triage-row-in { background: var(--ui-bg-base-hover); }
.ui-triage-row.is-focused .ui-triage-row-in, .ui-triage-row.is-current .ui-triage-row-in { background: var(--ui-bg-focus); }
.ui-triage-row-top, .ui-triage-row-sub { display: flex; align-items: center; min-width: 0; }
.ui-triage-row-top { gap: 6px; height: 16px; justify-content: space-between; }
.ui-triage-row-title { min-width: 0; overflow: hidden; color: var(--ui-label-title); font: 500 13px/normal var(--ui-font); text-overflow: ellipsis; white-space: nowrap; transition: color var(--ui-speed-hover); }
.ui-triage-row-id { flex: none; color: var(--ui-label-muted); font: 450 13px/normal var(--ui-font); letter-spacing: -.02em; font-feature-settings: "tnum", "cpsp", "calt"; }
.ui-triage-row-sub { gap: 10px; height: 15px; color: var(--ui-label-muted); font: 450 12px/normal var(--ui-font); }
.ui-triage-row-lane { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.ui-triage-row-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ui-triage-row-who .ui-avatar { flex: none; width: 16px; height: 16px; font-size: 7px; }
.ui-triage-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-triage-row-sub .ui-chip { flex: none; height: 20px; padding: 0 6px; font-size: 12px; }
.ui-triage-row-sub .ui-priority { flex: none; width: 14px; height: 14px; }
.ui-triage-row-time { flex: none; text-align: right; }
.ui-triage-row-snoozed { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--ui-control-primary); }
.ui-triage-row-snoozed .ui-icon { width: 16px; height: 16px; }
.ui-triage-row.is-transient .ui-triage-row-title { color: var(--ui-label-muted); }
.ui-triage-row.is-transient .ui-triage-row-sub { opacity: .5; }
/* A row arriving in the list fades in, as Linear's do (animateArrivals). */
@media (prefers-reduced-motion: no-preference) {
  .ui-triage-row { animation: ui-triage-arrive var(--ui-pop-in) var(--ui-ease-out-expo); }
}
@keyframes ui-triage-arrive { from { opacity: 0; transform: translateY(-4px); } }

/* The open issue's header, Linear's: the ID and title, its star and more menu, then the
   triage actions as 28px borderless buttons (12px/500, a 14px icon 6px from the label,
   6px apart): Accept and Decline with their labels (icons only on a narrow window),
   Mark as duplicate and Snooze as icons; a snoozed issue shows when it comes back. */
.ui-triage-pane-head > .ui-crumbs { min-width: 0; margin-left: 10px; gap: 6px; }
.ui-triage-pane-head .ui-crumb { min-width: 0; color: var(--ui-label-title); }
.ui-triage-pane-head .ui-crumb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-triage-actions { flex: none; gap: 6px; }
.ui-app .ui-triage-pane-head .ui-crumbs > .ui-btn { margin: 0; color: var(--ui-label-base); }
.ui-app .ui-triage-actions .ui-icon-btn { color: var(--ui-label-base); }
.ui-app .ui-triage-action, .ui-app .ui-triage-snoozed {
  gap: 0; height: 28px; padding: 0 10px 0 8px; border: 0; border-radius: var(--ui-radius-pill);
  background: transparent; box-shadow: none; color: var(--ui-label-base); font: 500 12px/normal var(--ui-font);
}
.ui-triage-action .ui-icon, .ui-triage-snoozed .ui-icon { width: 14px; height: 14px; margin-right: 6px; }
.ui-app .ui-triage-action:hover, .ui-app .ui-triage-snoozed:hover { background: var(--ui-control-tertiary-hover); }
.ui-triage-actions-sep { width: 1px; height: 16px; background: var(--ui-border); }
@media (max-width: 1280px) {
  .ui-triage-action-label { display: none; }
  .ui-triage-action .ui-icon { margin-right: 0; }
  .ui-app .ui-triage-action { width: 28px; padding: 0; justify-content: center; }
}

/* The pane with nothing open: "2 issues to triage" in labelBase, "Nothing to triage"
   muted, the snoozed link, "Create triage issue". */
.ui-split-empty-text.is-strong { color: var(--ui-label-base); }
.ui-app .ui-split-empty-link { padding: 0; border: 0; background: none; color: var(--ui-label-muted); font: 450 13px/normal var(--ui-font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ui-app .ui-split-empty-link:hover { color: var(--ui-label-base); }
.ui-icon.ui-i-illo-triage-queue { width: 132px; height: 84px; }

/* Linear's accept and decline dialogs (its fast editor modal): the action and the issue
   on top, the comment, accept's properties as pills, then "Subscribe to updates" and
   the primary button. */
.ui-modal.ui-triage-modal { width: min(640px, calc(100vw - 32px)); }
.ui-triage-dialog-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 14px 14px 0 18px; }
.ui-triage-dialog-head > .ui-icon { flex: none; width: 16px; height: 16px; color: var(--ui-label-base); }
.ui-triage-dialog-title { flex: 1; min-width: 0; overflow: hidden; color: var(--ui-label-base); font: 450 13px/normal var(--ui-font); text-overflow: ellipsis; white-space: nowrap; }
.ui-triage-dialog-title strong { font-weight: 500; }
.ui-triage-dialog-body { padding: 12px 18px 4px; }
.ui-triage-dialog-body .ui-modal-input-desc { min-height: 72px; font-size: 14px; }
.ui-app .ui-triage-pill {
  height: 24px; max-width: 220px; padding: 0 8px 0 6px; border-radius: var(--ui-radius-pill);
  background: var(--ui-control-secondary); box-shadow: 0 0 0 1px var(--ui-border-solid);
  color: var(--ui-label-base); font: 450 12px/1 var(--ui-font);
}
.ui-app .ui-triage-pill.is-empty { color: var(--ui-label-muted); }
.ui-app .ui-triage-pill:hover, .ui-app .ui-triage-pill[aria-expanded="true"] { background: var(--ui-control-secondary-hover); color: var(--ui-label-title); }
.ui-triage-pill .ui-icon, .ui-triage-pill .ui-avatar { width: 14px; height: 14px; font-size: 7px; }
.ui-triage-pill.ui-prop-labels { min-height: 24px; padding: 0 8px 0 6px; flex-wrap: nowrap; white-space: nowrap; }
.ui-triage-dialog-foot { justify-content: space-between; border-top: 1px solid var(--ui-border-faint); }
.ui-triage-dialog-subscribe { display: inline-flex; align-items: center; gap: 8px; color: var(--ui-label-muted); font: 450 12px/normal var(--ui-font); }
.ui-sheet-foot { display: flex; justify-content: flex-end; gap: 6px; }
/* A small dialog (UI.dialog: a confirmation, Update schedule): Linear's 562px card, the
   title in labelTitle, the description muted, Cancel and the action at the bottom right
   as 24px pills. Padding sits on the parts, so a click on the dialog itself is the page. */
.ui-dialog.ui-dialog-small { width: min(562px, calc(100vw - 32px)); padding: 0; }
.ui-dialog-small > * { padding: 0 16px; }
.ui-dialog-small-head { padding-top: 16px; padding-bottom: 16px; }
.ui-dialog-small-title { color: var(--ui-label-title); font: 500 13px/1.4 var(--ui-font); }
.ui-dialog-small-desc { color: var(--ui-label-muted); font: 450 13px/1.4 var(--ui-font); }
.ui-dialog-small-body { padding-bottom: 16px; }
.ui-dialog-small-foot { display: flex; justify-content: flex-end; gap: 8px; padding-bottom: 16px; }
.ui-dialog-small-foot .ui-btn { height: 24px; padding: 0 10px; border-radius: var(--ui-radius-pill); font: 500 12px var(--ui-font); }
/* Update schedule: radio rows split by hairlines; the custom row's pills (kit menus). */
.ui-schedule-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ui-border-faint); cursor: default; }
.ui-schedule-option:first-child { padding-top: 0; }
.ui-schedule-option:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-schedule-option input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ui-control-primary); }
.ui-schedule-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-schedule-label { color: var(--ui-label-title); }
.ui-schedule-desc { color: var(--ui-label-muted); }
.ui-schedule-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--ui-label-base); }
.ui-schedule-line[hidden], .ui-schedule-line [hidden] { display: none; }
.ui-schedule-pick { height: 24px; gap: 4px; padding: 0 6px 0 10px; border-radius: var(--ui-radius); font: 450 12px var(--ui-font); }
.ui-schedule-pick .ui-icon { width: 12px; height: 12px; color: var(--ui-label-muted); }
.ui-textarea {
  width: 100%;
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ui-radius);
  background: var(--ui-bg-base);
  box-shadow: inset 0 0 0 1px var(--ui-border);
  color: var(--ui-label-title);
  font: 450 13px/1.5 var(--ui-font);
  resize: vertical;
  outline: none;
}

/* A dialog (Linear's settings modals: triage responsibility): centred, 630px, radius 12. */
.ui-dialog {
  width: min(630px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  margin: 13vh auto auto;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-bg-base);
  box-shadow: var(--ui-shadow-high);
  color: var(--ui-label-base);
  font: 450 13px/1.4 var(--ui-font);
  overflow: visible;
}
.ui-dialog[open] { animation: ui-dialog-in var(--ui-spring-pop-in-ms) var(--ui-spring-pop-in); }
.ui-dialog::backdrop { background: var(--ui-overlay); }
@keyframes ui-dialog-in { from { opacity: 0; transform: scale(.98); } }
.ui-dialog-head { display: flex; align-items: center; gap: 8px; padding: 18px 16px 6px 20px; color: var(--ui-label-title); font: 600 15px/1.2 var(--ui-font); }
.ui-dialog-head .ui-icon-btn { margin-left: auto; }
/* Linear's Customize sidebar (ui/_customize_sidebar.html): 480px; grouped rows of 36px
   on the sub surface, a drag handle, the row's kit select drawn as plain text. */
.ui-sb-dialog { width: min(480px, calc(100vw - 32px)); }
.ui-sb-dialog .ui-dialog-head { padding: 22px 16px 10px 24px; }
.ui-sb-dialog .ui-dialog-body { gap: 0; padding: 8px 24px 24px; }
.ui-sb-section { margin: 20px 0 10px; color: var(--ui-label-title); font: 500 13px/16px var(--ui-font); }
.ui-sb-group { padding: 2px 12px; border-radius: var(--ui-radius-lg); box-shadow: inset 0 0 0 1px var(--ui-border-faint); background: var(--ui-bg-sub); }
.ui-sb-badge { padding: 4px 12px; }
.ui-sb-row { display: flex; align-items: center; gap: 6px; height: 36px; user-select: none; color: var(--ui-label-title); font: 500 13px/16px var(--ui-font); }
.ui-sb-row > .ui-icon { width: 14px; height: 14px; color: var(--ui-label-base); }
.ui-sb-row.is-off .ui-sb-label, .ui-sb-row.is-off > .ui-icon { color: var(--ui-label-faint); }
.ui-sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sb-handle { display: inline-flex; margin-left: -4px; color: var(--ui-label-faint); cursor: grab; touch-action: none; }
.ui-sb-handle .ui-icon { width: 14px; height: 14px; }
.ui-sb-row .ui-select-button { height: 28px; padding: 0 26px 0 8px; border: 0; box-shadow: none; background: transparent; color: var(--ui-label-base); font: 450 13px/1 var(--ui-font); }
.ui-sb-row .ui-select-button::after { display: none; }
.ui-sb-row .ui-select-button .ui-select-chevron { right: 8px; }
.ui-sb-row .ui-select-button:not(:disabled):hover { background: var(--ui-bg-base-hover); }
.ui-dialog-desc { padding: 0 20px 14px; color: var(--ui-label-muted); }
.ui-dialog-body { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }
.ui-field { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--ui-radius); box-shadow: inset 0 0 0 1px var(--ui-border-faint); background: var(--ui-bg-sub); }
.ui-field-text { flex: 1; min-width: 0; }
.ui-field-label { color: var(--ui-label-title); font: 500 13px/1.4 var(--ui-font); }
.ui-field-desc { color: var(--ui-label-muted); font: 450 12px/1.4 var(--ui-font); }
.ui-field select, .ui-field input[type=date] { height: 28px; padding: 0 8px; border: 0; border-radius: var(--ui-radius-pill); background: var(--ui-control-secondary); box-shadow: 0 0 0 1px var(--ui-control-ring), var(--ui-shadow-low); color: var(--ui-label-base); font: 500 12px var(--ui-font); }
.ui-people { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.ui-people label { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: var(--ui-radius); color: var(--ui-label-base); }
.ui-people label:hover { background: var(--ui-bg-base-hover); }
.ui-people input { accent-color: var(--ui-control-primary); }
.ui-field-top { align-items: flex-start; }
.ui-link { color: var(--ui-label-link); text-decoration: none; }
.ui-link:hover { text-decoration: underline; }
.ui-btn-primary .ui-kbd { background: transparent; border-color: lch(100% 0 0 / .3); color: inherit; }
.ui-notice:focus-visible { outline: none; }
.ui-split-detail > .ui-split-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ui-split-pane > .ui-issue { flex: 1; min-height: 0; }
.ui-split-back { display: none; }

/* Phone: the queue and the selected item take turns, full width (.is-detail: the item;
   split.js sets it on a row's click, its back button clears it). */
@media (max-width: 768px) {
  .ui-split { grid-template-columns: minmax(0, 1fr); }
  .ui-split-list { border-right: 0; }
  .ui-split-detail, .ui-split.is-detail .ui-split-list { display: none; }
  .ui-split.is-detail .ui-split-detail { display: flex; }
  /* an empty queue: its header, then the empty pane under it */
  .ui-split:not(:has(.ui-split-list [data-ui-item])) { grid-template-rows: auto minmax(0, 1fr); }
  .ui-split:not(:has(.ui-split-list [data-ui-item])) .ui-split-body { display: none; }
  .ui-split:not(:has(.ui-split-list [data-ui-item])) .ui-split-detail { display: flex; }
  .ui-split-back { display: inline-flex; margin-left: -6px; }
  .ui-split-detail .ui-header { padding: 0 8px 0 12px; }
  .ui-split-detail .ui-crumb-id + span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ui-triage-pane-head > .ui-crumbs { margin-left: 32px; }
  .ui-triage-pane-head .ui-star, .ui-triage-pane-head [data-issue-more] { display: none; }
  .ui-split-list .ui-triage-list { padding-right: 4px; }
  .ui-triage-row-in { margin-left: 4px; }
  .ui-panel { padding: 20px 16px 48px; }
  /* The queue header holds the shell's menu button, as Linear's does: full width, the
     title clear of the button. */
  .ui-main > :first-child + .ui-split { padding-left: 0; }
  .ui-split-list .ui-header { padding: 0 8px; }
  .ui-split-list .ui-header > .ui-crumbs { margin-left: 40px; }
  .ui-split-list .ui-list { padding-right: 0; }
  .ui-notice { margin: 0; }
  .ui-notice-in { margin: 0 4px; }
}
@media (max-width: 480px) {
  .ui-dialog { margin-top: 6vh; }
  .ui-dialog .ui-field { flex-wrap: wrap; }
  .ui-dialog .ui-field .ui-people { width: 100%; }
}

/* --- filters: view bar extras, details panel, filter menu, display properties --- */

.ui-tab .ui-icon { color: var(--ui-label-muted); }
.ui-btn.is-active { background: var(--ui-control-tertiary-selected); color: var(--ui-label-title); }
.ui-group-total { margin-left: -2px; color: var(--ui-label-faint); font-weight: 450; }
.ui-chip .ui-avatar { width: 14px; height: 14px; font-size: 6px; }
.ui-filter-seg .ui-avatar { width: 14px; height: 14px; font-size: 6px; }
.ui-filter-seg .ui-dot { margin-right: -1px; }
.ui-menu-item.is-action { color: var(--ui-label-muted); }
.ui-menu-item.is-action .ui-check { display: none; }
.ui-display-panel { max-height: calc(100vh - 24px); }
/* A filter value menu: Linear fits full names beside "13 issues" in 242px. */
.ui-menu-values .ui-menu-item { gap: 8px; padding-right: 12px; }
.ui-menu-values .ui-menu-hint { font-size: 12px; }

.ui-details-split { display: flex; flex: 1; min-height: 0; gap: 8px; }
.ui-details-split > .ui-scroll { flex: 1; min-width: 0; }
.ui-details {
  flex: none;
  width: 440px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 8px 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ui-details[hidden] { display: none; }
.ui-details-card {
  background: var(--ui-bg-base);
  border-radius: var(--ui-radius-lg, 8px);
  box-shadow: 0 0 0 1px var(--ui-border-faint);
  padding: 14px 12px;
}
.ui-details-breakdown { flex: 1; }
.ui-details-title { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--ui-font); color: var(--ui-label-title); }
.ui-details-title .ui-icon { color: var(--ui-label-muted); }
.ui-details-desc { margin: 10px 0 0; color: var(--ui-label-muted); font-size: 13px; }
.ui-details-props { display: grid; gap: 12px; }
.ui-details-prop { display: grid; grid-template-columns: 108px 1fr; align-items: center; font-size: 13px; color: var(--ui-label-title); }
.ui-details-prop > span:last-child { display: inline-flex; align-items: center; gap: 8px; }
.ui-details-key { color: var(--ui-label-muted); }

/* The advanced filter: a nested and/or builder in a popover. */
.ui-advanced { width: 560px; max-width: calc(100vw - 16px); padding: 10px; }
.ui-advanced-group { display: flex; flex-direction: column; gap: 6px; }
.ui-advanced-group .ui-advanced-group { margin-left: 16px; padding: 8px; border-radius: 8px; background: var(--ui-bg-sub); }
.ui-advanced-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ui-label-muted); }
.ui-advanced:focus { outline: none; }
.ui-advanced-head .ui-select { width: auto; min-width: 0; height: 24px; padding: 0 8px; }
.ui-advanced-row { display: flex; align-items: center; gap: 6px; }
.ui-advanced-actions { display: flex; gap: 6px; margin-top: 2px; }
.ui-advanced-actions .ui-btn { height: 24px; font-size: 12px; }

@media (max-width: 768px) {
  .ui-details-split { position: relative; }
  .ui-details:not([hidden]) {
    position: absolute;
    inset: 0;
    width: auto;
    padding: 0 8px 8px;
    background: var(--ui-bg-sub);
    z-index: 2;
  }
  .ui-advanced { width: calc(100vw - 16px); }
}
/* --- projects: projects page side panel and New project dialog --- */
.ui-projects-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; flex: 1; min-height: 0; }
.ui-projects-page.is-panel-hidden { grid-template-columns: minmax(0, 1fr); }
.ui-projects-page > .ui-scroll { min-width: 0; }
.ui-projects-side { margin: 0 8px 8px 0; padding: 12px 16px; border-radius: var(--ui-radius-lg); background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border-faint); overflow-y: auto; }
.ui-projects-side .ui-breakdown-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
.ui-projects-side-row { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border-radius: var(--ui-radius); color: var(--ui-label-title); font: 450 13px/1 var(--ui-font); }
.ui-projects-side-row:hover { background: var(--ui-bg-base-hover); }
.ui-projects-side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-projects-side-count { color: var(--ui-label-base); font-variant-numeric: tabular-nums; }

/* Linear's New project dialog (918px, 12px radius, 58px from the top): a plain overlay
   (project_pages/_new_project.html) so the kit's menus draw above it. */
.ui-new-project-backdrop { padding-top: 58px; }
.ui-new-project-backdrop[hidden] { display: none; }
.ui-modal.ui-new-project { width: min(918px, calc(100vw - 32px)); height: min(702px, calc(100vh - 116px)); max-height: none; border-radius: 12px; overflow: hidden; }
.ui-new-project-form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ui-new-project-head { display: flex; align-items: center; gap: 6px; padding: 16px 18px 0; color: var(--ui-label-title); font: 450 13px/1 var(--ui-font); }
.ui-new-project-close { margin-left: auto; }
.ui-new-project-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; padding: 12px 26px 0; overflow-y: auto; }
.ui-new-project-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; background: var(--ui-bg-sub); color: var(--ui-label-muted); }
.ui-new-project-name, .ui-new-project-summary, .ui-new-project-desc { border: 0; padding: 0; background: none; color: var(--ui-label-title); outline: none; font-family: var(--ui-font); }
.ui-new-project-name { margin-top: 6px; font-size: 24px; font-weight: 600; line-height: 32px; }
.ui-new-project-summary { font-size: 15px; font-weight: 450; line-height: 23px; color: var(--ui-label-base); }
.ui-new-project-name::placeholder, .ui-new-project-summary::placeholder, .ui-new-project-desc::placeholder { color: var(--ui-label-faint); }
.ui-app .ui-new-project-name:focus-visible, .ui-app .ui-new-project-summary:focus-visible, .ui-app .ui-new-project-milestone-name:focus-visible, .ui-app .ui-new-project-milestone-desc:focus-visible { outline: none; }
.ui-new-project-props { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 16px; border-bottom: 1px solid var(--ui-border-faint); }
.ui-new-project-desc { flex: 1; min-height: 160px; padding-top: 16px; resize: none; font-size: 15px; line-height: 24px; }
.ui-new-project-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ui-border-faint); }
/* The dialog's pills are kit pickers drawn as Linear's 24px pills. */
.ui-prop.ui-pill { width: auto; height: 24px; min-height: 24px; max-width: 260px; padding: 0 8px 0 6px; gap: 6px; border-radius: var(--ui-radius-pill); background: var(--ui-control-secondary); box-shadow: 0 0 0 1px var(--ui-border-solid); color: var(--ui-label-base); font: 450 12px/1 var(--ui-font); }
.ui-prop.ui-pill:hover { background: var(--ui-control-secondary-hover); color: var(--ui-label-title); }
.ui-prop.ui-pill.is-empty { color: var(--ui-label-muted); }
.ui-prop.ui-pill .ui-icon { width: 14px; height: 14px; flex: none; }
.ui-prop.ui-pill .ui-avatar { width: 16px; height: 16px; font-size: 7px; }
.ui-prop.ui-pill [data-ui-picker-chips] { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.ui-prop.ui-pill .ui-chip { height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
.ui-avatar-stack .ui-avatar + .ui-avatar { box-shadow: 0 0 0 1.5px var(--ui-control-secondary); }
.ui-new-project-teams { margin-left: -2px; }
/* Milestones, at the dialog's foot as Linear's. */
.ui-new-project-milestones { margin: 0 18px 12px; border: 1px solid var(--ui-border-faint); border-radius: 8px; }
.ui-new-project-milestones-head { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 4px 0 10px; color: var(--ui-label-title); font: 500 13px/1 var(--ui-font); }
.ui-new-project-milestone-list { margin: 0; padding: 0 4px 4px; list-style: none; }
.ui-new-project-milestone-list:empty { display: none; }
.ui-new-project-milestone { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px; border-radius: 6px; color: var(--ui-label-title); font: 450 13px/1 var(--ui-font); }
.ui-new-project-milestone:hover { background: var(--ui-bg-base-hover); }
.ui-new-project-milestone-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-new-project-milestone-when { color: var(--ui-label-muted); font-size: 12px; }
.ui-new-project-milestone-form { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; border-top: 1px solid var(--ui-border-faint); }
.ui-new-project-milestone-form[hidden] { display: none; }
.ui-new-project-milestone-title { padding-top: 10px; color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-new-project-milestone-row { display: flex; align-items: center; gap: 8px; }
.ui-new-project-milestone-name, .ui-new-project-milestone-desc { flex: 1; border: 0; padding: 0; background: none; color: var(--ui-label-title); outline: none; font: 500 13px/20px var(--ui-font); }
.ui-new-project-milestone-desc { resize: none; color: var(--ui-label-base); font-weight: 450; }
.ui-app .ui-new-project-milestone-date.ui-icon-btn { gap: 6px; width: auto; min-width: 28px; padding: 0 6px; border-radius: 8px; color: var(--ui-label-muted); font-size: 12px; }
.ui-new-project-milestone-date .ui-icon { width: 16px; height: 16px; }
/* No date yet: the icon alone, centred in Linear's 28px square (an empty label would
   still take the gap and push the icon, and the focus ring, off centre). */
.ui-new-project-milestone-date [data-pp-date-label]:empty { display: none; }
.ui-new-project-milestone-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Linear's project date menu (static/js/datemenu.js). */
.ui-datemenu { width: 271px; padding: 12px 0 6px; }
.ui-datemenu-title { padding: 0 12px 8px; color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-datemenu > .ui-daypicker-field { margin: 0 12px; }
.ui-datemenu-tabs { display: flex; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--ui-border-faint); }
.ui-datemenu-tab { flex: none; height: 22px; padding: 0 6px; border: 0; border-radius: 9999px; background: none; box-shadow: 0 0 0 1px var(--ui-border-faint); color: var(--ui-label-base); font: 450 11px/1 var(--ui-font); }
.ui-datemenu-tab:hover { color: var(--ui-label-title); background: var(--ui-bg-base-hover); }
.ui-datemenu-tab.is-active { background: var(--ui-bg-shade); color: var(--ui-label-title); }
.ui-datemenu-body { padding: 0 12px 6px; max-height: 198px; overflow-y: auto; scrollbar-width: none; }
.ui-datemenu-body:focus-visible { outline: none; }
.ui-datemenu-body.is-day { max-height: none; overflow: visible; padding: 0 6px; }
.ui-datemenu-body.is-day .ui-daypicker-cal { margin-top: 4px; }
.ui-datemenu-group { padding-top: 8px; }
.ui-datemenu-year { padding: 0 0 6px; color: var(--ui-label-muted); font: 450 11px/1 var(--ui-font); }
.ui-datemenu-row { display: grid; gap: 4px; }
.ui-datemenu-row.is-month { grid-template-columns: repeat(3, 1fr); }
.ui-datemenu-row.is-quarter { grid-template-columns: repeat(4, 1fr); }
.ui-datemenu-row.is-halfYear { grid-template-columns: repeat(2, 1fr); }
.ui-datemenu-cell { display: grid; place-items: center; height: 24px; border: 0; border-radius: 9999px; background: none; box-shadow: inset 0 0 0 1px var(--ui-border-faint); color: var(--ui-label-title); font: 450 12px/1 var(--ui-font); }
.ui-datemenu-cell:hover { background: var(--ui-bg-shade); }
.ui-datemenu-cell.is-today { box-shadow: inset 0 0 0 1px var(--ui-border-solid); }
.ui-datemenu-cell.is-highlighted { box-shadow: inset 0 0 0 1px var(--ui-control-primary); background: color-mix(in lch, var(--ui-control-primary) 10%, var(--ui-bg-base)); }
.ui-datemenu-body:focus .ui-datemenu-cell.is-focused { outline: 1px solid var(--ui-focus-color); outline-offset: 1px; }
.ui-datemenu-cell.is-picked, .ui-datemenu-cell.is-picked:hover { background: var(--ui-control-primary); color: var(--ui-control-primary-label); box-shadow: none; }
.ui-datemenu-remove { display: block; width: calc(100% - 12px); margin: 4px 6px 0; padding: 0 6px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ui-label-base); text-align: left; font: 450 13px/1 var(--ui-font); }
.ui-datemenu-remove:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }

@media (max-width: 768px) {
  .ui-projects-page { grid-template-columns: minmax(0, 1fr); }
  .ui-projects-side { position: fixed; inset: auto 0 0 0; max-height: 70vh; margin: 0; border-radius: 12px 12px 0 0; box-shadow: var(--ui-shadow-high); z-index: 20; }
  .ui-new-project-backdrop { padding-top: 0; }
  .ui-modal.ui-new-project { width: 100vw; height: 100dvh; border-radius: 0; }
  .ui-new-project-body { padding: 12px 16px 0; }
}

/* --- shell: a team's Home (web/team_overview.html), Linear's team overview --- */
/* Linear's team overview: a 700px column (12px kept clear on its right) and a 220px
   side column 48px from it, the pair centred; the title row a 36px tile 12px from the
   24px/32px name; the side's groups 24px apart, each heading 12px above its content;
   the page links 28px pills 8px apart. */
.web-team-home { display: flex; justify-content: center; gap: 48px; padding: 24px 0 48px; }
.web-team-home-main { flex: 0 1 700px; min-width: 0; padding-right: 12px; }
.web-team-home-title { display: flex; align-items: center; gap: 12px; }
.web-team-home-title h1 { margin: 0; color: var(--ui-label-title); font: 600 var(--ui-text-title2)/2rem var(--ui-font); }
.ui-team-icon.web-team-home-icon { width: 36px; height: 36px; border-radius: 6px; font-size: 18px; background: color-mix(in srgb, var(--team) 12.5%, transparent); }
.ui-team-icon.web-team-home-icon.is-emoji { background: color-mix(in srgb, var(--team) 12.5%, transparent); font-size: 21px; }
.ui-team-icon.web-team-home-icon .ui-icon { width: 24px; height: 24px; }
.web-team-home-desc { margin: 20px 0 0; color: var(--ui-label-base); font: 450 var(--ui-text-regular)/1.6 var(--ui-font); white-space: pre-line; }
.web-team-home-desc.is-empty { color: var(--ui-label-faint); }
/* Linear's in-place description: 15px/23px, faint placeholder, no box. */
.web-team-home-descform { margin: 20px 0 0; }
textarea.web-team-home-desc { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: 450 15px/23px var(--ui-font); resize: none; overflow: hidden; }
/* Team resources: the heading row (18px/500, the add buttons at its end) 34px under the
   description, the hint 11px under it in the faint colour; links as rows. */
.web-team-res { margin-top: 34px; }
.web-team-res-head { display: flex; align-items: center; gap: 8px; height: 28px; }
.web-team-res-head h2 { flex: 1; margin: 0; color: var(--ui-label-title); font: 500 18px/22px var(--ui-font); }
.web-team-res-actions { display: flex; gap: 4px; }
.web-team-res-pop .ui-popover { left: auto; right: 0; }
.web-team-res-empty { margin: 11px 0 0; color: var(--ui-label-faint); font: 450 15px/23px var(--ui-font); }
.web-team-res-list { display: flex; flex-direction: column; margin-top: 8px; }
.web-team-res-row { display: flex; align-items: center; gap: 4px; margin: 0 -8px; padding: 0 4px 0 8px; border-radius: var(--ui-radius); }
.web-team-res-row:hover { background: var(--ui-bg-base-hover); }
.web-team-res-link { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 36px; color: var(--ui-label-base); font: 500 13px/16px var(--ui-font); }
.web-team-res-link > .ui-icon { color: var(--ui-label-muted); }
.web-team-res-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-team-res-host { overflow: hidden; color: var(--ui-label-faint); font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.web-team-res-remove { opacity: 0; }
.web-team-res-row:hover .web-team-res-remove, .web-team-res-remove:focus-visible { opacity: 1; }
.web-team-res-section { margin-top: 20px; }
.web-team-res-section-head { display: flex; align-items: center; gap: 4px; height: 28px; }
.web-team-res-section-head h3 { flex: 1; margin: 0; color: var(--ui-label-muted); font: 500 13px/16px var(--ui-font); }
.web-team-res-none { margin: 4px 0 0; color: var(--ui-label-faint); font: 450 13px/20px var(--ui-font); }
.web-team-home-side { display: flex; flex-direction: column; gap: 24px; width: 220px; flex: none; margin-top: 8px; padding: 8px 8px 24px 0; }
.web-team-home-group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.web-team-home-side h2 { margin: 0; color: var(--ui-label-muted); font: 500 13px/16px var(--ui-font); }
.web-team-home-members { display: inline-flex; align-items: center; gap: 8px; height: 26px; margin: 1px 0 1px -4px; padding: 4px 8px 4px 4px; border-radius: var(--ui-radius-pill); color: var(--ui-label-muted); font: 500 12px/1 var(--ui-font); }
.web-team-home-members:hover { background: var(--ui-control-tertiary-hover); }
.web-team-home-faces { display: inline-flex; }
.web-team-home-faces .ui-avatar + .ui-avatar { margin-left: -5px; box-shadow: 0 0 0 1.5px var(--ui-bg-base); }
.web-team-home-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.web-team-home-link { display: flex; align-items: center; gap: 4px; height: 28px; margin-left: -7px; padding: 5px 8px 5px 6px; border-radius: var(--ui-radius-pill); color: var(--ui-label-base); font: 500 13px/16px var(--ui-font); }
.web-team-home-link:hover { background: var(--ui-control-tertiary-hover); color: var(--ui-label-title); }
.web-team-home-link .ui-icon { width: 16px; height: 16px; margin: 1px; color: var(--ui-label-muted); }
@media (max-width: 768px) {
  .web-team-home { flex-direction: column; gap: 24px; padding: 24px 16px 40px; }
  .web-team-home-main { flex: none; padding-right: 0; }
  .web-team-home-side { width: auto; }
}

/* --- projects: the project page (overview, activity) as Linear's --- */
.ui-project-page { position: relative; display: flex; flex: 1; min-height: 0; }
.ui-project-page > .ui-project-main { flex: 1; min-width: 0; }
/* Linear's hover cards (static/js/hovercard.js): an issue's or a project's details. */
.ui-hovercard { position: fixed; z-index: var(--ui-z-popover); display: flex; flex-direction: column; gap: 6px; min-width: 256px; max-width: 398px; padding: 11px 14px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-bg-base); box-shadow: var(--ui-shadow-low); color: var(--ui-label-base); font: 450 12px/18px var(--ui-font); animation: ui-hovercard-in .12s ease-out; }
@keyframes ui-hovercard-in { from { opacity: 0; } }
.ui-hc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 16px; }
.ui-hc-id { color: var(--ui-label-faint); }
.ui-hc-person, .ui-hc-prop { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.ui-hc-person .ui-avatar, .ui-hc-prop .ui-avatar { width: 16px; height: 16px; font-size: 7px; }
.ui-hc-prop > .ui-icon, .ui-hc-prop > .ui-ring, .ui-hc-prop > .ui-project-icon { flex: none; width: 16px; height: 16px; }
.ui-hc-prop > .ui-status { width: 14px; height: 14px; }
.ui-hc-milestone { color: var(--ui-label-muted); }
.ui-hc-name { display: flex; align-items: center; gap: 6px; }
.ui-hc-title { display: block; min-width: 0; margin: 0 -5px; padding: 3px 5px; overflow: hidden; border-radius: 4px; color: var(--ui-label-base); font: 500 13px/18px var(--ui-font); text-overflow: ellipsis; text-decoration: none; }
.ui-hc-name .ui-hc-title { margin-left: -5px; }
.ui-hc-title:hover { background: var(--ui-bg-base-hover); }
.ui-hc-summary { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ui-label-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ui-hc-props { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ui-border-faint); }
.ui-hc-line { display: flex; flex-wrap: wrap; gap: 8px 16px; }
/* Linear's document outline at the main panel's left: a tick per section and heading
   (8px a section, 6 / 4 / 2px deeper), the one being read dark; hovering opens the list. */
.ui-outline { position: absolute; left: 0; top: 50%; z-index: 11; padding: 4px 24px 4px 4px; transform: translateY(-50%); cursor: default; }
.ui-outline[hidden] { display: none; }
.ui-outline-ticks { display: flex; flex-direction: column; align-items: flex-end; width: 8px; }
.ui-outline-tick { width: var(--w, 6px); height: 1px; margin: 5.5px 0; background: var(--ui-label-faint); transition: background .15s; }
.ui-outline-tick.is-active { height: 2px; margin: 5px 0; background: var(--ui-label-base); }
.ui-outline-pop { position: absolute; left: 0; top: 50%; padding-left: 8px; transform: translateY(-50%); }
.ui-outline-pop[hidden] { display: none; }
.ui-outline-list { display: flex; flex-direction: column; width: 251px; max-height: calc(100vh - 160px); overflow-y: auto; padding: 8px 0; border-radius: 8px; background: var(--ui-bg-base); box-shadow: var(--ui-shadow-medium); animation: ui-outline-in .12s ease-out; }
@keyframes ui-outline-in { from { opacity: 0; transform: scale(.96); } }
.ui-outline-row { display: flex; flex: none; align-items: center; gap: 6px; height: 24px; padding: 0 12px 0 calc(22px + 12px * var(--depth, 1)); color: var(--ui-label-faint); font: 450 13px/normal var(--ui-font); white-space: nowrap; text-decoration: none; }
.ui-outline-row.is-section { padding: 0 12px; color: var(--ui-label-muted); }
.ui-outline-row .ui-icon { flex: none; width: 16px; height: 16px; }
.ui-outline-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-outline-row:hover, .ui-outline-row.is-active { color: var(--ui-label-base); }
@media (max-width: 1100px) { .ui-outline { display: none; } }
.ui-project-main { padding: 64px 32px 64px; }
.ui-project-page .ui-project-body { max-width: 805px; }
.ui-project-page .ui-project-summary { color: var(--ui-label-base); }
.ui-project-propline { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 16px; margin: 0 0 14px; }
.ui-project-propline-label { flex: none; width: 65.5px; padding: 6px 0; color: var(--ui-label-muted); font: 500 13px/normal var(--ui-font); }
.ui-project-propline-items { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; }
.ui-prop-slot { display: contents; }
.ui-prop-slot[hidden] { display: none; }
.ui-project-propline-items .ui-prop { gap: 0; height: 28px; padding: 3px 6px; color: var(--ui-label-base); font: 500 13px/1 var(--ui-font); }
.ui-project-propline-items .ui-prop > :first-child:not(:last-child) { margin-right: 6px; }
.ui-project-members .ui-avatar + .ui-avatar { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--ui-bg-base); }
.ui-project-dates { display: inline-flex; align-items: center; gap: 2px; }
.ui-project-dates-arrow { color: var(--ui-label-muted); }
.ui-prop-date-pill { position: relative; gap: 6px; }
.ui-prop-date-pill input[type=date] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: default; }
.ui-prop-date-pill.is-empty { color: var(--ui-label-muted); }
.ui-plink-out { color: var(--ui-label-muted); font-size: 12px; }
.ui-project-propline .ui-plink { height: 24px; max-width: 296px; }
.ui-plink-add { position: relative; }
.ui-plink-add .ui-popover { position: absolute; top: 30px; left: 0; z-index: 5; width: 280px; }
/* A section's fold button ("Description ▾"): 28px, 8px in, hung 8px left of the column. */
.ui-project-collapse { display: flex; align-items: center; gap: 4px; height: 28px; margin: 0 -8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--ui-label-muted); font: 500 13px/normal var(--ui-font); cursor: default; }
.ui-project-collapse:hover { background: var(--ui-bg-base-hover); }
.ui-project-collapse .ui-icon { width: 16px; height: 16px; color: var(--ui-label-muted); transition: transform var(--ui-speed-hover); }
.ui-project-collapse[aria-expanded="false"] .ui-icon { transform: rotate(-90deg); }
.ui-project-desc.is-editable { cursor: text; }
.ui-activity-month { margin-top: 48px; }
.ui-activity-month-label { margin: 24px 0; color: var(--ui-label-base); font: 500 18px/22px var(--ui-font); }
.ui-activity-line { display: flex; align-items: center; gap: 8px; min-height: 29px; color: var(--ui-label-muted); font: 500 12px/1.4 var(--ui-font); }
.ui-activity-line b { color: inherit; font-weight: 500; }
.ui-activity-line .ui-activity-time { font-weight: 450; color: inherit; }
.ui-activity-line > .ui-icon { flex: none; width: 16px; height: 16px; color: var(--ui-label-muted); }
.ui-activity-line .ui-milestone-icon.is-done { color: var(--ui-control-primary); }
.ui-project-activity .ui-update { margin: 12px 0; }
@media (max-width: 768px) {
  .ui-project-main { padding: 24px 40px 48px; }
  .ui-project-propline { flex-direction: column; gap: 4px; }
  .ui-project-propline-label { width: auto; padding: 6px 0; }
}
/* Linear's description headings: 22px h1, 19px h2, 15px body. */
.ui-project-desc h1 { margin: 0 0 16px; font: 600 22px/29.6px var(--ui-font); color: var(--ui-label-title); }
.ui-project-desc h2 { margin: 32px 0 16px; font: 600 19px/28px var(--ui-font); letter-spacing: .05px; color: var(--ui-label-title); }
/* Linear's description blocks carry no margin of their own; the one after a paragraph does. */
.ui-project-desc p { margin: 0; letter-spacing: -0.1px; }
/* Linear's editor text turns on contextual alternates. */
.ui-project-desc, .ui-project-title.ui-issue-title, .ui-project-summary, .ui-milestone-name { font-feature-settings: "calt"; }
.ui-project-desc :is(p, ul, ol, pre, blockquote, table) + p { margin-top: 16px; }
.ui-project-desc p + :is(ul, ol) { margin-top: 6px; }
.ui-project-desc :is(ul, ol) { margin-bottom: 0; padding-left: 24px; }
.ui-project-desc li + li, .ui-project-desc li > :is(ul, ol) { margin-top: 6px; }
.ui-project-desc li > p { margin: 0; }

/* --- projects: the Insights panel beside an issue list (Linear's) --- */
.ui-with-insights { display: flex; flex: 1; min-height: 0; min-width: 0; }
.ui-with-insights > .ui-scroll { flex: 1; min-width: 0; }
.ui-insights-panel { width: 468px; flex: none; margin: 0 8px 8px 0; padding: 14px 16px; border-radius: var(--ui-radius-lg); background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border-faint); overflow-y: auto; }
.ui-insights-panel[hidden] { display: none; }
.ui-insights-head { display: flex; align-items: center; height: 28px; margin-bottom: 8px; }
.ui-insights-total { color: var(--ui-label-muted); font: 450 13px/1 var(--ui-font); }
.ui-insights-total b { color: var(--ui-label-title); font: 500 20px/1 var(--ui-font); margin-right: 4px; }
.ui-insights-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.ui-insights-control { display: flex; flex-direction: column; gap: 6px; color: var(--ui-label-base); font: 500 12px/1 var(--ui-font); }
.ui-insights-select { justify-content: space-between; width: 100%; height: 32px; }
.ui-insights-control.is-inline { flex-direction: row; align-items: center; gap: 8px; color: var(--ui-label-muted); }
.ui-insights-control.is-inline .ui-insights-select { width: auto; min-width: 140px; height: 28px; gap: 8px; color: var(--ui-label-title); }
.ui-insights-select .ui-icon { width: 12px; height: 12px; color: var(--ui-label-muted); }
.ui-insights-chart { position: relative; margin: 0 0 28px; }
.ui-insights-chart .ui-chart { width: 100%; height: 220px; overflow: visible; }
.ui-insights-grid { stroke: var(--ui-border-faint); stroke-dasharray: 3 3; }
.ui-insights-tick { fill: var(--ui-label-muted); font: 450 11px var(--ui-font); }
.ui-insights-seg, .ui-legend-dot.is-6 { fill: var(--ui-series-6); background: var(--ui-series-6); }
.ui-insights-seg.is-0, .ui-legend-dot.is-0 { fill: var(--ui-series-0); background: var(--ui-series-0); }
.ui-insights-seg.is-1, .ui-legend-dot.is-1 { fill: var(--ui-series-1); background: var(--ui-series-1); }
.ui-insights-seg.is-2, .ui-legend-dot.is-2 { fill: var(--ui-series-2); background: var(--ui-series-2); }
.ui-insights-seg.is-3, .ui-legend-dot.is-3 { fill: var(--ui-series-3); background: var(--ui-series-3); }
.ui-insights-seg.is-4, .ui-legend-dot.is-4 { fill: var(--ui-series-4); background: var(--ui-series-4); }
.ui-insights-seg.is-5, .ui-legend-dot.is-5 { fill: var(--ui-series-5); background: var(--ui-series-5); }
.ui-insights-xlabels { position: absolute; left: 0; right: 0; bottom: -20px; height: 16px; }
.ui-insights-xlabels span { position: absolute; transform: translateX(-50%); max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-label-muted); font: 450 11px/16px var(--ui-font); }
.ui-insights-table-wrap { overflow-x: auto; margin: 0 -16px; border-top: 1px solid var(--ui-border-faint); }
.ui-insights-table { width: 100%; border-collapse: collapse; font: 450 13px/1 var(--ui-font); color: var(--ui-label-title); white-space: nowrap; }
.ui-insights-table th, .ui-insights-table td { height: 40px; padding: 0 16px; border-bottom: 1px solid var(--ui-border-faint); text-align: left; }
.ui-insights-table th { color: var(--ui-label-base); font-weight: 500; }
.ui-insights-table th + th, .ui-insights-table td + td { border-left: 1px solid var(--ui-border-faint); }
.ui-insights-table .ui-legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.ui-insights-table tr.is-total td { color: var(--ui-label-base); }
@media (max-width: 768px) {
  .ui-insights-panel { position: fixed; inset: auto 0 0 0; width: auto; max-height: 75vh; margin: 0; border-radius: 12px 12px 0 0; box-shadow: var(--ui-shadow-high); z-index: 20; }
}
/* --- projects: phone rules for the projects list, timeline header and project text --- */
@media (max-width: 768px) {
  .ui-plist-head { display: none; }
  .ui-prow > .ui-pcol-name { margin-left: 14px; }
  .ui-prow .ui-project-icon { margin-right: 4px; }
  .ui-plist [data-prop="members"], .ui-plist [data-prop="teams"], .ui-plist [data-prop="start_date"],
  .ui-plist [data-prop="target_date"], .ui-plist [data-prop="issues"], .ui-plist [data-prop="created"],
  .ui-plist [data-prop="updated"], .ui-plist [data-prop="completed"], .ui-plist [data-prop="priority"],
  .ui-plist [data-prop="lead"], .ui-prow-milestone, .ui-prow-summary { display: none !important; }
  .ui-pcol-health { width: 50px; }
  .ui-pbtn-health { justify-content: center; width: 28px; height: 28px; padding: 0 2px; }
  .ui-pbtn-health .ui-health .ui-icon { width: 14px; height: 14px; }
  .ui-plist .ui-pcol-status { width: 28px; }
  .ui-prow .ui-pbtn-health .ui-health > span, .ui-pstatus .ui-pbtn > span { display: none; }
  .ui-project-desc table { display: block; max-width: 100%; overflow-x: auto; }
  .ui-tl-controls { width: auto; margin-left: -120px; }
  .ui-tl-controls .ui-btn { padding: 0 8px; }
}
@media (max-width: 768px) {
  /* Phone: a 68px rail, the head keeps the name and scope, the legend drops under the chart. */
  .ui-cycles { padding: 4px 0 32px; }
  .ui-cycle-rail { width: 68px; }
  .ui-cycle-rail::before { left: 46px; }
  .ui-cycle-node { left: 42px; }
  .ui-cycle-date { right: 28px; }
  .ui-cycle-main { padding: 0 32px 0 12px; }
  .ui-cycle-head .ui-badge, .ui-cycle-head .ui-cycle-stat:not(:last-child) { display: none; }
  .ui-cycle-chart { grid-template-columns: minmax(0, 1fr); margin-right: 0; padding: 0 0 20px; }
}
/* --- palette: new-issue modal and help sheet on a phone ---
   The command palette keeps its desktop shape (16px from the edges, 450px tall), as
   Linear's does; the modal hangs from the top at full width; the shortcut sheet takes
   the screen. ] (Toggle right sidebar) hides the issue's properties panel. */
.ui-details-collapsed .ui-issue-side { display: none; }
#ui-overlays .ui-popover:focus-visible, #ui-overlays .ui-popover > [role]:focus-visible { outline: none; } /* a keyboard-opened menu (the help menu) has no ring */
@media (max-width: 768px) {
  .ui-palette-foot { display: none; }
  .ui-palette-list { padding-right: 4px; }
  .ui-modal-backdrop { padding: 8px 8px 0; }
  .ui-modal, .ui-modal.is-expanded { width: 100%; height: auto; max-height: calc(100dvh - 16px); }
  .ui-modal-expand { display: none; }
  .ui-modal-expand + .ui-modal-close { margin-left: auto; }
  .ui-modal-props { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ui-modal-props .ui-pill { flex: none; }
  .ui-help { inset: 8px; width: auto; max-width: none; }
}
@media (max-width: 480px) {
  .ui-modal-backdrop { padding: 0; }
  .ui-modal, .ui-modal.is-expanded { height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .ui-modal-form, .ui-modal-body { flex: 1; }
  .ui-modal-more { display: none; }
  .ui-modal-foot .ui-btn-primary { margin-left: auto; }
  .ui-help { inset: 0; border: 0; border-radius: 0; }
}

/* --- trash: the team menu, the archive page, a deleted issue's badge --- */
.ui-crumb-count { margin-left: 6px; color: var(--ui-label-muted); font-weight: 450; }
.ui-deleted-badge {
  /* Linear's: 22px, 2px 6px, a 1px border, radius 6px, 13px/450 in the muted label colour. */
  display: inline-flex; align-items: center; box-sizing: border-box; height: 22px; margin-left: 4px; padding: 2px 6px;
  border: 1px solid var(--ui-border); border-radius: 6px;
  color: var(--ui-label-muted); font: 450 13px/1 var(--ui-font); white-space: nowrap; cursor: default;
}
.ui-team-row { position: relative; }
.ui-team-row .ui-team { padding-right: 32px; }
.ui-team-more {
  position: absolute; top: 3px; right: 4px; width: 22px; height: 22px; min-width: 0; padding: 0;
  opacity: 0; color: var(--ui-label-muted);
}
.ui-team-row:hover .ui-team-more, .ui-team-more:focus-visible, .ui-team-more[aria-expanded="true"], .ui-team-row:has(> .ui-team:focus-visible) .ui-team-more { opacity: 1; }
/* Keyboard focus on a team's heading rings its row, ⋯ included, 1px inside. */
.ui-app .ui-team-row > .ui-team:focus-visible { outline: none; }
.ui-team-row:has(> .ui-team:focus-visible) { border-radius: var(--ui-radius); outline: 1px solid var(--ui-focus-color); outline-offset: -1px; }
.web-archive-tabs .ui-viewbar { flex-wrap: wrap; row-gap: 6px; }
.web-archive-row { gap: 10px; height: 48px; }  /* Linear: 48px project rows */
.ui-row-parent { display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; margin-left: 4px; color: var(--ui-label-muted); font-weight: 500; white-space: nowrap; overflow: hidden; }
.ui-row-parent .ui-icon { width: 12px; height: 12px; flex: none; color: var(--ui-label-faint); }
.ui-row-parent-title { overflow: hidden; text-overflow: ellipsis; }
.web-archive-row > .ui-icon, .web-archive-row > .ui-project-icon { width: 14px; height: 14px; flex: none; color: var(--ui-label-muted); }
/* Linear's empty archive: the illustration 20px over a 15px/600 line, centred in the
   list area inside 120px/60px of padding. */
.ui-scroll:has(> .web-archive-empty) { display: flex; flex-direction: column; }
.web-archive-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 120px 60px; color: var(--ui-label-muted); font: 600 15px/23px var(--ui-font); text-align: center; }
.web-archive-empty p { margin: 0; }
@media (hover: none) { .ui-team-more { opacity: 1; } }
@media (max-width: 768px) {
  .web-archive-tabs .ui-viewbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .web-archive-tabs .ui-tab { flex: none; }
  .ui-deleted-badge { margin-left: 2px; }
}

/* --- search: the search page (web/search.html, web/search_issues.html), Linear's --- */
.web-search-bar { gap: 8px; padding: 0 12px 0 16px; }
.web-search-bar > .ui-icon { width: 14px; height: 14px; flex: none; color: var(--ui-label-muted); }
.web-search-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: var(--ui-label-title); font: 450 13px/1 var(--ui-font);
}
.web-search-input::-webkit-search-cancel-button { display: none; }
/* Linear's result row: the kind in a 41px column 8px from the icon, the 14px icon 8px
   from the title (13px 450, the hits 700), the team (a 14px icon in an 18px box) 24px
   from the age, which ends 8px inside the row. */
.web-search-row { gap: 8px; height: 40px; }  /* Linear: 40px result rows */
.ui-list .web-search-row { padding: 0 8px 0 20px; }
.web-search-row .ui-row-title { color: var(--ui-label-base); font-weight: 450; }
.web-search-kind { width: 41px; margin-right: 8px; flex: none; color: var(--ui-label-muted); font-size: 12px; }
.web-search-icon { display: inline-flex; width: 14px; flex: none; justify-content: center; color: var(--ui-label-muted); }
.web-search-icon .ui-icon, .web-search-icon .ui-project-icon { width: 14px; height: 14px; }
.web-search-team { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-right: 24px; color: var(--ui-label-muted); font-size: 12px; }
.web-search-team .ui-team-icon { width: 14px; height: 14px; margin: 0 2px; font-size: 11px; }
.web-search-status { margin-left: 6px; color: var(--ui-label-muted); font-size: 12px; }
.web-search-age { width: auto; min-width: 20px; margin-left: 0; flex: none; justify-content: flex-end; text-align: right; }
.web-search-archived { flex: none; color: var(--ui-label-muted); }
.ui-row-title mark, .ui-card-title-text mark { background: none; color: inherit; font-weight: 700; }
.web-search-empty .ui-icon { width: 20px; height: 20px; margin-bottom: 8px; }
.web-search-empty p { margin: 4px 0; }
.web-search-empty b { color: var(--ui-label-title); font-weight: 500; }
.web-search-recent { padding: 8px 0; }
.web-search-recent-head { padding: 8px 20px; color: var(--ui-label-muted); font-size: 13px; }
.web-search-recent-row { gap: 10px; height: 32px; width: calc(100% - 16px); border: 0; background: none; color: var(--ui-label-base); font: inherit; text-align: left; cursor: pointer; }
.web-search-recent-row .ui-icon { width: 14px; height: 14px; flex: none; color: var(--ui-label-muted); }
.ui-btn.is-changed { box-shadow: inset 0 0 0 1px var(--ui-label-link); }
@media (max-width: 768px) {
  .web-search-kind, .web-search-team span { display: none; }
}

/* ---- Preferences (people): this browser's font size and underlined links ---- */
html[data-font-size="smaller"] body { zoom: 0.85; }
html[data-font-size="small"] body { zoom: 0.92; }
html[data-font-size="large"] body { zoom: 1.08; }
html[data-font-size="larger"] body { zoom: 1.16; }
.ui-underline-links .ui-md a { text-decoration: underline; }

/* ---- Settings › Members, Teams, a team's Members, Create a new team (people.js) ---- */
.ui-settings-table .ui-members-group td { position: relative; z-index: 0; height: 32px; padding: 0 0 0 6px; color: var(--ui-label-muted); font: 500 12px/1 var(--ui-font); }
/* a group's head band runs out to 8px inside the page's edges (linear.app), the text in line with the rows */
.ui-settings-table .ui-members-group td::before { content: ""; position: absolute; z-index: -1; inset: 0 -48px; border-radius: 8px; background: var(--ui-bg-shade); }
.ui-settings-table .ui-members-group span { margin-left: 4px; color: var(--ui-label-faint); }
.ui-settings-table tr.ui-members-group:hover td { background: transparent; }
/* an inactive member is faint (Linear's labelFaint), their role a plain word */
.ui-members-table tr.is-suspended td, .ui-members-table tr.is-suspended .ui-settings-person .ui-settings-label { color: var(--ui-label-faint); }
.ui-members-table tr.is-suspended .ui-settings-person .ui-settings-hint { color: var(--ui-label-faint); }
/* linear.app's columns: the right-hand ones fixed, name and email sharing the rest 3:2 */
.ui-members-table th:first-child { width: calc(0.6 * (100cqw - 401px)); }
.ui-members-table th:nth-child(3) { width: 140px; }
.ui-members-table .ui-members-col-teams { width: 83px; white-space: nowrap; }
.ui-members-table .ui-members-col-date { width: 81px; white-space: nowrap; }
.ui-members-table th.ui-members-col-date:nth-child(6) { width: 61px; }
.ui-team-members-table th:first-child { width: calc(0.6 * (100cqw - 155px)); }
.ui-team-members-table th:nth-child(3) { width: 119px; }
/* sortable headers: the arrow marks the sorted column (Linear's "Role ↓") */
.ui-settings-table th[data-sort] { cursor: default; user-select: none; }
.ui-settings-table th[data-sort]:hover { color: var(--ui-label-base); }
.ui-settings-table th[aria-sort="ascending"]::after, .ui-settings-table th[aria-sort="descending"]::after { content: "↓"; display: inline-block; margin-left: 4px; font-size: 11px; }
.ui-settings-table th[aria-sort="descending"]::after { content: "↑"; }
/* the role badge: Admin on Linear's purple at 8% (20% dark), Member on the shade */
.ui-settings-badge.is-plain { padding: 0; background: none; }
.ui-members-table tr.is-suspended .ui-settings-badge { background: none; padding: 0; color: var(--ui-label-faint); }
:root[data-theme="dark"] .ui-settings-badge.is-admin { background: color-mix(in lch, var(--ui-status-completed) 20%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-settings-badge.is-admin { background: color-mix(in lch, var(--ui-status-completed) 20%, transparent); } }
/* the email copies on click, as Linear's */
.ui-members-email { display: block; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.ui-members-email:hover { color: var(--ui-label-base); }
.ui-members-teams, .ui-teams-count { color: inherit; text-decoration: none; }
.ui-members-teams:hover, a.ui-teams-count:hover { color: var(--ui-label-base); }
.ui-teams-count { font-variant-numeric: tabular-nums; }
.ui-teams-count.is-zero { color: var(--ui-label-faint); }
.ui-teams-table th:last-child, .ui-teams-table td:last-child { width: 36px; }
.ui-teams-table tr[data-href] { cursor: default; }
.ui-teams-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-teams-deleted { color: var(--ui-label-faint); font-weight: 450; font-size: 12px; }
/* the hover cards: a member's teams, a team's people */
.ui-people-card { min-width: 180px; max-width: 280px; padding: 6px; }
.ui-people-card-head { padding: 4px 8px 2px; color: var(--ui-label-muted); font: 500 11px/16px var(--ui-font); }
.ui-people-card-sep { height: 1px; margin: 4px 0; background: var(--ui-border); }
.ui-people-card-team, .ui-people-card-person, .ui-people-card-more { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px; border-radius: 6px; color: var(--ui-label-base); font: 450 13px/1 var(--ui-font); text-decoration: none; }
.ui-people-card-team:hover, .ui-people-card-more:hover { background: var(--ui-bg-focus, var(--ui-bg-base-hover)); }
.ui-people-card-person .ui-settings-badge { margin-left: auto; }
.ui-people-card-more { color: var(--ui-label-muted); }
/* no rows: Linear's "No matching members" and Clear filters */
.ui-settings-table tr.ui-people-empty:hover td { background: transparent; }
.ui-people-empty-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 0; color: var(--ui-label-muted); font: 500 13px/1 var(--ui-font); }
/* dialogs: Invite, Change role, Manage teams, Add members */
.ui-people-dialog { width: min(540px, calc(100vw - 32px)); }
.ui-people-dialog .ui-dialog-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-people-dialog .ui-dialog-body .ui-select-button { width: 100%; }
.ui-people-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ui-people-dialog-note { margin: 0; color: var(--ui-label-muted); font: 450 12px/1.4 var(--ui-font); }
.ui-people-roles { display: flex; flex-direction: column; gap: 8px; }
.ui-people-role { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 8px; cursor: default; }
.ui-people-role:has(input:checked) { border-color: var(--ui-focus-color); }
.ui-people-role input { margin: 2px 0 0; accent-color: var(--ui-focus-color); }
.ui-people-role > span { display: flex; flex-direction: column; gap: 2px; }
.ui-people-role-name { color: var(--ui-label-title); font: 500 13px/1.4 var(--ui-font); }
.ui-people-role-desc { color: var(--ui-label-muted); font: 450 12px/1.4 var(--ui-font); }
.ui-people-invite-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--ui-label-muted); font: 500 12px/1 var(--ui-font); text-decoration: none; }
.ui-people-invite-link:hover { color: var(--ui-label-base); }
.ui-people-invite-link .ui-icon { width: 14px; height: 14px; }
.ui-people-prompt-label { display: flex; flex-direction: column; gap: 8px; color: var(--ui-label-base); font: 450 13px/1.4 var(--ui-font); }
.ui-people-prompt-label strong { font-weight: 500; }
.ui-people-dialog .ui-btn:disabled, .ui-dialog-small:has(.ui-people-prompt) .ui-btn:disabled { opacity: 0.5; }
.ui-members-invite { display: flex; flex-direction: column; }
.ui-members-invite-label { color: var(--ui-label-base); font: 500 12px/1 var(--ui-font); }
.ui-members-invite-picker { position: relative; }
.ui-members-invite-picker textarea { width: 100%; }
.ui-members-suggest { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 4px; border: 1px solid var(--ui-border-faint); border-radius: 8px; background: var(--ui-bg-base); box-shadow: 0 6px 24px rgb(0 0 0 / 0.12); }
.ui-members-suggest-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: none; color: var(--ui-label-base); text-align: left; font: 450 13px/1.2 var(--ui-font); cursor: pointer; }
.ui-members-suggest-item.is-active, .ui-members-suggest-item:hover { background: var(--ui-bg-base-hover); }
.ui-members-suggest-name { color: var(--ui-label-title); font-weight: 500; }
.ui-members-suggest-mail { flex: 1; min-width: 0; overflow: hidden; color: var(--ui-label-muted); text-overflow: ellipsis; white-space: nowrap; }
.ui-people-narrow { display: none; }
/* Create a new team */
.ui-team-new-desc { margin-top: 0; }
.ui-team-new { margin-top: 28px; }
.ui-team-new-foot { display: flex; justify-content: flex-end; margin: 24px 0 48px; }
/* the settings menu's "Create a team" under Your teams (linear.app: 28px, muted, a 14px plus) */
.ui-settings-nav .ui-settings-nav-create { width: 100%; padding-left: 9px; border: 0; background: none; color: var(--ui-label-muted); font: inherit; text-align: left; }
.ui-settings-nav .ui-settings-nav-create > .ui-icon { width: 14px; height: 14px; }
.ui-settings-nav .ui-settings-nav-create .ui-nav-label { padding-left: 7px; color: var(--ui-label-muted); }
.ui-settings-nav .ui-settings-nav-create:hover .ui-nav-label { color: var(--ui-label-title); }
/* the sidebar's Your teams: the heading's + (Linear's "Join a team"), and the muted row with no team */
.ui-nav-section-row { position: relative; }
.ui-nav-section-add { position: absolute; right: 4px; bottom: 3px; width: 22px; height: 22px; min-width: 0; padding: 0; opacity: 0; color: var(--ui-label-muted); }
.ui-nav-section-add .ui-icon { width: 14px; height: 14px; }
.ui-nav-section-row:hover .ui-nav-section-add, .ui-nav-section-add:focus-visible, .ui-nav-section-add[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .ui-nav-section-add { opacity: 1; } }
.ui-nav-item-muted, .ui-app .ui-nav-item-muted { width: 100%; border: 0; background: none; color: var(--ui-label-muted); font: inherit; text-align: left; }
@media (max-width: 768px) {
  .ui-members-table .ui-members-col-email, .ui-members-table .ui-members-col-date, .ui-members-table .ui-members-col-teams { display: none; }
  .ui-team-members-table .ui-members-col-email { display: none; }
  .ui-settings-table .ui-members-group td::before { inset: 0 -8px; }
  .ui-people-wide { display: none; }
  .ui-people-narrow { display: inline; }
}
/* --- env: a tinted deploy (crm-django-env-navbar sets --breadcrumbs-bg where
   ENV_NAVBAR_COLOR is set: green locally). The page behind the sidebar and the main
   panel takes a share of it; in production the variable is unset, the mix falls back
   to the page's own colour and nothing changes. --- */
.ui-app { background-color: color-mix(in srgb, var(--breadcrumbs-bg, var(--ui-bg-sub)) 14%, var(--ui-bg-sub)); }

/* ---- New issue: files and the full page (people) ---- */
.ui-modal-attach { color: var(--ui-label-muted); }
.ui-modal-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px; }
.ui-modal-files:empty { display: none; }
.ui-modal-files:not(:empty) { padding-bottom: 8px; }
.ui-modal-file { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; height: 26px; padding: 0 2px 0 8px; border: 1px solid var(--ui-border-faint); border-radius: 6px; color: var(--ui-label-base); font: 450 12px/1 var(--ui-font); }
.ui-modal-file.is-uploading { opacity: 0.6; }
.ui-modal-file .ui-icon { flex: none; color: var(--ui-label-muted); }
.ui-modal-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-modal-file-remove { width: 20px; height: 20px; color: var(--ui-label-muted); }
.ui-modal.is-dropping { outline: 2px dashed var(--ui-label-link); outline-offset: -6px; }
/* /new/ is Linear's /new: the expanded modal over the dimmed app (56px above and below);
   Collapse turns it into the plain modal at its usual place. */
.ui-new-issue-page { position: fixed; inset: 0; z-index: var(--ui-z-modal-backdrop); display: flex; justify-content: center; align-items: flex-start; padding: 56px 12px; overflow: auto; background: var(--ui-overlay); }
.ui-modal.ui-modal-page { margin: 0 auto; transform: none; }
.ui-modal.ui-modal-page:not(.is-expanded) { margin-top: calc(13vh - 56px); }
.ui-desktop-card.is-on [data-desktop-state] { color: var(--ui-green, var(--ui-label-base)); }
@media (max-width: 768px) {
  .ui-new-issue-page { padding: 0; }
  .ui-modal.ui-modal-page { margin: 0; border: 0; border-radius: 0; }
}

/* ---- Sub-issue display options and nested rows; comment reactions (undo agent) ---- */
.ui-subdisplay { width: 272px; }
.ui-subdisplay .ui-display-section:first-child { padding: 8px 8px 4px; }
.ui-subdisplay .ui-display-row .ui-subdisplay-direction, .ui-triage-display .ui-display-row .ui-subdisplay-direction { margin-left: auto; color: var(--ui-label-muted); }
.ui-subdisplay .ui-display-row .ui-subdisplay-direction + .ui-select, .ui-triage-display .ui-display-row .ui-subdisplay-direction + .ui-select { margin-left: 4px; }
.ui-subdisplay-direction.is-descending .ui-icon { transform: scaleY(-1); }
.ui-subissue > :first-child { margin-left: calc(39px + var(--depth, 0) * 20px); }
.ui-subissue > .ui-subissue-status:not(:first-child) { margin-left: 8px; }
.ui-subissue > .ui-subissue-status { margin-right: 9px; }
.ui-subissue.is-nested { position: relative; }
.ui-subissue.is-nested::before { content: ""; position: absolute; left: calc(25px + var(--depth, 0) * 20px); top: 0; height: 18px; width: 8px; border-left: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); border-bottom-left-radius: 4px; }
.ui-subissue .ui-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
@media (max-width: 768px) {
  .ui-subissue > :first-child { margin-left: calc(8px + var(--depth, 0) * 14px); }
  .ui-subissue.is-nested::before { left: calc(-4px + var(--depth, 0) * 14px); }
  .ui-subissue .ui-subissue-chip { display: none; }
}
.ui-comment-react { opacity: 0; }
.ui-comment-item:hover .ui-comment-react, .ui-comment-react:focus-visible { opacity: 1; }
.ui-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ui-reactions[hidden] { display: none; }
.ui-app .ui-reaction { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 0; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-bg-base); color: var(--ui-label-base); font: 500 12px/1 var(--ui-font); cursor: default; }
.ui-app .ui-reaction:hover { background: var(--ui-bg-base-hover); }
.ui-app .ui-reaction.is-mine { border-color: color-mix(in srgb, var(--ui-control-primary) 55%, transparent); background: color-mix(in srgb, var(--ui-control-primary) 12%, transparent); color: var(--ui-label-title); }
.ui-reaction-emoji { font-size: 14px; line-height: 1; }
.ui-reaction-count { font-variant-numeric: tabular-nums; }
.ui-app .ui-reaction-add { padding: 0 6px; color: var(--ui-label-muted); }
.ui-reaction-add .ui-icon { width: 14px; height: 14px; }
/* The issue's own row, under its description (Linear's): 28px pills, then the Add
   reaction and paperclip icon buttons. */
.ui-issue-tools .ui-reactions { margin: 0; gap: 4px; }
.ui-app .ui-issue-tools .ui-reaction { height: 28px; border-radius: 14px; }
.ui-issue-tools .ui-reaction + .ui-issue-react-add { margin-left: 3px; }
.ui-issue-tools .ui-icon-btn { border-radius: var(--ui-radius-pill); }
.ui-emoji-picker { display: flex; flex-direction: column; width: 272px; height: 320px; padding: 0; overflow: hidden; }
.ui-emoji-search { flex: none; height: 36px; margin: 0; padding: 0 12px; border: 0; border-bottom: 1px solid var(--ui-border); background: none; color: var(--ui-label-title); font: 400 13px var(--ui-font); outline: none; }
.ui-emoji-body { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.ui-emoji-heading { padding: 8px 2px 4px; color: var(--ui-label-muted); font: 500 12px/1.2 var(--ui-font); }
.ui-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); }
.ui-app .ui-emoji { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: var(--ui-radius); background: none; font-size: 18px; line-height: 1; }
.ui-app .ui-emoji:hover, .ui-app .ui-emoji:focus-visible { background: var(--ui-bg-base-hover); outline: none; }
.ui-emoji-empty { padding: 16px 4px; color: var(--ui-label-muted); font: 400 13px var(--ui-font); text-align: center; }
@media (hover: none) { .ui-comment-react { opacity: 1; } }
@media (max-width: 768px) {
  .ui-emoji-picker { width: min(272px, calc(100vw - 32px)); }
}

/* ==== The rich editor (js/editor/): Linear's editor over the rendered markdown styles ====
   The editing surface is .ui-md, so a body looks the same edited and read. */
.ui-ed-host { display: block; min-width: 0; }
.ui-ed { position: relative; min-width: 0; }
.ui-ed-content { position: relative; min-height: 24px; outline: none; color: var(--ui-label-base); font: 450 15px/24px var(--ui-font); letter-spacing: -.0067em; white-space: pre-wrap; white-space: break-spaces; word-wrap: break-word; font-variant-ligatures: none; -webkit-font-variant-ligatures: none; caret-color: var(--ui-label-title); }
.ui-ed-content pre { white-space: pre-wrap; }
.ui-ed-content li { position: relative; }
.ui-ed-content img { display: inline-block; max-height: 480px; vertical-align: bottom; cursor: default; }
.ui-ed-content .ProseMirror-selectednode { outline: 2px solid var(--ui-label-link); outline-offset: 1px; border-radius: 4px; }
.ui-ed-content.ProseMirror-hideselection *::selection { background: transparent; }
.ui-ed-content.ProseMirror-hideselection { caret-color: transparent; }
.ui-ed-content .ProseMirror-gapcursor { display: none; position: absolute; pointer-events: none; }
.ui-ed-content .ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--ui-label-title); animation: ui-ed-blink 1.1s steps(2, start) infinite; }
.ui-ed-content.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
@keyframes ui-ed-blink { to { visibility: hidden; } }
/* The hovered block's drag handle (editor/behaviors.js), in the gutter left of the text. */
.ui-ed-handle { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; width: 20px; height: 24px; border-radius: 4px; color: var(--ui-label-faint); cursor: grab; }
.ui-ed-handle:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-muted); }
.ui-ed-handle:active { cursor: grabbing; }
@media (pointer: coarse) { .ui-ed-handle { display: none !important; } }
.ui-ed-content.is-link-active a[href] { cursor: pointer; }
.ui-ed-dropcursor { background: var(--ui-label-link); }
.ui-ed-content .is-placeholder::before { content: attr(data-placeholder); float: left; height: 0; color: var(--ui-label-faint); pointer-events: none; }
.ui-ed-content .is-placeholder.is-hint::before { color: var(--ui-label-faint); opacity: .8; }
.ui-ed-content .ui-ed-hr { padding: 4px 0; }
.ui-ed-content .ui-ed-hr hr { margin: 8px 0; }
.ui-ed-content .ui-ed-html { color: var(--ui-label-muted); }
.ui-ed-content .ui-ed-raw { color: var(--ui-label-muted); }
.ui-ed-content .ui-ed-ref { cursor: default; white-space: normal; }
.ui-ed-content .ui-ed-ref.is-unknown .ui-ref-id { color: var(--ui-label-base); }
.ui-ed-content .ui-mention { white-space: nowrap; }
/* checklist items: the checkbox in the gutter, like the rendered .ui-task */
/* Code blocks (editor/codeblock.js), as Linear draws them: a gutter of line numbers, 12/20
   mono, a hover pill (language, display options, copy, delete) 10px in from the top
   right, a block of 30+ lines collapsed to its first 15. Token colours are Linear's
   code palette per highlight.js scope. */
:root { --ui-syntax-red: #BF1420; --ui-syntax-orange: #A74002; --ui-syntax-green: #00755C; --ui-syntax-yellow: #8A5D00; --ui-syntax-pink: #9532A4; --ui-syntax-blue: #00264D; --ui-syntax-blue-light: #025F8C; }
:root[data-theme="dark"] { --ui-syntax-red: #EC3B40; --ui-syntax-orange: #EB6E3D; --ui-syntax-green: #25F8CA; --ui-syntax-yellow: #FCE27D; --ui-syntax-pink: #E394DC; --ui-syntax-blue: #2482D8; --ui-syntax-blue-light: #00C5F0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ui-syntax-red: #EC3B40; --ui-syntax-orange: #EB6E3D; --ui-syntax-green: #25F8CA; --ui-syntax-yellow: #FCE27D; --ui-syntax-pink: #E394DC; --ui-syntax-blue: #2482D8; --ui-syntax-blue-light: #00C5F0; } }
.ui-ed-content pre.ui-ed-code { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0 0 12px; padding: 0; border-radius: 6px; background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border); overflow: visible; font: 450 12px/20px var(--ui-mono); white-space: normal; }
.ui-ed-content .ui-ed-code > code { grid-column: 2; display: block; min-width: 0; padding: 12px 16px 12px 0; overflow-x: auto; background: none; box-shadow: none; border-radius: 0; color: var(--ui-label-title); font: inherit; letter-spacing: 0; white-space: pre; tab-size: 2; }
.ui-ed-content .ui-ed-code.is-wrapped > code { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-ed-content .ui-ed-code.no-line-numbers > code { padding-left: 16px; }
.ui-ed-code-gutter { grid-column: 1; padding: 12px 20px 12px 16px; color: var(--ui-label-faint); text-align: right; font-variant-numeric: tabular-nums; user-select: none; cursor: default; }
.ui-ed-code-gutter > div { min-height: 20px; }
.ui-ed-code.no-line-numbers .ui-ed-code-gutter { display: none; }
.ui-ed-code-controls { position: absolute; top: 10px; right: 10px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity var(--ui-speed-hover, .15s) ease-out; font: 450 13px/1 var(--ui-font); }
.ui-ed-code:hover > .ui-ed-code-controls, .ui-ed-code.is-menu-open > .ui-ed-code-controls, .ui-ed-code-controls:focus-within { opacity: 1; pointer-events: auto; }
.ui-ed-code-bar { display: flex; align-items: center; height: 31px; padding: 2px; border-radius: 9999px; background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-ed-code-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 26px; height: 26px; padding: 0; border: 0; border-radius: 9999px; background: none; color: var(--ui-label-muted); font: inherit; cursor: pointer; }
.ui-ed-code-btn:hover, .ui-ed-code-btn[aria-expanded="true"] { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-ed-code-btn .ui-icon { width: 16px; height: 16px; }
.ui-ed-code-btn[hidden] { display: none; }
.ui-ed-code-lang { padding: 0 6px 0 10px; color: var(--ui-label-muted); font-size: 13px; }
.ui-ed-code-lang .ui-icon { width: 12px; height: 12px; }
.ui-ed-code-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--ui-border); }
.ui-ed-code-expand { grid-column: 1 / -1; display: flex; justify-content: center; padding: 0 0 10px; font: 450 12px/1 var(--ui-font); }
.ui-ed-code-expand[hidden] { display: none; }
.ui-ed-code-expand-btn { height: 24px; padding: 0 10px; border-radius: 9999px; color: var(--ui-label-muted); font-size: 12px; }
.ui-ed-content .ui-ed-code.is-collapsed > code, .ui-ed-content .ui-ed-code.is-collapsed > .ui-ed-code-gutter { max-height: 312px; overflow: hidden; }
.ui-ed-content .ui-ed-code.is-collapsed > code { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.ui-ed-code.is-collapsed > .ui-ed-code-expand { margin-top: -18px; position: relative; }
.ui-ed-code-options { min-width: 200px; padding: 4px 12px; }
.ui-ed-code-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; color: var(--ui-label-muted); font: 500 12px/1.2 var(--ui-font); cursor: pointer; }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) :is(.hljs-meta, .hljs-comment, .hljs-tag) { color: var(--ui-label-muted); }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) .hljs-quote { color: var(--ui-label-faint); }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) :is(.hljs-string, .hljs-bullet) { color: var(--ui-syntax-blue-light); }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) :is(.hljs-literal, .hljs-deletion) { color: var(--ui-syntax-red); }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) :is(.hljs-title, .hljs-subst, .hljs-section, .hljs-addition) { color: var(--ui-syntax-green); }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) :is(.hljs-keyword, .hljs-operator, .hljs-built_in, .hljs-builtin-name) { color: var(--ui-syntax-pink); }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) :is(.hljs-attr, .hljs-symbol, .hljs-property, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-params) { color: var(--ui-syntax-yellow); }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) :is(.hljs-type, .hljs-name, .hljs-regexp, .hljs-link, .hljs-selector-tag, .hljs-selector-id, .hljs-selector-class, .hljs-params.hljs-built_in) { color: var(--ui-syntax-orange); }
:is(.ui-ed-code, .ui-md pre, .ui-diff-code) .hljs-number { color: var(--ui-syntax-blue); }
.ui-ed-content li.ui-ed-task { list-style: none; }
.ui-ed-content li.ui-ed-task .ui-ed-check { cursor: pointer; }
.ui-ed-content li.ui-ed-task.is-checked > .ui-ed-task-body { color: var(--ui-label-muted); }
.ui-ed-content li.ui-ed-task > .ui-ed-task-body > p { margin: 0; }
/* collapsible sections (`+++ Title`): open while editing, the caret folds them */
.ui-ed-content .ui-ed-details { position: relative; margin: 0 0 12px; padding-left: 20px; }
.ui-ed-details-toggle { position: absolute; top: 4px; left: -2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: var(--ui-label-muted); cursor: pointer; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.606 11.822c-.49.287-1.106-.067-1.106-.635v-6.45c0-.568.616-.922 1.106-.636l5.529 3.225a.73.73 0 0 1 0 1.271z'/%3E%3C/svg%3E") center / 16px no-repeat; transform: rotate(90deg); transition: transform .15s; }
.ui-ed-details.is-closed > .ui-ed-details-toggle { transform: none; }
.ui-ed-details-toggle:hover { background: var(--ui-label-title); }
.ui-ed-details.is-closed > .ui-ed-details-body > :not(.ui-ed-summary) { display: none; }
.ui-ed-summary { margin-bottom: 8px; font-weight: 500; color: var(--ui-label-title); }
.ui-ed-details.is-closed .ui-ed-summary { margin-bottom: 0; }
/* tables (prosemirror-tables) */
.ui-ed-content .ui-ed-table { overflow-x: auto; margin: 0 0 12px; }
.ui-ed-content .ui-ed-table table { margin: 0; table-layout: fixed; }
.ui-ed-content td, .ui-ed-content th { position: relative; min-width: 60px; }
.ui-ed-content .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--ui-bg-selected); opacity: .6; pointer-events: none; }
.ui-ed-uploading { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--ui-bg-shade); color: var(--ui-label-muted); font-size: 13px; line-height: 20px; animation: ui-ed-pulse 1.2s ease-in-out infinite alternate; }
@keyframes ui-ed-pulse { from { opacity: 1; } to { opacity: .55; } }
/* the selection toolbar: Linear's 36px bar of 26px buttons */
.ui-popover.ui-ed-toolbar { flex-direction: row; align-items: center; gap: 2px; min-width: 0; height: 36px; padding: 0 4px; border-radius: 8px; box-shadow: var(--ui-shadow-low); transform: none; }
.ui-ed-toolbar .ui-ed-tool { width: 26px; height: 26px; padding: 0; border-radius: 5px; color: var(--ui-label-muted); }
.ui-ed-toolbar .ui-ed-tool:hover { background: var(--ui-bg-base-hover); color: var(--ui-label-title); }
.ui-ed-toolbar .ui-ed-tool.is-active { background: var(--ui-bg-selected); color: var(--ui-label-title); }
.ui-ed-toolbar .ui-ed-tool .ui-icon { width: 16px; height: 16px; }
.ui-ed-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--ui-border); }
.ui-ed-toolbar.is-linking { width: 320px; max-width: calc(100vw - 16px); }
.ui-ed-link-input { flex: 1; min-width: 0; height: 26px; padding: 0 6px; border: 0; background: transparent; color: var(--ui-label-title); font: 450 13px var(--ui-font); outline: none; }
.ui-ed-suggest { width: 260px; max-height: 320px; overflow-y: auto; }
/* where the editor sits */
.ui-md-editor.is-rich { padding-bottom: 10px; }
.ui-md-editor.is-rich .ui-ed-content { min-height: 72px; }
.ui-ed-composer .ui-ed-content { max-height: 480px; overflow-y: auto; }
.ui-ed-reply .ui-ed-content { max-height: 320px; overflow-y: auto; font-size: 14px; line-height: 20px; }
.ui-reply .ui-ed-host { flex: 1; }
.ui-ed-reply .ui-ed-content p { margin-bottom: 8px; }
.ui-ed-reply .ui-ed-content > :last-child { margin-bottom: 0; }
.ui-ed-boxed .ui-ed-content { min-height: 160px; padding: 10px 12px; border-radius: var(--ui-radius); box-shadow: inset 0 0 0 1px var(--ui-border); }
.ui-ed-boxed.is-focused .ui-ed-content { box-shadow: inset 0 0 0 1px var(--ui-border-solid-hover); }
.ui-ed-bare .ui-ed-content { min-height: 64px; }
.ui-new-project-body .ui-ed-host { flex: 1; padding-top: 16px; }
.ui-ed.is-busy .ui-ed-content { cursor: progress; }
@media (max-width: 768px) {
  .ui-ed-content { font-size: 16px; } /* no zoom on focus in iOS Safari */
  .ui-popover.ui-ed-toolbar { max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
  .ui-ed-toolbar .ui-ed-tool { flex: none; width: 32px; height: 32px; }
  .ui-ed-suggest { width: min(300px, calc(100vw - 16px)); }
}

/* --- projects: comments on a project and its updates, the bell
   (project_pages). Colours are the theme's tokens, so dark follows. --- */
.ui-pp-thread { margin: 12px -16px -12px; border-top: 1px solid var(--ui-border-faint); }
.ui-pp-thread .ui-comment-item { padding: 12px 16px 4px; }
.ui-pp-thread-foot { display: flex; padding: 6px 12px; }
.ui-pp-thread .ui-comment-item ~ .ui-pp-thread-foot { display: none; }
.ui-pp-thread:not(:has(.ui-comment-item)) { border-top: 0; margin-top: 4px; }
.ui-pp-thread-toggle { height: 24px; min-width: 28px; gap: 4px; padding: 0 7px; border: 1px solid var(--ui-border-faint); border-radius: var(--ui-radius-pill); background: var(--ui-bg-base); color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); }
.ui-pp-thread-toggle:hover { color: var(--ui-label-title); background: var(--ui-bg-base-hover); }
.ui-pp-thread-toggle .ui-icon { width: 14px; height: 14px; }
.ui-pp-reply { margin: 4px 12px 12px; padding: 6px 8px 6px 12px; min-height: 36px; border: 1px solid var(--ui-border-faint); border-radius: 8px; background: var(--ui-bg-base); }
.ui-pp-reply[hidden] { display: none; }
.ui-pp-reply:focus-within { border-color: var(--ui-control-primary); }
.ui-pp-comment { margin: 12px 0; padding: 12px 16px; }
.ui-pp-comment > .ui-comment-item { padding: 0; }
.ui-pp-comment-item .ui-comment-menu { width: 24px; height: 24px; }
.ui-pp-comment-item:hover .ui-comment-menu, .ui-pp-comment-item .ui-comment-menu:focus-visible { opacity: 1; }
.ui-update-composer [data-pp-compose-form] { display: flex; flex-direction: column; gap: 10px; }
.ui-composer-head { display: flex; align-items: center; gap: 7px; }
/* Linear's summary under the update editor: a 2px rule, the properties set (80px labels),
   then "Progress since …" and each milestone's from → to. */
.ui-update-summary { margin: 12px 4px 0; padding-left: 2px; border-left: 2px solid var(--ui-border-solid); border-radius: 2px 0 0 2px; font: 500 12px/normal var(--ui-font); }
.ui-us-props { display: flex; flex-direction: column; margin-bottom: 8px; }
.ui-us-prop { display: flex; }
.ui-us-label { flex: none; width: 80px; padding: 6px 12px; color: var(--ui-label-muted); white-space: nowrap; }
.ui-us-value { display: flex; align-items: center; gap: 4px; padding: 6px 12px 6px 0; color: var(--ui-label-base); }
.ui-us-value b { margin-left: 4px; font-weight: 500; }
.ui-us-verb { color: var(--ui-label-muted); font-weight: 450; }
.ui-us-value .ui-avatar { width: 14px; height: 14px; font-size: 6px; }
.ui-us-head { padding: 6px 12px 0; color: var(--ui-label-muted); }
.ui-us-milestones { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.ui-us-milestone { display: flex; align-items: center; gap: 6px; color: var(--ui-label-title); }
.ui-us-milestone .ui-milestone-icon { flex: none; width: 16px; height: 16px; margin-right: 0; }
.ui-us-change { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; }
.ui-us-arrow { width: 16px; height: 16px; transform: rotate(90deg); color: var(--ui-label-muted); }
.ui-us-date { margin-left: 6px; color: var(--ui-label-muted); }
.ui-segmented.ui-activity-kind { height: 24px; border-radius: var(--ui-radius-pill); background: var(--ui-control-secondary-hover); }
.ui-activity-kind .ui-segment { height: 24px; padding: 0 10px; border: 0; background: none; box-shadow: none; color: var(--ui-label-muted); }
.ui-activity-kind .ui-segment:hover { color: var(--ui-label-base); }
.ui-activity-kind .ui-segment.is-active { background: var(--ui-control-secondary); box-shadow: inset 0 0 0 1px var(--ui-border); color: var(--ui-label-base); }
.ui-update-composer .ui-composer-actions .ui-btn { height: 24px; padding: 0 8px; border-radius: var(--ui-radius-pill); background: var(--ui-control-secondary); box-shadow: inset 0 0 0 1px var(--ui-border); font: 500 12px/1 var(--ui-font); }
.ui-project-main:has(> .ui-project-activity) { padding-top: 44px; }
.ui-health-pick { position: relative; display: flex; }
.ui-health-pick[hidden] { display: none; }
.ui-app .ui-health-pill { height: 24px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-pill); background: var(--ui-control-secondary); }
.ui-health-pill .ui-health, .ui-health-pill .ui-health span { color: var(--health); }
.ui-health-menu { position: absolute; top: 30px; left: 0; width: 160px; min-width: 0; padding: 4px 0; }
.ui-app .ui-health-menu .ui-menu-item { width: 100%; border: 0; background: none; font: 450 13px/1 var(--ui-font); }
.ui-health-menu .ui-menu-item:hover::before { background: var(--ui-bg-focus); }
.ui-health-menu .ui-health { gap: 10px; color: var(--ui-label-base); font-size: 13px; }
.ui-update-composer [data-pp-compose-form][hidden] { display: none; }
.ui-subscribe.is-on { color: var(--ui-label-title); }
.ui-plink-add .ui-popover .ui-btn:not(.ui-btn-primary) { justify-content: flex-start; }
@media (max-width: 768px) {
    .ui-pp-thread { margin-left: -12px; margin-right: -12px; }
  .ui-pp-reply { margin-left: 8px; margin-right: 8px; }
  .ui-subscribe .ui-btn-label { display: none; }
}
.ui-modal-related { display: flex; align-items: center; gap: 6px; max-width: calc(100% - 32px); margin: 4px 16px 0; padding: 0 8px; height: 26px; border: 1px solid var(--ui-border); border-radius: 6px; color: var(--ui-label-muted); font: 450 12px/1 var(--ui-font); white-space: nowrap; overflow: hidden; width: fit-content; }
.ui-modal-related b { color: var(--ui-label-base); font-weight: 500; }
.ui-modal-related-title { overflow: hidden; text-overflow: ellipsis; color: var(--ui-label-title); }
.ui-modal-related .ui-icon { width: 14px; height: 14px; flex: none; }
.web-recurring { width: min(400px, calc(100vw - 32px)); }
.web-recurring-body { display: grid; gap: 12px; padding: 4px 16px 12px; }
.web-recurring-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ui-label-base); font: 450 13px var(--ui-font); }
.web-recurring-row input, .web-recurring-row select { height: 28px; padding: 0 8px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-bg-base); color: var(--ui-label-title); font: 450 13px var(--ui-font); color-scheme: light dark; }
.web-recurring .ui-modal-foot { justify-content: flex-end; gap: 8px; }

/* --- the cycle sidebar (project_pages/cycle.html), Linear's values ---
   One dock beside the list holds the details or Insights (pages.js); it slides as a
   whole (motion.js "panel"). The card is Linear's 12px-radius panel 4px right of the
   list. Details: a 16px header (badges row, 15/600 title with star and menu), the
   Progress section (13/500 head, its caret on hover; a legend grid of 16px indicator
   columns, 12/500 names and numbers, 12/450 shares after a bullet; the 200px chart) and
   the breakdown (a 32px pill tab bar, 42px rows: 18px icon, 13/450 name, 16px ring,
   12/450 muted "N% of" and count). */
.ui-cycle-page { display: flex; flex: 1; min-height: 0; }
.ui-cycle-page > .ui-with-insights { flex: 1; min-width: 0; }
.ui-side-dock { flex: none; display: flex; width: 440px; padding: 0 8px 8px 4px; min-height: 0; }
.ui-side-dock[hidden] { display: none; }
.ui-side-dock.is-leaving { pointer-events: none; }
.ui-side-card { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: thin; border-radius: 12px; background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border-faint); }
.ui-side-card[hidden] { display: none; }
.ui-side-card.ui-cycle-side { align-self: flex-start; max-height: 100%; }
.ui-project-side-card .ui-project-side { padding: 16px; overflow: visible; }
.ui-side-dock > .ui-insights-panel { width: auto; margin: 0; }
.ui-cycle-side { display: flex; flex-direction: column; }
.ui-cside-head { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; }
.ui-cside-badges { display: flex; align-items: center; gap: 8px; margin: -6px 0 0 -6px; }
.ui-cside-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--ui-bg-sub); color: var(--ui-label-base); font: 450 13px/1 var(--ui-font); white-space: nowrap; }
.ui-cside-dates { padding: 0 8px; }
.ui-cside-to { width: 14px; height: 14px; transform: rotate(90deg); color: var(--ui-label-muted); }
.ui-cside-title { display: flex; align-items: center; gap: 10px; height: 28px; }
.ui-cside-title > .ui-icon { width: 16px; height: 16px; flex: none; color: var(--ui-label-muted); }
.ui-cside-title h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-label-title); font: 600 15px/23px var(--ui-font); }
.ui-cside-title .ui-btn { flex: none; }
.ui-cside-title .ui-row-spacer { flex: 1; }
.ui-cside-desc { margin: 0; color: var(--ui-label-base); font: 450 13px/1.5 var(--ui-font); }
.ui-side-section { padding: 12px 12px 0; }
.ui-side-section-head { display: inline-flex; align-items: center; gap: 3px; height: 28px; margin: -6px 0 -6px -8px; padding: 0 8px; border-radius: 8px; color: var(--ui-label-muted); font: 500 13px/16px var(--ui-font); cursor: default; outline: none; }
.ui-side-section-head:hover, .ui-side-section-head:focus-visible { color: var(--ui-label-title); }
.ui-side-section-caret { width: 16px; height: 16px; visibility: hidden; transform: rotate(90deg); transition: transform .15s ease; }
.ui-side-section-head:hover .ui-side-section-caret, .ui-side-section-head:focus-visible .ui-side-section-caret, .ui-side-section-head[aria-expanded="false"] .ui-side-section-caret { visibility: visible; }
.ui-side-section-head[aria-expanded="false"] .ui-side-section-caret { transform: none; }
.ui-side-section-body { padding-top: 12px; }
.ui-progress-legend { display: grid; grid-template-columns: repeat(3, 16px minmax(0, 1fr)); row-gap: 4px; align-items: center; }
.ui-progress-ind { justify-self: start; width: 6px; height: 6px; margin-left: 5px; border-radius: 1px; background: var(--ui-chart-scope); }
.ui-progress-ind.is-started { background: var(--ui-chart-started); }
.ui-progress-ind.is-completed { background: var(--ui-chart-completed); }
.ui-progress-ind.is-capacity { background: var(--ui-control-primary); }
.ui-progress-ind.is-capacity.is-over { background: var(--ui-orange); }
.ui-progress-icon { width: 16px; height: 16px; color: var(--ui-label-muted); }
.ui-progress-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-label-muted); font: 500 12px/26px var(--ui-font); }
.ui-progress-val { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; font: 450 12px/14px var(--ui-font); color: var(--ui-label-muted); font-variant-numeric: tabular-nums; }
.ui-progress-val b { margin-left: 4px; color: var(--ui-label-title); font-weight: 500; }
.ui-progress-val b.is-over { color: var(--ui-orange); }
.ui-progress-change { margin-left: 4px; }
.ui-progress-change.is-up { color: var(--ui-red); }
.ui-progress-change.is-down { color: var(--ui-green); }
.ui-progress-pct { margin-left: 3px; }
.ui-progress-bullet { margin-right: 3px; }
.ui-progress-change[hidden], .ui-progress-pct[hidden] { display: none; }
.ui-burnup-chart { position: relative; height: 200px; margin-top: 2px; }
.ui-burnup-svg { position: absolute; inset: 0; display: block; overflow: visible; }
.ui-bu-hatch-bg { fill: var(--ui-border); }
.ui-bu-hatch-gap { fill: var(--ui-bg-base); }
.ui-bu-end-line { fill: var(--ui-border-solid); }
.ui-bu-area.is-completed { opacity: .4; }
.ui-bu-area.is-started { opacity: .1; }
.ui-bu-area.is-scope { opacity: .3; }
.ui-bu-stop-c { stop-color: var(--ui-chart-completed); }
.ui-bu-stop-s { stop-color: var(--ui-chart-started); }
.ui-bu-stop-p { stop-color: var(--ui-border-solid); }
.ui-bu-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ui-bu-line.is-scope { stroke: var(--ui-chart-scope); }
.ui-bu-line.is-started { stroke: var(--ui-chart-started); }
.ui-bu-line.is-completed { stroke: var(--ui-chart-completed); }
.ui-bu-line.is-ideal { stroke: var(--ui-chart-completed); stroke-width: 1; stroke-dasharray: 3 3; }
.ui-bu-bar { fill: var(--ui-chart-completed); }
.ui-bu-bar.is-dim { opacity: .5; }
.ui-bu-dot-ring { fill: var(--ui-bg-base); }
.ui-bu-dot.is-started { fill: var(--ui-chart-started); }
.ui-bu-dot.is-completed { fill: var(--ui-chart-completed); }
.ui-bu-hover { stroke: var(--ui-label-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.ui-burnup-axis { position: absolute; left: 0; right: 0; height: 32px; pointer-events: none; }
.ui-burnup-tick { position: absolute; top: 1px; width: 1px; height: 5px; background: var(--ui-border-solid); }
.ui-burnup-label { position: absolute; top: 4px; transform: translateX(-50%); color: var(--ui-label-muted); font: 450 12px/24px var(--ui-font); white-space: nowrap; }
.ui-burnup-label.is-first { transform: none; }
.ui-burnup-label.is-last { transform: translateX(-100%); }
.ui-burnup-tip { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 3px 6px; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-bg-base); box-shadow: var(--ui-shadow-medium); pointer-events: none; white-space: nowrap; font: 450 12px/14px var(--ui-font); }
.ui-burnup-tip[hidden] { display: none; }
.ui-burnup-tip-date { color: var(--ui-label-base); }
.ui-burnup-tip-sep { width: 1px; height: 12px; background: var(--ui-border); }
.ui-burnup-tip-value { color: var(--ui-label-muted); }
/* In the cycles list the burn-up sits left and the legend is a 300px column on its
   right, as Linear's: a row each for Scope, Started and Completed, 44px tall with a rule
   between, the name (13px, muted) after its swatch and the figures at the row's end. */
.ui-cycle-chart { column-gap: 24px; }
.ui-cycle-chart .ui-progress { display: contents; }
.ui-cycle-chart .ui-burnup-chart { grid-column: 1; grid-row: 1; margin-left: 10px; }
.ui-cycle-chart .ui-progress-legend { grid-column: 2; grid-row: 1; grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 0; align-self: center; }
.ui-cycle-chart .ui-progress-legend > * { display: flex; align-items: center; height: 44px; }
.ui-cycle-chart .ui-progress-legend > :nth-child(7), .ui-cycle-chart .ui-progress-legend > :nth-child(9), .ui-cycle-chart .ui-progress-legend > :nth-child(11) { display: none; }
.ui-cycle-chart .ui-progress-legend > :nth-child(1), .ui-cycle-chart .ui-progress-legend > :nth-child(2) { grid-row: 1; }
.ui-cycle-chart .ui-progress-legend > :nth-child(3), .ui-cycle-chart .ui-progress-legend > :nth-child(4) { grid-row: 2; }
.ui-cycle-chart .ui-progress-legend > :nth-child(5), .ui-cycle-chart .ui-progress-legend > :nth-child(6) { grid-row: 3; }
.ui-cycle-chart .ui-progress-legend > :nth-child(8) { grid-row: 1; grid-column: 3; }
.ui-cycle-chart .ui-progress-legend > :nth-child(10) { grid-row: 2; grid-column: 3; }
.ui-cycle-chart .ui-progress-legend > :nth-child(12) { grid-row: 3; grid-column: 3; }
.ui-cycle-chart .ui-progress-legend > :is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(8), :nth-child(10)) { border-bottom: 1px solid var(--ui-border-faint); }
.ui-cycle-chart .ui-progress-ind { justify-self: stretch; width: auto; margin: 0; border-radius: 0; background: none; }
.ui-cycle-chart .ui-progress-ind::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--ui-chart-scope); }
.ui-cycle-chart .ui-progress-ind.is-started::before { background: var(--ui-chart-started); }
.ui-cycle-chart .ui-progress-ind.is-completed::before { background: var(--ui-chart-completed); }
.ui-cycle-chart .ui-progress-name { font: 450 13px/16px var(--ui-font); }
.ui-cycle-chart .ui-progress-val { justify-content: flex-end; font-weight: 500; }
@media (max-width: 768px) { .ui-cycle-chart .ui-progress-legend { grid-column: 1; grid-row: 2; } }
.ui-cside-breakdown { padding: 12px; }
/* The breakdown (web/_breakdown.html): the cycle sidebar's and a list's details panel. */
.ui-qf { position: relative; }
.ui-qf-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 5px; background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border-faint); overflow: hidden; }
.ui-qf-tab { flex: 1 0 auto; height: 28px; padding: 0 13px; border: 0; border-radius: 9999px; background: transparent; color: var(--ui-label-muted); font: 500 12px/14px var(--ui-font); white-space: nowrap; cursor: default; }
.ui-qf-tab:hover { color: var(--ui-label-title); }
.ui-qf-tab.is-active { background: var(--ui-bg-shade); color: var(--ui-label-title); }
.ui-qf-select { display: none; width: 100%; height: 30px; align-items: center; justify-content: space-between; padding: 0 10px; border: 0; border-radius: 8px; background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border-faint); color: var(--ui-label-base); font: 450 13px/16px var(--ui-font); }
.ui-qf-select .ui-icon { width: 12px; height: 12px; color: var(--ui-label-muted); }
.ui-qf.is-narrow .ui-qf-tabs { position: absolute; visibility: hidden; pointer-events: none; }
.ui-qf.is-narrow .ui-qf-select { display: flex; }
.ui-qf-rows { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.ui-qf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; column-gap: 8px; height: 42px; padding: 0 10px; border-radius: 8px; color: var(--ui-label-title); outline: none; cursor: default; transition: background-color .15s ease-out; }
.ui-qf-row:hover, .ui-qf-row:focus-visible { background: var(--ui-bg-base-hover); }
.ui-qf-row.is-active { background: var(--ui-bg-selected); }
.ui-qf-row.is-active:hover { background: var(--ui-bg-selected-hover); }
.ui-qf-row.is-muted > * { opacity: .5; }
.ui-qf-row.is-muted:hover > * { opacity: 1; }
.ui-qf-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-qf-label > .ui-avatar { width: 18px; height: 18px; flex: none; font-size: 9px; }
.ui-qf-label > .ui-icon { width: 16px; height: 16px; flex: none; margin: 1px; color: var(--ui-label-muted); }
.ui-qf-label > .ui-dot { margin: 0 5px; }
.ui-qf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 450 13px/16px var(--ui-font); }
.ui-qf-name.is-none { color: var(--ui-label-muted); }
.ui-qf-link { flex: none; margin-left: auto; padding: 0 4px; visibility: hidden; color: var(--ui-label-title); font: 450 12px/16px var(--ui-font); }
.ui-qf-row:focus-visible .ui-qf-link { visibility: visible; }
.ui-qf-ring { width: 16px; height: 16px; margin-left: 8px; }
.ui-qf-ring circle { fill: none; stroke-width: 2; }
.ui-qf-ring-track { stroke: var(--ui-border); }
.ui-qf-row.is-active .ui-qf-ring-track { stroke: var(--ui-border-solid); }
.ui-qf-ring-fill { stroke: var(--ui-chart-completed); }
.ui-qf-pct, .ui-qf-count { color: var(--ui-label-muted); font: 450 12px/14px var(--ui-font); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ui-qf-count { min-width: 16px; }
.ui-qf-empty { margin: 0; padding: 10px; text-align: center; color: var(--ui-label-muted); font: 450 13px/16px var(--ui-font); }
.ui-tooltip.is-lines { white-space: pre-line; text-align: left; }
/* "N issues hidden by display options" (web/_hidden_by_display.html): at the end of the
   content, as Linear's HiddenIndicator (24px above it). */
.ui-hidden-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; padding: 24px 0 16px; color: var(--ui-label-muted); font: 450 13px/16px var(--ui-font); }
.ui-hidden-indicator b { color: var(--ui-label-title); font-weight: 500; }
.ui-hidden-indicator .ui-btn { height: 24px; color: var(--ui-label-base); }
.ui-board-main > .ui-hidden-indicator { position: sticky; left: 0; width: min(100%, 100cqw); }
@media (max-width: 768px) {
  .ui-side-dock { position: fixed; inset: auto 0 0 0; z-index: 20; width: auto; max-height: 75vh; padding: 0; }
  .ui-side-card { border-radius: 12px 12px 0 0; box-shadow: var(--ui-shadow-high); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-side-section-caret, .ui-qf-row { transition: none; }
}

/* ---------- a pull request's page (apps/reviews: _shell.html, overview.html) ----------
   Linear's /review/<pull request>: the header (linked issue › status and title, line
   counts, actions; repo#number, Copy URL, full window), the tab row (Overview, Guide,
   Diff; merge, Show agent), then the Overview: a centred column beside a sidebar, on
   Linear's grid with its container-relative widths and gaps. */
:root { --ui-pr-open: var(--ui-green); --ui-pr-composer-border: lch(97.3% 0 282); --ui-pr-draft: var(--ui-label-muted); --ui-pr-merged: var(--ui-purple); --ui-pr-closed: var(--ui-red); --ui-pr-add: lch(50% 80 141.95); --ui-pr-del: lch(50% 80 29); }
.ui-pr-header { padding: 0 10px 0 8px; }
/* Dark: not measured on Linear (its theme is the account's setting); the kit's tokens. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ui-pr-composer-border: var(--ui-border-faint); --ui-pr-add: var(--ui-green); --ui-pr-del: var(--ui-red); } }
:root[data-theme="dark"] { --ui-pr-composer-border: var(--ui-border-faint); --ui-pr-add: var(--ui-green); --ui-pr-del: var(--ui-red); }
.ui-pr-issue.ui-crumb { padding: 3px 5px; margin: 0 -5px; }
.ui-pr-issue { color: var(--ui-label-base); }
.ui-pr-more-issues { color: var(--ui-label-muted); font-weight: 450; }
.ui-pr-sep { margin: 0 8px; color: var(--ui-label-muted); font: 450 13px/16px var(--ui-font); }
.ui-pr-title-crumb { gap: 6px; min-width: 0; }
a.ui-pr-title-crumb { height: 20px; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; color: var(--ui-label-title); transition: color .15s; }
a.ui-pr-title-crumb:hover { background: none; }
a.ui-pr-title-crumb:hover h2 { color: var(--ui-label-title); }
.ui-pr-title-crumb .ui-icon { flex: none; width: 16px; height: 16px; }
.ui-pr-title-crumb h2 { transition: color 0s; margin: 0; overflow: hidden; color: var(--ui-label-base); font: 500 13px/16px var(--ui-font); text-overflow: ellipsis; white-space: nowrap; }
.ui-crumbs > .ui-pr-counts { height: 24px; margin: 0 -8px 0 0; padding: 0 8px; gap: 4px; color: var(--ui-label-base); font: 450 13px/16px var(--ui-font); font-variant-numeric: tabular-nums; }
.ui-crumbs > .ui-pr-counts + .ui-icon-btn { margin-left: 0; }
.ui-pr-add { color: var(--ui-pr-add); }
.ui-pr-del { color: var(--ui-pr-del); }
.ui-pr-repo { padding: 0 10px 0 8px; color: var(--ui-label-muted); font: 450 12px/normal var(--ui-mono); }
.ui-pr-repo .ui-icon { width: 14px; height: 14px; }
.ui-pr-tabs { padding: 0 10px 0 8px; }
.ui-pr-tablist { display: flex; align-items: center; gap: 6px; padding-left: 6px; }
.ui-pr-merge { padding: 0 10px 0 8px; }
.ui-viewbar .ui-pr-merge:hover, .ui-viewbar .ui-pr-merge:hover > .ui-icon { color: var(--ui-control-primary-label); }
.ui-pr-agent-toggle { border-radius: 50%; }
.ui-pr-full-window .ui-sidebar { display: none; }

.ui-pr-page { flex: 1; display: flex; min-height: 0; container-type: inline-size; }
.ui-pr-page > .ui-review-page { flex: 1; min-width: 0; }
.ui-pr-scroll {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, 84ch) minmax(0, clamp(280px, 26.087cqw + 66.087px, 400px)) 1fr;
  column-gap: clamp(16px, 8.696cqw - 55.304px, 56px);
  align-content: start;
  align-items: start;
  min-width: 0;
  padding-bottom: 12px;
  overflow: hidden auto;
  color: var(--ui-label-title);
  font: 400 16px/24px var(--ui-font);
}
.ui-pr-main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; padding: 16px 0 0 14px; }
.ui-pr-head { display: flex; flex-direction: column; padding-bottom: 16px; }
.ui-pr-title-wrap { padding: 6px 0; }
.ui-pr-title { color: var(--ui-label-title); font: 600 24px/38.4px var(--ui-font); font-feature-settings: "calt"; letter-spacing: -.1px; outline: none; overflow-wrap: anywhere; }
.ui-pr-title > p { margin: 0; font: inherit; line-height: 32px; letter-spacing: -.16px; }
.ui-pr-byline { display: flex; align-items: center; gap: 6px; min-height: 20px; color: var(--ui-label-muted); font: 450 12px/normal var(--ui-font); }
.ui-pr-byline .ui-avatar { width: 16px; height: 16px; font-size: 9px; letter-spacing: normal; }
.ui-pr-author { overflow: hidden; color: var(--ui-label-title); text-overflow: ellipsis; white-space: nowrap; }
.ui-pr-dot { margin: 0 -4px 0 -1px; color: var(--ui-label-faint); font-family: var(--ui-mono); }
.ui-pr-branches { display: inline-flex; align-items: center; min-width: 0; margin-left: 2px; font: 450 12px/14px var(--ui-mono); }
.ui-pr-branch { overflow: hidden; padding: 0; border: 0; background: none; color: var(--ui-label-muted); font: inherit; line-height: normal; text-align: left; cursor: default; white-space: nowrap; }
.ui-pr-branch:hover { color: var(--ui-label-title); }
.ui-pr-arrow { padding: 0 6.5px 0 4px; color: var(--ui-label-faint); }
.ui-pr-desc-wrap { padding-top: 10px; }
.ui-pr-desc { cursor: text; color: var(--ui-label-base); font: 450 15px/24px var(--ui-font); letter-spacing: -.1px; }
.ui-pr-desc > :last-child { margin-bottom: 0; }
.ui-pr-desc p { margin: 16px 0 0; }
.ui-pr-desc > :first-child { margin-top: 0; }
.ui-pr-desc.is-empty { color: var(--ui-label-faint); }
.ui-pr-activity { display: flex; flex-direction: column; padding-top: 66px; }
.ui-pr-activity-row { height: 35px; }
.ui-pr-activity-head { display: inline-block; color: var(--ui-label-muted); font: 450 12px/15px var(--ui-font); text-align: left; }
.ui-pr-feed { display: flex; flex-direction: column; margin: 0 -12px; }
.ui-pr-feed > * { margin-bottom: 14px; }
.ui-pr-event { display: flex; align-items: flex-start; gap: 9px; min-height: 17px; padding: 0 16px; border-radius: 4px; color: var(--ui-label-muted); font: 450 12px/16.8px var(--ui-font); }
.ui-pr-event-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 17px; }
.ui-pr-event-icon .ui-icon { width: 14px; height: 14px; color: var(--ui-label-muted); }
.ui-pr-event-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-pr-event-text b { color: var(--ui-label-base); font-weight: 450; }
.ui-pr-event-commits { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: default; }
.ui-pr-event-commits:hover, .ui-pr-event-commits[aria-expanded="true"] { color: var(--ui-label-base); }
/* "with N commits" unfolds on Linear's CSS collapsible (startup-root, its
   CollapsibleContent): height 0 -> calc-size(auto), opacity and a bottom mask over 200ms
   cubic-bezier(.33, 1, .68, 1). */
@property --ui-pr-commits-mask { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.ui-pr-commits {
  display: flex; flex-direction: column; gap: 10px;
  height: 0; overflow: hidden; opacity: 0; interpolate-size: allow-keywords;
  --ui-pr-commits-mask: 0%;
  mask-image: linear-gradient(to bottom, black 0%, black var(--ui-pr-commits-mask), transparent calc(var(--ui-pr-commits-mask) + 40px));
  transition-property: opacity, height, --ui-pr-commits-mask; transition-duration: .2s; transition-timing-function: cubic-bezier(.33, 1, .68, 1);
}
.ui-pr-commits[data-open="true"] { height: auto; opacity: 1; --ui-pr-commits-mask: 100%; }
.ui-pr-commits > :first-child { margin-top: 8px; }
@supports (height: calc-size(auto, size)) { .ui-pr-commits[data-open="true"] { height: calc-size(auto, size); } }
@media (prefers-reduced-motion: reduce) { .ui-pr-commits { transition: none; } }
.ui-pr-sha { color: var(--ui-label-muted); font: 450 11px/16.8px var(--ui-mono); }
.ui-pr-commit-message { color: var(--ui-label-base); }
.ui-pr-comment { padding: 12px 16px; border-radius: 8px; background: var(--ui-bg-base); box-shadow: inset 0 0 0 1px var(--ui-border-faint), 0 3px 6px -2px lch(0% 0 0 / .02), 0 1px 1px lch(0% 0 0 / .04); }
.ui-pr-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--ui-label-muted); font: 450 13px/normal var(--ui-font); }
.ui-pr-comment-head .ui-avatar { width: 18px; height: 18px; font-size: 8px; }
.ui-pr-comment-head b { color: var(--ui-label-title); font-weight: 500; }
.ui-pr-comment-body { color: var(--ui-label-base); font: 450 15px/24px var(--ui-font); }
.ui-pr-comment-body > :last-child { margin-bottom: 0; }
.ui-pr-review-state.is-approved { color: var(--ui-pr-add); }
.ui-pr-review-state.is-changes_requested { color: var(--ui-pr-del); }
.ui-pr-composer { margin: 0 -12px; }
.ui-pr-composer .ui-composer { display: flex; align-items: flex-start; gap: 8px; min-height: 48px; padding: 11px 16px; border: 1px solid var(--ui-pr-composer-border); box-shadow: lch(0% 0 0 / .02) 0 3px 6px -2px, lch(0% 0 0 / .04) 0 1px 1px; cursor: text; transition: border-color .15s ease-in-out; }
.ui-pr-composer .ui-composer-actions .ui-icon-btn { color: var(--ui-label-faint); }
.ui-pr-composer .ui-composer > .ui-avatar { flex: none; width: 18px; height: 18px; margin-top: 3px; font-size: 8px; }
.ui-pr-composer .ui-composer-input, .ui-pr-composer .ui-ed-composer { flex: 1; min-width: 0; }
.ui-pr-composer .ui-composer-actions { flex: none; margin: 0; }
.ui-pr-composer .ui-send { width: 24px; height: 24px; }

.ui-pr-side { grid-column: 3; position: sticky; top: 0; min-width: 0; padding: 30px 12px 54px; overflow: hidden; }
.ui-pr-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding-bottom: 10px; }
.ui-pr-files .ui-pr-side-head { align-self: flex-start; }
.ui-pr-side-head { display: flex; text-align: left; align-items: center; justify-content: space-between; min-height: 16px; color: var(--ui-label-muted); font: 450 13px/16px var(--ui-font); }
.ui-pr-side-add { width: 24px; height: 24px; margin: -4px -4px -4px 0; }
.ui-pr-side-row, .ui-pr-side-rows { display: flex; flex-direction: column; align-items: flex-start; margin-left: -4px; }
.ui-pr-prop { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 10px 0 4px; border: 1px solid transparent; border-radius: var(--ui-radius-pill); background: none; color: var(--ui-label-base); font: 500 13px/16px var(--ui-font); text-decoration: none; white-space: nowrap; cursor: default; transition: border .15s, background-color .15s, color .15s, opacity .15s; }
/* Linear's buttons on this page fade their border, fill, colour and opacity, not a shadow. */
:is(.ui-pr-header, .ui-pr-tabs, .ui-pr-merge-foot) :is(.ui-btn, .ui-tab) { transition: border .15s, background-color .15s, color .15s, opacity .15s; }
.ui-pr-prop > span:not(.ui-avatar):not(.ui-pr-verdict) { overflow: hidden; text-overflow: ellipsis; }
.ui-pr-prop:hover { background: var(--ui-control-tertiary-hover); }
.ui-pr-prop.is-static:hover { background: none; }
.ui-pr-prop.is-empty { color: var(--ui-label-muted); }
.ui-pr-prop-icon.ui-icon, .ui-pr-prop .ui-status { flex: none; width: 14px; height: 14px; margin: 0 2px; color: var(--ui-label-muted); }
.ui-pr-prop.is-static { padding-right: 6px; transition: all 0s; }
.ui-pr-prop .ui-avatar { flex: none; width: 18px; height: 18px; font-size: 8px; }
.ui-pr-verdict { margin-left: 2px; color: var(--ui-label-muted); font-weight: 450; }
.ui-pr-verdict.is-approved { color: var(--ui-pr-add); }
.ui-pr-verdict.is-changes_requested { color: var(--ui-pr-del); }
.ui-pr-checklist { display: flex; flex-direction: column; align-self: stretch; }
.ui-pr-checklist { padding: 0 0 4px; }
.ui-pr-check { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 24px; margin: 0; padding: 0 10px 0 4px; cursor: default; border-radius: var(--ui-radius-pill); color: var(--ui-label-base); font: 500 13px/16px var(--ui-font); text-decoration: none; white-space: nowrap; }
:is(.ui-pr-checklist, .ui-pr-merge-checks) a:is(.ui-pr-check, .ui-pr-check-summary) { cursor: default; }
.ui-pr-check:hover { background: var(--ui-control-tertiary-hover); }
/* Linear fades a hover out, never in: a hovered control changes at once. */
.ui-pr-prop:hover, a.ui-pr-title-crumb:hover { transition-duration: 0s; }
.ui-pr-tablist .ui-tab[aria-current="page"]:hover { transition-duration: .15s; }
.ui-pr-check-dot { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; }
.ui-pr-check-dot > span { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-label-faint); }
.ui-pr-check-dot.is-success > span { background: var(--ui-pr-add); }
.ui-pr-check-dot.is-failure > span { background: var(--ui-red); }
.ui-pr-check-dot.is-pending > span { background: lch(75% 70 85); }
.ui-pr-check-summary { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 24px; padding: 0 10px 0 4px; border-radius: var(--ui-radius-pill); color: var(--ui-label-base); font: 400 13px/16px var(--ui-font); text-decoration: none; }
.ui-pr-check-summary .ui-icon { width: 14px; height: 14px; margin: 0 2px; color: var(--ui-label-muted); }
.ui-pr-cats { display: flex; flex-direction: column; margin: 0 -6px; }
.ui-pr-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 28px; padding: 6px 8px; border: 0; border-radius: 14px; background: none; color: var(--ui-label-base); font: 500 12px/15px var(--ui-font); text-align: left; text-decoration: none; cursor: default; }
.ui-pr-cat + .ui-pr-cat { margin-top: 2px; }
.ui-pr-cat-row:hover { background: var(--ui-control-tertiary-hover); }
.ui-pr-cat-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ui-pr-cat-count { color: var(--ui-label-muted); font-weight: 450; }
.ui-pr-cat-caret.ui-icon { width: 16px; height: 16px; color: var(--ui-label-muted); transition: transform .15s ease; }
.ui-pr-cat-row[aria-expanded="true"] .ui-pr-cat-caret { transform: rotate(90deg); }
.ui-pr-cat-lines { display: inline-flex; flex: none; gap: 4px; font: 450 12px/15px var(--ui-font); }
.ui-pr-cat-files[hidden] { display: none; }
.ui-pr-cat-inner { display: flex; flex-direction: column; padding-left: 12px; }
.ui-pr-cat-file { display: flex; align-items: center; gap: 8px; height: 28px; margin-left: 5px; padding: 0 12px 0 6px; border-radius: 8px; color: var(--ui-label-base); text-decoration: none; cursor: default; }
.ui-pr-cat-file:hover { background: var(--ui-control-tertiary-hover); }
.ui-pr-cat-file .ui-icon { flex: none; width: 14px; height: 14px; color: var(--ui-label-muted); }
.ui-pr-cat-file-name { display: inline-flex; gap: 5px; min-width: 0; overflow: hidden; font: 450 12px/15px var(--ui-font); white-space: nowrap; }
.ui-pr-cat-file-name b { flex: none; color: var(--ui-label-base); font-weight: 500; }
.ui-pr-cat-file-name span { overflow: hidden; color: var(--ui-label-muted); text-overflow: ellipsis; }

.ui-popover.ui-pr-merge-dialog { display: flex; flex-direction: column; width: 480px; max-width: calc(100vw - 32px); padding: 0; border-radius: 10px; }
.ui-pr-merge-title { margin-bottom: 2px; padding: 20px 20px 0; text-align: left; color: var(--ui-label-title); font: 600 15px/23px var(--ui-font); }
.ui-pr-merge-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 20px; }
.ui-pr-merge-warning { text-align: left; color: var(--ui-label-muted); font: 450 15px/23px var(--ui-font); }
.ui-pr-merge-checks { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 8px; }
.ui-pr-merge-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 20px; }
.ui-pr-merge-foot .ui-btn { height: 32px; padding: 0 12px; font-size: 13px; }

.ui-pr-agent { flex: none; display: flex; width: clamp(360px, 36cqw, 640px); min-height: 0; }
.ui-pr-agent[hidden] { display: none; }
.ui-pr-agent-chat { display: flex; flex: 1; min-width: 0; min-height: 0; }
.ui-pr-agent-chat > .ui-chat { flex: 1; }
.ui-pr-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
@media (max-width: 768px) {
  .ui-pr-scroll { grid-template-columns: minmax(0, 1fr); padding: 0 16px 24px; }
  .ui-pr-main, .ui-pr-side { grid-column: 1; }
  .ui-pr-main { padding-left: 0; }
  .ui-pr-side { position: static; padding: 16px 0 0; }
  .ui-pr-header .ui-pr-repo, .ui-pr-header .ui-pr-counts { display: none; }
  .ui-pr-agent { position: fixed; inset: 0; z-index: 20; width: auto; background: var(--ui-bg-base); }
}
@media (prefers-reduced-motion: reduce) {
  .ui-pr-cat-caret.ui-icon, .ui-pr-prop { transition: none; }
}