/* GitFig plugin recreations + brand palette (2026-08-29).
   Shared by the Community listing frames (listing.css imports this file) and
   gitfig.com (landing/shared/plugin.css is a byte copy kept in sync by
   landing/scripts/sync-shared.mjs). Values derive from the plugin 14px root
   (src/ui/styles/main.css:35) through --u = 0.25rem = 3.5px, so every number is
   auditable against the Tailwind class it reproduces. Assumes the host page
   applies a universal reset (* { margin:0; padding:0; box-sizing:border-box }).
   Scale a fragment with --pl-zoom on an ancestor; the default suits a 1920 frame. */

/* ---------------------------------------------------------------- palette */
:root {
  --field: #0a0a0a;
  --ink: #fafafa;
  --muted: #a1a1aa;
  --hair: #3f3f46;
  --accent: #0d99ff;
  --accent-tint: rgba(13, 153, 255, 0.10);
  --accent-ring: rgba(13, 153, 255, 0.30);
  --glow: rgba(13, 153, 255, 0.14);

  /* plugin theme tokens, src/ui/styles/main.css:6-20 */
  --f-bg: #2c2c2c;
  --f-bg2: #383838;
  --f-bg3: #444444;
  --f-border: #444444;
  --f-border-50: rgba(68, 68, 68, 0.5);
  --f-border-60: rgba(68, 68, 68, 0.6);
  --f-bg2-50: rgba(56, 56, 56, 0.5);
  --f-text: #ffffff;
  --f-text2: #b3b3b3;
  --f-text3: #808080;
  --f-blue: #0d99ff;
  --f-green: #14ae5c;
  --f-green-10: rgba(20, 174, 92, 0.10);
  --f-green-30: rgba(20, 174, 92, 0.30);
  --f-yellow: #f6c343;
  --f-red: #f24822;
  --f-orange: #ff8c00;
  --f-white-20: rgba(255, 255, 255, 0.20);
  --f-black-50: rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
}

/* code card (frame 05) */
.code {
  font: 500 12px/18px 'JetBrains Mono', Consolas, monospace; color: var(--f-text);
  background: var(--f-bg); padding: 14px 16px; white-space: pre; zoom: var(--pl-zoom, 2);
}
.code .k { color: var(--f-text); }
.code .s { color: var(--f-text2); }
.code .p { color: var(--f-text3); }
.code .m { color: var(--f-text); font-weight: 600; }
.code .a { color: var(--f-text); }

