/* Meltemi Diagrams playground. The canvas's stylesheet (canvas.css) reads the --vscode-* colours,
   which this page defines for its light and dark themes. */

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/@fontsource/inter/files/inter-latin-400-normal.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;
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/@fontsource/inter/files/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/@fontsource/inter/files/inter-latin-600-normal.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;
}
@font-face {
  font-family: "Cascadia Mono";
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/@fontsource/cascadia-mono/files/cascadia-mono-latin-400-normal.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;
}
@font-face {
  font-family: "Cascadia Mono";
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/@fontsource/cascadia-mono/files/cascadia-mono-latin-ext-400-normal.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  color-scheme: light;
  --pg-bg: #ffffff;
  --pg-surface: #f6f7f9;
  --pg-surface-2: #eceef2;
  --pg-border: #d5d9e0;
  --pg-fg: #1c2330;
  --pg-muted: #5b6577;
  --pg-accent: #2563eb;
  --pg-accent-fg: #ffffff;
  --pg-accent-soft: #dbe7fe;
  --pg-focus: #2563eb;
  --pg-error: #c4291c;
  --pg-warning: #9a6200;
  --pg-info: #2563eb;
  --pg-shadow: 0 8px 28px rgba(16, 24, 40, 0.18);
  --pg-code-bg: #fbfcfd;
  --pg-gutter: #8a93a3;
  --hl-keyword: #7c3aed;
  --hl-type: #0f766e;
  --hl-property: #9a3412;
  --hl-constant: #0369a1;
  --hl-string: #15803d;
  --hl-number: #b45309;
  --hl-comment: #6b7280;
  --hl-arrow: #be185d;
  --hl-id: #1d4ed8;
  --hl-group: #0e7490;
  --hl-relation: #7c2d12;
  --pg-motion-fast: 120ms;
  --pg-motion: 180ms;
  --pg-motion-panel: 150ms;
  --pg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pg-ui-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --pg-code-font: "Cascadia Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --vscode-font-family: var(--pg-ui-font);
  --vscode-font-size: 13px;
  --vscode-foreground: var(--pg-fg);
  --vscode-descriptionForeground: var(--pg-muted);
  --vscode-editor-background: var(--pg-bg);
  --vscode-editor-foreground: var(--pg-fg);
  --vscode-editorWidget-background: var(--pg-surface);
  --vscode-sideBar-background: var(--pg-surface);
  --vscode-panel-border: var(--pg-border);
  --vscode-widget-border: var(--pg-border);
  --vscode-focusBorder: var(--pg-focus);
  --vscode-editorInfo-foreground: #e0398c;
  --vscode-editorCursor-foreground: var(--pg-fg);
  --vscode-input-background: var(--pg-bg);
  --vscode-input-foreground: var(--pg-fg);
  --vscode-input-border: var(--pg-border);
  --vscode-dropdown-background: var(--pg-bg);
  --vscode-dropdown-foreground: var(--pg-fg);
  --vscode-dropdown-border: var(--pg-border);
  --vscode-button-background: var(--pg-accent);
  --vscode-button-foreground: var(--pg-accent-fg);
  --vscode-button-border: transparent;
  --vscode-button-secondaryBackground: var(--pg-surface-2);
  --vscode-button-secondaryForeground: var(--pg-fg);
  --vscode-toolbar-hoverBackground: var(--pg-surface-2);
  --vscode-toolbar-activeBackground: var(--pg-accent-soft);
  --vscode-badge-background: var(--pg-accent);
  --vscode-badge-foreground: var(--pg-accent-fg);
  --vscode-menu-background: var(--pg-bg);
  --vscode-menu-foreground: var(--pg-fg);
  --vscode-menu-border: var(--pg-border);
  --vscode-menu-selectionBackground: var(--pg-accent);
  --vscode-menu-selectionForeground: var(--pg-accent-fg);
  --vscode-menu-separatorBackground: var(--pg-border);
  --vscode-list-activeSelectionBackground: var(--pg-accent);
  --vscode-list-activeSelectionForeground: var(--pg-accent-fg);
  --vscode-inputValidation-warningBackground: #fdf3d8;
  --vscode-inputValidation-warningForeground: #4a3500;
  --vscode-inputValidation-warningBorder: #c99b16;
  --vscode-inputValidation-errorBorder: var(--pg-error);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pg-bg: #14171d;
    --pg-surface: #1b1f27;
    --pg-surface-2: #262b35;
    --pg-border: #343a46;
    --pg-fg: #e4e8ef;
    --pg-muted: #9aa4b5;
    --pg-accent: #4f8cff;
    --pg-accent-fg: #0b1020;
    --pg-accent-soft: #1f335c;
    --pg-focus: #6ea2ff;
    --pg-error: #ff7a6b;
    --pg-warning: #e8b54a;
    --pg-info: #6ea2ff;
    --pg-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --pg-code-bg: #11141a;
    --pg-gutter: #6c7586;
    --hl-keyword: #c4a5ff;
    --hl-type: #5eead4;
    --hl-property: #fdba74;
    --hl-constant: #7dd3fc;
    --hl-string: #86efac;
    --hl-number: #fcd34d;
    --hl-comment: #8b93a3;
    --hl-arrow: #f9a8d4;
    --hl-id: #93c5fd;
    --hl-group: #67e8f9;
    --hl-relation: #fdba74;
    --vscode-inputValidation-warningBackground: #3b2f10;
    --vscode-inputValidation-warningForeground: #f6e3b4;
    --vscode-inputValidation-warningBorder: #a17d1c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --pg-bg: #14171d;
  --pg-surface: #1b1f27;
  --pg-surface-2: #262b35;
  --pg-border: #343a46;
  --pg-fg: #e4e8ef;
  --pg-muted: #9aa4b5;
  --pg-accent: #4f8cff;
  --pg-accent-fg: #0b1020;
  --pg-accent-soft: #1f335c;
  --pg-focus: #6ea2ff;
  --pg-error: #ff7a6b;
  --pg-warning: #e8b54a;
  --pg-info: #6ea2ff;
  --pg-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --pg-code-bg: #11141a;
  --pg-gutter: #6c7586;
  --hl-keyword: #c4a5ff;
  --hl-type: #5eead4;
  --hl-property: #fdba74;
  --hl-constant: #7dd3fc;
  --hl-string: #86efac;
  --hl-number: #fcd34d;
  --hl-comment: #8b93a3;
  --hl-arrow: #f9a8d4;
  --hl-id: #93c5fd;
  --hl-group: #67e8f9;
  --hl-relation: #fdba74;
  --vscode-inputValidation-warningBackground: #3b2f10;
  --vscode-inputValidation-warningForeground: #f6e3b4;
  --vscode-inputValidation-warningBorder: #a17d1c;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--pg-bg);
  color: var(--pg-fg);
  font-family: var(--pg-ui-font);
  font-size: 13px;
}

body {
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#playground.loading {
  display: grid;
  place-items: center;
  height: 100%;
}

.boot {
  color: var(--pg-muted);
}

/* Shell ------------------------------------------------------------------------------------ */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "guest" "tabs" "main" "status";
  height: 100vh;
  height: 100dvh;
}

.shell > .topbar {
  grid-area: top;
}

.shell > .guest-bar {
  grid-area: guest;
}

.shell > .view-tabs {
  grid-area: tabs;
}

.shell > .panes {
  grid-area: main;
}

.shell > .statusbar {
  grid-area: status;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--pg-border);
  background: var(--pg-surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.brand-name {
  font-weight: 600;
  font-size: 14px;
}

.brand-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pg-accent-soft);
  color: var(--pg-fg);
  font-size: 11px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.actions .separator {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--pg-border);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  min-width: 30px;
  justify-content: center;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.button.with-text {
  padding: 4px 10px;
}

.button svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.button:hover:not(:disabled) {
  background: var(--pg-surface-2);
}

.button:disabled {
  opacity: 0.45;
  cursor: default;
}

.button.primary {
  background: var(--pg-accent);
  color: var(--pg-accent-fg);
}

.button.primary:hover:not(:disabled) {
  background: var(--pg-accent);
  filter: brightness(1.08);
}

:focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: 1px;
}

.view-tabs {
  display: none;
}

.panes {
  --explorer: 260px;
  --split: 0.42;
  display: grid;
  grid-template-columns:
    var(--explorer) 1px calc((100% - var(--explorer) - 7px) * var(--split))
    6px minmax(0, 1fr);
  min-height: 0;
  transition: grid-template-columns var(--pg-motion) var(--pg-ease);
}

/* While an edge is dragged the columns follow the pointer, with no transition. */
html.resizing,
html.resizing * {
  cursor: col-resize !important;
  user-select: none;
}

html.resizing .panes {
  transition: none;
}

