/* app.omacus.com: the notepad calculator in the browser. Colours and fonts come
   from site.css; this is the app's layout. */

/* Elements styled with a display value still hide with the hidden attribute. */
.app-page [hidden] {
  display: none !important;
}

/* The page and the bar are one colour, including any strip around the web view. */
html:has(body.app-page) {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--app-bg);
}

.app-page {
  --bar: 56px;
  /* Insets pad content. They do not shrink the shell. A probe can read 0 on
     a cold start and must not wipe a real env() value. --sat/--sab/--sal/--sar
     are how a test supplies the insets Chrome reports as 0. */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--sat, var(--probed-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--sab, var(--probed-bottom, 0px)));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--sal, var(--probed-left, 0px)));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--sar, var(--probed-right, 0px)));
  --side-w: 240px;
  --line-h: 1.7;
  --font-size: 15px;
  --res-w: 12ch;
  /* Safari: fixed to the visual viewport. 100vh there includes the toolbar.
     The Home Screen rule below is the one that fills the phone. */
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  background: var(--app-bg);
  color: var(--app-fg);
}

/* Home Screen cold start. A percentage height drops viewport-fit=cover.
   100dvh is wrong until the phone rotates. 100vh on the document is the
   height that is right from the first paint. The shell itself stays
   top: 0 and bottom: 0: a fixed 100vh with bottom: auto stops short of
   the screen and leaves a lighter band under the page. */
@media (display-mode: standalone) {
  html:has(body.app-page) {
    height: 100vh;
    background: var(--app-bg);
  }

  body.app-page {
    height: auto;
    min-height: 100vh;
    bottom: 0;
  }
}

html.standalone:has(body.app-page) {
  height: 100vh;
  background: var(--app-bg);
}

html.standalone body.app-page {
  height: auto;
  min-height: 100vh;
  bottom: 0;
}

.app-page .btn {
  min-height: var(--hit);
  border-radius: var(--radius-sm);
  border-color: var(--app-line-strong);
  background: var(--app-side);
  color: var(--app-fg);
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.app-page .btn:hover {
  border-color: var(--app-line-strong);
  background: var(--app-hover);
  color: var(--app-fg);
}

.app-page .btn.primary,
.app-page .btn.primary:hover {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: var(--app-on-accent);
  box-shadow: none;
}

.app-page .btn.primary:hover {
  background: var(--app-accent-hover);
  border-color: var(--app-accent-hover);
}

.app-page .btn.danger,
.app-page .btn.danger:hover {
  background: var(--app-danger);
  border-color: var(--app-danger);
  color: var(--app-bg);
}

.app-page :focus-visible:not(.cm-content):not(.cm-scroller):not(.cm-editor) {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .app-page *,
  .app-page *::before,
  .app-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Top bar ---------- */

/* Pinned to the viewport, not to the shell. On the installed iPhone the shell
   is taller than the layout viewport so the page can reach the home indicator.
   A bar in that flow scrolls away with the pan, and the safe-area fill goes
   with it. Fixed, with the safe area inside the bar, the background stays on
   the clock and runs to both edges. --vv-top follows a visual-viewport pan. */
.bar {
  /* Fixed to the top edge, solid, so the status bar takes this colour
     instead of a blur over the pages button and the more button. */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  transform: translateY(var(--vv-top, 0px));
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: calc(var(--bar) + var(--safe-top));
  padding: var(--safe-top) max(14px, var(--safe-right)) 0 max(14px, var(--safe-left));
  border-bottom: 1px solid var(--app-line-strong);
  background-color: var(--app-bg);
  background-image: none;
  opacity: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.bar .brand {
  font-size: 16px;
}

.bar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--app-fg);
  font: 500 var(--type-body) / 1.3 var(--sans);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bar-title::before {
  content: "/ ";
  color: var(--app-dim);
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar .btn {
  padding: 8px 14px;
  font-size: 14px;
}

.bar .icon-btn {
  color: var(--app-fg);
  border-color: var(--app-line-strong);
  background-color: var(--app-bg);
  background-image: none;
  opacity: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--app-fg);
  font: 500 18px/1 var(--sans);
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--app-fg);
  background: var(--app-hover);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.icon-btn.small {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 16px;
}

/* Sheets button on phones: three bars. */
.sheets-toggle {
  display: none;
  position: relative;
}

.sheets-toggle span {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.sheets-toggle span:nth-child(1) { top: 12px; }
.sheets-toggle span:nth-child(2) { top: 17px; }
.sheets-toggle span:nth-child(3) { top: 22px; }

/* ---------- Menu ---------- */

.menu {
  position: relative;
}

.menu-list {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 30;
  min-width: 230px;
  padding: var(--space-1);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--app-side);
  box-shadow: var(--shadow-lg);
}

.menu-list button,
.menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--app-fg);
  font: 500 var(--type-body) / 1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}

.menu-more {
  color: var(--app-dim);
  font: 500 16px/1 var(--sans);
}

.menu-list button:hover,
.menu-list a:hover {
  color: var(--app-fg);
  background: var(--app-hover);
}

.menu-list .danger {
  color: var(--danger);
}

.menu-list hr {
  margin: 5px 6px;
  border: 0;
  border-top: 1px solid var(--line);
}

/* ---------- Layout ---------- */

.workspace {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  /* The bar is fixed over this. The grid still starts at the top edge, so
     the sidebar and the page paint behind the status bar and the home
     indicator. Content is padded; the boxes are not. */
  margin-top: 0;
}

.side {
  --side-gutter: var(--space-1);
  --chevron-w: 22px;
  --row-step: var(--space-4);
  --nest: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Background and the divider run to the screen edge. The inset only
     moves the words and the buttons, including out of the landscape notch. */
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  border-right: 1px solid var(--line);
  background: var(--app-side);
}

.side-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-top: calc(var(--bar) + var(--safe-top));
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The word lines up with a page name. The buttons stay on the rows' right edge. */
  padding: 10px var(--space-2) 6px calc(var(--space-2) + var(--side-gutter) + var(--chevron-w) + var(--space-1));
  color: var(--app-comment);
  font: 500 var(--type-caption) / 1.2 var(--sans);
}

.side-head-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.side-resize {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  z-index: 2;
  width: 6px;
  cursor: col-resize;
}

.rail {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  /* The sidebar button sits level with where the open sidebar has it, the logo
     at the bottom. The top padding clears the bar. The side's own padding
     clears the notch and the home indicator. */
  flex: 1;
  padding: calc(10px + var(--bar) + var(--safe-top)) 0 14px;
  cursor: pointer;
  pointer-events: auto;
}