/* ---------------------------------------------------------------- icons */
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.i-14 { width: 14px; height: 14px; }
.i-18 { width: 18px; height: 18px; }
.i-20 { width: 20px; height: 20px; }
.i-oct { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- plugin root */
.pl {
  --pl-rem: 14px;                       /* html font-size, main.css:35 */
  --u: calc(var(--pl-rem) * 0.25);      /* one Tailwind spacing unit: 3.5px */
  --t-2xs: calc(var(--pl-rem) * 0.625); /* 8.75px, main.css .text-2xs */
  --t-xs: calc(var(--pl-rem) * 0.75);   /* 10.5px */
  --t-sm: calc(var(--pl-rem) * 0.875);  /* 12.25px */
  --lh-2xs: calc(var(--pl-rem) * 0.875);
  --lh-xs: var(--pl-rem);
  --lh-sm: calc(var(--pl-rem) * 1.25);
  --r: var(--u);                        /* rounded / rounded-sm: 0.25rem */
  --r-md: calc(var(--u) * 1.5);
  --r-lg: calc(var(--u) * 2);
  font: 400 var(--pl-rem)/1.5 Inter, system-ui, sans-serif;
  color: var(--f-text); background: var(--f-bg);
  width: 480px; position: relative;
  zoom: var(--pl-zoom, 2.2);
}
.pl--560 { width: 560px; }
.pl--700 { width: 700px; }
.pl--auto { width: auto; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* header: LinkedHeader.tsx:25 */
.pl-header { display: flex; align-items: flex-end; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 3); border-bottom: 1px solid var(--f-border); }
.pl-menu { min-width: 0; position: relative; }
.pl-menu-label { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); margin-bottom: var(--u); }
.pl-menu-trigger { display: flex; align-items: center; gap: calc(var(--u) * 2); max-width: 100%; }
.pl-menu-trigger .i { color: var(--f-text2); }
.pl-menu-value { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--f-text); }
.pl-rule { width: 1px; height: calc(var(--u) * 6); background: var(--f-border); margin-bottom: var(--u); flex-shrink: 0; }
.pl-spacer { flex: 1; }
.pl-user { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 0.5); flex-shrink: 0; }
.pl-avatar { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--f-bg3); display: inline-flex; align-items: center; justify-content: center; color: var(--f-text2); flex-shrink: 0; }
.pl-avatar .i { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
.pl-user .pl-menu-value { font-size: var(--t-sm); }
.pl-user .i-18 { color: var(--f-text2); }

/* popover: HeaderMenu.tsx:84, MENU_ITEM :8 */
.pl-popover { position: absolute; left: 0; top: 100%; margin-top: var(--u); background: var(--f-bg); border: 1px solid var(--f-border); border-radius: var(--r); box-shadow: var(--shadow-lg); z-index: 50; min-width: calc(var(--pl-rem) * 13); }
.pl-popover--repo { min-width: calc(var(--pl-rem) * 11); }
.pl-menu-item { display: flex; align-items: center; gap: calc(var(--u) * 2); width: 100%; padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--f-text); border-radius: var(--r); white-space: nowrap; }
.pl-menu-item--divider { border-bottom: 1px solid var(--f-border); }
.pl-branch-list { padding: var(--u) 0; }
.pl-branch-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: var(--t-sm); line-height: var(--lh-sm); }
.pl-branch-row--hover { background: var(--f-bg2); }
.pl-branch-name { display: flex; align-items: center; gap: calc(var(--u) * 2); min-width: 0; }
.pl-branch-name .i { color: var(--f-text2); }
.pl-branch-row .pl-check { color: var(--f-blue); }

/* buttons: main.css:64-139 */
.pl-btn { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); border-radius: var(--r); font-size: var(--t-sm); line-height: 1.5; font-weight: 500; border: 0; white-space: nowrap; }
.pl-btn--primary { background: var(--f-blue); color: #ffffff; }
.pl-btn--secondary { background: var(--f-bg2); color: var(--f-text); border: 1px solid var(--f-border); }
.pl-btn--danger { background: var(--f-red); color: #ffffff; }
.pl-btn--sm { font-size: var(--t-xs); line-height: var(--lh-xs); padding: var(--u) calc(var(--u) * 3); gap: calc(var(--u) * 1.5); }
.pl-btn--full { width: 100%; justify-content: center; }
.pl-btn--modal { padding: calc(var(--u) * 1.5) calc(var(--u) * 4); }
/* PullButton.tsx:26 */
.pl-pull { height: calc(var(--u) * 8); }
.pl-pill { font-size: var(--t-xs); line-height: var(--lh-xs); padding: 0 calc(var(--u) * 1.5); border-radius: 9999px; background: var(--f-white-20); color: #ffffff; }

/* context row: ContextRow.tsx:52 */
.pl-context { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.5) calc(var(--u) * 4); border-bottom: 1px solid var(--f-border-50); background: var(--f-bg2-50); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); }
.pl-context .i { flex-shrink: 0; }

/* sections: SectionHeader.tsx:23-54 */
.pl-section--bordered { border-top: 1px solid var(--f-border); }
.pl-section-header { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 10); padding: 0 calc(var(--u) * 4); gap: calc(var(--u) * 3); }
.pl-section-heading { display: flex; align-items: center; min-width: 0; }
.pl-section-toggle { display: flex; align-items: center; margin-left: calc(var(--u) * -1); padding: 0 var(--u); }
.pl-section-toggle .i { color: var(--f-text2); margin-right: var(--u); }
.pl-section-title { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--f-text); }
.pl-dot { margin: 0 calc(var(--u) * 1.5); font-size: var(--t-xs); color: var(--f-text2); }
.pl-section-meta { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); }
.pl-section-actions { display: flex; align-items: center; gap: calc(var(--u) * 3); flex-shrink: 0; font-size: var(--t-xs); line-height: var(--lh-xs); }
.pl-link { color: var(--f-blue); }
.pl-link--muted { color: var(--f-text2); }
.pl-icon-btn { display: inline-flex; padding: var(--u); border-radius: var(--r); color: var(--f-text2); }
.pl-icon-btn--edit { color: var(--f-blue); }
.pl-icon-btn--remove { color: var(--f-red); }