.pane {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.divider {
  background: var(--pg-border);
  cursor: col-resize;
  touch-action: none;
}

.divider:hover,
.divider:focus-visible {
  background: var(--pg-accent);
}

.canvas-pane #app {
  position: absolute;
  inset: 0;
  height: auto;
}

.statusbar {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 24px;
  padding: 2px 12px;
  border-top: 1px solid var(--pg-border);
  background: var(--pg-surface);
  color: var(--pg-muted);
  font-size: 12px;
}

.status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--pg-fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.version {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow screens: the code and the canvas as tabs. */
.shell.narrow .view-tabs {
  display: flex;
  border-bottom: 1px solid var(--pg-border);
  background: var(--pg-surface);
}

.view-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--pg-muted);
  font: inherit;
  cursor: pointer;
}

.view-tab svg {
  width: 16px;
  height: 16px;
}

.view-tab[aria-selected="true"] {
  border-bottom-color: var(--pg-accent);
  color: var(--pg-fg);
  font-weight: 600;
}

.shell.narrow .panes {
  grid-template-columns: minmax(0, 1fr);
}

.shell.narrow .divider {
  display: none;
}

.shell.narrow[data-view="code"] .canvas-pane,
.shell.narrow[data-view="canvas"] .code-pane {
  display: none;
}

/*
 * A narrow header is one row where it fits: the logo, the buttons' pictures, and More, which holds
 * the theme, About and the language. More is only there.
 */
.shell:not(.narrow) .actions > .more {
  display: none;
}

.shell.narrow .topbar {
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px;
}

.shell.narrow .actions {
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  margin-left: 0;
}

.shell.narrow .actions .separator,
.shell.narrow .actions > .in-more {
  display: none;
}

/* Buttons whose words are hidden are as narrow as the others. */
.shell.narrow .actions > .with-text,
.shell.narrow .actions > .pg-menu-wrapper > .with-text,
.shell.narrow .actions > .sign-in {
  padding: 4px 6px;
}

/* The chevron of a menu's button: its picture alone says it opens a menu. */
.shell.narrow .actions > .pg-menu-wrapper > .with-text > svg:last-child {
  display: none;
}

/* Labels of buttons stay for screen readers when the screen has no room for them. */
.shell.narrow .brand-name,
.shell.narrow .brand-tag,
.shell.narrow .sign-in > span,
.shell.narrow .actions > .pg-menu-wrapper > .with-text > span,
.shell.narrow .actions > .with-text > span,
.shell.narrow .cloud-actions > .with-text > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shell.narrow .privacy {
  display: none;
}

/*
 * The canvas's toolbar on a narrow screen: one row that scrolls sideways, with a soft shadow at an
 * edge where more of its tools lie beyond (its menus open below it, outside the row).
 */
.shell.narrow #app .toolbar {
  --pg-toolbar-shade: color-mix(in srgb, var(--mdg-fg) 20%, transparent);
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background:
    linear-gradient(to right, var(--mdg-panel) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--mdg-panel) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--pg-toolbar-shade), transparent) left / 10px 100%
      no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--pg-toolbar-shade), transparent) right / 10px
      100% no-repeat scroll,
    var(--mdg-panel);
}

.shell.narrow #app .toolbar::-webkit-scrollbar {
  display: none;
}

.shell.narrow #app .toolbar > * {
  flex: none;
}

/* Menus -------------------------------------------------------------------------------------- */

.pg-menu-wrapper {
  position: relative;
}

.pg-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 4px;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  background: var(--pg-bg);
  box-shadow: var(--pg-shadow);
}

.pg-menu[hidden] {
  display: none;
}

.pg-menu {
  animation: pg-rise var(--pg-motion-fast) var(--pg-ease);
}

.pg-menu.context {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  min-width: 220px;
}

.pg-menu.context.leaving {
  pointer-events: none;
  animation: pg-sink 100ms var(--pg-ease) forwards;
}

.pg-menu.context .pg-menu-item {
  padding: 5px 10px;
}

.pg-menu.context .pg-menu-label {
  display: flex;
  align-items: center;
  width: 100%;
  font-weight: 400;
}

.pg-menu-item.danger {
  color: var(--pg-error);
}

.pg-menu-keys {
  margin-left: auto;
  padding-left: 18px;
  color: var(--pg-muted);
  font: inherit;
  font-size: 11px;
}

/* A menu that would leave the page on the right opens from its button's end instead. */
.pg-menu.end {
  right: 0;
  left: auto;
}

.pg-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pg-menu-item:hover:not(:disabled),
.pg-menu-item:focus {
  background: var(--pg-accent-soft);
  outline: none;
}

.pg-menu-item:disabled {
  opacity: 0.5;
  cursor: default;
}

.pg-menu-label {
  font-weight: 600;
}

/* Choices among entries, such as the languages, mark the chosen one. */
.pg-menu-label svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

.pg-menu-item[aria-checked="false"] .pg-menu-label svg {
  visibility: hidden;
}

.pg-menu-item[role="menuitemradio"] .pg-menu-detail {
  padding-left: 20px;
}

.pg-menu-detail {
  color: var(--pg-muted);
  font-size: 12px;
}

.pg-menu-separator {
  height: 1px;
  margin: 4px 6px;
  background: var(--pg-border);
}

/* Account ------------------------------------------------------------------------------------ */

/* The "Sign in" link looks like the buttons beside it, and keeps its words on narrow screens. */
a.button {
  text-decoration: none;
}

.sign-in {
  padding: 4px 10px;
}

.account-button {
  padding: 4px 8px;
}

.account-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pg-surface-2);
}

.account-avatar.outline {
  color: var(--pg-muted);
}

.account-name {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On a narrow screen the account is its picture; the button's name and its menu say who. */
.shell.narrow .account-name {
  display: none;
}

/* Entries of a menu that are a link or the button of a form. */
a.pg-menu-item {
  box-sizing: border-box;
  text-decoration: none;
}

.pg-menu form {
  margin: 0;
}

/* What the account holds, under the entries of the account menu: the words carry the numbers, and
   a thin meter beside each is only for the eye. */
.account-usage {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 10px 6px;
  border-top: 1px solid var(--pg-border);
}

.account-usage[hidden] {
  display: none;
}

.usage-row {
  display: grid;
  gap: 4px;
}

.usage-text {
  color: var(--pg-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.usage-meter {
  appearance: none;
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--pg-surface-2);
}

.usage-meter::-webkit-meter-bar {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--pg-surface-2);
}

.usage-meter::-webkit-meter-optimum-value,
.usage-meter::-webkit-meter-suboptimum-value,
.usage-meter::-webkit-meter-even-less-good-value {
  border-radius: 2px;
  background: var(--pg-accent);
}

.usage-meter::-moz-meter-bar {
  border-radius: 2px;
  background: var(--pg-accent);
}

.usage-meter.full::-webkit-meter-optimum-value,
.usage-meter.full::-webkit-meter-suboptimum-value,
.usage-meter.full::-webkit-meter-even-less-good-value {
  background: var(--pg-warning);
}

.usage-meter.full::-moz-meter-bar {
  background: var(--pg-warning);
}

/* Code pane --------------------------------------------------------------------------------- */

.code-pane {
  display: flex;
  flex-direction: column;
  background: var(--pg-code-bg);
}

/* The open file's place in the project, above the code. */
.code-path {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 12px;
  overflow: hidden;
  border-bottom: 1px solid var(--pg-border);
  background: var(--pg-surface);
  color: var(--pg-muted);
  font-size: 12px;
  white-space: nowrap;
}

.code-path-sep {
  opacity: 0.6;
}

.code-path-file {
  overflow: hidden;
  color: var(--pg-fg);
  font-weight: 600;
  text-overflow: ellipsis;
}

/* The bar's button, which folds the code pane, keeps its right end. */
.code-path > .button {
  flex: none;
  margin-left: auto;
}

/*
 * The code pane folded to a rail, as the explorer folds: its column shrinks to the rail's width
 * with the grid's transition, the divider keeps its column unseen so the canvas's column stays
 * the last, the bar, the code and the problems fade out and the rail fades in after them.
 */
.shell[data-code="rail"]:not(.narrow) .panes {
  grid-template-columns: var(--explorer) 1px 36px 6px minmax(0, 1fr);
}

.code-pane[data-collapsed="true"] {
  overflow: hidden;
}

.code-pane > :not(.code-rail) {
  transition: opacity var(--pg-motion-fast) var(--pg-ease);
}

.code-pane[data-collapsed="true"] > :not(.code-rail) {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--pg-motion-fast) var(--pg-ease),
    visibility 0s linear var(--pg-motion-fast);
}

.code-rail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--pg-motion-fast) var(--pg-ease);
}

.code-pane[data-collapsed="true"] .code-rail {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--pg-motion) var(--pg-ease) var(--pg-motion-fast);
}