/* Sidebar buttons: drawn icons, quiet until hovered, like the rows.
   The gear sits at the bottom of the collapsed rail, just above the logo. */
.rail .rail-settings {
  margin-top: auto;
}

.rail img {
  margin-top: 6px;
}

.side-btn {
  display: grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--app-dim);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.side-btn:hover,
.rail:hover > [data-action="expand-side"] {
  background: var(--app-hover);
  color: var(--app-fg);
}

.side-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.workspace.collapsed {
  /* 52px of buttons, plus the notch. A 52px column with that padding
     slides the buttons under the page, where taps miss them. */
  --side-w: calc(52px + var(--safe-left));
}

.workspace.collapsed .side-body,
.workspace.collapsed .side-resize {
  display: none;
}

.workspace.collapsed .rail {
  display: flex;
}

.sheet-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px var(--space-2) var(--space-3);
  touch-action: pan-y;
}

/* Captions are the outer level. Rows under them take one more step. */
.sheet-list:has(.side-section) {
  --nest: 1;
}

.sheet-list .side-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  height: var(--hit);
  padding: 0 2px 0 calc(var(--side-gutter) + (var(--depth, 0) + var(--nest, 0)) * var(--row-step));
  border-radius: var(--radius-sm);
  color: var(--app-dim);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.sheet-list .side-name,
.sheet-list .chevron,
.sheet-list .row-more {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.sheet-list .side-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 4px;
  font: 14px var(--mono);
  text-align: left;
}

.sheet-list .side-name span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sheet-list .side-row[data-kind="page"] .side-name,
.sheet-list .side-row[data-kind="shared"] .side-name {
  padding-left: calc(var(--chevron-w) + var(--space-1));
}

.sheet-list .chevron,
.sheet-list .row-more {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--chevron-w);
  height: var(--chevron-w);
  padding: 0;
  border-radius: 6px;
}

.sheet-list .row-more {
  margin-left: 2px;
}

.sheet-list .chevron svg,
.sheet-list .row-more svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sheet-list .row-more svg {
  fill: currentColor;
  stroke: none;
}

.sheet-list .chevron[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.sheet-list .side-row:hover,
.sheet-list .chevron:hover,
.sheet-list .row-more:hover {
  color: var(--app-fg);
}

.sheet-list .side-row:hover {
  background: var(--app-hover);
}

.sheet-list .side-row[aria-current="true"] {
  background: var(--app-sel);
  color: var(--app-fg);
  box-shadow: inset 2px 0 0 var(--app-accent);
}

.sheet-list .side-row.drop-before {
  box-shadow: inset 0 2px 0 var(--app-accent);
}

.sheet-list .side-row.drop-after {
  box-shadow: inset 0 -2px 0 var(--app-accent);
}

.sheet-list .side-row.drop-into {
  outline: 1px solid var(--app-accent);
  outline-offset: -1px;
}

.sheet-list.drop-end .side-fill {
  box-shadow: inset 0 2px 0 var(--app-accent);
}

.side-fill {
  flex: 1;
  min-height: 28px;
}

.drag-chip {
  position: fixed;
  z-index: 60;
  max-width: 180px;
  padding: 4px 10px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--app-sel);
  color: var(--app-fg);
  font: 14px var(--mono);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

body.dragging-side {
  cursor: grabbing;
  user-select: none;
}

body.dragging-side .sheet-list {
  touch-action: none;
}

.sheet-list .shared-tag {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-glow);
  color: var(--accent-hi);
  font: 600 10.5px var(--sans);
}

.side-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: var(--space-2) var(--space-2) 0;
  border-top: 1px solid var(--app-line);
}

.side-foot-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--app-fg);
  font: 500 var(--type-body) / 1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}

.side-foot-row svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-foot-row:hover {
  background: var(--app-hover);
}

.side-foot-row[hidden],
.side-btn[hidden] {
  display: none;
}

.side-foot {
  padding: var(--space-2) var(--space-4) var(--space-3);
  color: var(--app-dim);
}

.side-version {
  color: var(--app-fg);
  font: 500 var(--type-body) / 1.4 var(--sans);
  text-decoration: none;
}

.side-version:hover {
  color: var(--app-accent);
}

/* ---------- Sheet ---------- */

.sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* The page colour runs to the screen edges. The padding keeps banners
     and the first line below the bar. */
  padding-top: calc(var(--bar) + var(--safe-top));
  background: var(--app-bg);
}

/* First visit: it can be installed (and how, on iPhone). */
.install-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--app-accent-soft), transparent);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
  animation: banner-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.install-banner img {
  flex: none;
  border-radius: 8px;
}

.install-banner p {
  flex: 1;
  margin: 0;
}

.install-banner b {
  color: var(--text);
}

.install-banner .icon-btn {
  flex: none;
  border: 0;
}

.ios-share {
  width: 17px;
  height: 17px;
  margin: 0 1px -3px;
  fill: none;
  stroke: var(--accent-hi);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes banner-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.shared-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--app-accent-soft), transparent);
  color: var(--text-2);
  font-size: 14px;
}

.rates-note {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--app-line);
  background: var(--app-accent-soft);
  color: var(--app-fg);
  font-size: var(--type-body);
}

.update-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--app-line);
  background: var(--app-accent-soft);
  color: var(--app-fg);
  font-size: var(--type-body);
}

.update-banner p {
  flex: 1;
  margin: 0;
}

.shared-banner b {
  color: var(--text);
}

.shared-banner .btn:first-of-type {
  margin-left: auto;
}

.toast a {
  color: var(--accent-hi);
}

.btn.small {
  padding: 6px 12px;
  font-size: 13.5px;
}

.editor {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--app-bg);
  font: var(--font-size) / var(--line-h) var(--mono);
}

/* CodeMirror fills the sheet area and scrolls itself. Its own rules set
   position and overflow with !important, so these have to win the same way
   or a long page grows the editor instead of scrolling. */
