/* 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 installed app draws edge to edge (viewport-fit=cover). The page, the
   bar, and the safe areas are one colour, so the clock and the home
   indicator do not sit on a different strip. */
html:has(body.app-page) {
  height: 100%;
  overflow: hidden;
  background: var(--app-bg);
}

.app-page {
  --bar: 56px;
  /* Room for the notch and the home indicator when the page runs under them
     (installed, or Safari with viewport-fit=cover). Zero on a desktop window. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --side-w: 240px;
  --line-h: 1.7;
  --font-size: 15px;
  --res-w: 12ch;
  /* Fixed to the viewport. Safari's toolbar is the viewport. The installed
     app's viewport stops short of the screen; the standalone rule below
     adds that strip back. */
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-fg);
}

.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 ---------- */

.bar {
  position: relative;
  z-index: 50;
  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;
  -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);
}

/* "Private": a reminder that sheets never leave this browser; a tap explains. */
.private-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--app-dim);
  font: 500 12.5px var(--sans);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.private-chip:hover {
  color: var(--text);
  border-color: var(--line-2);
}

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

.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);
}

.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;
}

.side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* The panel reaches the physical bottom edge; this keeps its footer above
     the home indicator instead of sliced by it. */
  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;
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Lined up with the sheet names, and the buttons with the rows' right edge. */
  padding: 10px 8px 6px 18px;
  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. */
  flex: 1;
  padding: 10px 0 14px;
  cursor: pointer;
}

/* 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 {
  --side-w: 52px;
}

.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 8px 12px;
  touch-action: pan-y;
}

.sheet-list .side-row {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  height: var(--hit);
  padding: 0 2px 0 calc(var(--space-1) + var(--depth, 0) * 14px);
  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 .chevron,
.sheet-list .row-more {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
}

.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 {
  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;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* 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;
  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;
  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;
  z-index: 30;
  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;
  top: 0;
  right: auto;
  z-index: 35;
  min-width: 180px;
}

.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) 45%, transparent);
  cursor: pointer;
}

.settings-card {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: max(8vh, var(--space-6));
  transform: translateX(-50%);
  width: min(560px, calc(100vw - var(--space-6)));
  max-height: min(640px, calc(100vh - var(--space-6) * 2));
  overflow: auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--app-bg);
  color: var(--app-fg);
  box-shadow: var(--shadow-lg);
}

.settings-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.settings-card h2 {
  margin: 0;
  font: 600 var(--type-display) / 1.2 var(--sans);
  letter-spacing: -0.02em;
}

.settings-tabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--app-hover);
}

.settings-tabs button {
  flex: 1;
  min-height: var(--hit);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--app-dim);
  font: 600 var(--type-body) / 1 var(--sans);
  padding: var(--space-2) var(--space-3);
  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: var(--shadow-sm);
}

.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;
    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: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(8px);
  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: calc(var(--bar) + var(--safe-top));
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(300px, 84vw);
    transform: translateX(-102%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none;
  }

  .app-page.drawer .side {
    transform: none;
    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;
  }

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

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

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

  /* The top bar keeps the sheet's name; Private moves into the ⋯ menu. */
  .private-chip {
    display: none;
  }

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

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

  .private-chip {
    padding: 7px;
  }

  .private-chip span {
    display: none;
  }

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

.drawer-scrim {
  display: none;
}

/* Home Screen: the layout viewport is shorter than the phone. Grow the shell
   by that strip. The sidebar and the scrim are fixed to the short viewport,
   so they grow by the same amount. The home indicator stays padding. */
@media (display-mode: standalone) {
  .app-page {
    bottom: auto;
    height: calc(100% + var(--standalone-gap, var(--safe-bottom)));
  }
}

@media (display-mode: standalone) and (max-width: 760px) {
  .side,
  .drawer-scrim,
  .settings-card {
    bottom: calc(var(--standalone-gap, var(--safe-bottom)) * -1);
  }
}

@media (max-width: 760px) {
  html.standalone .app-page {
    bottom: auto;
    height: calc(100% + var(--standalone-gap, var(--safe-bottom)));
  }

  html.standalone .side,
  html.standalone .drawer-scrim,
  html.standalone .settings-card {
    bottom: calc(var(--standalone-gap, var(--safe-bottom)) * -1);
  }
}

html.standalone .app-page {
  bottom: auto;
  height: calc(100% + var(--standalone-gap, var(--safe-bottom)));
}

/* 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;
  min-height: var(--hit);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--app-dim);
  font: 500 var(--type-caption) / 1 var(--sans);
  cursor: pointer;
}

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

.sync-chip[data-state="on"] {
  color: var(--app-fg);
  border-color: 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) {
  .sync-beta {
    display: block;
  }
}

.sync-label {
  margin: 0 0 var(--space-3);
  color: var(--app-comment);
  font: 500 var(--type-caption) / 1.2 var(--sans);
}

.sync-panel h2,
.sync-panel h3 {
  margin: 0 0 var(--space-2);
  color: var(--app-fg);
  font: 600 var(--type-body) / 1.3 var(--sans);
}

.sync-panel .setting-help {
  margin: 0 0 var(--space-3);
}

.sync-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.sync-actions .btn {
  width: 100%;
}

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

.sync-word {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  min-height: var(--hit);
  padding: var(--space-2);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-side);
  color: var(--app-fg);
  font: 500 var(--type-body) / 1.3 var(--sans);
}

.sync-word b {
  color: var(--app-comment);
  font: 500 var(--type-caption) / 1 var(--mono);
}

.sync-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

.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 span {
  color: var(--app-comment);
  font: 400 var(--type-caption) / 1.3 var(--sans);
}

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

.sync-choices {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
  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 {
  min-height: var(--hit);
  padding: var(--space-2);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: var(--app-side);
  color: var(--app-fg);
  font: 500 var(--type-body) / 1.3 var(--sans);
  cursor: pointer;
}

.sync-choice[aria-pressed="true"] {
  border-color: var(--app-accent);
  background: var(--app-sel);
}

.sync-code {
  margin: var(--space-3) 0;
  color: var(--app-fg);
  font: 600 var(--type-display) / 1.2 var(--mono);
  text-align: center;
}

.sync-phrase,
.sync-name {
  width: 100%;
  min-height: var(--hit);
  margin: 0 0 var(--space-2);
  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: 400 var(--type-body) / 1.4 var(--sans);
}

.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 0;
  color: var(--app-danger);
  font: 400 var(--type-caption) / 1.4 var(--sans);
}

.sync-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--hit);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--app-line);
}

.sync-device b {
  display: block;
  color: var(--app-fg);
  font: 550 var(--type-body) / 1.3 var(--sans);
}

.sync-device span {
  color: var(--app-comment);
  font: 400 var(--type-caption) / 1.3 var(--mono);
}

.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;
  }
}

@media (pointer: coarse), (max-width: 760px) {
  .sync-phrase,
  .sync-name {
    font-size: max(16px, 1em);
  }
}

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