/* The open file's error count under the rail's button, as the explorer's badges count errors. */
.code-rail-problems {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pg-error) 16%, transparent);
  color: var(--pg-error);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.code-rail-problems[hidden] {
  display: none;
}

.divider[data-collapsed="true"] {
  visibility: hidden;
}

/* Explorer ------------------------------------------------------------------------------------ */

.explorer {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--pg-surface);
}

.explorer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 180px;
  min-height: 0;
  opacity: 1;
  transition: opacity var(--pg-motion-fast) var(--pg-ease);
}

.explorer[data-collapsed="true"] .explorer-body {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--pg-motion-fast) var(--pg-ease),
    visibility 0s linear var(--pg-motion-fast);
}

/* The rail a hidden explorer leaves: one button that shows it again. */
.explorer-rail {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--pg-motion-fast) var(--pg-ease);
}

.explorer[data-collapsed="true"] .explorer-rail {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--pg-motion) var(--pg-ease) var(--pg-motion-fast);
}

.explorer-edge {
  position: relative;
  background: var(--pg-border);
  cursor: col-resize;
  touch-action: none;
  transition: background-color var(--pg-motion-fast) var(--pg-ease);
}

/* A grip wider than the line it draws. */
.explorer-edge::before {
  content: "";
  position: absolute;
  inset: 0 -3px;
}

.explorer-edge:hover,
.explorer-edge:focus-visible {
  background: var(--pg-accent);
}

.explorer-edge[data-collapsed="true"] {
  visibility: hidden;
}

.explorer-head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 6px 8px;
  border-bottom: 1px solid var(--pg-border);
}

.explorer-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 2px 14px;
}

.explorer-bar-title {
  flex: 1;
  color: var(--pg-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.explorer-bar .button,
.explorer-head > .button {
  min-width: 26px;
  min-height: 26px;
  padding: 3px;
  color: var(--pg-muted);
}

.explorer-bar .button:hover:not(:disabled),
.explorer-head > .button:hover:not(:disabled) {
  color: var(--pg-fg);
}

.explorer-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.explorer-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 14px;
  color: var(--pg-muted);
}

.explorer-empty[hidden] {
  display: none;
}

.explorer-empty p {
  margin: 0;
}

.explorer-empty .button {
  border-color: var(--pg-border);
  color: var(--pg-fg);
}

.explorer-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--pg-border);
  font-size: 12px;
}

.explorer-hidden {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--pg-warning);
}

.explorer-hidden[hidden] {
  display: none;
}

.explorer-hidden svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.explorer-hidden-text {
  flex: 1;
  min-width: 0;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pg-accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* A switch: the checkbox stays for the keyboard and assistive technology, the track shows it. */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pg-muted);
  cursor: pointer;
}

.switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-track {
  position: relative;
  flex: none;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--pg-border);
  transition: background-color var(--pg-motion) var(--pg-ease);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pg-bg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.3);
  transition: transform var(--pg-motion) var(--pg-ease);
}

.switch-input:checked + .switch-track {
  background: var(--pg-accent);
}

.switch-input:checked + .switch-track::after {
  transform: translateX(12px);
}

.switch-input:focus-visible + .switch-track {
  outline: 2px solid var(--pg-focus);
  outline-offset: 2px;
}

.switch:hover {
  color: var(--pg-fg);
}

/* The switcher: the open project and where it lives. */
.switcher {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.switcher-button {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--pg-motion-fast) var(--pg-ease),
    border-color var(--pg-motion-fast) var(--pg-ease);
}

.switcher-button:hover,
.switcher-button[aria-expanded="true"] {
  border-color: var(--pg-border);
  background: var(--pg-bg);
}

.switcher-button > svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--pg-muted);
  transition: transform var(--pg-motion) var(--pg-ease);
}

.switcher-button[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

.switcher-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--pg-accent-soft);
  color: var(--pg-accent);
}

.switcher-icon svg {
  width: 16px;
  height: 16px;
}

.switcher-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.switcher-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher-where {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--pg-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A dot that says how the project is kept: here, saved, saving, or not reachable. */
.switcher-where::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pg-muted);
}

.switcher-where[data-state="connected"]::before {
  background: #1f9d55;
}

.switcher-where[data-state="saving"]::before,
.switcher-where[data-state="connecting"]::before {
  background: var(--pg-accent);
  animation: pg-pulse 1.2s ease-in-out infinite;
}

.switcher-where[data-state="offline"]::before,
.switcher-where[data-state="reconnecting"]::before,
.switcher-where[data-state="full"]::before {
  background: var(--pg-warning);
}

.switcher-where[data-state="gone"]::before {
  background: var(--pg-error);
}

@keyframes pg-pulse {
  50% {
    opacity: 0.35;
  }
}

.switcher-rename {
  flex: none;
  min-width: 26px;
  min-height: 26px;
  padding: 3px;
  color: var(--pg-muted);
}

/* The tree ----------------------------------------------------------------------------------- */

.tree,
.tree-group {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree {
  flex: 1;
  padding: 2px 0 12px;
  outline: none;
}

.tree.drop-target {
  outline: 1px dashed var(--pg-accent);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--pg-accent-soft) 45%, transparent);
}

.tree-item {
  outline: none;
}

.tree-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 6px 0 calc(8px + var(--level, 0) * 14px);
  border-radius: 0;
  color: var(--pg-fg);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--pg-motion-fast) var(--pg-ease);
}

.tree-row:hover {
  background: var(--pg-surface-2);
}

.tree-item[aria-selected="true"] > .tree-row {
  background: var(--pg-accent-soft);
}

.tree-item:focus-visible > .tree-row {
  box-shadow: inset 0 0 0 1px var(--pg-focus);
}

.tree-item.current > .tree-row .tree-name {
  font-weight: 600;
}

/* The diagram the canvas shows, and the open file, carry the accent on their picture. */
.tree-item.shown > .tree-row .tree-icon,
.tree-item.current > .tree-row .tree-icon {
  color: var(--pg-accent);
}

.tree-twist {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--pg-muted);
}

.tree-twist svg {
  width: 12px;
  height: 12px;
  transition: transform var(--pg-motion) var(--pg-ease);
}

.tree-item.open > .tree-row .tree-twist svg {
  transform: rotate(90deg);
}

.tree-icon {
  display: inline-flex;
  flex: none;
  color: var(--pg-muted);
}

.tree-icon svg {
  width: 16px;
  height: 16px;
}

.tree-icon[data-icon="folder"] {
  color: #c08a2c;
}

.tree-icon[data-icon="settings"] {
  color: var(--pg-muted);
}

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

.tree-badge {
  flex: none;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.tree-badge[hidden] {
  display: none;
}

.tree-badge.is-error {
  background: color-mix(in srgb, var(--pg-error) 16%, transparent);
  color: var(--pg-error);
}

.tree-badge.is-warning {
  background: color-mix(in srgb, var(--pg-warning) 18%, transparent);
  color: var(--pg-warning);
}

.tree-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--pg-muted);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--pg-motion-fast) var(--pg-ease),
    background-color var(--pg-motion-fast) var(--pg-ease);
}

.tree-more svg {
  width: 14px;
  height: 14px;
}

.tree-row:hover > .tree-more,
.tree-item:focus-visible > .tree-row > .tree-more,
.tree-item[aria-selected="true"] > .tree-row > .tree-more {
  opacity: 1;
}

.tree-more:hover {
  background: var(--pg-border);
  color: var(--pg-fg);
}

.explorer[data-readonly="true"] .tree-more {
  display: none;
}

/* A folder opens by its height, from nothing to its rows. */
.tree-group-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--pg-motion) var(--pg-ease);
}

.tree-item.open > .tree-group-wrap {
  grid-template-rows: 1fr;
}

.tree-group {
  min-height: 0;
  overflow: hidden;
}

.tree-item.leaving {
  overflow: hidden;
  opacity: 0;
  transition:
    height 150ms var(--pg-ease),
    opacity 150ms var(--pg-ease);
}

/* A row just made, renamed or moved draws the eye once. */
.tree-item.flash > .tree-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pg-accent);
  opacity: 0;
  pointer-events: none;
  animation: tree-flash 600ms var(--pg-ease);
}

@keyframes tree-flash {
  20% {
    opacity: 0.22;
  }
  100% {
    opacity: 0;
  }
}

.tree-item.drop-target > .tree-row {
  background: var(--pg-accent-soft);
  box-shadow: inset 0 0 0 1px var(--pg-accent);
}

.tree-item.dragging > .tree-row {
  opacity: 0.45;
}

