/* GitHub Primer: the 2024 primitives (light and dark default), the system font, 6px controls and 12px overlays,
   green primary buttons beside a blue accent, outlined pill Labels, the coral UnderlineNav, NavList's blue
   indicator, the Write/Preview tab strip, comment boxes with an arrow towards the avatar, the notifications
   list (blue dot on unread, muted read rows) and the Toast with its coloured icon block.
   data-base picks the header: light as on github.com today, or the classic dark bar.
   Loaded after themes.css and app.css; every rule is scoped to [data-theme="primer"]. Raw values are --pr-*. */

[data-theme="primer"] {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #ffffff; --paper: #ffffff; --paper-2: #f6f8fa; --card: #ffffff; --elevated: #ffffff;
  --subtle: #f6f8fa; --hover: rgb(129 139 152 / .12); --active: rgb(129 139 152 / .15);
  --fg: #1f2328; --fg-2: #1f2328; --fg-3: #59636e; --fg-muted: #59636e;
  --border: #d1d9e0; --border-strong: #818b98; --input: #d1d9e0;

  --primary: #1f883d; --primary-hover: #1c8139; --primary-fg: #ffffff;
  --primary-soft: #ddf4ff; --primary-soft-fg: #0969da;
  --ring: #0969da; --ring-alpha: 30%;
  --focus-w: 2px; --focus-c: #0969da; --focus-o: -2px;

  --danger: #d1242f; --danger-solid: #cf222e; --danger-soft: #ffebe9; --danger-border: rgb(255 129 130 / .4);
  --warn: #9a6700; --warn-soft: #fff8c5; --warn-border: rgb(212 167 44 / .4);
  --ok: #1a7f37; --ok-solid: #1f883d; --ok-soft: #dafbe1; --ok-border: rgb(74 194 107 / .4);
  --snooze: #8250df; --snooze-solid: #8250df; --snooze-soft: #fbefff; --snooze-border: rgb(194 151 255 / .4);
  --label: #0969da; --label-soft: #ddf4ff; --label-border: rgb(84 174 255 / .4);
  --sample: #bc4c00; --sample-soft: #fff1e5; --sample-border: rgb(251 143 68 / .4);
  --unread: #0969da; --unread-line: rgb(84 174 255 / .4); --draft: #bc4c00;
  --note-bg: #fff8c5; --note-border: rgb(212 167 44 / .4); --note-fg: #7d4e00; --note-strong: #9a6700; --note-focus: #bf8700; --note-soft: #fffbe0;
  --fail-bg: #fff8c5; --fail-border: rgb(212 167 44 / .4);

  --bubble-in: #ffffff; --bubble-in-fg: #1f2328;
  --bubble-out: #ddf4ff; --bubble-out-fg: #1f2328;
  --bubble-other: #dafbe1; --bubble-other-fg: #1f2328; --bubble-other-border: rgb(74 194 107 / .4);
  --bubble-fail: #ffebe9; --bubble-fail-border: rgb(255 129 130 / .4); --bubble-fail-fg: #1f2328;
  --file-bg: #f6f8fa; --file-border: #d1d9e0;
  --summary-bg: #ddf4ff; --summary-border: rgb(84 174 255 / .4); --summary-fg: #1f2328;
  --sug-bg: #f6f8fa; --sug-border: #d1d9e0; --sug-hover: #eff2f5; --sug-fg: #1f2328;
  --info-soft: #ddf4ff; --info-fg: #1f2328;
  --mark: #fff8c5; --star: #e3b341;

  --toast-bg: #ffffff; --toast-fg: #1f2328; --toast-border: transparent; --toast-action: #0969da;
  --skel-a: rgb(129 139 152 / .12); --skel-b: rgb(129 139 152 / .2); --skel-anim: aa-shimmer 1.4s linear infinite;
  --scrim: rgb(31 35 40 / .5); --scroll-shadow: rgb(31 35 40 / .12);
  /* button rest, resting-small, floating-small, floating-large */
  --shadow-xs: 0 1px 0 rgb(31 35 40 / .04);
  --shadow-sm: 0 1px 1px rgb(31 35 40 / .06), 0 1px 3px rgb(31 35 40 / .06);
  --shadow-md: 0 0 0 1px rgb(209 217 224 / .5), 0 6px 12px -3px rgb(37 41 46 / .04), 0 6px 18px rgb(37 41 46 / .12);
  --shadow-lg: 0 0 0 1px #d1d9e0, 0 40px 80px rgb(37 41 46 / .24);
  --shadow-side: 0 0 0 1px rgb(209 217 224 / .5), 0 6px 12px -3px rgb(37 41 46 / .04), 0 6px 18px rgb(37 41 46 / .12);

  /* radius 6 (borderRadius-medium): small 3, overlays 12, Labels and Counters full */
  --btn-radius: var(--r-lg); --field-radius: var(--r-lg); --card-radius: var(--r-lg); --menu-radius: calc(var(--radius) * 2);
  --item-radius: var(--r-lg); --chip-radius: var(--r-lg); --pill-radius: 999px; --row-radius: 0px;
  --bubble-radius: var(--r-lg); --panel-radius: calc(var(--radius) * 2);
  --weight-strong: 600; --weight-head: 600; --weight-active: 600; --tracking-head: 0;
  --sec-transform: none; --sec-size: 12px; --sec-weight: 600; --sec-spacing: 0;
  --side-bg: #ffffff; --side-fg: #59636e; --side-hover: rgb(129 139 152 / .12); --side-hover-fg: #1f2328;
  --side-active-bg: rgb(129 139 152 / .15); --side-active-fg: #1f2328; --side-muted: #59636e;
  --side-border: #d1d9e0; --side-title: #1f2328; --side-sub-bg: transparent; --side-parent-fg: #1f2328;

  --pr-accent: #0969da; --pr-accent-border: rgb(84 174 255 / .4); --pr-underline: #fd8c73;
  --pr-btn: #f6f8fa; --pr-btn-hover: #eff2f5; --pr-btn-active: #e6eaef; --pr-btn-border: #d1d9e0;
  --pr-counter: rgb(129 139 152 / .2); --pr-header: #f6f8fa; --pr-header-fg: #1f2328; --pr-track: #e6eaef;
  color-scheme: light;
}
[data-theme="primer"][data-mode="dark"] {
  --bg: #0d1117; --paper: #0d1117; --paper-2: #151b23; --card: #0d1117; --elevated: #151b23;
  --subtle: #151b23; --hover: rgb(101 108 118 / .2); --active: rgb(101 108 118 / .26);
  --fg: #f0f6fc; --fg-2: #f0f6fc; --fg-3: #9198a1; --fg-muted: #9198a1;
  --border: #3d444d; --border-strong: #656c76; --input: #3d444d;

  --primary: #238636; --primary-hover: #29903b; --primary-fg: #ffffff;
  --primary-soft: rgb(56 139 253 / .1); --primary-soft-fg: #4493f8;
  --ring: #1f6feb; --focus-c: #1f6feb;

  --danger: #f85149; --danger-solid: #da3633; --danger-soft: rgb(248 81 73 / .1); --danger-border: rgb(248 81 73 / .4);
  --warn: #d29922; --warn-soft: rgb(187 128 9 / .15); --warn-border: rgb(187 128 9 / .4);
  --ok: #3fb950; --ok-solid: #238636; --ok-soft: rgb(46 160 67 / .15); --ok-border: rgb(46 160 67 / .4);
  --snooze: #ab7df8; --snooze-solid: #8957e5; --snooze-soft: rgb(171 125 248 / .15); --snooze-border: rgb(171 125 248 / .4);
  --label: #4493f8; --label-soft: rgb(56 139 253 / .1); --label-border: rgb(56 139 253 / .4);
  --sample: #db6d28; --sample-soft: rgb(219 109 40 / .1); --sample-border: rgb(219 109 40 / .4);
  --unread: #4493f8; --unread-line: rgb(56 139 253 / .4); --draft: #db6d28;
  --note-bg: rgb(187 128 9 / .15); --note-border: rgb(187 128 9 / .4); --note-fg: #d29922; --note-strong: #9e6a03; --note-focus: #d29922; --note-soft: rgb(187 128 9 / .08);
  --fail-bg: rgb(187 128 9 / .15); --fail-border: rgb(187 128 9 / .4);

  --bubble-in: #151b23; --bubble-in-fg: #f0f6fc;
  --bubble-out: #0f2a4a; --bubble-out-fg: #f0f6fc;
  --bubble-other: #12301d; --bubble-other-fg: #f0f6fc; --bubble-other-border: rgb(46 160 67 / .4);
  --bubble-fail: #2d1517; --bubble-fail-border: rgb(248 81 73 / .4); --bubble-fail-fg: #f0f6fc;
  --file-bg: #151b23; --file-border: #3d444d;
  --summary-bg: rgb(56 139 253 / .1); --summary-border: rgb(56 139 253 / .4); --summary-fg: #f0f6fc;
  --sug-bg: #212830; --sug-border: #3d444d; --sug-hover: #262c36; --sug-fg: #f0f6fc;
  --info-soft: rgb(56 139 253 / .1); --info-fg: #f0f6fc;
  --mark: rgb(187 128 9 / .4); --star: #e3b341;

  --toast-bg: #151b23; --toast-fg: #f0f6fc; --toast-action: #4493f8;
  --skel-a: rgb(101 108 118 / .2); --skel-b: rgb(101 108 118 / .32);
  --scrim: rgb(1 4 9 / .8); --scroll-shadow: rgb(1 4 9 / .5);
  --shadow-xs: 0 0 #0000; --shadow-sm: 0 0 0 1px #3d444d;
  --shadow-md: 0 0 0 1px #3d444d, 0 6px 12px -3px rgb(1 4 9 / .4), 0 6px 18px rgb(1 4 9 / .4);
  --shadow-lg: 0 0 0 1px #3d444d, 0 40px 80px rgb(1 4 9 / .8);
  --shadow-side: 0 0 0 1px #3d444d, 0 6px 18px rgb(1 4 9 / .4);
  --side-bg: #0d1117; --side-fg: #9198a1; --side-hover: rgb(101 108 118 / .2); --side-hover-fg: #f0f6fc;
  --side-active-bg: rgb(101 108 118 / .26); --side-active-fg: #f0f6fc; --side-muted: #9198a1;
  --side-border: #3d444d; --side-title: #f0f6fc; --side-parent-fg: #f0f6fc;

  --pr-accent: #4493f8; --pr-accent-border: rgb(56 139 253 / .4); --pr-underline: #f78166;
  --pr-btn: #212830; --pr-btn-hover: #262c36; --pr-btn-active: #2a313c; --pr-btn-border: #3d444d;
  --pr-counter: rgb(101 108 118 / .2); --pr-header: #010409; --pr-header-fg: #f0f6fc; --pr-track: #212830;
  color-scheme: dark;
}
/* the classic dark header */
[data-theme="primer"][data-base="dark"] { --pr-header: #1f2328; --pr-header-fg: #ffffff; }
[data-theme="primer"][data-base="dark"][data-mode="dark"] { --pr-header: #010409; }
/* sizes: the 64px AppHeader, 32px controls and NavList items; compact is one step denser */
[data-theme="primer"] { --top-h: 64px; --ctl-h: 32px; --ctl-sm: 32px; --nav-h: 32px; --nav-h-sm: 32px; }
[data-theme="primer"][data-density="compact"] { --top-h: 56px; --ctl-h: 28px; --ctl-sm: 28px; --nav-h: 28px; --nav-h-sm: 28px; }
/* motion: Primer overlays appear in 200ms on cubic-bezier(.33, 1, .68, 1) */
[data-theme="primer"][data-motion="subtle"] {
  --dur-1: 80ms; --dur-2: 160ms; --dur-3: 200ms;
  --ease-out: cubic-bezier(.33, 1, .68, 1); --ease-spring: cubic-bezier(.33, 1, .68, 1);
}
[data-theme="primer"][data-motion="smooth"] {
  --dur-1: 100ms; --dur-2: 200ms; --dur-3: 300ms;
  --ease-out: cubic-bezier(.33, 1, .68, 1); --ease-spring: cubic-bezier(.16, 1, .3, 1);
}
/* things GitHub draws in the blue accent rather than the green button colour */
[data-theme="primer"] :is(.newpill, .msgs-pill.blue) { background: var(--pr-accent); }
[data-theme="primer"] .progress::before { background: var(--pr-accent); }
[data-theme="primer"] .conv-prev .typing { color: var(--pr-accent); }
[data-theme="primer"] .logo-bg { fill: var(--fg); }
[data-theme="primer"] .logo-fg { fill: var(--paper); }
[data-theme="primer"] .avatar { box-shadow: 0 0 0 1px rgb(31 35 40 / .15); }
[data-theme="primer"][data-mode="dark"] .avatar { box-shadow: 0 0 0 1px rgb(255 255 255 / .15); }

/* ── AppHeader: the page title, a bordered search with "/", bordered icon buttons, a blue dot on the bell ── */
[data-theme="primer"] .top { gap: 8px; padding: 0 16px; background: var(--pr-header); border-bottom-color: var(--border); color: var(--pr-header-fg); }
[data-theme="primer"] .brand { font-size: 16px; font-weight: 600; letter-spacing: 0; }
[data-theme="primer"] .tenant { border: 0; background: transparent; box-shadow: none; padding: 0 8px; font-size: 14px; font-weight: 600; color: inherit; }
[data-theme="primer"] .tenant:hover { background: var(--hover); }
[data-theme="primer"] .gsearch { height: 32px; max-width: 360px; margin-left: auto; padding: 0 8px; border: 1px solid var(--pr-btn-border); border-radius: var(--r-lg); background: var(--paper); color: var(--fg-3); }
[data-theme="primer"] .gsearch:hover { background: var(--paper); border-color: var(--border-strong); }
[data-theme="primer"] kbd { padding: 3px 5px; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: inset 0 -1px 0 var(--border); background: var(--subtle); color: var(--fg); font-family: var(--font-mono); font-size: 11px; line-height: 10px; }
[data-theme="primer"] .top-right { margin-left: 8px; gap: 8px; }
[data-theme="primer"] .top .iconbtn { width: 32px; height: 32px; border: 1px solid var(--pr-btn-border); border-radius: var(--r-lg); color: var(--fg-3); }
[data-theme="primer"] .top .iconbtn:hover { background: var(--hover); color: var(--fg); }
[data-theme="primer"] .top .badge { top: -3px; right: -3px; min-width: 0; width: 10px; height: 10px; padding: 0; font-size: 0; background: var(--pr-accent); box-shadow: 0 0 0 2px var(--pr-header); }
[data-theme="primer"] .demo-btn { height: 32px; border: 1px solid var(--pr-btn-border); border-radius: var(--r-lg); background: var(--pr-btn); color: var(--fg); font-weight: 500; font-size: 14px; }
[data-theme="primer"] .demo-btn:hover, [data-theme="primer"] .demo-btn.on { border-color: var(--pr-btn-border); background: var(--pr-btn-hover); color: var(--fg); }
[data-theme="primer"] .conn { height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: 999px; background: transparent; font-size: 12px; font-weight: 500; }
[data-theme="primer"] .conn.ok { border-color: var(--ok-border); }
[data-theme="primer"] .conn.warn { border-color: var(--warn-border); }
[data-theme="primer"] .conn.bad { border-color: var(--danger-border); }
[data-theme="primer"] .me { border-radius: 999px; padding: 0; }
[data-theme="primer"] .me-name { display: none; }
[data-theme="primer"] .crumb .cur { font-weight: 600; }
[data-theme="primer"] .crumb .crumb-sep svg { display: none; }
[data-theme="primer"] .crumb .crumb-sep::before { content: "/"; padding: 0 2px; color: var(--fg-3); }
/* the classic dark bar re-colours its controls */
[data-theme="primer"][data-base="dark"] .top { --fg: #ffffff; --fg-3: rgb(255 255 255 / .7); --hover: rgb(255 255 255 / .12); --pr-btn-border: rgb(255 255 255 / .2); --pr-btn: transparent; --pr-btn-hover: rgb(255 255 255 / .12); border-bottom-color: transparent; }
[data-theme="primer"][data-base="dark"] .top .gsearch { background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .7); }
[data-theme="primer"][data-base="dark"] .top .gsearch:hover { background: rgb(255 255 255 / .16); }
[data-theme="primer"][data-base="dark"] .top kbd { --border: rgb(255 255 255 / .25); background: transparent; color: rgb(255 255 255 / .8); }
[data-theme="primer"][data-base="dark"] .top .logo-bg { fill: #ffffff; }
[data-theme="primer"][data-base="dark"] .top .logo-fg { fill: var(--pr-header); }
[data-theme="primer"][data-base="dark"] .top .conn { color: #ffffff; }

/* ── NavList: 32px items, the selected one with a 4px blue indicator on its left ── */
[data-theme="primer"] .rail { width: 72px; }
[data-theme="primer"] .rail-btn { width: 64px; border-radius: var(--r-lg); font-weight: 500; }
[data-theme="primer"] .rail-btn.on { font-weight: 600; }
[data-theme="primer"] :is(.rail-btn, .sb-item, .sb-subitem, .nav-row).on::after { content: ""; position: absolute; left: -4px; top: calc(50% - 12px); width: 4px; height: 24px; border-radius: var(--r-lg); background: var(--pr-accent); }
[data-theme="primer"] :is(.sb-item, .sb-subitem, .nav-row).on::after { left: -8px; }
[data-theme="primer"] .rail-btn .count { min-width: 18px; height: 18px; padding: 0 6px; background: var(--pr-accent); color: #ffffff; font-size: 12px; font-weight: 500; line-height: 18px; }
[data-theme="primer"][data-layout="sidebar"] .rail { --sb-w: 16rem; width: var(--sb-w); }
[data-theme="primer"][data-layout="sidebar"] .app { background: var(--paper-2); }
[data-theme="primer"] .sb-scroll { padding: 0 8px 0 16px; }
[data-theme="primer"] .sb-item, [data-theme="primer"] .sb-subitem { position: relative; border-radius: var(--r-lg); }
[data-theme="primer"] .sb-item.on, [data-theme="primer"] .sb-subitem.on { font-weight: 600; }
[data-theme="primer"] .sb-row:has(+ .sb-sub) .sb-item.on::after { display: none; }
[data-theme="primer"][data-sidebar="collapsed"] .sb-row .sb-item.on::after { display: block; }
[data-theme="primer"][data-sidebar="collapsed"] .sb-scroll { padding: 0 8px; }
[data-theme="primer"] .sb-badge { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--pr-counter); color: var(--fg); font-size: 12px; font-weight: 500; line-height: 18px; text-align: center; }
[data-theme="primer"] .sb-sub { border-left: 0; margin-left: 16px; }
[data-theme="primer"] .nav-scroll { padding: 0 8px 16px 16px; }
[data-theme="primer"] .nav-row { height: var(--nav-h); border-radius: var(--r-lg); font-weight: 400; }
[data-theme="primer"] .nav-row.on { background: var(--active); color: var(--fg); font-weight: 600; }
[data-theme="primer"] .nav-row .num { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--pr-counter); color: var(--fg); font-weight: 500; line-height: 18px; text-align: center; }
[data-theme="primer"] .nav-row .num:empty { display: none; }

/* ── the notifications list: a blue dot on unread, muted read rows, dividers ── */
[data-theme="primer"] .list-head h2, [data-theme="primer"] .nav-head h2 { font-size: 16px; }
[data-theme="primer"] .vrow { left: 0; right: 0; height: var(--row-h); margin-top: -4px; }
[data-theme="primer"] .conv { position: relative; padding: 12px 16px 12px 28px; border-radius: 0; border-bottom: 1px solid var(--border); background: var(--paper-2); }
[data-theme="primer"] .conv.unread { background: var(--paper); }
[data-theme="primer"] .conv:hover { background: var(--pr-btn-hover); }
[data-theme="primer"] .conv.on { background: var(--primary-soft); box-shadow: inset 2px 0 0 var(--pr-accent); }
[data-theme="primer"] .conv.unread::before { content: ""; position: absolute; left: 10px; top: 24px; width: 8px; height: 8px; border-radius: 999px; background: var(--pr-accent); }
[data-theme="primer"] .conv.unread .conv-time { color: var(--fg-3); font-weight: 400; }
[data-theme="primer"] .unread-count { background: var(--pr-counter); color: var(--fg); font-weight: 500; }
[data-theme="primer"] .skel-row { padding: 12px 16px 12px 28px; }
[data-theme="primer"][data-density="compact"] :is(.conv, .skel-row) { padding-top: 8px; padding-bottom: 8px; }
[data-theme="primer"][data-density="compact"] .conv.unread::before { top: 50%; translate: 0 -50%; }
/* the issue-list filter bar: invisible dropdown buttons */
[data-theme="primer"] .chip { height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-lg); background: transparent; font-size: 14px; font-weight: 400; color: var(--fg-3); }
[data-theme="primer"] .chip:hover { background: var(--hover); color: var(--fg); }
[data-theme="primer"] .chip.on { background: transparent; color: var(--fg); font-weight: 600; }
/* Labels: outlined pills */
[data-theme="primer"] .pill { height: 20px; padding: 0 7px; border: 1px solid var(--border); background: transparent; font-size: 12px; font-weight: 500; }
[data-theme="primer"] .pill.red { border-color: var(--danger-border); }
[data-theme="primer"] .pill.amber { border-color: var(--warn-border); }
[data-theme="primer"] .pill.green { border-color: var(--ok-border); }
[data-theme="primer"] .pill.snoozed { border-color: var(--snooze-border); }
[data-theme="primer"] .pill.label { border-color: var(--label-border); }
[data-theme="primer"] .pill.sample { border-color: var(--sample-border); }
[data-theme="primer"] :is(.pill.red, .pill.amber, .pill.green, .pill.snoozed, .pill.label, .pill.sample, .pill.grey, .pill.inbox) { background: transparent; }
[data-theme="primer"] :is(.pill.grey, .pill.inbox) { color: var(--fg-3); }
/* TextInput */
[data-theme="primer"] :is(.lsearch, .nav-search) { height: 32px; border-color: var(--pr-btn-border); background: var(--paper); box-shadow: inset 0 1px 0 rgb(208 215 222 / .2); }
[data-theme="primer"] :is(.lsearch, .nav-search, .composer):focus-within { border-color: var(--pr-accent); box-shadow: inset 0 0 0 1px var(--pr-accent); }

/* ── conversation: Button, the comment box, the Write/Preview strip, UnderlineNav ── */
[data-theme="primer"] .btn { height: var(--ctl-sm); padding: 0 12px; border-color: var(--pr-btn-border); background: var(--pr-btn); box-shadow: var(--shadow-xs); font-size: 14px; font-weight: 500; color: var(--fg); }
[data-theme="primer"] .btn:not(.primary) .ic { color: var(--fg-3); }
[data-theme="primer"] .btn:hover { background: var(--pr-btn-hover); border-color: var(--pr-btn-border); }
[data-theme="primer"] .btn:active { background: var(--pr-btn-active); }
[data-theme="primer"] .btn.primary { border-color: rgb(31 35 40 / .15); background: var(--primary); color: var(--primary-fg); box-shadow: 0 1px 0 rgb(31 35 40 / .1); }
[data-theme="primer"] .btn.primary:hover { background: var(--primary-hover); }
[data-theme="primer"] .btn.primary:active { background: color-mix(in srgb, var(--primary) 88%, #000000); }
[data-theme="primer"] .seg { border-color: var(--pr-btn-border); box-shadow: var(--shadow-xs); }
[data-theme="primer"] .seg button { background: var(--pr-btn); color: var(--fg-3); }
[data-theme="primer"] .seg button:hover { background: var(--pr-btn-hover); }
[data-theme="primer"] .seg button + button { border-left-color: var(--pr-btn-border); }
[data-theme="primer"] .viewing { border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
[data-theme="primer"] .summary { margin: 8px 16px 0; border: 1px solid var(--summary-border); border-radius: var(--r-lg); }
[data-theme="primer"] .summary .ic { color: var(--pr-accent); }
[data-theme="primer"] .banner { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); }
[data-theme="primer"] .linkbtn { color: var(--pr-accent); font-weight: 400; }
[data-theme="primer"] .linkbtn:hover { background: transparent; text-decoration: underline; }
[data-theme="primer"] .linkbtn.red { color: var(--danger); }
[data-theme="primer"] .bubble { position: relative; padding: 8px 12px; box-shadow: inset 0 0 0 1px var(--border); }
[data-theme="primer"] .row.out .bubble { box-shadow: inset 0 0 0 1px var(--pr-accent-border); }
[data-theme="primer"] .row.out.other .bubble { box-shadow: inset 0 0 0 1px var(--bubble-other-border); }
[data-theme="primer"] .row.failed .bubble { box-shadow: inset 0 0 0 1px var(--bubble-fail-border); }
/* the arrow from a comment towards its author */
[data-theme="primer"] .bubble::before, [data-theme="primer"] .bubble::after { content: ""; position: absolute; bottom: 10px; width: 8px; height: 16px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
[data-theme="primer"] .bubble::before { left: -8px; background: var(--border); }
[data-theme="primer"] .bubble::after { left: -7px; bottom: 11px; height: 14px; background: inherit; }
[data-theme="primer"] .row.out .bubble::before, [data-theme="primer"] .row.out .bubble::after { left: auto; clip-path: polygon(0 0, 100% 50%, 0 100%); }
[data-theme="primer"] .row.out .bubble::before { right: -8px; background: var(--pr-accent-border); }
[data-theme="primer"] .row.out .bubble::after { right: -7px; }
[data-theme="primer"] .row.out.other .bubble::before { background: var(--bubble-other-border); }
[data-theme="primer"] .row.failed .bubble::before { background: var(--bubble-fail-border); }
/* only the last comment of a run sits beside its author's avatar */
[data-theme="primer"] .stack:not(:has(.meta)) .bubble::before, [data-theme="primer"] .stack:not(:has(.meta)) .bubble::after { display: none; }
[data-theme="primer"] .sys span { background: transparent; color: var(--fg-3); }
[data-theme="primer"] .sys .ic { box-sizing: content-box; padding: 6px; border-radius: 999px; background: var(--pr-btn-active); color: var(--fg-3); }
[data-theme="primer"] .composer { overflow: hidden; border-color: var(--border); box-shadow: none; }
[data-theme="primer"] .tabs { gap: 0; padding: 8px 8px 0; background: var(--paper-2); border-bottom: 1px solid var(--border); }
[data-theme="primer"] .tab { height: 36px; margin-bottom: -1px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-lg) var(--r-lg) 0 0; font-weight: 400; color: var(--fg-3); }
[data-theme="primer"] .tab:hover { color: var(--fg); }
[data-theme="primer"] .tab.on { background: var(--paper); border-color: var(--border); border-bottom-color: var(--paper); color: var(--fg); }
[data-theme="primer"] .composer.note .tab.on { background: var(--note-bg); border-bottom-color: var(--note-bg); color: var(--note-fg); }
[data-theme="primer"] .composer.note .tabs { background: var(--note-soft); }
[data-theme="primer"] .ctx-tabs { gap: 8px; padding: 0 16px; background: var(--paper); }
[data-theme="primer"] .ctx-tab { position: relative; height: 48px; padding: 0 8px; border-bottom: 0; font-weight: 400; color: var(--fg); }
[data-theme="primer"] .ctx-tab:hover { color: var(--fg); background: transparent; box-shadow: inset 0 -2px 0 var(--border); }
[data-theme="primer"] .ctx-tab.on { font-weight: 600; box-shadow: inset 0 -2px 0 var(--pr-underline); }
[data-theme="primer"] .sendgrp { box-shadow: 0 1px 0 rgb(31 35 40 / .1); }
[data-theme="primer"] .sendgrp button { height: 32px; font-size: 14px; font-weight: 500; }
[data-theme="primer"] .sendgrp button + button { border-left-color: rgb(255 255 255 / .25); }
[data-theme="primer"] .sug { height: 28px; border-radius: var(--r-lg); font-weight: 500; }
[data-theme="primer"] .tool { color: var(--fg-3); font-weight: 400; }

/* ── sidebar, pages: Box, the bordered table, outline buttons ── */
[data-theme="primer"] :is(.card, .trow, .kpi, .pcard) { box-shadow: none; }
[data-theme="primer"] .ghost { border-color: var(--pr-btn-border); background: var(--pr-btn); box-shadow: var(--shadow-xs); font-weight: 500; }
[data-theme="primer"] .ghost:hover { background: var(--pr-btn-hover); }
[data-theme="primer"] .ghost.note { background: var(--note-soft); }
[data-theme="primer"] .page h1 { font-size: 24px; line-height: 32px; font-weight: 400; }
[data-theme="primer"] .kpi .v { font-weight: 600; }
[data-theme="primer"] .tbl th { background: var(--paper-2); font-weight: 600; color: var(--fg); }
[data-theme="primer"] .state .ico { background: transparent; color: var(--fg-3); }

/* ── ActionMenu, Toast, the command palette, SegmentedControl ── */
[data-theme="primer"] :is(.pop, .macros) { padding: 8px; border: 0; box-shadow: var(--shadow-md); }
[data-theme="primer"] .pop { animation: pr-overlay var(--dur-3) var(--ease-out); }
[data-theme="primer"] .pop button { height: 32px; padding: 0 8px; border-radius: var(--r-lg); font-size: 14px; }
[data-theme="primer"] .pop button .ic { color: var(--fg-3); }
[data-theme="primer"] .pop .sep { margin: 6px -8px; }
[data-theme="primer"] .toast { left: 16px; bottom: 16px; translate: none; padding: 0 12px 0 0; gap: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; font-size: 14px; box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md); animation: pr-toast 180ms cubic-bezier(.22, .61, .36, 1); }
[data-theme="primer"] .toast::before { content: ""; align-self: stretch; width: 56px; flex: none; background: radial-gradient(circle at 50% calc(50% - 3.5px), #ffffff 0 1.3px, transparent 1.6px), linear-gradient(#ffffff, #ffffff) 50% calc(50% + 2.5px) / 2px 6px no-repeat, radial-gradient(circle at 50% 50%, transparent 0 7px, #ffffff 7.5px 8.5px, transparent 9px), var(--pr-accent); }
[data-theme="primer"] .toast > span { flex: 1; padding: 16px; }
[data-theme="primer"] .toast button { color: var(--toast-action); font-weight: 500; }
[data-theme="primer"] .palette { border: 0; box-shadow: var(--shadow-lg); animation: pr-overlay var(--dur-3) var(--ease-out); }
[data-theme="primer"] .palette .res { padding: 8px; }
[data-theme="primer"] .palette .it { position: relative; height: 36px; border-radius: var(--r-lg); }
[data-theme="primer"] .palette .it.on { background: var(--active); }
[data-theme="primer"] .palette .it.on::after { content: ""; position: absolute; left: -8px; top: calc(50% - 12px); width: 4px; height: 24px; border-radius: var(--r-lg); background: var(--pr-accent); }
[data-theme="primer"] .look { box-shadow: var(--shadow-md); }
[data-theme="primer"] .look-seg { padding: 0; gap: 0; border-radius: var(--r-lg); background: var(--pr-track); }
[data-theme="primer"] .look-seg button { border-radius: var(--r-lg); color: var(--fg); font-weight: 400; }
[data-theme="primer"] .look-seg button.on { background: var(--paper); box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: 600; }
[data-theme="primer"] .look-card.on { border-color: var(--pr-accent); box-shadow: 0 0 0 1px var(--pr-accent); }
[data-theme="primer"] .look-card .nm .ic { color: var(--pr-accent); }
@keyframes pr-overlay { from { opacity: 0; transform: translateY(-4px); } }
@keyframes pr-toast { from { opacity: 0; transform: scale(.9) translateY(40px); } }

@media (max-width:767px) {
  [data-theme="primer"] .rail { width: auto; }
  [data-theme="primer"] .rail-btn.on::after { left: calc(50% - 12px); top: 0; width: 24px; height: 3px; }
  [data-theme="primer"] .top { padding: 0 8px 0 12px; }
  [data-theme="primer"] .toast { left: 8px; right: 8px; bottom: 74px; }
}

/* the header strip of this theme's mini preview in the Giao diện panel */
[data-theme="primer"] { --pv-top: var(--pr-header); }