.cm-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cm-host .cm-editor {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.cm-host .cm-scroller {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

.cm-editor {
  color: var(--app-fg);
  font: inherit;
}

/* The page is the surface. A focus ring here is a frame around the whole sheet,
   and iOS rounds it. The caret is the focus indicator. Controls keep their ring. */
.app-page .cm-editor,
.app-page .cm-editor:focus,
.app-page .cm-editor:focus-visible,
.app-page .cm-editor.cm-focused,
.app-page .cm-scroller,
.app-page .cm-scroller:focus,
.app-page .cm-scroller:focus-visible,
.app-page .cm-content,
.app-page .cm-content:focus,
.app-page .cm-content:focus-visible {
  outline: none;
  outline-style: none;
  outline-width: 0;
  outline-offset: 0;
  box-shadow: none;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}

.cm-editor .cm-scroller {
  padding: 22px max(28px, var(--safe-right)) calc(40vh + var(--safe-bottom)) max(28px, var(--safe-left));
  font: inherit;
  line-height: inherit;
}

.cm-editor .cm-content {
  padding: 0;
  caret-color: var(--app-accent);
}

.cm-editor .cm-line {
  padding: 0;
}

/* CodeMirror's cursor spacer is an img. The site rule `img { display: block }`
   would put that spacer on its own row and drop the floated answer under the line. */
img.cm-widgetBuffer {
  display: inline;
  width: 0;
  max-width: none;
  height: 1em;
  vertical-align: text-top;
}

/* A line grows to hold an answer that dropped below it. */
.cm-editor .cm-line::after {
  content: "";
  display: block;
  clear: both;
}

.cm-editor .cm-cursor {
  border-left: 2px solid var(--app-accent);
}

.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground,
.cm-editor .cm-content ::selection {
  background: color-mix(in srgb, var(--app-accent) 28%, transparent) !important;
}

/* Hidden answers column: the answer follows the line instead of floating right. */
body.answers-inline .res {
  float: none;
  margin-left: 1.2em;
}

/* The answer: at the right edge, beside its line when there's room, else just below. */
.res {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 -4px 0 3ch;
  padding: 0 4px;
  color: var(--app-accent);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 5px;
}

/* From before an edit above it, until its new answer arrives. */
.res.stale {
  opacity: 0.45;
}

.res b {
  min-width: 0;
  overflow: hidden;
  font-weight: inherit;
  text-overflow: ellipsis;
}

.res:hover {
  background: var(--app-hover);
}

.res.note {
  color: var(--app-comment);
  cursor: default;
}

.res.note:hover {
  background: none;
}

.res.note.hint {
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--app-comment);
  cursor: help;
}

.empty-hint {
  position: absolute;
  z-index: 1;
  max-width: 36rem;
  margin: var(--space-4) var(--space-5);
  color: var(--app-dim);
  pointer-events: none;
  font: 400 var(--type-body) / 1.5 var(--sans);
}

.deleted {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.deleted-label {
  margin: 0 8px 4px;
  color: var(--app-comment);
  font: 500 var(--type-caption) / 1.2 var(--sans);
}

.deleted button {
  display: block;
  width: 100%;
  min-width: 0;
  height: 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  color: var(--app-dim);
  background: none;
  border: 0;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
}

.deleted button[aria-current="true"] {
  background: var(--app-sel);
  color: var(--app-fg);
}

.preview-body {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 16px 24px 40px;
  overflow: auto;
  color: var(--app-fg);
  font: var(--font-size) / var(--line-h) var(--mono);
  white-space: pre-wrap;
}

.confirm {
  position: fixed;
  /* Above the phone drawer, under the bar, so Move and Cancel stay tappable. */
  z-index: 45;
  left: 50%;
  top: 18vh;
  transform: translateX(-50%);
  width: min(380px, calc(100vw - var(--space-6)));
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--app-side);
  border: 1px solid var(--app-line);
  box-shadow: var(--shadow-lg);
  color: var(--app-fg);
}

.confirm p {
  margin: 0 0 12px;
}

.confirm div {
  display: flex;
  gap: 8px;
}

.confirm [data-pick-lines] {
  display: block;
  margin: 0 0 4px;
}

.confirm .pick-label {
  margin: 0 0 4px;
  color: var(--app-dim);
  font-size: 12px;
}

.confirm .pick-line {
  margin: 0 0 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--app-bg);
  border: 1px solid var(--app-line);
  font: 13.5px var(--mono);
  white-space: pre-wrap;
  color: var(--app-fg);
}

.confirm .move-list {
  flex-direction: column;
  gap: 2px;
  max-height: 280px;
  margin-bottom: 12px;
  overflow: auto;
}

.confirm .move-list button {
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--app-fg);
  font: 14px var(--mono);
  text-align: left;
  cursor: pointer;
}

.confirm .move-list button:hover {
  background: var(--app-hover);
}

.confirm input[data-rename-input],
.confirm input[type="password"],
.lock-gate input {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--app-bg);
  color: var(--app-fg);
  font: 15px var(--sans);
}

.lock-mark {
  display: inline-grid;
  flex: none;
  width: 14px;
  height: 14px;
}

.lock-mark svg,
.lock-ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lock-gate {
  max-width: 360px;
  margin: 48px auto 0;
  display: grid;
  gap: 8px;
  color: var(--app-fg);
}

.lock-gate[hidden] {
  display: none;
}

.lock-gate h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.lock-gate p {
  margin: 0;
  color: var(--app-dim);
  font-size: 13.5px;
}

.confirm-note {
  margin: 0 0 12px;
  color: var(--app-dim);
  font-size: 12.5px;
}

.row-menu {
  position: fixed;
  inset: auto;
  top: 0;
  right: auto;
  width: max-content;
  max-width: calc(100vw - 16px);
  height: auto;
  max-height: calc(100vh - 16px);
  margin: 0;
  overflow: auto;
  color: var(--app-fg);
  background: var(--app-side);
  /* Above the sidebar and the bar. showPopover also puts it in the top layer. */
  z-index: 70;
  min-width: 180px;
}

.row-menu:popover-open {
  display: block;
}

.switcher {
  position: fixed;
  z-index: 45;
  inset: 0;
}

.switcher-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.switcher-card {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 14vh;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--app-bg);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
}

.switcher-card input {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--app-side);
  color: var(--app-fg);
  font: 15px var(--sans);
}

.switcher-hits {
  max-height: 320px;
  overflow: auto;
}

.switcher-hits button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--app-fg);
  font: 14px var(--mono);
  text-align: left;
  cursor: pointer;
}

.switcher-hits button[aria-selected="true"],
.switcher-hits button:hover {
  background: var(--app-sel);
}

.handle-field {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--app-line, rgba(255, 255, 255, 0.16));
  background: var(--app-bg);
  color: var(--app-fg);
  font: var(--font-size) / 1.4 var(--mono);
}

.handle-note {
  color: var(--app-dim);
  font-size: 13px;
}