/* What the pointer carries while a row is dragged; drawn out of sight for the browser to copy. */
.tree-drag-chip {
  position: fixed;
  top: -200px;
  left: -200px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--pg-border);
  border-radius: 999px;
  background: var(--pg-bg);
  color: var(--pg-fg);
  box-shadow: var(--pg-shadow);
  font: 12px var(--pg-ui-font);
}

.tree-drag-chip svg {
  width: 14px;
  height: 14px;
}

.tree-drag-chip .count {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pg-accent);
  color: var(--pg-accent-fg);
  font-size: 11px;
}

.tree-rename {
  width: 100%;
  min-width: 0;
  height: 22px;
  padding: 0 4px;
  border: 1px solid var(--pg-focus);
  border-radius: 4px;
  background: var(--pg-bg);
  color: var(--pg-fg);
  font: inherit;
  outline: none;
}

.tree-rename[aria-invalid="true"] {
  border-color: var(--pg-error);
}

.tree-rename-problem {
  position: absolute;
  top: calc(100% - 1px);
  right: 6px;
  left: calc(8px + var(--level, 0) * 14px + 36px);
  z-index: 2;
  padding: 4px 8px;
  border: 1px solid var(--pg-error);
  border-radius: 0 0 6px 6px;
  background: var(--pg-bg);
  color: var(--pg-error);
  font-size: 12px;
  white-space: normal;
  cursor: default;
}

.tree-rename-problem[hidden] {
  display: none;
}

/* Narrow screens: the explorer is the Files tab, never a rail. */
.shell.narrow .explorer-edge {
  display: none;
}

.shell.narrow[data-view="code"] .explorer,
.shell.narrow[data-view="canvas"] .explorer,
.shell.narrow[data-view="files"] .code-pane,
.shell.narrow[data-view="files"] .canvas-pane {
  display: none;
}

.shell.narrow .explorer .explorer-body {
  visibility: visible;
  opacity: 1;
}

.shell.narrow .explorer .explorer-rail,
.shell.narrow .explorer-head > .button {
  display: none;
}

/* Narrow screens: the code is the Code tab, whole, never a rail. */
.shell.narrow .code-rail,
.shell.narrow .code-path > .button {
  display: none;
}

.shell.narrow .code-pane[data-collapsed="true"] {
  overflow: visible;
}

.shell.narrow .code-pane[data-collapsed="true"] > :not(.code-rail) {
  visibility: visible;
  opacity: 1;
}

/* The switcher's panel ------------------------------------------------------------------------ */

.switcher-panel {
  position: fixed;
  z-index: 45;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--pg-border);
  border-radius: 12px;
  background: var(--pg-bg);
  box-shadow: var(--pg-shadow);
  animation: pg-rise var(--pg-motion-panel) var(--pg-ease);
}

.switcher-panel.leaving {
  pointer-events: none;
  animation: pg-sink 100ms var(--pg-ease) forwards;
}

@keyframes pg-rise {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.99);
  }
}

@keyframes pg-sink {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.switcher-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 4px 16px;
}

.switcher-title {
  margin: 0;
  font-size: 14px;
}

.switcher-close {
  min-width: 26px;
  min-height: 26px;
  padding: 3px;
}

.switcher-panel-body {
  overflow: auto;
  padding: 0 8px 10px;
}

.panel-actions {
  display: grid;
  gap: 1px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--pg-border);
}

.panel-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--pg-motion-fast) var(--pg-ease);
}

.panel-action:hover,
.panel-action:focus-visible {
  background: var(--pg-surface-2);
}

.panel-action svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--pg-muted);
}

.panel-action-label {
  flex: 1;
}

/* Show all files, as the same switch as the explorer's footer. */
.panel-action.toggle[aria-pressed="true"] .switch-track {
  background: var(--pg-accent);
}

.panel-action.toggle[aria-pressed="true"] .switch-track::after {
  transform: translateX(12px);
}

.panel-section {
  padding-top: 8px;
}

.panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 8px 6px;
  color: var(--pg-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-count {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.panel-note {
  margin: 0 8px 8px;
  color: var(--pg-muted);
  line-height: 1.45;
}

.panel-section > .sign-in {
  margin: 0 8px 4px;
  border-color: var(--pg-border);
}

.panel-filter {
  box-sizing: border-box;
  width: calc(100% - 16px);
  margin: 0 8px 6px;
  min-height: 30px;
  padding: 2px 8px;
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  background: var(--pg-bg);
  color: var(--pg-fg);
  font: inherit;
}

.panel-filter[hidden] {
  display: none;
}

.panel-section .projects-status,
.panel-section .field-problem,
.panel-section > .field-hint {
  margin: 4px 8px;
}

.panel-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border-radius: 8px;
  transition: background-color var(--pg-motion-fast) var(--pg-ease);
}

.panel-row:hover,
.panel-row:focus-within {
  background: var(--pg-surface-2);
}

.panel-row.previous {
  gap: 10px;
  padding: 4px 6px 4px 8px;
}

.panel-row.previous .button {
  border-color: var(--pg-border);
}

.panel-project {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.panel-project:disabled {
  opacity: 0.6;
  cursor: default;
}

.panel-project[aria-current="true"] .panel-project-name {
  color: var(--pg-accent);
}

.panel-thumb {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  background: var(--pg-surface);
  object-fit: contain;
}

.panel-thumb.outline {
  color: var(--pg-muted);
}

.panel-thumb.outline svg {
  width: 20px;
  height: 20px;
}

.panel-thumb.small {
  width: 32px;
  height: 32px;
}

.panel-project-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.panel-project-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-project-meta {
  overflow: hidden;
  color: var(--pg-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-row .project-actions {
  flex: none;
  padding-right: 4px;
  opacity: 0;
  transition: opacity var(--pg-motion-fast) var(--pg-ease);
}

.panel-row:hover .project-actions,
.panel-row:focus-within .project-actions {
  opacity: 1;
}

.panel-row .project-action {
  min-width: 26px;
  min-height: 26px;
  padding: 3px;
  border-color: transparent;
}

.panel-row .project-action:hover:not(:disabled) {
  border-color: var(--pg-border);
}

@media (hover: none) {
  .panel-row .project-actions,
  .tree-more {
    opacity: 1;
  }
}

/* New project: a card per template ------------------------------------------------------------ */

.template-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
  margin: 6px 0 4px;
}

.template-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pg-border);
  border-radius: 10px;
  background: var(--pg-bg);
  cursor: pointer;
  outline: none;
  transition:
    transform var(--pg-motion) var(--pg-ease),
    box-shadow var(--pg-motion) var(--pg-ease),
    border-color var(--pg-motion) var(--pg-ease);
}

.template-card:hover {
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
  transform: translateY(-2px);
}

.template-card[aria-checked="true"] {
  border-color: var(--pg-accent);
  box-shadow: 0 0 0 2px var(--pg-accent);
}

.template-card:focus-visible {
  box-shadow:
    0 0 0 2px var(--pg-bg),
    0 0 0 4px var(--pg-focus);
}

/* The picture keeps the card's proportions whatever the diagram's shape. */
.template-picture {
  position: relative;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--pg-border);
  background: var(--pg-surface);
}

.template-thumb {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  transition: transform var(--pg-motion) var(--pg-ease);
}

.template-card:hover .template-thumb {
  transform: scale(1.03);
}

.template-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
}

.template-title {
  font-weight: 600;
}

.template-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--pg-muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.template-contents {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--pg-accent-soft);
  font-size: 11px;
}

/* Choices of a dialog: options with a sentence each, and segments with a picture each. */
.choices {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 0;
  border: 0;
}

.choices legend {
  margin-bottom: 6px;
  padding: 0;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  cursor: pointer;
  transition:
    border-color var(--pg-motion-fast) var(--pg-ease),
    background-color var(--pg-motion-fast) var(--pg-ease);
}

.choice input {
  margin: 2px 0 0;
  accent-color: var(--pg-accent);
}

.choice:has(input:checked) {
  border-color: var(--pg-accent);
  background: color-mix(in srgb, var(--pg-accent-soft) 60%, transparent);
}

.choice.danger:has(input:checked) {
  border-color: var(--pg-error);
  background: color-mix(in srgb, var(--pg-error) 8%, transparent);
}

.choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choice-label {
  font-weight: 600;
}

.segments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
  padding: 0;
  border: 0;
}

.segments legend {
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
}

.segment {
  position: relative;
  display: flex;
  flex: 1 1 120px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  color: var(--pg-muted);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--pg-motion-fast) var(--pg-ease),
    background-color var(--pg-motion-fast) var(--pg-ease),
    color var(--pg-motion-fast) var(--pg-ease);
}

.segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segment svg {
  width: 22px;
  height: 22px;
}

.segment:hover {
  color: var(--pg-fg);
}

.segment:has(input:checked) {
  border-color: var(--pg-accent);
  background: color-mix(in srgb, var(--pg-accent-soft) 60%, transparent);
  color: var(--pg-fg);
}