/* change rows: ChangeRow.tsx:35-73 */
.pl-change-list { padding-bottom: calc(var(--u) * 2); }
.pl-change-row { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 4); height: calc(var(--u) * 8); font-size: var(--t-sm); }
.pl-change-row--hover { background: var(--f-bg2); }
.pl-change-row--ro { height: calc(var(--u) * 7); padding: 0; }
.pl-cb { appearance: auto; width: calc(var(--u) * 3.5); height: calc(var(--u) * 3.5); margin: 0; flex-shrink: 0; accent-color: var(--f-blue); }
.pl-glyph { font-family: 'JetBrains Mono', Consolas, monospace; font-size: var(--t-xs); line-height: var(--lh-xs); width: calc(var(--u) * 3); text-align: center; flex-shrink: 0; }
.pl-glyph--add { color: var(--f-green); }
.pl-glyph--mod { color: var(--f-yellow); }
.pl-glyph--del { color: var(--f-red); }
.pl-change-name { flex: 1; min-width: 0; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-collection { color: var(--f-text3); }
.pl-mode { font-size: var(--t-2xs); line-height: var(--lh-2xs); padding: calc(var(--u) * 0.5) var(--u); border-radius: var(--r); background: var(--f-bg3); color: var(--f-text2); flex-shrink: 0; }
.pl-type { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--f-text3); flex-shrink: 0; }

/* commit: CommitSection.tsx:50-75 */
.pl-body { padding: 0 calc(var(--u) * 4) calc(var(--u) * 4); }
.pl-body--pad { padding: calc(var(--u) * 4); }
.pl-input { display: block; width: 100%; background: var(--f-bg2); border: 1px solid var(--f-border); border-radius: var(--r); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); font-size: var(--t-sm); line-height: 1.5; color: var(--f-text); }
.pl-input--placeholder { color: var(--f-text2); }
.pl-input--focus { border-color: var(--f-blue); box-shadow: 0 0 0 1px var(--f-blue); }
.pl-input--area { height: calc(var(--u) * 16); }
.pl-input--select { display: flex; align-items: center; justify-content: space-between; padding-right: calc(var(--u) * 2); }
.pl-input--select .i { color: var(--f-text2); }
.pl-commit-btn { margin-top: calc(var(--u) * 2); }

/* ready to push: ReadyToPush.tsx:39-138 */
.pl-ready { margin-top: calc(var(--u) * 3); border-radius: var(--r-lg); border: 1px solid var(--f-border); }
.pl-ready--flat { margin-top: 0; }
.pl-ready-head { display: flex; align-items: center; padding: 0 calc(var(--u) * 3); height: calc(var(--u) * 9); border-bottom: 1px solid var(--f-border); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--f-text); }
.pl-ready-head .pl-section-meta { font-weight: 400; }
.pl-ready-row { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 3); height: calc(var(--u) * 9); }
.pl-ready-item + .pl-ready-item { border-top: 1px solid var(--f-border-60); }
.pl-ready-expand { display: inline-flex; padding: calc(var(--u) * 0.5); border-radius: var(--r); color: var(--f-text2); flex-shrink: 0; }
.pl-ready-index { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text3); flex-shrink: 0; }
.pl-ready-msg { flex: 1; min-width: 0; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ready-count { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--f-text2); flex-shrink: 0; }
.pl-ready-time { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--f-text3); flex-shrink: 0; }
.pl-ready-trash { display: inline-flex; padding: var(--u); border-radius: var(--r); color: var(--f-red); flex-shrink: 0; }
.pl-ready-items { padding: 0 calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 9); }
.pl-ready-foot { padding: calc(var(--u) * 3); border-top: 1px solid var(--f-border); }