.handle-error {
  color: var(--danger);
}

.hover-source {
  margin: 0;
  color: var(--app-dim);
  font: 12px/1.3 var(--sans, Inter, sans-serif);
  white-space: nowrap;
}

.rename-note {
  margin-top: 4px;
  color: var(--app-dim);
  font-size: 12px;
  max-width: 280px;
}

.res.copied {
  color: var(--app-dim);
}

.settings {
  position: fixed;
  z-index: 40;
  inset: 0;
}

.settings-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--black) 53%, transparent);
  cursor: pointer;
}

.settings-card {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(436px, 100%);
  max-height: calc(100vh - var(--space-6));
  overflow: auto;
  padding: 18px 20px 16px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--app-bg);
  color: var(--app-fg);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--black) 60%, transparent);
}

.settings-card > .settings-head .icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
}

.settings-card .settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.settings-card h2 {
  margin: 0;
  font: 600 19px / 1.2 var(--sans);
}

.settings-tabs {
  display: flex;
  gap: 0;
  margin: 12px 0 10px;
  padding: 2px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-side);
}

.settings-tabs button {
  flex: 1;
  min-height: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--app-dim);
  font: 400 13px / 1.2 var(--sans);
  padding: 6px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.settings-tabs button[aria-selected="true"] {
  background: var(--app-bg);
  color: var(--app-fg);
  box-shadow: none;
}

.settings-group {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--app-side);
}

.settings-group h3 {
  margin: 0 0 var(--space-2);
  color: var(--app-comment);
  font: 500 var(--type-caption) / 1.2 var(--sans);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
}

.setting-label {
  color: var(--app-fg);
  font: 550 var(--type-body) / 1.3 var(--sans);
}

.build-hash {
  margin: var(--space-2) 0 0;
  font-family: var(--mono);
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--app-fg);
  overflow-wrap: anywhere;
}

.setting-help,
.settings-note {
  margin: var(--space-1) 0 0;
  color: var(--app-comment);
  font: 400 13px / 1.45 var(--sans);
}

.settings-group > .setting-help {
  margin: 0;
}

.setting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.setting-actions .btn {
  text-decoration: none;
}

.settings-card select {
  min-height: var(--hit);
  min-width: 132px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-sm);
  background: var(--app-bg);
  color: var(--app-fg);
  font: 500 var(--type-body) / 1 var(--sans);
}

.switch {
  appearance: none;
  flex: none;
  width: 36px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-pill);
  background: var(--app-hover);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--app-fg);
  transition: transform var(--dur-fast) var(--ease);
}

.switch:checked {
  background: var(--app-accent);
  border-color: var(--app-accent);
}

.switch:checked::after {
  transform: translateX(14px);
  background: var(--app-on-accent);
}

.about-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.about-name {
  margin: 0;
  color: var(--app-accent);
  font: 600 var(--type-display) / 1.2 var(--sans);
}

.about-tag {
  margin: var(--space-1) 0 0;
  color: var(--app-dim);
  font: 400 var(--type-body) / 1.4 var(--sans);
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 0;
}

.about-links a {
  color: var(--app-accent);
  font: 500 var(--type-body) / 1 var(--sans);
  text-decoration: none;
}

.about-links a:hover {
  text-decoration: underline;
}

.swatch {
  flex: none;
  width: 0.8em;
  height: 0.8em;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.t-head,
.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-h5,
.t-h6 {
  color: var(--app-accent);
  font-weight: 600;
}

.t-h1 { font-size: 1.5em; }
.t-h2 { font-size: 1.25em; }
.t-h3 { font-size: 1.125em; }
.t-h4,
.t-h5,
.t-h6 { font-size: 1.06em; }

.t-bold { font-weight: 600; }
.t-em { font-style: italic; }

.cm-editor .t-ref { color: var(--app-accent); }
.cm-editor .t-def { color: var(--app-def); }
.cm-editor .t-var { color: var(--app-var); }
.cm-editor .t-kw { color: var(--app-kw); }
.cm-editor .t-num { color: var(--app-num); }
.cm-editor .t-com { color: var(--app-comment); }

/* Ctrl+P: rendered notes. Answers sit in brackets after their line. */
.page-preview {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  color: var(--app-fg);
}

.page-preview-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.page-preview-hint {
  color: var(--app-comment);
  font: 12px var(--mono);
}

.page-preview-spacer { flex: 1; }

.page-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 28px 36px 64px;
}

.md {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--app-fg);
  font: 400 17.5px/1.65 var(--sans);
}

.md h1,
.md h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.md h1 {
  margin: 0 0 0.2em;
  font-size: 2.35rem;
}

.md h1::after {
  content: "";
  display: block;
  width: 2.6rem;
  height: 2px;
  margin-top: 0.42em;
  background: var(--app-accent);
  border-radius: 1px;
}

.md h2 {
  margin: 1.35em 0 0.35em;
  font-size: 1.55rem;
}

.md h3,
.md h4,
.md h5,
.md h6 {
  margin: 1.15em 0 0.3em;
  font: 600 1.05rem/1.3 var(--sans);
}

.md > :first-child { margin-top: 0; }

.md p.line,
.md li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.25rem;
  align-items: baseline;
  margin: 0;
  min-height: 1.65em;
}

.md p.line.blank {
  display: block;
  min-height: 1.65em;
}

.md .expr { min-width: 0; }

.md .note {
  margin-left: 0.5em;
  color: var(--app-comment);
  font-style: italic;
}

.md ul,
.md ol {
  margin: 0.35em 0 0.85em;
  padding-left: 0;
  list-style: none;
}

.md .mark {
  margin-right: 0.35em;
  color: var(--app-dim);
}

.md li.task {
  list-style: none;
}

.md li.task input {
  appearance: none;
  width: 0.95em;
  height: 0.95em;
  margin: 0 0.45em 0 0;
  border: 1.5px solid var(--app-comment);
  border-radius: 3px;
  vertical-align: -0.12em;
  background: transparent;
}

.md li.task input:checked {
  background: var(--app-accent);
  border-color: var(--app-accent);
  box-shadow: inset 0 0 0 2px var(--app-bg);
}

.md blockquote {
  margin: 0.7em 0 1em;
  padding: 0.1em 0 0.1em 0.9em;
  border-left: 2px solid var(--app-accent);
  color: var(--app-dim);
  font-style: italic;
}

.md table {
  width: 100%;
  margin: 0.55em 0 1.1em;
  border-collapse: collapse;
  font-size: 0.95em;
}