.segment:has(input:checked) svg {
  color: var(--pg-accent);
}

.segment:has(input:focus-visible) {
  outline: 2px solid var(--pg-focus);
  outline-offset: 2px;
}

.dialog-where {
  color: var(--pg-muted);
  font-size: 12px;
}

.move-folders {
  min-height: 120px;
}

.import-progress {
  width: 100%;
  height: 6px;
  accent-color: var(--pg-accent);
}

.import-progress[hidden] {
  display: none;
}

.code-host {
  position: relative;
  flex: 1;
  min-height: 0;
}

.code {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  font-family: var(--pg-code-font);
  font-size: 13px;
  line-height: 20px;
}

.code[hidden] {
  display: none;
}

.code-gutter {
  overflow: hidden;
  padding: 8px 0;
  border-right: 1px solid var(--pg-border);
  color: var(--pg-gutter);
  user-select: none;
}

.code-line {
  position: relative;
  min-width: 2.5em;
  padding: 0 10px 0 14px;
  text-align: right;
}

.code-line.has-error::before,
.code-line.has-warning::before,
.code-line.has-info::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pg-error);
}

.code-line.has-warning::before {
  background: var(--pg-warning);
}

.code-line.has-info::before {
  background: var(--pg-info);
}

.code-body {
  position: relative;
  overflow: hidden;
}

.code-layer,
.code-input {
  margin: 0;
  padding: 8px 12px 40px;
  border: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
  word-wrap: normal;
}

.code-layer {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  pointer-events: none;
  will-change: transform;
}

.code-highlight {
  color: var(--pg-fg);
}

.code-marks {
  color: transparent;
}

.code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--pg-fg);
  outline: none;
}

.code-input::selection {
  background: color-mix(in srgb, var(--pg-accent) 30%, transparent);
  color: transparent;
}

.code-input:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pg-focus) 55%, transparent);
}

.code-probe {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  font: inherit;
}

.hl-keyword {
  color: var(--hl-keyword);
  font-weight: 600;
}
.hl-type {
  color: var(--hl-type);
}
.hl-property {
  color: var(--hl-property);
}
.hl-constant {
  color: var(--hl-constant);
}
.hl-string {
  color: var(--hl-string);
}
.hl-number {
  color: var(--hl-number);
}
.hl-comment {
  color: var(--hl-comment);
  font-style: italic;
}
.hl-arrow {
  color: var(--hl-arrow);
}
.hl-bracket {
  color: var(--pg-muted);
}
.hl-variable {
  color: var(--hl-id);
}
.hl-namespace {
  color: var(--hl-group);
}
.hl-function {
  color: var(--hl-relation);
}
.hl-class {
  color: var(--hl-type);
  font-style: italic;
}
.hl-declaration {
  font-weight: 600;
}
.hl-invalid {
  color: var(--pg-error);
}

.mark-error,
.mark-warning,
.mark-info {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.mark-error {
  text-decoration-color: var(--pg-error);
}
.mark-warning {
  text-decoration-color: var(--pg-warning);
}
.mark-info {
  text-decoration-color: var(--pg-info);
  text-decoration-style: dotted;
}

.code-popup,
.code-tooltip,
.code-rename {
  position: absolute;
  z-index: 20;
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  background: var(--pg-bg);
  box-shadow: var(--pg-shadow);
}

.code-popup {
  max-height: 240px;
  min-width: 220px;
  max-width: 440px;
  overflow: auto;
  padding: 3px;
  font-family: var(--pg-code-font);
}

.code-popup[hidden],
.code-tooltip[hidden],
.code-rename[hidden] {
  display: none;
}

.code-option {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.code-option.active {
  background: var(--pg-accent);
  color: var(--pg-accent-fg);
}

.code-option-detail {
  overflow: hidden;
  opacity: 0.7;
  font-family: var(--pg-ui-font);
  font-size: 12px;
  text-overflow: ellipsis;
}

.code-tooltip {
  max-width: min(460px, calc(100% - 16px));
  max-height: 50%;
  overflow: auto;
  padding: 8px 10px;
  font-family: var(--pg-ui-font);
  font-size: 12.5px;
  line-height: 1.45;
}

.code-tooltip p {
  margin: 0 0 6px;
}

.code-tooltip p:last-child {
  margin-bottom: 0;
}

.code-diagnostic {
  padding-left: 8px;
  border-left: 3px solid var(--pg-error);
  margin-bottom: 8px;
}

.code-diagnostic.is-warning {
  border-left-color: var(--pg-warning);
}

.code-diagnostic.is-info {
  border-left-color: var(--pg-info);
}

.code-diagnostic .hint {
  color: var(--pg-muted);
}

.code-rename {
  padding: 4px 6px;
  color: var(--pg-fg);
  font-family: var(--pg-code-font);
  font-size: 13px;
}

.markdown code,
.code-tooltip code {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--pg-surface-2);
  font-family: var(--pg-code-font);
  font-size: 12px;
}

.markdown pre {
  margin: 6px 0;
  padding: 6px 8px;
  overflow: auto;
  border-radius: 4px;
  background: var(--pg-surface-2);
}

.markdown pre code {
  padding: 0;
  background: none;
}

.markdown ul {
  margin: 4px 0;
  padding-left: 18px;
}

.image-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 16px;
  overflow: auto;
}

.image-preview[hidden] {
  display: none;
}

.image-preview img {
  max-width: 100%;
  max-height: 70%;
  background: repeating-conic-gradient(var(--pg-surface-2) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}

.image-preview figcaption {
  max-width: 60ch;
  color: var(--pg-muted);
  text-align: center;
}

/* Problems -------------------------------------------------------------------------------- */

.problems {
  max-height: 32%;
  overflow: auto;
  border-top: 1px solid var(--pg-border);
  background: var(--pg-surface);
}

.problems h2 {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 6px 12px;
  background: var(--pg-surface);
  font-size: 12px;
  font-weight: 600;
}

.problem-list {
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
}

.problem-list li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.problem {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.problem:hover {
  background: var(--pg-surface-2);
}

.problem svg {
  width: 14px;
  height: 14px;
  flex: none;
  align-self: center;
  color: var(--pg-error);
}

.problem.is-warning svg {
  color: var(--pg-warning);
}

.problem.is-info svg {
  color: var(--pg-info);
}

.problem-message {
  flex: 1;
  min-width: 0;
}

.problem-where {
  color: var(--pg-muted);
  font-size: 12px;
  white-space: nowrap;
}

.fix {
  flex: none;
  min-height: 24px;
  font-size: 12px;
  border-color: var(--pg-border);
}

.others-title {
  padding: 6px 6px 2px;
  color: var(--pg-muted);
  font-size: 12px;
}

/* Dialogs --------------------------------------------------------------------------------- */

.pg-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--pg-border);
  border-radius: 10px;
  background: var(--pg-bg);
  color: var(--pg-fg);
  box-shadow: var(--pg-shadow);
}

.pg-dialog.wide {
  width: min(760px, calc(100vw - 32px));
}

.pg-dialog::backdrop {
  background: rgba(10, 14, 22, 0.45);
}

.pg-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: pg-rise 160ms var(--pg-ease);
}

.pg-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 4px;
}

.pg-dialog h2 {
  margin: 0;
  font-size: 16px;
}

.pg-dialog h3 {
  margin: 16px 0 4px;
  font-size: 13px;
}

.dialog-body {
  overflow: auto;
  padding: 4px 16px 12px;
}

.dialog-body > p {
  margin: 6px 0 10px;
  line-height: 1.45;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--pg-border);
}

.dialog-actions .button:not(.primary) {
  border-color: var(--pg-border);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
}

.field[hidden],
.check[hidden] {
  display: none;
}

.field-label {
  font-weight: 600;
  font-size: 12px;
}

.field-hint {
  color: var(--pg-muted);
  font-size: 12px;
}

.field-problem {
  margin: 6px 0;
  color: var(--pg-error);
}

.field-problem:empty,
.field-hint:empty {
  display: none;
}

.field input[type="text"],
.field input[type="url"],
.field input[type="number"],
.field input[type="search"],
.field select,
.field textarea,
.share-link,
.token-value {
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  background: var(--pg-bg);
  color: var(--pg-fg);
  font: inherit;
}