/* inline confirm: InlineConfirm.tsx:45-69 */
.pl-confirm { display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(var(--u) * 3); row-gap: calc(var(--u) * 2); }
.pl-confirm-msg { flex: 1; min-width: calc(var(--pl-rem) * 10); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text); }
.pl-confirm-detail { color: var(--f-text2); }
.pl-confirm-actions { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-shrink: 0; }

/* mapping: MappingSection.tsx:100-110, MappingTree.tsx:20-123 */
.pl-map-body { padding: 0 calc(var(--u) * 4) calc(var(--u) * 3); }
.pl-map-list > * + * { margin-top: calc(var(--u) * 0.5); }
.pl-map-row { display: flex; align-items: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 8); border-radius: var(--r); padding-left: calc(var(--u) * 2); }
.pl-map-row--depth1 { padding-left: calc(var(--u) * 6); }
.pl-map-row--hover { background: var(--f-bg2); }
.pl-map-row .i { color: var(--f-text2); }
.pl-map-row .pl-map-file { margin-left: calc(var(--u) * 6); }
.pl-map-name { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-map-row .pl-map-arrow { color: var(--f-text3); }
.pl-map-target { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-map-actions { display: flex; align-items: center; gap: calc(var(--u) * 0.5); padding-right: var(--u); margin-left: auto; flex-shrink: 0; }
.pl-map-actions .i { color: inherit; }
.pl-nudge { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 4) calc(var(--u) * 2); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); }

/* target editor: TargetEditorModal.tsx:29-181 */
.pl-modal { width: calc(var(--pl-rem) * 26); padding: calc(var(--u) * 4); background: var(--f-bg2); border-radius: var(--r-lg); border: 1px solid var(--f-border); box-shadow: var(--shadow-xl); }
.pl-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--u) * 4); }
.pl-modal-title { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-modal-file { margin-left: calc(var(--u) * 2); font-weight: 400; color: var(--f-text2); }
.pl-modal-head .i { color: var(--f-text2); }
.pl-field { margin-bottom: calc(var(--u) * 3); }
.pl-field-label { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); margin-bottom: calc(var(--u) * 2); }
.pl-field-label--tight { margin-bottom: var(--u); }
.pl-options { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.pl-option { display: flex; align-items: center; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); border-radius: var(--r); border: 1px solid var(--f-border); background: var(--f-bg); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--f-text); }
.pl-option--selected { border-color: var(--f-blue); background: var(--accent-tint); color: var(--f-blue); }
.pl-hint { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--f-text2); margin-top: var(--u); }
.pl-modal-foot { display: flex; justify-content: flex-end; gap: calc(var(--u) * 2); }

/* pull request: PullRequestPanel.tsx:104-156 */
.pl-pr { padding: 0 calc(var(--u) * 4) calc(var(--u) * 4); }
.pl-pr-card { padding: calc(var(--u) * 3); background: var(--f-bg2); border-radius: var(--r-lg); }
.pl-pr-card > * + * { margin-top: calc(var(--u) * 3); }
.pl-pr-head { display: flex; align-items: center; justify-content: space-between; }
.pl-pr-title { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--f-text); }
.pl-pr-head .i { color: var(--f-text2); }
.pl-pr-card .pl-input { background: var(--f-bg2); }
.pl-pr-label { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); margin-bottom: var(--u); }
.pl-pr-open { display: flex; align-items: flex-start; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3); background: var(--f-green-10); border: 1px solid var(--f-green-30); border-radius: var(--r-lg); }
.pl-pr-open .i-20 { color: var(--f-green); margin-top: calc(var(--u) * 0.5); }
.pl-pr-open-title { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--f-green); }
.pl-pr-open-sub { font-size: var(--t-2xs); line-height: var(--lh-2xs); color: var(--f-text2); margin-top: calc(var(--u) * 0.5); }
.pl-pr-view { display: flex; align-items: center; gap: var(--u); font-size: var(--t-xs); color: var(--f-blue); flex-shrink: 0; }