.md th,
.md td {
  padding: 0.42em 0.9em 0.42em 0;
  text-align: left;
  vertical-align: baseline;
}

.md th {
  border-bottom: 1px solid var(--app-fg);
  color: var(--app-dim);
  font: 600 0.72em/1.3 var(--sans);
}

.md td { border-bottom: 1px solid var(--line); }

.md code {
  padding: 0.08em 0.35em;
  border-radius: 5px;
  background: var(--app-hover);
  font: 0.88em var(--mono);
}

.md pre.code {
  margin: 0.45em 0 0.8em;
  padding: 6px 8px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-hover);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.md pre.code code {
  padding: 0;
  border-radius: 0;
  background: none;
  font: 13px/1.45 var(--mono);
  white-space: inherit;
}

.md a { color: var(--app-accent); }

body.answers-inline .md p.line,
body.answers-inline .md li {
  display: block;
}

body.answers-inline .md .pill {
  min-width: 0;
  margin-left: 0.45em;
}

.pill {
  appearance: none;
  justify-self: end;
  min-width: 7.5rem;
  margin: 0;
  padding: 0.04em 0.55em;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-accent) 12%, transparent);
  color: var(--app-accent);
  font: 550 0.86em var(--mono);
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
}

.pill:hover { background: color-mix(in srgb, var(--app-accent) 20%, transparent); }

@media print {
  html:has(body.app-page),
  body.app-page {
    position: static;
    overflow: visible;
    height: auto;
    padding-top: 0;
    background: var(--print-paper);
    color: var(--print-ink);
  }

  body.app-page .bar,
  body.app-page .side,
  body.app-page:has(.page-preview:not([hidden])) .editor,
  body.app-page .shared-banner,
  body.app-page .rates-note,
  body.app-page .update-banner,
  body.app-page .install-banner,
  body.app-page .confirm,
  body.app-page .loading,
  body.app-page .toast,
  body.app-page .settings,
  body.app-page .page-preview-bar,
  body.app-page [data-preview-body] {
    display: none !important;
  }

  body.app-page .workspace,
  body.app-page .sheet,
  body.app-page .page-preview {
    display: block !important;
    position: static;
    overflow: visible;
    height: auto;
    background: var(--print-paper);
    color: var(--print-ink);
  }

  body.app-page .page-preview[hidden] { display: none !important; }

  body.app-page .page-preview-body {
    padding: 0;
    overflow: visible;
  }

  body.app-page .md {
    max-width: none;
    color: var(--print-stone);
    font: 11.5pt/1.55 "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  }

  body.app-page .md h1 {
    font-size: 22pt;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 0.35em;
    break-after: avoid;
    page-break-after: avoid;
  }

  body.app-page .md h2 {
    font-size: 16pt;
    line-height: 1.2;
    margin: 1.05em 0 0.3em;
    break-after: avoid;
    page-break-after: avoid;
  }

  body.app-page .md h3,
  body.app-page .md h4,
  body.app-page .md h5,
  body.app-page .md h6 {
    font-size: 13pt;
    margin: 0.9em 0 0.25em;
    break-after: avoid;
    page-break-after: avoid;
  }

  body.app-page .md p.line,
  body.app-page .md li,
  body.app-page .md tr,
  body.app-page .md blockquote {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.app-page .md p.line,
  body.app-page .md li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.1rem;
    align-items: baseline;
    margin: 0;
    min-height: 1.45em;
  }

  body.app-page .md p.line.blank {
    display: block;
    min-height: 1.45em;
  }

  body.app-page.answers-inline .md p.line,
  body.app-page.answers-inline .md li {
    display: block;
  }

  body.app-page .md .note {
    color: var(--print-muted);
    font-style: italic;
  }

  body.app-page .md blockquote {
    margin: 0.4em 0 0.7em;
    padding-left: 0.7em;
    border-left: 2pt solid var(--print-accent);
    color: var(--print-quote);
  }

  body.app-page .md table {
    width: 100%;
    margin: 0.3em 0 0.9em;
    border-collapse: collapse;
  }

  body.app-page .md th,
  body.app-page .md td {
    padding: 0.32em 0.9em 0.32em 0;
    border-bottom: 0.4pt solid var(--print-rule);
    vertical-align: baseline;
  }

  body.app-page .md th {
    border-bottom: 1pt solid var(--print-strong);
    font-weight: 650;
  }

  body.app-page .md code {
    background: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
  }

  body.app-page .md pre.code {
    margin: 0.35em 0 0.6em;
    padding: 4pt 6pt;
    border: 0.6pt solid var(--print-rule);
    border-radius: 0;
    background: var(--print-code);
    color: var(--print-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.app-page .md pre.code code {
    background: none;
    padding: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 9.5pt;
    line-height: 13pt;
  }

  body.app-page .pill {
    background: var(--print-pill) !important;
    color: var(--print-accent) !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 650;
    font-size: 0.92em;
    padding: 0 0.4em;
    border-radius: 999px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.app-page.answers-inline .pill {
    min-width: 0;
  }
}

@page {
  size: letter;
  margin: 0.55in;
}

/* ---------- Autocomplete ---------- */

.cm-tooltip.cm-tooltip-autocomplete {
  padding: var(--space-1);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-side);
  box-shadow: var(--shadow-lg);
}

.cm-tooltip.cm-tooltip-autocomplete > ul {
  min-width: 140px;
  max-height: 240px;
  font: 13.5px / 1.4 var(--mono);
}

.cm-tooltip.cm-tooltip-autocomplete > ul > li {
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--app-fg);
}

.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: var(--app-sel);
  color: var(--app-accent);
}

.cm-tooltip-autocomplete .cm-completionDetail {
  margin-left: 16px;
  color: var(--app-dim);
  font-style: normal;
}

.cm-tooltip-autocomplete li[aria-selected] .cm-completionDetail {
  color: var(--app-comment);
}

.cm-tooltip.cm-tooltip-hover {
  width: max-content;
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.hover-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: max-content;
  max-width: none;
  box-sizing: border-box;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-side);
  box-shadow: var(--shadow-md);
}

.hover-value {
  display: block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  color: var(--app-accent);
  font: 14px/1.35 var(--mono);
}

.hover-rename,
.rename-menu button,
.ref-dismiss {
  border: 0;
  background: transparent;
  color: var(--app-fg);
  font: 12.5px/1 var(--font);
  padding: 2px 0;
  cursor: pointer;
}