.field textarea,
.import-source {
  font-family: var(--pg-code-font);
  font-size: 12.5px;
  resize: vertical;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

.row {
  display: flex;
  gap: 8px;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-row progress {
  flex: 1;
}

.profiles {
  margin: 4px 0;
  padding: 0;
  list-style: none;
}

.profiles li,
.catalog-export {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--pg-border);
}

.profiles .button,
.catalog-export .button {
  border-color: var(--pg-border);
}

.catalog-export .button {
  flex: none;
}

.import-findings {
  max-height: 160px;
  overflow: auto;
  margin: 6px 0;
  padding-left: 18px;
  font-size: 12px;
}

.import-findings .is-error {
  color: var(--pg-error);
}

.notices {
  max-height: 34vh;
  overflow: auto;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.6;
}

.commands dt {
  margin-top: 10px;
  font-weight: 600;
}

.commands dd {
  margin: 4px 0 0;
}

.commands code {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--pg-surface-2);
  font-family: var(--pg-code-font);
  font-size: 12px;
  user-select: all;
  overflow-x: auto;
}

.dialog-body a {
  color: var(--pg-accent);
}

/* API tokens ---------------------------------------------------------------------------------- */

/* A button is a flex box, which would otherwise show it whatever its `hidden`. */
.dialog-body .button[hidden],
.token-reveal[hidden] {
  display: none;
}

.token-form h3 {
  margin-top: 8px;
}

.token-form .button {
  margin-top: 2px;
}

.token-status {
  margin: 6px 0;
  color: var(--pg-muted);
}

.token-status:empty {
  margin: 0;
}

/* The new token: shown once, so it stands out until the dialog closes. */
.token-reveal {
  margin: 10px 0;
  padding: 2px 12px 10px;
  border: 1px solid var(--pg-accent);
  border-radius: 8px;
  background: var(--pg-accent-soft);
}

.token-reveal p {
  margin: 8px 0;
}

.token-reveal .field-hint {
  margin: 6px 0 0;
}

.token-value {
  flex: 1;
  min-width: 0;
  font-family: var(--pg-code-font);
  font-size: 12px;
}

.token-list {
  margin: 4px 0;
  padding: 0;
  list-style: none;
}

.token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pg-border);
}

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

.token-name {
  overflow-wrap: anywhere;
}

.token-meta {
  color: var(--pg-muted);
  font-size: 12px;
}

.token-row .button {
  flex: none;
  border-color: var(--pg-border);
}

/* Cloud projects ------------------------------------------------------------------------------ */

/* The open project's connection, in the status line: saved, saving, offline, reconnecting. */
.cloud-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  max-width: 55%;
  color: var(--pg-muted);
  white-space: nowrap;
}

.cloud-status[hidden] {
  display: none;
}

/* The header's room for what only a cloud project has (the versions panel's button, say). */
.cloud-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.cloud-actions[hidden] {
  display: none;
}

.cloud-status svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.cloud-status-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-status[data-state="offline"],
.cloud-status[data-state="reconnecting"],
.cloud-status[data-state="gone"] {
  color: var(--pg-warning);
}

.cloud-status[data-kept="false"] .cloud-status-text {
  text-decoration: underline dotted;
}

.shell.narrow .cloud-status-text {
  max-width: 22ch;
}

/* On a narrow screen the connection and the messages take the whole line. */
.shell.narrow[data-cloud="open"] .version {
  display: none;
}

/* Viewing a project by its link ------------------------------------------------------------------ */

.button[hidden] {
  display: none;
}

/* The header's badge and copies while the page only shows a shared project (view mode). */
.view-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
}

.view-actions[hidden] {
  display: none;
}

.view-badge {
  padding: 1px 8px;
  border: 1px solid var(--pg-border);
  border-radius: 999px;
  color: var(--pg-muted);
  font-size: 11px;
  white-space: nowrap;
}

/* In the status bar, once a snapshot has been open for a while: the project may have changed. */
.view-hint {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 70%;
  color: var(--pg-fg);
}

.view-hint[hidden] {
  display: none;
}

.view-hint > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-hint .button {
  flex: none;
  min-height: 20px;
  padding: 0 8px;
  border-color: var(--pg-border);
  font-size: 12px;
}

.shell.narrow .view-hint > span:first-child {
  display: none;
}

.shell.narrow .view-actions > .with-text > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A drawer: a dialog that comes in from the right edge and fills the screen's height. */
.pg-dialog.drawer {
  width: min(480px, 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  border-width: 0 0 0 1px;
  border-radius: 0;
}

.pg-dialog.drawer .dialog-body {
  flex: 1;
  min-height: 0;
}

.projects-status {
  margin: 6px 0;
  color: var(--pg-muted);
}

.projects-status:empty {
  margin: 0;
}

.project-name {
  overflow-wrap: anywhere;
}

.project-badge {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pg-accent-soft);
  font-size: 11px;
  font-weight: 400;
}

.project-actions {
  display: flex;
  flex: none;
  gap: 2px;
}

.project-action {
  border-color: var(--pg-border);
}

/* The versions panel: the same drawer, with a form that names the current state and a list. */
.version-form h3 {
  margin-top: 8px;
}

.version-form .button {
  margin-top: 2px;
}

.versions-status {
  margin: 6px 0;
  color: var(--pg-muted);
}

.versions-status:empty {
  margin: 0;
}

.versions-count {
  margin: 12px 0 4px;
}

.version-list {
  margin: 4px 0;
  padding: 0;
  list-style: none;
}

.version-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pg-border);
}

.version-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.version-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.version-badge {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pg-accent-soft);
  font-size: 11px;
}

.version-label {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.version-unnamed {
  color: var(--pg-muted);
  font-weight: 400;
}

.version-meta,
.version-changed {
  color: var(--pg-muted);
  font-size: 12px;
}

.version-changed summary {
  width: fit-content;
  cursor: pointer;
}

.version-files {
  max-height: 160px;
  margin: 4px 0 0;
  padding-left: 18px;
  overflow: auto;
}

.version-files code {
  font-family: var(--pg-code-font);
  overflow-wrap: anywhere;
}

.version-restore {
  flex: none;
  border-color: var(--pg-border);
}

/* The share dialog and the publish dialog (`cloud/share.ts`, `cloud/publish.ts`) ------------------- */

.dialog-body .share-section[hidden],
.dialog-body .share-none[hidden],
.dialog-body .share-reveal[hidden],
.dialog-body .share-role-line[hidden],
.dialog-body .share-invite[hidden],
.dialog-body .publish-form[hidden],
.dialog-body .publish-handle[hidden] {
  display: none;
}

.share-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.share-row .share-link {
  flex: 1;
  width: auto;
  min-width: 0;
}

.share-row .button,
.share-controls .button,
.share-section > .button,
.dialog-body > .button,
.dialog-body a.button {
  flex: none;
  border-color: var(--pg-border);
}

.share-row .button.primary {
  border-color: transparent;
}

.dialog-body a.button {
  color: inherit;
  text-decoration: none;
}

.share-role-line {
  margin: 4px 0 8px;
  color: var(--pg-muted);
}

/* What the last action said stays in view when a long list has scrolled. */
.share-messages {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pg-bg);
}

.share-status {
  margin: 6px 0;
  color: var(--pg-muted);
}

.share-status:empty {
  display: none;
}

.share-level {
  margin: 12px 0;
  padding: 0;
  border: 0;
}

.share-level legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

.share-level-option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: baseline;
  padding: 6px 0;
}

.share-level-option label {
  font-weight: 600;
}

.share-level-text {
  grid-column: 2;
}

.share-section h3 {
  margin-top: 16px;
}

.share-count {
  margin: 2px 0 4px;
}

.share-list {
  margin: 4px 0;
  padding: 0;
  list-style: none;
}

.share-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pg-border);
}

.share-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pg-surface-2);
}

.share-avatar.outline {
  color: var(--pg-muted);
}

.share-person-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.share-person-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.share-you {
  color: var(--pg-muted);
  font-weight: 400;
}

.share-meta,
.share-role-text {
  color: var(--pg-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.share-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.share-role {
  min-height: 30px;
  padding: 2px 6px;
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  background: var(--pg-bg);
  color: var(--pg-fg);
  font: inherit;
}

.share-none {
  color: var(--pg-muted);
}

.share-invite h3,
.publish-form h3 {
  margin-top: 16px;
}

.share-invite-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

.share-invite-fields .share-email {
  flex: 1 1 200px;
}

.share-invite-fields .field:not(.share-email) {
  flex: 0 1 160px;
}

.share-invite .button,
.publish-form .button {
  margin-top: 2px;
}

/* The invitation or the address just made: it stands out until the next one or the dialog's end. */
.share-reveal {
  margin: 10px 0;
  padding: 2px 12px 10px;
  border: 1px solid var(--pg-accent);
  border-radius: 8px;
  background: var(--pg-accent-soft);
}

.share-reveal-note {
  margin: 8px 0;
}

.share-invitation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.share-invitation-item {
  border-bottom: 1px solid var(--pg-border);
}

.share-reveal .share-invitation {
  padding: 0 0 4px;
}

.share-invitation-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.share-invitation-link,
.publish-url {
  font-family: var(--pg-code-font);
  font-size: 12px;
}

.share-reveal .share-row {
  flex-wrap: wrap;
}

.publish-url {
  overflow-wrap: anywhere;
}

.publish-address-end {
  margin: 4px 0 8px;
  overflow-wrap: anywhere;
}

.publish-removed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pg-border);
}