/* toast: ToastContainer.tsx:71-100 */
.pl-toast { display: flex; align-items: flex-start; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: var(--r-md); border: 1px solid var(--f-green-30); box-shadow: var(--shadow-lg); background: var(--f-bg2); color: var(--f-text); width: calc(var(--pl-rem) * 28); }
.pl-toast--info { border-color: var(--accent-ring); }
.pl-toast-icon { margin-top: calc(var(--u) * 0.5); color: var(--f-green); display: inline-flex; }
.pl-toast--info .pl-toast-icon { color: var(--f-blue); }
.pl-toast-msg { flex: 1; font-size: var(--t-xs); line-height: var(--lh-xs); }
.pl-toast-action { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--f-blue); padding: 0 var(--u); margin: calc(var(--u) * -0.5) 0; flex-shrink: 0; }
.pl-toast-x { color: var(--f-text2); display: inline-flex; flex-shrink: 0; }

/* connect: ConnectRepositoryView.tsx, OwnerSelect.tsx, RepoCombobox.tsx, CreateRepoFields.tsx */
.pl-connect-head { padding: calc(var(--u) * 3); border-bottom: 1px solid var(--f-border); }
.pl-connect-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--u); }
.pl-connect-title { display: flex; align-items: center; gap: calc(var(--u) * 2); font-size: var(--pl-rem); line-height: 1.5; font-weight: 500; }
.pl-connect-title .i { color: var(--f-text2); }
.pl-connect-user { display: flex; align-items: center; gap: calc(var(--u) * 2); font-size: var(--t-xs); color: var(--f-text2); }
.pl-connect-user .pl-avatar { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.pl-connect-user .pl-avatar .i { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.pl-connect-sub { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); }
.pl-connect-body { padding: calc(var(--u) * 3); }
.pl-connect-body > * + * { margin-top: calc(var(--u) * 4); }
.pl-label { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); margin-bottom: var(--u); }
.pl-owner { display: flex; align-items: center; justify-content: space-between; }
.pl-owner-inner { display: flex; align-items: center; gap: calc(var(--u) * 2); min-width: 0; }
.pl-owner .pl-avatar { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
.pl-owner .i-18 { color: var(--f-text2); }
.pl-combobox { position: relative; }
.pl-listbox { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--u); background: var(--f-bg); border: 1px solid var(--f-border); border-radius: var(--r); box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden; }
.pl-listbox--static { position: static; }
.pl-listbox-option { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--f-text); }
.pl-listbox-option--active { background: var(--f-bg2); }
.pl-listbox-option .i { color: var(--f-text2); }
.pl-listbox-create { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: var(--t-sm); line-height: var(--lh-sm); border-top: 1px solid var(--f-border); background: var(--f-bg); color: var(--f-blue); }
.pl-connect-foot { padding: calc(var(--u) * 3); border-top: 1px solid var(--f-border); }
.pl-create > * + * { margin-top: calc(var(--u) * 3); }
.pl-create-head { display: flex; align-items: center; justify-content: space-between; }
.pl-create-title { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--f-text); }
.pl-create-cancel { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-blue); }
.pl-segments { display: flex; border-radius: var(--r); border: 1px solid var(--f-border); overflow: hidden; }
.pl-segment { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--f-text2); }
.pl-segment + .pl-segment { border-left: 1px solid var(--f-border); }
.pl-segment--on { background: var(--accent-tint); color: var(--f-blue); }
.pl-willcreate { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--f-text2); }
.pl-willcreate strong { color: var(--f-text); font-weight: 500; }