.hover-rename {
  border: 1px solid var(--app-line);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--app-side);
}

.rename-pop,
.ref-prompt,
.rename-menu {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-side);
  box-shadow: var(--shadow-md);
}

.rename-menu {
  position: fixed;
  flex-direction: column;
  align-items: stretch;
  min-width: 180px;
}

.rename-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  text-align: left;
}

.rename-menu kbd,
.switcher-hits kbd {
  color: var(--app-comment);
  font: 11px/1 var(--sans);
}

.rename-pop {
  flex-direction: column;
  align-items: stretch;
}

.rename-pop input {
  width: 140px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--app-fg);
  font: 15px/1.4 var(--mono);
}

.rename-bar,
.menu-list .touch-rename {
  display: none;
}

.rename-bar[hidden] {
  display: none !important;
}

.rename-error,
.ref-prompt span {
  color: var(--danger);
  font: 12.5px/1.3 var(--font);
}

.ref-update {
  border: 0;
  border-radius: 6px;
  background: var(--app-accent);
  color: var(--app-bg);
  font: 13px/1 var(--font);
  padding: 6px 10px;
  cursor: pointer;
}

.menu-list .phone-only {
  display: none;
}

.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--app-dim);
  font: 14px var(--mono);
  background: var(--app-bg);
}

/* CodeMirror announces edits here. Its own rule is an inline style, which this
   page does not allow, so the words would sit on the sheet. */
.cm-announced {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}

.boot-fail {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: auto;
  padding: 28px 22px 48px;
  background: var(--app-bg);
  color: var(--app-fg);
}

.boot-fail p {
  margin: 0 0 16px;
  color: var(--app-dim);
  font: 15px / 1.5 var(--sans);
}

.boot-fail button.boot-page {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-side);
  color: var(--app-fg);
  font: 500 15px / 1.3 var(--sans);
}

.boot-fail pre {
  margin: 4px 0 16px;
  white-space: pre-wrap;
  font: 14px / 1.6 var(--mono);
  color: var(--app-fg);
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(var(--space-5), var(--safe-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: min(560px, calc(100vw - var(--space-6)));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--app-side);
  color: var(--app-fg);
  font: 500 var(--type-body) / 1.4 var(--sans);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.toast small {
  color: var(--muted);
}

.toast button {
  border: 0;
  background: none;
  color: var(--accent-hi);
  font: 600 14px var(--sans);
  cursor: pointer;
}

/* ---------- Embedded in the homepage ---------- */

.app-page.embed {
  --bar: 0px;
  --safe-top: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-right: 0px;
}

.app-page.embed .bar,
.app-page.embed .side {
  display: none;
}

.app-page.embed .workspace {
  grid-template-columns: minmax(0, 1fr);
}

.embed-open {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--app-side);
  color: var(--text-2);
  font: 500 13px var(--sans);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.embed-open:hover {
  color: var(--accent-hi);
  border-color: var(--app-accent);
}

.embed-open svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Phones ---------- */

@media (max-width: 760px) {
  .app-page {
    /* iOS Safari zooms the page when the focused editor is under 16px.
       16px keeps the layout at 1:1 while typing; pinch-zoom stays on. */
    --font-size: 16px;
  }

  .sheets-toggle {
    display: grid;
  }

  .rail,
  .side-resize,
  [data-action="collapse-side"] {
    display: none !important;
  }

  .workspace.collapsed .side-body {
    display: flex;
  }

  .bar .brand {
    display: none;
  }

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

  .side {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(300px, 84vw);
    /* Past the edge, with the border hidden, so a closed list leaves no hairline. */
    transform: translate3d(calc(-100% - 12px), 0, 0);
    border-right-color: transparent;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none;
  }

  .app-page.drawer .side {
    transform: none;
    border-right-color: var(--line);
    box-shadow: 20px 0 60px -20px var(--black);
  }

  .cm-editor .cm-scroller {
    padding: 16px max(16px, var(--safe-right)) calc(40vh + var(--safe-bottom)) max(16px, var(--safe-left));
  }

  /* Settings sits under the bar, full width, so the title and Close are visible. */
  .settings-card {
    top: calc(var(--bar) + var(--safe-top));
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: none;
    transform: none;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: calc(var(--space-4) + var(--safe-bottom));
  }

  /* Tap the sheet beside the drawer to dismiss it. Above the page, below the drawer and the bar. */
  .drawer-scrim {
    position: fixed;
    z-index: 35;
    top: calc(var(--bar) + var(--safe-top));
    right: 0;
    bottom: 0;
    left: 0;
    border: 0;
    padding: 0;
    appearance: none;
    background: color-mix(in srgb, var(--black) 64%, transparent);
    color: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .app-page.drawer .drawer-scrim {
    display: block;
  }

  .app-page.drawer .empty-hint {
    visibility: hidden;
  }

  .app-page.drawer .cm-content {
    -webkit-user-select: none;
    user-select: none;
  }

  .app-page.drawer-swallow .cm-editor {
    pointer-events: none;
  }

  .drawer-scrim:focus,
  .drawer-scrim:focus-visible {
    outline: none;
  }

  .menu-list .phone-only {
    display: block;
  }

  .shared-banner {
    flex-wrap: wrap;
    gap: 8px;
  }

  .install-banner {
    align-items: flex-start;
    padding: 12px 8px 12px 16px;
    font-size: 13.5px;
  }
}

.drawer-scrim {
  display: none;
}

/* Tablets use the wide layout, but iPad still zooms a focused field under 16px. */
@media (pointer: coarse) {
  .app-page {
    --font-size: 16px;
  }
}

/* The focused surface is CodeMirror's contenteditable. iOS zooms if it is under 16px. */
@media (pointer: coarse), (max-width: 760px) {
  .app-page .cm-editor .cm-content {
    font-size: max(16px, 1em);
  }

  .rename-bar {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
  }

  .rename-pop input {
    font-size: 16px;
  }

  .menu-list .touch-rename {
    display: block;
  }
}

/* Sync, private test only. The panel is added when this copy is the test. */
.sync-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  box-sizing: border-box;
  width: auto;
  min-height: var(--hit);
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: transparent;
  color: var(--app-dim);
  font: 500 var(--type-caption) / 1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

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

.sync-setup {
  display: inline-flex;
  align-items: center;
  flex: none;
  box-sizing: border-box;
  min-height: var(--hit);
  margin-right: var(--space-2);
  padding: 5px var(--space-3);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--app-fg);
  font: 500 var(--type-caption) / 1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}

.sync-setup[hidden] {
  display: none;
}

.sync-setup:hover {
  border-color: var(--app-line-strong);
}

.sync-chip svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sync-chip[data-state="on"] {
  color: var(--app-fg);
}

.sync-chip[data-state="on"] .sync-mark {
  stroke: var(--app-accent);
}

.sync-chip[data-state="wait"] {
  color: var(--app-dim);
}

.sync-chip[data-state="error"] {
  color: var(--app-danger);
  border-color: color-mix(in srgb, var(--app-danger) 45%, var(--app-line));
}

.sync-chip:hover {
  color: var(--app-fg);
  border-color: var(--app-line-strong);
}

.sync-chip[data-state="error"]:hover {
  color: var(--app-danger);
}

.sync-chip[data-state="ask"],
.sync-chip[data-state="list"] {
  color: var(--app-fg);
  border-color: var(--app-line-strong);
}

.sync-chip[data-state="ask"] .sync-mark,
.sync-chip[data-state="list"] .sync-mark {
  stroke: var(--app-accent);
}

.side-btn[data-device-waiting] {
  color: var(--app-accent);
}

.side-foot-row[data-device-waiting] svg {
  stroke: var(--app-accent);
}

.sync-beta {
  display: none;
  flex: none;
  color: var(--app-comment);
  font: 500 var(--type-caption) / 1.2 var(--sans);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .bar .sync-setup {
    display: none;
  }

  .sync-chip {
    justify-content: center;
    gap: 0;
    min-width: var(--hit);
    padding: var(--space-1);
  }

  .sync-chip-word {
    display: none;
  }

  .sync-chip[data-state="ask"],
  .sync-chip[data-state="list"] {
    gap: 6px;
    width: auto;
    padding: 5px 10px 5px 8px;
  }

  .sync-chip[data-state="ask"] .sync-chip-word,
  .sync-chip[data-state="list"] .sync-chip-word {
    display: inline;
  }
}

.sync-label {
  margin: 0 0 8px;
  color: var(--app-comment);
  font: 400 11px / 1.3 var(--sans);
}

.sync-panel h2,
.sync-panel h3 {
  margin: 4px 0 4px;
  color: var(--app-fg);
  font: 700 15px / 1.3 var(--sans);
}

.sync-panel .sync-back + h2 {
  margin-top: 8px;
}

.sync-panel .setting-help {
  margin: 0 0 12px;
  color: var(--app-dim);
  font: 400 12.5px / 1.5 var(--sans);
}

.sync-panel .setting-help b {
  font-weight: 600;
}

.sync-actions {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sync-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.sync-panel .sync-actions .btn.primary {
  min-height: 38px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font: 600 13.5px / 1.2 var(--sans);
}

.sync-actions .btn:disabled {
  background: var(--app-line);
  border-color: var(--app-line);
  color: var(--app-comment);
  cursor: not-allowed;
}

.sync-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-dim);
  font: 500 var(--type-caption) / 1.3 var(--sans);
  cursor: pointer;
}

.sync-back:hover {
  color: var(--app-fg);
}

.sync-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.sync-progress li {
  height: 3px;
  border-radius: 2px;
  background: var(--app-line);
}

.sync-progress li.sync-progress-done,
.sync-progress li.sync-progress-now {
  background: var(--app-accent);
}

.sync-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.sync-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-bg);
  color: var(--app-fg);
  font: 400 13.5px / 1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}