/* On a phone the dialog's rows wrap: the address and its buttons take a line each. */
@media (max-width: 480px) {
  .share-row:not(.share-link-row) {
    flex-wrap: wrap;
  }

  .share-row:not(.share-link-row) .share-link {
    flex: 1 1 100%;
  }
}

/* Presence ------------------------------------------------------------------------------------ */

/* The header's "who is here": a pill for each person who has the project open, in their colour.
   Each carries its colour as --presence, set by the page. */
.presence-bar {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

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

.presence-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.presence-item {
  display: inline-flex;
}

.presence-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  max-width: 26ch;
  padding: 2px 10px 2px 4px;
  border: 1px solid var(--presence);
  border-radius: 999px;
  background: transparent;
  color: var(--presence);
  font: inherit;
  cursor: pointer;
}

.presence-person:hover:not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--presence) 14%, transparent);
}

.presence-person[aria-disabled="true"] {
  cursor: default;
}

.presence-person:focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: 1px;
}

.presence-name {
  max-width: 10ch;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-file {
  max-width: 14ch;
  overflow: hidden;
  color: var(--pg-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The header has little room to spare: below a wide screen the file is in the tooltip and the label
   only, and the pill is a picture and a name. */
@media (max-width: 1699px) {
  .presence-file {
    display: none;
  }
}

/* On a narrow screen a person is their picture; the button's label still names them. */
.shell.narrow .presence-name,
.shell.narrow .presence-file {
  display: none;
}

.shell.narrow .presence-person {
  padding-right: 4px;
}

/* Over the code: other people's selections and carets, drawn above the text and never in the way of
   typing, selecting or copying it. */
.code-presence {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.presence-peer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

.presence-band {
  position: absolute;
  border-radius: 2px;
  background: color-mix(in srgb, var(--presence) 28%, transparent);
}

.presence-caret {
  position: absolute;
  width: 2px;
  background: var(--presence);
}

.presence-caret[hidden] {
  display: none;
}

/* The name flag sits above the caret (under it on the first line), and fades after two seconds
   of stillness. */
.presence-flag {
  position: absolute;
  left: -1px;
  bottom: 100%;
  max-width: 24ch;
  overflow: hidden;
  padding: 0 6px;
  border-radius: 3px 3px 3px 0;
  background: var(--presence);
  color: #fff;
  font:
    600 11px/16px var(--pg-ui-font),
    sans-serif;
  opacity: 1;
  text-overflow: ellipsis;
  transition: opacity 0.4s ease;
  white-space: nowrap;
}

.presence-flag.faded {
  opacity: 0;
}

.presence-caret.below .presence-flag {
  top: 100%;
  bottom: auto;
  border-radius: 0 3px 3px 3px;
}

/* The status line's offer to try a room that is full again. */
.cloud-status[data-state="full"] {
  color: var(--pg-warning);
}

.cloud-retry {
  min-height: 20px;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  background: transparent;
  color: var(--pg-fg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cloud-retry:focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: 1px;
}

/* The frame the browser prints a PDF from: laid out, but out of sight. */
.print-frame {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 800px;
  height: 600px;
  border: 0;
}

/* The account panel: a settings modal with its sections listed beside the one shown. */
.pg-dialog.settings {
  width: min(880px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
}

.pg-dialog.settings[open] {
  animation: pg-panel-in 160ms var(--pg-ease);
}

.pg-dialog.settings.closing {
  animation: pg-panel-out 100ms var(--pg-ease) forwards;
}

.pg-dialog.settings > header {
  padding-bottom: 10px;
}

.pg-dialog.settings .dialog-body {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.account-panel {
  display: grid;
  flex: 1;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 0;
  border-top: 1px solid var(--pg-border);
}

.account-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  overflow: auto;
  border-right: 1px solid var(--pg-border);
  background: var(--pg-surface);
}

.account-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pg-muted);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--pg-motion-fast) var(--pg-ease),
    background-color var(--pg-motion-fast) var(--pg-ease);
}

.account-tab svg,
.device-mark svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.account-tab:hover {
  color: var(--pg-fg);
  background: color-mix(in srgb, var(--pg-fg) 6%, transparent);
}

.account-tab[aria-selected="true"] {
  color: var(--pg-fg);
  font-weight: 600;
  background: transparent;
}

.account-tab:focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: -2px;
}

.account-tab[data-section="danger"] svg {
  color: var(--pg-error);
}

/* The chosen tab's card, which slides from one tab to the next. */
.account-tab-indicator {
  position: absolute;
  top: 0;
  right: 8px;
  left: 8px;
  border-radius: 6px;
  background: var(--pg-bg);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.08),
    inset 0 0 0 1px var(--pg-border);
  pointer-events: none;
  transition:
    transform var(--pg-motion-panel) var(--pg-ease),
    height var(--pg-motion-panel) var(--pg-ease),
    width var(--pg-motion-panel) var(--pg-ease);
}

.account-sections {
  min-width: 0;
  padding: 16px 20px 20px;
  overflow: auto;
}

.account-section.entering {
  animation: pg-section-in var(--pg-motion-fast) var(--pg-ease);
}

.account-section:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--pg-focus);
  outline-offset: 4px;
}

.pg-dialog .account-section-title {
  margin: 0 0 6px;
  font-size: 15px;
}

.account-section h4 {
  margin: 20px 0 6px;
  font-size: 12px;
  font-weight: 600;
}

.account-intro {
  margin: 0 0 10px;
  color: var(--pg-muted);
  line-height: 1.45;
}

.account-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 4px;
}

.account-profile-head .account-avatar {
  width: 48px;
  height: 48px;
}

.account-profile-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-profile-name .account-intro {
  margin: 0;
}

.account-emails {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

/* The account id in Profile: the id, then its Copy button. */
.account-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.account-id {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--pg-surface);
  font-family: var(--pg-code-font);
  font-size: 12px;
  overflow-wrap: anywhere;
  user-select: all;
}

.account-handle {
  display: grid;
  grid-template-columns: minmax(0, 320px) auto;
  align-items: start;
  column-gap: 8px;
}

.account-handle .field {
  margin: 0;
}

.account-handle > .button {
  justify-self: start;
  margin-top: 21px;
}

/* Secondary actions of the panel read as buttons, not as toolbar icons. */
.account-sections .button:not(.primary) {
  border-color: var(--pg-border);
}

.account-sections .button.danger {
  border-color: var(--pg-error);
  color: var(--pg-error);
}

.account-handle .field-problem,
.account-handle .account-handle-now {
  grid-column: 1 / -1;
}

.account-handle-now {
  margin: 6px 0 0;
}

.account-sign-out {
  margin: 0;
}

/* The donation path (`unbranded-by-donation`): the export dialog's line under the Theme field and
   Profile's Support Meltemi Diagrams, a link to the sponsors page in a soft accent card; the thanks
   of a sponsor; the Grant field an unclaimed sponsorship points to. What appears while the panel is
   open comes in with the section's motion, and none of it moves when reduced motion is asked. */
.donation-line,
.account-support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--pg-accent) 28%, var(--pg-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--pg-accent-soft) 55%, var(--pg-surface));
  animation: pg-section-in var(--pg-motion) var(--pg-ease);
}

.account-support .account-intro,
.account-support .account-actions {
  margin: 0;
}

.donation-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  color: var(--pg-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--pg-motion-fast) var(--pg-ease);
}

.donation-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.donation-link svg:first-child {
  transition: transform var(--pg-motion) var(--pg-ease);
}

.donation-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.donation-link:hover svg:first-child {
  transform: scale(1.12);
}

.donation-link:focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: 2px;
}

.account-support-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.account-support-hint .field-hint {
  margin: 0;
}

.account-entitlement[hidden] {
  display: none;
}

.account-entitlement.entering {
  animation: pg-section-in var(--pg-motion) var(--pg-ease);
}

.account-thanks {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--pg-fg);
  font-weight: 600;
}

.account-thanks svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--pg-accent);
}

.token-form.grant-hinted {
  border-radius: 6px;
  animation: pg-row-flash 600ms var(--pg-ease);
}

.account-rows {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--pg-border);
  border-radius: 8px;
}

.account-rows:empty,
.account-rows[hidden] {
  display: none;
}

.account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  padding: 10px 12px;
  border-top: 1px solid var(--pg-border);
}

.account-row:first-child {
  border-top: 0;
}

.account-row.row-new {
  animation: pg-row-flash 600ms var(--pg-ease);
}

.account-row.row-gone {
  height: 0 !important;
  padding-block: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    height 150ms var(--pg-ease),
    padding 150ms var(--pg-ease),
    opacity 150ms var(--pg-ease);
}

.account-row.skeleton {
  pointer-events: none;
}

.skeleton-line {
  display: block;
  width: 60%;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    var(--pg-surface) 25%,
    var(--pg-surface-2) 50%,
    var(--pg-surface) 75%
  );
  background-size: 200% 100%;
  animation: pg-shimmer 1.2s linear infinite;
}

.account-row-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.account-row-meta {
  color: var(--pg-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.account-badge {
  padding: 0 7px;
  border: 1px solid var(--pg-border);
  border-radius: 999px;
  background: var(--pg-surface);
  color: var(--pg-muted);
  font-size: 11px;
  font-weight: 400;
}

.account-badge.current {
  border-color: transparent;
  background: var(--pg-accent-soft);
  color: var(--pg-fg);
}

.provider-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--pg-border);
  border-radius: 50%;
  background: var(--pg-surface);
  font-size: 12px;
  font-weight: 700;
}

.provider-mark[data-provider="github"] {
  border-color: transparent;
  background: #24292f;
  color: #ffffff;
}

.provider-mark[data-provider="google"] {
  background: #ffffff;
  color: #1a73e8;
}

.device-mark {
  display: inline-flex;
  flex: none;
  color: var(--pg-muted);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}

.account-link-block[hidden],
.account-device-actions[hidden] {
  display: none;
}

.account-unavailable {
  margin-top: 8px;
  padding: 12px;
  border: 1px dashed var(--pg-border);
  border-radius: 8px;
}

.account-unavailable[hidden] {
  display: none;
}

.account-unavailable p {
  margin: 0 0 4px;
}

.account-status {
  margin: 14px 0 0;
  color: var(--pg-muted);
}

.account-status:empty,
.account-problem:empty {
  display: none;
}

.account-usage-panel {
  display: grid;
  gap: 14px;
  max-width: 460px;
  margin: 8px 0;
}

.account-usage-panel .usage-row {
  display: grid;
  gap: 6px;
}

.usage-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border: 1px solid var(--pg-border);
  border-radius: 3px;
  background: var(--pg-surface);
}

.usage-fill {
  display: block;
  height: 100%;
  background: var(--pg-accent);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
  transition: transform 240ms var(--pg-ease);
}

.usage-row.full .usage-fill {
  background: var(--pg-warning);
}

.account-limits {
  min-width: min(320px, 100%);
  border-collapse: collapse;
}

.account-limits th,
.account-limits td {
  padding: 6px 16px 6px 0;
  border-bottom: 1px solid var(--pg-border);
  font-weight: 400;
  text-align: left;
}

.account-limits td {
  padding-right: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.danger-box {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--pg-error) 45%, var(--pg-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--pg-error) 5%, var(--pg-bg));
}

.danger-box h4 {
  margin-top: 0;
  color: var(--pg-error);
}

.danger-box p {
  margin: 0 0 8px;
  line-height: 1.45;
}

.button.danger {
  border-color: var(--pg-error);
  color: var(--pg-error);
}

.button.danger:hover {
  background: color-mix(in srgb, var(--pg-error) 10%, transparent);
}

/* The account menu's numbers: a button that opens the panel at Usage. */
.account-usage-button {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.account-usage-button:hover {
  background: color-mix(in srgb, var(--pg-fg) 5%, transparent);
}

.account-usage-button:focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: 1px;
}

/* A narrow screen: a full-screen sheet with the sections as a strip of tabs above the content. */
@media (max-width: 720px) {
  .pg-dialog.settings {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-width: 0;
    border-radius: 0;
  }

  .pg-dialog.settings[open] {
    animation: pg-sheet-in 200ms var(--pg-ease);
  }

  .account-panel {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .account-tabs {
    flex-direction: row;
    padding: 6px 8px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--pg-border);
    scrollbar-width: none;
  }

  .account-tab {
    flex: none;
  }

  .account-tab-indicator {
    top: 6px;
    right: auto;
    bottom: 6px;
    left: 0;
  }

  .account-sections {
    padding: 14px 16px 18px;
  }

  .account-handle {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@keyframes pg-panel-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes pg-panel-out {
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes pg-sheet-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes pg-section-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes pg-shimmer {
  to {
    background-position: -200% 0;
  }
}

@keyframes pg-row-flash {
  from {
    background: var(--pg-accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .shell {
    display: none;
  }
}

/* Live sessions (`live-sessions`) ---------------------------------------------------------------- */

/* The bar under the header for a person without an account in a project's room: the session or the
   project they follow, the name others see (a field), and the way to a copy and to sign-in. It slides
   in as the project opens; the dot breathes while a session is on. */
.guest-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--pg-border);
  background: color-mix(in srgb, var(--pg-accent-soft) 70%, var(--pg-surface));
  color: var(--pg-fg);
  font-size: 13px;
  animation: pg-rise var(--pg-motion) var(--pg-ease);
}

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

.guest-bar-dot,
.live-chip-dot,
.share-live-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pg-muted);
}

.guest-bar.in-session .guest-bar-dot,
.live-chip-dot,
.share-live.on .share-live-dot {
  background: #e03131;
  box-shadow: 0 0 0 0 rgba(224, 49, 49, 0.45);
  animation: pg-live 1.8s var(--pg-ease) infinite;
}

@keyframes pg-live {
  70% {
    box-shadow: 0 0 0 6px rgba(224, 49, 49, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(224, 49, 49, 0);
  }
}

.guest-bar-text {
  color: var(--pg-muted);
}

.guest-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.guest-name-input {
  width: 16ch;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid var(--pg-border);
  border-radius: 6px;
  background: var(--pg-bg);
  color: var(--pg-fg);
  font: inherit;
  font-weight: 600;
  transition:
    border-color var(--pg-motion-fast) var(--pg-ease),
    box-shadow var(--pg-motion-fast) var(--pg-ease);
}

.guest-name-input:hover {
  border-color: var(--pg-muted);
}

.guest-name-input:focus-visible {
  outline: none;
  border-color: var(--pg-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pg-focus) 30%, transparent);
}

.guest-name-input[aria-invalid="true"] {
  border-color: var(--pg-error);
}

.guest-rename:not([hidden]) {
  animation: pg-rise var(--pg-motion-fast) var(--pg-ease);
}

.guest-bar-ends {
  color: var(--pg-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.guest-bar-ends[hidden],
.guest-bar .button[hidden] {
  display: none;
}

.guest-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.guest-bar .button:not(.primary) {
  border-color: var(--pg-border);
}

.guest-bar a.button {
  text-decoration: none;
}

.guest-bar a.button.primary {
  color: var(--pg-accent-fg);
}

.shell.narrow .guest-bar-text {
  flex-basis: 100%;
}

/* The owner's chip while a live session is on: it opens the share dialog. */
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  margin-right: 6px;
  padding: 2px 10px 2px 8px;
  border: 1px solid color-mix(in srgb, #e03131 45%, var(--pg-border));
  border-radius: 999px;
  background: color-mix(in srgb, #e03131 8%, transparent);
  color: var(--pg-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  animation: pg-rise var(--pg-motion) var(--pg-ease);
  transition: background-color var(--pg-motion-fast) var(--pg-ease);
}

.live-chip:hover {
  background: color-mix(in srgb, #e03131 16%, transparent);
}

.live-chip:focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: 1px;
}

.live-chip[hidden] {
  display: none;
}

.live-chip-label {
  font-variant-numeric: tabular-nums;
}

/* The share dialog's live session: what it lets people do, then the link, who is in and the time
   left, the switch and the actions. */
.share-live-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-live-on {
  animation: pg-rise var(--pg-motion) var(--pg-ease);
}

.dialog-body .share-live-on[hidden],
.dialog-body .share-live-intro[hidden],
.dialog-body .share-live-loading[hidden],
.dialog-body .share-live-actions .button[hidden] {
  display: none;
}

.share-live-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 2px;
  color: var(--pg-muted);
  font-variant-numeric: tabular-nums;
}

.share-live-guests {
  color: var(--pg-fg);
  font-weight: 600;
}

.share-live-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 10px 0;
}

.share-live-actions {
  display: flex;
  gap: 8px;
}

.share-live-actions .button.danger {
  border-color: var(--pg-error);
  color: var(--pg-error);
}

.share-live-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--pg-border);
}

.share-live-note .button {
  border-color: var(--pg-border);
  color: inherit;
  text-decoration: none;
}

/* A person without an account, as the room says: badged in the header and on their caret's flag. */
.presence-guest {
  flex: none;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  opacity: 0.85;
}

.presence-flag-guest {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 10px;
}

.shell.narrow .presence-guest {
  display: none;
}