.sync-card-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--app-hover);
  color: var(--app-fg);
  font: 400 17px / 1 var(--sans);
}

.sync-card-copy {
  flex: 1;
  min-width: 0;
}

.sync-card-copy b {
  display: block;
  margin: 0 0 2px;
  font: 700 13.5px / 1.3 var(--sans);
}

.sync-card-copy span {
  color: var(--app-dim);
  font: 400 12px / 1.4 var(--sans);
}

.sync-card-chev {
  align-self: center;
  flex: none;
  color: var(--app-comment);
  font: 400 16px / 1 var(--sans);
}

.sync-card:hover,
.sync-card:focus,
.sync-card:focus-visible {
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-bg));
}

.sync-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 12px 0 0;
  color: var(--app-accent);
  font: 400 12.5px / 1.4 var(--sans);
}

.sync-actions .sync-links {
  margin-top: var(--space-4);
}

.sync-link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-accent);
  font: inherit;
  cursor: pointer;
}

.sync-link:hover {
  color: var(--app-fg);
}

.sync-link.sync-off,
.sync-link.sync-off:hover {
  color: var(--app-dim);
}

.sync-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--app-dim);
  font: 400 12.5px / 1.4 var(--sans);
  cursor: pointer;
}

.sync-check input {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  background: var(--app-bg);
}

.sync-check input:checked {
  border-color: var(--app-accent);
  background:
    linear-gradient(var(--app-on-accent), var(--app-on-accent)) 3px 8px / 5px 2px no-repeat,
    linear-gradient(var(--app-on-accent), var(--app-on-accent)) 7px 5px / 2px 6px no-repeat,
    var(--app-accent);
  transform: none;
}

.sync-code-label {
  text-align: left;
  color: var(--app-dim);
}

.sync-hint {
  margin: 5px 0 12px;
  color: var(--app-comment);
  font: 400 11.5px / 1.4 var(--sans);
  text-align: left;
}

.sync-words {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 var(--space-3);
}

.sync-words-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0 0 12px;
}

.sync-word {
  display: flex;
  gap: 0;
  align-items: baseline;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-bg);
  color: var(--app-fg);
  font: 400 13px / 1.3 var(--mono);
}

.sync-word b {
  margin-right: 6px;
  color: var(--app-comment);
  font: 400 11px / 1 var(--mono);
}

.sync-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--app-fg);
}

.sync-qr svg {
  display: block;
  width: 112px;
  height: 112px;
}

.sync-qr.sync-join svg {
  width: 220px;
  height: 220px;
}

.sync-qr b {
  color: var(--app-fg);
  font: 600 var(--type-caption) / 1.3 var(--sans);
  text-align: center;
}

.sync-qr span {
  color: var(--app-comment);
  font: 400 var(--type-caption) / 1.3 var(--sans);
  text-align: center;
}

.sync-ask {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

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

.sync-choices legend {
  margin: 0 0 var(--space-2);
  color: var(--app-fg);
  font: 550 var(--type-body) / 1.3 var(--sans);
}

.sync-choice {
  flex: 1 1 calc(33% - 6px);
  min-height: 0;
  padding: 7px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-bg);
  color: var(--app-fg);
  font: 400 13px / 1.2 var(--mono);
  cursor: pointer;
}

.sync-choice:hover {
  border-color: var(--app-line-strong);
  background: var(--app-hover);
}

.sync-choice[aria-pressed="true"] {
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-bg));
}

.sync-code,
.sync-invite-code {
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid var(--app-accent);
  border-radius: var(--radius-sm);
  color: var(--app-fg);
  font: 600 18px / 1.2 var(--mono);
  letter-spacing: 0.12em;
  text-align: center;
}

.sync-phrase,
.sync-name {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-bg);
  color: var(--app-fg);
  font: 400 13.5px / 1.4 var(--sans);
}

.sync-name.sync-join-input {
  min-height: 42px;
  border-color: var(--app-accent);
  font: 600 18px / 1 var(--mono);
  letter-spacing: 0.12em;
  text-align: center;
}

.sync-name.sync-join-input::placeholder {
  color: var(--app-line-strong);
  opacity: 1;
}

.sync-code-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sync-code-row .sync-join-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.sync-scan {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-hover);
  color: var(--app-accent);
  cursor: pointer;
}

.sync-scan svg {
  display: block;
  width: 18px;
  height: 18px;
}

.sync-scan:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

.sync-scan:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sync-recover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 14px;
  padding: var(--space-2) 11px;
  border: 1px dashed var(--app-line);
  border-radius: var(--radius-sm);
  color: var(--app-dim);
  font: 400 12.5px / 1.4 var(--sans);
}

.sync-recover .sync-link {
  flex: none;
  white-space: nowrap;
}

.sync-phrase {
  min-height: 96px;
  resize: vertical;
  font-family: var(--mono);
}

.sync-msg {
  margin: 0 0 var(--space-2);
  color: var(--app-comment);
  font: 400 var(--type-caption) / 1.4 var(--sans);
}

.sync-msg[data-ok="1"] {
  color: var(--app-fg);
}

.sync-err {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--app-danger);
  font: 400 var(--type-caption) / 1.4 var(--sans);
}

.sync-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--app-line);
  border-left: 3px solid var(--app-danger);
  border-radius: var(--radius-sm);
  background: var(--app-side);
  color: var(--app-fg);
  font: 400 var(--type-caption) / 1.45 var(--sans);
}

.sync-field {
  display: block;
  margin: 0 0 5px;
  color: var(--app-dim);
  font: 500 12px / 1.3 var(--sans);
  text-align: left;
}

.side-sync-label {
  padding: var(--space-2) 0 0;
}

.side-section {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--hit);
  margin: 0;
  padding: 0 var(--space-1) 0 var(--side-gutter);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--app-dim);
  cursor: pointer;
  font: 600 var(--type-caption) / 1.3 var(--sans);
  text-align: left;
}

.side-section:not(:has(.chevron)) {
  padding-left: calc(var(--side-gutter) + var(--chevron-w) + var(--space-1));
}

.side-section .chevron {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--chevron-w);
  height: var(--chevron-w);
}

.side-section .chevron svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-section[aria-expanded="true"] .chevron svg {
  transform: rotate(90deg);
}

.side-section:hover {
  color: var(--app-fg);
  background: var(--app-hover);
}

.side-sync-label.drop-into .side-section {
  outline: 1px solid var(--app-accent);
  outline-offset: -1px;
}

.sheet-list .side-row[data-picked="1"] {
  background: var(--app-sel);
  color: var(--app-fg);
}

.side-sync-hint {
  margin: 0;
  padding: 0 var(--space-1) var(--space-2) var(--side-gutter);
  color: var(--app-dim);
  font: 400 var(--type-caption) / 1.4 var(--sans);
}

.sync-rename {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.sync-rename-actions {
  display: flex;
  gap: var(--space-2);
}

.sync-device-actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

.sync-devices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sync-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-bg);
  color: var(--app-fg);
  font: 400 13px / 1.3 var(--sans);
}

.sync-device-name {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.sync-device b {
  display: inline;
  color: var(--app-fg);
  font: 600 13px / 1.3 var(--sans);
}

.sync-dot {
  margin-right: 6px;
  color: var(--app-def);
  font-size: 11px;
  line-height: 1;
}

.sync-quiet {
  color: var(--app-comment);
  font: 400 13px / 1.3 var(--sans);
  /* A flex item drops a leading space, so the dot would sit against the name. */
  white-space: pre-wrap;
}

.sync-panel [data-sync-set] > .sync-name {
  margin-bottom: var(--space-4);
}

.sync-panel [data-sync-set] > .sync-actions {
  margin-top: var(--space-4);
}

.sync-when {
  flex: none;
  color: var(--app-comment);
  font: 400 12px / 1.3 var(--sans);
}

.sync-device[data-self="1"] {
  background: var(--app-bg);
}

.sync-device[data-self="1"] .sync-dot {
  color: var(--app-def);
}

.sync-device[data-self="1"] b {
  color: var(--app-fg);
}

.sync-video {
  width: 100%;
  max-height: 224px;
  margin: 0 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--app-side);
}

@media (max-width: 760px) {
  .sync-choices {
    grid-template-columns: 1fr 1fr;
  }

  /* Every sync screen is a sheet. The editor stays dimmed behind it. */
  .settings-card:has(.sync-panel:not([hidden])),
  .settings-card:has(.sync-panel.sync-sheet) {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: calc(100% - var(--bar) - var(--safe-top) - var(--space-3));
    transform: none;
    overflow: auto;
    padding-bottom: calc(16px + var(--safe-bottom));
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--black) 60%, transparent);
  }

  .sync-panel .sync-words-grid {
    width: 100%;
  }

  /* The device list scrolls. Add and Turn sync off stay under it. */
  .settings-card:has(.sync-panel:not([hidden]) .sync-devices) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .settings-card:has(.sync-panel:not([hidden]) .sync-devices) > .settings-head,
  .settings-card:has(.sync-panel:not([hidden]) .sync-devices) > .settings-tabs {
    flex: none;
  }

  .settings-card:has(.sync-panel:not([hidden]) .sync-devices) > .sync-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .sync-panel [data-sync-set] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .sync-devices {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}

@media (pointer: coarse), (max-width: 760px) {
  .sync-panel {
    font-size: var(--type-body);
  }

  .sync-phrase:focus,
  .sync-name:focus:not(.sync-join-input) {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sync-chip {
    transition: none;
  }
}